From f2a2cc228f26396db39310fea74347c84a336b5c Mon Sep 17 00:00:00 2001 From: sealday Date: Thu, 23 May 2024 21:01:46 +0800 Subject: [PATCH] refactor: migrate @emotion/css to antd-style (#1043) Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1043 --- .../components/SchemaInitializerSubMenu.tsx | 55 ++-- .../schema-initializer/hoc/index.tsx | 29 +- .../src/block-provider/BlockProvider.tsx | 68 ++-- .../Configuration/DeleteCollectionAction.tsx | 35 ++- .../components/sql-collection/SQLInput.tsx | 34 +- .../templates/properties/index.ts | 8 - packages/core/client/src/global-theme/type.ts | 9 +- packages/core/client/src/index.ts | 1 - .../src/nocobase-buildin-plugin/index.tsx | 35 ++- .../PinnedPluginListProvider.tsx | 47 +-- packages/core/client/src/pm/PluginCard.tsx | 33 +- packages/core/client/src/pm/PluginManager.tsx | 33 +- .../core/client/src/pm/PluginManagerLink.tsx | 92 +----- packages/core/client/src/pm/PluginSetting.tsx | 11 +- packages/core/client/src/pm/style.ts | 24 +- .../route-switch/antd/admin-layout/index.tsx | 296 +++++++++--------- .../antd/action/Action.Modal.tsx | 43 +-- .../antd/action/Action.Page.tsx | 31 +- .../antd/action/Action.Sheet.tsx | 30 +- .../antd/action/ActionBar.tsx | 14 +- .../InternalDrawerSubTable.tsx | 25 +- .../antd/association-field/InternalNester.tsx | 63 ++-- .../InternalPopoverNester.tsx | 66 ++-- .../association-field/InternalSubTable.tsx | 47 +-- .../antd/association-field/InternalViewer.tsx | 6 +- .../antd/association-field/Nester.tsx | 66 ++-- .../antd/association-field/SubTable.tsx | 136 ++++---- .../association-filter/AssociationFilter.tsx | 131 ++++---- .../antd/block-item/BlockItem.tsx | 109 ++++--- .../antd/color-picker/ColorPicker.tsx | 28 +- .../src/schema-component/antd/cron/Cron.tsx | 56 ++-- .../antd/expand-action/Expand.Action.tsx | 87 ++--- .../antd/filter/FilterAction.tsx | 42 ++- .../antd/filter/FilterItem.tsx | 23 +- .../antd/filter/SaveDefaultValue.tsx | 16 +- .../antd/form-item/FormItem.tsx | 52 +-- .../schema-component/antd/form-v2/Form.tsx | 53 ++-- .../antd/grid-card/GridCard.Item.tsx | 66 ++-- .../antd/grid-card/GridCard.tsx | 91 +++--- .../antd/icon-picker/IconList.tsx | 15 +- .../src/schema-component/antd/input/Json.tsx | 19 +- .../antd/input/ReadPretty.tsx | 27 +- .../antd/list/List.Decorator.tsx | 40 +-- .../schema-component/antd/list/List.Item.tsx | 36 ++- .../src/schema-component/antd/list/List.tsx | 13 +- .../antd/menu/Menu.Designer.tsx | 11 +- .../schema-component/antd/menu/Menu.styles.ts | 160 ++++++++++ .../src/schema-component/antd/menu/Menu.tsx | 188 ++--------- .../schema-component/antd/page/FixedBlock.tsx | 54 ++-- .../antd/quick-edit/QuickEdit.tsx | 28 +- .../antd/table-v2/Table.Column.ActionBar.tsx | 93 +++--- .../antd/table-v2/Table.Column.Decorator.tsx | 20 +- .../antd/table-v2/Table.styles.ts | 117 +++++++ .../schema-component/antd/table-v2/Table.tsx | 204 +++--------- .../antd/table/Table.Array.tsx | 234 +++++++------- .../antd/table/Table.Column.ActionBar.tsx | 85 ++--- .../antd/table/Table.Column.Decorator.tsx | 8 +- .../src/schema-component/antd/tabs/Tabs.tsx | 115 +++---- .../schema-component/antd/variable/Input.tsx | 85 ++--- .../antd/variable/JSONInput.tsx | 30 +- .../antd/variable/RawTextArea.tsx | 61 ++-- .../antd/variable/TextArea.tsx | 127 ++++---- .../antd/variable/VariableSelect.tsx | 6 +- .../common/sortable-item/SortableItem.tsx | 8 +- .../components/CreateRecordAction.tsx | 90 +++--- .../schema-settings/GeneralSchemaDesigner.tsx | 46 +-- .../core/client/src/schema-settings/styles.ts | 32 +- 67 files changed, 2060 insertions(+), 1983 deletions(-) create mode 100644 packages/core/client/src/schema-component/antd/menu/Menu.styles.ts create mode 100644 packages/core/client/src/schema-component/antd/table-v2/Table.styles.ts diff --git a/packages/core/client/src/application/schema-initializer/components/SchemaInitializerSubMenu.tsx b/packages/core/client/src/application/schema-initializer/components/SchemaInitializerSubMenu.tsx index fa584f362..4f2d06525 100644 --- a/packages/core/client/src/application/schema-initializer/components/SchemaInitializerSubMenu.tsx +++ b/packages/core/client/src/application/schema-initializer/components/SchemaInitializerSubMenu.tsx @@ -1,8 +1,10 @@ -import Icon, { RightOutlined } from '@ant-design/icons'; -import { css } from '@emotion/css'; -import { uid } from '@tachybase/schema'; -import { Menu, MenuProps, theme } from 'antd'; import React, { FC, ReactNode, useMemo } from 'react'; +import { uid } from '@tachybase/schema'; + +import Icon, { RightOutlined } from '@ant-design/icons'; +import { Menu, MenuProps, theme } from 'antd'; +import { createStyles } from 'antd-style'; + import { useCompile } from '../../../schema-component'; import { useSchemaInitializerItem } from '../context'; import { useSchemaInitializerMenuItems } from '../hooks'; @@ -18,6 +20,30 @@ export interface SchemaInitializerSubMenuProps { children?: SchemaInitializerOptions['items']; } +const useStyles = createStyles(({ css, token }) => { + return { + menu: css` + box-shadow: none !important; + border-inline-end: 0 !important; + .ant-menu-sub { + max-height: 50vh !important; + } + .ant-menu-item { + margin-block: 0; + } + .ant-menu-root { + margin: 0 -${token.margin}px; + .ant-menu-submenu-title, + .ant-menu-item-only-child { + margin-inline: 0; + margin-block: 0; + width: 100%; + } + } + `, + }; +}); + const SchemaInitializerSubMenuContext = React.createContext<{ isInMenu?: true }>({}); const SchemaInitializerMenuProvider = (props) => { return ( @@ -34,6 +60,7 @@ export const SchemaInitializerMenu: FC = (props) => { const { componentCls, hashId } = useSchemaInitializerStyles(); const { items, ...others } = props; const { token } = theme.useToken(); + const { styles } = useStyles(); const itemsWithPopupClass = useMemo( () => items.map((item) => ({ ...item, popupClassName: `${hashId} ${componentCls}-menu-sub` })), [componentCls, hashId, items], @@ -44,25 +71,7 @@ export const SchemaInitializerMenu: FC = (props) => { } - rootClassName={css` - box-shadow: none !important; - border-inline-end: 0 !important; - .ant-menu-sub { - max-height: 50vh !important; - } - .ant-menu-item { - margin-block: 0; - } - .ant-menu-root { - margin: 0 -${token.margin}px; - .ant-menu-submenu-title, - .ant-menu-item-only-child { - margin-inline: 0; - margin-block: 0; - width: 100%; - } - } - `} + rootClassName={styles.menu} items={itemsWithPopupClass} {...others} /> diff --git a/packages/core/client/src/application/schema-initializer/hoc/index.tsx b/packages/core/client/src/application/schema-initializer/hoc/index.tsx index be82053cf..fe8060fd1 100644 --- a/packages/core/client/src/application/schema-initializer/hoc/index.tsx +++ b/packages/core/client/src/application/schema-initializer/hoc/index.tsx @@ -1,8 +1,9 @@ -import { ISchema, observer } from '@tachybase/schema'; -import { ConfigProvider, Popover, theme } from 'antd'; import React, { ComponentType, useCallback, useMemo, useState } from 'react'; +import { ISchema, observer } from '@tachybase/schema'; + +import { ConfigProvider, Popover, theme } from 'antd'; +import { createStyles } from 'antd-style'; -import { css } from '@emotion/css'; import { useNiceDropdownMaxHeight } from '../../../common/useNiceDropdownHeight'; import { useFlag } from '../../../flag-provider'; import { useDesignable } from '../../../schema-component'; @@ -11,6 +12,18 @@ import { SchemaInitializerContext } from '../context'; import { SchemaInitializerOptions } from '../types'; const defaultWrap = (s: ISchema) => s; +const useStyles = createStyles(({ css, token }) => { + return { + popover: css` + .ant-popover-inner { + padding: ${`${token.paddingXXS}px 0`}; + .ant-menu-submenu-title { + margin-block: 0; + } + } + `, + }; +}); export function withInitializer(C: ComponentType) { const WithInitializer = observer( @@ -47,6 +60,7 @@ export function withInitializer(C: ComponentType) { const { wrapSSR, hashId, componentCls } = useSchemaInitializerStyles(); const [visible, setVisible] = useState(false); const { token } = theme.useToken(); + const { styles } = useStyles(); const dropdownMaxHeight = useNiceDropdownMaxHeight([visible]); const cProps = useMemo( @@ -79,14 +93,7 @@ export function withInitializer(C: ComponentType) { placement={'bottomLeft'} {...popoverProps} arrow={false} - overlayClassName={css` - .ant-popover-inner { - padding: ${`${token.paddingXXS}px 0`}; - .ant-menu-submenu-title { - margin-block: 0; - } - } - `} + overlayClassName={styles.popover} open={visible} onOpenChange={setVisible} content={wrapSSR( diff --git a/packages/core/client/src/block-provider/BlockProvider.tsx b/packages/core/client/src/block-provider/BlockProvider.tsx index bd129f4fa..0e479a4c9 100644 --- a/packages/core/client/src/block-provider/BlockProvider.tsx +++ b/packages/core/client/src/block-provider/BlockProvider.tsx @@ -1,28 +1,31 @@ -import { css } from '@emotion/css'; -import { Field, GeneralField } from '@tachybase/schema'; -import { RecursionField, useField, useFieldSchema } from '@tachybase/schema'; +import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; +import { Field, GeneralField, RecursionField, useField, useFieldSchema } from '@tachybase/schema'; + import { Col, Row } from 'antd'; +import { createStyles } from 'antd-style'; import merge from 'deepmerge'; import template from 'lodash/template'; -import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; import { Link } from 'react-router-dom'; + import { DataBlockProvider, TableFieldResource, - WithoutTableFieldResource, + useCollectionManager, useCollectionParentRecord, + useCollectionParentRecordData, useCollectionRecord, useDataBlockProps, useDataBlockRequest, useDataBlockResource, useDesignable, useRecord, + WithoutTableFieldResource, } from '../'; import { ACLCollectionProvider } from '../acl/ACLProvider'; import { CollectionProvider_deprecated, - useCollectionManager_deprecated, useCollection_deprecated, + useCollectionManager_deprecated, } from '../collection-manager'; import { DataBlockCollector } from '../filter-provider/FilterProvider'; import { RecordProvider, useRecordIndex } from '../record-provider'; @@ -119,9 +122,31 @@ export const useBlockRequestContext = () => { return useContext(BlockRequestContext_deprecated); }; +const useStyles = createStyles(({ css }) => { + return { + row: css` + height: 100%; + `, + left: css` + width: 200px; + flex: 0 0 auto; + `, + right: css` + flex: 1 1 auto; + min-width: 0; + `, + rightContainer: css` + display: flex; + flex-direction: column; + height: 100%; + `, + }; +}); + export const RenderChildrenWithAssociationFilter: React.FC = (props) => { const fieldSchema = useFieldSchema(); const { findComponent } = useDesignable(); + const { styles } = useStyles(); const field = useField(); const Component = findComponent(field.component?.[0]) || React.Fragment; const associationFilterSchema = fieldSchema.reduceProperties((buf, s) => { @@ -134,39 +159,16 @@ export const RenderChildrenWithAssociationFilter: React.FC = (props) => { if (associationFilterSchema) { return ( - - + + s['x-component'] === 'AssociationFilter'} /> - -
+ +
{ }; }; +const useStyles = createStyles(({ css }) => { + return { + modal: css` + .ant-modal-body { + margin-left: 35px; + margin-bottom: 35px; + .ant-checkbox-wrapper { + height: 25px; + } + } + `, + }; +}); + export const useBulkDestroyAction = () => { const { state, setState, refresh } = useResourceActionContext(); const { resource } = useResourceContext(); @@ -80,6 +96,7 @@ export const useBulkDestroyAction = () => { export const DeleteCollectionAction = (props) => { const { scope, getContainer, item: record, children, isBulk, useAction, ...otherProps } = props; const { t } = useTranslation(); + const { styles } = useStyles(); const [visible, setVisible] = useState(false); const getDestroyCollectionAction = () => { if (isBulk) { @@ -124,15 +141,7 @@ export const DeleteCollectionAction = (props) => { 'x-component-props': { width: 520, getContainer: '{{ getContainer }}', - className: css` - .ant-modal-body { - margin-left: 35px; - margin-bottom: 35px; - .ant-checkbox-wrapper { - height: 25px; - } - } - `, + className: styles.modal, }, properties: { info: { diff --git a/packages/core/client/src/collection-manager/templates/components/sql-collection/SQLInput.tsx b/packages/core/client/src/collection-manager/templates/components/sql-collection/SQLInput.tsx index 03e6f68e5..92bc401d3 100644 --- a/packages/core/client/src/collection-manager/templates/components/sql-collection/SQLInput.tsx +++ b/packages/core/client/src/collection-manager/templates/components/sql-collection/SQLInput.tsx @@ -1,16 +1,29 @@ -import { useField, useForm } from '@tachybase/schema'; -import { useAsyncData } from '../../../../async-data-provider'; import React, { useEffect } from 'react'; -import { Input, SchemaComponent } from '../../../../schema-component'; -import { css } from '@emotion/css'; -import { Button } from 'antd'; +import { Field, useField } from '@tachybase/schema'; + import { EditOutlined, RightSquareOutlined } from '@ant-design/icons'; +import { Button } from 'antd'; +import { createStyles } from 'antd-style'; import { useTranslation } from 'react-i18next'; -import { Field } from '@tachybase/schema'; + +import { useAsyncData } from '../../../../async-data-provider'; +import { Input } from '../../../../schema-component'; + +const useStyles = createStyles(({ css }) => { + return { + input: css` + position: relative; + .ant-input { + width: 100%; + } + `, + }; +}); export const SQLInput = ({ disabled }) => { const { t } = useTranslation(); const { run, loading, error } = useAsyncData(); + const { styles } = useStyles(); const field = useField(); const execute = () => { if (!field.value) { @@ -39,14 +52,7 @@ export const SQLInput = ({ disabled }) => { }, [field, error]); return ( -
+
(field.value = e.target.value)} /> diff --git a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx index c3da7151c..dea04d23c 100644 --- a/packages/core/client/src/schema-component/antd/action/ActionBar.tsx +++ b/packages/core/client/src/schema-component/antd/action/ActionBar.tsx @@ -1,12 +1,14 @@ -import { cx } from '@emotion/css'; -import { RecursionField, observer, useFieldSchema } from '@tachybase/schema'; -import { Space } from 'antd'; import React, { CSSProperties, useContext } from 'react'; +import { observer, RecursionField, useFieldSchema } from '@tachybase/schema'; + +import { Space } from 'antd'; +import cx from 'classnames'; import { createPortal } from 'react-dom'; -import { DndContext } from '../../common'; -import { useDesignable, useProps } from '../../hooks'; + import { useSchemaInitializerRender } from '../../../application'; import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; +import { DndContext } from '../../common'; +import { useDesignable, useProps } from '../../hooks'; interface ActionBarContextForceProps { layout?: 'one-column' | 'tow-columns'; @@ -35,7 +37,7 @@ export const useActionBarContext = () => { return useContext(ActionBarContext); }; -const Portal: React.FC = (props) => { +const Portal = (props) => { const filedSchema = useFieldSchema(); const { container, parentComponents = ['BlockItem', 'CardItem'] } = useActionBarContext(); return ( diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalDrawerSubTable.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalDrawerSubTable.tsx index beff25661..ccd93ee96 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalDrawerSubTable.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalDrawerSubTable.tsx @@ -1,15 +1,16 @@ -import { EditOutlined } from '@ant-design/icons'; -import { css } from '@emotion/css'; -import { observer, useField, useFieldSchema } from '@tachybase/schema'; import React, { useContext, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import { InternalSubTable } from './InternalSubTable'; +import { Field, observer, useField, useFieldSchema } from '@tachybase/schema'; + +import { EditOutlined } from '@ant-design/icons'; import { Button, Drawer } from 'antd'; -import { SubFormProvider, useAssociationFieldContext } from './hooks'; -import { ActionContext, ActionContextProvider } from '../action/context'; -import { ReadPrettyInternalViewer } from './InternalViewer'; +import { useTranslation } from 'react-i18next'; + import { useCollectionManager } from '../../../data-source'; import { FlagProvider } from '../../../flag-provider'; +import { ActionContext, ActionContextProvider } from '../action/context'; +import { SubFormProvider, useAssociationFieldContext } from './hooks'; +import { InternalSubTable } from './InternalSubTable'; +import { ReadPrettyInternalViewer } from './InternalViewer'; export const InternaDrawerSubTable = observer( (props) => { @@ -26,7 +27,7 @@ export const InternaDrawerSubTable = observer( enableLink: true, }; - const field = useField(); + const field = useField(); const fieldSchema = useFieldSchema(); const cm = useCollectionManager(); @@ -39,11 +40,7 @@ export const InternaDrawerSubTable = observer( setVisible(true); }} > -
+
diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx index 3dbbb80d4..e81d793d1 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx @@ -1,12 +1,39 @@ -import { css, cx } from '@emotion/css'; -import { FormLayout } from '@tachybase/components'; -import { RecursionField, useField, useFieldSchema, observer } from '@tachybase/schema'; import React, { useEffect } from 'react'; +import { FormLayout } from '@tachybase/components'; +import { observer, RecursionField, useField, useFieldSchema } from '@tachybase/schema'; + +import { createStyles } from 'antd-style'; +import cx from 'classnames'; + +import { ACLCollectionProvider, useACLActionParamsContext } from '../../../acl'; import { CollectionProvider_deprecated } from '../../../collection-manager'; import { useAssociationFieldContext, useInsertSchema } from './hooks'; -import { ACLCollectionProvider, useACLActionParamsContext } from '../../../acl'; import schema from './schema'; +const useStyles = createStyles(({ css }) => { + return { + body: css` + & .ant-formily-item-layout-vertical { + margin-bottom: 10px; + } + .ant-card-body { + padding: 15px 20px 5px; + } + .ant-divider-horizontal { + margin: 10px 0; + } + `, + showTitle: css` + .ant-card-body { + padding: 0px 20px 20px 0px; + } + > .ant-card-bordered { + border: none; + } + `, + }; +}); + export const InternalNester = observer( () => { const field = useField(); @@ -15,6 +42,8 @@ export const InternalNester = observer( const { options: collectionField } = useAssociationFieldContext(); const showTitle = fieldSchema['x-decorator-props']?.showTitle ?? true; const { actionName } = useACLActionParamsContext(); + const { styles } = useStyles(); + useEffect(() => { insertNester(schema.Nester); }, []); @@ -23,29 +52,9 @@ export const InternalNester = observer(
.ant-card-bordered { - border: none; - } - `]: showTitle === false, - }, - )} + className={cx(styles.body, { + [styles.showTitle]: showTitle === false, + })} > { + return { + pretty: css` + max-width: 95%; + `, + mask: css` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + z-index: 9999; + `, + container: css` + min-width: 600px; + max-width: 800px; + max-height: 440px; + overflow: auto; + .ant-card { + border: 0px; + } + `, + }; +}); export const InternaPopoverNester = observer( (props) => { + const { styles } = useStyles(); const { options } = useAssociationFieldContext(); const [visible, setVisible] = useState(false); const { t } = useTranslation(); @@ -24,18 +53,7 @@ export const InternaPopoverNester = observer( shouldMountElement: true, }; const content = ( -
+
); @@ -62,11 +80,7 @@ export const InternaPopoverNester = observer( title={t(options?.uiSchema?.rawTitle)} > -
+
@@ -77,15 +91,7 @@ export const InternaPopoverNester = observer( role="button" aria-label={getAriaLabel('mask')} onClick={() => setVisible(false)} - className={css` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: transparent; - z-index: 9999; - `} + className={styles.mask} /> )} diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalSubTable.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalSubTable.tsx index a0d767063..4902c622b 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalSubTable.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalSubTable.tsx @@ -1,7 +1,9 @@ -import { css } from '@emotion/css'; -import { FormLayout } from '@tachybase/components'; -import { RecursionField, SchemaOptionsContext, observer, useField, useFieldSchema } from '@tachybase/schema'; import React, { useEffect } from 'react'; +import { FormLayout } from '@tachybase/components'; +import { observer, RecursionField, SchemaOptionsContext, useField, useFieldSchema } from '@tachybase/schema'; + +import { createStyles } from 'antd-style'; + import { ACLCollectionProvider, useACLActionParamsContext } from '../../../acl'; import { CollectionProvider_deprecated } from '../../../collection-manager'; import { FormItem, useSchemaOptionsContext } from '../../../schema-component'; @@ -9,8 +11,28 @@ import Select from '../select/Select'; import { useAssociationFieldContext, useInsertSchema } from './hooks'; import schema from './schema'; +const useStyles = createStyles(({ css }) => { + return { + container: css` + .ant-formily-item-bordered-none { + .ant-input-number-group-addon { + border: none !important; + background: none; + } + .ant-checkbox-wrapper { + margin-left: 8px; + } + .ant-table { + margin: 0px !important; + } + } + `, + }; +}); + export const InternalSubTable = observer( () => { + const { styles } = useStyles(); const field: any = useField(); const fieldSchema = useFieldSchema(); const insert = useInsertSchema('SubTable'); @@ -36,24 +58,7 @@ export const InternalSubTable = observer( return ( - + { export function isObject(value) { return typeof value === 'object' && value !== null; } -export const ReadPrettyInternalViewer: React.FC = observer( +export const ReadPrettyInternalViewer = observer( (props: any) => { const fieldSchema = useFieldSchema(); const recordCtx = useRecord(); diff --git a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx index ce4320a7e..0e9d315f3 100644 --- a/packages/core/client/src/schema-component/antd/association-field/Nester.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/Nester.tsx @@ -1,31 +1,57 @@ -import { CloseOutlined, PlusOutlined } from '@ant-design/icons'; -import { css } from '@emotion/css'; -import { ArrayField } from '@tachybase/schema'; -import { spliceArrayState } from '@tachybase/schema'; -import { RecursionField, observer, useFieldSchema } from '@tachybase/schema'; -import { action } from '@tachybase/schema'; -import { each } from '@tachybase/schema'; -import { Button, Card, Divider, Tooltip } from 'antd'; -import _ from 'lodash'; import React, { useCallback, useContext } from 'react'; +import { + action, + ArrayField, + each, + observer, + RecursionField, + spliceArrayState, + useFieldSchema, +} from '@tachybase/schema'; + +import { CloseOutlined, PlusOutlined } from '@ant-design/icons'; +import { Button, Card, Divider, Tooltip } from 'antd'; +import { createStyles } from 'antd-style'; +import _ from 'lodash'; import { useTranslation } from 'react-i18next'; + import { FormActiveFieldsProvider } from '../../../block-provider'; +import { useCollection } from '../../../data-source'; import { useCollectionRecord, useCollectionRecordData, } from '../../../data-source/collection-record/CollectionRecordProvider'; +import { isNewRecord, markRecordAsNew } from '../../../data-source/collection-record/isNewRecord'; import { FlagProvider } from '../../../flag-provider'; import { RecordIndexProvider, RecordProvider } from '../../../record-provider'; import { isPatternDisabled, isSystemField } from '../../../schema-settings'; import { DefaultValueProvider, - IsAllowToSetDefaultValueParams, interfacesOfUnsupportedDefaultValue, + IsAllowToSetDefaultValueParams, } from '../../../schema-settings/hooks/useIsAllowToSetDefaultValue'; import { AssociationFieldContext } from './context'; import { SubFormProvider, useAssociationFieldContext } from './hooks'; -import { isNewRecord, markRecordAsNew } from '../../../data-source/collection-record/isNewRecord'; -import { useCollection } from '../../../data-source'; + +const useStyles = createStyles(({ css }) => { + return { + input: css` + position: relative; + .ant-input { + width: 100%; + } + `, + card: css` + > .ant-card-body > .ant-divider:last-child { + display: none; + } + `, + button: css` + border: 1px solid #f0f0f0 !important; + box-shadow: none; + `, + }; +}); export const Nester = (props) => { const { options } = useContext(AssociationFieldContext); @@ -133,17 +159,10 @@ const ToManyNester = observer( !isSystemField(collectionField, getInterface) ); }, []); + const { styles } = useStyles(); return field.value.length > 0 ? ( - .ant-card-body > .ant-divider:last-child { - display: none; - } - `} - > + {field.value.map((value, index) => { let allowed = allowDissociate; if (!allowDissociate) { @@ -221,10 +240,7 @@ const ToManyNester = observer(