();
+ 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 },
+ }}
+ >
+
+
+ );
+};
export const Table: any = observer((props: any) => {
const [visible, setVisible] = useState(false);
@@ -38,24 +957,1703 @@ export const Table: any = observer((props: any) => {
);
});
-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;
+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.Action = () => null;
+
+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={
+
+ }
+ >
+
+
+
+
+