diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts b/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts index 7e6ebea7f..60cb5e77e 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts +++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.style.ts @@ -15,7 +15,7 @@ export const useStyles = genStyleHook('nb-action-drawer', (token) => { '.ant-drawer-wrapper-body': { backgroundColor: 'var(--colorBgDrawer)', }, - '.nb-block-item': { + '.tb-block-item': { marginBottom: token.marginLG, '.general-schema-designer': { top: -token.sizeXS, diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.style.ts b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.style.ts index cd100fd3f..a14233b71 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.style.ts +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.style.ts @@ -8,7 +8,7 @@ const useStyles = genStyleHook('nb-association-filter-item', (token) => { '&.SortableItem': { position: 'relative', '&:hover': { '> .general-schema-designer': { display: 'block' } }, - '&.nb-form-item:hover': { + '&.tb-form-item:hover': { '> .general-schema-designer': { background: 'var(--colorBgSettingsHover) !important', border: '0 !important', diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx index 6a4fde971..fc70d077c 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.Item.tsx @@ -94,7 +94,7 @@ export const AssociationFilterItem = withDynamicSchemaProps( const title = fieldSchema.title ?? collectionField?.uiSchema?.title; return wrapSSR( - + {/* @ts-ignore upstream type error */} null : undefined}> diff --git a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx index dc1edaf83..9f13a2971 100644 --- a/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx +++ b/packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx @@ -32,7 +32,7 @@ const useStyles = createStyles(({ css, token }) => { display: block; } } - &.nb-form-item:hover { + &.tb-form-item:hover { > .general-schema-designer { background: var(--colorBgSettingsHover) !important; border: 0 !important; @@ -81,7 +81,7 @@ export const AssociationFilter = (props) => { return ( - + {props.children} {render()} diff --git a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx index dedacd796..d0d2c89a1 100644 --- a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx +++ b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useFieldSchema } from '@tachybase/schema'; import { createStyles } from 'antd-style'; -import cls from 'classnames'; +import cx from 'classnames'; import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps'; import { SortableItem } from '../../common'; @@ -10,55 +10,53 @@ import { useDesigner, useProps } from '../../hooks'; import { useGetAriaLabelOfBlockItem } from './hooks/useGetAriaLabelOfBlockItem'; const useStyles = createStyles(({ css }) => { - return { - container: css` - position: relative; - &:hover { - > .general-schema-designer { - display: block; - } - } - &.nb-form-item:hover { - > .general-schema-designer { - background: var(--colorBgSettingsHover) !important; - border: 0 !important; - top: -5px !important; - bottom: -5px !important; - left: -5px !important; - right: -5px !important; - } - } + return css` + position: relative; + &:hover { > .general-schema-designer { + display: block; + } + } + &.tb-form-item:hover { + > .general-schema-designer { + background: var(--colorBgSettingsHover) !important; + border: 0 !important; + top: -5px !important; + bottom: -5px !important; + left: -5px !important; + right: -5px !important; + } + } + > .general-schema-designer { + position: absolute; + z-index: 999; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: none; + border: 2px solid var(--colorBorderSettingsHover); + pointer-events: none; + > .general-schema-designer-icons { position: absolute; - z-index: 999; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: none; - border: 2px solid var(--colorBorderSettingsHover); - pointer-events: none; - > .general-schema-designer-icons { - position: absolute; - right: 2px; - top: 2px; + right: 2px; + top: 2px; + line-height: 16px; + pointer-events: all; + .ant-space-item { + background-color: var(--colorSettings); + color: #fff; line-height: 16px; - pointer-events: all; - .ant-space-item { - background-color: var(--colorSettings); - color: #fff; - line-height: 16px; - width: 16px; - padding-left: 1px; - align-self: stretch; - } + width: 16px; + padding-left: 1px; + align-self: stretch; } } - `, - }; + } + `; }); -export const BlockItem: React.FC = withDynamicSchemaProps((props) => { +export const BlockItem = withDynamicSchemaProps((props: unknown & { name: string }) => { // 新版 UISchema(1.0 之后)中已经废弃了 useProps,这里之所以继续保留是为了兼容旧版的 UISchema const { className, children } = useProps(props); const { styles } = useStyles(); @@ -68,11 +66,7 @@ export const BlockItem: React.FC = withDynamicSchemaProps((props) => { const { getAriaLabel } = useGetAriaLabelOfBlockItem(props.name); return ( - + {children} diff --git a/packages/core/client/src/schema-component/antd/block-item/TestDesigner.tsx b/packages/core/client/src/schema-component/antd/block-item/TestDesigner.tsx deleted file mode 100644 index 2a521785b..000000000 --- a/packages/core/client/src/schema-component/antd/block-item/TestDesigner.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { DragHandler } from '../../common'; -import { useDesignable } from '../../hooks'; - -export const TestDesigner = () => { - const { remove } = useDesignable(); - return ( - - ); -}; diff --git a/packages/core/client/src/schema-component/antd/block-item/__tests__/block-item.test.tsx b/packages/core/client/src/schema-component/antd/block-item/__tests__/block-item.test.tsx index fbf2a4997..540559536 100644 --- a/packages/core/client/src/schema-component/antd/block-item/__tests__/block-item.test.tsx +++ b/packages/core/client/src/schema-component/antd/block-item/__tests__/block-item.test.tsx @@ -1,5 +1,7 @@ -import { render } from '@testing-library/react'; import React from 'react'; + +import { render } from '@testing-library/react'; + import App1 from '../demos/demo1'; describe('BlockItem', () => { diff --git a/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts b/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts index c086b91b1..779477b8b 100644 --- a/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts +++ b/packages/core/client/src/schema-component/antd/block-item/hooks/useGetAriaLabelOfBlockItem.ts @@ -1,36 +1,37 @@ -import { useFieldSchema } from '@tachybase/schema'; -import _ from 'lodash'; import { useCallback } from 'react'; +import { useFieldSchema } from '@tachybase/schema'; + +import _ from 'lodash'; + import { useBlockContext } from '../../../../block-provider/BlockProvider'; -import { useCollection_deprecated } from '../../../../collection-manager'; +import { useCollection } from '../../../../data-source'; import { useCompile } from '../../../hooks'; /** * label = 'block-item' + x-component + [collectionName] + [blockName] + [x-collection-field] + [title] + [postfix] * @returns */ -export const useGetAriaLabelOfBlockItem = (name?: string) => { +export const useGetAriaLabelOfBlockItem = (defaultName?: string) => { const fieldSchema = useFieldSchema(); const compile = useCompile(); const component = _.isString(fieldSchema['x-component']) ? fieldSchema['x-component'] : fieldSchema['x-component']?.displayName; const collectionField = compile(fieldSchema['x-collection-field']); - let { name: blockName } = useBlockContext() || {}; - // eslint-disable-next-line prefer-const - let { name: collectionName, getField } = useCollection_deprecated(); - blockName = name || blockName; + const { name: blockName } = useBlockContext() || {}; + const collection = useCollection(); + const name = defaultName || blockName; - const title = compile(fieldSchema['title']) || compile(getField(fieldSchema.name)?.uiSchema?.title); + const title = compile(fieldSchema['title']) || compile(collection.getField(fieldSchema.name)?.uiSchema?.title); const getAriaLabel = useCallback( (postfix?: string) => { postfix = postfix ? `-${postfix}` : ''; - return ['block-item', component, collectionName, blockName, collectionField, title, postfix] + return ['block-item', component, collection.name, name, collectionField, title, postfix] .filter(Boolean) .join('-'); }, - [component, collectionName, blockName, collectionField, title], + [component, collection.name, name, collectionField, title], ); return { diff --git a/packages/core/client/src/schema-component/antd/block-item/index.tsx b/packages/core/client/src/schema-component/antd/block-item/index.tsx index 19cf83478..b33e1d49a 100644 --- a/packages/core/client/src/schema-component/antd/block-item/index.tsx +++ b/packages/core/client/src/schema-component/antd/block-item/index.tsx @@ -1,2 +1 @@ export * from './BlockItem'; -export * from './TestDesigner'; diff --git a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx index 277bf337c..6f8833b39 100644 --- a/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx +++ b/packages/core/client/src/schema-component/antd/card-item/CardItem.tsx @@ -1,6 +1,8 @@ -import { useFieldSchema } from '@tachybase/schema'; -import { Card } from 'antd'; import React from 'react'; +import { useFieldSchema } from '@tachybase/schema'; + +import { Card } from 'antd'; + import { useSchemaTemplate } from '../../../schema-templates'; import { BlockItem } from '../block-item'; import useStyles from './style'; @@ -9,7 +11,7 @@ interface Props { children?: React.ReactNode; /** 区块标识 */ name?: string; - [key: string]: any; + [key: string]: unknown; } export const CardItem = (props: Props) => { @@ -17,14 +19,12 @@ export const CardItem = (props: Props) => { const template = useSchemaTemplate(); const fieldSchema = useFieldSchema(); const templateKey = fieldSchema?.['x-template-key']; - const { wrapSSR, componentCls, hashId } = useStyles(); - return wrapSSR( - templateKey && !template ? null : ( - - - {props.children} - - - ), + const { styles } = useStyles(); + return templateKey && !template ? null : ( + + + {props.children} + + ); }; diff --git a/packages/core/client/src/schema-component/antd/card-item/__tests__/card-item.test.tsx b/packages/core/client/src/schema-component/antd/card-item/__tests__/card-item.test.tsx index bf857cd0b..5023a1ccb 100644 --- a/packages/core/client/src/schema-component/antd/card-item/__tests__/card-item.test.tsx +++ b/packages/core/client/src/schema-component/antd/card-item/__tests__/card-item.test.tsx @@ -1,5 +1,6 @@ -import { render, screen } from '@tachybase/test/client'; import React from 'react'; +import { render, screen } from '@tachybase/test/client'; + import App1 from '../demos/demo1'; describe('CardItem', () => { diff --git a/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx index 888312d0b..ddc49554f 100644 --- a/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/card-item/demos/demo1.tsx @@ -1,5 +1,5 @@ -import { CardItem, FormProvider, SchemaComponent } from '@tachybase/client'; import React from 'react'; +import { CardItem, FormProvider, SchemaComponent } from '@tachybase/client'; const schema = { type: 'object', diff --git a/packages/core/client/src/schema-component/antd/card-item/style.ts b/packages/core/client/src/schema-component/antd/card-item/style.ts index e37f1d170..4a19d7794 100644 --- a/packages/core/client/src/schema-component/antd/card-item/style.ts +++ b/packages/core/client/src/schema-component/antd/card-item/style.ts @@ -1,15 +1,11 @@ -import { genStyleHook } from '../__builtins__'; +import { createStyles } from 'antd-style'; -const useStyles = genStyleHook('nb-card-item', (token) => { - const { componentCls } = token; - - return { - [componentCls]: { - '.card': { - marginBottom: token.marginLG, - }, - }, - }; +const useStyles = createStyles(({ css, token }) => { + return css` + .card { + margin-bottom: ${token.marginLG}px; + } + `; }); export default useStyles; diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx index f9101c86d..10b0c4e7c 100644 --- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx @@ -91,7 +91,7 @@ export const FormItem: any = observer( return ( - + diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts index 0119329e8..d43a0a101 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts +++ b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.style.ts @@ -4,7 +4,7 @@ const useStyles = genStyleHook('nb-grid-card', (token) => { const { componentCls } = token; return { [componentCls]: { - '& > .nb-block-item': { + '& > .tb-block-item': { marginBottom: token.marginLG, '& > .nb-action-bar:has(:first-child:not(:empty))': { padding: token.marginLG, diff --git a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx b/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx index 2b7fa271c..0d08d661e 100644 --- a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx +++ b/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx @@ -67,7 +67,7 @@ const useStyles = createStyles(({ css }) => { fixedBlockCss: css` overflow: hidden; position: relative; - .noco-card-item { + .tb-card-item { height: 100%; .ant-card { display: flex; diff --git a/packages/core/client/src/schema-component/antd/variable/Input.tsx b/packages/core/client/src/schema-component/antd/variable/Input.tsx index e1e679663..d2d42c87a 100644 --- a/packages/core/client/src/schema-component/antd/variable/Input.tsx +++ b/packages/core/client/src/schema-component/antd/variable/Input.tsx @@ -5,10 +5,8 @@ import { error } from '@tachybase/utils/client'; import { CloseCircleFilled } from '@ant-design/icons'; import { Input as AntInput, Cascader, DatePicker, InputNumber, Select, Space, Tag } from 'antd'; import { createStyles } from 'antd-style'; -import useAntdInputStyle from 'antd/es/input/style'; import type { DefaultOptionType } from 'antd/lib/cascader'; import cx from 'classnames'; -import classNames from 'classnames'; import dayjs from 'dayjs'; import { cloneDeep } from 'lodash'; import { useTranslation } from 'react-i18next'; @@ -133,36 +131,7 @@ function getTypedConstantOption(type: string, types: true | string[], fieldNames } const useStyles2 = createStyles(({ css }, { disabled }: { disabled: boolean }) => { - return { - container: css` - position: relative; - line-height: 0; - - &:hover { - .clear-button { - display: inline-block; - } - } - - .ant-input { - overflow: auto; - white-space: nowrap; - ${disabled ? '' : 'padding-right: 28px;'} - - .ant-tag { - display: inline; - line-height: 19px; - margin: 0; - padding: 2px 7px; - border-radius: 10px; - white-space: nowrap; - } - } - `, - button: css` - margin-left: -1px; - `, - }; + return {}; }); export function Input(props) { @@ -178,10 +147,6 @@ export function Input(props) { fieldNames, } = props; const scope = typeof props.scope === 'function' ? props.scope() : props.scope; - const { wrapSSR, hashId, componentCls, rootPrefixCls } = useStyles(); - - // 添加 antd input 样式,防止样式缺失 - useAntdInputStyle(`${rootPrefixCls}-input`); const compile = useCompile(); const { t } = useTranslation(); @@ -295,12 +260,12 @@ export function Input(props) { }, [variable, options.length]); const disabled = props.disabled || form.disabled; - const { styles: styles2 } = useStyles2({ disabled }); + const { styles } = useStyles({ disabled }); - return wrapSSR( - + return ( + {variable ? ( -
+
@@ -349,8 +314,8 @@ export function Input(props) { fieldNames={fieldNames} disabled={disabled} > - {button ?? } + {button ?? } - , + ); } diff --git a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx index a1bceacef..2ac073f3b 100644 --- a/packages/core/client/src/schema-component/antd/variable/TextArea.tsx +++ b/packages/core/client/src/schema-component/antd/variable/TextArea.tsx @@ -3,7 +3,6 @@ import { useForm } from '@tachybase/schema'; import { error } from '@tachybase/utils/client'; import { Space } from 'antd'; -import { createStyles } from 'antd-style'; import cx from 'classnames'; import { cloneDeep } from 'lodash'; import sanitizeHTML from 'sanitize-html'; @@ -187,60 +186,12 @@ function getCurrentRange(element: HTMLElement): RangeIndexes { return result; } -const useStyles2 = createStyles(({ css }, { multiline }) => { - return { - container: css` - &.ant-input-group.ant-input-group-compact { - display: flex; - .ant-input { - flex-grow: 1; - min-width: 200px; - } - .ant-input-disabled { - .ant-tag { - color: #bfbfbf; - border-color: #d9d9d9; - } - } - } - - > .x-button { - height: min-content; - } - `, - button: css` - overflow: auto; - white-space: ${multiline ? 'normal' : 'nowrap'}; - - .ant-tag { - display: inline; - line-height: 19px; - margin: 0 0.5em; - padding: 2px 7px; - border-radius: 10px; - } - `, - pretty: css` - overflow: auto; - - .ant-tag { - display: inline; - line-height: 19px; - margin: 0 0.25em; - padding: 2px 7px; - border-radius: 10px; - } - `, - }; -}); - export function TextArea(props) { - const { wrapSSR, hashId, componentCls } = useStyles(); const { value = '', scope, onChange, multiline = true, changeOnSelect } = props; + const { styles } = useStyles({ multiline }); const inputRef = useRef(null); const [options, setOptions] = useState([]); const form = useForm(); - const { styles } = useStyles2({ multiline }); const keyLabelMap = useMemo(() => createOptionsValueLabelMap(options), [options]); const [ime, setIME] = useState(false); const [changed, setChanged] = useState(false); @@ -405,8 +356,8 @@ export function TextArea(props) { const disabled = props.disabled || form.disabled; - return wrapSSR( - + return ( +
) : null} - , + ); } @@ -470,7 +421,7 @@ TextArea.ReadPretty = function ReadPretty(props) { const [options, setOptions] = useState([]); const keyLabelMap = useMemo(() => createOptionsValueLabelMap(options), [options]); - const { styles } = useStyles2(); + const { styles } = useStyles(); useEffect(() => { preloadOptions(scope, value) diff --git a/packages/core/client/src/schema-component/antd/variable/Variable.tsx b/packages/core/client/src/schema-component/antd/variable/Variable.tsx index cb7997143..d5a36d96d 100644 --- a/packages/core/client/src/schema-component/antd/variable/Variable.tsx +++ b/packages/core/client/src/schema-component/antd/variable/Variable.tsx @@ -1,5 +1,5 @@ -import { connect, mapReadPretty } from '@tachybase/schema'; import React, { createContext, useContext } from 'react'; +import { connect, mapReadPretty } from '@tachybase/schema'; import { Input } from './Input'; import { JSONInput } from './JSONInput'; diff --git a/packages/core/client/src/schema-component/antd/variable/XButton.tsx b/packages/core/client/src/schema-component/antd/variable/XButton.tsx index 9a6151142..1c7dfa0ba 100644 --- a/packages/core/client/src/schema-component/antd/variable/XButton.tsx +++ b/packages/core/client/src/schema-component/antd/variable/XButton.tsx @@ -1,6 +1,7 @@ -import { Button, ButtonProps } from 'antd'; import React, { forwardRef, useMemo } from 'react'; +import { Button, ButtonProps } from 'antd'; + export const XButton = forwardRef((props: ButtonProps, ref: any) => { const style = useMemo(() => { return { diff --git a/packages/core/client/src/schema-component/antd/variable/__tests__/variable.test.tsx b/packages/core/client/src/schema-component/antd/variable/__tests__/variable.test.tsx index 1c188ee81..2a44f537b 100644 --- a/packages/core/client/src/schema-component/antd/variable/__tests__/variable.test.tsx +++ b/packages/core/client/src/schema-component/antd/variable/__tests__/variable.test.tsx @@ -1,5 +1,6 @@ -import { render, screen, userEvent, waitFor } from '@tachybase/test/client'; import React from 'react'; +import { render, screen, userEvent, waitFor } from '@tachybase/test/client'; + import App1 from '../demos/demo1'; import App2 from '../demos/demo2'; import App3 from '../demos/demo3'; diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx index 0ae88bac8..bfe7e110b 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/demo1.tsx @@ -1,9 +1,9 @@ /** * title: Variable.Input */ -import { FormItem } from '@tachybase/components'; -import { SchemaComponent, SchemaComponentProvider, Variable } from '@tachybase/client'; import React from 'react'; +import { SchemaComponent, SchemaComponentProvider, Variable } from '@tachybase/client'; +import { FormItem } from '@tachybase/components'; const scope = [ { label: 'v1', value: 'v1' }, diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx index e3f3c0c79..bcc027629 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/demo2.tsx @@ -1,9 +1,9 @@ /** * title: Variable.Input */ -import { FormItem } from '@tachybase/components'; -import { SchemaComponent, SchemaComponentProvider, Variable } from '@tachybase/client'; import React from 'react'; +import { SchemaComponent, SchemaComponentProvider, Variable } from '@tachybase/client'; +import { FormItem } from '@tachybase/components'; const scope = [ { label: 'v1', value: 'v1' }, diff --git a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx index c3bfdb909..0d2730f26 100644 --- a/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/variable/demos/demo3.tsx @@ -1,9 +1,9 @@ /** * title: Variable.Input */ -import { FormItem } from '@tachybase/components'; -import { SchemaComponent, SchemaComponentProvider, Variable } from '@tachybase/client'; import React from 'react'; +import { SchemaComponent, SchemaComponentProvider, Variable } from '@tachybase/client'; +import { FormItem } from '@tachybase/components'; const scope = [ { label: 'v1', value: 'v1' }, diff --git a/packages/core/client/src/schema-component/antd/variable/style.ts b/packages/core/client/src/schema-component/antd/variable/style.ts index 59ed37382..1fb0a29f6 100644 --- a/packages/core/client/src/schema-component/antd/variable/style.ts +++ b/packages/core/client/src/schema-component/antd/variable/style.ts @@ -1,7 +1,7 @@ -import { genStyleHook } from './../__builtins__'; +import { createStyles } from 'antd-style'; -export const useStyles = genStyleHook('nb-variable', (token) => { - const { componentCls, lineWidth, colorFillQuaternary } = token; +export const useStyles = createStyles(({ token, css }, { multiline, disabled }) => { + const { lineWidth, colorFillQuaternary } = token; const inputPaddingHorizontalBase = token.paddingSM - 1; const tagPaddingHorizontal = 8; // Fixed padding. const paddingInline = tagPaddingHorizontal - lineWidth; @@ -10,7 +10,26 @@ export const useStyles = genStyleHook('nb-variable', (token) => { const defaultBg = colorFillQuaternary; return { - [componentCls]: { + fixInput: css` + .ant-input { + box-sizing: border-box; + margin: 0; + padding: 3px 7px; + color: rgba(0, 0, 0, 0.88); + font-size: 12px; + line-height: 1.6666666666666667; + list-style: none; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + position: relative; + display: inline-block; + width: 100%; + min-width: 0; + border-radius: 0; + transition: all 0.1s; + } + `, + outerContainer: { width: 'auto', display: 'flex', '&.ant-input-group-compact': { display: 'flex' }, @@ -95,5 +114,75 @@ export const useStyles = genStyleHook('nb-variable', (token) => { flex: 1, }, }, + container: css` + &.ant-input-group.ant-input-group-compact { + display: flex; + .ant-input { + flex-grow: 1; + min-width: 200px; + } + .ant-input-disabled { + .ant-tag { + color: #bfbfbf; + border-color: #d9d9d9; + } + } + } + + > .x-button { + height: min-content; + } + `, + button: css` + overflow: auto; + white-space: ${multiline ? 'normal' : 'nowrap'}; + + .ant-tag { + display: inline; + line-height: 19px; + margin: 0 0.5em; + padding: 2px 7px; + border-radius: 10px; + } + `, + pretty: css` + overflow: auto; + + .ant-tag { + display: inline; + line-height: 19px; + margin: 0 0.25em; + padding: 2px 7px; + border-radius: 10px; + } + `, + container2: css` + position: relative; + line-height: 0; + + &:hover { + .clear-button { + display: inline-block; + } + } + + .ant-input { + overflow: auto; + white-space: nowrap; + ${disabled ? '' : 'padding-right: 28px;'} + + .ant-tag { + display: inline; + line-height: 19px; + margin: 0; + padding: 2px 7px; + border-radius: 10px; + white-space: nowrap; + } + } + `, + button2: css` + margin-left: -1px; + `, }; }); diff --git a/packages/core/client/src/schema-component/hooks/useDesigner.ts b/packages/core/client/src/schema-component/hooks/useDesigner.ts index 5f5758af6..d25d95057 100644 --- a/packages/core/client/src/schema-component/hooks/useDesigner.ts +++ b/packages/core/client/src/schema-component/hooks/useDesigner.ts @@ -1,6 +1,7 @@ -import { useFieldSchema } from '@tachybase/schema'; -import { useComponent, useDesignable } from '.'; import { useMemo } from 'react'; +import { useFieldSchema } from '@tachybase/schema'; + +import { useComponent, useDesignable } from '.'; import { SchemaToolbar } from '../../schema-settings'; const Def = () => null; diff --git a/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx b/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx index 7f19fc0a6..254bca526 100644 --- a/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx +++ b/packages/core/client/src/schema-settings/SchemaSettingsDefaultValue.tsx @@ -28,7 +28,7 @@ import { getShouldChange, VariableInput } from './VariableInput/VariableInput'; const useStyles = createStyles(({ css }) => { return { defaultInput: css` - & > .nb-form-item { + & > .tb-form-item { flex: 1; } `, diff --git a/packages/plugins/@hera/plugin-core/src/client/schema-initializer/items/CustomFilterFormItemInitializer.tsx b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/items/CustomFilterFormItemInitializer.tsx index 32e1ecc45..775d9e4f9 100644 --- a/packages/plugins/@hera/plugin-core/src/client/schema-initializer/items/CustomFilterFormItemInitializer.tsx +++ b/packages/plugins/@hera/plugin-core/src/client/schema-initializer/items/CustomFilterFormItemInitializer.tsx @@ -446,7 +446,7 @@ export const FilterFormItem = observer( return ( - + diff --git a/packages/plugins/@tachybase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx b/packages/plugins/@tachybase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx index 48b3b05c1..729901327 100644 --- a/packages/plugins/@tachybase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx +++ b/packages/plugins/@tachybase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx @@ -103,7 +103,7 @@ export const ChartFilterFormItem = observer( // const { getIsChartCollectionExists } = useChartData(); // const exists = (schema.name as string).startsWith('custom.') || getIsChartCollectionExists(dataSource, collection); return ( - + diff --git a/packages/plugins/@tachybase/plugin-kanban/src/client/Kanban.Card.tsx b/packages/plugins/@tachybase/plugin-kanban/src/client/Kanban.Card.tsx index e3ab61640..414b68fb2 100644 --- a/packages/plugins/@tachybase/plugin-kanban/src/client/Kanban.Card.tsx +++ b/packages/plugins/@tachybase/plugin-kanban/src/client/Kanban.Card.tsx @@ -65,7 +65,7 @@ export const KanbanCard: any = observer( } .nb-grid-row:last-of-type { .nb-grid-col { - .nb-form-item:last-of-type { + .tb-form-item:last-of-type { .ant-formily-item { margin-bottom: 0; }