@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/form/src/components/Money/index.tsx

@@ -0,0 +1,47 @@
+import type { ProFieldMoneyProps } from '@ant-design/pro-field';
+import type { InputNumberProps } from 'antd';
+import React from 'react';
+import type { ProFormFieldItemProps } from '../../typing';
+import ProFormField from '../Field';
+
+export type ProFormMoneyProps = ProFormFieldItemProps<
+  Omit<ProFieldMoneyProps, 'valueType' | 'text'> & InputNumberProps<number>
+> & {
+  customSymbol?: string; // 自定义货币符号
+  locale?: string; // 单独设置国际化，设置之后优先级高于全局国际化
+  min?: InputNumberProps<number>['min'];
+  max?: InputNumberProps<number>['min'];
+};
+/**
+ * 金额输入框
+ *
+ * @param
+ */
+const ProFormMoney: React.ForwardRefRenderFunction<any, ProFormMoneyProps> = (
+  { fieldProps, proFieldProps, locale, min, max, ...rest },
+  ref,
+) => {
+  return (
+    <ProFormField
+      valueType={{
+        type: 'money',
+        locale,
+      }}
+      fieldProps={{
+        min,
+        max,
+        ...fieldProps,
+      }}
+      ref={ref}
+      filedConfig={{
+        defaultProps: {
+          width: '100%',
+        },
+      }}
+      proFieldProps={proFieldProps}
+      {...rest}
+    />
+  );
+};
+
+export default React.forwardRef(ProFormMoney);

package/packages/form/src/components/QueryFilter/demos/light-filter-bordered.tsx

