@regenbio/regenbio-components-react 1.2.15 → 1.2.16

package/packages/form/src/components/FieldSet/demos/components-other.tsx

@@ -0,0 +1,336 @@
+import {
+  ProForm,
+  ProFormCascader,
+  ProFormCheckbox,
+  ProFormColorPicker,
+  ProFormDigit,
+  ProFormDigitRange,
+  ProFormGroup,
+  ProFormRadio,
+  ProFormRate,
+  ProFormSegmented,
+  ProFormSelect,
+  ProFormSlider,
+  ProFormSwitch,
+  ProFormText,
+  ProFormUploadButton,
+  ProFormUploadDragger,
+} from '@ant-design/pro-components';
+import { Switch } from 'antd';
+import Mock from 'mockjs';
+import { useState } from 'react';
+
+export const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+const Demo = () => {
+  const [readonly, setReadonly] = useState(false);
+  return (
+    <div
+      style={{
+        padding: 24,
+      }}
+    >
+      <Switch
+        style={{
+          marginBlockEnd: 16,
+        }}
+        checked={readonly}
+        checkedChildren="编辑"
+        unCheckedChildren="只读"
+        onChange={setReadonly}
+      />
+      <ProForm
+        readonly={readonly}
+        name="validate_other"
+        initialValues={{
+          name: 'qixian',
+          password: '1ixian',
+          select: 'china',
+          select2: '520000201604258831',
+          useMode: { label: '未解决', value: 'open', key: 'open' },
+          'select-multiple': ['green', 'blue'],
+          radio: 'a',
+          'radio-vertical': 'b',
+          'radio-button': 'b',
+          'checkbox-group': ['A', 'B', 'C'],
+          'input-number-range': [2, 4],
+          'input-number': 3,
+          switch: true,
+          slider: 66,
+          rate: 3.5,
+          segmented: 'open',
+          segmented2: 'open',
+        }}
+        onValuesChange={(_, values) => {
+          console.log(values);
+        }}
+        onFinish={async (value) => console.log(value)}
+      >
+        <ProFormGroup title="文本类">
+          <ProFormText width="md" name="name" label="name" />
+          <ProFormText.Password width="md" name="password" label="password" />
+        </ProFormGroup>
+        <ProFormGroup
+          title="选择类"
+          collapsible
+          style={{
+            gap: '0 32px',
+          }}
+        >
+          <ProFormSelect
+            name="select"
+            label="Select"
+            valueEnum={{
+              china: 'China',
+              usa: 'U.S.A',
+            }}
+            placeholder="Please select a country"
+            rules={[{ required: true, message: 'Please select your country!' }]}
+          />
+          <ProFormSelect
+            name="select2"
+            label="支持搜索查询的 Select"
+            showSearch
+            debounceTime={300}
+            request={async ({ keyWords }) => {
+              await waitTime(100);
+              console.log(
+                Mock.mock({
+                  'data|1-10': [
+                    {
+                      value: '@id',
+                      label: '@name',
+                    },
+                  ],
+                }).data.concat({
+                  value: keyWords,
+                  label: '目标_target',
+                }),
+              );
+              return Mock.mock({
+                'data|1-10': [
+                  {
+                    value: '@id',
+                    label: '@name',
+                  },
+                ],
+              }).data.concat([
+                {
+                  value: keyWords,
+                  label: '目标_target',
+                },
+                { value: '520000201604258831', label: 'Patricia Lopez' },
+                { value: '520000198509222123', label: 'Jose Martinez' },
+                { value: '210000200811194757', label: 'Elizabeth Thomas' },
+                { value: '530000198808222758', label: 'Scott Anderson' },
+                { value: '500000198703236285', label: 'George Jackson' },
+                { value: '610000199906148074', label: 'Linda Hernandez' },
+                { value: '150000197210168659', label: 'Sandra Hall' },
+                { label: '目标_target' },
+              ]);
+            }}
+            placeholder="Please select a country"
+            rules={[{ required: true, message: 'Please select your country!' }]}
+          />
+          <ProFormSelect
+            width="md"
+            fieldProps={{
+              labelInValue: true,
+            }}
+            request={async () => [
+              { label: '全部', value: 'all' },
+              { label: '未解决', value: 'open' },
+              { label: '已解决', value: 'closed' },
+              { label: '解决中', value: 'processing' },
+            ]}
+            name="useMode"
+            label="合同约定生效方式"
+          />
+          <ProFormSelect
+            name="select-multiple"
+            label="Select[multiple]"
+            valueEnum={{
+              red: 'Red',
+              green: 'Green',
+              blue: 'Blue',
+            }}
+            fieldProps={{
+              mode: 'multiple',
+            }}
+            placeholder="Please select favorite colors"
+            rules={[
+              {
+                required: true,
+                message: 'Please select your favorite colors!',
+                type: 'array',
+              },
+            ]}
+          />
+          <ProFormCascader
+            label="地址"
+            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',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ]}
+            fieldProps={{
+              changeOnSelect: true,
+            }}
+            name="area"
+          />
+
+          <ProFormRadio.Group
+            name="radio"
+            label="Radio.Group"
+            options={[
+              {
+                label: 'item 1',
+                value: 'a',
+              },
+              {
+                label: 'item 2',
+                value: 'b',
+              },
+              {
+                label: 'item 3',
+                value: 'c',
+              },
+            ]}
+          />
+          <ProFormRadio.Group
+            name="radio-vertical"
+            layout="vertical"
+            label="Radio.Group"
+            options={[
+              {
+                label: 'item 1',
+                value: 'a',
+              },
+              {
+                label: 'item 2',
+                value: 'b',
+              },
+              {
+                label: 'item 3',
+                value: 'c',
+              },
+            ]}
+          />
+          <ProFormRadio.Group
+            name="radio-button"
+            label="Radio.Button"
+            radioType="button"
+            options={[
+              {
+                label: 'item 1',
+                value: 'a',
+              },
+              {
+                label: 'item 2',
+                value: 'b',
+              },
+              {
+                label: 'item 3',
+                value: 'c',
+              },
+            ]}
+          />
+          <ProFormCheckbox.Group
+            name="checkbox-group"
+            label="Checkbox.Group"
+            options={['A', 'B', 'C', 'D', 'E', 'F']}
+          />
+          <ProFormColorPicker label="颜色选择" name="color" />
+        </ProFormGroup>
+        <ProFormGroup label="数字类">
+          <ProFormDigitRange
+            label="InputNumberRange"
+            name="input-number-range"
+            separator="-"
+            placeholder={['最小值', '最大值']}
+            separatorWidth={60}
+          />
+          <ProFormDigit
+            label="InputNumber"
+            name="input-number"
+            width="sm"
+            min={1}
+            max={10}
+          />
+          <ProFormSwitch name="switch" label="Switch" />
+          <ProFormSlider
+            name="slider"
+            label="Slider"
+            width="lg"
+            marks={{
+              0: 'A',
+              20: 'B',
+              40: 'C',
+              60: 'D',
+              80: 'E',
+              100: 'F',
+            }}
+          />
+          <ProFormRate name="rate" label="Rate" />
+          <ProFormUploadButton name="pic" label="上传" />
+          <ProFormUploadDragger name="drag-pic" label="拖拽上传" />
+          <ProFormSegmented
+            name="segmented"
+            label="分段控制器"
+            valueEnum={{
+              open: '未解决',
+              closed: '已解决',
+            }}
+          />
+          <ProFormSegmented
+            name="segmented2"
+            label="分段控制器-远程数据"
+            request={async () => [
+              { label: '全部', value: 'all' },
+              { label: '未解决', value: 'open' },
+              { label: '已解决', value: 'closed' },
+              { label: '解决中', value: 'processing' },
+            ]}
+          />
+        </ProFormGroup>
+      </ProForm>
+    </div>
+  );
+};
+
+export default Demo;

