feat: 修复更新冲突问题 (#577)

* fix: 修复徽章显示错误的问题

* feat: 添加列的的 `headerRenderer` 属性来自定义渲染

fix: 修复carousel的ts类型问题

* fix: 修复表格在弹出框中无法正确的显示编辑框

* fix: 修复eslint

* fix: 修复eslint

* fix: 修复无法在照片墙上进行调用删除文件

* fix: 调整上传组件

* feat: 添加表格的改变事件

* fix: 合并代码

* fix: 修复图片大小的问题

* feat: 修复显示列信息的问题

* feat: 修复tree节点拖动的问题

* feat: 滚动的时候会导致显示的顺序不对

* feat: 修改版本号

* feat: 表格添加隐藏底部， tree 修复拖拽问题

* feat: 修复发布的版本错误

* fix: 修复upload上传图片的问题

* fix: 修复table 表格的问题

* fix: 修复点击check的选中框的时候会导致多次触发的问题

* fix: 添加版本号，发布到1.28.5

* fix: 修复展开的时候，编辑会走缓存

* fix: 添加demo

* fix: 删除多余的TableHandle

* fix: 修复更新的数据的时候没有准确获取数据信息

Co-authored-by: jhoneybee <zhangjin199600908@gmail.com>
Co-authored-by: jhonebee <zhangjin19960908@gamil.com>

packages/react-ui/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@rwp/react-ui",
-    "version": "1.27.1-canary",
+    "version": "1.28.7-canary",
     "license": "AGPL-3.0",
     "scripts": {
         "start": "dumi dev",
         "docs:build": "dumi build",
         "docs:deploy": "gh-pages -d docs-dist",
-        "build": "father-build && yarn build:browser ",
+        "build": "father-build",
         "build:browser": "webpack --config webpack.config.js",
         "deploy": "yarn docs:build && yarn run docs:deploy",
         "lint:script": "yarn build && eslint ./src/**/*.{js,jsx,ts,tsx}",
@@ -27,7 +27,7 @@
     "dependencies": {
         "@ant-design/icons": "~4.3.0",
         "@ant-design/pro-layout": "~6.13.0",
-        "antd": "~4.9.2",
+        "antd": "4.9.2",
         "classnames": "~2.2.6",
         "lodash": "~4.17.15",
         "mobx": "~5.15.6",

packages/react-ui/src/table/column/MultipleSelectColumn.tsx

@@ -6,6 +6,9 @@ import { Checkbox } from '../../index'
 export const MultipleSelectColumn = (props : FormatterProps<any, unknown>) => (
     <Checkbox
         checked={props.isRowSelected}
+        onClick={(e) => {
+            e.stopPropagation();
+        }}
         onChange={(e: { target: { checked: any }; nativeEvent: MouseEvent }) => {
             const { checked } = e.target
             props.onRowSelectionChange(checked, (e.nativeEvent as MouseEvent).shiftKey)

packages/react-ui/src/table/column/PreFormatColumn.tsx

@@ -47,6 +47,8 @@ export const preFormatColumn = (
             ),
             ...restProps
         } = element
+
+        console.log(editable)
         const TempEditor = editable ? editor || Input : undefined
 
 

packages/react-ui/src/table/demo/base-table.tsx

@@ -2,17 +2,57 @@
  * title: 基础表格
  * desc: 这是一个基础的表格,通过`props.columns`来设置列信息, `props.loadData` 来加载表格数据
  */
-import React from 'react'
+import React, { useRef } from 'react'
 // eslint-disable-next-line import/no-unresolved
-import { Table } from '@rwp/react-ui'
+import { Button, Table } from '@rwp/react-ui'
 import { columns, loadData } from './common/user'
+import { useState } from 'react';
 
-export default () => (
-    <Table
-        columns={columns}
-        loadData={loadData}
-        onChangeColumn={(data) => {
-            console.log(data)
-        }}
-    />
-)
+export default () => {
+    const ref = useRef<HTMLDivElement>();
+    const [group,setGroup] = useState<string[]>()
+    return (
+        <div
+            style={{
+                height: 500,
+                overflow: 'scroll'
+            }}
+        >   
+            <Button
+                onClick={() => {
+                    setGroup(['dateBirth'])
+                }}
+            >
+                点击分组
+            </Button>
+            <Table
+                ref={ref}
+                columns={columns}
+                groupColumn={group}
+                groupRenderer={({ row }) => {
+                    console.log(JSON.parse(JSON.stringify(row)))
+                    return JSON.stringify(row)
+                }}
+                loadData={loadData}
+                getPopupContainer={(element: HTMLDivElement) => {
+                    return element.parentElement!
+                }}
+                onRowsUpdate={(data, onCommit) => {
+                    // console.log([...data])
+                    onCommit().then((ele) => {
+                        console.log(ele)
+                    })
+                }}
+                onChangeColumn={(data) => {
+                    console.log(data)
+                }}
+
+            />
+            <div
+                style={{
+                    marginTop: 500
+                }}
+            />
+        </div>
+    )
+}

packages/react-ui/src/table/demo/common/user.tsx

@@ -66,7 +66,6 @@ export const editColumns = [{
     title: '出生日期'
 }]
 
-
 export const columns = [{
     name: '$index',
     title: '序号',
@@ -75,20 +74,26 @@ export const columns = [{
     )
 },{
     name: 'pageNo',
-    title: '当前页码'
+    title: '当前页码',
+    editable: true
 },{
     name: 'idCard',
-    title: '身份证'
+    title: '身份证',
+    editable: true
 },{
     name: 'username',
-    title: '用户名称'
+    title: '用户名称',
+    editable: true
 },{
     name: 'password',
-    title: '用户密码'
+    title: '用户密码',
+    editable: true
 },{
     name: 'phone',
-    title: '电话号码'
+    title: '电话号码',
+    editable: true
 },{
     name: 'dateBirth',
-    title: '出生日期'
+    title: '出生日期',
+    editable: true
 }]

packages/react-ui/src/table/demo/select-table.tsx

@@ -6,6 +6,7 @@ import React, { useState } from 'react'
 // eslint-disable-next-line import/no-unresolved
 import { Table, Switch } from '@rwp/react-ui'
 import { columns, loadData } from './common/user'
+let i =0;
 
 export default () => {
     const [selectBox, setSelectBox] = useState<'multiple' | 'none' | 'single'>('multiple')
@@ -16,11 +17,11 @@ export default () => {
                 checkedChildren="单选"
                 unCheckedChildren="多选"
                 onChange={(value: any) => {
-                    if (value) {
-                        setSelectBox('single')
-                    } else {
-                        setSelectBox('multiple')
-                    }
+                    // if (value) {
+                    //     setSelectBox('single')
+                    // } else {
+                    //     setSelectBox('multiple')
+                    // }
                 }}
             />
             <br /> <br />
@@ -29,6 +30,9 @@ export default () => {
                 selectBox={selectBox}
                 columns={columns}
                 loadData={loadData}
+                onRowClick={(rowIdx) => {
+                    console.log('row', rowIdx)
+                }}
             />
         </>
     )

packages/react-ui/src/table/index.tsx

@@ -89,11 +89,22 @@ export const Table = observer<TableProps>((props: TableProps) => {
         }
     })
 
+    const currentRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
         // 装载数据
         if (enableInitLoadData) reloadFun()
+
+        const ele = props.getPopupContainer?.(currentRef.current!)
+
+        ele?.addEventListener('scroll', () => {
+            if (store.contextMenu.position && store.contextMenu.position.idx >= 0 && store.contextMenu.position.rowIdx >= 0) {
+                gridRef.current?.selectCell(store.contextMenu.position, false)
+            }
+        })
     }, [])
 
+
+
     useEffect(() => {
         store.setGroupColumn(props.groupColumn || [])
     }, [props.groupColumn])
@@ -121,7 +132,11 @@ export const Table = observer<TableProps>((props: TableProps) => {
 
     useEffect(() => {
         store.columns = props.columns
-        store.visibleColumns = props.columns.map(ele => ele.name)
+
+        if (store.visibleColumns === null || store.visibleColumns?.length === 0) {
+            store.visibleColumns = props.columns.map(ele => ele.name)
+        } 
+
     }, [props.columns])
 
     if (table && gridRef.current) {
@@ -250,7 +265,7 @@ export const Table = observer<TableProps>((props: TableProps) => {
                 }}
                 onRowsUpdate={e => {
                     const onCommit = () => {
-                        store.commit(e)
+                        return store.commit(e)
                     }
                     props.onRowsUpdate!(e, onCommit)
                 }}
@@ -301,20 +316,25 @@ export const Table = observer<TableProps>((props: TableProps) => {
         return node
     }
     return (
-        <StoreContext.Provider value={store}>
-            <Spin
-                spinning={store.loading}
-                wrapperClassName={`${tableClassPrefix}-spin`}
-            >
-                <div
-                    className={`${tableClassPrefix}-content`}
+        <div
+            ref={currentRef}
+            className={`${tableClassPrefix}-container`}
+        >
+            <StoreContext.Provider value={store}>
+                <Spin
+                    spinning={store.loading}
+                    wrapperClassName={`${tableClassPrefix}-spin`}
                 >
-                   {rdg}
-                   {getPluginNode(<Tools />)}
-                </div>
-                {getPluginNode(footer)}
-            </Spin>
-        </StoreContext.Provider>
+                    <div
+                        className={`${tableClassPrefix}-content`}
+                    >
+                    {rdg}
+                    {getPluginNode(<Tools />)}
+                    </div>
+                    {props.mode === 'HIDE-FOOTER' ?  null : getPluginNode(footer)}
+                </Spin>
+            </StoreContext.Provider>
+        </div>
     )
 })
 

packages/react-ui/src/table/row/GroupRow.tsx

@@ -29,8 +29,9 @@ export const GroupRow = ({
     const store = useStore()
     if ($type === 'GROUP') {
         let groupTitle = <h4 >{$title}</h4>
+
         if (GroupRenderer) {
-            groupTitle = <GroupRenderer row={rowProps.row}/>
+            groupTitle = <GroupRenderer row={rowProps.row} />
         }
         const Icon = store.expandedKeys.includes($id) ?  DownOutlined : RightOutlined
         return (

packages/react-ui/src/table/store.tsx

@@ -145,6 +145,7 @@ export function createStore() {
 
                 })
             }
+
             loopsGroupData(groupDatas)
             return newData
         },
@@ -217,11 +218,15 @@ export function createStore() {
         },
         // 提交修改的信息
         commit(e: RowsUpdateEvent) {
-            return new Promise<void>(resolve => {
+            return new Promise<Row[]>(resolve => {
+                const updates: Row[] = []
                 const rows: Row[] = this.dataSource
-
+                const { datas } = this
                 if (e.action === 'CELL_UPDATE' || e.action === 'COPY_PASTE') {
                     rows[e.toRow] = { ...rows[e.toRow], ...(e.updated as any) }
+                    const index = datas.findIndex(ele => ele.$index === rows[e.toRow].$index ) 
+                    datas[index] = { ...rows[e.toRow], ...(e.updated as any) }
+                    updates.push({ ...rows[e.toRow], ...(e.updated as any) })
                 }
 
                 if (e.action === 'CELL_DRAG') {
@@ -231,12 +236,17 @@ export function createStore() {
                     }
                     rows.forEach((value, index) => {
                         if (cells.includes(index)) {
-                            rows[index] = { ...rows[index], ...(e.updated as any) }
+                            const dataIndex = datas.findIndex(ele => ele.$index === rows[index].$index ) 
+                            datas[dataIndex] = { ...rows[index], ...(e.updated as any) }
+                            updates.push({ ...rows[index], ...(e.updated as any) })
                         }
                     })
                 }
+                if (this.isGroup) {
+                    this.cacheGroupDatas = undefined
+                }
                 this.setDataSource(rows)
-                resolve()
+                resolve(updates)
             })
         },
         get isGroup(){

packages/react-ui/src/table/style/index.less

@@ -33,6 +33,10 @@
     }
 }
 
+.@{table-prefix-cls}-container {
+    height: 100%;
+}
+
 .@{table-prefix-cls}-cell{
     text-overflow: inherit;
     overflow: inherit;

packages/react-ui/src/table/type.tsx

@@ -164,7 +164,7 @@ export interface TableProps {
     /**
      * 模式
      */
-    mode?: 'SIMPLE' | 'NORMAL',
+    mode?: 'SIMPLE' | 'NORMAL' | 'HIDE-FOOTER',
 
     /**
      * 行高
@@ -263,4 +263,6 @@ export interface TableProps {
      * 改变列的时候触发的事件
      */
     onChangeColumn?: (columns: ColumnProps[]) => void
+
+    getPopupContainer?: (element: HTMLElement ) => HTMLElement
 }

packages/react-ui/src/tree/index.md

@@ -173,7 +173,7 @@ export default () => {
                         setTimeout(() => {
                             console.log(info.event.preventDefault)
                             re()
-                        }, 1000)
+                        }, 10)
                     })
                 }}
                 onSelect={(keys) => {