Merge pull request #554 from oceanbase/zhuyue-dev

💄 improve(ui): LightFilter style

.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: '可视化',

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": {

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<SizeType>('middle');
+  return (
+    <div>
+      <Radio.Group
+        value={size}
+        onChange={e => {
+          setSize(e.target.value);
+        }}
+      >
+        <Radio.Button value="middle">Middle</Radio.Button>
+        <Radio.Button value="small">Small</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+      <LightFilter<{
+        sex: string;
+      }>
+        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)}
+      >
+        <ProFormSelect
+          name="sex"
+          label="性别"
+          showSearch
+          allowClear={false}
+          fieldProps={{
+            labelInValue: true,
+          }}
+          valueEnum={{
+            man: '男',
+            woman: '女',
+          }}
+        />
+        <ProFormSelect
+          name="region"
+          label="地区"
+          mode="multiple"
+          valueEnum={{
+            beijing: '北京',
+            shanghai: '上海',
+            hangzhou: '杭州',
+            long: '这是一个很长的用来测试溢出的项目',
+          }}
+        />
+        <ProFormCheckbox.Group
+          name="checkbox-group"
+          label="Checkbox.Group"
+          options={['A', 'B', 'C', 'D', 'E', 'F']}
+        />
+        <ProFormTreeSelect
+          initialValue={['0-0', '0-1']}
+          label="树形下拉选择器"
+          fieldProps={{
+            fieldNames: {
+              label: 'title',
+            },
+            treeData,
+            treeCheckable: true,
+            showCheckedStrategy: TreeSelect.SHOW_PARENT,
+            placeholder: 'Please select',
+          }}
+          name="treeSelect"
+        />
+        <ProFormCascader
+          width="md"
+          request={async () => [
+            {
+              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']}
+        />
+        <ProFormSwitch name="open" label="开关" />
+        <ProFormDigit name="count" label="数量" />
+        <ProFormSlider name="range" label="范围" range />
+        <ProFormSlider name="slider" label="范围" />
+        <ProFormText name="name" label="名称" />
+        <ProFormDatePicker name="date" label="日期" />
+        <ProFormDateRangePicker name="dateRanger" label="日期范围" />
+        <ProFormDateTimePicker name="datetime" label="日期时间" />
+        <ProFormDateTimeRangePicker name="datetimeRanger" label="日期时间范围" />
+        <ProFormTimePicker name="time" label="时间" />
+        <ProFormTimePicker.RangePicker name="timeRanger" label="时间范围" />
+        <ProFormFieldSet name="name" label="姓名">
+          <ProFormText />
+          <ProFormText />
+        </ProFormFieldSet>
+      </LightFilter>
+    </div>
+  );
+};

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 设计规范。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基本"></code>
+
+## API
+
+- 详见 pro-components LightFilter 文档: https://procomponents.ant.design/components/query-filter#lightfilter

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<T>({ prefixCls: customizePrefixCls, ...restProps }: LightFilterProps<T>) {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('pro-form-light-filter', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
+
+  return wrapSSR(<AntLightFilter prefixCls={customizePrefixCls} {...restProps} />);
+}
+
+export default LightFilter;

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<LightFilterToken> = (
+  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);
+};

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';