merge

components/apolloTable/component/Cell.tsx

@@ -371,12 +371,14 @@ const Cell = (props: CellProps) => {
                         emitChangeCellData(value, optionValue, reset);
                     }}
                     tableId={tableId}
+                    rowId={record.id}
                     cellRenderProps={cellRenderProps}
                     style={{
                         minHeight: cellStyle.height,
                         borderRadius: 0,
                     }}
                     maxPopHeight={maxPopHeight}
+                    autoFocus={true}
                 />
             </div>
         );

components/apolloTable/component/base/edit/editInterface.tsx

@@ -14,8 +14,10 @@ export interface CommonProps {
     onEmitChange?: Function;
     isMobile?: boolean;
     origin?: string;
-    tableId?: string|number;
+    tableId?: number;
+    rowId?: number;
     onBlurFn?: Function;
+    columnConfig?: any;
 }
 export interface ApolloInputProps extends InputProps, CommonProps {
     value: string | undefined;
@@ -23,10 +25,11 @@ export interface ApolloInputProps extends InputProps, CommonProps {
 export interface ApolloLinkProps extends CommonProps {
     value: LinkData[];
     onChange: Function;
-    columnConfig: any;
 }
 export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
     value: string | undefined;
+    getDetail?: Function;
+    maxPopHeight?: number;
 }
 export interface ApolloSearchProps extends SelectProps<any>, CommonProps {
     type: string;
@@ -41,7 +44,7 @@ export interface ApolloInputSearchProps extends SelectProps<any>, CommonProps {
 export interface ApolloSelectProps extends SelectProps<any>, CommonProps {
     isMultiple?: boolean;
     options?: any[];
-    maxPopHeight?:boolean;
+    maxPopHeight?: number;
 }
 export interface ApolloNumberProps extends InputNumberProps, CommonProps {}
 export interface ApolloCheckboxProps extends CheckboxProps, CommonProps {

components/apolloTable/component/base/edit/onBlurFn.tsx → components/apolloTable/component/base/edit/onBlurFn.ts

@@ -3,18 +3,20 @@ import { config } from '../config';
 
 export const onBlurFn = (props: any) => {
     const { columnConfig, rowId, onBlurFn, value } = props;
-    const { type } = columnConfig
-    const extraData: any[] = []
+    const { type } = columnConfig;
+    const extraData: any[] = [];
     if (typeof onBlurFn === 'function') {
-        const newVal = setFormat(config[type], columnConfig, value)
+        const newVal = setFormat(config[type], columnConfig, value);
         extraData.push({
             columnCode: columnConfig.columnName,
             cellValueList: newVal,
         });
-        onBlurFn({
-            rowId,
-            value: extraData,
-        }, newVal);
+        onBlurFn(
+            {
+                rowId,
+                value: extraData,
+            },
+            newVal,
+        );
     }
 };
-

components/apolloTable/component/base/edit/textarea/index.tsx

-import React, { useEffect, useState } from 'react';
-import { Input, Modal } from 'antd';
+import React, { useEffect, useState, useRef } from 'react';
+import { Input } from 'antd';
 import styles from './styles.less';
 import { onBlurFn } from '../onBlurFn';
 import { antiAssign } from '../../../../utils/utils';
 import { ApolloTextAreaProps } from '../editInterface';
 import { Consumer } from '../../../context';
+import { placeCaretAtEnd } from '../../../../utils/autoFocus';
 
 export const ApolloTextArea = (props: ApolloTextAreaProps) => {
-    const { maxLength, onChange, value, getDetail, rowData, onEmitChange, columnConfig, origin, tableId } = props;
-    const { columnChsName } = columnConfig;
+    const {
+        maxLength,
+        onChange,
+        value,
+        getDetail,
+        rowId,
+        onEmitChange,
+        columnConfig,
+        origin,
+        tableId,
+        maxPopHeight,
+    } = props;
+    const { columnName } = columnConfig;
     const selfProps = antiAssign(props, [
         'columnConfig',
         'onChange',
-        'value',
         'cutLength',
         'getDetail',
         'onEmitChange',
@@ -30,69 +41,49 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
     ]);
     selfProps.disabled = !!props.disabled;
     const [curValue, setCurValue] = useState(value);
-    const [visible, setVisible] = useState(false);
+    const divInput = useRef(null);
     useEffect(() => {
         if (origin !== 'editForm') {
             getMore();
+            if (divInput && divInput.current) {
+                placeCaretAtEnd(divInput.current);
+            }
         }
     }, []);
 
-    const [inputVal, setInputVal] = useState(value);
-    useEffect(() => {
-        setInputVal(value);
-    }, [value]);
+    const getMore = async () => {
+        if (getDetail && rowId) {
+            let newValue = await getDetail({ rowId });
+            if (newValue) {
+                newValue = newValue[0] && newValue[0].value;
+                setCurValue(newValue);
+            }
+        }
+    };
+
     const changeValue = (e: any) => {
         if (typeof onChange === 'function') {
             onChange(e.target.value);
         }
     };
     const inputOnBlurFn = () => {
-        if (typeof onBlurFn === 'function') {
-            onBlurFn(props);
+        if (origin === 'editForm') {
+            if (typeof onBlurFn === 'function') {
+                onBlurFn(props);
+            }
+        } else {
+            if (typeof onEmitChange === 'function') {
+                onEmitChange(curValue);
+            }
         }
     };
     const changeCurValue = (e: any) => {
         if (typeof onChange === 'function') {
-            setCurValue(e.target.value);
-        }
-    };
-
-    const clearEdit = () => {
-        // 清除所有dom的编辑状态
-        const doms = document.querySelectorAll(`.cellUnit.table_${tableId}`);
-        if (doms) {
-            doms.forEach((item) => {
-                item.setAttribute('data-editing-cell', '0');
-            });
-        }
-    };
-
-    const hide = () => {
-        if (typeof onEmitChange === 'function') {
-            onEmitChange(value);
-        }
-        clearEdit();
-        setVisible(false);
-    };
-
-    const confirmChange = () => {
-        if (typeof onEmitChange === 'function') {
-            onEmitChange(curValue);
+            setCurValue(e.target.innerText);
         }
-        clearEdit();
-        setVisible(false);
     };
 
-    const getMore = async () => {
-        if (getDetail && rowData) {
-            let newValue = await getDetail({ rowId: rowData.id });
-            if (newValue) {
-                newValue = newValue[0] && newValue[0].value;
-                setCurValue(newValue);
-            }
-        }
-        setVisible(true);
-    };
+    // 表单部分
     if (origin === 'editForm') {
         return (
             <Consumer>
@@ -102,14 +93,9 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
                             <Input.TextArea
                                 className={styles.inputForm}
                                 {...selfProps}
-                                value={inputVal}
                                 onBlur={inputOnBlurFn}
-                                onChange={(e) => {
-                                    changeValue(e);
-                                    setInputVal(e.target.value);
-                                }}
+                                onChange={changeValue}
                             />
-
                             {!!maxLength && (
                                 <span className={styles.wordNumberForm}>
                                     {`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
@@ -121,26 +107,40 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
             </Consumer>
         );
     }
+    // 表格部分
+    const table = document.getElementById(`apolloTable_${tableId}`);
+    const cell = document.getElementById(`cellUnit_${tableId}_${rowId}_${columnName}`);
+    const tableRect = table && table.getBoundingClientRect();
+    const cellRect = cell && cell.getBoundingClientRect();
+    const style: any = {};
+    if (maxPopHeight) {
+        style.maxHeight = maxPopHeight;
+    }
+    if (tableRect && cellRect && maxPopHeight && maxPopHeight + cellRect.top > tableRect.bottom) {
+        style.bottom = 0;
+        style.top = 'auto';
+    }
 
     return (
         <Consumer>
             {({ locale }) => {
                 return (
-                    <div className={styles.container}>
-                        <Input className={styles.cellInput} style={selfProps.style} value={value} />
-                        <Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
-                            <Input.TextArea
-                                className={styles.input}
-                                {...selfProps}
-                                value={curValue}
-                                onChange={changeCurValue}
-                            />
-                            {!!maxLength && (
-                                <span className={styles.wordNumber}>
-                                    {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
-                                </span>
-                            )}
-                        </Modal>
+                    <div className={styles.tableCell} style={style}>
+                        <div
+                            ref={divInput}
+                            contentEditable={!selfProps.disabled}
+                            className={styles.divInput}
+                            {...selfProps}
+                            onBlur={inputOnBlurFn}
+                            onInput={changeCurValue}
+                        >
+                            {value}
+                        </div>
+                        {!!maxLength && (
+                            <span className={styles.numTip}>
+                                {`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
+                            </span>
+                        )}
                     </div>
                 );
             }}

components/apolloTable/component/base/edit/textarea/styles.less

+@import '../../../../common';
 .container {
     position: relative;
     top: 0;
     left: 0;
-    .inputForm{
+    .inputForm {
         padding-bottom: 18px;
     }
     .wordNumberForm {
@@ -12,7 +13,7 @@
         color: #e1e1e1;
         font-size: 12px;
     }
-    .cellInput{
+    .cellInput {
         user-select: none;
     }
 }
@@ -27,3 +28,28 @@
     color: #e1e1e1;
     font-size: 12px;
 }
+.tableCell {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: white;
+    border: 1px solid @primaryColor;
+    padding: @paddingSmX @paddingSm 0;
+    .divInput {
+        outline: none !important;
+        font-size: @textFontGen;
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+    .numTip {
+        height: 20px;
+        line-height: 20px;
+        text-align: right;
+        color: @textSupplyColor;
+        font-size: @textFontSm;
+    }
+}

components/apolloTable/utils/autoFocus.ts

+function placeCaretAtEnd(el) {
+    el.focus();
+    if (typeof window.getSelection !== 'undefined' && typeof document.createRange !== 'undefined') {
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+    } else if (typeof document.body.createTextRange !== 'undefined') {
+        const textRange = document.body.createTextRange();
+        textRange.moveToElementText(el);
+        textRange.collapse(false);
+        textRange.select();
+    }
+}
+export { placeCaretAtEnd };