package/packages/form/src/components/FieldSet/demos/datatime.tsx

@@ -0,0 +1,89 @@
+import {
+  ProForm,
+  ProFormDateMonthRangePicker,
+  ProFormDatePicker,
+  ProFormDateQuarterRangePicker,
+  ProFormDateRangePicker,
+  ProFormDateTimePicker,
+  ProFormDateTimeRangePicker,
+  ProFormDateWeekRangePicker,
+  ProFormDateYearRangePicker,
+  ProFormTimePicker,
+} from '@ant-design/pro-components';
+import { Switch } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const [readonly, setReadonly] = useState(false);
+  return (
+    <div
+      style={{
+        padding: 24,
+      }}
+    >
+      <Switch
+        style={{
+          marginBlockEnd: 16,
+        }}
+        checked={readonly}
+        checkedChildren="编辑"
+        unCheckedChildren="只读"
+        onChange={setReadonly}
+      />
+      <ProForm
+        readonly={readonly}
+        initialValues={{
+          date: Date.now(),
+          dateWeek: Date.now(),
+          dateMonth: Date.now(),
+          dateQuarter: Date.now(),
+          dateYear: Date.now(),
+          dateTime: Date.now(),
+          time: '00:01:05',
+          timeRange: ['05:00:00', '11:00:00'],
+          dateTimeRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24],
+          dateRange: [Date.now(), Date.now() - 1000 * 60 * 60 * 24],
+        }}
+        onFinish={async (values) => {
+          console.log(values);
+        }}
+      >
+        <ProForm.Group title="日期相关分组">
+          <ProFormDatePicker name="date" label="日期" />
+          <ProFormDatePicker
+            name="date"
+            fieldProps={{
+              format: 'YY-MM',
+            }}
+            label="年月"
+          />
+          <ProFormTimePicker name="time" label="时间" />
+          <ProFormTimePicker.RangePicker name="timeRange" label="时间区间" />
+          <ProFormDatePicker.Week name="dateWeek" label="周" />
+          <ProFormDateWeekRangePicker name="dateWeekRange" label="周区间" />
+          <ProFormDatePicker.Month name="dateMonth" label="月" />
+          <ProFormDateMonthRangePicker name="dateMonthRange" label="月区间" />
+          <ProFormDatePicker.Quarter name="dateQuarter" label="季度" />
+          <ProFormDateQuarterRangePicker
+            name="dateQuarterRange"
+            label="季度区间"
+          />
+          <ProFormDatePicker.Year name="dateYear" label="年" />
+          <ProFormDateYearRangePicker name="dateYearRange" label="年区间" />
+          <ProFormDateTimePicker
+            name="dateTime"
+            label="日期时间"
+            fieldProps={{
+              format: (value) => value.format('YYYY-MM-DD'),
+            }}
+          />
+          <ProFormDateRangePicker name="dateRange" label="日期区间" />
+          <ProFormDateTimeRangePicker
+            name="dateTimeRange"
+            label="日期时间区间"
+          />
+        </ProForm.Group>
+      </ProForm>
+    </div>
+  );
+};

