@regenbio/regenbio-components-react 1.2.16 → 1.2.18

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

@@ -1,336 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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>
-  );
-};