@@ -0,0 +1,149 @@
+import { FilterOutlined } from '@ant-design/icons';
+import {
+  LightFilter,
+  ProFormCascader,
+  ProFormCheckbox,
+  ProFormDatePicker,
+  ProFormRadio,
+  ProFormSelect,
+  ProFormTreeSelect,
+} from '@ant-design/pro-components';
+import { TreeSelect } from 'antd';
+
+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 () => {
+  return (
+    <LightFilter
+      initialValues={{
+        sex: 'man',
+      }}
+      bordered
+      collapseLabel={<FilterOutlined />}
+      onFinish={async (values) => console.log(values)}
+    >
+      <ProFormSelect
+        name="sex"
+        showSearch
+        valueEnum={{
+          man: '男',
+          woman: '女',
+        }}
+        placeholder="性别"
+      />
+      <ProFormRadio.Group
+        name="radio"
+        radioType="button"
+        options={[
+          {
+            value: 'weekly',
+            label: '每周',
+          },
+          {
+            value: 'quarterly',
+            label: '每季度',
+          },
+          {
+            value: 'monthly',
+            label: '每月',
+          },
+          {
+            value: 'yearly',
+            label: '每年',
+          },
+        ]}
+      />
+      <ProFormDatePicker name="time" placeholder="日期" />
+      <ProFormTreeSelect
+        request={async () => treeData}
+        fieldProps={{
+          fieldNames: {
+            label: 'title',
+          },
+          treeCheckable: true,
+          showCheckedStrategy: TreeSelect.SHOW_PARENT,
+          placeholder: 'Please select',
+        }}
+        name="treeSelect"
+      />
+      <ProFormCheckbox.Group
+        name="checkbox"
+        label="迁移类型"
+        width="lg"
+        options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
+      />
+      <ProFormCascader
+        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"
+      />
+    </LightFilter>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/light-filter-collapse.tsx

@@ -0,0 +1,28 @@
+import {
+  LightFilter,
+  ProFormDateTimePicker,
+  ProFormSelect,
+} from '@ant-design/pro-components';
+
+export default () => {
+  return (
+    <LightFilter
+      initialValues={{
+        sex: 'man',
+      }}
+      collapse
+      onFinish={async (values) => console.log(values)}
+    >
+      <ProFormSelect
+        name="sex"
+        label="性别"
+        showSearch
+        valueEnum={{
+          man: '男',
+          woman: '女',
+        }}
+      />
+      <ProFormDateTimePicker name="time" label="时间" />
+    </LightFilter>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/light-filter-footer.tsx

@@ -0,0 +1,88 @@
+import { LightFilter, ProFormText } from '@ant-design/pro-components';
+import { Button, Radio, Space } from 'antd';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import React from 'react';
+
+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 />
+
+      <Space direction="vertical">
+        <LightFilter
+          size={size}
+          initialValues={{
+            name: 'Jack2',
+          }}
+        >
+          <ProFormText
+            name="name"
+            label="名称"
+            footerRender={(_, onClear) => (
+              <Button
+                onClick={() => {
+                  onClear?.();
+                }}
+              >
+                自定义footer
+              </Button>
+            )}
+          />
+        </LightFilter>
+
+        <LightFilter
+          size={size}
+          initialValues={{
+            name: 'Jack2',
+          }}
+        >
+          <ProFormText name="name" label="名称" footerRender={false} />
+        </LightFilter>
+
+        <LightFilter
+          size={size}
+          initialValues={{
+            name: 'Jack2',
+          }}
+          collapse
+          collapseLabel="footer为false"
+          footerRender={false}
+        >
+          <ProFormText name="name" label="名称" />
+        </LightFilter>
+
+        <LightFilter
+          size={size}
+          initialValues={{
+            name: 'Jack2',
+          }}
+          collapse
+          collapseLabel="自定义footer"
+          footerRender={(_, onClear) => (
+            <Button
+              onClick={() => {
+                onClear?.();
+              }}
+            >
+              自定义footer
+            </Button>
+          )}
+        >
+          <ProFormText name="name" label="名称" />
+        </LightFilter>
+      </Space>
+    </div>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/light-filter-placement.tsx

@@ -0,0 +1,89 @@
+import {
+  LightFilter,
+  ProFormDatePicker,
+  ProFormDateRangePicker,
+  ProFormDateTimePicker,
+  ProFormDateTimeRangePicker,
+  ProFormDigit,
+  ProFormFieldSet,
+  ProFormSelect,
+  ProFormSlider,
+  ProFormSwitch,
+  ProFormText,
+  ProFormTimePicker,
+} from '@ant-design/pro-components';
+import { Radio } from 'antd';
+import React from 'react';
+
+export default () => {
+  const [mode, setMode] = React.useState<any>('topLeft');
+  return (
+    <div>
+      <Radio.Group
+        value={mode}
+        onChange={(e) => {
+          setMode(e.target.value);
+        }}
+      >
+        <Radio.Button value="topLeft">topLeft</Radio.Button>
+        <Radio.Button value="topRight">topRight</Radio.Button>
+        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
+        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
+      </Radio.Group>
+      <LightFilter
+        placement={mode}
+        style={{
+          marginBlockStart: '40px',
+        }}
+      >
+        <ProFormSelect
+          name="sex"
+          label="性别"
+          showSearch
+          allowClear={false}
+          fieldProps={{
+            labelInValue: true,
+          }}
+          valueEnum={{
+            man: '男',
+            woman: '女',
+          }}
+        />
+        <ProFormSelect
+          name="area"
+          label="地区"
+          mode="multiple"
+          valueEnum={{
+            beijing: '北京',
+            shanghai: '上海',
+            hangzhou: '杭州',
+            long: '这是一个很长的用来测试溢出的项目',
+          }}
+        />
+        <ProFormDigit name="count" label="数量" />
+        <ProFormSlider name="range" label="范围" range />
+        <ProFormSlider name="slider" label="范围" />
+        <ProFormText name="name1" label="名称" />
+        <ProFormSwitch name="open" label="开关" secondary />
+        <ProFormText name="name2" label="地址" secondary />
+        <ProFormDatePicker
+          name="name3"
+          label="不能清空的日期"
+          allowClear={false}
+        />
+        <ProFormDateRangePicker name="date" 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>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/light-filter-test.tsx

@@ -0,0 +1,92 @@
+import {
+  LightFilter,
+  ProForm,
+  ProFormDigit,
+  ProFormSelect,
+  ProFormSlider,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Radio } from 'antd';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import dayjs from 'dayjs';
+import React from 'react';
+
+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={{
+          name1: 'yutingzhao1991',
+          name3: '2020-08-19',
+          range: [20, 80],
+          slider: 20,
+          sex: [
+            {
+              value: 'open1',
+              label: '打开',
+            },
+            {
+              value: 'closed2',
+              label: '关闭',
+            },
+          ],
+          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="area"
+          label="地区"
+          mode="multiple"
+          valueEnum={{
+            beijing: '北京',
+            shanghai: '上海',
+            hangzhou: '杭州',
+            long: '这是一个很长的用来测试溢出的项目',
+          }}
+        />
+        <ProForm.Group label="范围组">
+          <ProFormDigit name="count" label="数量" />
+          <ProFormSlider name="range" label="范围" range />
+          <ProFormSlider name="slider" label="范围" />
+        </ProForm.Group>
+        <ProFormText name="name1" label="名称" />
+      </LightFilter>
+    </div>
+  );
+};

package/packages/form/src/components/QueryFilter/demos/light-filter.tsx

@@ -0,0 +1,215 @@
+import {
+  LightFilter,
+  ProFormCascader,
+  ProFormCheckbox,
+  ProFormDatePicker,
+  ProFormDateRangePicker,
+  ProFormDateTimePicker,
+  ProFormDateTimeRangePicker,
+  ProFormDigit,
+  ProFormFieldSet,
+  ProFormSelect,
+  ProFormSlider,
+  ProFormSwitch,
+  ProFormText,
+  ProFormTimePicker,
+  ProFormTreeSelect,
+} from '@ant-design/pro-components';
+import { Radio, TreeSelect } from 'antd';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import dayjs from 'dayjs';
+import React from 'react';
+
+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={{
+          name1: 'yutingzhao1991',
+          name3: '2020-08-19',
+          range: [20, 80],
+          slider: 20,
+          sex: [
+            {
+              value: 'open1',
+              label: '打开',
+            },
+            {
+              value: 'closed2',
+              label: '关闭',
+            },
+          ],
+          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="area"
+          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="name1" label="名称" />
+        <ProFormSwitch name="open" label="开关" secondary />
+        <ProFormText name="name2" label="地址" secondary />
+        <ProFormDatePicker
+          name="name3"
+          label="不能清空的日期"
+          allowClear={false}
+        />
+        <ProFormDateRangePicker name="date" 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>
+  );
+};