();
- const [pagination, setPagination] = usePagination();
- const { selectedRowKeys, setSelectedRowKeys } = useSelectedRowKeys();
- console.log('props.useSelectedRowKeys', selectedRowKeys);
- const [, refresh] = useState(uid());
- const { resource } = useResource();
- const { sortableField } = useCollectionContext();
- const dragSort = props.dragSort;
- const collectionFields = useCollectionFields(schema);
- // console.log({ collectionFields, pagination });
- const getDefaultParams = () => {
- const defaultParams = { ...pagination };
- if (dragSort) {
- defaultParams['sort'] = [sortableField || 'sort'];
- } else {
- defaultParams['sort'] = (props.defaultSort || []).join(',');
- }
- defaultParams['defaultAppends'] = [
- ...(props.defaultAppends || []),
- ...collectionFields,
- ];
- if (props.defaultFilter) {
- defaultParams['defaultFilter'] = props.defaultFilter;
- }
- console.log({ defaultParams });
- return defaultParams;
- };
- const service = useRequest(
- (params?: any) => {
- if (!resource) {
- return Promise.resolve({
- list: field.value,
- total: field?.value?.length,
- });
- }
- return resource.list(params).then((res) => {
- return {
- list: res?.data || [],
- total: res?.meta?.count || res?.data?.length,
- };
- });
- },
- {
- onSuccess(data: any) {
- field.setValue(data?.list || []);
- },
- manual: true,
- // defaultParams: [getDefaultParams()],
- },
- );
- useDeepCompareEffectNoCheck(() => {
- service.run(getDefaultParams());
- }, [
- pagination?.pageSize,
- pagination?.page,
- props.dragSort,
- props.defaultSort,
- props.defaultFilter,
- ]);
- return (
- {
- const { page = 1, pageSize } = pagination;
- const total = props.clientSidePagination
- ? field?.value?.length
- : service?.data?.total;
- const maxPage = Math.ceil(total / pageSize);
- if (page > maxPage) {
- setPagination({ page: maxPage });
- } else {
- refresh(uid());
- }
- },
- selectedRowKeys,
- setSelectedRowKeys,
- pagination,
- setPagination,
- service,
- field,
- schema,
- props: { ...others, rowKey, dataRequest },
- }}
- >
-
-
- );
-};
+import { useActionLogsResource } from './hooks/useActionLogsResource';
+import { useTableDestroyAction } from './hooks/useTableDestroyAction';
+import { useActionLogDetailsResource } from './hooks/useActionLogDetailsResource';
+import { TableActionBar } from './TableActionBar';
+import { TablePagination } from './TablePagination';
+import { TableFilter } from './TableFilter';
+import { TableFilterDesignableBar } from './TableFilterDesignableBar';
+import { TableExportActionDesignableBar } from './TableExportActionDesignableBar';
+import { useResource } from './hooks/useResource';
+import { TableDesignableBar } from './TableDesignableBar';
+import { useTableFilterAction } from './hooks/useTableFilterAction';
+import { useTableCreateAction } from './hooks/useTableCreateAction';
+import { useTableUpdateAction } from './hooks/useTableUpdateAction';
+import { useTableExportAction } from './hooks/useTableExportAction';
+import { useTableIndex } from './hooks/useTableIndex';
+import { useTableRowRecord } from './hooks/useTableRowRecord';
+import { TableSortHandle } from './TableSortHandle';
+import { TableOperation } from './TableOperation';
+import { TableOperationCell } from './TableOperationCell';
+import { TableCell } from './TableCell';
+import { TableColumn } from './TableColumn';
+import { TableActionDesignableBar } from './TableActionDesignableBar';
+import { TableOperationDesignableBar } from './TableOperationDesignableBar';
+import { TableProvider } from './TableProvider';
export const Table: any = observer((props: any) => {
const [visible, setVisible] = useState(false);
@@ -957,1703 +38,24 @@ export const Table: any = observer((props: any) => {
);
});
-const useTotal = () => {
- const {
- field,
- service,
- props: { clientSidePagination },
- } = useTable();
- return clientSidePagination ? field?.value?.length : service?.data?.total;
-};
-
-Table.Pagination = observer(() => {
- const { service, pagination, setPagination, props } = useTable();
- if (!pagination || Object.keys(pagination).length === 0) {
- return null;
- }
- const { clientSidePagination } = props;
- const total = useTotal();
- const { page = 1 } = pagination;
- return (
-
-
{
- const page = pagination.pageSize !== pageSize ? 1 : current;
- setPagination({
- page,
- pageSize,
- });
- // if (clientSidePagination) {
- // return;
- // }
- // service.run({
- // ...service.params[0],
- // page,
- // pageSize,
- // });
- }}
- />
-
- {
- e.stopPropagation();
- }}
- className={cls('designable-bar-actions', { active: visible })}
- >
-
-
- {
- setVisible(visible);
- }}
- overlay={
-
- }
- >
-
-
-
-
-
- );
-};
-
-Table.ExportActionDesignableBar = () => {
- const { t } = useTranslation();
- const { schema, remove, refresh, insertAfter } = useDesignable();
- const [visible, setVisible] = useState(false);
- const displayed = useDisplayedMapContext();
- const { fields } = useCollectionContext();
- const field = useField();
- const { createSchema, removeSchema, updateSchema } = useClient();
- let fieldNames = field.componentProps.fieldNames || [];
- if (fieldNames.length === 0) {
- fieldNames = fields.map((field) => field.name);
- }
- return (
-
- {
- e.stopPropagation();
- }}
- className={cls('designable-bar-actions', { active: visible })}
- >
-
-
- {
- setVisible(visible);
- }}
- overlay={
-
- }
- >
-
-
-
-
-
- );
-};
-
-Table.Operation = observer((props: any) => {
- const { designable, schema } = useDesignable();
- const { t } = useTranslation();
- return (
-
- );
-});
-
-Table.Operation.Cell = observer((props: any) => {
- const ctx = useContext(TableRowContext);
- const schema = props.schema;
- return (
-
-
-
- );
-});
-
-Table.Operation.DesignableBar = () => {
- const { t } = useTranslation();
- const { schema: columnSchema } = useDesignable();
- const groupSchema = Object.values(columnSchema.properties || {}).shift();
- const groupPath = getSchemaPath(groupSchema);
- const { schema, remove, refresh, appendChild } = useDesignable(groupPath);
- const [visible, setVisible] = useState(false);
- const { createSchema, removeSchema, updateSchema } = useClient();
-
- const map = new Map();
- schema.mapProperties((s) => {
- if (!s['x-action-type']) {
- return;
- }
- map.set(s['x-action-type'], s.name);
- });
- const path = getSchemaPath(schema);
- return (
-
- {
- e.stopPropagation();
- }}
- className={cls('designable-bar-actions', { active: visible })}
- >
-
-
- {
- setVisible(visible);
- }}
- overlay={
-
- }
- >
-
-
-
-
-
- );
-};
-
+Table.Pagination = TablePagination;
+Table.ActionBar = TableActionBar;
+Table.Filter = TableFilter;
+Table.Filter.DesignableBar = TableFilterDesignableBar;
+Table.ExportActionDesignableBar = TableExportActionDesignableBar;
+Table.Operation = TableOperation;
+Table.Operation.Cell = TableOperationCell;
+Table.Operation.DesignableBar = TableOperationDesignableBar;
Table.Action = () => null;
+Table.Action.DesignableBar = TableActionDesignableBar;
+Table.Cell = TableCell;
+Table.Column = TableColumn;
+Table.SortHandle = TableSortHandle;
+Table.DesignableBar = TableDesignableBar;
+Table.SimpleDesignableBar = SimpleDesignableBar;
-Table.Action.DesignableBar = () => {
- const { t } = useTranslation();
- const { schema, remove, refresh, insertAfter } = useDesignable();
- const [visible, setVisible] = useState(false);
- const isPopup = Object.keys(schema.properties || {}).length > 0;
- const popupSchema = Object.values(schema.properties || {}).shift();
- const inActionBar = schema.parent['x-component'] === 'Table.ActionBar';
- const displayed = useDisplayedMapContext();
- const field = useField();
- const { createSchema, removeSchema, updateSchema } = useClient();
- const popupComponent = popupSchema?.['x-component'] || 'Action.Drawer';
- return (
-
- {
- e.stopPropagation();
- }}
- className={cls('designable-bar-actions', { active: visible })}
- >
-
-
- {
- setVisible(visible);
- }}
- overlay={
-
- }
- >
-
-
-
-
-
- );
-};
-
-Table.Cell = observer((props: any) => {
- const ctx = useContext(TableRowContext);
- const schema = props.schema;
- const collectionField = useContext(CollectionFieldContext);
- if (schema['x-component'] === 'Table.Operation') {
- return ;
- }
- let uiSchema = collectionField?.uiSchema as Schema;
- if (uiSchema?.['x-component'] === 'Upload.Attachment') {
- uiSchema = cloneDeepWith(uiSchema);
- set(uiSchema, 'x-component-props.size', 'small');
- }
- const componentProps = merge(
- uiSchema?.['x-component-props'] || {},
- schema?.['x-component-props'] || {},
- {
- arrayMerge: (t, s) => s,
- },
- );
- console.log('Table.Cell', collectionField?.interface, componentProps);
- return (
-
-
-
- );
-});
-
-Table.Column = observer((props: any) => {
- const collectionField = useContext(CollectionFieldContext);
- const { schema, DesignableBar } = useDesignable();
- const compile = useCompile();
- const displayed = useDisplayedMapContext();
- useEffect(() => {
- if (collectionField?.name) {
- displayed.set(collectionField.name, schema);
- }
- }, [collectionField, schema]);
- return (
-
- {compile(schema.title || collectionField?.uiSchema?.title)}
-
-
- );
-});
-
-Table.Column.DesignableBar = () => {
- const field = useField();
- const { t } = useTranslation();
- const compile = useCompile();
- const { service, refresh: refreshTable } = useTable();
- // const fieldSchema = useFieldSchema();
- const { schema, remove, refresh, insertAfter } = useDesignable();
- const [visible, setVisible] = useState(false);
- const displayed = useDisplayedMapContext();
- const { getFieldsByCollection } = useCollectionsContext();
- const collectionField = useContext(CollectionFieldContext);
- const { createSchema, removeSchema, updateSchema } = useClient();
- console.log('displayed.map', displayed.map);
- return (
-
-
{
- e.stopPropagation();
- }}
- className={cls('designable-bar-actions', { active: visible })}
- >
-
-
- {
- setVisible(visible);
- }}
- overlay={
-
- }
- >
-
-
-
-
-
-
- {compile(collection?.title || collection?.name)}
-
-
{
- e.stopPropagation();
- }}
- className={cls('designable-bar-actions', { active: visible })}
- >
-
-
-
- {
- setVisible(visible);
- }}
- overlay={
-
- }
- >
-
-
-
-
-