package/packages/form/src/components/FieldSet/demos/fieldSet-light.tsx

@@ -0,0 +1,58 @@
+import {
+  LightFilter,
+  ProFormFieldSet,
+  ProFormSelect,
+  ProFormText,
+} from '@ant-design/pro-components';
+
+export default function App() {
+  return (
+    <div className="App">
+      <LightFilter
+        initialValues={{
+          name: [
+            {
+              label: '包含',
+              value: 'Like',
+            },
+            '123',
+          ],
+        }}
+        placement={'bottomLeft'}
+      >
+        <ProFormFieldSet
+          label="筛选"
+          name={'name'}
+          lightProps={{
+            labelFormatter: (value) => {
+              return value.join(' ');
+            },
+          }}
+          transform={(value: any) => {
+            return {
+              filter: [
+                {
+                  operator: value[0],
+                  value: value[1],
+                },
+              ],
+            };
+          }}
+        >
+          <ProFormSelect
+            fieldProps={{
+              labelInValue: true,
+            }}
+            valueEnum={{
+              Like: '包合',
+              NotLike: '不包合',
+              Eq: '等于',
+              NotEq: '不等于',
+            }}
+          />
+          <ProFormText placeholder="请输入" />
+        </ProFormFieldSet>
+      </LightFilter>
+    </div>
+  );
+}

package/packages/form/src/components/FieldSet/demos/form-fieldset.tsx

