update

src/apollo-table/component/Cell.less

@@ -15,7 +15,6 @@
     position: absolute;
     z-index: 1;
     width: 100%;
-    height: 100%;
     top: 0;
     left: 0;
 }

src/apollo-table/component/Cell.tsx

@@ -32,6 +32,7 @@ const Cell = (props: CellProps) => {
         cellData.map((item) => {
             temp.push({ text: item.text, value: item.value });
         });
+        debugger
         if (_.isEqual(temp, changedValue)) {
             setStatus('detail');
             return;

src/apollo-table/component/Table.less

@@ -64,3 +64,12 @@
 .bodyCell {
     font-size: 20px;
 }
+.fillHandleWrapper {
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+}

src/apollo-table/component/Table.tsx

@@ -105,7 +105,7 @@ export default class AirTable extends Component<TableProps, TableState> {
     onScroll = ({ clientHeight, scrollHeight, scrollTop }: any) => {
         const height = clientHeight + scrollTop || 0;
         const { onScroll, distanceToLoad = 100 } = this.props;
-        if (scrollTop > 0 && height + distanceToLoad >= scrollHeight && typeof onScroll === 'function') {
+        if (scrollTop > 0 && height >= (scrollHeight - distanceToLoad) && typeof onScroll === 'function') {
             onScroll();
         }
     };
@@ -331,11 +331,11 @@ export default class AirTable extends Component<TableProps, TableState> {
                                                             width={width}
                                                             rowHeight={rowHeight}
                                                             rowCount={rowCount}
-                                                            height={totalHeight}
                                                             onScroll={(...arg: Array<Object>) => {
                                                                 onScroll(...arg);
                                                                 this.onScroll(arg[0]);
                                                             }}
+                                                            height={totalHeight}
                                                             cellRenderer={this.renderBodyRow.bind(this, data)}
                                                             columns={columns}
                                                         />
@@ -346,6 +346,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                                     }}
                                 </AutoSizer>
                             </div>
+                            <div className={styles.fillHandleWrapper} />
                         </div>
                     );
                 }}

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

@@ -26,7 +26,15 @@ export const GetFormatter = {
             return { value: item.value, name: text, size };
         });
     },
