From 87b81bdca8abca0d5cd58dd5feaf05255a66edd0 Mon Sep 17 00:00:00 2001 From: dengfuping Date: Fri, 12 Apr 2024 11:20:57 +0800 Subject: [PATCH] improve(ui): LightFilter style --- .dumirc.ts | 5 +- packages/ui/package.json | 3 +- packages/ui/src/LightFilter/demo/basic.tsx | 197 +++++++++++++++++++++ packages/ui/src/LightFilter/index.md | 17 ++ packages/ui/src/LightFilter/index.tsx | 17 ++ packages/ui/src/LightFilter/style/index.ts | 39 ++++ packages/ui/src/index.ts | 3 + pnpm-lock.yaml | 33 ++-- 8 files changed, 291 insertions(+), 23 deletions(-) create mode 100644 packages/ui/src/LightFilter/demo/basic.tsx create mode 100644 packages/ui/src/LightFilter/index.md create mode 100644 packages/ui/src/LightFilter/index.tsx create mode 100644 packages/ui/src/LightFilter/style/index.ts diff --git a/.dumirc.ts b/.dumirc.ts index 61866c52e..39d988a3d 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -192,7 +192,10 @@ export default defineConfig({ }, { title: 'ProComponents 组件', - children: [{ title: 'ProTable 高级表格', link: '/biz-components/pro-table' }], + children: [ + { title: 'ProTable 高级表格', link: '/biz-components/pro-table' }, + { title: 'LightFilter 轻量筛选', link: '/biz-components/light-filter' }, + ], }, { title: '可视化', diff --git a/packages/ui/package.json b/packages/ui/package.json index 67c5b3b36..86aff6a30 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -36,7 +36,6 @@ "dependencies": { "@ant-design/cssinjs": "^1.19.1", "@ant-design/pro-components": "^2.7.0", - "@ant-design/pro-layout": "^7.19.0", "@oceanbase/design": "workspace:^", "@oceanbase/icons": "workspace:^", "@oceanbase/util": "workspace:^", @@ -58,6 +57,8 @@ "screenfull": "^6.0.2" }, "devDependencies": { + "@ant-design/pro-form": "^2.25.1", + "@ant-design/pro-layout": "^7.19.0", "@antv/g6": "3.4.10" }, "peerDependencies": { diff --git a/packages/ui/src/LightFilter/demo/basic.tsx b/packages/ui/src/LightFilter/demo/basic.tsx new file mode 100644 index 000000000..9fff9a663 --- /dev/null +++ b/packages/ui/src/LightFilter/demo/basic.tsx @@ -0,0 +1,197 @@ +import React from 'react'; +import { Radio, TreeSelect } from '@oceanbase/design'; +import type { SizeType } from 'antd/lib/config-provider/SizeContext'; +import { + LightFilter, + ProFormCascader, + ProFormCheckbox, + ProFormDatePicker, + ProFormDateRangePicker, + ProFormDateTimePicker, + ProFormDateTimeRangePicker, + ProFormDigit, + ProFormFieldSet, + ProFormSelect, + ProFormSlider, + ProFormSwitch, + ProFormText, + ProFormTimePicker, + ProFormTreeSelect, +} from '@oceanbase/ui'; +import dayjs from 'dayjs'; + +const treeData = [ + { + title: 'Node1', + value: '0-0', + key: '0-0', + children: [ + { + title: 'Child Node1', + value: '0-0-0', + key: '0-0-0', + }, + ], + }, + { + title: 'Node2', + value: '0-1', + key: '0-1', + children: [ + { + title: 'Child Node3', + value: '0-1-0', + key: '0-1-0', + }, + { + title: 'Child Node4', + value: '0-1-1', + key: '0-1-1', + }, + { + title: 'Child Node5', + value: '0-1-2', + key: '0-1-2', + }, + ], + }, +]; + +export default () => { + const [size, setSize] = React.useState('middle'); + return ( +
+ { + setSize(e.target.value); + }} + > + Middle + Small + +
+
+ + initialValues={{ + sex: 'man', + name: 'Jack', + range: [20, 80], + slider: 20, + date: '2020-08-19', + datetimeRanger: [ + dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(), + dayjs('2019-11-16 12:50:26').valueOf(), + ], + timeRanger: [ + dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(), + dayjs('2019-11-16 12:50:26').valueOf(), + ], + }} + size={size} + onFinish={async values => console.log(values.sex)} + > + + + + + [ + { + value: 'zhejiang', + label: '浙江', + children: [ + { + value: 'hangzhou', + label: '杭州', + children: [ + { + value: 'xihu', + label: '西湖', + }, + ], + }, + ], + }, + { + value: 'jiangsu', + label: 'Jiangsu', + children: [ + { + value: 'nanjing', + label: 'Nanjing', + children: [ + { + value: 'zhonghuamen', + label: 'Zhong Hua Men', + }, + ], + }, + ], + }, + ]} + name="area" + label="区域" + initialValue={['zhejiang', 'hangzhou', 'xihu']} + /> + + + + + + + + + + + + + + + + +
+ ); +}; diff --git a/packages/ui/src/LightFilter/index.md b/packages/ui/src/LightFilter/index.md new file mode 100644 index 000000000..acd4f963a --- /dev/null +++ b/packages/ui/src/LightFilter/index.md @@ -0,0 +1,17 @@ +--- +title: LightFilter 轻量筛选 +nav: + title: 业务组件 + path: /biz-components +--- + +- 🔥 完全继承 pro-components [LightFilter](https://procomponents.ant.design/components/query-filter#%E8%BD%BB%E9%87%8F%E7%AD%9B%E9%80%89) 的能力和 API，可无缝切换。 +- 💄 定制主题和样式，符合 OceanBase Design 设计规范。 + +## 代码演示 + + + +## API + +- 详见 pro-components LightFilter 文档: https://procomponents.ant.design/components/query-filter#lightfilter diff --git a/packages/ui/src/LightFilter/index.tsx b/packages/ui/src/LightFilter/index.tsx new file mode 100644 index 000000000..c743e339d --- /dev/null +++ b/packages/ui/src/LightFilter/index.tsx @@ -0,0 +1,17 @@ +import React, { useContext } from 'react'; +import { LightFilter as AntLightFilter } from '@ant-design/pro-components'; +import type { LightFilterProps } from '@ant-design/pro-components'; +import { ConfigProvider } from '@oceanbase/design'; +import useStyle from './style'; + +export type { LightFilterProps }; + +function LightFilter({ prefixCls: customizePrefixCls, ...restProps }: LightFilterProps) { + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const prefixCls = getPrefixCls('pro-form-light-filter', customizePrefixCls); + const { wrapSSR } = useStyle(prefixCls); + + return wrapSSR(); +} + +export default LightFilter; diff --git a/packages/ui/src/LightFilter/style/index.ts b/packages/ui/src/LightFilter/style/index.ts new file mode 100644 index 000000000..5727fa9f1 --- /dev/null +++ b/packages/ui/src/LightFilter/style/index.ts @@ -0,0 +1,39 @@ +import type { CSSObject } from '@ant-design/cssinjs'; +import type { LightFilterToken } from '@ant-design/pro-form/es/layouts/LightFilter/style'; +import type { GenerateStyle } from '@oceanbase/design/es/theme'; +import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; + +export const genLightFilterStyle: GenerateStyle = ( + token: LightFilterToken +): CSSObject => { + const { componentCls, proComponentsCls } = token; + + return { + [`${componentCls}`]: { + [`${proComponentsCls}-core-field-label`]: { + '&-active, &:hover': { + backgroundColor: token.controlItemBgActive, + }, + }, + }, + [`${componentCls}-middle`]: { + [`${proComponentsCls}-core-field-label`]: { + paddingInline: token.paddingSM, + borderRadius: token.borderRadius, + }, + }, + [`${componentCls}${componentCls}-small`]: { + [`${proComponentsCls}-core-field-label`]: { + paddingInline: token.paddingXS, + borderRadius: token.borderRadiusSM, + }, + }, + }; +}; + +export default (prefixCls: string) => { + const useStyle = genComponentStyleHook('LightFilter', token => { + return [genLightFilterStyle(token as LightFilterToken)]; + }); + return useStyle(prefixCls); +}; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index b0e537ca7..02c4503ad 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -64,6 +64,9 @@ export type { FooterToolbarProps } from './FooterToolbar'; export { default as ProTable } from './ProTable'; export type { ProTableProps } from './ProTable'; +export { default as LightFilter } from './LightFilter'; +export type { LightFilterProps } from './LightFilter'; + export { default as Password } from './Password'; export type { PasswordProps } from './Password'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 849a54b44..ff432bb08 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -422,9 +422,6 @@ importers: '@ant-design/pro-components': specifier: ^2.7.0 version: 2.7.0(antd@5.16.1)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0) - '@ant-design/pro-layout': - specifier: ^7.19.0 - version: 7.19.0(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0) '@oceanbase/design': specifier: workspace:^ version: link:../design @@ -489,6 +486,12 @@ importers: specifier: ^6.0.2 version: 6.0.2 devDependencies: + '@ant-design/pro-form': + specifier: ^2.25.1 + version: 2.25.1(antd@5.16.1)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0) + '@ant-design/pro-layout': + specifier: ^7.19.0 + version: 7.19.0(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0) '@antv/g6': specifier: 3.4.10 version: 3.4.10 @@ -796,7 +799,6 @@ packages: swr: 2.2.5(react@18.2.0) transitivePeerDependencies: - react-dom - dev: false /@ant-design/pro-form@2.25.1(antd@5.16.1)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-mr8/IgLYF/gM2g2dbUUScIvN2WL/A/42iZhIdLKA2EmDWAf8o7cWgL7adM7/N7/Gf7ffRczjao8qG+eNzdtmPw==} @@ -827,7 +829,6 @@ packages: rc-util: 5.39.1(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: false /@ant-design/pro-layout@7.19.0(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-E7kfInojfsvyFaYbppQRyGd4f8IRTi+KXXc3wWQ2C1EcWlaASB7AGYlGRjjeJyvIPa3UPOfKkveL7/pM/Z3GiQ==} @@ -853,7 +854,6 @@ packages: react-dom: 18.2.0(react@18.2.0) swr: 2.2.5(react@18.2.0) warning: 4.0.3 - dev: false /@ant-design/pro-list@2.5.51(antd@5.16.1)(rc-field-form@1.44.0)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-VZ45NUX5SlzMTdtZGiHfj505LWgWw+PXxTNQV8EikcdgKGXH2gHR4LIGUghd6F7uYtnHThPzVgCLeU34O39RHQ==} @@ -895,7 +895,6 @@ packages: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) swr: 2.2.5(react@18.2.0) - dev: false /@ant-design/pro-skeleton@2.1.11(antd@5.16.1)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-a1drmZSDXHFexFniN1YD7PgYiWvhdBAM9OwzSOO3eXPAltAg2cGcaVBlFmweShN+dupO220RN+6aaLUv3G9B2Q==} @@ -962,7 +961,6 @@ packages: react-dom: 18.2.0(react@18.2.0) safe-stable-stringify: 2.4.3 swr: 2.2.5(react@18.2.0) - dev: false /@ant-design/react-slick@1.0.2(react@18.2.0): resolution: {integrity: sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==} @@ -3216,7 +3214,6 @@ packages: react: 18.2.0 reactcss: 1.2.3(react@18.2.0) tinycolor2: 1.6.0 - dev: false /@codemirror/autocomplete@6.15.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.1)(@lezer/common@1.2.1): resolution: {integrity: sha512-G2Zm0mXznxz97JhaaOdoEG2cVupn4JjPaS4AcNvZzhOsnnG9YVN68VzfoUw6dYTsIxT6a/cmoFEN47KAWhXaOg==} @@ -4783,7 +4780,7 @@ packages: peerDependencies: react: '>=16.3.0' dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.24.4 hoist-non-react-statics: 3.3.2 react: 18.1.0 react-is: 16.13.1 @@ -4795,7 +4792,7 @@ packages: peerDependencies: react: '>=16.3.0' dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.24.4 hoist-non-react-statics: 3.3.2 react: 18.2.0 react-is: 16.13.1 @@ -7296,7 +7293,7 @@ packages: /@umijs/history@5.3.1: resolution: {integrity: sha512-/e0cEGrR2bIWQD7pRl3dl9dcyRGeC9hoW0OCvUTT/hjY0EfUrkd6G8ZanVghPMpDuY5usxq9GVcvrT8KNXLWvA==} dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.24.4 query-string: 6.14.1 dev: true @@ -7475,7 +7472,6 @@ packages: /@umijs/route-utils@4.0.1: resolution: {integrity: sha512-+1ixf1BTOLuH+ORb4x8vYMPeIt38n9q0fJDwhv9nSxrV46mxbLF0nmELIo9CKQB2gHfuC4+hww6xejJ6VYnBHQ==} - dev: false /@umijs/server@4.1.8: resolution: {integrity: sha512-JQkmtZMZLLTMk/clvX8jGpNQm1bSfXCHcGaVHw/X1/O6bffXZcud79ksxjnqGKudHdLtfQWmIgYLC2cnKtXmfw==} @@ -7515,7 +7511,6 @@ packages: react: '*' dependencies: react: 18.2.0 - dev: false /@umijs/utils@4.1.8: resolution: {integrity: sha512-438dwza66i13H8EYhJuvJcvWGR9Ij5eUSqTaF0XEq+vL8YUCx3cOeYdE/oIrunxDIbNFLmLaG0FtTcEEvK4oeA==} @@ -13620,7 +13615,7 @@ packages: /history@5.3.0: resolution: {integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==} dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.24.4 dev: true /hmac-drbg@1.0.1: @@ -15797,7 +15792,6 @@ packages: /lodash.tonumber@4.0.3: resolution: {integrity: sha512-SY0SwuPOHRwKcCNTdsntPYb+Zddz5mDUIVFABzRMqmAiL41pMeyoQFGxYAw5zdc9NnH4pbJqiqqp5ckfxa+zSA==} - dev: false /lodash.truncate@4.4.2: resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} @@ -17741,7 +17735,6 @@ packages: /omit.js@2.0.2: resolution: {integrity: sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg==} - dev: false /on-exit-leak-free@0.2.0: resolution: {integrity: sha512-dqaz3u44QbRXQooZLTUKU41ZrzYrcvLISVgbrzbyCMxpmSLJvZ3ZamIJIZ29P6OhZIkNIQKosdeM6t1LYbA9hg==} @@ -18350,7 +18343,6 @@ packages: /path-to-regexp@2.4.0: resolution: {integrity: sha512-G6zHoVqC6GGTQkZwF4lkuEyMbVOjoBKAEybQUypI1WTkqinCOrq2x6U2+phkJ1XsEMTy4LjtwPI7HW+NVrRR2w==} - dev: false /path-to-regexp@6.2.2: resolution: {integrity: sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==} @@ -20661,7 +20653,7 @@ packages: react: ^16.6.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.24.4 invariant: 2.2.4 prop-types: 15.8.1 react: 18.1.0 @@ -20676,7 +20668,7 @@ packages: react: ^16.6.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.6 + '@babel/runtime': 7.24.4 invariant: 2.2.4 prop-types: 15.8.1 react: 18.2.0 @@ -24607,7 +24599,6 @@ packages: resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} dependencies: loose-envify: 1.4.0 - dev: false /watchpack@2.4.1: resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}