diff --git a/.dumirc.ts b/.dumirc.ts index b42f9b7b84bb..dcb2969b2313 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -212,7 +212,7 @@ export default defineConfig({ }, { title: 'ProFormList', - link: '/en-US/components/group', + link: '/en-US/components/list', }, { title: 'ProFormDependency', @@ -335,7 +335,7 @@ export default defineConfig({ }, { title: 'ProFormList - 数据结构化', - link: '/components/group', + link: '/components/list', }, { title: 'ProFormDependency - 数据联动', diff --git a/.fatherrc.base.ts b/.fatherrc.base.ts index ebc4cf4a86f8..4a6916bfd719 100644 --- a/.fatherrc.base.ts +++ b/.fatherrc.base.ts @@ -5,16 +5,14 @@ export default defineConfig({ esm: { input: 'src', // 默认编译目录 output: 'es', - extraBabelPlugins: [[require.resolve('./scripts/replaceLib'), {}]], platform: 'browser', // 默认构建为 Browser 环境的产物 - transformer: 'babel', // 默认使用 babel 以提供更好的兼容性 + transformer: 'esbuild', // 默认使用 babel 以提供更好的兼容性 }, // 以下为 cjs 配置项启用时的默认值，有自定义需求时才需配置 cjs: { - extraBabelPlugins: [[require.resolve('./scripts/replaceEs'), {}]], input: 'src', // 默认编译目录 output: 'lib', platform: 'browser', // 默认构建为 Node.js 环境的产物 - transformer: 'babel', // 默认使用 esbuild 以获得更快的构建速度 + transformer: 'esbuild', // 默认使用 esbuild 以获得更快的构建速度 }, }); diff --git a/docs/components.en-US.md b/docs/components.en-US.md index 60edbbda9966..101bcba5032e 100644 --- a/docs/components.en-US.md +++ b/docs/components.en-US.md @@ -140,7 +140,7 @@ export type ProSchema = { * @name Customize the edit schema * @description returns a node that will automatically wrap value and onChange */ - renderFormItem?: ( + formItemRender?: ( item: ProSchema, config: { index?: number; diff --git a/docs/components/customization-value-type.tsx b/docs/components/customization-value-type.tsx index 2aed5385e7c5..d7bcdf292135 100644 --- a/docs/components/customization-value-type.tsx +++ b/docs/components/customization-value-type.tsx @@ -160,7 +160,7 @@ export default () => { valueTypeMap={{ link: { render: (text) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -174,7 +174,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/docs/components/schema.en-US.md b/docs/components/schema.en-US.md index 7523d0003d57..034b695f5ab5 100644 --- a/docs/components/schema.en-US.md +++ b/docs/components/schema.en-US.md @@ -19,8 +19,8 @@ In the `ProComponents`, we have used the same definition as tables for component | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | Props passed to the rendering component. They are also passed when customizing | | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | Configuration passed to Form.Item | | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | The modified data is consumed by the rendering component defined by valueType | -| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `renderFormItem` | -| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange | +| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | Custom DOM for read-only mode. The `render` method only manages read-only mode, while the editing mode should use `formItemRender` | +| `formItemRender` | `(schema,config,form) => React.ReactNode` | Custom editing mode that returns a ReactNode, automatically wrapping value and onChange | | `request` | `(params,props) => Promise<{label,value}[]>` | Requests network data remotely, usually used for selection-type components | | `params` | `Record` | Additional parameters passed to `request`. The component does not process them, but changes will trigger a new data request in `request` | | `hideInForm` | `boolean` | Hidden in the form | @@ -77,7 +77,7 @@ export type ProSchema = { * * @name Custom edit mode */ - renderFormItem?: ( + formItemRender?: ( item: ProSchema, config: { index?: number; diff --git a/docs/components/schema.md b/docs/components/schema.md index 53fc46db5df9..ae0e3e358264 100644 --- a/docs/components/schema.md +++ b/docs/components/schema.md @@ -19,8 +19,8 @@ apiHeader:false | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | 传给渲染的组件的 props，自定义的时候也会传递 | | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | 传递给 Form.Item 的配置 | | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | 修改的数据是会被 valueType 定义的渲染组件消费 | -| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `renderFormItem` | -| `renderFormItem` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange | +| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `formItemRender` | +| `formItemRender` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange | | `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 | | `params` | `Record` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 | | `hideInForm` | `boolean` | 在 Form 中隐藏 | @@ -77,7 +77,7 @@ export type ProSchema = { * * @name 自定义编辑模式 */ - renderFormItem?: ( + formItemRender?: ( item: ProSchema, config: { index?: number; diff --git a/docs/components/valueType.tsx b/docs/components/valueType.tsx index 5d9b4cbcf500..a4281691c7cb 100644 --- a/docs/components/valueType.tsx +++ b/docs/components/valueType.tsx @@ -6,7 +6,7 @@ const valueEnum = { all: { text: '全部', status: 'Default' }, open: { text: '未解决', - status: 'Error', + status: 'Warning', }, closed: { text: '已解决', diff --git a/docs/playground/pro-form.en-US.md b/docs/playground/pro-form.en-US.md index d0b7ccbc64a6..5096ab48ee51 100644 --- a/docs/playground/pro-form.en-US.md +++ b/docs/playground/pro-form.en-US.md @@ -15,4 +15,4 @@ ProForm 的主要功能是预设了很多 layout，如果需要切换只需要 ## FormList - + diff --git a/docs/playground/pro-form.md b/docs/playground/pro-form.md index 3d81d9a6ac45..78f675f1d132 100644 --- a/docs/playground/pro-form.md +++ b/docs/playground/pro-form.md @@ -16,4 +16,4 @@ ProForm 的主要功能是预设了很多 layout，如果需要切换只需要 ## FormList - + diff --git a/docs/playground/pro-layout.en-US.md b/docs/playground/pro-layout.en-US.md index f912b3654d29..91b9af0663f3 100644 --- a/docs/playground/pro-layout.en-US.md +++ b/docs/playground/pro-layout.en-US.md @@ -10,7 +10,3 @@ nav: ## Layout 自定义 - -## 水印自定义 - - diff --git a/docs/playground/pro-layout.md b/docs/playground/pro-layout.md index b1c7a8a07360..887a7dae2c9d 100644 --- a/docs/playground/pro-layout.md +++ b/docs/playground/pro-layout.md @@ -11,7 +11,3 @@ nav: ## Layout 自定义 - -## 水印自定义 - - diff --git a/package.json b/package.json index 7f0e18350d42..ab2d3b5aab49 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "start": "npm run version && dumi dev", "sync:tnpm": "node -e 'require(\"./scripts/syncTNPM\")()'", "test": "npm run version && cross-env TZ=UTC vitest --run", - "test:coverage": "npm run version && cross-env TZ=UTC TEST_LOG=none vitest --coverage", + "test:coverage": "npm run version && pnpm --filter \"@ant-design/**\" build && cross-env TZ=UTC TEST_LOG=none vitest --coverage", "test:update": "npm run version && cross-env TZ=UTC vitest -u", "tsc": "tsc --noEmit", "tsc:duplicate": "tsc -p ./tests/tsconfig.duplicate.json", @@ -65,7 +65,7 @@ "@octokit/rest": "^18.12.0", "@testing-library/dom": "^8.20.1", "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^13.4.0", + "@testing-library/react": "^16.0.0", "@testing-library/react-hooks": "^8.0.1", "@testing-library/user-event": "^14.5.2", "@types/chroma-js": "^2.4.4", @@ -84,20 +84,22 @@ "@umijs/doctor": "^1.2.1", "@umijs/fabric": "^4.0.1", "@umijs/plugin-analytics": "^0.2.4", - "@umijs/test": "^3.5.43", - "@umijs/test-utils": "^3.5.43", - "@umijs/utils": "^4.3.20", + "@umijs/test": "^3.5.42", + "@umijs/test-utils": "^3.5.42", + "@umijs/utils": "^4.3.10", + "@vitest/browser": "^2.0.4", "@vitest/coverage-istanbul": "^0.34.6", + "@vitest/ui": "^2.0.4", "animated-scroll-to": "^2.3.0", + "antd-style": "^3.6.2", "antd": "^5.20.6", - "antd-style": "^3.6.3", "babel-loader": "^9.1.3", "babel-types": "^6.26.0", "chalk": "^4.1.2", "chroma-js": "^2.6.0", "copy-to-clipboard": "^3.3.3", "cross-env": "^7.0.3", - "dayjs": "^1.11.13", + "dayjs": "^1.11.12", "dumi": "~2.4.10", "dumi-theme-antd-style": "~0.31.1", "esbuild": "^0.15.18", @@ -112,6 +114,7 @@ "father": "^4.5.0", "gh-pages": "^5.0.0", "glob": "^8.1.0", + "happy-dom": "^14.12.3", "identity-obj-proxy": "^3.0.0", "inquirer": "^8.2.6", "jest-canvas-mock": "^2.5.2", @@ -126,6 +129,7 @@ "np": "^6.5.0", "nprogress": "^0.2.0", "octokit": "^1.8.1", + "playwright": "^1.45.3", "polished": "^4.3.1", "prettier": "^2.8.8", "prettier-plugin-organize-imports": "^3.2.4", @@ -159,7 +163,7 @@ "umi-request": "^1.4.0", "unified": "^11.0.5", "unist-util-visit": "^5.0.0", - "vitest": "^1.6.0", + "vitest": "^2.0.4", "write-pkg": "^4.0.0", "xhr-mock": "^2.5.1", "yorkie": "^2.0.0", @@ -169,5 +173,5 @@ "pre-commit": "pretty-quick --staged", "commit-msg": "fabric verify-commit" }, - "packageManager": "pnpm@9.6.0" + "packageManager": "pnpm@9.1.2" } diff --git a/packages/card/package.json b/packages/card/package.json index e271ada5bab9..7eebc3d31f10 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -47,7 +47,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0" }, "publishConfig": { diff --git a/packages/card/src/components/Card/index.tsx b/packages/card/src/components/Card/index.tsx index dc5f50ee76ab..b9dbfaa025fe 100644 --- a/packages/card/src/components/Card/index.tsx +++ b/packages/card/src/components/Card/index.tsx @@ -5,7 +5,7 @@ import { ConfigProvider, Tabs } from 'antd'; import useBreakpoint from 'antd/es/grid/hooks/useBreakpoint'; import classNames from 'classnames'; import omit from 'omit.js'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React, { useContext } from 'react'; import type { Breakpoint, CardProps, Gutter } from '../../typing'; import Actions from '../Actions'; diff --git a/packages/card/src/components/StatisticCard/index.tsx b/packages/card/src/components/StatisticCard/index.tsx index a3d9dfb65ceb..ae66c0dbc8c4 100644 --- a/packages/card/src/components/StatisticCard/index.tsx +++ b/packages/card/src/components/StatisticCard/index.tsx @@ -9,9 +9,6 @@ import type { StatisticProps } from '../Statistic'; import Statistic from '../Statistic'; import { useStyle } from './style'; -import 'antd/lib/divider/style'; -import 'antd/lib/statistic/style'; - export type StatisticCardProps = { /** 图表配置 */ chart?: React.ReactNode; diff --git a/packages/card/src/components/TabPane/index.tsx b/packages/card/src/components/TabPane/index.tsx index 90f76aee2718..733814d40241 100644 --- a/packages/card/src/components/TabPane/index.tsx +++ b/packages/card/src/components/TabPane/index.tsx @@ -1,8 +1,8 @@ import type { TabPaneProps, TabsProps } from 'antd'; import { ConfigProvider, Tabs, version } from 'antd'; import classNames from 'classnames'; -import toArray from 'rc-util/lib/Children/toArray'; -import { noteOnce } from 'rc-util/lib/warning'; +import toArray from 'rc-util/es/Children/toArray'; +import { noteOnce } from 'rc-util/es/warning'; import React, { useContext } from 'react'; import type { ProCardTabPaneProps, ProCardTabsProps } from '../../typing'; import Card from '../Card'; diff --git a/packages/card/src/index.tsx b/packages/card/src/index.tsx index 0da135a7487f..374c011bc082 100644 --- a/packages/card/src/index.tsx +++ b/packages/card/src/index.tsx @@ -14,8 +14,6 @@ import type { ProCardProps } from './ProCard'; import ProCard from './ProCard'; import type { ProCardTabsProps } from './typing'; -import 'antd/lib/card/style'; - export { CheckCard, ProCard, Statistic, StatisticCard }; export type { CheckCardGroupProps, diff --git a/packages/card/src/typing.ts b/packages/card/src/typing.ts index 5a130626c5d3..23c131949218 100644 --- a/packages/card/src/typing.ts +++ b/packages/card/src/typing.ts @@ -1,5 +1,5 @@ import type { TabPaneProps, TabsProps } from 'antd'; -import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel'; +import type { LabelTooltipType } from 'antd/es/form/FormItemLabel'; import type { ReactNode } from 'react'; export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; diff --git a/packages/card/tsconfig.json b/packages/card/tsconfig.json deleted file mode 100644 index aa8605327dc3..000000000000 --- a/packages/card/tsconfig.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "forceConsistentCasingInFileNames": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "paths": { - "@ant-design/pro-components": ["../../packages/components/src/index.tsx"], - "@ant-design/pro-provider": ["../../packages/provider/src/index.tsx"], - "@ant-design/pro-utils": ["../../packages/utils/src/index.tsx"] - } - }, - "include": ["./src"] -} diff --git a/packages/components/package.json b/packages/components/package.json index d4f5a3be3ec1..f422295812c4 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -48,7 +48,7 @@ "@babel/runtime": "^7.16.3" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0", "react-dom": ">=17.0.0" }, diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json deleted file mode 100644 index 013fa87f2bf8..000000000000 --- a/packages/components/tsconfig.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "paths": { - "@ant-design/pro-layout": ["../../packages/layout/src/index.tsx"], - "@ant-design/pro-form": ["../../packages/form/src/index.tsx"], - "@ant-design/pro-table": ["../../packages/table/src/index.tsx"], - "@ant-design/pro-field": ["../../packages/field/src/index.tsx"], - "@ant-design/pro-skeleton": ["../../packages/skeleton/src/index.tsx"], - "@ant-design/pro-list": ["../../packages/list/src/index.tsx"], - "@ant-design/pro-provider": ["../../packages/provider/src/index.tsx"], - "@ant-design/pro-descriptions": [ - "../../packages/descriptions/src/index.tsx" - ], - "@ant-design/pro-utils": ["../../packages/utils/src/index.tsx"], - "@ant-design/pro-card": ["../../packages/card/src/index.tsx"] - } - }, - "include": ["./src"] -} diff --git a/packages/descriptions/package.json b/packages/descriptions/package.json index c9e67f64b79b..520578bd4be4 100644 --- a/packages/descriptions/package.json +++ b/packages/descriptions/package.json @@ -47,7 +47,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0" }, "publishConfig": { diff --git a/packages/descriptions/src/demos/customization-value-type.tsx b/packages/descriptions/src/demos/customization-value-type.tsx index 7134ac2cfde8..24e446e0f98d 100644 --- a/packages/descriptions/src/demos/customization-value-type.tsx +++ b/packages/descriptions/src/demos/customization-value-type.tsx @@ -102,7 +102,7 @@ export default () => { valueTypeMap: { link: { render: (text) => {text}, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, @@ -116,7 +116,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/descriptions/src/demos/editable.tsx b/packages/descriptions/src/demos/editable.tsx index 6bd5b911103c..6ab164458d16 100644 --- a/packages/descriptions/src/demos/editable.tsx +++ b/packages/descriptions/src/demos/editable.tsx @@ -56,7 +56,7 @@ export default () => { title: '状态2', key: 'state2', dataIndex: 'state2', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx index 0e8fb56a25d6..4be344b9bc73 100644 --- a/packages/descriptions/src/index.tsx +++ b/packages/descriptions/src/index.tsx @@ -13,27 +13,23 @@ import { ErrorBoundary, InlineErrorFormItem, LabelIconTip, - compareVersions, genCopyable, getFieldPropsOrFormItemProps, stringify, useEditableMap, } from '@ant-design/pro-utils'; import type { DescriptionsProps, FormInstance, FormProps } from 'antd'; -import { ConfigProvider, Descriptions, Space, version } from 'antd'; -import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel'; -import toArray from 'rc-util/lib/Children/toArray'; -import get from 'rc-util/lib/utils/get'; +import { ConfigProvider, Descriptions, Space } from 'antd'; +import type { LabelTooltipType } from 'antd/es/form/FormItemLabel'; +import toArray from 'rc-util/es/Children/toArray'; +import get from 'rc-util/es/utils/get'; import React, { useContext, useEffect } from 'react'; import type { RequestData } from './useFetchData'; import useFetchData from './useFetchData'; -// 兼容代码----------- import type { ProFieldFCMode } from '@ant-design/pro-provider'; import { proTheme } from '@ant-design/pro-provider'; import type { DescriptionsItemType } from 'antd/es/descriptions'; -import 'antd/lib/descriptions/style'; -//---------------------- // todo remove it export interface DescriptionsItemProps { @@ -176,7 +172,7 @@ export const FieldRender: React.FC< plain, dataIndex, request, - renderFormItem, + formItemRender, params, emptyText, } = props; @@ -259,10 +255,10 @@ export const FieldRender: React.FC< {...fieldConfig} // @ts-ignore proFieldProps={{ ...fieldConfig.proFieldProps }} - renderFormItem={ - renderFormItem + formItemRender={ + formItemRender ? () => - renderFormItem?.( + formItemRender?.( { ...props, type: 'descriptions', @@ -328,16 +324,13 @@ const schemaToDescriptionsItem = ( emptyText?: React.ReactNode, ) => { const options: JSX.Element[] = []; - const isBigger58 = compareVersions(version, '5.8.0') >= 0; // 因为 Descriptions 只是个语法糖，children 是不会执行的，所以需要这里处理一下 const children = items ?.map?.((item, index) => { if (React.isValidElement(item)) { - return isBigger58 - ? { - children: item, - } - : item; + return { + children: item, + }; } const { valueEnum, @@ -388,18 +381,20 @@ const schemaToDescriptionsItem = ( const contentDom: React.ReactNode = fieldMode === 'edit' ? text : genCopyable(text, item, text); + const key = restItem.key || restItem.label?.toString() || index; + const label = (title || restItem.label || restItem.tooltip) && ( + + ); const field: DescriptionsItemType | JSX.Element = - isBigger58 && valueType !== 'option' + valueType !== 'option' ? ({ ...restItem, - key: restItem.key || restItem.label?.toString() || index, - label: (title || restItem.label || restItem.tooltip) && ( - - ), + key, + label, children: ( - ) - } - > + - {showEditIcon && valueType !== 'option' && ( - { - editableUtils?.startEditable(dataIndex || index); - }} - /> - )} ) as JSX.Element); @@ -625,7 +601,6 @@ const ProDescriptions = < } const className = context.getPrefixCls('pro-descriptions'); - const isBigger58 = compareVersions(version, '5.8.0') >= 0; return ( - {isBigger58 ? null : (children as JSX.Element[])} - + items={children as DescriptionsItemType[]} + /> ); diff --git a/packages/descriptions/src/useFetchData.tsx b/packages/descriptions/src/useFetchData.tsx index cd732478fb6e..7c56dc6b19d4 100644 --- a/packages/descriptions/src/useFetchData.tsx +++ b/packages/descriptions/src/useFetchData.tsx @@ -1,4 +1,4 @@ -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import { useEffect } from 'react'; export type RequestData = { diff --git a/packages/descriptions/tsconfig.json b/packages/descriptions/tsconfig.json deleted file mode 100644 index 8bf885b015fd..000000000000 --- a/packages/descriptions/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "paths": { - "@ant-design/pro-form": ["../../packages/form/src/index.tsx"], - "@ant-design/pro-table": ["../../packages/table/src/index.tsx"], - "@ant-design/pro-field": ["../../packages/field/src/index.tsx"], - "@ant-design/pro-provider": ["../../packages/provider/src/index.tsx"], - "@ant-design/pro-skeleton": ["../../packages/skeleton/src/index.tsx"], - "@ant-design/pro-utils": ["../../packages/utils/src/index.tsx"] - } - }, - "include": ["./src"] -} diff --git a/packages/field/CHANGELOG.md b/packages/field/CHANGELOG.md index 51e7a9083095..04cc0b835d2e 100644 --- a/packages/field/CHANGELOG.md +++ b/packages/field/CHANGELOG.md @@ -136,7 +136,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **descriptions:** fix ProTable 和 ProDescriptions render 行为不一样的问题 ([227d302](https://github.com/ant-design/pro-components/commit/227d3023934efceb2f86184767ef7afe37a73c3b)) -- **field:** remove useDeepCompareMemo which causing renderFormItem not updated ([#7887](https://github.com/ant-design/pro-components/issues/7887)) ([d507222](https://github.com/ant-design/pro-components/commit/d507222c083a8be976f8d4dfc3fec9380f0f4316)) +- **field:** remove useDeepCompareMemo which causing formItemRender not updated ([#7887](https://github.com/ant-design/pro-components/issues/7887)) ([d507222](https://github.com/ant-design/pro-components/commit/d507222c083a8be976f8d4dfc3fec9380f0f4316)) - **form:** fix ProFormMoney customSymbol no work error ([d0f30b8](https://github.com/ant-design/pro-components/commit/d0f30b8b9b7354798ac5b9271b88dad772f56f36)) - **form:** 修复 FieldOptions 中子元素换行问题 ([#7856](https://github.com/ant-design/pro-components/issues/7856)) ([6a6f1c4](https://github.com/ant-design/pro-components/commit/6a6f1c48bee9d5aaf12842b3f225766192b44ccc)) @@ -238,7 +238,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **form:** 修复 compact warning ([#7496](https://github.com/ant-design/pro-components/issues/7496)) ([b60d33d](https://github.com/ant-design/pro-components/commit/b60d33d285b4ed0081fb813ace5fc1f0211acf20)) -- **form:** 表单项配置 request 并且自定义 renderFormItem 时，没有透传 options 和 loading ([#7457](https://github.com/ant-design/pro-components/issues/7457)) ([1baf580](https://github.com/ant-design/pro-components/commit/1baf58029c38e5ebde5533da6d7f5aea57f19e6c)), closes [#7456](https://github.com/ant-design/pro-components/issues/7456) +- **form:** 表单项配置 request 并且自定义 formItemRender 时，没有透传 options 和 loading ([#7457](https://github.com/ant-design/pro-components/issues/7457)) ([1baf580](https://github.com/ant-design/pro-components/commit/1baf58029c38e5ebde5533da6d7f5aea57f19e6c)), closes [#7456](https://github.com/ant-design/pro-components/issues/7456) ### Features diff --git a/packages/field/package.json b/packages/field/package.json index cfcd1fcd9728..c43f20b11e50 100644 --- a/packages/field/package.json +++ b/packages/field/package.json @@ -33,7 +33,6 @@ "@ant-design/pro-provider": "2.14.9", "@ant-design/pro-utils": "2.15.18", "@babel/runtime": "^7.18.0", - "@chenshuai2144/sketch-color": "^1.0.8", "classnames": "^2.3.2", "dayjs": "^1.11.10", "lodash-es": "^4.17.21", @@ -48,7 +47,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0" } } diff --git a/packages/field/src/AllProField.tsx b/packages/field/src/AllProField.tsx new file mode 100644 index 000000000000..6d3a3824cb5a --- /dev/null +++ b/packages/field/src/AllProField.tsx @@ -0,0 +1,644 @@ +import type { + BaseProFieldFC, + ProFieldFCRenderProps, + ProRenderFieldPropsType, +} from '@ant-design/pro-provider'; +import ProConfigContext from '@ant-design/pro-provider'; +import { + omitUndefined, + pickProProps, + ProFieldRequestData, + ProFieldTextType, + ProFieldValueObjectType, + ProFieldValueType, + useDeepCompareMemo, + useRefFunction, +} from '@ant-design/pro-utils'; +import { Avatar } from 'antd'; +import React, { useContext } from 'react'; +import FieldCascader from './components/Cascader'; +import FieldCheckbox from './components/Checkbox'; +import FieldCode from './components/Code'; +import FieldColorPicker from './components/ColorPicker'; +import FieldDatePicker from './components/DatePicker'; +import FieldDigit from './components/Digit'; +import FieldDigitRange from './components/DigitRange'; +import FieldFromNow from './components/FromNow'; +import FieldImage from './components/Image'; +import FieldIndexColumn from './components/IndexColumn'; +import FieldMoney from './components/Money'; +import FieldOptions from './components/Options'; +import FieldPassword from './components/Password'; +import FieldPercent from './components/Percent'; +import FieldProgress from './components/Progress'; +import FieldRadio from './components/Radio'; +import FieldRangePicker from './components/RangePicker'; +import FieldRate from './components/Rate'; +import FieldSecond from './components/Second'; +import FieldSegmented from './components/Segmented'; +import FieldSelect from './components/Select'; +import FieldSlider from './components/Slider'; +import FieldSwitch from './components/Switch'; +import FieldText from './components/Text'; +import FieldTextArea from './components/TextArea'; +import FieldTimePicker, { FieldTimeRangePicker } from './components/TimePicker'; +import FieldTreeSelect from './components/TreeSelect'; +import FieldHOC from './FieldHOC'; + +import advancedFormat from 'dayjs/plugin/advancedFormat'; +import isoWeek from 'dayjs/plugin/isoWeek'; +import localeData from 'dayjs/plugin/localeData'; +import weekday from 'dayjs/plugin/weekday'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; + +import dayjs from 'dayjs'; +import { ProFieldPropsType } from './PureProField'; + +dayjs.extend(localeData); +dayjs.extend(advancedFormat); +dayjs.extend(isoWeek); +dayjs.extend(weekOfYear); +dayjs.extend(weekday); + +/** 默认的 Field 需要实现的功能 */ +// eslint-disable-next-line @typescript-eslint/ban-types +export type ProFieldFC = React.ForwardRefRenderFunction< + any, + BaseProFieldFC & ProRenderFieldPropsType & T +>; + +/** 轻量筛选的field属性 */ +export type ProFieldLightProps = { + // label和clear图标的ref + lightLabel?: React.RefObject<{ + labelRef: React.RefObject; + clearRef: React.RefObject; + }>; + + // 是否点击了label + labelTrigger?: boolean; +}; + +/** Value type by function */ +export type ProFieldValueTypeFunction = ( + item: T, +) => ProFieldValueType | ProFieldValueObjectType; + +type RenderProps = Omit & + ProRenderFieldPropsType & { + /** 从服务器读取选项 */ + request?: ProFieldRequestData; + emptyText?: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; + + /** + * @deprecated use onOpenChange replace + */ + onVisible?: (visible: boolean) => void; + /** + * @deprecated use open replace + */ + visible?: boolean; + [key: string]: any; + }; + +/** + * Render valueType object + * + * @param text String | number + * @param valueType ProColumnsValueObjectType + */ +const defaultRenderTextByObject = ( + text: ProFieldTextType, + valueType: ProFieldValueObjectType, + props: RenderProps, +) => { + const pickFormItemProps = pickProProps(props.fieldProps); + if (valueType.type === 'progress') { + return ( + + ); + } + if (valueType.type === 'money') { + return ( + + ); + } + if (valueType.type === 'percent') { + return ( + + ); + } + + if (valueType.type === 'image') { + return ( + + ); + } + + return text as React.ReactNode; +}; + +/** + * 根据不同的类型来转化数值 + * + * @param dataValue + * @param valueType + */ +export const defaultRenderText = ( + dataValue: ProFieldTextType, + valueType: ProFieldValueType | ProFieldValueObjectType, + props: RenderProps, + valueTypeMap: Record, +): React.ReactNode => { + const { mode = 'read', emptyText = '-' } = props; + + if ( + emptyText !== false && + mode === 'read' && + valueType !== 'option' && + valueType !== 'switch' + ) { + if ( + typeof dataValue !== 'boolean' && + typeof dataValue !== 'number' && + !dataValue + ) { + const { fieldProps, render } = props; + if (render) { + return render(dataValue, { mode, ...fieldProps }, <>{emptyText}); + } + return <>{emptyText}; + } + } + + // eslint-disable-next-line no-param-reassign + delete props.emptyText; + + if (typeof valueType === 'object') { + return defaultRenderTextByObject(dataValue, valueType, props); + } + + const customValueTypeConfig = + valueTypeMap && valueTypeMap[valueType as string]; + if (customValueTypeConfig) { + // eslint-disable-next-line no-param-reassign + delete props.ref; + if (mode === 'read') { + return customValueTypeConfig.render?.( + dataValue, + { + text: dataValue as React.ReactNode, + ...props, + mode: mode || 'read', + }, + <>{dataValue}, + ); + } + if (mode === 'update' || mode === 'edit') { + return customValueTypeConfig.formItemRender?.( + dataValue, + { + text: dataValue as React.ReactNode, + ...props, + }, + <>{dataValue}, + ); + } + } + + /** 如果是金额的值 */ + if (valueType === 'money') { + return ; + } + + /** 如果是日期的值 */ + if (valueType === 'date') { + return ( + + + + ); + } + + /** 如果是周的值 */ + if (valueType === 'dateWeek') { + return ( + + + + ); + } + + /** 如果是周范围的值 */ + if (valueType === 'dateWeekRange') { + const { fieldProps, ...otherProps } = props; + return ( + + + + ); + } + + /** 如果是月范围的值 */ + if (valueType === 'dateMonthRange') { + const { fieldProps, ...otherProps } = props; + return ( + + + + ); + } + + /** 如果是季范围的值 */ + if (valueType === 'dateQuarterRange') { + const { fieldProps, ...otherProps } = props; + return ( + + + + ); + } + + /** 如果是年范围的值 */ + if (valueType === 'dateYearRange') { + const { fieldProps, ...otherProps } = props; + return ( + + + + ); + } + + /** 如果是月的值 */ + if (valueType === 'dateMonth') { + return ( + + + + ); + } + + /** 如果是季度的值 */ + if (valueType === 'dateQuarter') { + return ( + + + + ); + } + + /** 如果是年的值 */ + if (valueType === 'dateYear') { + return ( + + + + ); + } + + /** 如果是日期范围的值 */ + if (valueType === 'dateRange') { + return ( + + ); + } + + /** 如果是日期加时间类型的值 */ + if (valueType === 'dateTime') { + return ( + + + + ); + } + + /** 如果是日期加时间类型的值的值 */ + if (valueType === 'dateTimeRange') { + // 值不存在的时候显示 "-" + return ( + + + + ); + } + + /** 如果是时间类型的值 */ + if (valueType === 'time') { + return ( + + + + ); + } + + /** 如果是时间类型的值 */ + if (valueType === 'timeRange') { + return ( + + + + ); + } + + if (valueType === 'fromNow') { + return ; + } + + if (valueType === 'index') { + return {(dataValue as number) + 1}; + } + + if (valueType === 'indexBorder') { + return ( + {(dataValue as number) + 1} + ); + } + + if (valueType === 'progress') { + return ; + } + /** 百分比, 默认展示符号, 不展示小数位 */ + if (valueType === 'percent') { + return ; + } + + if ( + valueType === 'avatar' && + typeof dataValue === 'string' && + props.mode === 'read' + ) { + return ; + } + + if (valueType === 'code') { + return ; + } + + if (valueType === 'jsonCode') { + return ; + } + + if (valueType === 'textarea') { + return ; + } + + if (valueType === 'digit') { + return ; + } + + if (valueType === 'digitRange') { + return ; + } + + if (valueType === 'second') { + return ; + } + + if ( + valueType === 'select' || + (valueType === 'text' && (props.valueEnum || props.request)) + ) { + return ( + + + + ); + } + + if (valueType === 'checkbox') { + return ; + } + + if (valueType === 'radio') { + return ; + } + + if (valueType === 'radioButton') { + return ( + + ); + } + + if (valueType === 'rate') { + return ; + } + if (valueType === 'slider') { + return ; + } + if (valueType === 'switch') { + return ; + } + + if (valueType === 'option') { + return ; + } + + if (valueType === 'password') { + return ; + } + + if (valueType === 'image') { + return ; + } + if (valueType === 'cascader') { + return ; + } + + if (valueType === 'treeSelect') { + return ; + } + + if (valueType === 'color') { + return ; + } + + if (valueType === 'segmented') { + return ; + } + + return ; +}; + +const ProFieldComponent: React.ForwardRefRenderFunction< + any, + ProFieldPropsType +> = ( + { + text, + valueType = 'text', + mode = 'read', + onChange, + formItemRender, + value, + readonly, + fieldProps: restFieldProps, + ...rest + }, + ref: any, +) => { + const context = useContext(ProConfigContext); + + const onChangeCallBack = useRefFunction((...restParams: any[]) => { + restFieldProps?.onChange?.(...restParams); + onChange?.(...restParams); + }); + + const fieldProps: any = useDeepCompareMemo(() => { + return ( + (value !== undefined || restFieldProps) && { + value, + // fieldProps 优先级更高，在类似 LightFilter 场景下需要覆盖默认的 value 和 onChange + ...omitUndefined(restFieldProps), + onChange: onChangeCallBack, + } + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value, restFieldProps, onChangeCallBack]); + + const renderedDom = defaultRenderText( + mode === 'edit' + ? fieldProps?.value ?? text ?? '' + : text ?? fieldProps?.value ?? '', + valueType || 'text', + omitUndefined({ + ref, + ...rest, + mode: readonly ? 'read' : mode, + formItemRender: formItemRender + ? (curText: any, props: ProFieldFCRenderProps, dom: JSX.Element) => { + const { placeholder: _placeholder, ...restProps } = props; + const newDom = formItemRender(curText, restProps, dom); + // formItemRender 之后的dom可能没有props，这里会帮忙注入一下 + if (React.isValidElement(newDom)) + return React.cloneElement(newDom, { + ...fieldProps, + ...((newDom.props as any) || {}), + }); + return newDom; + } + : undefined, + placeholder: formItemRender + ? undefined + : rest?.placeholder ?? fieldProps?.placeholder, + fieldProps: pickProProps( + omitUndefined({ + ...fieldProps, + placeholder: formItemRender + ? undefined + : rest?.placeholder ?? fieldProps?.placeholder, + }), + ), + }), + context.valueTypeMap || {}, + ); + + return {renderedDom}; +}; + +export const ProField = React.forwardRef( + ProFieldComponent, +) as typeof ProFieldComponent; diff --git a/packages/field/src/FieldHOC/index.tsx b/packages/field/src/FieldHOC/index.tsx index 833f1f1edf51..596970212b0b 100644 --- a/packages/field/src/FieldHOC/index.tsx +++ b/packages/field/src/FieldHOC/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useRef, useState } from 'react'; -import type { ProFieldLightProps } from '../index'; +import type { ProFieldLightProps } from '../PureProField'; function FieldHOC( props: T & { diff --git a/packages/field/src/PureProField.tsx b/packages/field/src/PureProField.tsx new file mode 100644 index 000000000000..614083b042fa --- /dev/null +++ b/packages/field/src/PureProField.tsx @@ -0,0 +1,245 @@ +import type { + BaseProFieldFC, + ProFieldFCRenderProps, + ProRenderFieldPropsType, +} from '@ant-design/pro-provider'; +import ProConfigContext from '@ant-design/pro-provider'; +import { + omitUndefined, + pickProProps, + ProFieldRequestData, + ProFieldTextType, + ProFieldValueObjectType, + ProFieldValueType, + useDeepCompareMemo, + useRefFunction, +} from '@ant-design/pro-utils'; +import React, { useContext } from 'react'; +import type { FieldMoneyProps } from './components/Money'; +import FieldText from './components/Text'; + +import advancedFormat from 'dayjs/plugin/advancedFormat'; +import isoWeek from 'dayjs/plugin/isoWeek'; +import localeData from 'dayjs/plugin/localeData'; +import weekday from 'dayjs/plugin/weekday'; +import weekOfYear from 'dayjs/plugin/weekOfYear'; + +import dayjs from 'dayjs'; + +dayjs.extend(localeData); +dayjs.extend(advancedFormat); +dayjs.extend(isoWeek); +dayjs.extend(weekOfYear); +dayjs.extend(weekday); + +export type ProFieldMoneyProps = FieldMoneyProps; + +export type ProFieldEmptyText = string | false; + +/** 默认的 Field 需要实现的功能 */ +// eslint-disable-next-line @typescript-eslint/ban-types +export type ProFieldFC = React.ForwardRefRenderFunction< + any, + BaseProFieldFC & ProRenderFieldPropsType & T +>; + +/** 轻量筛选的field属性 */ +export type ProFieldLightProps = { + // label和clear图标的ref + lightLabel?: React.RefObject<{ + labelRef: React.RefObject; + clearRef: React.RefObject; + }>; + + // 是否点击了label + labelTrigger?: boolean; +}; + +/** Value type by function */ +export type ProFieldValueTypeFunction = ( + item: T, +) => ProFieldValueType | ProFieldValueObjectType; + +type RenderProps = Omit & + ProRenderFieldPropsType & { + /** 从服务器读取选项 */ + request?: ProFieldRequestData; + emptyText?: React.ReactNode; + open?: boolean; + onOpenChange?: (open: boolean) => void; + + /** + * @deprecated use onOpenChange replace + */ + onVisible?: (visible: boolean) => void; + /** + * @deprecated use open replace + */ + visible?: boolean; + [key: string]: any; + }; + +/** + * 根据不同的类型来转化数值 + * + * @param dataValue + * @param valueType + */ +export const pureRenderText = ( + dataValue: ProFieldTextType, + valueType: ProFieldValueType | ProFieldValueObjectType, + props: RenderProps, + valueTypeMap: Record, +): React.ReactNode => { + const { mode = 'read', emptyText = '-' } = props; + + if ( + emptyText !== false && + mode === 'read' && + valueType !== 'option' && + valueType !== 'switch' + ) { + if ( + typeof dataValue !== 'boolean' && + typeof dataValue !== 'number' && + !dataValue + ) { + const { fieldProps, render } = props; + if (render) { + return render(dataValue, { mode, ...fieldProps }, <>{emptyText}); + } + return <>{emptyText}; + } + } + + // eslint-disable-next-line no-param-reassign + delete props.emptyText; + + if (typeof valueType === 'object') { + // eslint-disable-next-line @typescript-eslint/no-use-before-define + return pureRenderText( + dataValue, + valueType.type, + { + ...valueType, + ...props, + } as RenderProps, + valueTypeMap, + ); + } + + const customValueTypeConfig = + valueTypeMap && valueTypeMap[valueType as string]; + if (customValueTypeConfig) { + // eslint-disable-next-line no-param-reassign + delete props.ref; + if (mode === 'read') { + return customValueTypeConfig.render?.( + dataValue, + { + text: dataValue as React.ReactNode, + ...props, + mode: mode || 'read', + }, + <>{dataValue}, + ); + } + if (mode === 'update' || mode === 'edit') { + return customValueTypeConfig.formItemRender?.( + dataValue, + { + text: dataValue as React.ReactNode, + ...props, + }, + <>{dataValue}, + ); + } + } + return ; +}; + +/** ProField 的类型 */ +export type ProFieldPropsType = { + text?: ProFieldTextType; + valueType?: ProFieldValueType | ProFieldValueObjectType; +} & RenderProps; + +const ProFieldComponent: React.ForwardRefRenderFunction< + any, + ProFieldPropsType +> = ( + { + text, + valueType = 'text', + mode = 'read', + onChange, + formItemRender, + value, + readonly, + fieldProps: restFieldProps, + ...rest + }, + ref: any, +) => { + const context = useContext(ProConfigContext); + + const onChangeCallBack = useRefFunction((...restParams: any[]) => { + restFieldProps?.onChange?.(...restParams); + onChange?.(...restParams); + }); + + const fieldProps: any = useDeepCompareMemo(() => { + return ( + (value !== undefined || restFieldProps) && { + value, + // fieldProps 优先级更高，在类似 LightFilter 场景下需要覆盖默认的 value 和 onChange + ...omitUndefined(restFieldProps), + onChange: onChangeCallBack, + } + ); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [value, restFieldProps, onChangeCallBack]); + + const renderedDom = pureRenderText( + mode === 'edit' + ? fieldProps?.value ?? text ?? '' + : text ?? fieldProps?.value ?? '', + valueType || 'text', + omitUndefined({ + ref, + ...rest, + mode: readonly ? 'read' : mode, + formItemRender: formItemRender + ? (curText: any, props: ProFieldFCRenderProps, dom: JSX.Element) => { + const { placeholder: _placeholder, ...restProps } = props; + const newDom = formItemRender(curText, restProps, dom); + // formItemRender 之后的dom可能没有props，这里会帮忙注入一下 + if (React.isValidElement(newDom)) + return React.cloneElement(newDom, { + ...fieldProps, + ...((newDom.props as any) || {}), + }); + return newDom; + } + : undefined, + placeholder: formItemRender + ? undefined + : rest?.placeholder ?? fieldProps?.placeholder, + fieldProps: pickProProps( + omitUndefined({ + ...fieldProps, + placeholder: formItemRender + ? undefined + : rest?.placeholder ?? fieldProps?.placeholder, + }), + ), + }), + context.valueTypeMap || {}, + ); + + return {renderedDom}; +}; + +export const PureProField = React.forwardRef( + ProFieldComponent, +) as typeof ProFieldComponent; diff --git a/packages/field/src/components/Cascader/index.tsx b/packages/field/src/components/Cascader/index.tsx index a77fac2abebd..2f6d88258df4 100644 --- a/packages/field/src/components/Cascader/index.tsx +++ b/packages/field/src/components/Cascader/index.tsx @@ -16,17 +16,14 @@ import React, { useRef, useState, } from 'react'; -import type { ProFieldFC } from '../../index'; +import type { ProFieldFC } from '../../PureProField'; import type { FieldSelectProps } from '../Select'; import { useFieldFetchData } from '../Select'; -// 兼容代码----------- -import 'antd/lib/cascader/style'; -//---------------------- - export type GroupProps = { options?: RadioGroupProps['options']; radioType?: 'button' | 'radio'; + placeholder?: string; } & FieldSelectProps; /** @@ -36,7 +33,16 @@ export type GroupProps = { * @param ref */ const FieldCascader: ProFieldFC = ( - { radioType, renderFormItem, mode, render, label, light, ...rest }, + { + radioType, + placeholder, + formItemRender, + mode, + render, + label, + light, + ...rest + }, ref, ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); @@ -112,7 +118,10 @@ const FieldCascader: ProFieldFC = ( ref={cascaderRef} open={open} suffixIcon={loading ? : undefined} - placeholder={intl.getMessage('tableForm.selectPlaceholder', '请选择')} + placeholder={ + placeholder || + intl.getMessage('tableForm.selectPlaceholder', '请选择') + } allowClear={rest.fieldProps?.allowClear !== false} {...rest.fieldProps} onDropdownVisibleChange={(isOpen) => { @@ -124,9 +133,9 @@ const FieldCascader: ProFieldFC = ( /> ); - if (renderFormItem) { + if (formItemRender) { dom = - renderFormItem( + formItemRender( rest.text, { mode, ...rest.fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx index d4640c2793c7..36406af36d9f 100644 --- a/packages/field/src/components/Checkbox/index.tsx +++ b/packages/field/src/components/Checkbox/index.tsx @@ -3,11 +3,11 @@ proFieldParsingText, useStyle, } from '@ant-design/pro-utils'; -import { Checkbox, ConfigProvider, Form, Spin } from 'antd'; -import type { CheckboxGroupProps } from 'antd/lib/checkbox'; +import { Checkbox, ConfigProvider, Form, Spin, theme } from 'antd'; +import type { CheckboxGroupProps } from 'antd/es/checkbox'; import classNames from 'classnames'; import React, { useContext, useImperativeHandle, useRef } from 'react'; -import type { ProFieldFC } from '../../index'; +import type { ProFieldFC } from '../../PureProField'; import type { FieldSelectProps } from '../Select'; import { useFieldFetchData } from '../Select'; export type GroupProps = { @@ -15,10 +15,6 @@ export type GroupProps = { options?: CheckboxGroupProps['options']; } & FieldSelectProps; -// 兼容代码----------- -import { useToken } from '@ant-design/pro-provider'; -import 'antd/lib/checkbox/style'; -//---------------------- /** * 多选组件 * @@ -26,7 +22,7 @@ import 'antd/lib/checkbox/style'; * @param ref */ const FieldCheckbox: ProFieldFC = ( - { layout = 'horizontal', renderFormItem, mode, render, ...rest }, + { layout = 'horizontal', formItemRender, mode, render, ...rest }, ref, ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); @@ -68,7 +64,7 @@ const FieldCheckbox: ProFieldFC = ( }; }); - const { token } = useToken?.(); + const { token } = theme.useToken?.(); const checkBoxRef = useRef(); useImperativeHandle( ref, @@ -131,9 +127,9 @@ const FieldCheckbox: ProFieldFC = ( options={options} />, ); - if (renderFormItem) { + if (formItemRender) { return ( - renderFormItem( + formItemRender( rest.text, { mode, ...rest.fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/Code/index.tsx b/packages/field/src/components/Code/index.tsx index cf6a96b938ca..f6bfa0ad00d4 100644 --- a/packages/field/src/components/Code/index.tsx +++ b/packages/field/src/components/Code/index.tsx @@ -1,11 +1,8 @@ import { Input } from 'antd'; import React from 'react'; -import type { ProFieldFC } from '../../index'; +import type { ProFieldFC } from '../../PureProField'; -// 兼容代码----------- import { proTheme } from '@ant-design/pro-provider'; -import 'antd/lib/input/style'; -//---------------------- const languageFormat = (text: string, language: string) => { if (typeof text !== 'string') { @@ -30,7 +27,7 @@ const FieldCode: ProFieldFC<{ text: string; language?: 'json' | 'text'; }> = ( - { text, mode, render, language = 'text', renderFormItem, plain, fieldProps }, + { text, mode, render, language = 'text', formItemRender, plain, fieldProps }, ref, ) => { const code = languageFormat(text, language); @@ -67,8 +64,8 @@ const FieldCode: ProFieldFC<{ if (plain) { dom = ; } - if (renderFormItem) { - return renderFormItem(code, { mode, ...fieldProps, ref }, dom) ?? null; + if (formItemRender) { + return formItemRender(code, { mode, ...fieldProps, ref }, dom) ?? null; } return dom; } diff --git a/packages/field/src/components/ColorPicker/index.tsx b/packages/field/src/components/ColorPicker/index.tsx index 59c211781926..5e69f293072e 100644 --- a/packages/field/src/components/ColorPicker/index.tsx +++ b/packages/field/src/components/ColorPicker/index.tsx @@ -1,11 +1,9 @@ -import { compareVersions } from '@ant-design/pro-utils'; -import type { ColorPickerProps } from 'antd'; -import { ColorPicker as ColorPickerV5, ConfigProvider, version } from 'antd'; +import type { ColorPickerProps } from 'antd'; +import { ColorPicker, ConfigProvider } from 'antd'; import classNames from 'classnames'; -import React, { useContext, useMemo } from 'react'; -import type { ProFieldFC } from '../../index'; -import { ColorPicker as ColorPickerV4 } from './old'; -// https://ant.design/components/color-picker-cn 示例颜色 +import React, { useContext } from 'react'; +import type { ProFieldFC } from '../../PureProField'; + const DEFAULT_PRESETS = { label: 'Recommended', colors: [ @@ -31,25 +29,7 @@ const DEFAULT_PRESETS = { '#EB2F964D', ], }; -/** - * 判断是否是 5.5.0 以上的版本 - * @returns - */ -function IsIt_Render_V5() { - return compareVersions(version, '5.5.0') > -1; -} -/** - * 获取颜色组件 - * @param {boolean} [old=false] 是否使用旧版本 - * @return {*} - */ -function getColorPicker(old: boolean = false) { - if ((typeof old === 'undefined' || old === false) && IsIt_Render_V5()) { - return ColorPickerV5; - } - return ColorPickerV4; -} -// const ColorPicker = getColorPicker(); + /** * 颜色组件 * Antd > 5.5.0 的版本 使用 antd 的 ColorPicker @@ -60,32 +40,17 @@ function getColorPicker(old: boolean = false) { const FieldColorPicker: ProFieldFC< { text: string; - /** 是否使用旧版本 */ - old?: boolean; - } & Partial> -> = ( - { text, mode: type, render, renderFormItem, fieldProps, old }, - ref: any, -) => { + } & Partial +> = ({ text, mode: type, render, formItemRender, fieldProps }, ref: any) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); - const ColorPicker = React.useMemo( - () => getColorPicker(old) as unknown as typeof ColorPickerV4, - [old], - ); const prefixCls = getPrefixCls('pro-field-color-picker'); - // 5.5.0 以上版本追加 className - const className = useMemo(() => { - if (old) return ''; - return classNames({ [prefixCls]: IsIt_Render_V5() }); - }, [prefixCls, old]); + if (type === 'read') { const dom = ( ); @@ -103,11 +68,11 @@ const FieldColorPicker: ProFieldFC< presets={[DEFAULT_PRESETS]} {...fieldProps} style={style} - className={className} + className={classNames({ [prefixCls]: true })} /> ); - if (renderFormItem) { - return renderFormItem(text, { mode: type, ...fieldProps, style }, dom); + if (formItemRender) { + return formItemRender(text, { mode: type, ...fieldProps, style }, dom); } return dom; } diff --git a/packages/field/src/components/ColorPicker/old.tsx b/packages/field/src/components/ColorPicker/old.tsx deleted file mode 100644 index b6cb61327b8b..000000000000 --- a/packages/field/src/components/ColorPicker/old.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import { proTheme, useStyle } from '@ant-design/pro-provider'; -import type { SketchPickerProps } from '@chenshuai2144/sketch-color'; -import { SketchPicker } from '@chenshuai2144/sketch-color'; -import type { PopoverProps } from 'antd'; -import { ConfigProvider, Popover } from 'antd'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import React, { useContext, useImperativeHandle } from 'react'; -export const DEFAULT_COLORS = [ - '#FF9D4E', // 0 - 橘黄色 - '#5BD8A6', // 1 - 绿色 - '#5B8FF9', // 2 - 蓝色 - '#F7664E', // 3 - 红色 - '#FF86B7', // 4 - 水红色 - '#2B9E9D', // 5 - 墨绿色 - '#9270CA', // 6 - 紫色 - '#6DC8EC', // 7 - 浅蓝色 - '#667796', // 8 - 黛蓝色 - '#F6BD16', // 9 - 黄色 -]; -export const ColorPicker = React.forwardRef( - ( - { - mode, - popoverProps, - ...rest - }: SketchPickerProps & { - value?: string; - popoverProps?: PopoverProps; - mode?: 'read' | 'edit'; - onChange?: (color: string) => void; - colors?: string[]; - disabled?: boolean; - }, - ref, - ) => { - const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); - const prefixCls = getPrefixCls('pro-field-color-picker'); - - const { token } = proTheme.useToken(); - const [color, setColor] = useMergedState('#1890ff', { - value: rest.value, - onChange: rest.onChange, - }); - - const { wrapSSR, hashId } = useStyle('ProFiledColorPicker' + color, () => { - return { - [`.${prefixCls}`]: { - width: 32, - height: 32, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - boxSizing: 'border-box', - border: `1px solid ${token.colorSplit}`, - borderRadius: token.borderRadius, - '&:hover': { - borderColor: color, - }, - }, - }; - }); - - const readDom = wrapSSR( -
-
-
, - ); - - useImperativeHandle(ref, () => {}); - - if (mode === 'read' || rest.disabled) { - return readDom; - } - - return ( - - { - if (a && a < 1) { - setColor(`rgba(${r}, ${g}, ${b}, ${a})`); - return; - } - setColor(hex); - }} - /> -
- } - > - {readDom} - - ); - }, -); diff --git a/packages/field/src/components/DatePicker/index.tsx b/packages/field/src/components/DatePicker/index.tsx index c5e1dab87cdc..f447f7462fdf 100644 --- a/packages/field/src/components/DatePicker/index.tsx +++ b/packages/field/src/components/DatePicker/index.tsx @@ -8,11 +8,7 @@ import { DatePicker } from 'antd'; import dayjs from 'dayjs'; import weekOfYear from 'dayjs/plugin/weekOfYear'; import React, { useState } from 'react'; -import type { ProFieldFC, ProFieldLightProps } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/date-picker/style'; -//---------------------- +import type { ProFieldFC, ProFieldLightProps } from '../../PureProField'; dayjs.extend(weekOfYear); @@ -35,7 +31,7 @@ const formatDate = (text: any, format: any) => { const FieldDatePicker: ProFieldFC< { text: string | number; - format: string; + format?: string; showTime?: boolean; bordered?: boolean; picker?: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year'; @@ -44,11 +40,11 @@ const FieldDatePicker: ProFieldFC< { text, mode, - format, + format = 'YYYY-MM-DD', label, light, render, - renderFormItem, + formItemRender, plain, showTime, fieldProps, @@ -133,8 +129,8 @@ const FieldDatePicker: ProFieldFC< /> ); } - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Digit/index.tsx b/packages/field/src/components/Digit/index.tsx index 306435777841..e4ac3934b400 100644 --- a/packages/field/src/components/Digit/index.tsx +++ b/packages/field/src/components/Digit/index.tsx @@ -1,13 +1,9 @@ +import { useIntl } from '@ant-design/pro-provider'; import { isNil } from '@ant-design/pro-utils'; import { InputNumber } from 'antd'; import omit from 'omit.js'; import React, { useCallback } from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import { useIntl } from '@ant-design/pro-provider'; -import 'antd/lib/input-number/style'; -//---------------------- +import type { ProFieldFC } from '../../PureProField'; export type FieldDigitProps = { text: number; @@ -22,7 +18,7 @@ export type FieldDigitProps = { * moneySymbol?: string; } */ const FieldDigit: ProFieldFC = ( - { text, mode: type, render, placeholder, renderFormItem, fieldProps }, + { text, mode: type, render, placeholder, formItemRender, fieldProps }, ref, ) => { const intl = useIntl(); @@ -82,8 +78,8 @@ const FieldDigit: ProFieldFC = ( onBlur={(e) => fieldProps?.onBlur?.(proxyChange(e.target.value))} /> ); - if (renderFormItem) { - return renderFormItem(text, { mode: type, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode: type, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/DigitRange/index.tsx b/packages/field/src/components/DigitRange/index.tsx index c740e33a9932..ef6302363abf 100644 --- a/packages/field/src/components/DigitRange/index.tsx +++ b/packages/field/src/components/DigitRange/index.tsx @@ -1,12 +1,8 @@ import { proTheme, useIntl } from '@ant-design/pro-provider'; import { Input, InputNumber, Space } from 'antd'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/input-number/style'; -//---------------------- +import type { ProFieldFC } from '../../PureProField'; export type Value = string | number | undefined | null; @@ -30,7 +26,7 @@ const FieldDigitRange: ProFieldFC = ( mode: type, render, placeholder, - renderFormItem, + formItemRender, fieldProps, separator = '~', separatorWidth = 30, @@ -77,7 +73,10 @@ const FieldDigitRange: ProFieldFC = ( value0 > value1 ) { setValuePair([value1, value0]); - } else if (value0 === undefined && value1 === undefined) { + return; + } + + if (value0 === undefined && value1 === undefined) { // 当两个值均为undefined时将值变为undefined，方便required处理 setValuePair(undefined); } @@ -139,8 +138,8 @@ const FieldDigitRange: ProFieldFC = ( /> ); - if (renderFormItem) { - return renderFormItem(text, { mode: type, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode: type, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/FromNow/index.tsx b/packages/field/src/components/FromNow/index.tsx index 809be4a62747..061a68a478eb 100644 --- a/packages/field/src/components/FromNow/index.tsx +++ b/packages/field/src/components/FromNow/index.tsx @@ -3,12 +3,8 @@ import { compatibleBorder, parseValueToDay } from '@ant-design/pro-utils'; import { DatePicker, Tooltip } from 'antd'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/date-picker/style'; import React from 'react'; -//---------------------- +import type { ProFieldFC } from '../../PureProField'; dayjs.extend(relativeTime); /** @@ -20,7 +16,7 @@ const FieldFromNow: ProFieldFC<{ text: string; format?: string; }> = ( - { text, mode, plain, render, renderFormItem, format, fieldProps }, + { text, mode, plain, render, formItemRender, format, fieldProps }, ref, ) => { const intl = useIntl(); @@ -56,8 +52,8 @@ const FieldFromNow: ProFieldFC<{ value={momentValue} /> ); - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Image/index.tsx b/packages/field/src/components/Image/index.tsx index 4b045daf3d8c..c9f929521deb 100644 --- a/packages/field/src/components/Image/index.tsx +++ b/packages/field/src/components/Image/index.tsx @@ -1,11 +1,7 @@ import { useIntl } from '@ant-design/pro-provider'; import { Image, Input } from 'antd'; import React from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/image/style'; -//---------------------- +import type { ProFieldFC } from '../../PureProField'; export type FieldImageProps = { text: string; @@ -26,7 +22,7 @@ const FieldImage = React.forwardRef( text, mode: type, render, - renderFormItem, + formItemRender, fieldProps, placeholder, width, @@ -49,8 +45,8 @@ const FieldImage = React.forwardRef( const dom = ( ); - if (renderFormItem) { - return renderFormItem(text, { mode: type, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode: type, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Money/index.tsx b/packages/field/src/components/Money/index.tsx index dbba95262530..4276078b2582 100644 --- a/packages/field/src/components/Money/index.tsx +++ b/packages/field/src/components/Money/index.tsx @@ -2,16 +2,9 @@ import { intlMap as allIntlMap, useIntl } from '@ant-design/pro-provider'; import type { InputNumberProps } from 'antd'; import { InputNumber, Popover } from 'antd'; import omit from 'omit.js'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React, { useCallback, useMemo } from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/input-number/style'; -import 'antd/lib/popover/style'; -//---------------------- - -import { openVisibleCompatible } from '@ant-design/pro-utils'; +import type { ProFieldFC } from '../../PureProField'; export type FieldMoneyProps = { text: number; @@ -252,12 +245,10 @@ const InputNumberPopover = React.forwardRef< value, }); - const props = openVisibleCompatible(dom ? open : false); - return ( { @@ -282,7 +273,7 @@ const FieldMoney: ProFieldFC = ( text, mode: type, render, - renderFormItem, + formItemRender, fieldProps, proFieldKey, plain, @@ -443,8 +434,8 @@ const FieldMoney: ProFieldFC = ( /> ); - if (renderFormItem) { - return renderFormItem(text, { mode: type, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode: type, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Options/index.tsx b/packages/field/src/components/Options/index.tsx index 33b269df7946..c26700f63940 100644 --- a/packages/field/src/components/Options/index.tsx +++ b/packages/field/src/components/Options/index.tsx @@ -1,11 +1,7 @@ +import { proTheme } from '@ant-design/pro-provider'; import { ConfigProvider } from 'antd'; import React, { useContext, useImperativeHandle } from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import { proTheme } from '@ant-design/pro-provider'; -import 'antd/lib/space/style'; -//---------------------- +import type { ProFieldFC } from '../../PureProField'; const addArrayKeys = (doms: React.ReactNode[]) => doms.map((dom, index) => { diff --git a/packages/field/src/components/Password/index.tsx b/packages/field/src/components/Password/index.tsx index 41e32255d490..2f651ba654f6 100644 --- a/packages/field/src/components/Password/index.tsx +++ b/packages/field/src/components/Password/index.tsx @@ -1,14 +1,9 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; import { useIntl } from '@ant-design/pro-provider'; import { Input, Space } from 'antd'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/input/style'; -import 'antd/lib/space/style'; -//---------------------- +import type { ProFieldFC } from '../../PureProField'; /** * 最基本的组件，就是个普通的 Input.Password @@ -22,7 +17,7 @@ const FieldPassword: ProFieldFC<{ open?: boolean; onOpenChange?: (visible: boolean) => void; }> = ( - { text, mode, render, renderFormItem, fieldProps, proFieldKey, ...rest }, + { text, mode, render, formItemRender, fieldProps, proFieldKey, ...rest }, ref, ) => { const intl = useIntl(); @@ -60,8 +55,8 @@ const FieldPassword: ProFieldFC<{ {...fieldProps} /> ); - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Percent/index.tsx b/packages/field/src/components/Percent/index.tsx index dc5fb126eadc..0a79a4a66285 100644 --- a/packages/field/src/components/Percent/index.tsx +++ b/packages/field/src/components/Percent/index.tsx @@ -3,17 +3,13 @@ import { InputNumber } from 'antd'; import { toNumber } from 'lodash-es'; import type { ReactNode } from 'react'; import React, { Fragment, useMemo } from 'react'; -import type { ProFieldFC } from '../../index'; +import type { ProFieldFC } from '../../PureProField'; import { getColorByRealValue, getRealTextWithPrecision, getSymbolByRealValue, } from './util'; -// 兼容代码----------- -import 'antd/lib/input-number/style'; -//------------ - export type PercentPropInt = { prefix?: ReactNode; suffix?: ReactNode; @@ -38,7 +34,7 @@ const FieldPercent: ProFieldFC = ( mode, showColor = false, render, - renderFormItem, + formItemRender, fieldProps, placeholder, showSymbol: propsShowSymbol, @@ -98,8 +94,8 @@ const FieldPercent: ProFieldFC = ( {...fieldProps} /> ); - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Progress/index.tsx b/packages/field/src/components/Progress/index.tsx index 302506132ae4..223db1cc692c 100644 --- a/packages/field/src/components/Progress/index.tsx +++ b/packages/field/src/components/Progress/index.tsx @@ -2,13 +2,7 @@ import { useIntl } from '@ant-design/pro-provider'; import { InputNumber, Progress } from 'antd'; import { toNumber } from 'lodash-es'; import React, { useMemo } from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/input-number/style'; -import 'antd/lib/progress/style'; - -//------------ +import type { ProFieldFC } from '../../PureProField'; export function getProgressStatus( text: number, @@ -35,7 +29,7 @@ const FieldProgress: ProFieldFC<{ text: number | string; placeholder?: string; }> = ( - { text, mode, render, plain, renderFormItem, fieldProps, placeholder }, + { text, mode, render, plain, formItemRender, fieldProps, placeholder }, ref, ) => { const intl = useIntl(); @@ -70,8 +64,8 @@ const FieldProgress: ProFieldFC<{ const dom = ( ); - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx index d2f5723e31ac..767a6bc9720d 100644 --- a/packages/field/src/components/Radio/index.tsx +++ b/packages/field/src/components/Radio/index.tsx @@ -7,14 +7,10 @@ import type { RadioGroupProps } from 'antd'; import { ConfigProvider, Form, Radio, Spin } from 'antd'; import classNames from 'classnames'; import React, { useContext, useImperativeHandle, useRef } from 'react'; -import type { ProFieldFC } from '../../index'; +import type { ProFieldFC } from '../../PureProField'; import type { FieldSelectProps } from '../Select'; import { useFieldFetchData } from '../Select'; -// 兼容代码----------- -import 'antd/lib/radio/style'; -//------------ - export type GroupProps = { options?: RadioGroupProps['options']; radioType?: RadioGroupProps['optionType']; @@ -27,7 +23,7 @@ export type GroupProps = { * @param ref */ const FieldRadio: ProFieldFC = ( - { radioType, renderFormItem, mode, render, ...rest }, + { radioType, formItemRender, mode, render, ...rest }, ref, ) => { const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); @@ -110,9 +106,9 @@ const FieldRadio: ProFieldFC = ( options={options} />, ); - if (renderFormItem) { + if (formItemRender) { return ( - renderFormItem( + formItemRender( rest.text, { mode, ...rest.fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/RangePicker/index.tsx b/packages/field/src/components/RangePicker/index.tsx index 7c5625712e7b..8c1735dde508 100644 --- a/packages/field/src/components/RangePicker/index.tsx +++ b/packages/field/src/components/RangePicker/index.tsx @@ -7,11 +7,7 @@ import { import { DatePicker } from 'antd'; import dayjs from 'dayjs'; import React, { useCallback } from 'react'; -import type { ProFieldFC, ProFieldLightProps } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/date-picker/style'; -//------------ +import type { ProFieldFC, ProFieldLightProps } from '../../PureProField'; /** * 日期范围选择组件 @@ -21,7 +17,7 @@ import 'antd/lib/date-picker/style'; const FieldRangePicker: ProFieldFC< { text: string[]; - format: string; + format?: string; bordered?: boolean; showTime?: boolean; picker?: 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year'; @@ -32,10 +28,10 @@ const FieldRangePicker: ProFieldFC< mode, light, label, - format, + format = 'YYYY-MM-DD', render, picker, - renderFormItem, + formItemRender, plain, showTime, lightLabel, @@ -155,8 +151,8 @@ const FieldRangePicker: ProFieldFC< /> ); } - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Rate/index.tsx b/packages/field/src/components/Rate/index.tsx index 633b97f541ba..bbf783a963d7 100644 --- a/packages/field/src/components/Rate/index.tsx +++ b/packages/field/src/components/Rate/index.tsx @@ -1,10 +1,6 @@ import { Rate } from 'antd'; import React from 'react'; -import type { ProFieldFC } from '../../index'; - -// 兼容代码----------- -import 'antd/lib/rate/style'; -//------------ +import type { ProFieldFC } from '../../PureProField'; /** * 评分组件 @@ -13,7 +9,7 @@ import 'antd/lib/rate/style'; */ const FieldRate: ProFieldFC<{ text: string; -}> = ({ text, mode, render, renderFormItem, fieldProps }, ref) => { +}> = ({ text, mode, render, formItemRender, fieldProps }, ref) => { if (mode === 'read') { const dom = ( @@ -25,8 +21,8 @@ const FieldRate: ProFieldFC<{ } if (mode === 'edit' || mode === 'update') { const dom = ; - if (renderFormItem) { - return renderFormItem(text, { mode, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Second/index.tsx b/packages/field/src/components/Second/index.tsx index 3027b665a323..4fee6d949d25 100644 --- a/packages/field/src/components/Second/index.tsx +++ b/packages/field/src/components/Second/index.tsx @@ -1,10 +1,7 @@ import { useIntl } from '@ant-design/pro-provider'; import { InputNumber } from 'antd'; import React from 'react'; -import type { ProFieldFC } from '../../index'; -// 兼容代码----------- -import 'antd/lib/input-number/style'; -//------------ +import type { ProFieldFC } from '../../PureProField'; export type FieldDigitProps = { text: number; @@ -51,7 +48,7 @@ export function formatSecond(result: number) { * @param FieldSecond */ const Second: ProFieldFC = ( - { text, mode: type, render, renderFormItem, fieldProps, placeholder }, + { text, mode: type, render, formItemRender, fieldProps, placeholder }, ref, ) => { const intl = useIntl(); @@ -77,8 +74,8 @@ const Second: ProFieldFC = ( {...fieldProps} /> ); - if (renderFormItem) { - return renderFormItem(text, { mode: type, ...fieldProps }, dom); + if (formItemRender) { + return formItemRender(text, { mode: type, ...fieldProps }, dom); } return dom; } diff --git a/packages/field/src/components/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx index e4a932aae7c3..47c5ee37f84c 100644 --- a/packages/field/src/components/Segmented/index.tsx +++ b/packages/field/src/components/Segmented/index.tsx @@ -1,13 +1,11 @@ import { Segmented, Spin } from 'antd'; import omit from 'omit.js'; import React, { useImperativeHandle, useRef } from 'react'; -import type { ProFieldFC } from '../../index'; +import type { ProFieldFC } from '../../PureProField'; import type { FieldSelectProps } from '../Select'; import { useFieldFetchData } from '../Select'; import { objectToMap, proFieldParsingText } from '@ant-design/pro-utils'; -import 'antd/lib/segmented/style'; -import 'antd/lib/spin/style'; /** * Segmented https://ant.design/components/segmented-cn/ @@ -23,7 +21,7 @@ const FieldSegmented: ProFieldFC< const { mode, render, - renderFormItem, + formItemRender, fieldProps, emptyText = '-', ...rest @@ -78,8 +76,8 @@ const FieldSegmented: ProFieldFC< /> ); - if (renderFormItem) { - return renderFormItem( + if (formItemRender) { + return formItemRender( rest.text, { mode, ...fieldProps, options, loading }, dom, diff --git a/packages/field/src/components/Select/LightSelect/index.tsx b/packages/field/src/components/Select/LightSelect/index.tsx index 99c0ca476651..c880103df3f4 100644 --- a/packages/field/src/components/Select/LightSelect/index.tsx +++ b/packages/field/src/components/Select/LightSelect/index.tsx @@ -1,12 +1,12 @@ import { SearchOutlined } from '@ant-design/icons'; -import { FieldLabel, compatibleBorder, useStyle } from '@ant-design/pro-utils'; +import { FieldLabel, useStyle } from '@ant-design/pro-utils'; import type { SelectProps } from 'antd'; import { ConfigProvider, Input, Select } from 'antd'; import classNames from 'classnames'; -import toArray from 'rc-util/lib/Children/toArray'; +import toArray from 'rc-util/es/Children/toArray'; import React, { useContext, useMemo, useState } from 'react'; -import type { ProFieldLightProps } from '../../../index'; +import type { ProFieldLightProps } from '../../../PureProField'; export type LightSelectProps = { label?: string; @@ -43,7 +43,7 @@ const getValueOrLabel = ( return valueMap[v?.value] || v.label; }; -const LightSelect: React.ForwardRefRenderFunction< +export const LightSelect: React.ForwardRefRenderFunction< any, SelectProps & LightSelectProps > = (props, ref) => { @@ -60,7 +60,6 @@ const LightSelect: React.ForwardRefRenderFunction< disabled, style, className, - bordered, options, onSearch, allowClear, @@ -153,24 +152,11 @@ const LightSelect: React.ForwardRefRenderFunction< if (isLabelClick) { setOpen(!open); } else { - // 这里注释掉 - /** - * 因为这里与代码 - * if (mode !== 'multiple') { - * setOpen(false); - * } - * 冲突了，导致这段代码不生效 - */ - // setOpen(true); + setOpen(true); } }} > ), }, @@ -142,7 +142,7 @@ export default () => { ); }, - renderFormItem: (text, props) => ( + formItemRender: (text, props) => ( ), }, diff --git a/packages/form/src/components/SchemaForm/demos/dependencies.tsx b/packages/form/src/components/SchemaForm/demos/dependencies.tsx index 6d2d9c70a3f8..4b9c5860cb18 100644 --- a/packages/form/src/components/SchemaForm/demos/dependencies.tsx +++ b/packages/form/src/components/SchemaForm/demos/dependencies.tsx @@ -90,7 +90,7 @@ const columns: ProFormColumnsType[] = [ title: 'title为hidden时隐藏', dataIndex: 'hidden', valueType: 'date', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx b/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx index dca351d6f9d3..2d3f66727d30 100644 --- a/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx +++ b/packages/form/src/components/SchemaForm/demos/dynamic-rerender.tsx @@ -90,7 +90,7 @@ const columns: ProFormColumnsType[] = [ title: 'title为hidden时隐藏', dataIndex: 'hidden', valueType: 'date', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/form/src/components/SchemaForm/demos/form-list-required.tsx b/packages/form/src/components/SchemaForm/demos/form-list-required.tsx index 178d7cda454b..b23a03ea0a27 100644 --- a/packages/form/src/components/SchemaForm/demos/form-list-required.tsx +++ b/packages/form/src/components/SchemaForm/demos/form-list-required.tsx @@ -107,7 +107,7 @@ const columns: ProFormColumnsType[] = [ title: 'title为hidden时隐藏', dataIndex: 'hidden', valueType: 'date', - renderFormItem: () => { + formItemRender: () => { return ; }, }, diff --git a/packages/form/src/components/SchemaForm/demos/schema.tsx b/packages/form/src/components/SchemaForm/demos/schema.tsx index f3252b57740f..848f317fc2f0 100644 --- a/packages/form/src/components/SchemaForm/demos/schema.tsx +++ b/packages/form/src/components/SchemaForm/demos/schema.tsx @@ -96,7 +96,7 @@ const columns: ProFormColumnsType[] = [ key: 'showTime', dataIndex: 'createName', initialValue: [dayjs().add(-1, 'm'), dayjs()], - renderFormItem: () => , + formItemRender: () => , width: 'md', colProps: { xs: 24, @@ -107,7 +107,7 @@ const columns: ProFormColumnsType[] = [ title: '更新时间', dataIndex: 'updateName', initialValue: [dayjs().add(-1, 'm'), dayjs()], - renderFormItem: () => , + formItemRender: () => , width: 'md', colProps: { xs: 24, diff --git a/packages/form/src/components/SchemaForm/index.en-US.md b/packages/form/src/components/SchemaForm/index.en-US.md index 9d845add188e..48b6ad4825a9 100644 --- a/packages/form/src/components/SchemaForm/index.en-US.md +++ b/packages/form/src/components/SchemaForm/index.en-US.md @@ -50,11 +50,11 @@ The most important thing about the SchemaForm form is the type definition of the | `fieldProps` | `(form,config)=>fieldProps`\| `fieldProps` | The props passed to the rendered component, and also passed when customizing | | `formItemProps` | `(form,config)=>formItemProps` \| `formItemProps` | Configuration passed to Form.Item | | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | The modified data will be consumed by the rendering component defined by valueType | -| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | custom read-only mode dom, read-only mode managed by `render` method only, edit mode needs to use `renderFormItem` | -| `renderFormItem` | `(schema,config,form) => React.ReactNode` | Custom edit mode, return a ReactNode, will automatically wrap value and onChange. ~~If it returns false,null,undefined, the item will not be displayed~~ It is recommended to use dependent components to control whether to render or not | +| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | custom read-only mode dom, read-only mode managed by `render` method only, edit mode needs to use `formItemRender` | +| `formItemRender` | `(schema,config,form) => React.ReactNode` | Custom edit mode, return a ReactNode, will automatically wrap value and onChange. ~~If it returns false,null,undefined, the item will not be displayed~~ It is recommended to use dependent components to control whether to render or not | | `request` | `(params,props) => Promise<{label,value}[]>` | Request network data remotely, generally used to select class components | | `params` | `Record` | The additional parameters passed to `request` will not be processed by the component, but changes will cause `request` to request data again | -| `dependencies` | `string \| number \| (string \| number)[]` | After the dependent values changes, trigger renderFormItem, fieldProps, formItemProps to re-execute, and inject values into params [example](#use-dependencies-to-trigger-fieldprops-formitemprops-renderformitem-updates) | +| `dependencies` | `string \| number \| (string \| number)[]` | After the dependent values changes, trigger formItemRender, fieldProps, formItemProps to re-execute, and inject values into params [example](#use-dependencies-to-trigger-fieldprops-formitemprops-formItemRender-updates) | | `hideInDescriptions` | `boolean` | Hide in descriptions | | `hideInForm` | `boolean` | Hide in Form | | `hideInTable` | `boolean` | Hide in Table | diff --git a/packages/form/src/components/SchemaForm/index.md b/packages/form/src/components/SchemaForm/index.md index e0b3dea450a7..71a6de78b01a 100644 --- a/packages/form/src/components/SchemaForm/index.md +++ b/packages/form/src/components/SchemaForm/index.md @@ -50,11 +50,11 @@ SchemaForm 表单最重要就是 Schema 的类型定义，我们使用了与 tab | `formItemProps.rules` | `Rule[]` | 表单项的校验规则。需要注意的是，如果当前表单项为`formList`时，此规则仅校验列表是否为空，且仅接受元组`[{required: boolean, message: string}]`，用于开启和关闭非空校验及指定空列表提示消息 | | `proFieldProps` | `proFieldProps` | 设置到 `ProField` 上面的 `props`，内部属性 | | `renderText` | `(text: any, record: Entity, index: number, action: ProCoreActionType) => any` | 修改的数据是会被 valueType 定义的渲染组件消费 | -| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `renderFormItem` | -| `renderFormItem` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange。~~如返回 false,null,undefined 将不展示表单项~~ 请使用 dependency 组件控制是否渲染列 | +| `render` | `(dom,entity,index, action, schema) => React.ReactNode` | 自定义只读模式的 dom,`render` 方法只管理的只读模式，编辑模式需要使用 `formItemRender` | +| `formItemRender` | `(schema,config,form) => React.ReactNode` | 自定义编辑模式，返回一个 ReactNode，会自动包裹 value 和 onChange。~~如返回 false,null,undefined 将不展示表单项~~ 请使用 dependency 组件控制是否渲染列 | | `request` | `(params,props) => Promise<{label,value}[]>` | 从远程请求网络数据，一般用于选择类组件 | | `params` | `Record` | 额外传递给 `request` 的参数，组件不做处理，但是变化会引起`request` 重新请求数据 | -| `dependencies` | `string \| number \| (string \| number)[]` | 所依赖的 values 变化后，触发 renderFormItem，fieldProps，formItemProps 重新执行，并把 values 注入到 params 里 [示例](#使用-dependencies-触发-fieldpropsformitempropsrenderformitem-更新) | +| `dependencies` | `string \| number \| (string \| number)[]` | 所依赖的 values 变化后，触发 formItemRender，fieldProps，formItemProps 重新执行，并把 values 注入到 params 里 [示例](#使用-dependencies-触发-fieldpropsformitempropsformItemRender-更新) | | `hideInDescriptions` | `boolean` | 在 descriptions 中隐藏 | | `hideInForm` | `boolean` | 在 Form 中隐藏 | | `hideInTable` | `boolean` | 在 Table 中隐藏 | diff --git a/packages/form/src/components/SchemaForm/index.tsx b/packages/form/src/components/SchemaForm/index.tsx index 19d63958697e..0862c9e4cba6 100644 --- a/packages/form/src/components/SchemaForm/index.tsx +++ b/packages/form/src/components/SchemaForm/index.tsx @@ -148,7 +148,7 @@ function BetaSchemaForm( ) : undefined, render: originItem.render, - renderFormItem: originItem.renderFormItem, + formItemRender: originItem.formItemRender, renderText: originItem.renderText, request: originItem.request, params: originItem.params, diff --git a/packages/form/src/components/SchemaForm/typing.ts b/packages/form/src/components/SchemaForm/typing.ts index 4b9047d5d6ce..4b24200d3c39 100644 --- a/packages/form/src/components/SchemaForm/typing.ts +++ b/packages/form/src/components/SchemaForm/typing.ts @@ -6,7 +6,7 @@ import type { SearchTransformKeyFn, } from '@ant-design/pro-utils'; import type { FormInstance, FormProps } from 'antd'; -import type { NamePath } from 'antd/lib/form/interface'; +import type { NamePath } from 'antd/es/form/interface'; import type { CommonFormProps } from '../../BaseForm'; import type { DrawerFormProps, diff --git a/packages/form/src/components/SchemaForm/valueType/dependency.tsx b/packages/form/src/components/SchemaForm/valueType/dependency.tsx index 02d52afb973a..29029561ade1 100644 --- a/packages/form/src/components/SchemaForm/valueType/dependency.tsx +++ b/packages/form/src/components/SchemaForm/valueType/dependency.tsx @@ -1,4 +1,4 @@ -import { noteOnce } from 'rc-util/lib/warning'; +import { noteOnce } from 'rc-util/es/warning'; import ProFormDependency from '../../Dependency'; import type { ItemType, ProFormRenderValueTypeHelpers } from '../typing'; diff --git a/packages/form/src/components/SchemaForm/valueType/field.tsx b/packages/form/src/components/SchemaForm/valueType/field.tsx index af96e489e8e5..ab3cf70877fc 100644 --- a/packages/form/src/components/SchemaForm/valueType/field.tsx +++ b/packages/form/src/components/SchemaForm/valueType/field.tsx @@ -16,7 +16,7 @@ export const field: ProSchemaRenderValueTypeFunction = ( 'dataIndex', 'width', 'render', - 'renderFormItem', + 'formItemRender', 'renderText', 'title', ]), @@ -38,10 +38,10 @@ export const field: ProSchemaRenderValueTypeFunction = ( return ; }; - const renderFormItem = item?.renderFormItem + const formItemRender = item?.formItemRender ? (_: any, config: any) => { const renderConfig = omitUndefined({ ...config, onChange: undefined }); - return item?.renderFormItem?.( + return item?.formItemRender?.( { type, ...item, @@ -61,8 +61,8 @@ export const field: ProSchemaRenderValueTypeFunction = ( : undefined; const getField = () => { - if (item?.renderFormItem) { - const dom = renderFormItem?.(null, {}); + if (item?.formItemRender) { + const dom = formItemRender?.(null, {}); if (!dom || item.ignoreFormItem) return dom; } @@ -71,7 +71,7 @@ export const field: ProSchemaRenderValueTypeFunction = ( ); }; diff --git a/packages/form/src/components/Segmented/index.tsx b/packages/form/src/components/Segmented/index.tsx index 0c98916742be..571c3f8a84fd 100644 --- a/packages/form/src/components/Segmented/index.tsx +++ b/packages/form/src/components/Segmented/index.tsx @@ -1,4 +1,6 @@ -import type { SegmentedProps } from 'antd'; +import { FieldSegmented } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; +import type { SegmentedProps } from 'antd'; import React from 'react'; import type { ProFormFieldItemProps, @@ -16,16 +18,27 @@ const ProFormSegmented: React.ForwardRefRenderFunction< ProFormFieldItemProps & ProFormFieldRemoteProps > = ({ fieldProps, request, params, proFieldProps, ...rest }, ref) => { return ( - + , + formItemRender: (text, props) => ( + + ), + }, + }} + > + + ); }; diff --git a/packages/form/src/components/Select/index.tsx b/packages/form/src/components/Select/index.tsx index 6e0dd4d19567..35f0ce79a73f 100644 --- a/packages/form/src/components/Select/index.tsx +++ b/packages/form/src/components/Select/index.tsx @@ -1,7 +1,9 @@ +import { FieldSelect } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; import { runFunction } from '@ant-design/pro-utils'; import type { SelectProps } from 'antd'; -import type { BaseOptionType } from 'antd/lib/cascader'; -import type { RefSelectProps } from 'antd/lib/select'; +import type { BaseOptionType } from 'antd/es/cascader'; +import type { RefSelectProps } from 'antd/es/select'; import React, { useContext } from 'react'; import FieldContext from '../../FieldContext'; import type { @@ -68,27 +70,38 @@ const ProFormSelectComponents = ( const context = useContext(FieldContext); return ( - - valueEnum={runFunction(valueEnum)} - request={request} - params={params} - valueType="select" - filedConfig={{ customLightMode: true }} - fieldProps={ - { - options, - mode, - showSearch, - getPopupContainer: context.getPopupContainer, - ...fieldProps, - } as SelectProps - } - ref={ref} - proFieldProps={proFieldProps} - {...rest} + , + formItemRender: (text, props) => ( + + ), + }, + }} > - {children} - + + valueEnum={runFunction(valueEnum)} + request={request} + params={params} + valueType="select" + filedConfig={{ customLightMode: true }} + fieldProps={ + { + options, + mode, + showSearch, + getPopupContainer: context.getPopupContainer, + ...fieldProps, + } as SelectProps + } + ref={ref} + proFieldProps={proFieldProps} + {...rest} + > + {children} + + ); }; @@ -121,19 +134,35 @@ const SearchSelect = React.forwardRef>( }; const context = useContext(FieldContext); return ( - - valueEnum={runFunction(valueEnum)} - request={request} - params={params} - valueType="select" - filedConfig={{ customLightMode: true }} - fieldProps={{ getPopupContainer: context.getPopupContainer, ...props }} - ref={ref} - proFieldProps={proFieldProps} - {...rest} + ( + + ), + formItemRender: (text, valueTypeProps) => ( + + ), + }, + }} > - {children} - + + valueEnum={runFunction(valueEnum)} + request={request} + params={params} + valueType="select" + filedConfig={{ customLightMode: true }} + fieldProps={{ + getPopupContainer: context.getPopupContainer, + ...props, + }} + ref={ref} + proFieldProps={proFieldProps} + {...rest} + > + {children} + + ); }, ); diff --git a/packages/form/src/components/Slider/index.tsx b/packages/form/src/components/Slider/index.tsx index 5256f0c0fd7c..9a0c3bfd1d9a 100644 --- a/packages/form/src/components/Slider/index.tsx +++ b/packages/form/src/components/Slider/index.tsx @@ -1,5 +1,7 @@ +import { FieldSlider } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; import type { SliderSingleProps } from 'antd'; -import type { SliderBaseProps, SliderRangeProps } from 'antd/lib/slider'; +import type { SliderBaseProps, SliderRangeProps } from 'antd/es/slider'; import React from 'react'; import type { ProFormFieldItemProps } from '../../typing'; import ProField from '../Field'; @@ -36,25 +38,36 @@ const ProFormSlider = React.forwardRef( ref, ) => { return ( - , + formItemRender: (text, props) => ( + + ), + }, }} - ref={ref} - proFieldProps={proFieldProps} - filedConfig={{ - ignoreWidth: true, - }} - {...rest} - /> + > + + ); }, ); diff --git a/packages/form/src/components/Switch/index.tsx b/packages/form/src/components/Switch/index.tsx index a07b69606f71..10bc411c842c 100644 --- a/packages/form/src/components/Switch/index.tsx +++ b/packages/form/src/components/Switch/index.tsx @@ -1,3 +1,5 @@ +import { FieldSwitch } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; import type { SwitchProps } from 'antd'; import React from 'react'; import type { ProFormFieldItemProps } from '../../typing'; @@ -21,23 +23,34 @@ const ProFormSwitch: React.FC = React.forwardRef( ref: any, ) => { return ( - , + formItemRender: (text, props) => ( + + ), + }, }} - ref={ref} - valuePropName="checked" - proFieldProps={proFieldProps} - filedConfig={{ - valuePropName: 'checked', - ignoreWidth: true, - customLightMode: true, - }} - {...rest} - /> + > + + ); }, ); diff --git a/packages/form/src/components/Text/index.tsx b/packages/form/src/components/Text/index.tsx index 73549137b147..6be1c741c5f8 100644 --- a/packages/form/src/components/Text/index.tsx +++ b/packages/form/src/components/Text/index.tsx @@ -1,6 +1,8 @@ +import { FieldPassword } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; import { useMountMergeState } from '@ant-design/pro-utils'; import { Form, Popover, PopoverProps, type InputProps } from 'antd'; -import type { InputRef, PasswordProps } from 'antd/lib/input'; +import type { InputRef, PasswordProps } from 'antd/es/input'; import omit from 'omit.js'; import React, { useState } from 'react'; import type { ProFormFieldItemProps } from '../../typing'; @@ -109,57 +111,79 @@ const Password: React.FC< if (fieldProps?.statusRender && rest.name) { return ( - , + formItemRender: (text, props) => ( + + ), + }, + }} > -
- { - fieldProps?.onBlur?.(e); - setOpen(false); - }, - onClick: (e: any) => { - fieldProps?.onClick?.(e); - setOpen(true); - }, - }} - proFieldProps={proFieldProps} - filedConfig={ - { - valueType, - } as const - } - {...rest} - /> -
- + +
+ { + fieldProps?.onBlur?.(e); + setOpen(false); + }, + onClick: (e: any) => { + fieldProps?.onClick?.(e); + setOpen(true); + }, + }} + proFieldProps={proFieldProps} + filedConfig={ + { + valueType, + } as const + } + {...rest} + /> +
+ + ); } return ( - + , + formItemRender: (text, props) => ( + + ), + }, + }} + > + + ); }; diff --git a/packages/form/src/components/TextArea/index.tsx b/packages/form/src/components/TextArea/index.tsx index b8b8a6eb4e30..efcfa0272b7c 100644 --- a/packages/form/src/components/TextArea/index.tsx +++ b/packages/form/src/components/TextArea/index.tsx @@ -1,9 +1,10 @@ -import type { TextAreaProps } from 'antd/lib/input'; -import type { TextAreaRef } from 'antd/lib/input/TextArea'; +import { FieldTextArea } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; +import type { TextAreaProps } from 'antd/es/input'; +import type { TextAreaRef } from 'antd/es/input/TextArea'; import React from 'react'; import type { ProFormFieldItemProps } from '../../typing'; import ProField from '../Field'; - /** * 文本选择组件 * @@ -14,13 +15,24 @@ const ProFormTextArea: React.ForwardRefRenderFunction< ProFormFieldItemProps > = ({ fieldProps, proFieldProps, ...rest }, ref) => { return ( - + , + formItemRender: (text, props) => ( + + ), + }, + }} + > + + ); }; diff --git a/packages/form/src/components/TimePicker/index.tsx b/packages/form/src/components/TimePicker/index.tsx deleted file mode 100644 index aae0af5087b7..000000000000 --- a/packages/form/src/components/TimePicker/index.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { dateArrayFormatter } from '@ant-design/pro-utils'; -import type { DatePickerProps, RangePickerProps } from 'antd/lib/date-picker'; -import React, { useContext } from 'react'; -import FieldContext from '../../FieldContext'; -import type { ProFormFieldItemProps } from '../../typing'; -import ProField from '../Field'; - -const valueType = 'time' as const; - -/** 时间区间选择器 */ -const TimeRangePicker: React.FC> = - React.forwardRef(({ fieldProps, proFieldProps, ...rest }, ref: any) => { - const context = useContext(FieldContext); - return ( - - dateArrayFormatter(value, 'HH:mm:ss'), - } as const - } - {...rest} - /> - ); - }); - -/** - * 时间选择组件 - * - * @param - */ -const ProFormTimePicker: React.FC> = ({ - fieldProps, - proFieldProps, - ...rest -}) => { - const context = useContext(FieldContext); - return ( - - ); -}; - -const WrappedProFormTimePicker: typeof ProFormTimePicker & { - RangePicker: typeof TimeRangePicker; -} = ProFormTimePicker as any; - -WrappedProFormTimePicker.RangePicker = TimeRangePicker; - -export default WrappedProFormTimePicker; diff --git a/packages/form/src/components/TreeSelect/index.tsx b/packages/form/src/components/TreeSelect/index.tsx index 9dcfdc582241..142f0780d3e9 100644 --- a/packages/form/src/components/TreeSelect/index.tsx +++ b/packages/form/src/components/TreeSelect/index.tsx @@ -1,5 +1,7 @@ -import type { TreeSelectProps } from 'antd'; -import type { RefSelectProps } from 'antd/lib/select'; +import { FieldTreeSelect } from '@ant-design/pro-field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; +import type { TreeSelectProps } from 'antd'; +import type { RefSelectProps } from 'antd/es/select'; import React from 'react'; import type { ProFormFieldItemProps, @@ -21,7 +23,7 @@ export type ProFormTreeSelectProps = ProFormFieldItemProps< ProFormFieldRemoteProps; /** - * 级联选择框 + * 树选择器 * * @param */ @@ -30,16 +32,27 @@ const ProFormTreeSelect: React.ForwardRefRenderFunction< ProFormTreeSelectProps > = ({ fieldProps, request, params, proFieldProps, ...rest }, ref) => { return ( - + , + formItemRender: (text, props) => ( + + ), + }, + }} + > + + ); }; diff --git a/packages/form/src/components/UploadButton/index.tsx b/packages/form/src/components/UploadButton/index.tsx index 1e1163ec5571..612c090ab858 100644 --- a/packages/form/src/components/UploadButton/index.tsx +++ b/packages/form/src/components/UploadButton/index.tsx @@ -3,8 +3,8 @@ import type { ButtonProps, UploadProps } from 'antd'; import { Button, Upload } from 'antd'; import React, { useContext, useMemo } from 'react'; import { EditOrReadOnlyContext } from '../../BaseForm/EditOrReadOnlyContext'; -import { createField } from '../../BaseForm/createField'; import type { ProFormFieldItemProps } from '../../typing'; +import warpField from '../FormItem/warpField'; type PickUploadProps = Pick< UploadProps, @@ -122,7 +122,7 @@ const BaseProFormUploadButton: React.ForwardRefRenderFunction< ); }; -const ProFormUploadButton = createField( +const ProFormUploadButton = warpField?.( React.forwardRef(BaseProFormUploadButton), { getValueFromEvent: (value: { fileList: UploadProps['fileList'] }) => diff --git a/packages/form/src/components/UploadDragger/index.tsx b/packages/form/src/components/UploadDragger/index.tsx index 5875625da4dc..be4e0778deb8 100644 --- a/packages/form/src/components/UploadDragger/index.tsx +++ b/packages/form/src/components/UploadDragger/index.tsx @@ -1,10 +1,10 @@ import { InboxOutlined } from '@ant-design/icons'; import { ConfigProvider, Upload } from 'antd'; -import type { DraggerProps, UploadProps } from 'antd/lib/upload'; +import type { DraggerProps, UploadProps } from 'antd/es/upload'; import React, { useContext } from 'react'; import { EditOrReadOnlyContext } from '../../BaseForm/EditOrReadOnlyContext'; -import { createField } from '../../BaseForm/createField'; import type { ProFormFieldItemProps } from '../../typing'; +import warpField from '../FormItem/warpField'; export type ProFormUploadDraggerProps = ProFormFieldItemProps & { /** @@ -123,7 +123,7 @@ const BaseProFormUploadDragger: React.FC = }, ); -const ProFormUploadDragger = createField( +const ProFormUploadDragger = warpField?.( BaseProFormUploadDragger, { getValueFromEvent: (value: { fileList: UploadProps['fileList'] }) => diff --git a/packages/form/src/components/index.ts b/packages/form/src/components/index.ts index 9e53d4d90762..10aa9011ff25 100644 --- a/packages/form/src/components/index.ts +++ b/packages/form/src/components/index.ts @@ -8,20 +8,22 @@ export type { } from './Checkbox'; export { default as ProFormColorPicker } from './ColorPicker'; export type { ProFormColorPickerProps } from './ColorPicker'; -export { default as ProFormDateMonthRangePicker } from './DateMonthRangePicker'; export { default as ProFormDatePicker } from './DatePicker'; -export { default as ProFormDateQuarterRangePicker } from './DateQuarterRangePicker'; +export { default as ProFormDateTimePicker } from './DatePicker/DateTimePicker'; +export { default as ProFormTimePicker } from './DatePicker/TimePicker'; export { default as ProFormDateRangePicker } from './DateRangePicker'; -export { default as ProFormDateTimePicker } from './DateTimePicker'; -export { default as ProFormDateTimeRangePicker } from './DateTimeRangePicker'; -export { default as ProFormDateWeekRangePicker } from './DateWeekRangePicker'; -export { default as ProFormDateYearRangePicker } from './DateYearRangePicker'; +export { ProFormDateMonthRangePicker } from './DateRangePicker/DateMonthRangePicker'; +export { ProFormDateQuarterRangePicker } from './DateRangePicker/DateQuarterRangePicker'; +export { ProFormDateTimeRangePicker } from './DateRangePicker/DateTimeRangePicker'; +export { ProFormDateWeekRangePicker } from './DateRangePicker/DateWeekRangePicker'; +export { ProFormDateYearRangePicker } from './DateRangePicker/DateYearRangePicker'; +export { ProFormTimeRangePicker } from './DateRangePicker/TimeRangePicker'; export { default as ProFormDependency } from './Dependency'; export type { ProFormDependencyProps } from './Dependency'; export { default as ProFormDigit } from './Digit'; export type { ProFormDigitProps } from './Digit'; -export { default as ProFormDigitRange } from './DigitRange'; -export type { ProFormDigitRangeProps } from './DigitRange'; +export { default as ProFormDigitRange } from './Digit/DigitRange'; +export type { ProFormDigitRangeProps } from './Digit/DigitRange'; export { default as ProFormField } from './Field'; export type { ProFormFieldProps } from './Field'; export { default as ProFormFieldSet } from './FieldSet'; @@ -35,9 +37,12 @@ export { pickControlProps, pickControlPropsWithId, useControlModel, -} from './FormItemRender'; -export type { FormControlFC, WithControlPropsType } from './FormItemRender'; -export { default as Group } from './Group'; +} from './FormItem/FormItemRender'; +export type { + FormControlFC, + WithControlPropsType, +} from './FormItem/FormItemRender'; +export { default as Group } from './FormItem/Group'; export { ProFormList } from './List'; export type { FormListActionType, ProFormListProps } from './List'; export { default as ProFormMoney } from './Money'; @@ -52,13 +57,11 @@ export { default as ProFormSelect } from './Select'; export type { ProFormSelectProps } from './Select'; export { default as ProFormSlider } from './Slider'; export type { ProFormSliderProps } from './Slider'; -export { default as Submitter } from './Submitter'; -export type { SubmitterProps } from './Submitter'; + export { default as ProFormSwitch } from './Switch'; export type { ProFormSwitchProps } from './Switch'; export { default as ProFormText } from './Text'; export { default as ProFormTextArea } from './TextArea'; -export { default as ProFormTimePicker } from './TimePicker'; export { default as ProFormTreeSelect } from './TreeSelect'; export type { ProFormTreeSelectProps } from './TreeSelect'; export { default as ProFormUploadButton } from './UploadButton'; diff --git a/packages/form/src/demos/config-provider.tsx b/packages/form/src/demos/config-provider.tsx index 7656720e034b..187fbf19f484 100644 --- a/packages/form/src/demos/config-provider.tsx +++ b/packages/form/src/demos/config-provider.tsx @@ -12,7 +12,7 @@ import { StepsForm, } from '@ant-design/pro-components'; import { ConfigProvider, Input } from 'antd'; -import enUS from 'antd/lib/locale/en_US'; +import enUS from 'antd/es/locale/en_US'; import { LightWrapper } from '../BaseForm/LightWrapper'; export default () => ( diff --git a/packages/form/src/demos/form-layout-grid.tsx b/packages/form/src/demos/form-layout-grid.tsx index 62430df8cf8f..45a7747de00f 100644 --- a/packages/form/src/demos/form-layout-grid.tsx +++ b/packages/form/src/demos/form-layout-grid.tsx @@ -10,7 +10,7 @@ import { ProFormTextArea, } from '@ant-design/pro-components'; import { Col, Row, Space, message } from 'antd'; -import type { FormLayout } from 'antd/lib/form/Form'; +import type { FormLayout } from 'antd/es/form/Form'; import { useState } from 'react'; const LAYOUT_TYPE_HORIZONTAL = 'horizontal'; diff --git a/packages/form/src/demos/pro-form-editableTable.tsx b/packages/form/src/demos/pro-form-editableTable.tsx index 7d49250640cb..7244d6c54287 100644 --- a/packages/form/src/demos/pro-form-editableTable.tsx +++ b/packages/form/src/demos/pro-form-editableTable.tsx @@ -67,7 +67,7 @@ const columns: ProColumns[] = [ { title: '描述', dataIndex: 'decs', - renderFormItem: (_, { record }) => { + formItemRender: (_, { record }) => { console.log('----===>', record); return ; }, diff --git a/packages/form/src/index.tsx b/packages/form/src/index.tsx index a3bc04163d69..ca826cc3efb4 100644 --- a/packages/form/src/index.tsx +++ b/packages/form/src/index.tsx @@ -1,24 +1,9 @@ -import { ProForm } from './layouts'; -// 兼容代码----------- -import 'antd/lib/drawer/style'; -import 'antd/lib/form/style'; -import 'antd/lib/modal/style'; -import 'antd/lib/rate/style'; -import 'antd/lib/row/style'; -import 'antd/lib/steps/style'; -import 'antd/lib/tabs/style'; -import 'antd/lib/upload/style'; import { GridContext } from './helpers'; +import { ProForm } from './layouts'; import type { ProFormGroupProps } from './typing'; -//---------------------- export { ProFormContext } from '@ant-design/pro-utils'; -export type { - FormInstance, - FormItemProps, - FormProps, - LightWrapperProps, - ProFormInstance, -} from './BaseForm'; +export type { LightWrapperProps, ProFormInstance } from './BaseForm'; + export * from './components'; export type { FormListActionType, diff --git a/packages/form/src/layouts/DrawerForm/index.tsx b/packages/form/src/layouts/DrawerForm/index.tsx index 7f317b00d3ba..b4da36cfb004 100644 --- a/packages/form/src/layouts/DrawerForm/index.tsx +++ b/packages/form/src/layouts/DrawerForm/index.tsx @@ -1,15 +1,14 @@ import { isBrowser, omitUndefined, - openVisibleCompatible, useRefFunction, } from '@ant-design/pro-utils'; import type { DrawerProps, FormProps } from 'antd'; import { ConfigProvider, Drawer } from 'antd'; import classNames from 'classnames'; import { merge } from 'lodash-es'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import { noteOnce } from 'rc-util/lib/warning'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; +import { noteOnce } from 'rc-util/es/warning'; import React, { useCallback, useContext, @@ -22,7 +21,7 @@ import React, { import { createPortal } from 'react-dom'; import type { CommonFormProps, ProFormInstance } from '../../BaseForm'; import { BaseForm } from '../../BaseForm'; -import { SubmitterProps } from '../../components/Submitter'; +import { SubmitterProps } from '../../BaseForm/Submitter'; import { useStyle } from './style'; export type CustomizeResizeType = { @@ -275,8 +274,6 @@ function DrawerForm, U = Record>({ return result; }); - const drawerOpenProps = openVisibleCompatible(open, onVisibleChange); - const cbHandleMouseMove = useCallback( (e: MouseEvent) => { const offsetRight: number | string = ((document.body.offsetWidth || @@ -310,10 +307,11 @@ function DrawerForm, U = Record>({ title={title} width={drawerWidth} {...drawerProps} - {...drawerOpenProps} + open={open} afterOpenChange={(e) => { if (!e) resetFields(); drawerProps?.afterOpenChange?.(e); + onVisibleChange?.(e); }} onClose={(e) => { // 提交表单loading时，阻止弹框关闭 diff --git a/packages/form/src/layouts/LightFilter/index.tsx b/packages/form/src/layouts/LightFilter/index.tsx index ffd9673971b2..9cab8bc16fb9 100644 --- a/packages/form/src/layouts/LightFilter/index.tsx +++ b/packages/form/src/layouts/LightFilter/index.tsx @@ -4,8 +4,8 @@ import { FieldLabel, FilterDropdown } from '@ant-design/pro-utils'; import type { FormProps } from 'antd'; import { ConfigProvider } from 'antd'; -import type { SizeType } from 'antd/lib/config-provider/SizeContext'; -import type { TooltipPlacement } from 'antd/lib/tooltip'; +import type { SizeType } from 'antd/es/config-provider/SizeContext'; +import type { TooltipPlacement } from 'antd/es/tooltip'; import classNames from 'classnames'; import omit from 'omit.js'; import React, { @@ -283,7 +283,7 @@ function LightFilter>(props: LightFilterProps) { prefixCls={prefixCls} items={items?.flatMap((item: any) => { /** 如果是 ProFormGroup，直接拼接dom */ - if (item?.type.displayName === 'ProForm-Group') + if (item?.type?.displayName === 'ProForm-Group') return item.props.children; return item; })} diff --git a/packages/form/src/layouts/LoginForm/index.tsx b/packages/form/src/layouts/LoginForm/index.tsx index a0d00aab2be0..732e10a32e69 100644 --- a/packages/form/src/layouts/LoginForm/index.tsx +++ b/packages/form/src/layouts/LoginForm/index.tsx @@ -2,7 +2,7 @@ import { useIntl } from '@ant-design/pro-provider'; import { ConfigProvider } from 'antd'; import classNames from 'classnames'; import React, { useContext, useMemo } from 'react'; -import type { SubmitterProps } from '../../components'; +import type { SubmitterProps } from '../../BaseForm/Submitter'; import type { ProFormProps } from '../ProForm'; import { ProForm } from '../ProForm'; import { useStyle } from './style'; diff --git a/packages/form/src/layouts/LoginFormPage/index.tsx b/packages/form/src/layouts/LoginFormPage/index.tsx index 84f3f8715830..3823b79a22b9 100644 --- a/packages/form/src/layouts/LoginFormPage/index.tsx +++ b/packages/form/src/layouts/LoginFormPage/index.tsx @@ -178,8 +178,7 @@ export function LoginFormPage>( > {activityConfig.title && (
- {' '} - {activityConfig.title}{' '} + {activityConfig.title}
)} {activityConfig.subTitle && ( diff --git a/packages/form/src/layouts/ModalForm/index.tsx b/packages/form/src/layouts/ModalForm/index.tsx index 565b89be9382..df7c35695620 100644 --- a/packages/form/src/layouts/ModalForm/index.tsx +++ b/packages/form/src/layouts/ModalForm/index.tsx @@ -1,9 +1,8 @@ -import { openVisibleCompatible } from '@ant-design/pro-utils'; -import type { FormProps, ModalProps } from 'antd'; +import type { FormProps, ModalProps } from 'antd'; import { ConfigProvider, Modal } from 'antd'; import { merge } from 'lodash-es'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import { noteOnce } from 'rc-util/lib/warning'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; +import { noteOnce } from 'rc-util/es/warning'; import React, { useCallback, useContext, @@ -16,7 +15,7 @@ import React, { import { createPortal } from 'react-dom'; import type { CommonFormProps, ProFormInstance } from '../../BaseForm'; import { BaseForm } from '../../BaseForm'; -import { SubmitterProps } from '../../components/Submitter'; +import { SubmitterProps } from '../../BaseForm/Submitter'; export type ModalFormProps< T = Record, @@ -229,15 +228,13 @@ function ModalForm, U = Record>({ [onFinish, setOpen, submitTimeout], ); - const modalOpenProps = openVisibleCompatible(open); - return ( <> { // 提交表单loading时，阻止弹框关闭 if (submitTimeout && loading) return; diff --git a/packages/form/src/layouts/QueryFilter/index.tsx b/packages/form/src/layouts/QueryFilter/index.tsx index cd86577b6310..005bd4f00731 100644 --- a/packages/form/src/layouts/QueryFilter/index.tsx +++ b/packages/form/src/layouts/QueryFilter/index.tsx @@ -3,10 +3,10 @@ import { ProProvider, useIntl } from '@ant-design/pro-provider'; import { isBrowser, useMountMergeState } from '@ant-design/pro-utils'; import type { ColProps, FormItemProps, RowProps } from 'antd'; import { Col, ConfigProvider, Form, Row } from 'antd'; -import type { FormInstance, FormProps } from 'antd/lib/form/Form'; +import type { FormInstance, FormProps } from 'antd/es/form/Form'; import classNames from 'classnames'; import RcResizeObserver from 'rc-resize-observer'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import type { ReactElement } from 'react'; import React, { useContext, useMemo } from 'react'; import type { CommonFormProps } from '../../BaseForm'; @@ -202,7 +202,7 @@ const flatMapItems = ( ignoreRules?: boolean, ): React.ReactNode[] => { return items?.flatMap((item: any) => { - if (item?.type.displayName === 'ProForm-Group' && !item.props?.title) { + if (item?.type?.displayName === 'ProForm-Group' && !item.props?.title) { return item.props.children; } diff --git a/packages/form/src/layouts/StepsForm/StepForm.tsx b/packages/form/src/layouts/StepsForm/StepForm.tsx index 883cf7f287f8..d2e634b8a724 100644 --- a/packages/form/src/layouts/StepsForm/StepForm.tsx +++ b/packages/form/src/layouts/StepsForm/StepForm.tsx @@ -1,7 +1,7 @@ import type { FormInstance, FormProps } from 'antd'; import omit from 'omit.js'; -import type { StepProps } from 'rc-steps/lib/Step'; -import { noteOnce } from 'rc-util/lib/warning'; +import type { StepProps } from 'rc-steps/es/Step'; +import { noteOnce } from 'rc-util/es/warning'; import { useContext, useEffect, useImperativeHandle, useRef } from 'react'; import type { CommonFormProps } from '../../BaseForm'; import { BaseForm } from '../../BaseForm'; diff --git a/packages/form/src/layouts/StepsForm/index.tsx b/packages/form/src/layouts/StepsForm/index.tsx index 48e180fe74ba..3d55a57044ec 100644 --- a/packages/form/src/layouts/StepsForm/index.tsx +++ b/packages/form/src/layouts/StepsForm/index.tsx @@ -1,21 +1,12 @@ import { ProConfigProvider, useIntl } from '@ant-design/pro-provider'; -import { compareVersions, merge, useRefFunction } from '@ant-design/pro-utils'; +import { merge, useRefFunction } from '@ant-design/pro-utils'; import type { FormInstance, StepsProps } from 'antd'; -import { - Button, - Col, - ConfigProvider, - Form, - Row, - Space, - Steps, - version, -} from 'antd'; - -import type { FormProviderProps } from 'antd/lib/form/context'; +import { Button, Col, ConfigProvider, Form, Row, Space, Steps } from 'antd'; + +import type { FormProviderProps } from 'antd/es/form/context'; import classNames from 'classnames'; -import toArray from 'rc-util/lib/Children/toArray'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import toArray from 'rc-util/es/Children/toArray'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React, { useCallback, useContext, @@ -25,7 +16,7 @@ import React, { useState, } from 'react'; import type { ProFormInstance } from '../../BaseForm'; -import type { SubmitterProps } from '../../components'; +import type { SubmitterProps } from '../../BaseForm/Submitter'; import type { ProFormProps } from '../ProForm'; import type { StepFormProps } from './StepForm'; import StepForm from './StepForm'; @@ -286,19 +277,16 @@ function StepsForm>( ); const stepsDom = useMemo(() => { - const isNewAntd = compareVersions(version, '4.24.0') > -1; - const itemsProps = isNewAntd - ? { - items: formArray.map((item) => { - const itemProps = formMapRef.current.get(item); - return { - key: item, - title: itemProps?.title, - ...itemProps?.stepProps, - }; - }), - } - : {}; + const itemsProps = { + items: formArray.map((item) => { + const itemProps = formMapRef.current.get(item); + return { + key: item, + title: itemProps?.title, + ...itemProps?.stepProps, + }; + }), + }; return (
>( {...itemsProps} current={step} onChange={undefined} - > - {!isNewAntd && - formArray.map((item) => { - const itemProps = formMapRef.current.get(item); - return ( - - ); - })} - + />
); }, [formArray, hashId, prefixCls, step, stepsProps]); diff --git a/packages/form/tsconfig.json b/packages/form/tsconfig.json deleted file mode 100644 index 4b4dbbb63f46..000000000000 --- a/packages/form/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "paths": { - "@ant-design/pro-field": ["../../packages/field/src/index.tsx"], - "@ant-design/pro-provider": ["../../packages/provider/src/index.tsx"], - "@ant-design/pro-utils": ["../../packages/utils/src/index.tsx"] - } - }, - "include": ["./src"] -} diff --git a/packages/layout/package.json b/packages/layout/package.json index be9682894ff0..e50cbede4f60 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -54,7 +54,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0", "react-dom": ">=17.0.0" }, diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx index 6ec1404db5a8..ab196a86248e 100644 --- a/packages/layout/src/ProLayout.tsx +++ b/packages/layout/src/ProLayout.tsx @@ -12,14 +12,14 @@ import { useMountMergeState, } from '@ant-design/pro-utils'; import { getMatchMenu } from '@umijs/route-utils'; -import type { BreadcrumbProps } from 'antd'; +import type { BreadcrumbProps, WatermarkProps } from 'antd'; import { ConfigProvider, Layout } from 'antd'; import type { AnyObject } from 'antd/es/_util/type'; import type { ItemType } from 'antd/es/breadcrumb/Breadcrumb'; import classNames from 'classnames'; import Omit from 'omit.js'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import warning from 'rc-util/lib/warning'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; +import warning from 'rc-util/es/warning'; import type { CSSProperties } from 'react'; import React, { useCallback, @@ -38,7 +38,6 @@ import { PageLoading } from './components/PageLoading'; import { SiderMenu } from './components/SiderMenu'; import type { SiderMenuProps } from './components/SiderMenu/SiderMenu'; import type { SiderMenuToken } from './components/SiderMenu/style'; -import type { WaterMarkProps } from './components/WaterMark'; import { RouteContext } from './context/RouteContext'; import type { ProSettings } from './defaultSettings'; import { defaultSettings } from './defaultSettings'; @@ -243,7 +242,7 @@ export type ProLayoutProps = GlobalTypes & { breadcrumbProps?: Omit & LayoutBreadcrumbProps; /** @name 水印的相关配置 */ - waterMarkProps?: WaterMarkProps; + waterMarkProps?: WatermarkProps; /** * @name 操作菜单重新刷新 @@ -332,6 +331,7 @@ const renderSiderMenu = ( } // 这里走了可以少一次循环 const clearMenuData = clearMenuItem(menuData || []); + if ( clearMenuData && clearMenuData?.length < 1 && @@ -497,7 +497,7 @@ const BaseProLayout: React.FC = (props) => { setMenuLoading(true); const menuDataItems = await menu?.request?.( params || {}, - route?.children || route?.routes || [], + route?.children || [], ); setMenuLoading(false); return menuDataItems; @@ -529,12 +529,12 @@ const BaseProLayout: React.FC = (props) => { }>( () => getMenuData( - data || route?.children || route?.routes || [], + data || route?.children || [], menu, formatMessage, menuDataRender, ), - [formatMessage, menu, menuDataRender, data, route?.children, route?.routes], + [formatMessage, menu, menuDataRender, data, route?.children], ); const { breadcrumb, breadcrumbMap, menuData = [] } = menuInfoData || {}; diff --git a/packages/layout/src/components/AppsLogoComponents/index.tsx b/packages/layout/src/components/AppsLogoComponents/index.tsx index 687a9d2ef88c..aafd1f679a89 100644 --- a/packages/layout/src/components/AppsLogoComponents/index.tsx +++ b/packages/layout/src/components/AppsLogoComponents/index.tsx @@ -1,5 +1,4 @@ -import { openVisibleCompatible } from '@ant-design/pro-utils'; -import { Popover } from 'antd'; +import { Popover } from 'antd'; import classNames from 'classnames'; import React, { useMemo, useState } from 'react'; import { AppsLogo } from './AppsLogo'; @@ -44,12 +43,7 @@ export const AppsLogoComponents: React.FC<{ ) => void; prefixCls?: string; }> = (props) => { - const { - appList, - appListRender, - prefixCls = 'ant-pro', - onItemClick: itemClick, - } = props; + const { appList, appListRender, prefixCls, onItemClick: itemClick } = props; const ref = React.useRef(null); const popoverRef = React.useRef(null); const baseClassName = `${prefixCls}-layout-apps`; @@ -91,26 +85,15 @@ export const AppsLogoComponents: React.FC<{ ? appListRender(props?.appList, defaultDomContent) : defaultDomContent; - const popoverOpenProps = openVisibleCompatible( - undefined, - (openChange: boolean) => setOpen(openChange), - ); - return wrapSSR( <> -
{ - e.stopPropagation(); - e.preventDefault(); - }} - /> +
setOpen(openChange)} overlayClassName={`${baseClassName}-popover ${hashId}`.trim()} content={popoverContent} getPopupContainer={() => ref.current || document.body} diff --git a/packages/layout/src/components/Help/ProHelpPanel.tsx b/packages/layout/src/components/Help/ProHelpPanel.tsx index ccfe310b8738..240e3fae1006 100644 --- a/packages/layout/src/components/Help/ProHelpPanel.tsx +++ b/packages/layout/src/components/Help/ProHelpPanel.tsx @@ -206,12 +206,14 @@ export const ProHelpPanel: React.FC = ({ - {/* 如果版本低于 4.23.0，不支持 items */} - {compareVersions(version, '4.23.0') < 0 - ? tabList?.map((item, index) => { - return ( - - ); - }) - : null} - + /> ); } return null; @@ -435,7 +417,7 @@ const PageContainerBase: React.FC = (props) => { ...value.waterMarkProps, ...props.waterMarkProps, }; - return {dom}; + return {dom}; } return dom; }, [props.waterMarkProps, value.waterMarkProps, loadingDom, content]); diff --git a/packages/layout/src/components/PageHeader/index.tsx b/packages/layout/src/components/PageHeader/index.tsx index bd8e5027267e..0db4de40e71d 100644 --- a/packages/layout/src/components/PageHeader/index.tsx +++ b/packages/layout/src/components/PageHeader/index.tsx @@ -2,11 +2,9 @@ import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined'; import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined'; import type { AvatarProps, BreadcrumbProps, TagType } from 'antd'; import { Avatar, Breadcrumb, ConfigProvider, Space } from 'antd'; -import 'antd/lib/breadcrumb/style'; -import type { DirectionType } from 'antd/lib/config-provider'; +import type { DirectionType } from 'antd/es/config-provider'; import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; -import { noteOnce } from 'rc-util/lib/warning'; import * as React from 'react'; import type { ContentWidth } from '../../defaultSettings'; import useStyle from './style/index'; @@ -162,30 +160,6 @@ const renderChildren = ( hashId: string, ) =>
{children}
; -const transformBreadcrumbRoutesToItems = ( - routes?: BreadcrumbProps['routes'], -): BreadcrumbProps['items'] => { - return routes?.map((route) => { - noteOnce( - !!route.breadcrumbName, - 'Route.breadcrumbName is deprecated, please use Route.title instead.', - ); - return { - ...route, - breadcrumbName: undefined, - children: undefined, - title: route.title || route.breadcrumbName, - ...(route.children?.length - ? { - menu: { - items: transformBreadcrumbRoutesToItems(route.children), - }, - } - : {}), - }; - }); -}; - const PageHeader: React.FC = (props) => { const [compact, updateCompact] = React.useState(false); @@ -212,20 +186,6 @@ const PageHeader: React.FC = (props) => { const { wrapSSR, hashId } = useStyle(prefixCls); const getDefaultBreadcrumbDom = () => { - if ( - breadcrumb && - !(breadcrumb as BreadcrumbProps)?.items && - (breadcrumb as BreadcrumbProps)?.routes - ) { - noteOnce( - false, - 'The routes of Breadcrumb is deprecated, please use items instead.', - ); - (breadcrumb as BreadcrumbProps).items = transformBreadcrumbRoutesToItems( - (breadcrumb as BreadcrumbProps).routes, - ); - } - if ((breadcrumb as BreadcrumbProps)?.items) { return renderBreadcrumb(breadcrumb as BreadcrumbProps, prefixCls); } diff --git a/packages/layout/src/components/SettingDrawer/index.tsx b/packages/layout/src/components/SettingDrawer/index.tsx index 03c2f3aa614c..aa1e2873a3ec 100644 --- a/packages/layout/src/components/SettingDrawer/index.tsx +++ b/packages/layout/src/components/SettingDrawer/index.tsx @@ -4,26 +4,11 @@ import { NotificationOutlined, SettingOutlined, } from '@ant-design/icons'; -import { - compareVersions, - isBrowser, - merge, - openVisibleCompatible, -} from '@ant-design/pro-utils'; +import { isBrowser, merge } from '@ant-design/pro-utils'; import { useUrlSearchParams } from '@umijs/use-params'; -import { - Alert, - ConfigProvider as AntConfigProvider, - Button, - Divider, - Drawer, - List, - Switch, - message, - version, -} from 'antd'; +import { Alert, Button, Divider, Drawer, List, Switch, message } from 'antd'; import omit from 'omit.js'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React, { useEffect, useRef, useState } from 'react'; import type { ProSettings } from '../../defaultSettings'; import { defaultSettings } from '../../defaultSettings'; @@ -270,15 +255,6 @@ export const SettingDrawer: React.FC = (props) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - useEffect(() => { - if (compareVersions(version, '5.0.0') < 0) { - AntConfigProvider.config({ - theme: { - primaryColor: settingState.colorPrimary, - }, - }); - } - }, [settingState.colorPrimary, settingState.navTheme]); /** * 修改设置 * @@ -348,8 +324,6 @@ export const SettingDrawer: React.FC = (props) => { const baseClassName = `${prefixCls}-setting-drawer`; const { wrapSSR, hashId } = useStyle(baseClassName); - const drawerOpenProps = openVisibleCompatible(open); - return wrapSSR( <>
= (props) => { )}
setOpen(false)} closable={false} diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx index 1e994d9bbcf6..d2f883519374 100644 --- a/packages/layout/src/components/SiderMenu/BaseMenu.tsx +++ b/packages/layout/src/components/SiderMenu/BaseMenu.tsx @@ -222,7 +222,7 @@ class MenuUtil { const designToken = this.props.token; const name = this.getIntlName(item); - const children = item?.children || item?.routes; + const children = item?.children; const menuType = isGroup && level === 0 ? ('group' as const) : undefined; diff --git a/packages/layout/src/components/SiderMenu/SiderMenu.tsx b/packages/layout/src/components/SiderMenu/SiderMenu.tsx index 354b57d728ed..447ccc30b036 100644 --- a/packages/layout/src/components/SiderMenu/SiderMenu.tsx +++ b/packages/layout/src/components/SiderMenu/SiderMenu.tsx @@ -19,7 +19,7 @@ const _SafetyWarningProvider: FC<{ children: ReactNode }> = React.memo( (props) => { if (process.env.NODE_ENV !== 'production') { console.warn( - `[pro-layout] SiderMenu required antd@^4.24.15 || antd@^5.11.2 for access the menu context, please upgrade your antd version (current ${version}).`, + `[pro-layout] SiderMenu required antd@^5.11.2 for access the menu context, please upgrade your antd version (current ${version}).`, ); } diff --git a/packages/layout/src/components/SiderMenu/index.tsx b/packages/layout/src/components/SiderMenu/index.tsx index 95cfeee3aebb..5eb2304c5e8d 100644 --- a/packages/layout/src/components/SiderMenu/index.tsx +++ b/packages/layout/src/components/SiderMenu/index.tsx @@ -1,5 +1,4 @@ import { ProProvider } from '@ant-design/pro-provider'; -import { openVisibleCompatible } from '@ant-design/pro-utils'; import { ConfigProvider, Drawer } from 'antd'; import classNames from 'classnames'; import Omit from 'omit.js'; @@ -46,16 +45,15 @@ const SiderMenuWrapper: React.FC = ( return null; } - const drawerOpenProps = openVisibleCompatible(!collapsed, () => - onCollapse?.(true), - ); - return wrapSSR( isMobile ? ( { + onCollapse?.(true); + }} style={{ padding: 0, height: '100vh', diff --git a/packages/layout/src/components/WaterMark/demos/custom.tsx b/packages/layout/src/components/WaterMark/demos/custom.tsx deleted file mode 100644 index 9382d847453b..000000000000 --- a/packages/layout/src/components/WaterMark/demos/custom.tsx +++ /dev/null @@ -1,133 +0,0 @@ -/** Title: 自定义配置 */ -import { - ProCard, - ProForm, - ProFormColorPicker, - ProFormDependency, - ProFormField, - ProFormSlider, - ProFormText, - WaterMark, -} from '@ant-design/pro-components'; -import { Divider } from 'antd'; -import { AggregationColor } from 'antd/es/color-picker/color'; - -export default () => { - return ( - - - - - {({ rotate, content, fontColor, fontSize, zIndex }) => { - return ( - -
-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Quisquam aliquid perferendis, adipisci dolorum officia - odio natus facere cumque iusto libero repellendus - praesentium ipsa cupiditate iure autem eos repudiandae - delectus totam? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Illo praesentium, aperiam numquam voluptatibus asperiores - odio? Doloribus saepe, eligendi facere inventore culpa, - exercitationem explicabo earum laborum deleniti reiciendis - deserunt accusantium ullam. -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Officia voluptas numquam impedit architecto facilis - aliquam at assumenda, nostrum explicabo accusantium ipsam - error provident voluptate molestias magnam quisquam - excepturi illum sit! -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Aperiam, accusantium quo corporis fugit possimus quaerat - ad consequatur veniam voluptatum ut cumque illo beatae. - Magni assumenda eligendi itaque eum voluptate non! -

-
-

- 下面是一张zIndex 为 10 的 position 为 relative 图片， -
如果要在图片中展示水印尝试调大右侧的 zIndex - 滑块试试。 -

- 示例图片 - - ); - }} - - - - - - - - - - - {({ rotate, content, fontColor, fontSize, zIndex }) => { - return ( - -
xxx
-`} - /> - ); - }} - - - - - ); -}; diff --git a/packages/layout/src/components/WaterMark/demos/frontend.tsx b/packages/layout/src/components/WaterMark/demos/frontend.tsx deleted file mode 100644 index a32ab72f81f0..000000000000 --- a/packages/layout/src/components/WaterMark/demos/frontend.tsx +++ /dev/null @@ -1,135 +0,0 @@ -/** Title: 前置水印 */ -import type { ProColumns } from '@ant-design/pro-components'; -import { - LightFilter, - ProFormDatePicker, - ProTable, - TableDropdown, - WaterMark, -} from '@ant-design/pro-components'; - -const valueEnum = { - 0: 'close', - 1: 'running', - 2: 'online', - 3: 'error', -}; - -export interface TableListItem { - key: number; - name: string; - containers: number; - creator: string; - status: string; - createdAt: number; - memo: string; -} -const tableListDataSource: TableListItem[] = []; - -const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某']; - -for (let i = 0; i < 10; i += 1) { - tableListDataSource.push({ - key: i, - name: 'AppName', - containers: Math.floor(Math.random() * 20), - creator: creators[Math.floor(Math.random() * creators.length)], - status: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'], - createdAt: Date.now() - Math.floor(Math.random() * 100000), - memo: - i % 2 === 1 - ? '很长很长很长很长很长很长很长的文字要展示但是要留下尾巴' - : '简短备注文案', - }); -} - -const columns: ProColumns[] = [ - { - title: '应用名称', - width: 80, - dataIndex: 'name', - render: (_) => {_}, - }, - { - title: '容器数量', - dataIndex: 'containers', - align: 'right', - sorter: (a, b) => a.containers - b.containers, - }, - { - title: '状态', - width: 80, - dataIndex: 'status', - initialValue: 'all', - valueEnum: { - all: { text: '全部', status: 'Default' }, - close: { text: '关闭', status: 'Default' }, - running: { text: '运行中', status: 'Processing' }, - online: { text: '已上线', status: 'Success' }, - error: { text: '异常', status: 'Error' }, - }, - }, - { - title: '创建者', - width: 80, - dataIndex: 'creator', - valueEnum: { - all: { text: '全部' }, - 付小小: { text: '付小小' }, - 曲丽丽: { text: '曲丽丽' }, - 林东东: { text: '林东东' }, - 陈帅帅: { text: '陈帅帅' }, - 兼某某: { text: '兼某某' }, - }, - }, - { - title: '备注', - dataIndex: 'memo', - ellipsis: true, - copyable: true, - }, - { - title: '操作', - width: 180, - key: 'option', - valueType: 'option', - render: () => [ - 链路, - 报警, - 监控, - , - ], - }, -]; - -export default () => ( - <> - - - columns={columns} - dataSource={tableListDataSource} - rowKey="key" - pagination={{ - showQuickJumper: true, - }} - toolbar={{ - title: '标签', - multipleLine: true, - filter: ( - - - - ), - }} - search={false} - dateFormatter="string" - /> - - -); diff --git a/packages/layout/src/components/WaterMark/demos/image.tsx b/packages/layout/src/components/WaterMark/demos/image.tsx deleted file mode 100644 index 889f730c3e5c..000000000000 --- a/packages/layout/src/components/WaterMark/demos/image.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** Title: 图片水印 */ -import { WaterMark } from '@ant-design/pro-components'; - -export default () => { - return ( - -
-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam - aliquid perferendis, adipisci dolorum officia odio natus facere cumque - iusto libero repellendus praesentium ipsa cupiditate iure autem eos - repudiandae delectus totam? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo - praesentium, aperiam numquam voluptatibus asperiores odio? Doloribus - saepe, eligendi facere inventore culpa, exercitationem explicabo earum - laborum deleniti reiciendis deserunt accusantium ullam. -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia - voluptas numquam impedit architecto facilis aliquam at assumenda, - nostrum explicabo accusantium ipsam error provident voluptate - molestias magnam quisquam excepturi illum sit! -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, - accusantium quo corporis fugit possimus quaerat ad consequatur veniam - voluptatum ut cumque illo beatae. Magni assumenda eligendi itaque eum - voluptate non! -

-
- - ); -}; diff --git a/packages/layout/src/components/WaterMark/demos/text.tsx b/packages/layout/src/components/WaterMark/demos/text.tsx deleted file mode 100644 index e65ce6fff15b..000000000000 --- a/packages/layout/src/components/WaterMark/demos/text.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/** Title: 文字水印 */ -import { WaterMark } from '@ant-design/pro-components'; - -export default () => ( - -
- -); diff --git a/packages/layout/src/components/WaterMark/demos/textRows.tsx b/packages/layout/src/components/WaterMark/demos/textRows.tsx deleted file mode 100644 index 8191274ba170..000000000000 --- a/packages/layout/src/components/WaterMark/demos/textRows.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/** Title: 多行文字水印 */ -import { WaterMark } from '@ant-design/pro-components'; - -export default () => ( - -
- -); diff --git a/packages/layout/src/components/WaterMark/index.en-US.md b/packages/layout/src/components/WaterMark/index.en-US.md deleted file mode 100644 index 0dde86640488..000000000000 --- a/packages/layout/src/components/WaterMark/index.en-US.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: WaterMark - Watermark Component -order: 0 -atomId: WaterMark -legacy: /layout ---- - -# WaterMark - Watermark Component - -Add a watermark to a specific area of the page. - -## When to use - -Use when you need to add a watermark to indicate copyright on a page. - -## Code Demo - -### Frontend Watermark - -The watermark component is implemented as a frontend watermark by default, which means the watermark will be displayed on top of the content. The default `zIndex` is set to 9. If you don't want the watermark to cover the content on top, you can adjust this value to a value lower than the `zIndex` of the content on top. - - - -### Text Watermark - -Specify the text watermark content using the `content` property. - - - -### Multiline Text Watermark - -Specify the multiline text watermark content using the `content` property as an array of strings. - - - -### Image Watermark - -Specify the image URL using the `image` property. To ensure the image is high-definition and not stretched, please provide the width and height of the watermark image, and upload a logo image with at least double the width and height. - - - -### Custom Configuration - -Here are some common configuration options. If you need further customization, please contact us. - - - -## WaterMark - -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| width | Width of the watermark | number | 120 | 2.2.0 | -| height | Height of the watermark | number | 64 | 2.2.0 | -| rotate | Rotation angle of the watermark in degrees | number | -22 | 2.2.0 | -| image | Image source, it is recommended to export a 2x or 3x image, the watermark will be rendered with the image if specified | `string` | - | 2.2.0 | -| zIndex | The `z-index` of the appended watermark elements | number | 9 | 2.2.0 | -| content | Text content of the watermark | `string` \| `string[]` | - | 2.2.0 | -| fontColor | Text color of the watermark | `string` | `rgba(0,0,0,.15)` | 2.2.0 | -| fontSize | Font size | `string` \| `number` | 16 | 2.2.0 | -| markStyle | Style of the watermark layer | React.CSSProperties | - | 2.3.0 | -| markClassName | Class name of the watermark layer | string | - | 2.3.0 | -| gapX | Horizontal spacing between watermarks | number | 212 | 2.4.0 | -| gapY | Vertical spacing between watermarks | number | 222 | 2.4.0 | -| offsetLeft | Horizontal offset of the watermark when drawing on the canvas. Normally, the watermark is drawn in the middle position, i.e. `offsetTop = gapX / 2` | number | `offsetTop = gapX / 2` | 2.4.0 | -| offsetTop | Vertical offset of the watermark when drawing on the canvas. Normally, the watermark is drawn in the middle position, i.e. `offsetTop = gapY / 2` | number | `offsetTop = gapY / 2` | 2.4.0 | - -### Watermark API Visualization - -```jsx | inline -import react from 'react'; - -export default () => ( -
- -
-); -``` diff --git a/packages/layout/src/components/WaterMark/index.md b/packages/layout/src/components/WaterMark/index.md deleted file mode 100644 index ae90e73b6ffd..000000000000 --- a/packages/layout/src/components/WaterMark/index.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: WaterMark - 水印组件 -order: 0 -legacy: /layout -atomId: WaterMark ---- - -# WaterMark 水印组件 - -给页面的某个区域加上水印。 - -## 何时使用 - -页面需要添加水印标识版权时使用。 - -## 代码演示 - -### 前置水印 - -水印组件默认实现为前置水印，即设想水印会显示在内容的上方，zIndex 默认设置为 9，如果你不希望水印遮挡上层内容，可以调整该值到小于上层内容的 zIndex。 - - - -### 文字水印 - -通过 `content` 指定文字水印内容。 - - - -### 多行文字水印 - -通过 `content`设置 字符串数组 指定多行文字水印内容。 - - - -### 图片水印 - -通过 `image` 指定图片地址。为保证图片高清且不被拉伸，请传入水印图片的宽高 width 和 height, 并上传至少两倍的宽高的 logo 图片地址。 - - - -### 自定义配置 - -这里给出一些通用配置项。如需进一步配置请联系我们。 - - - -## WaterMark - -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| width | 水印的宽度 | number | 120 | 2.2.0 | -| height | 水印的高度 | number | 64 | 2.2.0 | -| rotate | 水印绘制时，旋转的角度，单位 ° | number | -22 | 2.2.0 | -| image | 图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印 | `string` | - | 2.2.0 | -| zIndex | 追加的水印元素的 z-index | number | 9 | 2.2.0 | -| content | 水印文字内容 | `string` \| `string[]` | - | 2.2.0 | -| fontColor | 水印文字颜色 | `string` | `rgba(0,0,0,.15)` | 2.2.0 | -| fontSize | 文字大小 | `string` \| `number` | 16 | 2.2.0 | -| markStyle | 水印层的样式 | React.CSSProperties | - | 2.3.0 | -| markClassName | 水印层的类名 | string | - | 2.3.0 | -| gapX | 水印之间的水平间距 | number | 212 | 2.4.0 | -| gapY | 水印之间的垂直间距 | number | 222 | 2.4.0 | -| offsetLeft | 水印在 canvas 画布上绘制的水平偏移量，正常情况下，水印绘制在中间位置，即 `offsetLeft = gapX / 2` | number | `offsetLeft = gapX / 2` | 2.4.0 | -| offsetTop | 水印在 canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置，即 `offsetTop = gapY / 2` | number | `offsetTop = gapY / 2` | 2.4.0 | - -### 水印 API 可视化 - -```jsx | inline -import react from 'react'; - -export default () => ( -
- -
-); -``` diff --git a/packages/layout/src/components/WaterMark/index.tsx b/packages/layout/src/components/WaterMark/index.tsx deleted file mode 100644 index f6b1cecd5638..000000000000 --- a/packages/layout/src/components/WaterMark/index.tsx +++ /dev/null @@ -1,212 +0,0 @@ -import { useToken } from '@ant-design/pro-provider'; -import { ConfigProvider } from 'antd'; - -import classNames from 'classnames'; -import React, { useContext, useEffect, useState } from 'react'; - -export type WaterMarkProps = { - /** 类名 */ - className?: string; - /** 样式 */ - style?: React.CSSProperties; - /** 水印样式 */ - markStyle?: React.CSSProperties; - /** 水印类名 */ - markClassName?: string; - /** 水印之间的水平间距 */ - gapX?: number; - /** 水印之间的垂直间距 */ - gapY?: number; - /** 追加的水印元素的z-index */ - zIndex?: number; - /** 水印的宽度 */ - width?: number; - /** 水印的高度 */ - height?: number; - /** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */ - offsetTop?: number; // 水印图片距离绘制 canvas 单元的顶部距离 - /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */ - offsetLeft?: number; - /** 水印绘制时，旋转的角度，单位 ° */ - rotate?: number; - /** ClassName 前缀 */ - prefixCls?: string; - /** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */ - image?: string; - /** 水印文字内容 */ - content?: string | string[]; - /** 文字颜色 */ - fontColor?: string; - /** 文字样式 */ - fontStyle?: 'none' | 'normal' | 'italic' | 'oblique'; - /** 文字族 */ - fontFamily?: string; - /** 文字粗细 */ - fontWeight?: 'normal' | 'light' | 'weight' | number; - /** 文字大小 */ - fontSize?: number | string; - - children?: React.ReactNode; -}; -/** - * 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比 - * - * @param context - * @see api 有些废弃了，其实类型 CanvasRenderingContext2D - */ -const getPixelRatio = (context: any) => { - if (!context) { - return 1; - } - const backingStore = - context.backingStorePixelRatio || - context.webkitBackingStorePixelRatio || - context.mozBackingStorePixelRatio || - context.msBackingStorePixelRatio || - context.oBackingStorePixelRatio || - 1; - return (window.devicePixelRatio || 1) / backingStore; -}; - -export const WaterMark: React.FC = (props) => { - const { token } = useToken(); - const { - children, - style, - className, - markStyle, - markClassName, - // antd 内容层 zIndex 基本上在 10 以下 https://github.com/ant-design/ant-design/blob/6192403b2ce517c017f9e58a32d58774921c10cd/components/style/themes/default.less#L335 - zIndex = 9, - gapX = 212, - gapY = 222, - width = 120, - height = 64, - rotate = -22, // 默认旋转 -22 度 - image, - offsetLeft, - offsetTop: outOffsetTop, - fontStyle = 'normal', - fontWeight = 'normal', - fontColor = token.colorFill, - fontSize = 16, - fontFamily = 'sans-serif', - prefixCls: customizePrefixCls, - } = props; - - const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); - const prefixCls = getPrefixCls('pro-layout-watermark', customizePrefixCls); - const wrapperCls = classNames(`${prefixCls}-wrapper`, className); - const waterMarkCls = classNames(prefixCls, markClassName); - const [base64Url, setBase64Url] = useState(''); - - useEffect(() => { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); - const ratio = getPixelRatio(ctx); - - const canvasWidth = `${(gapX + width) * ratio}px`; - const canvasHeight = `${(gapY + height) * ratio}px`; - const canvasOffsetLeft = offsetLeft || gapX / 2; - const canvasOffsetTop = outOffsetTop || gapY / 2; - - canvas.setAttribute('width', canvasWidth); - canvas.setAttribute('height', canvasHeight); - - if (!ctx) { - // eslint-disable-next-line no-console - console.error('当前环境不支持Canvas'); - return; - } - - // 旋转字符 rotate - ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio); - ctx.rotate((Math.PI / 180) * Number(rotate)); - const markWidth = width * ratio; - const markHeight = height * ratio; - - const writeContent = ( - contentText: string | string[], - offsetTop: number = 0, - ) => { - const markSize = Number(fontSize) * ratio; - ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`; - ctx.fillStyle = fontColor; - if (Array.isArray(contentText)) { - contentText?.forEach((item: string, index: number) => - ctx.fillText(item, 0, index * markSize + offsetTop), - ); - } else { - ctx.fillText(contentText, 0, offsetTop ? offsetTop + markSize : 0); - } - setBase64Url(canvas.toDataURL()); - }; - - if (image) { - const img = new Image(); - img.crossOrigin = 'anonymous'; - img.referrerPolicy = 'no-referrer'; - img.src = image; - img.onload = () => { - ctx.drawImage(img, 0, 0, markWidth, markHeight); - setBase64Url(canvas.toDataURL()); - if (props.content) { - writeContent(props.content, img.height + 8); - return; - } - }; - return; - } - if (props.content) { - writeContent(props.content); - return; - } - }, [ - gapX, - gapY, - offsetLeft, - outOffsetTop, - rotate, - fontStyle, - fontWeight, - width, - height, - fontFamily, - fontColor, - image, - props.content, - fontSize, - ]); - - return ( -
- {children} -
-
- ); -}; diff --git a/packages/layout/src/components/layout.en-US.md b/packages/layout/src/components/layout.en-US.md index 00bc4ebb1223..9ec40696cc16 100644 --- a/packages/layout/src/components/layout.en-US.md +++ b/packages/layout/src/components/layout.en-US.md @@ -109,7 +109,7 @@ ProLayout will automatically select the menu based on `location.pathname` and au | ErrorBoundary | Comes with error handling function to prevent blank screen. `ErrorBoundary=false` turn off default ErrorBoundary | `ReactNode` | default ErrorBoundary | | links | Show shortcut actions in the lower right corner of the menu | `ReactNode[]` | - | | menuProps | The props passed to the antd menu component, see () | `MenuProps` | undefined | -| waterMarkProps | Configure watermark, watermark is a function of PageContainer, layout is only transparently transmitted to PageContainer | [WaterMarkProps](/components/water-mark) | - | +| waterMarkProps | Configure watermark, watermark is a function of PageContainer, layout is only transparently transmitted to PageContainer | [WaterMarkProps] | - | ### SettingDrawer diff --git a/packages/layout/src/components/layout.md b/packages/layout/src/components/layout.md index beba5539192d..e87a7daa477f 100644 --- a/packages/layout/src/components/layout.md +++ b/packages/layout/src/components/layout.md @@ -69,7 +69,7 @@ ProLayout 可以提供一个标准又不失灵活的中后台标准布局，同 | ErrorBoundary | 自带了错误处理功能，防止白屏，`ErrorBoundary=false` 关闭默认错误边界 | `ReactNode` | 内置 ErrorBoundary | | links | 显示在菜单右下角的快捷操作 | `ReactNode[]` | - | | menuProps | 传递到 antd menu 组件的 props, 参考 [导航菜单](https://ant.design/components/menu-cn/) | `MenuProps` | undefined | -| waterMarkProps | 配置水印，水印是 PageContainer 的功能，layout 只是透传给 PageContainer | [WaterMarkProps](/components/water-mark) | - | +| waterMarkProps | 配置水印，水印是 PageContainer 的功能，layout 只是透传给 PageContainer | WaterMarkProps | - | ### menu diff --git a/packages/layout/src/context/RouteContext.tsx b/packages/layout/src/context/RouteContext.tsx index 742eb1389a2c..01f37ebfd091 100644 --- a/packages/layout/src/context/RouteContext.tsx +++ b/packages/layout/src/context/RouteContext.tsx @@ -1,6 +1,5 @@ -import type { BreadcrumbProps } from 'antd'; +import type { BreadcrumbProps, WatermarkProps } from 'antd'; import { createContext } from 'react'; -import type { WaterMarkProps } from '../components/WaterMark'; import type { PureSettings } from '../defaultSettings'; import type { MenuDataItem } from '../typing'; import type { BreadcrumbListReturn } from '../utils/getBreadcrumbProps'; @@ -30,7 +29,7 @@ export type RouteContextType = { currentMenu?: PureSettings & MenuDataItem; /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */ breadcrumbProps?: BreadcrumbProps; - waterMarkProps?: WaterMarkProps; + waterMarkProps?: WatermarkProps; } & Partial; export const RouteContext: React.Context = createContext({}); diff --git a/packages/layout/src/demos/_defaultProps.tsx b/packages/layout/src/demos/_defaultProps.tsx index c72164dd1603..c148ffc45bc7 100644 --- a/packages/layout/src/demos/_defaultProps.tsx +++ b/packages/layout/src/demos/_defaultProps.tsx @@ -8,7 +8,7 @@ import { export default { route: { path: '/', - routes: [ + children: [ { path: '/welcome', name: '欢迎', @@ -21,7 +21,7 @@ export default { icon: , access: 'canAdmin', component: './Admin', - routes: [ + children: [ { path: '/admin/sub-page1', name: '一级页面', @@ -47,12 +47,12 @@ export default { icon: , path: '/list', component: './ListTableList', - routes: [ + children: [ { path: '/list/sub-page', name: '列表页面', icon: , - routes: [ + children: [ { path: 'sub-sub-page1', name: '一一级列表页面', diff --git a/packages/layout/src/demos/error-boundaries.tsx b/packages/layout/src/demos/error-boundaries.tsx index a57418e833d1..f3b167939975 100644 --- a/packages/layout/src/demos/error-boundaries.tsx +++ b/packages/layout/src/demos/error-boundaries.tsx @@ -68,7 +68,7 @@ class CustomBoundary extends React.Component< ）
  • - 异步代码（例如 setTimeout 或{' '} + 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
  • 服务端渲染
    • diff --git a/packages/layout/src/demos/pageSimplify.tsx b/packages/layout/src/demos/pageSimplify.tsx index 98de635ac377..6a8eae20e5c3 100644 --- a/packages/layout/src/demos/pageSimplify.tsx +++ b/packages/layout/src/demos/pageSimplify.tsx @@ -31,7 +31,7 @@ export default () => { token={{ bgLayout: '#fff', header: { - colorBgHeader: '#fff', + colorBgHeader: 'rgba(255, 255, 255, 0.6)', }, sider: { colorMenuBackground: '#fff', diff --git a/packages/layout/src/index.tsx b/packages/layout/src/index.tsx index eb77441205f6..904652dadd2a 100644 --- a/packages/layout/src/index.tsx +++ b/packages/layout/src/index.tsx @@ -1,23 +1,3 @@ -// 兼容代码----------- -import 'antd/lib/anchor/style'; -import 'antd/lib/avatar/style'; -import 'antd/lib/breadcrumb/style'; -import 'antd/lib/divider/style'; -import 'antd/lib/drawer/style'; -import 'antd/lib/layout/style'; -import 'antd/lib/list/style'; -import 'antd/lib/menu/style'; -import 'antd/lib/message/style'; -import 'antd/lib/popover/style'; -import 'antd/lib/select/style'; -import 'antd/lib/space/style'; -import 'antd/lib/spin/style'; -import 'antd/lib/switch/style'; -import 'antd/lib/tabs/style'; -import 'antd/lib/tooltip/style'; -import 'antd/lib/typography/style'; -//---------------------- - import type { AppItemProps, AppListProps, @@ -33,6 +13,8 @@ import { import type { PageHeaderProps } from './components/PageHeader'; import { PageHeader } from './components/PageHeader'; +import type { ProLayoutProps } from './ProLayout'; +import { ProLayout } from './ProLayout'; import type { FooterProps } from './components/Footer'; import { DefaultFooter } from './components/Footer'; import type { HeaderViewProps as HeaderProps } from './components/Header'; @@ -45,13 +27,9 @@ import type { import { SettingDrawer } from './components/SettingDrawer'; import type { TopNavHeaderProps } from './components/TopNavHeader'; import { TopNavHeader } from './components/TopNavHeader'; -import type { WaterMarkProps } from './components/WaterMark'; -import { WaterMark } from './components/WaterMark'; import type { RouteContextType } from './context/RouteContext'; import { RouteContext } from './context/RouteContext'; import { getPageTitle } from './getPageTitle'; -import type { ProLayoutProps } from './ProLayout'; -import { ProLayout } from './ProLayout'; import { getMenuData } from './utils/getMenuData'; export * from './components/Help'; @@ -61,8 +39,6 @@ export { DefaultFooter, DefaultHeader, FooterToolbar, - getMenuData, - getPageTitle, GridContent, PageContainer, PageHeader, @@ -73,7 +49,8 @@ export { RouteContext, SettingDrawer, TopNavHeader, - WaterMark, + getMenuData, + getPageTitle, }; export type { AppItemProps, @@ -87,7 +64,6 @@ export type { SettingDrawerProps, SettingDrawerState, TopNavHeaderProps, - WaterMarkProps, }; export default ProLayout; diff --git a/packages/layout/src/style/index.ts b/packages/layout/src/style/index.ts index d73a5cdb2eb4..36b989e4c4a0 100644 --- a/packages/layout/src/style/index.ts +++ b/packages/layout/src/style/index.ts @@ -1,224 +1,10 @@ -import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider'; +import type { CSSInterpolation } from '@ant-design/cssinjs'; +import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider'; import { useStyle as useAntdStyle } from '@ant-design/pro-provider'; -import { version } from 'antd'; - export interface ProLayoutToken extends ProAliasToken { componentCls: string; } -const getVersion = () => { - if (typeof process === 'undefined') return version; - return process?.env?.ANTD_VERSION || version; -}; - -/** - * 主要区别： - * 需要手动引入 import 'antd/dist/antd.css'; - * 需要重置 menu 的样式 - * @param token - * @returns - */ -const compatibleStyle: GenerateStyle = (token) => { - if (getVersion()?.startsWith('5')) { - return {}; - } - return { - [token.componentCls]: { - width: '100%', - height: '100%', - [`${token.proComponentsCls}-base-menu`]: { - color: token.layout?.sider?.colorTextMenu, - [`${token.antCls}-menu-sub`]: { - backgroundColor: 'transparent!important', - color: token.layout?.sider?.colorTextMenu, - }, - [`& ${token.antCls}-layout`]: { - backgroundColor: 'transparent', - width: '100%', - }, - [`${token.antCls}-menu-submenu-expand-icon, ${token.antCls}-menu-submenu-arrow`]: - { - color: 'inherit', - }, - [`&${token.antCls}-menu`]: { - color: token.layout?.sider?.colorTextMenu, - [`${token.antCls}-menu-item`]: { - '*': { - transition: 'none !important', - }, - }, - [`${token.antCls}-menu-item a`]: { - color: 'inherit', - }, - }, - [`&${token.antCls}-menu-inline`]: { - [`${token.antCls}-menu-selected::after,${token.antCls}-menu-item-selected::after`]: - { - display: 'none', - }, - }, - [`${token.antCls}-menu-sub ${token.antCls}-menu-inline`]: { - backgroundColor: 'transparent!important', - }, - [`${token.antCls}-menu-item:active, - ${token.antCls}-menu-submenu-title:active`]: { - backgroundColor: 'transparent!important', - }, - [`&${token.antCls}-menu-light`]: { - [`${token.antCls}-menu-item:hover, - ${token.antCls}-menu-item-active, - ${token.antCls}-menu-submenu-active, - ${token.antCls}-menu-submenu-title:hover`]: { - color: token.layout?.sider?.colorTextMenuActive, - borderRadius: token.borderRadius, - [`${token.antCls}-menu-submenu-arrow`]: { - color: token.layout?.sider?.colorTextMenuActive, - }, - }, - }, - [`&${token.antCls}-menu:not(${token.antCls}-menu-horizontal)`]: { - [`${token.antCls}-menu-item-selected`]: { - backgroundColor: token.layout?.sider?.colorBgMenuItemSelected, - borderRadius: token.borderRadius, - }, - [`${token.antCls}-menu-item:hover, - ${token.antCls}-menu-item-active, - ${token.antCls}-menu-submenu-title:hover`]: { - color: token.layout?.sider?.colorTextMenuActive, - borderRadius: token.borderRadius, - backgroundColor: `${token.layout?.header?.colorBgMenuItemHover} !important`, - [`${token.antCls}-menu-submenu-arrow`]: { - color: token.layout?.sider?.colorTextMenuActive, - }, - }, - }, - [`${token.antCls}-menu-item-selected`]: { - color: token.layout?.sider?.colorTextMenuSelected, - }, - [`${token.antCls}-menu-submenu-selected`]: { - color: token.layout?.sider?.colorTextMenuSelected, - }, - [`&${token.antCls}-menu:not(${token.antCls}-menu-inline) ${token.antCls}-menu-submenu-open`]: - { - color: token.layout?.sider?.colorTextMenuSelected, - }, - - [`&${token.antCls}-menu-vertical`]: { - [`${token.antCls}-menu-submenu-selected`]: { - borderRadius: token.borderRadius, - color: token.layout?.sider?.colorTextMenuSelected, - }, - }, - - [`${token.antCls}-menu-submenu:hover > ${token.antCls}-menu-submenu-title > ${token.antCls}-menu-submenu-arrow`]: - { - color: token.layout?.sider?.colorTextMenuActive, - }, - - [`&${token.antCls}-menu-horizontal`]: { - [`${token.antCls}-menu-item:hover, - ${token.antCls}-menu-submenu:hover, - ${token.antCls}-menu-item-active, - ${token.antCls}-menu-submenu-active`]: { - borderRadius: 4, - transition: 'none', - color: token.layout?.header?.colorTextMenuActive, - backgroundColor: `${token.layout?.header?.colorBgMenuItemHover} !important`, - }, - - [`${token.antCls}-menu-item-open, - ${token.antCls}-menu-submenu-open, - ${token.antCls}-menu-item-selected, - ${token.antCls}-menu-submenu-selected`]: { - backgroundColor: token.layout?.header?.colorBgMenuItemSelected, - borderRadius: token.borderRadius, - transition: 'none', - color: `${token.layout?.header?.colorTextMenuSelected} !important`, - [`${token.antCls}-menu-submenu-arrow`]: { - color: `${token.layout?.header?.colorTextMenuSelected} !important`, - }, - }, - [`> ${token.antCls}-menu-item, > ${token.antCls}-menu-submenu`]: { - paddingInline: 16, - marginInline: 4, - }, - [`> ${token.antCls}-menu-item::after, > ${token.antCls}-menu-submenu::after`]: - { - display: 'none', - }, - }, - }, - - [`${token.proComponentsCls}-top-nav-header-base-menu`]: { - [`&${token.antCls}-menu`]: { - color: token.layout?.header?.colorTextMenu, - [`${token.antCls}-menu-item a`]: { - color: 'inherit', - }, - }, - [`&${token.antCls}-menu-light`]: { - [`${token.antCls}-menu-item:hover, - ${token.antCls}-menu-item-active, - ${token.antCls}-menu-submenu-active, - ${token.antCls}-menu-submenu-title:hover`]: { - color: token.layout?.header?.colorTextMenuActive, - borderRadius: token.borderRadius, - transition: 'none', - backgroundColor: token.layout?.header?.colorBgMenuItemSelected, - [`${token.antCls}-menu-submenu-arrow`]: { - color: token.layout?.header?.colorTextMenuActive, - }, - }, - - [`${token.antCls}-menu-item-selected`]: { - color: token.layout?.header?.colorTextMenuSelected, - borderRadius: token.borderRadius, - backgroundColor: token.layout?.header?.colorBgMenuItemSelected, - }, - }, - }, - }, - [`${token.antCls}-menu-sub${token.antCls}-menu-inline`]: { - backgroundColor: 'transparent!important', - }, - [`${token.antCls}-menu-submenu-popup`]: { - backgroundColor: 'rgba(255, 255, 255, 0.42)', - '-webkit-backdrop-filter': 'blur(8px)', - backdropFilter: 'blur(8px)', - [`${token.antCls}-menu`]: { - background: 'transparent !important', - backgroundColor: 'transparent !important', - [`${token.antCls}-menu-item:active, - ${token.antCls}-menu-submenu-title:active`]: { - backgroundColor: 'transparent!important', - }, - }, - [`${token.antCls}-menu-item-selected`]: { - color: token.layout?.sider?.colorTextMenuSelected, - }, - [`${token.antCls}-menu-submenu-selected`]: { - color: token.layout?.sider?.colorTextMenuSelected, - }, - [`${token.antCls}-menu:not(${token.antCls}-menu-horizontal)`]: { - [`${token.antCls}-menu-item-selected`]: { - backgroundColor: 'rgba(0, 0, 0, 0.04)', - borderRadius: token.borderRadius, - color: token.layout?.sider?.colorTextMenuSelected, - }, - [`${token.antCls}-menu-item:hover, - ${token.antCls}-menu-item-active, - ${token.antCls}-menu-submenu-title:hover`]: { - color: token.layout?.sider?.colorTextMenuActive, - borderRadius: token.borderRadius, - [`${token.antCls}-menu-submenu-arrow`]: { - color: token.layout?.sider?.colorTextMenuActive, - }, - }, - }, - }, - }; -}; - const genProLayoutStyle: GenerateStyle = (token) => { return { [`${token.antCls}-layout`]: { @@ -265,7 +51,7 @@ const genProLayoutStyle: GenerateStyle = (token) => { background: token.layout?.bgLayout, }, }, - }; + } as CSSInterpolation; }; export function useStyle(prefixCls: string) { @@ -275,6 +61,6 @@ export function useStyle(prefixCls: string) { componentCls: `.${prefixCls}`, } as ProLayoutToken; - return [genProLayoutStyle(proLayoutToken), compatibleStyle(proLayoutToken)]; + return [genProLayoutStyle(proLayoutToken)]; }); } diff --git a/packages/layout/src/utils/getBreadcrumbProps.tsx b/packages/layout/src/utils/getBreadcrumbProps.tsx index 27115adbe13f..e71f4b756a4a 100644 --- a/packages/layout/src/utils/getBreadcrumbProps.tsx +++ b/packages/layout/src/utils/getBreadcrumbProps.tsx @@ -1,10 +1,8 @@ -import { compareVersions } from '@ant-design/pro-utils'; import type { BreadcrumbProps } from 'antd'; -import { version } from 'antd'; import type { BreadcrumbItemType, ItemType, -} from 'antd/lib/breadcrumb/Breadcrumb'; +} from 'antd/es/breadcrumb/Breadcrumb'; import type H from 'history'; import { match } from 'path-to-regexp'; import type { ProLayoutProps } from '../ProLayout'; @@ -12,11 +10,6 @@ import type { ProSettings } from '../defaultSettings'; import type { MenuDataItem, MessageDescriptor, WithFalse } from '../typing'; import { urlToList } from './pathTools'; -export const getVersion = () => { - if (typeof process === 'undefined') return version; - return process?.env?.ANTD_VERSION || version; -}; - export type BreadcrumbProLayoutProps = { breadcrumbList?: { title: string; href: string }[]; home?: string; @@ -192,13 +185,8 @@ export const getBreadcrumbProps = ( items = undefined; } // 如果当前 ant design 包的版本大于等于5.3.0，则返回一个对象{items,itemRender},否则返回一个对象{routes:item,itemRender} - return compareVersions(getVersion(), '5.3.0') > -1 - ? ({ - items, - itemRender, - } as BreadcrumbListReturn) - : ({ - routes: items, - itemRender, - } as unknown as BreadcrumbListReturn); + return { + items, + itemRender, + } as BreadcrumbListReturn; }; diff --git a/packages/layout/src/utils/utils.ts b/packages/layout/src/utils/utils.ts index 315326c6758f..e0e77504f679 100644 --- a/packages/layout/src/utils/utils.ts +++ b/packages/layout/src/utils/utils.ts @@ -5,9 +5,9 @@ export const getOpenKeysFromMenuData = (menuData?: MenuDataItem[]) => { if (item.key) { pre.push(item.key); } - if (item.children || item.routes) { + if (item.children) { const newArray: string[] = pre.concat( - getOpenKeysFromMenuData(item.children || item.routes) || [], + getOpenKeysFromMenuData(item.children) || [], ); return newArray; } @@ -40,9 +40,6 @@ export function clearMenuItem(menusData: MenuDataItem[]): MenuDataItem[] { .map((item) => { const children: MenuDataItem[] = item.children || []; const finalItem = { ...item }; - if (!finalItem.children && finalItem.routes) { - finalItem.children = finalItem.routes; - } if (!finalItem.name || finalItem.hideInMenu) { return null; } @@ -59,7 +56,6 @@ export function clearMenuItem(menusData: MenuDataItem[]): MenuDataItem[] { // children 为空就直接删掉 delete finalItem.children; } - delete finalItem.routes; return finalItem; }) .filter((item) => item) as MenuDataItem[]; diff --git a/packages/layout/tsconfig.json b/packages/layout/tsconfig.json deleted file mode 100644 index 2e63377b8e12..000000000000 --- a/packages/layout/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "paths": { - "@ant-design/pro-provider": ["../../packages/provider/src/index.tsx"], - "@ant-design/pro-components": ["../../packages/components/src/index.tsx"], - "@ant-design/pro-utils": ["../../packages/utils/src/index.tsx"] - } - }, - "include": ["./src"] -} diff --git a/packages/list/CHANGELOG.md b/packages/list/CHANGELOG.md index 4378af52ad0a..913fafdfcae1 100644 --- a/packages/list/CHANGELOG.md +++ b/packages/list/CHANGELOG.md @@ -349,7 +349,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes -- **list:** Extend ProListMeta type with `renderFormItem` ([#7136](https://github.com/ant-design/pro-components/issues/7136)) ([39ab5ef](https://github.com/ant-design/pro-components/commit/39ab5efa787ebda9acc1b693fed7e73cdd1b8f78)) +- **list:** Extend ProListMeta type with `formItemRender` ([#7136](https://github.com/ant-design/pro-components/issues/7136)) ([39ab5ef](https://github.com/ant-design/pro-components/commit/39ab5efa787ebda9acc1b693fed7e73cdd1b8f78)) - fix test case ([ab24418](https://github.com/ant-design/pro-components/commit/ab24418993d468b63f2711f21aae9ff58f91f191)) ### Features diff --git a/packages/list/package.json b/packages/list/package.json index 01be360c3ca0..47ba4193181d 100644 --- a/packages/list/package.json +++ b/packages/list/package.json @@ -47,7 +47,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0", "react-dom": ">=17.0.0" }, diff --git a/packages/list/src/Item.tsx b/packages/list/src/Item.tsx index 0a2e69d693cf..b33aecb688e5 100644 --- a/packages/list/src/Item.tsx +++ b/packages/list/src/Item.tsx @@ -4,10 +4,10 @@ import { CheckCard } from '@ant-design/pro-card'; import { ProProvider } from '@ant-design/pro-provider'; import { ConfigProvider, List, Skeleton } from 'antd'; -import type { ListGridType } from 'antd/lib/list'; -import type { ExpandableConfig } from 'antd/lib/table/interface'; +import type { ListGridType } from 'antd/es/list'; +import type { ExpandableConfig } from 'antd/es/table/interface'; import classNames from 'classnames'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React, { useContext, useMemo } from 'react'; import type { GetComponentProps } from './index'; diff --git a/packages/list/src/ListView.tsx b/packages/list/src/ListView.tsx index a3d69f5e0854..7a4595411e1e 100644 --- a/packages/list/src/ListView.tsx +++ b/packages/list/src/ListView.tsx @@ -7,22 +7,21 @@ import type { TablePaginationConfig, TableProps, } from 'antd'; -import { ConfigProvider, List, version } from 'antd'; -import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap'; -import usePagination from 'antd/lib/table/hooks/usePagination'; -import useSelection from 'antd/lib/table/hooks/useSelection'; -import type { GetRowKey, TableRowSelection } from 'antd/lib/table/interface'; +import { ConfigProvider, List } from 'antd'; +import useLazyKVMap from 'antd/es/table/hooks/useLazyKVMap'; +import usePagination from 'antd/es/table/hooks/usePagination'; +import useSelection from 'antd/es/table/hooks/useSelection'; +import type { GetRowKey, TableRowSelection } from 'antd/es/table/interface'; import classNames from 'classnames'; -import get from 'rc-util/lib/utils/get'; +import get from 'rc-util/es/utils/get'; import React, { useContext } from 'react'; import type { ItemProps } from './Item'; import ProListItem from './Item'; import { PRO_LIST_KEYS_MAP } from './constants'; import type { GetComponentProps } from './index'; -import { compareVersions } from '@ant-design/pro-utils'; import type { AnyObject } from 'antd/es/_util/type'; -import type { PaginationConfig } from 'antd/lib/pagination'; +import type { PaginationConfig } from 'antd/es/pagination'; type AntdListProps = Omit, 'rowKey'>; type Key = React.Key; @@ -105,8 +104,7 @@ function ListView( onChange: (current: number, pageSize: number) => void, pagination?: TablePaginationConfig | false, ]; - // 兼容 5.2.0 以下的版本 - if (compareVersions(version, '5.3.0') < 0) usePaginationArgs.reverse(); + // 合并分页的的配置，这里是为了兼容 antd 的分页 const [mergedPagination] = usePagination( dataSource.length, @@ -148,8 +146,6 @@ function ListView( // 这个 API 用的不好，先 any 一下 ] as [any, TableRowSelection]; - // 兼容 5.2.0 以下的版本 - if (compareVersions(version, '5.3.0') < 0) useSelectionArgs.reverse(); const [selectItemRender, selectedKeySet] = useSelection(...useSelectionArgs); // 提供和 Table 一样的 expand 支持 diff --git a/packages/list/src/demos/size.tsx b/packages/list/src/demos/size.tsx index 0c568ab5a786..42af85b2d4d6 100644 --- a/packages/list/src/demos/size.tsx +++ b/packages/list/src/demos/size.tsx @@ -48,7 +48,7 @@ export default () => { value: selectSize, label: selectSize, }))} - />{' '} + /> 分割线： value={split} @@ -63,7 +63,7 @@ export default () => { label: '无', }, ]} - />{' '} + />

    diff --git a/packages/list/src/index.tsx b/packages/list/src/index.tsx index e9a23edbb774..d80ffd9c8fab 100644 --- a/packages/list/src/index.tsx +++ b/packages/list/src/index.tsx @@ -8,16 +8,13 @@ import type { import ProTable from '@ant-design/pro-table'; import type { ListProps, PaginationProps } from 'antd'; import { ConfigProvider } from 'antd'; -import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel'; +import type { LabelTooltipType } from 'antd/es/form/FormItemLabel'; import classNames from 'classnames'; import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react'; import type { ItemProps } from './Item'; import ListView from './ListView'; import { useStyle } from './style/index'; -// 兼容性代码 -import 'antd/lib/list/style'; - export type AntdListProps = Omit, 'rowKey'>; export type ProListMeta = Pick< @@ -31,7 +28,7 @@ export type ProListMeta = Pick< | 'editable' | 'fieldProps' | 'formItemProps' - | 'renderFormItem' + | 'formItemRender' > & { key?: React.Key; }; diff --git a/packages/list/tsconfig.json b/packages/list/tsconfig.json deleted file mode 100644 index b21fe0b0bab4..000000000000 --- a/packages/list/tsconfig.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "paths": { - "@ant-design/pro-layout": ["../../packages/layout/src/index.tsx"], - "@ant-design/pro-form": ["../../packages/form/src/index.tsx"], - "@ant-design/pro-table": ["../../packages/table/src/index.tsx"], - "@ant-design/pro-field": ["../../packages/field/src/index.tsx"], - "@ant-design/pro-skeleton": ["../../packages/skeleton/src/index.tsx"], - "@ant-design/pro-list": ["../../packages/list/src/index.tsx"], - "@ant-design/pro-provider": ["../../packages/provider/src/index.tsx"], - "@ant-design/pro-descriptions": [ - "../../packages/descriptions/src/index.tsx" - ], - "@ant-design/pro-utils": ["../../packages/utils/src/index.tsx"], - "@ant-design/pro-card": ["../../packages/card/src/index.tsx"], - "@ant-design/pro-components": ["../../packages/components/src/index.tsx"] - } - }, - "include": ["./src"] -} diff --git a/packages/provider/package.json b/packages/provider/package.json index c317b8399541..fbf960eb0f25 100644 --- a/packages/provider/package.json +++ b/packages/provider/package.json @@ -36,6 +36,7 @@ "@ant-design/cssinjs": "^1.11.1", "@babel/runtime": "^7.18.0", "@ctrl/tinycolor": "^3.4.0", + "dayjs": "^1.11.12", "rc-util": "^5.0.1", "swr": "^2.0.0" }, @@ -43,7 +44,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0", "react-dom": ">=17.0.0" }, diff --git a/packages/provider/src/index.tsx b/packages/provider/src/index.tsx index 16a9905025bd..b467a3f8cb35 100644 --- a/packages/provider/src/index.tsx +++ b/packages/provider/src/index.tsx @@ -1,8 +1,8 @@ import type { Theme } from '@ant-design/cssinjs'; import { useCacheToken } from '@ant-design/cssinjs'; -import { ConfigProvider as AntdConfigProvider } from 'antd'; +import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from 'antd'; -import zh_CN from 'antd/lib/locale/zh_CN'; +import zh_CN from 'antd/es/locale/zh_CN'; import React, { useContext, useEffect, useMemo } from 'react'; import { SWRConfig, useSWRConfig } from 'swr'; import type { IntlType } from './intl'; @@ -12,8 +12,6 @@ import dayjs from 'dayjs'; import type { DeepPartial, ProTokenType } from './typing/layoutToken'; import { getLayoutDesignToken } from './typing/layoutToken'; import type { ProAliasToken } from './useStyle'; -import { proTheme } from './useStyle'; -import { defaultToken, emptyTheme } from './useStyle/token'; import { merge } from './utils/merge'; import 'dayjs/locale/zh-cn'; @@ -151,7 +149,7 @@ export type ProRenderFieldPropsType = { * @params dom 默认的 dom * @return 返回一个用于编辑的dom */ - renderFormItem?: + formItemRender?: | (( text: any, props: ProFieldFCRenderProps, @@ -172,7 +170,6 @@ export type ConfigContextPropsType = { hashId?: string; hashed?: boolean; dark?: boolean; - theme?: Theme; }; /* Creating a context object with the default values. */ @@ -182,10 +179,14 @@ const ProConfigContext = React.createContext({ locale: 'default', }, valueTypeMap: {}, - theme: emptyTheme, hashed: true, dark: false, - token: defaultToken as ProAliasToken, + token: { + ...antdTheme.getDesignToken(), + proComponentsCls: '.ant-pro', + antCls: '.ant', + themeId: 0, + }, }); export const { Consumer: ConfigConsumer } = ProConfigContext; @@ -236,7 +237,7 @@ const ConfigProviderContainer: React.FC<{ const { locale, getPrefixCls, ...restConfig } = useContext( AntdConfigProvider.ConfigContext, ); - const tokenContext = proTheme.useToken?.(); + const tokenContext = antdTheme.useToken?.(); const proProvide = useContext(ProConfigContext); /** @@ -256,10 +257,7 @@ const ConfigProviderContainer: React.FC<{ * 合并一下token，不然导致嵌套 token 失效 */ const proLayoutTokenMerge = useMemo(() => { - return getLayoutDesignToken( - propsToken || {}, - tokenContext.token || defaultToken, - ); + return getLayoutDesignToken(propsToken || {}, tokenContext.token); }, [propsToken, tokenContext.token]); const proProvideValue = useMemo(() => { @@ -426,10 +424,10 @@ export const ProConfigProvider: React.FC<{ const mergeAlgorithm = () => { const isDark = dark ?? proProvide.dark; if (isDark && !Array.isArray(theme?.algorithm)) { - return [proTheme.darkAlgorithm, theme?.algorithm].filter(Boolean); + return [antdTheme.darkAlgorithm, theme?.algorithm].filter(Boolean); } if (isDark && Array.isArray(theme?.algorithm)) { - return [proTheme.darkAlgorithm, ...(theme?.algorithm || [])].filter( + return [antdTheme.darkAlgorithm, ...(theme?.algorithm || [])].filter( Boolean, ); } diff --git a/packages/provider/src/typing/layoutToken.ts b/packages/provider/src/typing/layoutToken.ts index a8c23faf2523..c09e53bf143a 100644 --- a/packages/provider/src/typing/layoutToken.ts +++ b/packages/provider/src/typing/layoutToken.ts @@ -18,7 +18,8 @@ export type BaseLayoutDesignToken = { /** * layout 的背景颜色 */ - bgLayout: string; + bgLayout: string | null; + /** * 侧边side的 token 配置 */ @@ -111,6 +112,7 @@ export const getLayoutDesignToken: ( antdToken: Record, ) => LayoutDesignToken = (designTokens, antdToken) => { const finalDesignTokens = { ...designTokens }; + const defaultColorBgHeader = setAlpha(antdToken.colorBgElevated, 0.6); return { bgLayout: `linear-gradient(${antdToken.colorBgContainer}, ${antdToken.colorBgLayout} 28%)`, @@ -120,13 +122,14 @@ export const getLayoutDesignToken: ( colorTextAppListIconHover: antdToken.colorTextBase, ...finalDesignTokens, header: { - colorBgHeader: setAlpha(antdToken.colorBgElevated, 0.6), + colorBgHeader: defaultColorBgHeader, colorBgScrollHeader: setAlpha(antdToken.colorBgElevated, 0.8), colorHeaderTitle: antdToken.colorText, colorBgMenuItemHover: setAlpha(antdToken.colorTextBase, 0.03), colorBgMenuItemSelected: 'transparent', colorBgMenuElevated: - finalDesignTokens?.header?.colorBgHeader !== 'rgba(255, 255, 255, 0.6)' + (finalDesignTokens?.header?.colorBgHeader ?? defaultColorBgHeader) !== + defaultColorBgHeader ? finalDesignTokens.header?.colorBgHeader : antdToken.colorBgElevated, colorTextMenuSelected: setAlpha(antdToken.colorTextBase, 0.95), diff --git a/packages/provider/src/useStyle/index.ts b/packages/provider/src/useStyle/index.ts index 069304026689..48d0bab8128f 100644 --- a/packages/provider/src/useStyle/index.ts +++ b/packages/provider/src/useStyle/index.ts @@ -2,13 +2,12 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import { useStyleRegister } from '@ant-design/cssinjs'; import { TinyColor } from '@ctrl/tinycolor'; -import { ConfigProvider as AntdConfigProvider, theme } from 'antd'; -import type { GlobalToken } from 'antd/lib/theme/interface'; +import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from 'antd'; +import type { GlobalToken } from 'antd/es/theme/interface'; import type React from 'react'; import { useContext } from 'react'; import { ProProvider } from '../index'; import type { ProTokenType } from '../typing/layoutToken'; -import * as batToken from './token'; /** * 把一个颜色设置一下透明度 @@ -37,14 +36,7 @@ export type GenerateStyle< ReturnType = CSSInterpolation, > = (token: ComponentToken, ...rest: any[]) => ReturnType; -const genTheme = (): any => { - if (typeof theme === 'undefined' || !theme) return batToken as any; - return theme; -}; - -export const proTheme = genTheme() as typeof theme; - -export const useToken = proTheme.useToken; +export const proTheme = antdTheme as typeof antdTheme; export type UseStyleResult = { wrapSSR: (node: React.ReactElement) => React.ReactElement; @@ -105,13 +97,11 @@ export function useStyle( componentName: string, styleFn: (token: ProAliasToken) => CSSInterpolation, ) { - let { token = {} as Record as ProAliasToken } = + // eslint-disable-next-line prefer-const + let { token = {} as Record as ProAliasToken, hashed } = useContext(ProProvider); - const { hashed } = useContext(ProProvider); - - const { token: antdToken, hashId } = useToken(); - const { theme: provideTheme } = useContext(ProProvider); + const { token: antdToken, hashId, theme } = antdTheme.useToken(); const { getPrefixCls } = useContext(AntdConfigProvider.ConfigContext); @@ -125,7 +115,7 @@ export function useStyle( return { wrapSSR: useStyleRegister( { - theme: provideTheme!, + theme, token, path: [componentName], }, diff --git a/packages/provider/src/useStyle/token.ts b/packages/provider/src/useStyle/token.ts deleted file mode 100644 index dea376cfe835..000000000000 --- a/packages/provider/src/useStyle/token.ts +++ /dev/null @@ -1,412 +0,0 @@ -import { createTheme } from '@ant-design/cssinjs'; - -import { theme } from 'antd'; -import type { GlobalToken } from 'antd/lib/theme/interface'; - -export const defaultToken = { - blue: '#1677ff', - purple: '#722ED1', - cyan: '#13C2C2', - green: '#52C41A', - magenta: '#EB2F96', - pink: '#eb2f96', - red: '#F5222D', - orange: '#FA8C16', - yellow: '#FADB14', - volcano: '#FA541C', - geekblue: '#2F54EB', - gold: '#FAAD14', - lime: '#A0D911', - colorPrimary: '#1677ff', - colorSuccess: '#52c41a', - colorWarning: '#faad14', - colorError: '#ff7875', - colorInfo: '#1677ff', - colorTextBase: '#000', - colorBgBase: '#fff', - fontFamily: - "-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'", - fontSize: 14, - lineWidth: 1, - lineType: 'solid', - motionUnit: 0.1, - motionBase: 0, - motionEaseOutCirc: 'cubic-bezier(0.08, 0.82, 0.17, 1)', - motionEaseInOutCirc: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)', - motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)', - motionEaseInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)', - motionEaseOutBack: 'cubic-bezier(0.12, 0.4, 0.29, 1.46)', - motionEaseInQuint: 'cubic-bezier(0.645, 0.045, 0.355, 1)', - motionEaseOutQuint: 'cubic-bezier(0.23, 1, 0.32, 1)', - borderRadius: 4, - sizeUnit: 4, - sizeStep: 4, - sizePopupArrow: 16, - controlHeight: 32, - zIndexBase: 0, - zIndexPopupBase: 1000, - opacityImage: 1, - wireframe: false, - 'blue-1': '#e6f4ff', - 'blue-2': '#bae0ff', - 'blue-3': '#91caff', - 'blue-4': '#69b1ff', - 'blue-5': '#4096ff', - 'blue-6': '#1677ff', - 'blue-7': '#0958d9', - 'blue-8': '#003eb3', - 'blue-9': '#002c8c', - 'blue-10': '#001d66', - 'purple-1': '#f9f0ff', - 'purple-2': '#efdbff', - 'purple-3': '#d3adf7', - 'purple-4': '#b37feb', - 'purple-5': '#9254de', - 'purple-6': '#722ed1', - 'purple-7': '#531dab', - 'purple-8': '#391085', - 'purple-9': '#22075e', - 'purple-10': '#120338', - 'cyan-1': '#e6fffb', - 'cyan-2': '#b5f5ec', - 'cyan-3': '#87e8de', - 'cyan-4': '#5cdbd3', - 'cyan-5': '#36cfc9', - 'cyan-6': '#13c2c2', - 'cyan-7': '#08979c', - 'cyan-8': '#006d75', - 'cyan-9': '#00474f', - 'cyan-10': '#002329', - 'green-1': '#f6ffed', - 'green-2': '#d9f7be', - 'green-3': '#b7eb8f', - 'green-4': '#95de64', - 'green-5': '#73d13d', - 'green-6': '#52c41a', - 'green-7': '#389e0d', - 'green-8': '#237804', - 'green-9': '#135200', - 'green-10': '#092b00', - 'magenta-1': '#fff0f6', - 'magenta-2': '#ffd6e7', - 'magenta-3': '#ffadd2', - 'magenta-4': '#ff85c0', - 'magenta-5': '#f759ab', - 'magenta-6': '#eb2f96', - 'magenta-7': '#c41d7f', - 'magenta-8': '#9e1068', - 'magenta-9': '#780650', - 'magenta-10': '#520339', - 'pink-1': '#fff0f6', - 'pink-2': '#ffd6e7', - 'pink-3': '#ffadd2', - 'pink-4': '#ff85c0', - 'pink-5': '#f759ab', - 'pink-6': '#eb2f96', - 'pink-7': '#c41d7f', - 'pink-8': '#9e1068', - 'pink-9': '#780650', - 'pink-10': '#520339', - 'red-1': '#fff1f0', - 'red-2': '#ffccc7', - 'red-3': '#ffa39e', - 'red-4': '#ff7875', - 'red-5': '#ff4d4f', - 'red-6': '#f5222d', - 'red-7': '#cf1322', - 'red-8': '#a8071a', - 'red-9': '#820014', - 'red-10': '#5c0011', - 'orange-1': '#fff7e6', - 'orange-2': '#ffe7ba', - 'orange-3': '#ffd591', - 'orange-4': '#ffc069', - 'orange-5': '#ffa940', - 'orange-6': '#fa8c16', - 'orange-7': '#d46b08', - 'orange-8': '#ad4e00', - 'orange-9': '#873800', - 'orange-10': '#612500', - 'yellow-1': '#feffe6', - 'yellow-2': '#ffffb8', - 'yellow-3': '#fffb8f', - 'yellow-4': '#fff566', - 'yellow-5': '#ffec3d', - 'yellow-6': '#fadb14', - 'yellow-7': '#d4b106', - 'yellow-8': '#ad8b00', - 'yellow-9': '#876800', - 'yellow-10': '#614700', - 'volcano-1': '#fff2e8', - 'volcano-2': '#ffd8bf', - 'volcano-3': '#ffbb96', - 'volcano-4': '#ff9c6e', - 'volcano-5': '#ff7a45', - 'volcano-6': '#fa541c', - 'volcano-7': '#d4380d', - 'volcano-8': '#ad2102', - 'volcano-9': '#871400', - 'volcano-10': '#610b00', - 'geekblue-1': '#f0f5ff', - 'geekblue-2': '#d6e4ff', - 'geekblue-3': '#adc6ff', - 'geekblue-4': '#85a5ff', - 'geekblue-5': '#597ef7', - 'geekblue-6': '#2f54eb', - 'geekblue-7': '#1d39c4', - 'geekblue-8': '#10239e', - 'geekblue-9': '#061178', - 'geekblue-10': '#030852', - 'gold-1': '#fffbe6', - 'gold-2': '#fff1b8', - 'gold-3': '#ffe58f', - 'gold-4': '#ffd666', - 'gold-5': '#ffc53d', - 'gold-6': '#faad14', - 'gold-7': '#d48806', - 'gold-8': '#ad6800', - 'gold-9': '#874d00', - 'gold-10': '#613400', - 'lime-1': '#fcffe6', - 'lime-2': '#f4ffb8', - 'lime-3': '#eaff8f', - 'lime-4': '#d3f261', - 'lime-5': '#bae637', - 'lime-6': '#a0d911', - 'lime-7': '#7cb305', - 'lime-8': '#5b8c00', - 'lime-9': '#3f6600', - 'lime-10': '#254000', - colorText: 'rgba(0, 0, 0, 0.88)', - colorTextSecondary: 'rgba(0, 0, 0, 0.65)', - colorTextTertiary: 'rgba(0, 0, 0, 0.45)', - colorTextQuaternary: 'rgba(0, 0, 0, 0.25)', - colorFill: 'rgba(0, 0, 0, 0.15)', - colorFillSecondary: 'rgba(0, 0, 0, 0.06)', - colorFillTertiary: 'rgba(0, 0, 0, 0.04)', - colorFillQuaternary: 'rgba(0, 0, 0, 0.02)', - colorBgLayout: 'hsl(220,23%,97%)', - colorBgContainer: '#ffffff', - colorBgElevated: '#ffffff', - colorBgSpotlight: 'rgba(0, 0, 0, 0.85)', - colorBorder: '#d9d9d9', - colorBorderSecondary: '#f0f0f0', - colorPrimaryBg: '#e6f4ff', - colorPrimaryBgHover: '#bae0ff', - colorPrimaryBorder: '#91caff', - colorPrimaryBorderHover: '#69b1ff', - colorPrimaryHover: '#4096ff', - colorPrimaryActive: '#0958d9', - colorPrimaryTextHover: '#4096ff', - colorPrimaryText: '#1677ff', - colorPrimaryTextActive: '#0958d9', - colorSuccessBg: '#f6ffed', - colorSuccessBgHover: '#d9f7be', - colorSuccessBorder: '#b7eb8f', - colorSuccessBorderHover: '#95de64', - colorSuccessHover: '#95de64', - colorSuccessActive: '#389e0d', - colorSuccessTextHover: '#73d13d', - colorSuccessText: '#52c41a', - colorSuccessTextActive: '#389e0d', - colorErrorBg: '#fff2f0', - colorErrorBgHover: '#fff1f0', - colorErrorBorder: '#ffccc7', - colorErrorBorderHover: '#ffa39e', - colorErrorHover: '#ffa39e', - colorErrorActive: '#d9363e', - colorErrorTextHover: '#ff7875', - colorErrorText: '#ff4d4f', - colorErrorTextActive: '#d9363e', - colorWarningBg: '#fffbe6', - colorWarningBgHover: '#fff1b8', - colorWarningBorder: '#ffe58f', - colorWarningBorderHover: '#ffd666', - colorWarningHover: '#ffd666', - colorWarningActive: '#d48806', - colorWarningTextHover: '#ffc53d', - colorWarningText: '#faad14', - colorWarningTextActive: '#d48806', - colorInfoBg: '#e6f4ff', - colorInfoBgHover: '#bae0ff', - colorInfoBorder: '#91caff', - colorInfoBorderHover: '#69b1ff', - colorInfoHover: '#69b1ff', - colorInfoActive: '#0958d9', - colorInfoTextHover: '#4096ff', - colorInfoText: '#1677ff', - colorInfoTextActive: '#0958d9', - colorBgMask: 'rgba(0, 0, 0, 0.45)', - colorWhite: '#fff', - sizeXXL: 48, - sizeXL: 32, - sizeLG: 24, - sizeMD: 20, - sizeMS: 16, - size: 16, - sizeSM: 12, - sizeXS: 8, - sizeXXS: 4, - controlHeightSM: 24, - controlHeightXS: 16, - controlHeightLG: 40, - motionDurationFast: '0.1s', - motionDurationMid: '0.2s', - motionDurationSlow: '0.3s', - fontSizes: [12, 14, 16, 20, 24, 30, 38, 46, 56, 68], - lineHeights: [ - 1.6666666666666667, 1.5714285714285714, 1.5, 1.4, 1.3333333333333333, - 1.2666666666666666, 1.2105263157894737, 1.173913043478261, - 1.1428571428571428, 1.1176470588235294, - ], - lineWidthBold: 2, - borderRadiusXS: 1, - borderRadiusSM: 4, - borderRadiusLG: 8, - borderRadiusOuter: 4, - colorLink: '#1677ff', - colorLinkHover: '#69b1ff', - colorLinkActive: '#0958d9', - colorFillContent: 'rgba(0, 0, 0, 0.06)', - colorFillContentHover: 'rgba(0, 0, 0, 0.15)', - colorFillAlter: 'rgba(0, 0, 0, 0.02)', - colorBgContainerDisabled: 'rgba(0, 0, 0, 0.04)', - colorBorderBg: '#ffffff', - colorSplit: 'rgba(5, 5, 5, 0.06)', - colorTextPlaceholder: 'rgba(0, 0, 0, 0.25)', - colorTextDisabled: 'rgba(0, 0, 0, 0.25)', - colorTextHeading: 'rgba(0, 0, 0, 0.88)', - colorTextLabel: 'rgba(0, 0, 0, 0.65)', - colorTextDescription: 'rgba(0, 0, 0, 0.45)', - colorTextLightSolid: '#fff', - colorHighlight: '#ff7875', - colorBgTextHover: 'rgba(0, 0, 0, 0.06)', - colorBgTextActive: 'rgba(0, 0, 0, 0.15)', - colorIcon: 'rgba(0, 0, 0, 0.45)', - colorIconHover: 'rgba(0, 0, 0, 0.88)', - colorErrorOutline: 'rgba(255, 38, 5, 0.06)', - colorWarningOutline: 'rgba(255, 215, 5, 0.1)', - fontSizeSM: 12, - fontSizeLG: 16, - fontSizeXL: 20, - fontSizeHeading1: 38, - fontSizeHeading2: 30, - fontSizeHeading3: 24, - fontSizeHeading4: 20, - fontSizeHeading5: 16, - fontSizeIcon: 12, - lineHeight: 1.5714285714285714, - lineHeightLG: 1.5, - lineHeightSM: 1.6666666666666667, - lineHeightHeading1: 1.2105263157894737, - lineHeightHeading2: 1.2666666666666666, - lineHeightHeading3: 1.3333333333333333, - lineHeightHeading4: 1.4, - lineHeightHeading5: 1.5, - controlOutlineWidth: 2, - controlInteractiveSize: 16, - controlItemBgHover: 'rgba(0, 0, 0, 0.04)', - controlItemBgActive: '#e6f4ff', - controlItemBgActiveHover: '#bae0ff', - controlItemBgActiveDisabled: 'rgba(0, 0, 0, 0.15)', - controlTmpOutline: 'rgba(0, 0, 0, 0.02)', - controlOutline: 'rgba(5, 145, 255, 0.1)', - fontWeightStrong: 600, - opacityLoading: 0.65, - linkDecoration: 'none', - linkHoverDecoration: 'none', - linkFocusDecoration: 'none', - controlPaddingHorizontal: 12, - controlPaddingHorizontalSM: 8, - paddingXXS: 4, - paddingXS: 8, - paddingSM: 12, - padding: 16, - paddingMD: 20, - paddingLG: 24, - paddingXL: 32, - paddingContentHorizontalLG: 24, - paddingContentVerticalLG: 16, - paddingContentHorizontal: 16, - paddingContentVertical: 12, - paddingContentHorizontalSM: 16, - paddingContentVerticalSM: 8, - marginXXS: 4, - marginXS: 8, - marginSM: 12, - margin: 16, - marginMD: 20, - marginLG: 24, - marginXL: 32, - marginXXL: 48, - boxShadow: - '0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)', - boxShadowSecondary: - '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)', - screenXS: 480, - screenXSMin: 480, - screenXSMax: 479, - screenSM: 576, - screenSMMin: 576, - screenSMMax: 575, - screenMD: 768, - screenMDMin: 768, - screenMDMax: 767, - screenLG: 992, - screenLGMin: 992, - screenLGMax: 991, - screenXL: 1200, - screenXLMin: 1200, - screenXLMax: 1199, - screenXXL: 1600, - screenXXLMin: 1600, - screenXXLMax: 1599, - boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)', - boxShadowCard: - '0 1px 2px -2px rgba(0, 0, 0, 0.16),0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', - boxShadowDrawerRight: - '-6px 0 16px 0 rgba(0, 0, 0, 0.08),-3px 0 6px -4px rgba(0, 0, 0, 0.12),-9px 0 28px 8px rgba(0, 0, 0, 0.05)', - boxShadowDrawerLeft: - '6px 0 16px 0 rgba(0, 0, 0, 0.08),3px 0 6px -4px rgba(0, 0, 0, 0.12),9px 0 28px 8px rgba(0, 0, 0, 0.05)', - boxShadowDrawerUp: - '0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)', - boxShadowDrawerDown: - '0 -6px 16px 0 rgba(0, 0, 0, 0.08),0 -3px 6px -4px rgba(0, 0, 0, 0.12),0 -9px 28px 8px rgba(0, 0, 0, 0.05)', - boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)', - boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)', - boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)', - boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)', - _tokenKey: '19w80ff', - _hashId: 'css-dev-only-do-not-override-i2zu9q', -} as any as GlobalToken; - -export const hashCode = (str: string, seed = 1) => { - let h1 = 0xdeadbeef ^ seed, - h2 = 0x41c6ce57 ^ seed; - for (let i = 0, ch; i < str.length; i++) { - ch = str.charCodeAt(i); - h1 = Math.imul(h1 ^ ch, 2654435761); - h2 = Math.imul(h2 ^ ch, 1597334677); - } - h1 = - Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ - Math.imul(h2 ^ (h2 >>> 13), 3266489909); - h2 = - Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ - Math.imul(h1 ^ (h1 >>> 13), 3266489909); - return 4294967296 * (2097151 & h2) + (h1 >>> 0); -}; - -// @ts-ignore -export const emptyTheme = createTheme((token) => token); - -export const token = { - theme: emptyTheme, - token: { - ...defaultToken, - ...(theme?.defaultAlgorithm?.(theme?.defaultSeed) as any), - } as GlobalToken, - hashId: `pro-${hashCode(JSON.stringify(defaultToken))}`, -}; - -export const useToken = () => token; diff --git a/packages/provider/tsconfig.json b/packages/provider/tsconfig.json deleted file mode 100644 index b07a8b978589..000000000000 --- a/packages/provider/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true - }, - "include": ["./src"] -} diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json index 0dea963d1168..fca2de934576 100644 --- a/packages/skeleton/package.json +++ b/packages/skeleton/package.json @@ -40,7 +40,7 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", + "antd": "^5.11.2", "react": ">=17.0.0", "react-dom": ">=17.0.0" }, diff --git a/packages/skeleton/src/components/List/index.tsx b/packages/skeleton/src/components/List/index.tsx index 64638a9f2cbc..aba7b4eb82d0 100644 --- a/packages/skeleton/src/components/List/index.tsx +++ b/packages/skeleton/src/components/List/index.tsx @@ -108,7 +108,6 @@ export const ListSkeletonItem: React.FC<{ active: boolean }> = ({ active }) => ( <> ; | statistic | number of statistic skeleton screens | `number` \| `false` | - | | list | skeleton screen of the list, you can control the number | `number` \| `false` | - | | toolbar | Action bar skeleton screen of the list | boolean | - | -| renderFormItem | Customize the dom performance under `mode=update or edit`, generally used to render edit boxes | - | - | +| formItemRender | Customize the dom performance under `mode=update or edit`, generally used to render edit boxes | - | - | | render | Customize the dom performance under `mode=read`, which is just a simple form of expression | - | - | diff --git a/packages/skeleton/src/components/skeleton.md b/packages/skeleton/src/components/skeleton.md index 1f408ec3ee87..3730a00714c7 100644 --- a/packages/skeleton/src/components/skeleton.md +++ b/packages/skeleton/src/components/skeleton.md @@ -37,5 +37,5 @@ return ; | statistic | 统计信息骨架屏的数量 | `number` \| `false` | - | | list | 列表的骨架屏，可以控制数量 | `number` \| `false` | - | | toolbar | 列表的操作栏骨架屏 | boolean | - | -| renderFormItem | 自定义 `mode=update 或 edit` 下的 dom 表现，一般用于渲染编辑框 | - | - | +| formItemRender | 自定义 `mode=update 或 edit` 下的 dom 表现，一般用于渲染编辑框 | - | - | | render | 自定义 `mode=read` 下的 dom 表现，只是单纯的表现形式 | - | - | diff --git a/packages/skeleton/src/index.tsx b/packages/skeleton/src/index.tsx index c61da7a45480..8819718b6e39 100644 --- a/packages/skeleton/src/index.tsx +++ b/packages/skeleton/src/index.tsx @@ -1,4 +1,3 @@ -import 'antd/lib/skeleton/style'; import React from 'react'; import type { DescriptionsPageSkeletonProps } from './components/Descriptions'; import DescriptionsPageSkeleton, { diff --git a/packages/skeleton/tsconfig.json b/packages/skeleton/tsconfig.json deleted file mode 100644 index b07a8b978589..000000000000 --- a/packages/skeleton/tsconfig.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "target": "esnext", - "module": "ESNext", - "moduleResolution": "node", - "jsx": "react-jsx", - "esModuleInterop": true, - "experimentalDecorators": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "declaration": true, - "skipLibCheck": true, - "resolveJsonModule": true - }, - "include": ["./src"] -} diff --git a/packages/table/CHANGELOG.md b/packages/table/CHANGELOG.md index 4761a1c3e6ed..e41d74e7ff3d 100644 --- a/packages/table/CHANGELOG.md +++ b/packages/table/CHANGELOG.md @@ -347,7 +347,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **table:** dataSource support string list ([7b81b4c](https://github.com/ant-design/pro-components/commit/7b81b4c8ae247ccc4198ef597a9ae58d83ab697a)) -- **table:** fix renderFormItem render twice render time ([c3b8ffd](https://github.com/ant-design/pro-components/commit/c3b8ffd62f2100789e749907b5aef84c6966c528)) +- **table:** fix formItemRender render twice render time ([c3b8ffd](https://github.com/ant-design/pro-components/commit/c3b8ffd62f2100789e749907b5aef84c6966c528)) - **table:** Fix the columnsSetting styling issue in controlling column state when the table header is too long ([5b746b3](https://github.com/ant-design/pro-components/commit/5b746b3cfef9a2da021d963d8c723e5a9b9b829a)) - **table:** Fix the issue of actionref not being synchronized ([2160fb8](https://github.com/ant-design/pro-components/commit/2160fb846bcfe41809a37dfe6e1cc3fce1d211e7)) - **table:** Fix the issue where align="center" is not working ([db6fc65](https://github.com/ant-design/pro-components/commit/db6fc655b9994826238bb6b63588467ff8c6a6f8)) @@ -1029,7 +1029,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Features -- **table:** renderFormItem support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) +- **table:** formItemRender support ignoreFormItem ([7aae13d](https://github.com/ant-design/pro-components/commit/7aae13d791452121eedfc38c43676fc9a0f3ba05)) ## [2.75.1](https://github.com/ant-design/pro-components/compare/@ant-design/pro-table@2.75.0...@ant-design/pro-table@2.75.1) (2022-05-20) @@ -1283,7 +1283,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **form:** fix ignoreRules no work error ([5586970](https://github.com/ant-design/pro-components/commit/558697094fc0aa39b5ac372064608cdefa239798)) -- **table:** EditableProTable 支持在 renderFormItem 中的 record 中返回用户自定义的字段 ([#4644](https://github.com/ant-design/pro-components/issues/4644)) ([488122d](https://github.com/ant-design/pro-components/commit/488122d88f031472ee0786a98b2a3dd017c5cb5b)) +- **table:** EditableProTable 支持在 formItemRender 中的 record 中返回用户自定义的字段 ([#4644](https://github.com/ant-design/pro-components/issues/4644)) ([488122d](https://github.com/ant-design/pro-components/commit/488122d88f031472ee0786a98b2a3dd017c5cb5b)) ## [2.63.6](https://github.com/ant-design/pro-components/compare/@ant-design/pro-table@2.63.5...@ant-design/pro-table@2.63.6) (2022-02-15) @@ -1769,7 +1769,7 @@ All notable changes to this project will be documented in this file. See [Conven - **form:** fix reg inclubes “(” error ([#3103](https://github.com/ant-design/pro-components/issues/3103)) ([cc1f9d0](https://github.com/ant-design/pro-components/commit/cc1f9d06eb796df620f0f28f4764ff797a96692f)) - **table:** fix onSearch no work error ([#3097](https://github.com/ant-design/pro-components/issues/3097)) ([8c99641](https://github.com/ant-design/pro-components/commit/8c99641a547b6a7f34cb8842e69aaa9c6f047621)) -- **table:** remove onchange form renderFormItem ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) +- **table:** remove onchange form formItemRender ([#3106](https://github.com/ant-design/pro-components/issues/3106)) ([00f5e44](https://github.com/ant-design/pro-components/commit/00f5e440eddf4e63c7af4b21bf9b315ee3363b32)) ### Reverts @@ -2032,7 +2032,7 @@ All notable changes to this project will be documented in this file. See [Conven - **field:** omit fieldProps and support onChange ([#1886](https://github.com/ant-design/pro-components/issues/1886)) ([8d7c963](https://github.com/ant-design/pro-components/commit/8d7c9639073822daa554db07a5f0c8c0ea334a65)) - **form:** fix error message no work error ([#1875](https://github.com/ant-design/pro-components/issues/1875)) ([584a73a](https://github.com/ant-design/pro-components/commit/584a73a18aadc339202f34306edaa20d849e6c23)) - **layout:** use @umijs/use-params ([#1895](https://github.com/ant-design/pro-components/issues/1895)) ([80aac76](https://github.com/ant-design/pro-components/commit/80aac7665115c8f884c473d78c2fcc12ac042bb3)) -- **table:** no has colSize on renderFormItem ([#1876](https://github.com/ant-design/pro-components/issues/1876)) ([98b6afd](https://github.com/ant-design/pro-components/commit/98b6afd93248a33e457c71234d7f4dbc9ce77bf0)) +- **table:** no has colSize on formItemRender ([#1876](https://github.com/ant-design/pro-components/issues/1876)) ([98b6afd](https://github.com/ant-design/pro-components/commit/98b6afd93248a33e457c71234d7f4dbc9ce77bf0)) - **table:** set function to aysnc ([8751290](https://github.com/ant-design/pro-components/commit/8751290d02b706db1d9f435c97af2a9e71b1d59d)) ### Features @@ -2407,7 +2407,7 @@ All notable changes to this project will be documented in this file. See [Conven ### Bug Fixes - **table:** options or fullScreen is null, not render ConfigProvider ([#854](https://github.com/ant-design/pro-components/issues/854)) ([004abb9](https://github.com/ant-design/pro-components/commit/004abb90a9d002de0c13223ac27ac98b34b3341b)) -- **table:** renderFormItem should run in form init ([#852](https://github.com/ant-design/pro-components/issues/852)) ([612b04a](https://github.com/ant-design/pro-components/commit/612b04a7225ccc93b8c081d268981d988c333d4c)) +- **table:** formItemRender should run in form init ([#852](https://github.com/ant-design/pro-components/issues/852)) ([612b04a](https://github.com/ant-design/pro-components/commit/612b04a7225ccc93b8c081d268981d988c333d4c)) ## [2.9.12](https://github.com/ant-design/pro-components/compare/@ant-design/pro-table@2.9.11...@ant-design/pro-table@2.9.12) (2020-10-26) diff --git a/packages/table/package.json b/packages/table/package.json index ce49b60a9c08..a4f32ff903c7 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -57,8 +57,8 @@ "typescript": "^5.0.4" }, "peerDependencies": { - "antd": "^4.24.15 || ^5.11.2", - "rc-field-form": ">=1.22.0", + "antd": "^5.11.2", + "rc-field-form": "^2.2.1", "react": ">=17.0.0", "react-dom": ">=17.0.0" }, diff --git a/packages/table/src/Store/Provide.tsx b/packages/table/src/Store/Provide.tsx index 56439cf8e724..c638fc2ebf64 100644 --- a/packages/table/src/Store/Provide.tsx +++ b/packages/table/src/Store/Provide.tsx @@ -1,7 +1,7 @@ import type { TableColumnType } from 'antd'; import { merge } from 'lodash-es'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import { noteOnce } from 'rc-util/lib/warning'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; +import { noteOnce } from 'rc-util/es/warning'; import { createContext, useCallback, diff --git a/packages/table/src/Table.tsx b/packages/table/src/Table.tsx index 4c825a3f502b..53eef0b8990e 100644 --- a/packages/table/src/Table.tsx +++ b/packages/table/src/Table.tsx @@ -1,8 +1,3 @@ -// 兼容代码----------- -import 'antd/lib/table/style'; -import 'antd/lib/typography/style'; -//---------------------- - import ProCard from '@ant-design/pro-card'; import ProForm, { GridContext } from '@ant-design/pro-form'; import type { ParamsType } from '@ant-design/pro-provider'; @@ -24,10 +19,9 @@ import type { GetRowKey, SortOrder, TableCurrentDataSource, -} from 'antd/lib/table/interface'; +} from 'antd/es/table/interface'; import classNames from 'classnames'; -import { isEmpty, isEqual } from 'lodash-es'; -import type Summary from 'rc-table/lib/Footer/Summary'; +import type Summary from 'rc-table/es/Footer/Summary'; import React, { Key, useCallback, @@ -803,7 +797,7 @@ const ProTable = < } }, [tableColumn], - ['render', 'renderFormItem'], + ['render', 'formItemRender'], 100, ); diff --git a/packages/table/src/components/ColumnSetting/index.tsx b/packages/table/src/components/ColumnSetting/index.tsx index cfcde06b6b06..6821aba93ba1 100644 --- a/packages/table/src/components/ColumnSetting/index.tsx +++ b/packages/table/src/components/ColumnSetting/index.tsx @@ -16,8 +16,8 @@ import { Typography, type TableColumnType, } from 'antd'; -import type { CheckboxChangeEvent } from 'antd/lib/checkbox'; -import type { DataNode } from 'antd/lib/tree'; +import type { CheckboxChangeEvent } from 'antd/es/checkbox'; +import type { DataNode } from 'antd/es/tree'; import classNames from 'classnames'; import omit from 'omit.js'; import React, { useContext, useEffect, useMemo, useRef } from 'react'; diff --git a/packages/table/src/components/DragSortTable/index.tsx b/packages/table/src/components/DragSortTable/index.tsx index 1fc13ec4aa47..2b4f6e9936fc 100644 --- a/packages/table/src/components/DragSortTable/index.tsx +++ b/packages/table/src/components/DragSortTable/index.tsx @@ -1,7 +1,7 @@ import { HolderOutlined } from '@ant-design/icons'; import type { ParamsType } from '@ant-design/pro-provider'; import { ConfigProvider } from 'antd'; -import useMergedState from 'rc-util/lib/hooks/useMergedState'; +import useMergedState from 'rc-util/es/hooks/useMergedState'; import React, { useContext, useMemo } from 'react'; import ProTable from '../../Table'; import type { ProTableProps } from '../../typing'; diff --git a/packages/table/src/components/Dropdown/index.tsx b/packages/table/src/components/Dropdown/index.tsx index ee94983a4ec0..a68227f9fb15 100644 --- a/packages/table/src/components/Dropdown/index.tsx +++ b/packages/table/src/components/Dropdown/index.tsx @@ -1,5 +1,4 @@ import { DownOutlined, EllipsisOutlined } from '@ant-design/icons'; -import { menuOverlayCompatible } from '@ant-design/pro-utils'; import type { MenuItemProps } from 'antd'; import { Button, ConfigProvider, Dropdown } from 'antd'; import classnames from 'classnames'; @@ -35,17 +34,15 @@ const DropdownButton: React.FC = ({ const tempClassName = getPrefixCls('pro-table-dropdown'); - const dropdownProps = menuOverlayCompatible({ - onClick: (params) => onSelect && onSelect(params.key as string), - items: menus?.map((item) => ({ - label: item.name, - key: item.key, - })), - }); - return ( onSelect && onSelect(params.key as string), + items: menus?.map((item) => ({ + label: item.name, + key: item.key, + })), + }} className={classnames(tempClassName, className)} > - -
    - -
    -
    -
    -
    -
    - ProTable -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - -
    - 链接 - - 标签 -
    - - TradeCode 1 - - - - close - - - close - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - ProDescriptions -
    -
    -
    -
    -
    - - - - - - - - - -
    -
    - - 链接 - - - - TradeCode 1 - - -
    -
    -
    - - 标签 - - - - close - - - close - - -
    -
    -
    -
    -
    -
    -
    - -`; - -exports[`docs/components demos > 📸 renders ./docs/components/valueEnum-map.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - - - - - 请选择 - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - - - - - 请选择 - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - - - - - 请选择 - -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    - - 展开 - - - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - - -
    -
    - - - - - -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - - - - - - - - - - - - -
    - 状态（number） - - 状态（number） - - 状态（boolean） -
    -
    -
    - - - Simple Empty - - - - - - - - - -
    -
    - 暂无数据 -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -`; - -exports[`docs/components demos > 📸 renders ./docs/components/valueType.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    - - - - - 文本框 - -
    - -
    -
    -
    -
    -
    -
    -
    - -
    -
    - 分组 -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - - - - - - - - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - 123456 -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -     -`; diff --git a/tests/card/__snapshots__/demo.test.ts.snap b/tests/card/__snapshots__/demo.test.ts.snap deleted file mode 100644 index 2d92bc794811..000000000000 --- a/tests/card/__snapshots__/demo.test.ts.snap +++ /dev/null @@ -1,10194 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/avatar.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - - - - - -
    -
    -
    -
    -
    - 示例标题 -
    -
    -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/basic.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - 示例一 -
    -
    -
    -
    - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/compose.tsx correctly 1`] = ` - -
    -
    - test -
    -

    - 只有图片时 -

    -
    -
    -
    - - - -
    -
    -
    -

    - 只有图片和描述时 -

    -
    -
    -
    - - - -
    -
    -
    - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 -
    -
    -
    -
    -

    - 只有标题和描述时 -

    -
    -
    -
    -
    -
    -
    - 示例 -
    -
    -
    -
    - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 -
    -
    -
    -
    -

    - 只有标题和图片 -

    -
    -
    -
    - - - -
    -
    -
    -
    -
    - 示例 -
    -
    -
    -
    -
    -
    -

    - 只有标题 -

    -
    -
    -
    -
    -
    -
    - 示例 -
    -
    -
    -
    -
    -
    -

    - 只有描述时 -

    -
    -
    -
    -
    - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/custom.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/defaultChecked.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - 示例二 -
    -
    -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/description.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - 默认描述区域不会进行折行 -
    -
    -
    -
    - - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 - - 查看详情 - - -
    -
    -
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - 你可以通过排版组件进行省略 -
    -
    -
    -
    -
    - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 -
    -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/disabled.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -

    - 部分不可用 -

    -
    -
    -
    - - - -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - Card title -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -
    -

    - 整体不可用 -

    -
    -
    -
    -
    -
    -
    -
    - Card A -
    -
    -
    -
    - 选项一 -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Card B -
    -
    -
    -
    - 选项二 -
    -
    -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/extra.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - 示例一 -
    -
    -
    - - - -
    -
    -
    - 选择一个由流程编排提供的典型用户案例，可以从中学习到流程编排很多设计理念。 -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/form.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - Spring Boot -
    -
    -
    -
    - 通过业界流行的技术栈来快速构建 Java 后端应用 -
    -
    -
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - SOFA Boot -
    -
    -
    -
    - 使用 SOFAStack 中间件来快速构建分布式后端应用 -
    -
    -
    -
    -
    -
    -
    - - - -
    -
    -
    -
    -
    - Node JS -
    -
    -
    -
    - 使用前后端统一的语言方案快速构建后端应用 -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/grid.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Card A -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Card B -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - Card C -
    -
    -
    -
    - This is the description -
    -
    -
    -
    -
    -
    -
    -
    -     -`; - -exports[`card demos > 📸 renders ./packages/card/src/components/CheckCard/demos/group.tsx correctly 1`] = ` - -
    -
    - test -
    -
    -
    -
    -
    -
    -
    -
    -
    - 🍎 Apple -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - 🍐 Pear -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - 🍊 Orange -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    -
    -
    -
    -
    -
    -
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    -
    -
    -
    -
    -
    -
    -
    -
    -
      -
    • -
    • -
    • -
    • -
    -
    -
    -
    -
    -
    -
    -