-    CHECKBOX: (val) => {
+    CHECKBOX: (val, config) => {
+        const { isMultiple } = config || {};
+        if (isMultiple) {
+            return Array.isArray(val)
+                ? val.map((item) => {
+                      return item.value;
+                  })
+                : [];
+        }
         const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
         return obj.value;
     },
@@ -57,8 +65,7 @@ export const GetFormatter = {
         return obj.value ? moment(obj.value) : void 0;
     },
     LINK: (val) => {
-        const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
-        return obj.value;
+        return  Array.isArray(val) && val.length > 0 ? val : [];
     },
     MULTIPLE_SEARCH: (val) => {
         if (!Array.isArray(val)) return void 0;

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

@@ -28,9 +28,16 @@ export const SetFormatter = {
         if (!val) return null;
         return val.map((item) => ({ value: item.value, text: item.name + '(' + item.size + ')' }));
     },
-    CHECKBOX: (event) => {
-        const node = event.currentTarget || {};
-        return [{ value: node.value, text: node.value }];
+    CHECKBOX: (value) => {
+        if (!value) {
+            return emptyModel;
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => {
+                return { value: item, text: item };
+            });
+        }
+        return [{ value: value, text: value }];
     },
     SELECT: (val) => {
         // 处理成[{}]结构
@@ -77,9 +84,8 @@ export const SetFormatter = {
         val = val.format ? val.format(setFormat) : val;
         return [{ value: val, text: val }];
     },
-    LINK: (event) => {
-        const node = event.currentTarget || {};
-        return [{ value: node.value, text: node.value }];
+    LINK: (val) => {
+        return Array.isArray(val) && val.length > 0 ? val : [emptyModel];
     },
     MULTIPLE_SEARCH: (val) => {
         if (!val || typeof val !== 'object') return val;

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

@@ -17,7 +17,7 @@ export const config: any = {
     },
     '2': {
         name: '超链接',
-        component: require('./edit/search').default,
+        component: require('./edit/link').default,
         getFormatter: GetFormatter.LINK,
         setFormatter: SetFormatter.LINK,
         detail: require('./detail/link').default,
@@ -45,6 +45,10 @@ export const config: any = {
         component: require('./edit/checkbox').default, // 暂未添加
         getFormatter: GetFormatter['CHECKBOX'],
         setFormatter: SetFormatter['CHECKBOX'],
+        componentAttr: {
+            autoFocus: true,
+            emitTrigger: 'onBlur',
+        },
         detail: require('./detail/checkbox').default,
     },
     '6': {

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

@@ -3,13 +3,20 @@ import styles from './index.less';
 import { CommonProps } from '../detailInterface';
 
 export default function Detail(props: CommonProps) {
-    const { value, formatter } = props;
-    const formatValue = formatter ? formatter(value) : value;
-    if (!formatValue) return null;
+    const { value, componentAttr } = props;
+    if (!value) return null;
 
-    if (typeof formatValue === 'string') {
-        return <div className={styles.text}>{formatValue}</div>;
+    const { isMultiple } = componentAttr || {};
+    let text = '';
+    if (isMultiple) {
+        text = (Array.isArray(value)
+            ? value.map((item) => {
+                  return item.text;
+              })
+            : []
+        ).join('，');
     } else {
-        return '数据错误';
+        text = Array.isArray(value) && value.length > 0 ? value[0].text : '';
     }
+    return <div className={styles.text}>{text}</div>;
 }

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

@@ -3,13 +3,21 @@ import styles from './index.less';
 import { LinkProps } from '../detailInterface';
 
 export default function Detail(props: LinkProps) {
-    const { value, formatter } = props;
-    const formatValue = formatter ? formatter(value) : value;
-    if (!formatValue) return null;
-
-    if (typeof formatValue === 'string') {
-        return <div className={styles.text}>{formatValue}</div>;
-    } else {
-        return '数据错误';
+    const { value } = props;
+    if (!value) return null;
+    if (Array.isArray(value)) {
+        return (
+            <div className={styles.text}>
+                {value.map((item, i) => {
+                    return (
+                        <div key={i}>
+                            <a target="_blank" href={item.value} style={{ textDecoration: 'underline' }}>
+                                {item.text || item.value}
+                            </a>
+                        </div>
+                    );
+                })}
+            </div>
+        );
     }
 }

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

-import React from 'react';
-import { Input } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Checkbox } from 'antd';
 import styles from './styles.less';
-import { CommonProps } from '../editInterface';
+import { ApolloCheckboxProps, ApolloCheckboxGroupProps } from '../editInterface';
 
-export default function(props: CommonProps) {
-    const { value, placeholder,onChange } = props;
-    const selfProps = { value, placeholder,onChange };
+import { antiAssign } from '@/apollo-table/utils/utils';
+
+const ApolloCheckbox = (props: ApolloCheckboxProps) => {
+    const { onChange, emitTrigger, onEmitChange, label } = props;
+    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'label']);
+    const [checked, setChecked] = useState(!!props.value);
+    const changeValue = (e) => {
+        setChecked(e.target.checked);
+        if (typeof onChange === 'function') {
+            onChange(e.target.checked);
+        }
+        if (!emitTrigger || emitTrigger === 'onChange') {
+            emitChange(e.target.checked);
+        }
+    };
+
+    const emitChange = (value) => {
+        if (typeof onEmitChange === 'function') {
+            onEmitChange(value);
+        }
+    };
+    const onBlur = (e) => {
+        emitChange(e.target.checked);
+    };
+    if (emitTrigger === 'onBlur') {
+        selfProps.onBlur = onBlur;
+    }
     return (
         <div className={styles.container}>
-            <Input className={styles.input} {...selfProps} />
+            <Checkbox className={styles.checkbox} {...selfProps} checked={checked} onChange={changeValue}>
+                {label}
+            </Checkbox>
+        </div>
+    );
+};
+const ApolloCheckboxGroup = (props: ApolloCheckboxGroupProps) => {
+    const { 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 dom = useRef();
+    const changeValue = (value) => {
+        setValue(value);
+        dom.current = value;
+        if (typeof onChange === 'function') {
+            onChange(value);
+        }
+        if (!emitTrigger || emitTrigger === 'onChange') {
+            emitChange(value);
+        }
+    };
+
+    const emitChange = (value) => {
+        if (typeof onEmitChange === 'function') {
+            onEmitChange(value);
+        }
+    };
+    const onBlur = () => {
+        emitChange(dom.current);
+    };
+    useEffect(() => {
+        document.addEventListener('click', onBlur, false);
+        return () => {
+            document.removeEventListener('click', onBlur, false);
+        };
+    }, []);
+    const onClick = (e) => {
+        e.stopPropagation(); //阻止事件冒泡
+        e.nativeEvent.stopImmediatePropagation();
+    };
+    return (
+        <div className={styles.container} onClick={onClick}>
+            <Checkbox.Group className={styles.checkboxGroup} {...selfProps} value={value} onChange={changeValue} />
         </div>
     );
-}
+};
+const ApolloCheck = (props) => {
+    const { isMultiple } = props;
+
+    if (isMultiple) {
+        const groupProps = antiAssign(props, ['columnConfig', 'isMultiple']);
+        return ApolloCheckboxGroup(groupProps);
+    }
+    const selfProps = antiAssign(props, ['columnConfig', 'isMultiple', 'options']);
+    return ApolloCheckbox(selfProps);
+};
+
+export default ApolloCheck;

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

@@ -2,16 +2,14 @@
     position: relative;
     top: 0;
     left: 0;
-
-    .input {
-        padding-right: 100px;
+    width: 100%;
+    height: 100%;
+    font-size: 0;
+    .checkbox {
+        width: 100%;
     }
-
-    .wordNumber {
-        position: absolute;
-        color: #E1E1E1FF;
-        font-size: 12px;
-        right: 7px;
-        top: 7px;
+    .checkboxGroup {
+        width: 100%;
+        padding: 5px;
     }
 }

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

@@ -2,7 +2,12 @@ import { DatePickerProps } from 'antd/es/date-picker/interface';
 import { TextAreaProps, InputProps } from 'antd/es/input';
 import { InputNumberProps } from 'antd/es/input-number';
 import { SelectProps } from 'antd/es/select';
+import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox';
 
+export interface LinkData {
+    text?: string;
+    value: string;
+}
 export interface CommonProps {
     onEmitChange?: Function;
     emitTrigger?: string;
@@ -10,13 +15,10 @@ export interface CommonProps {
 export interface ApolloInputProps extends InputProps, CommonProps {
     value: string | undefined;
 }
-export interface LinkProps extends CommonProps {
-    value: any[];
-    maxLength: number;
-}
-export interface LinkState {
-    prevProps: LinkProps;
-    value: any[];
+export interface ApolloLinkProps extends CommonProps {
+    value: LinkData[];
+    onChange: Function;
+    columnConfig: any;
 }
 export interface ApolloTextAreaProps extends TextAreaProps, CommonProps {
     value: string | undefined;
@@ -45,3 +47,7 @@ export interface ApolloNumberProps extends InputNumberProps, CommonProps {
     floatRange?: number;
 }
 export interface ApolloDateProps extends DatePickerProps, CommonProps {}
+export interface ApolloCheckboxProps extends CheckboxProps, CommonProps {
+    label: string;
+}
+export interface ApolloCheckboxGroupProps extends CheckboxGroupProps, CommonProps {}

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

@@ -6,7 +6,7 @@ import { ApolloInputProps } from '../editInterface';
 
 const ApolloInput = (props: ApolloInputProps) => {
     const { maxLength, onChange, emitTrigger, onEmitChange, style } = props;
-    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']);
+    const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']);
     const [value, setValue] = useState(props.value);
     useEffect(() => {
         setValue(props.value);

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

-import React from 'react';
-import { Input, Button } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import { Input } from 'antd';
 import IconFont from '../../extra/iconFont';
 import styles from './styles.less';
-import { LinkProps, LinkState } from '../editInterface';
+import { ApolloLinkProps } from '../editInterface';
 
-class Link extends React.Component<LinkProps, LinkState> {
-    static getDerivedStateFromProps(nextProps: LinkProps, prevState: LinkState) {
-        const { prevProps } = prevState;
-        let nextState: LinkState = {
-            ...prevState,
-            prevProps: nextProps,
-        };
-        if (JSON.stringify(prevProps.value) !== JSON.stringify(nextProps.value)) {
-            nextState.value = nextProps.value;
-        }
-        return nextState;
-    }
-    constructor(props: LinkProps) {
-        super(props);
-        const { value } = props;
-        this.state = {
-            prevProps: props,
-            value,
+const Link = (props: ApolloLinkProps) => {
+    const { onEmitChange } = props;
+    const [value, setValue] = useState(props.value);
+    const dom = useRef(value);
+    const changeText = (i, e) => {
+        const newValue = (value && value.slice()) || [];
+        newValue[i].text = e.target.value;
+        setValue(newValue);
+        dom.current = newValue;
     };
-    }
-
-    addLink = () => {
-        const { value } = this.state;
+    const changeValue = (i, e) => {
         const newValue = (value && value.slice()) || [];
-        newValue.push({});
-        this.setState({
-            value: newValue,
-        });
+        newValue[i].value = e.target.value;
+        setValue(newValue);
+        dom.current = newValue;
     };
-
-    changeLinkValue = (index, e) => {
-        const { value } = this.state;
-        const temp = value[index];
-        temp.value = e.target.value;
-        this.setState(
-            {
-                value,
-            },
-            this.changeLink,
-        );
+    const addLink = () => {
+        const newValue = (value && value.slice()) || [];
+        newValue.push({ text: '', value: '' });
+        setValue(newValue);
+        dom.current = newValue;
     };
-
-    changeLinkText = (index, e) => {
-        const { value } = this.state;
-        const temp = value[index];
-        temp.text = e.target.value;
-        this.setState(
-            {
-                value,
-            },
-            this.changeLink,
-        );
+    const delLink = (i) => {
+        let newValue = (value && value.slice()) || [];
+        newValue.splice(i, 1);
+        setValue(newValue);
+        dom.current = newValue;
     };
-
-    changeLink = () => {
-        const { onChange } = this.props;
-        const { value } = this.state;
-        if (typeof onChange === 'function') {
-            onChange(value);
+    const emitChange = (value) => {
+        if (typeof onEmitChange === 'function') {
+            onEmitChange(value);
         }
     };
-
-    render() {
-        const { value } = this.state;
+    const onBlur = () => {
+        emitChange(dom.current);
+    };
+    useEffect(() => {
+        document.addEventListener('click', onBlur, false);
+        return () => {
+            document.removeEventListener('click', onBlur, false);
+        };
+    }, []);
+    const onClick = (e) => {
+        e.stopPropagation(); //阻止事件冒泡
+        e.nativeEvent.stopImmediatePropagation();
+    };
     return (
-            <div className={styles.container}>
+        <div className={styles.container} onClick={onClick}>
             {value &&
                 value.map((link, i) => {
                     return (
-                            <div key={i}>
-                                <div>
-                                    <span>链接地址：</span>
+                        <div key={i} className={styles.content}>
+                            <div className={styles.row}>
+                                <span className={styles.label}>显示文字：</span>
+                                <Input className={styles.input} value={link.text} onChange={changeText.bind(null, i)} />
+                            </div>
+                            <div className={styles.row}>
+                                <span className={styles.label}>链接地址：</span>
                                 <Input
                                     className={styles.input}
                                     value={link.value}
-                                        onChange={this.changeLinkValue.bind(this, i)}
+                                    onChange={changeValue.bind(null, i)}
                                 />
+                                <div className={styles.delContainer} onClick={delLink.bind(null, i)}>
+                                    <IconFont className={styles.del} type="iconshanchu" />
                                 </div>
-                                <div>
-                                    <span>显示文字：</span>
-                                    <Input
-                                        className={styles.input}
-                                        value={link.text}
-                                        onChange={this.changeLinkText.bind(this, i)}
-                                    />
                             </div>
                         </div>
                     );
                 })}
-                <Button type="primary" className={styles.btn} onClick={this.addLink}>
+            <div className={styles.btn} onClick={addLink}>
                 <IconFont className={styles.icon} type="iconxinzeng" />
-                    <span className={styles.text}>新增</span>
-                </Button>
+            </div>
         </div>
     );
-    }
-}
+};
 export default Link;

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

+@import '~@/common';
 .container {
     position: relative;
     top: 0;
     left: 0;
-
+    width: 100%;
+    background: white;
+    padding: @paddingSmX;
+    border: 1px solid @primaryColor;
+    .content {
+        border-bottom: 1px solid @borderColor;
+        .row {
+            display: flex;
+            align-items: center;
+            padding: @paddingSmX 0;
+            .label {
+                width: 60px;
+                font-size: @textFontSm;
+            }
             .input {
-        padding-right: 100px;
-    }
-
-    .wordNumber {
-        position: absolute;
-        color: #E1E1E1FF;
-        font-size: 12px;
-        right: 7px;
-        top: 7px;
+                flex: 1;
+            }
+            .delContainer {
+                width: 20px;
+                text-align: center;
+                cursor: pointer;
+                .del {
+                    font-size: @textFontSm;
+                }
+            }
+        }
+    }
+    .btn {
+        .icon{
+            font-size: @textFontSm;
+            cursor: pointer;
+        }
     }
 }

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

@@ -6,7 +6,7 @@ import { antiAssign } from '@/apollo-table/utils/utils';
 
 const ApolloNumber = (props: ApolloNumberProps) => {
     const { onChange, emitTrigger, onEmitChange } = props;
-    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
+    const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']);
     const [value, setValue] = useState(props.value);
     useEffect(() => {
         setValue(props.value);

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

@@ -6,7 +6,7 @@ import styles from './styles.less';
 
 const ApolloSelect = (props: ApolloSelectProps) => {
     const { options = [], onChange, emitTrigger, onEmitChange, isMultiple } = props;
-    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']);
+    const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']);
     const [value, setValue] = useState(props.value);
     const [option, setOption] = useState(undefined);
     useEffect(() => {

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

@@ -6,7 +6,7 @@ import { ApolloTextAreaProps } from '../editInterface';
 
 const ApolloTextArea = (props: ApolloTextAreaProps) => {
     const { maxLength, onChange, emitTrigger, onEmitChange } = props;
-    const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']);
+    const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']);
     const [value, setValue] = useState(props.value);
     useEffect(() => {
         setValue(props.value);

src/test/demo1.tsx

@@ -31,7 +31,8 @@ const Demo1 = (props) => {
         const getColumnsList = async () => {
             const res = await getColumnConfig({ tableId });
             if (res && res.success && res.data) {
-                const arr = Array.isArray(res.data) ? res.data : [];
+                let arr = Array.isArray(res.data) ? res.data : [];
+                arr[0].columnType=2;
                 setColumns(formatColumns(arr));
             }
         };
@@ -104,12 +105,7 @@ const Demo1 = (props) => {
             const value = moment(cellData[0] && cellData[0].value);
             return (
                 <div className={s.xxx}>
-                    <DatePicker
-                        value={value}
-                        getPopupContainer={(trigger) => {
-                            return trigger.parentElement;
-                        }}
-                    />
+                    <Input/>
                 </div>
             );
         }
@@ -132,7 +128,7 @@ const Demo1 = (props) => {
             dataSource={dataSource}
             onScroll={debounceScroll}
             emitChangeCell={emitChangeCell}
-            bordered={true}
+            bordered={false}
             rowClassName={s.row}
         />
     );