@@ -0,0 +1,106 @@
+import {
+  ProForm,
+  ProFormDependency,
+  ProFormFieldSet,
+  ProFormSelect,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Switch } from 'antd';
+import { useState } from 'react';
+
+export default () => {
+  const [readonly, setReadonly] = useState(false);
+  return (
+    <div
+      style={{
+        padding: 24,
+      }}
+    >
+      <Switch
+        style={{
+          marginBlockEnd: 16,
+        }}
+        checked={readonly}
+        checkedChildren="编辑"
+        unCheckedChildren="只读"
+        onChange={setReadonly}
+      />
+      <ProForm
+        readonly={readonly}
+        initialValues={{
+          list: ['1', '2', '3'],
+        }}
+      >
+        <ProForm.Item label="互相依赖的表单">
+          <ProFormDependency name={['list']}>
+            {({ list }) => {
+              return <div>{JSON.stringify(list, null, 2)}</div>;
+            }}
+          </ProFormDependency>
+        </ProForm.Item>
+        <ProFormFieldSet name="list" label="组件列表">
+          <ProFormText width="md" />
+          <ProFormSelect
+            width="md"
+            request={async () => [
+              { label: '全部', value: 'all' },
+              { label: '未解决', value: 'open' },
+              { label: '已解决', value: 'closed' },
+              { label: '解决中', value: 'processing' },
+            ]}
+            name="useMode"
+            label="合同约定生效方式"
+          />
+          <ProFormText width="md" />
+        </ProFormFieldSet>
+
+        <ProFormFieldSet
+          name="list"
+          label="组件列表- Input.Group"
+          type="group"
+          rules={[
+            {
+              validator: (_, value) => {
+                const [name, name1, name2] = value || [];
+                if (!name) {
+                  throw new Error('第一个值不能为空');
+                }
+                if (!name1) {
+                  throw new Error('第二个值不能为空');
+                }
+                if (!name2) {
+                  throw new Error('第三个值不能为空');
+                }
+              },
+            },
+          ]}
+          transform={(value: any) => ({
+            list: value,
+            startTime: value[0],
+            endTime: value[1],
+          })}
+        >
+          <ProFormText width="md" />
+          <ProFormText width="md" />
+          <ProFormText width="md" />
+        </ProFormFieldSet>
+
+        <ProFormFieldSet
+          name="list"
+          label="组件列表"
+          transform={(value: any) => ({
+            list: value,
+            startTime: value[0],
+            endTime: value[1],
+          })}
+        >
+          <ProFormText width="md" readonly />
+          -
+          <ProFormText width="md" readonly />
+          -
+          <ProFormText width="md" readonly />
+        </ProFormFieldSet>
+      </ProForm>
+    </div>
+  );
+};

package/packages/form/src/components/FieldSet/demos/pro-form-captCha.tsx

@@ -0,0 +1,70 @@
+import { ProForm, ProFormCaptcha } from '@ant-design/pro-components';
+
+import type { CaptFieldRef } from '@ant-design/pro-components';
+import { Button, message } from 'antd';
+import { useRef } from 'react';
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+export default () => {
+  const captchaRef = useRef<CaptFieldRef | null | undefined>();
+  const inputRef = useRef();
+
+  return (
+    <ProForm
+      title="新建表单"
+      submitter={{
+        render: (props, doms) => {
+          return [
+            ...doms,
+            <Button
+              htmlType="button"
+              onClick={() => {
+                captchaRef.current?.startTiming();
+              }}
+              key="edit"
+            >
+              手动开始计数
+            </Button>,
+            <Button
+              htmlType="button"
+              onClick={() => {
+                captchaRef.current?.endTiming();
+              }}
+              key="edit"
+            >
+              手动结束计数
+            </Button>,
+          ];
+        },
+      }}
+      onFinish={async (values) => {
+        await waitTime(2000);
+        console.log(values);
+        message.success('提交成功');
+        return true;
+      }}
+    >
+      <ProFormCaptcha
+        onGetCaptcha={() => {
+          // dosomething()
+          return new Promise((resolve, reject) => {
+            reject();
+          });
+        }}
+        onTiming={(count) => {
+          console.log('timing:', count);
+        }}
+        fieldRef={captchaRef}
+        fieldProps={{ ref: inputRef }}
+        name="code"
+      />
+    </ProForm>
+  );
+};