From 5cbbfcf4281dc3c6417f77b0a6fed71f4ca63349 Mon Sep 17 00:00:00 2001 From: chenos Date: Sat, 5 Mar 2022 14:43:19 +0800 Subject: [PATCH] feat: add drag handle for table row component --- packages/client/package.json | 1 + .../antd/table/Table.Array.tsx | 124 ++++++++++++++++-- .../TableRecordActionInitializers.tsx | 5 +- .../schema-initializer/SchemaInitializer.tsx | 27 ++-- .../client/src/schema-initializer/types.ts | 1 + yarn.lock | 37 +++++- 6 files changed, 170 insertions(+), 25 deletions(-) diff --git a/packages/client/package.json b/packages/client/package.json index ad4c6456a3..2f786470c4 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -32,6 +32,7 @@ "marked": "^4.0.12", "react-beautiful-dnd": "^13.1.0", "react-big-calendar": "^0.38.7", + "react-drag-listview": "^0.1.9", "react-helmet": "^6.1.0", "react-i18next": "^11.15.1", "react-image-lightbox": "^5.1.4", diff --git a/packages/client/src/schema-component/antd/table/Table.Array.tsx b/packages/client/src/schema-component/antd/table/Table.Array.tsx index 3ef06fe8cd..e8f781e617 100644 --- a/packages/client/src/schema-component/antd/table/Table.Array.tsx +++ b/packages/client/src/schema-component/antd/table/Table.Array.tsx @@ -1,9 +1,11 @@ +import { MenuOutlined } from '@ant-design/icons'; import { css } from '@emotion/css'; import { ArrayField, Field } from '@formily/core'; import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react'; import { Table, TableColumnProps } from 'antd'; -import cls from 'classnames'; +import { default as classNames, default as cls } from 'classnames'; import React, { useState } from 'react'; +import ReactDragListView from 'react-drag-listview'; import { DndContext } from '../..'; import { RecordIndexProvider, RecordProvider, useRequest, useSchemaInitializer } from '../../../'; @@ -82,6 +84,9 @@ export const components = { ); }, + row: (props) => { + return ; + }, }, }; @@ -99,10 +104,30 @@ const useDefDataSource = (options, props) => { }, options); }; +const SortHandle = () => { + return ; +}; + +const TableIndex = (props) => { + const { index } = props; + return ( +
+ {index + 1} +
+ ); +}; + export const TableArray: React.FC = observer((props) => { const field = useField(); const columns = useTableColumns(); - const { useSelectedRowKeys = useDef, useDataSource = useDefDataSource, onChange, ...others } = props; + const { + dragSort = false, + showIndex = true, + useSelectedRowKeys = useDef, + useDataSource = useDefDataSource, + onChange, + ...others + } = props; const [selectedRowKeys, setSelectedRowKeys] = useSelectedRowKeys(); useDataSource({ onSuccess(data) { @@ -117,6 +142,74 @@ export const TableArray: React.FC = observer((props) => { onChange(selectedRowKeys: any[]) { setSelectedRowKeys(selectedRowKeys); }, + renderCell: (checked, record, index, originNode) => { + const current = props?.pagination?.current; + const pageSize = props?.pagination?.pageSize || 20; + if (current) { + index = index + (current - 1) * pageSize; + } + return ( +
+
+ {dragSort && } + {showIndex && } +
+
+ {originNode} +
+
+ ); + }, ...props.rowSelection, } : undefined, @@ -128,14 +221,25 @@ export const TableArray: React.FC = observer((props) => { return (
- + { + console.log('ReactDragListView', fromIndex, toIndex); + field.move(fromIndex, toIndex); + }} + lineClassName={css` + border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important; + `} + > +
+ ); }); diff --git a/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializers.tsx b/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializers.tsx index e98f0bb4a8..dc1357f613 100644 --- a/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializers.tsx +++ b/packages/client/src/schema-initializer/Initializers/TableRecordActionInitializers.tsx @@ -181,8 +181,7 @@ export const TableRecordActionInitializers = (props: any) => { ], }, ]} - > - - + component={MenuOutlined} + /> ); }; diff --git a/packages/client/src/schema-initializer/SchemaInitializer.tsx b/packages/client/src/schema-initializer/SchemaInitializer.tsx index 38b8ce28c8..177f16aa3c 100644 --- a/packages/client/src/schema-initializer/SchemaInitializer.tsx +++ b/packages/client/src/schema-initializer/SchemaInitializer.tsx @@ -28,6 +28,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { items = [], insertPosition = 'beforeEnd', dropdown, + component, style, ...others } = props; @@ -123,17 +124,21 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => { {...dropdown} overlay={menu} > - + {component ? ( + React.createElement(component) + ) : ( + + )} ); }); diff --git a/packages/client/src/schema-initializer/types.ts b/packages/client/src/schema-initializer/types.ts index d3b15bf467..1a1214452b 100644 --- a/packages/client/src/schema-initializer/types.ts +++ b/packages/client/src/schema-initializer/types.ts @@ -7,6 +7,7 @@ export interface SchemaInitializerButtonProps extends ButtonProps { insertPosition?: 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd'; items?: SchemaInitializerItemOptions[]; dropdown?: DropDownProps; + component?: any; } export type SchemaInitializerItemOptions = ItemGroupOptions | SubMenuOptions | ItemOptions | DividerOptions; diff --git a/yarn.lock b/yarn.lock index 74dad30c3f..eaf24a6503 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4636,6 +4636,14 @@ babel-preset-jest@^26.6.2: babel-plugin-jest-hoist "^26.6.2" babel-preset-current-node-syntax "^1.0.0" +babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + bail@^1.0.0: version "1.0.5" resolved "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776" @@ -5769,6 +5777,11 @@ core-js@3.8.2: resolved "https://registry.npmjs.org/core-js/-/core-js-3.8.2.tgz#0a1fd6709246da9ca8eff5bb0cbd15fba9ac7044" integrity sha512-FfApuSRgrR6G5s58casCBd9M2k+4ikuu4wbW6pJyYU7bd9zvFc9qf7vr5xmrZOhT9nn+8uwlH1oRR9jTnFoA3A== +core-js@^2.4.0: + version "2.6.12" + resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec" + integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ== + core-util-is@1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -13127,6 +13140,15 @@ prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.8.1" +prop-types@^15.5.8: + version "15.8.1" + resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + property-information@^5.0.0, property-information@^5.3.0, property-information@^5.5.0: version "5.6.0" resolved "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69" @@ -13787,6 +13809,14 @@ react-dom@17.x, react-dom@^17.0.1: object-assign "^4.1.1" scheduler "^0.20.2" +react-drag-listview@^0.1.9: + version "0.1.9" + resolved "https://registry.npmjs.org/react-drag-listview/-/react-drag-listview-0.1.9.tgz#6732849c50f1de088775c1f287017615544cec3d" + integrity sha512-/OsYevKtCUlw4FhJIfZPH7INHEmyl89sSC5COzonHW5Z2c8rHg4DNYFnUxOyqH+65o7sHweL13oaf6wr7dFvPA== + dependencies: + babel-runtime "^6.26.0" + prop-types "^15.5.8" + react-fast-compare@^3.1.1: version "3.2.0" resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" @@ -13819,7 +13849,7 @@ react-image-lightbox@^5.1.4: prop-types "^15.7.2" react-modal "^3.11.1" -react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -14220,6 +14250,11 @@ regenerator-runtime@0.13.5: resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA== +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== + regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7: version "0.13.9" resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"