update

src/apollo-table/component/Cell.less

 @import '../../common';
 
-.cell {
-    max-width: 100%;
-    min-width: 100%;
+.detailCell {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
     height: 100%;
-
-    &.disabled {
-        background: @disabledColor;
-    }
-
-    .cellContent {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-        height: 100%;
-        font-size: 14px;
-    }
+    font-size: @textFontGen;
+    padding: 0 10px;
 }
-
-.editPop {
-    width: 300px;
-
-    :global(.ant-popover-inner){
-        box-shadow: none;
-    }
-
-    :global(.ant-popover-inner-content) {
-        padding: 0;
-        border: 1px solid @primaryColor;
-        border-radius: 2px;
-    }
-}
-
-.menuPop {
-    width: 110px;
-
-    :global(.ant-popover-inner-content) {
-        padding: @paddingSmX 0;
-        border-radius: @borderRadius;
-        background: #333333;
-    }
-
-    .menuContainer {
-        .splitLine {
-            height: 1px;
-            background: white;
-            opacity: 0.2;
-        }
-
-        .menu {
-            display: flex;
-            height: 28px;
-            padding: 0 @paddingGen;
-            align-items: center;
-            cursor: pointer;
-
-            &:hover {
-                background: rgba(216, 216, 216, 0.1);
-            }
-
-            .menuIcon {
-                width: 12px;
-                margin-right: @marginSmX;
-                color: white;
-                font-size: @textFontGen;
-                display: flex;
-            }
-
-            .menuTitle {
-                font-size: @textFontGen;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: white;
-            }
-        }
-    }
+.editCell {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    top: 0;
+    left: 0;
 }

src/apollo-table/component/Table.less

 @import '../../common';
 
-.tableCell {
-    &.sortCol {
-        background: @hoverColor;
-    }
-}
-
-.indexCell {
-    padding: 0 10px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-
-    &.disabled {
-        background: @disabledColor;
-
-        &:hover {
-            box-shadow: none;
-        }
-    }
-
-    &:hover {
-        box-shadow: inset 0 0 0 1px @operateColor;
-
-        .showFormBtnCls {
-            .showFormBtn {
-                display: initial;
-            }
-        }
-
-        .unchecked {
-            display: initial;
-        }
-
-        .no {
-            display: none;
-        }
-
-        .addCls {
-            .addIcon {
-                display: initial;
-            }
-        }
-    }
-
-    .cellNo {
-        display: flex;
-        align-items: center;
-        min-width: 50px;
-    }
-
-    .cellContent {
-        flex: 1;
-        overflow: hidden;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        .firstCell {
-            min-width: 0;
-            max-width: 80%;
-        }
-        .empty {
-            min-width: 80%;
-        }
-        .historyCount {
-            margin: @marginSmX;
-            cursor: pointer;
-            .countNo {
-                color: @primaryColor;
-            }
-        }
-    }
-    .addCls {
-        width: 20px;
-        text-align: center;
-        cursor: pointer;
-        height: 16px;
-        .addIcon {
-            display: none;
-            color: @primaryColor;
-        }
-    }
-
-    .unchecked {
-        display: none;
-    }
-
-    .no {
-        width: 17px;
-        display: block;
-        text-align: center;
-        white-space: nowrap;
-    }
-
-    .showFormBtnCls {
-        margin: 0 5px;
-        width: 18px;
-        cursor: pointer;
-
-        .showFormBtn {
-            display: none;
-            width: 18px;
-            border-radius: 50%;
-            &:hover {
-                background: #d0f0fd;
-            }
-        }
-    }
-}
-
 .GridRow {
     position: relative;
     display: flex;
@@ -171,11 +61,6 @@
     width: 100%;
     outline: none;
 }
-.bodyRow {
-    width: 100%;
-    box-sizing: border-box;
-}
 .bodyCell {
-    width: 100%;
-    height: 100%;
+    font-size: 20px;
 }

src/apollo-table/component/base/_utils/setFormatter.tsx

 export const formatStr = 'YYYY-MM-DD HH:mm:ss';
 export const emptyModel = [{ text: '', value: '' }];
 
+const emptyFormat = (value) => {};
 export const SetFormatter = {
     INPUT: (event) => {
         const node = event.currentTarget || {};
@@ -16,9 +17,11 @@ export const SetFormatter = {
             }));
         }
     },
