mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 07:25:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add drag handle for table row component

Browse Source
This commit is contained in:
chenos 2022-03-05 14:43:19 +08:00
parent bf2ea2a6e1
commit 5cbbfcf428
6 changed files with 170 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/package.json
View File

@ -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",

124
packages/client/src/schema-component/antd/table/Table.Array.tsx
View File

@ -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 = {
</DndContext>
);
},
row: (props) => {
return <tr draggable {...props} />;
},
},
};
@ -99,10 +104,30 @@ const useDefDataSource = (options, props) => {
}, options);
};
const SortHandle = () => {
return <MenuOutlined className={'drag-handle'} style={{ cursor: 'grab' }} />;
};
const TableIndex = (props) => {
const { index } = props;
return (
<div className={classNames('nb-table-index')} style={{ padding: '0 8px 0 16px' }}>
{index + 1}
</div>
);
};
export const TableArray: React.FC<any> = observer((props) => {
const field = useField<ArrayField>();
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<any> = 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 (
<div
className={classNames(
checked ? 'checked' : null,
css`
position: relative;
display: flex;
align-items: center;
justify-content: space-evenly;
padding-right: 8px;
.nb-table-index {
opacity: 0;
}
&:not(.checked) {
.nb-table-index {
opacity: 1;
}
}
&:hover {
.nb-table-index {
opacity: 0;
}
.nb-origin-node {
display: block;
}
}
`,
)}
>
<div
className={classNames(
checked ? 'checked' : null,
css`
position: relative;
display: flex;
align-items: center;
justify-content: space-evenly;
`,
)}
>
{dragSort && <SortHandle />}
{showIndex && <TableIndex index={index} />}
</div>
<div
className={classNames(
'nb-origin-node',
checked ? 'checked' : null,
css`
position: absolute;
right: 50%;
transform: translateX(50%);
&:not(.checked) {
display: none;
}
`,
)}
>
{originNode}
</div>
</div>
);
},
...props.rowSelection,
}
: undefined,
@ -128,14 +221,25 @@ export const TableArray: React.FC<any> = observer((props) => {
return (
<div>
<Table
rowKey={defaultRowKey}
{...others}
{...restProps}
components={components}
columns={columns}
dataSource={field?.value?.slice?.()}
/>
<ReactDragListView
handleSelector={'.drag-handle'}
onDragEnd={(fromIndex, toIndex) => {
console.log('ReactDragListView', fromIndex, toIndex);
field.move(fromIndex, toIndex);
}}
lineClassName={css`
border-bottom: 2px solid rgba(241, 139, 98, 0.6) !important;
`}
>
<Table
rowKey={defaultRowKey}
{...others}
{...restProps}
components={components}
columns={columns}
dataSource={field?.value?.slice?.()}
/>
</ReactDragListView>
</div>
);
});

5
packages/client/src/schema-initializer/Initializers/TableRecordActionInitializers.tsx
View File

@ -181,8 +181,7 @@ export const TableRecordActionInitializers = (props: any) => {
],
},
]}
>
<MenuOutlined />
</SchemaInitializer.Button>
component={MenuOutlined}
/>
);
};

27
packages/client/src/schema-initializer/SchemaInitializer.tsx
View File

@ -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}
>
<Button
{...others}
type={'dashed'}
style={{
...style,
borderColor: '#f18b62',
color: '#f18b62',
}}
>
{compile(props.children || props.title)}
</Button>
{component ? (
React.createElement(component)
) : (
<Button
{...others}
type={'dashed'}
style={{
...style,
borderColor: '#f18b62',
color: '#f18b62',
}}
>
{compile(props.children || props.title)}
</Button>
)}
</Dropdown>
);
});

1
packages/client/src/schema-initializer/types.ts
View File

@ -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;

37
yarn.lock
View File

@ -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"