From 8e42da2b01ed5f8f773d11f76f358363886f1f39 Mon Sep 17 00:00:00 2001 From: Rain <958414905@qq.com> Date: Sun, 27 Aug 2023 17:16:24 +0800 Subject: [PATCH] Revert "fix(RangePicker): fix shortcut invalid (#2489)" This reverts commit 4eada322ef3fa38e80176189ba8490ecfb6146c5. --- packages/core/client/package.json | 4 +- .../templates/components/PreviewFields.tsx | 4 +- packages/core/client/src/global-theme/type.ts | 2 +- .../schema-component/antd/action/Action.tsx | 3 +- .../InternalPopoverNester.tsx | 8 +- .../__tests__/date-picker.test.tsx | 42 +--- .../antd/date-picker/demos/demo11.tsx | 65 ------ .../antd/filter/FilterAction.tsx | 13 +- .../antd/icon-picker/IconPicker.tsx | 3 +- .../client/src/schema-component/antd/index.ts | 1 - .../antd/input/EllipsisWithTooltip.tsx | 4 +- .../schema-component/antd/popover/Popover.tsx | 16 -- .../schema-component/antd/popover/index.ts | 1 - .../antd/quick-edit/QuickEdit.tsx | 2 +- .../charts/src/client/select/CustomSelect.tsx | 16 +- .../src/client/GraphDrawPage.tsx | 13 +- .../src/client/components/Entity.tsx | 7 +- .../src/client/Localization.tsx | 3 +- .../token-panel-pro/TokenContent.tsx | 10 +- yarn.lock | 196 +----------------- 20 files changed, 52 insertions(+), 361 deletions(-) delete mode 100644 packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx delete mode 100644 packages/core/client/src/schema-component/antd/popover/Popover.tsx delete mode 100644 packages/core/client/src/schema-component/antd/popover/index.ts diff --git a/packages/core/client/package.json b/packages/core/client/package.json index 5f80930929..5a8bd56687 100644 --- a/packages/core/client/package.json +++ b/packages/core/client/package.json @@ -15,7 +15,7 @@ "@dnd-kit/modifiers": "^6.0.0", "@dnd-kit/sortable": "^6.0.0", "@emotion/css": "^11.7.1", - "@formily/antd-v5": "^1.1.1", + "@formily/antd-v5": "^1.1.0", "@formily/core": "^2.2.27", "@formily/grid": "^2.2.27", "@formily/json-schema": "^2.2.27", @@ -30,7 +30,7 @@ "@nocobase/utils": "0.13.0-alpha.4", "@types/requirejs": "^2.1.34", "ahooks": "^3.7.2", - "antd": "5.8.4", + "antd": "^5.7.3", "antd-style": "^3.3.0", "axios": "^0.26.1", "classnames": "^2.3.1", diff --git a/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx b/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx index 09d063f07a..e6a7dc0cd0 100644 --- a/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx +++ b/packages/core/client/src/collection-manager/templates/components/PreviewFields.tsx @@ -1,6 +1,8 @@ +import { Cascader } from '@formily/antd-v5'; import { useField, useForm } from '@formily/react'; -import { Cascader, Input, Select, Spin, Table, Tag } from 'antd'; +import { Input, Select, Spin, Table, Tag } from 'antd'; import { last } from 'lodash'; +import { boolean } from 'mathjs'; import React, { useContext, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ResourceActionContext, useCompile } from '../../../'; diff --git a/packages/core/client/src/global-theme/type.ts b/packages/core/client/src/global-theme/type.ts index 40779b727d..014de53441 100644 --- a/packages/core/client/src/global-theme/type.ts +++ b/packages/core/client/src/global-theme/type.ts @@ -1,4 +1,4 @@ -import { MappingAlgorithm } from 'antd-style'; +import { MappingAlgorithm } from 'antd/es/config-provider/context'; import { OverrideToken } from 'antd/es/theme/interface'; import { AliasToken } from 'antd/es/theme/internal'; diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx index bcea781d6a..1f75d11c65 100644 --- a/packages/core/client/src/schema-component/antd/action/Action.tsx +++ b/packages/core/client/src/schema-component/antd/action/Action.tsx @@ -1,5 +1,5 @@ import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react'; -import { App, Button } from 'antd'; +import { App, Button, Popover } from 'antd'; import classnames from 'classnames'; import lodash from 'lodash'; import React, { useEffect, useState } from 'react'; @@ -11,7 +11,6 @@ import { useRecord } from '../../../record-provider'; import { SortableItem } from '../../common'; import { useCompile, useComponent, useDesigner } from '../../hooks'; import { useProps } from '../../hooks/useProps'; -import { Popover } from '../popover'; import ActionContainer from './Action.Container'; import { ActionDesigner } from './Action.Designer'; import { ActionDrawer } from './Action.Drawer'; diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalPopoverNester.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalPopoverNester.tsx index 7b68398587..ec090f5c91 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalPopoverNester.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalPopoverNester.tsx @@ -1,13 +1,13 @@ -import { EditOutlined } from '@ant-design/icons'; +import { Popover } from 'antd'; import { css } from '@emotion/css'; +import { EditOutlined } from '@ant-design/icons'; import { observer } from '@formily/react'; import React, { useContext, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { ActionContext, ActionContextProvider } from '../action/context'; -import { Popover } from '../popover'; -import { InternalNester } from './InternalNester'; import { ReadPrettyInternalViewer } from './InternalViewer'; +import { InternalNester } from './InternalNester'; import { useAssociationFieldContext } from './hooks'; +import { ActionContextProvider, ActionContext } from '../action/context'; export const InternaPopoverNester = observer( (props) => { diff --git a/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx b/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx index 6f9a07d020..95ab97a60e 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { render, screen, sleep, userEvent, waitFor } from 'testUtils'; import App1 from '../demos/demo1'; -import App11 from '../demos/demo11'; import App2 from '../demos/demo2'; import App3 from '../demos/demo3'; import App4 from '../demos/demo4'; @@ -69,11 +68,8 @@ describe('DatePicker', () => { await userEvent.click(picker); await userEvent.type(input, '2023/05/01'); - let selected; - await waitFor(() => { - selected = document.querySelector('.ant-picker-cell-selected') as HTMLElement; - expect(selected).toBeInTheDocument(); - }); + const selected = document.querySelector('.ant-picker-cell-selected') as HTMLElement; + expect(selected).toBeInTheDocument(); await userEvent.click(selected); expect(input).toHaveValue('2023/05/01'); @@ -142,20 +138,15 @@ describe('RangePicker', () => { const endInput = getByPlaceholderText('End date'); await userEvent.click(picker); - await sleep(); await userEvent.click(document.querySelector('[title="2023-05-01"]') as HTMLElement); await userEvent.click(document.querySelector('[title="2023-05-02"]') as HTMLElement); - await waitFor(() => expect(startInput).toHaveValue('2023-05-01')); - await waitFor(() => expect(endInput).toHaveValue('2023-05-02')); - + expect(startInput).toHaveValue('2023-05-01'); + expect(endInput).toHaveValue('2023-05-02'); // Read pretty - await waitFor(() => - expect(screen.getByText('2023-05-01~2023-05-02', { selector: '.ant-description-text' })).toBeInTheDocument(), - ); - + expect(screen.getByText('2023-05-01~2023-05-02', { selector: '.ant-description-text' })).toBeInTheDocument(); // Value - await waitFor(() => expect(screen.getByText('2023-05-01 ~ 2023-05-02')).toBeInTheDocument()); + expect(screen.getByText('2023-05-01 ~ 2023-05-02')).toBeInTheDocument(); }); it('showTime=false,gmt=true,utc=true', async () => { @@ -228,25 +219,4 @@ describe('RangePicker', () => { expect(screen.getByText(`${currentDateString}T00:00:00.000Z`)).toBeInTheDocument(); }); }); - - // fix T-1506 - it('shortcut', async () => { - const { container } = render(); - - await sleep(); - - const picker = container.querySelector('.ant-picker') as HTMLElement; - const startInput = screen.getByPlaceholderText('Start date'); - const endInput = screen.getByPlaceholderText('End date'); - - await userEvent.click(picker); - - // shortcut: Today - await userEvent.click(screen.getByText(/today/i)); - await sleep(); - - // 因为 Today 快捷键的值是动态生成的，所以这里没有断言具体的值 - await waitFor(() => expect(startInput.getAttribute('value')).toBeTruthy()); - await waitFor(() => expect(endInput.getAttribute('value')).toBeTruthy()); - }); }); diff --git a/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx b/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx deleted file mode 100644 index 1cd60ac4d6..0000000000 --- a/packages/core/client/src/schema-component/antd/date-picker/demos/demo11.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/** - * title: DatePicker.RangePicker - */ -import { FormItem } from '@formily/antd-v5'; -import { DatePicker, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; -import React from 'react'; - -const schema = { - type: 'object', - properties: { - input: { - type: 'boolean', - title: `Editable`, - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - gmt: true, - }, - 'x-reactions': [ - { - target: 'read1', - fulfill: { - state: { - value: '{{$self.value}}', - }, - }, - }, - { - target: 'read2', - fulfill: { - state: { - value: '{{$self.value && $self.value.join(" ~ ")}}', - }, - }, - }, - ], - }, - read1: { - type: 'boolean', - title: `Read pretty`, - 'x-read-pretty': true, - 'x-decorator': 'FormItem', - 'x-component': 'DatePicker.RangePicker', - 'x-component-props': { - gmt: true, - }, - }, - read2: { - type: 'string', - title: `Value`, - 'x-read-pretty': true, - 'x-decorator': 'FormItem', - 'x-component': 'Input', - 'x-component-props': {}, - }, - }, -}; - -export default () => { - return ( - - - - ); -}; diff --git a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx index 2edc93f6a5..2faac33c20 100644 --- a/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx +++ b/packages/core/client/src/schema-component/antd/filter/FilterAction.tsx @@ -1,14 +1,13 @@ import { css } from '@emotion/css'; import { createForm, Field, Form } from '@formily/core'; import { observer, useField, useFieldSchema, useForm } from '@formily/react'; -import { Button, Space } from 'antd'; -import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'; +import { Button, Popover, Space } from 'antd'; +import React, { createContext, useContext, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { FormProvider, SchemaComponent } from '../../core'; import { useDesignable } from '../../hooks'; import { useProps } from '../../hooks/useProps'; import { Action } from '../action'; -import { Popover } from '../popover'; export const FilterActionContext = createContext(null); @@ -21,17 +20,15 @@ export const FilterAction = observer( const fieldSchema = useFieldSchema(); const form = useMemo
(() => props.form || createForm(), []); const { options, onSubmit, onReset, ...others } = useProps(props); - const onOpenChange = useCallback((visible: boolean): void => { - setVisible(visible); - }, []); - return ( { + setVisible(visible); + }} trigger={'click'} content={ diff --git a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx index 1062bc4cd9..71bafad26f 100644 --- a/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx +++ b/packages/core/client/src/schema-component/antd/icon-picker/IconPicker.tsx @@ -2,11 +2,10 @@ import { CloseOutlined, LoadingOutlined } from '@ant-design/icons'; import { useFormLayout } from '@formily/antd-v5'; import { connect, mapProps, mapReadPretty } from '@formily/react'; import { isValid } from '@formily/shared'; -import { Button, Input } from 'antd'; +import { Button, Input, Popover } from 'antd'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Icon, hasIcon, icons } from '../../../icon'; -import { Popover } from '../popover'; function IconField(props: any) { const layout = useFormLayout(); diff --git a/packages/core/client/src/schema-component/antd/index.ts b/packages/core/client/src/schema-component/antd/index.ts index a135753b3b..fd5b21bc48 100644 --- a/packages/core/client/src/schema-component/antd/index.ts +++ b/packages/core/client/src/schema-component/antd/index.ts @@ -35,7 +35,6 @@ export * from './page'; export * from './pagination'; export * from './password'; export * from './percent'; -export * from './popover'; export * from './preview'; export * from './quick-edit'; export * from './radio'; diff --git a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx b/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx index 9f97c597b7..408b66a930 100644 --- a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx +++ b/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx @@ -1,5 +1,5 @@ -import React, { CSSProperties, forwardRef, useImperativeHandle, useRef, useState } from 'react'; -import { Popover } from '../popover'; +import { Popover } from 'antd'; +import React, { CSSProperties, forwardRef, useImperativeHandle, useState, useRef } from 'react'; const getContentWidth = (element) => { if (element) { diff --git a/packages/core/client/src/schema-component/antd/popover/Popover.tsx b/packages/core/client/src/schema-component/antd/popover/Popover.tsx deleted file mode 100644 index 43fb91db35..0000000000 --- a/packages/core/client/src/schema-component/antd/popover/Popover.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { Popover as AntdPopover, PopoverProps } from 'antd'; -import React, { useCallback } from 'react'; - -export const Popover = (props: PopoverProps) => { - // 参见：https://github.com/ant-design/ant-design/issues/44119 - // fix T-1508 - const avoidClose = useCallback((e: React.MouseEvent) => { - e.stopPropagation(); - }, []); - - return ( -
- -
- ); -}; diff --git a/packages/core/client/src/schema-component/antd/popover/index.ts b/packages/core/client/src/schema-component/antd/popover/index.ts deleted file mode 100644 index 8f473de4b9..0000000000 --- a/packages/core/client/src/schema-component/antd/popover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Popover'; diff --git a/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx b/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx index e526a9fd43..ed5de34057 100644 --- a/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx +++ b/packages/core/client/src/schema-component/antd/quick-edit/QuickEdit.tsx @@ -2,9 +2,9 @@ import { css } from '@emotion/css'; import { FormItem } from '@formily/antd-v5'; import { Field, createForm } from '@formily/core'; import { FormContext, RecursionField, observer, useField, useFieldSchema } from '@formily/react'; +import { Popover } from 'antd'; import React, { useMemo, useRef } from 'react'; import { useCollectionManager } from '../../../collection-manager'; -import { Popover } from '../popover'; export const Editable = observer((props) => { const field: any = useField(); diff --git a/packages/plugins/charts/src/client/select/CustomSelect.tsx b/packages/plugins/charts/src/client/select/CustomSelect.tsx index 1e5c364f83..7061682b55 100644 --- a/packages/plugins/charts/src/client/select/CustomSelect.tsx +++ b/packages/plugins/charts/src/client/select/CustomSelect.tsx @@ -1,9 +1,9 @@ import { LoadingOutlined } from '@ant-design/icons'; import { connect, mapProps, mapReadPretty } from '@formily/react'; import { isValid } from '@formily/shared'; -import { Icon, Popover, css } from '@nocobase/client'; +import { css, Icon } from '@nocobase/client'; import type { SelectProps } from 'antd'; -import { Select as AntdSelect } from 'antd'; +import { Popover, Select as AntdSelect } from 'antd'; import React from 'react'; import { lang } from '../locale'; import { ReadPretty } from './ReadPretty'; @@ -35,7 +35,7 @@ const InternalSelect = connect( > {group1.map((option) => ( - {group2.map((option) => ( -