-    TEXTAREA: (event) => {
-        const node = event.currentTarget || {};
-        return [{ value: node.value, text: node.value }];
+    TEXTAREA: (value) => {
+        if (!value) {
+            return emptyModel;
+        }
+        return [{ value: value, text: value }];
     },
     UPLOAD: (val) => {
         if (!val) return null;

src/apollo-table/component/base/config.tsx

@@ -25,7 +25,8 @@ export const config: any = {
         getFormatter: GetFormatter['TEXTAREA'],
         setFormatter: SetFormatter['TEXTAREA'],
         componentAttr: {
-            autosize: { minRows: 3 },
+            autoSize: true,
+            emitTrigger: 'onBlur',
         },
         detail: require('./detail/textarea').default,
     },

src/apollo-table/component/base/detail/index.tsx

@@ -26,14 +26,7 @@ export const getDetail = (type: string) => {
             const transferColumn = transferAttr(columnType, newProps);
 
             return (
-                <div className={styles.container}>
-                    <Detail
-                        {...this.props}
-                        componentAttr={transferColumn}
-                        formatter={NodeObj.getFormatter}
-                        value={value}
-                    />
-                </div>
+                <Detail {...this.props} componentAttr={transferColumn} formatter={NodeObj.getFormatter} value={value} />
             );
         }
     };

src/apollo-table/component/base/edit/editInterface.tsx

 import { DatePickerProps } from 'antd/es/date-picker/interface';
+import { TextAreaProps } from 'antd/es/input';
 
 export interface CommonProps {
-    value: any[] | undefined;
-    placeholder?: string;
-    formatter?: Function;
-    onChange: any;
-    disabled?: boolean;
+    onEmitChange?: Function;
+    emitTrigger?: string;
 }
 export interface InputProps extends CommonProps {
     maxLength: number;
@@ -18,9 +16,8 @@ export interface LinkState {
     prevProps: LinkProps;
     value: any[];
 }
-export interface TextAreaProps extends CommonProps {
-    maxLength: number;
-    autosize?: boolean | any;
+export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
+    value: string | undefined;
 }
 export interface SearchProps extends CommonProps {
     type: string;

src/apollo-table/component/base/edit/textarea/index.tsx

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Input } from 'antd';
 import styles from './styles.less';
-import { TextAreaProps } from '../editInterface';
+import { antiAssign } from '@/apollo-table/utils/utils';
+import { ApolloTextAreaProps } from '../editInterface';
 
-export default function(props: TextAreaProps) {
-    const { maxLength, value, disabled, placeholder, autosize } = props;
-    const selfProps = { value, disabled, placeholder, autosize };
+const TextArea = (props: ApolloTextAreaProps) => {
+    const { maxLength, onChange, emitTrigger, onEmitChange } = props;
+    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
+    const [value, setValue] = useState(props.value);
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    const changeValue = (e) => {
+        setValue(e.target.value);
+        if (typeof onChange === 'function') {
+            onChange(e.target.value);
+        }
+        if (!emitTrigger || emitTrigger === 'onChange') {
+            emitChange(e);
+        }
+    };
+
+    const emitChange = (e) => {
+        if (typeof onEmitChange === 'function') {
+            onEmitChange(e.target.value);
+        }
+    };
+    if (emitTrigger === 'onBlur') {
+        selfProps.onBlur = emitChange;
+    }
     return (
         <div className={styles.container}>
-            <Input.TextArea className={styles.input} {...selfProps} />
-            {maxLength ? (
-                <span className={styles.wordNumber}>{`已输入${(value || '').length || 0}/${maxLength}`}</span>
-            ) : null}
+            <Input.TextArea className={styles.input} {...selfProps} value={value} onChange={changeValue} />
+            {maxLength && (
+                <span className={styles.wordNumber}>{`已输入${(value || '').length}/${maxLength}`}</span>
+            )}
         </div>
     );
-}
+};
+export default TextArea;

src/apollo-table/component/base/edit/textarea/styles.less

-.container{
+.container {
     position: relative;
-    top:0;
+    top: 0;
     left: 0;
-    .input{
+    .input {
         padding-bottom: 18px;
     }
-    textarea{
+    textarea {
         padding-bottom: 18px;
     }
-.wordNumber{
-    position: absolute;
-    right:12px;
-    bottom: 2px;
-    color:#E1E1E1FF;
-    font-size: 12px;
-}
+    .wordNumber {
+        position: absolute;
+        right: 12px;
+        bottom: 2px;
+        color: #e1e1e1ff;
+        font-size: 12px;
+    }
 }

src/apollo-table/component/base/index.tsx

@@ -17,11 +17,8 @@ export const getComponent = (type: string) => {
         console.error(type + '组件未定义');
         return;
     }
-    const setFormat = (columnConfig: any, values: any[]) => {
+    const setFormat = (columnConfig: any, value: any[]) => {
         const { columnAttrObj, columnType } = columnConfig || {};
-        if (!values || values.length <= 0) return undefined;
-        const value = values[0] || undefined;
-        if (!value) return undefined;
         const transferColumn = transferAttr(columnType, {
             ...(NodeObj.componentAttr || {}),
             ...(columnAttrObj || {}),
@@ -30,67 +27,59 @@ export const getComponent = (type: string) => {
         return value;
     };
 
-    const getFormat = (columnConfig: any, values: any) => {
+    const getFormat = (columnConfig: any, value: any) => {
         const { columnAttrObj, columnType } = columnConfig || {};
-        if (!values || !Array.isArray(values) || values.length <= 0) return undefined;
-        const newValue = values.filter((item) => {
-            return item.value || item.value === 0 || item.label || item.text;
-        });
+        if (!value || !Array.isArray(value) || value.length <= 0) return undefined;
         const transferColumn = transferAttr(columnType, {
             ...(NodeObj.componentAttr || {}),
             ...(columnAttrObj || {}),
         });
         if (NodeObj.getFormatter) {
-            return NodeObj.getFormatter(newValue, transferColumn);
+            return NodeObj.getFormatter(value, transferColumn);
         }
-        return newValue;
+        return value;
     };
     const com: any = class Base extends React.Component<BaseComponentProps, BaseComponentState> {
         static getDerivedStateFromProps(nextProps: BaseComponentProps, prevState: BaseComponentState) {
-            const { prevProps } = prevState;
+            const { columnConfig } = prevState;
 
             let nextState: BaseComponentState = {
                 ...prevState,
-                prevProps: nextProps,
-                columnConfig: nextProps.columnConfig,
-                value: getFormat(nextProps.columnConfig, nextProps.value),
             };
-            if (JSON.stringify(prevProps.columnConfig) !== JSON.stringify(nextProps.columnConfig)) {
+            if (JSON.stringify(columnConfig) !== JSON.stringify(nextProps.columnConfig)) {
                 nextState.columnConfig = nextProps.columnConfig;
             }
-            if (JSON.stringify(nextProps.value) !== JSON.stringify(nextProps.value)) {
-                nextState.value = getFormat(nextProps.columnConfig, nextProps.value);
-            }
             return nextState;
         }
         constructor(props: BaseComponentProps) {
             super(props);
+            const { columnConfig } = props;
             this.state = {
-                prevProps: props,
-                value: undefined,
-                columnConfig: {},
+                columnConfig,
             };
         }
 
-        onChange = ({ changedValue, isBlur }: any) => {
+        onChange = (changedValue: any) => {
             const { columnConfig } = this.state;
-            const { onChange, changeParams } = this.props;
+            const { onChange } = this.props;
             let value = setFormat(columnConfig, changedValue);
-            // 置空默认逻辑
-            if (value && value.length === 0) {
-                value = emptyModel;
-            }
             if (typeof onChange === 'function') {
                 onChange(value);
             }
-            if (typeof changeParams === 'function') {
-                changeParams({ value, changedValue, isBlur });
+        };
+        // 触发修改回调
+        onEmitChange = (changedValue: any) => {
+            const { columnConfig } = this.state;
+            const { onEmitChange } = this.props;
+            let value = setFormat(columnConfig, changedValue);
+            if (typeof onEmitChange === 'function') {
+                onEmitChange(value,changedValue);
             }
         };
 
         render() {
-            const { ...others } = this.props;
-            const { columnConfig, value } = this.state;
+            const { value, ...others } = this.props;
+            const { columnConfig } = this.state;
             const { columnAttrObj, columnType } = columnConfig || {};
             let transferColumn = transferAttr(columnType, {
                 ...(NodeObj.componentAttr || {}),
@@ -100,7 +89,14 @@ export const getComponent = (type: string) => {
                 ...others,
                 ...(transferColumn || {}),
             };
-            return <Node {...newProps} value={value} onChange={this.onChange} />;
+            return (
+                <Node
+                    {...newProps}
+                    value={getFormat(columnConfig, value)}
+                    onChange={this.onChange}
+                    onEmitChange={this.onEmitChange}
+                />
+            );
         }
     };
     com.Detail = getDetail(type);

src/apollo-table/component/index.tsx

@@ -5,32 +5,26 @@ import Table from './Table';
 
 class AirTable extends React.Component<CommonProps, CommonState> {
     static getDerivedStateFromProps(nextProps: CommonProps, prevState: CommonState) {
-        const { prevProps } = prevState;
+        const { columns, dataSource } = prevState;
 
         let nextState: CommonState = {
             ...prevState,
-            prevProps: nextProps,
         };
-        if (JSON.stringify(prevProps.dataSource) !== JSON.stringify(nextProps.dataSource)) {
+        if (JSON.stringify(dataSource) !== JSON.stringify(nextProps.dataSource)) {
             nextState.dataSource = nextProps.dataSource;
         }
-        if (JSON.stringify(prevProps.columns) !== JSON.stringify(nextProps.columns)) {
+        if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) {
             nextState.columns = nextProps.columns;
         }
-        if (prevProps.tableId !== nextProps.tableId) {
-            nextState.tableId = nextProps.tableId;
-        }
         return nextState;
     }
 
     constructor(props: CommonProps) {
         super(props);
-        const { columns, dataSource, tableId } = props;
+        const { columns, dataSource } = props;
         this.state = {
-            prevProps: props,
             columns,
             dataSource,
-            tableId,
         };
     }
 
@@ -42,20 +36,20 @@ class AirTable extends React.Component<CommonProps, CommonState> {
     };
 
     render() {
-        const { columns, dataSource, tableId } = this.state;
-        const { rowStyle, rowClassName } = this.props;
-        const operateConfig = {};
+        const { columns, dataSource } = this.state;
+        const { rowStyle, rowClassName, distanceToLoad, emitChangeCell, bordered } = this.props;
         return (
             <div className={styles.container}>
                 <div className={styles.tableContainer}>
                     <Table
                         columns={columns}
                         dataSource={dataSource}
-                        tableId={tableId}
                         onScroll={this.onScroll}
-                        operateConfig={operateConfig}
                         rowStyle={rowStyle}
                         rowClassName={rowClassName}
+                        distanceToLoad={distanceToLoad}
+                        emitChangeCell={emitChangeCell}
+                        bordered={bordered}
                     />
                 </div>
             </div>

src/apollo-table/component/interface.tsx

 import React from 'react';
 
-export interface CommonProps {
+export interface OperateConfigProps {
+    menusGroup?: Object[];
+    buttonsGroup?: Object[];
+    moreGroup?: Object[];
+}
+
+export interface LoadConfigProps {
+    onScroll?: Function;
+    distanceToLoad?: number;
+}
+export interface EmitChangeProps {
+    emitChangeCell: Function;
+    emitChangeRow?: Function;
+    emitChangeColumns?: Function;
+    emitChangeOperate?: Function;
+}
+export interface TableProps extends LoadConfigProps {
     columns: any[];
     dataSource: any[];
-    tableId: number;
-    checked?: any[];
-    columnWidth?: number;
     rowClassName?: string | Function;
     rowStyle?: Object | Function;
     rowRenderer?: Function;
-    onScroll?:Function;
+    bordered?: boolean;
+    height?: number;
+    width?: number;
+    emitChangeCell: Function;
 }
-
-export interface CommonState {
-    prevProps: CommonProps;
+export interface TableState {
     columns: any[];
     dataSource: any[];
-    tableId: number;
-    checked?: any[];
-    columnWidth?: number;
+    tableHeight?: number;
+    tableWidth?: number;
 }
-
-export interface TableProps extends CommonProps {
-    onScroll: Function;
-    operateConfig: any;
-    changeChecked?: Function;
-    hasGroup?: boolean;
-    updateData?: Function;
-    showForm?: Function;
-    showHistory?: Function;
-    delData?: Function;
-    getData?: Function;
-    flush?: Function;
-    extraMenu?: any;
-    noAdd?: boolean;
-    noEdit?: boolean;
-    noDel?: boolean;
-    rowClassName?: string | Function;
-    rowStyle?: Object | Function;
-    rowRenderer?: Function;
-    rowBorder?:string;
+export interface CommonProps extends TableProps {
+    operateConfig?: OperateConfigProps;
 }
 
-export interface TableState extends CommonState {
-    prevProps: TableProps;
-    tableHeight: number;
-    tableWidth: number;
-}
+export interface CommonState extends TableState {}
+
 export interface RowRendererParams {
-    rowClassName?: string|Function;
+    rowClassName?: string | Function;
     columns: Array<any>;
     rowIndex: number;
     isScrolling: boolean;
@@ -74,39 +66,24 @@ export interface BaseComponentProps {
     columnConfig: any;
     formatter?: Function;
     onChange?: Function;
-    changeParams?: Function;
+    onEmitChange?: Function;
 }
 export interface BaseComponentState {
-    prevProps: BaseComponentProps;
-    value: any[] | undefined;
+    // value: any[] | undefined;
     columnConfig: any;
 }
 export interface CellProps {
-    columns: any[];
+    rowIndex: number;
+    columnIndex: number;
     columnConfig: any;
     rowData: any;
     cellData: any;
-    tableId: number;
-    changeChecked?: Function;
-    hasGroup?: boolean;
-    updateData?: Function;
-    showForm?: any;
-    showHistory?: Function;
-    delData?: Function;
-    getData?: Function;
-    flush?: Function;
-    extraMenu?: any;
-    noAdd?: boolean;
-    noEdit?: boolean;
-    noDel?: boolean;
-    overlayClassName?: string;
+    emitChangeCell: Function;
+    cellClassName?: string;
+    cellStyle: object;
 }
 export interface CellState {
-    prevProps: CellProps;
-    editValue: any[];
-    originValue: any[];
-    isEditVisible: boolean;
-    isMenuVisible: boolean;
+    status: string;
 }
 export interface EditCellProps {
     columns: any[];

src/apollo-table/utils/utils.tsx

@@ -27,7 +27,7 @@ export function getStrLeng(str: string) {
  * @returns {string}    返回随机字符串
  */
 
-export function getRandom(len:number = 6, type?:string, extra?:string) {
+export function getRandom(len: number = 6, type?: string, extra?: string) {
     let num = '0123456789';
     let letter = 'abcdefghigklmnopqrstuvwxyz';
     let upLetter = letter.toUpperCase();
@@ -54,7 +54,68 @@ export function getRandom(len:number = 6, type?:string, extra?:string) {
         str += extra;
     }
     for (let i = 0; i < len; i++) {
-        result += str[Math.floor(Math.random() * str.length)]
+        result += str[Math.floor(Math.random() * str.length)];
     }
     return result;
 }
+
+/**
+ * 提出原对象中指定属性
+ * @param src       原对象
+ * @param anti      属性名称数组
+ */
+export function antiAssign(src: object, anti: string[]) {
+    const result = _.assign({}, src);
+    Object.keys(result).map((key) => {
+        if (anti.includes(key)) {
+            delete result[key];
+        }
+    });
+    return result;
+}
+
+/**
+ * 合并样式class
+ * @param className         原样式名
+ * @param mergeClassName    合并样式名或方法
+ * @param mergeData         合并样式方法的参数
+ */
+export function getMergeClassName(
+    className: string | undefined,
+    mergeClassName: string | Function | undefined,
+    mergeData?: any,
+): string {
+    if (!className) {
+        className = '';
+    }
+    if (!mergeClassName) {
+        mergeClassName = '';
+    }
+    if (typeof mergeClassName === 'function') {
+        className = `${className} ${mergeClassName(mergeData)}`;
+    } else {
+        className = `${className} ${mergeClassName}`;
+    }
+    return className;
+}
+
+/**
+ * 合并样式style
+ * @param style         原样式
+ * @param mergeStyle    合并样式对象或方法
+ * @param mergeData     合并样式方法的参数
+ */
+export function getMergeStyle(style: any, mergeStyle: object | Function | undefined, mergeData: any) {
+    if (!style) {
+        style = {};
+    }
+    if (!mergeStyle) {
+        mergeStyle = {};
+    }
+    if (typeof mergeStyle === 'function') {
+        _.assign(style, mergeStyle(mergeData));
+    } else {
+        _.assign(style, mergeStyle);
+    }
+    return style;
+}

src/test/demo1.less

+.row{
+    color: green;
+}

src/test/demo1.tsx

 import React, { useState, useEffect, useCallback } from 'react';
 import _ from 'lodash';
 import ApolloTable from '../apollo-table';
-import { getColumnConfig, getDataSource } from './serives';
+import { getColumnConfig, getDataSource, addOrUpdateDataSource } from './serives';
 import { message } from 'antd';
+import s from './demo1.less';
 
-const rowStyle = ({ index, record }) => {
+const rowStyle = ({ rowIndex }) => {
     const style: any = {};
-    if (index % 3 === 0) {
+    if (rowIndex % 3 === 0) {
+        style.fontSize = '20px';
         style.background = 'red';
     }
     return style;
@@ -41,10 +43,11 @@ const Demo1 = (props) => {
         hasNextPage: false,
         nextPage: 1,
     });
+    const [flush,setFlush]=useState(false);
     useEffect(() => {
         const getDataList = async () => {
             const data = {
-                pageNum: pageConfig.nextPage,
+                pageNum: pageConfig.pageNum,
                 pageSize: pageConfig.pageSize,
             };
             const res = await getDataSource({ tableId, data });
@@ -59,7 +62,7 @@ const Demo1 = (props) => {
     }, [pageConfig.pageNum]);
     const fetchData = useCallback(async (isClean: boolean) => {
         const data = {
-            pageNum: isClean ? 1 : pageConfig.nextPage,
+            pageNum: isClean ? 1 : pageConfig.pageNum,
             pageSize: pageConfig.pageSize,
         };
         const res = await getDataSource({ tableId, data });
@@ -76,13 +79,21 @@ const Demo1 = (props) => {
         }
     };
     const debounceScroll = _.debounce(onScroll, 400);
+    const emitChangeCell = async ({ rowId, value }) => {
+        const res = await addOrUpdateDataSource({ data: { id: rowId, value } });
+        if (res && res.success) {
+            fetchData(true);
+        }
+    };
     return (
         <ApolloTable
             rowStyle={rowStyle}
             columns={columns}
             dataSource={dataSource}
-            tableId={tableId}
             onScroll={debounceScroll}
+            emitChangeCell={emitChangeCell}
+            bordered={true}
+            rowClassName={s.row}
         />
     );
 };