@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/packages/field/src/demos/base_test.tsx

@@ -0,0 +1,509 @@
+import type { ProFieldFCMode } from '@ant-design/pro-components';
+import { ProField } from '@ant-design/pro-components';
+import { Descriptions, Radio, Space, Switch } from 'antd';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+
+export default () => {
+  const [state, setState] = useState<ProFieldFCMode>('edit');
+  const [plain, setPlain] = useState<boolean>(false);
+  return (
+    <>
+      <Space>
+        <Radio.Group
+          onChange={(e) => setState(e.target.value as ProFieldFCMode)}
+          value={state}
+        >
+          <Radio value="read">只读</Radio>
+          <Radio value="edit">编辑</Radio>
+        </Radio.Group>
+        简约模式
+        <Switch checked={plain} onChange={(checked) => setPlain(checked)} />
+      </Space>
+      <br />
+      <br />
+      <Descriptions column={2}>
+        <Descriptions.Item label="空字符串">
+          <ProField text="" mode="read" />
+        </Descriptions.Item>
+        <Descriptions.Item label="头像">
+          <ProField
+            text="https://avatars2.githubusercontent.com/u/8186664?s=60&v=4"
+            mode="read"
+            valueType="avatar"
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="文本">
+          <ProField
+            text="这是一段文本"
+            fieldProps={{
+              disabled: true,
+            }}
+            valueType="text"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="颜色">
+          <ProField text="blue" valueType="color" mode={state} plain={plain} />
+        </Descriptions.Item>
+        <Descriptions.Item label="颜色禁用">
+          <ProField
+            text="blue"
+            valueType="color"
+            fieldProps={{
+              disabled: true,
+            }}
+            mode={state}
+            plain={plain}
+          />
+          <ProField text="blue" valueType="color" disabled mode="read" />
+        </Descriptions.Item>
+        <Descriptions.Item label="图片">
+          <ProField
+            text="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+            valueType={{
+              type: 'image',
+              width: 100,
+            }}
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="金额">
+          <ProField
+            numberPopoverRender
+            fieldProps={{
+              precision: 2,
+              style: {
+                width: 200,
+              },
+            }}
+            text="10000"
+            valueType="money"
+            mode={state}
+            plain={plain}
+          />
+
+          <ProField
+            valueType="money"
+            label="自定义货币符号"
+            name="amount4"
+            fieldProps={{
+              value: 2221212.22,
+              customSymbol: '💰',
+            }}
+            mode="read"
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="数字">
+          <ProField
+            text="19897979797979"
+            valueType="digit"
+            fieldProps={{
+              min: 1,
+              max: 10000,
+              precision: 0,
+              formatter: null,
+            }}
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="数字范围">
+          <ProField
+            text={[123, 456]}
+            valueType="digitRange"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="秒格式化">
+          <ProField
+            text={2000000}
+            valueType="second"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="百分比">
+          <ProField text="100" valueType="percent" mode={state} plain={plain} />
+        </Descriptions.Item>
+        <Descriptions.Item label="评分">
+          <ProField text={3.5} valueType="rate" mode={state} plain={plain} />
+        </Descriptions.Item>
+        <Descriptions.Item label="slider">
+          <ProField text="40" valueType="slider" mode={state} plain={plain} />
+        </Descriptions.Item>
+        <Descriptions.Item label="选择框">
+          <ProField
+            text="open"
+            mode={state}
+            valueEnum={{
+              all: { text: '全部', disabled: true, status: 'Default' },
+              open: {
+                text: '未解决',
+                status: 'Error',
+              },
+              closed: {
+                text: '已解决',
+                status: 'Success',
+              },
+              processing: {
+                text: '解决中',
+                status: 'Processing',
+              },
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="多选">
+          <ProField
+            text={['open', 'closed']}
+            mode={state}
+            valueType="checkbox"
+            valueEnum={{
+              all: { text: '全部', disabled: true, status: 'Default' },
+              open: {
+                text: '未解决',
+                status: 'Error',
+              },
+              closed: {
+                text: '已解决',
+                status: 'Success',
+              },
+              processing: {
+                text: '解决中',
+                status: 'Processing',
+              },
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="多选 labelInValue">
+          <ProField
+            text={[
+              {
+                value: 'open1',
+                label: '打开',
+              },
+              {
+                value: 'closed2',
+                label: '关闭',
+              },
+            ]}
+            mode={state}
+            valueType="checkbox"
+            valueEnum={{
+              all: { text: '全部', disabled: true, status: 'Default' },
+              open: {
+                text: '未解决',
+                status: 'Error',
+              },
+              closed: {
+                text: '已解决',
+                status: 'Success',
+              },
+              processing: {
+                text: '解决中',
+                status: 'Processing',
+              },
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="单选">
+          <ProField
+            text="open"
+            mode={state}
+            valueType="radio"
+            fieldProps={{
+              layout: 'horizontal',
+            }}
+            valueEnum={{
+              all: { text: '全部', disabled: true, status: 'Default' },
+              open: {
+                text: '未解决',
+                status: 'Error',
+              },
+              closed: {
+                text: '已解决',
+                status: 'Success',
+              },
+              processing: {
+                text: '解决中',
+                status: 'Processing',
+              },
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="单选按钮">
+          <ProField
+            text="open"
+            mode={state}
+            valueType="radioButton"
+            valueEnum={{
+              all: { text: '全部', disabled: true, status: 'Default' },
+              open: {
+                text: '未解决',
+                status: 'Error',
+              },
+              closed: {
+                text: '已解决',
+                status: 'Success',
+              },
+              processing: {
+                text: '解决中',
+                status: 'Processing',
+              },
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="远程选择框">
+          <ProField
+            text="open"
+            mode={state}
+            params={{
+              name: 'test',
+            }}
+            valueType="select"
+            request={async () => {
+              return [
+                { label: '全部', value: 'all' },
+                { label: '未解决', value: 'open' },
+                { label: '已解决', value: 'closed' },
+                { label: '解决中', value: 'processing' },
+                {
+                  label: '特殊选项',
+                  value: 'optGroup',
+                  optionType: 'optGroup',
+                  options: [
+                    { label: '不解决', value: 'no' },
+                    { label: '已废弃', value: 'clear' },
+                  ],
+                },
+              ];
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="远程级联框">
+          <ProField
+            mode={state}
+            params={{
+              name: 'test',
+            }}
+            valueType="cascader"
+            request={async () => {
+              return [
+                {
+                  value: 'zhejiang',
+                  label: 'Zhejiang',
+                  children: [
+                    {
+                      value: 'hangzhou',
+                      label: 'Hangzhou',
+                      children: [
+                        {
+                          value: 'xihu',
+                          label: 'West Lake',
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  value: 'jiangsu',
+                  label: 'Jiangsu',
+                  children: [
+                    {
+                      value: 'nanjing',
+                      label: 'Nanjing',
+                      children: [
+                        {
+                          value: 'zhonghuamen',
+                          label: 'Zhong Hua Men',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ];
+            }}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="进度条">
+          <ProField text="40" valueType="progress" mode={state} plain={plain} />
+        </Descriptions.Item>
+        <Descriptions.Item label="进度条">
+          <ProField
+            text="40%"
+            valueType="progress"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="进度条">
+          <ProField
+            text="love"
+            valueType="progress"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="百分比空值">
+          <ProField valueType="percent" mode="read" />
+        </Descriptions.Item>
+        <Descriptions.Item label="百分比">
+          <Space>
+            <ProField
+              text={10}
+              valueType={{
+                type: 'percent',
+                showSymbol: (text: number) => {
+                  if (text < 0) {
+                    return true;
+                  }
+                  return false;
+                },
+                showColor: true,
+              }}
+              mode="read"
+            />
+            <ProField
+              text={0}
+              valueType={{
+                type: 'percent',
+                showSymbol: true,
+                showColor: true,
+              }}
+              mode="read"
+            />
+            <ProField
+              text={-10}
+              valueType={{
+                type: 'percent',
+                showSymbol: true,
+                showColor: true,
+              }}
+              mode="read"
+            />
+          </Space>
+        </Descriptions.Item>
+        <Descriptions.Item label="日期时间">
+          <ProField
+            text={dayjs('2019-11-16 12:50:26').valueOf()}
+            valueType="dateTime"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="相对于当前时间">
+          <Space>
+            <ProField
+              text={dayjs('2019-11-16 12:50:26').valueOf()}
+              valueType="fromNow"
+              mode={state}
+              plain={plain}
+            />
+            <ProField
+              text={dayjs('2020-11-16 12:50:26').valueOf()}
+              valueType="fromNow"
+              mode={state}
+              plain={plain}
+            />
+          </Space>
+        </Descriptions.Item>
+        <Descriptions.Item label="日期">
+          <ProField
+            text={dayjs('2019-11-16 12:50:26').valueOf()}
+            valueType="date"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="日期区间">
+          <ProField
+            text={[
+              dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
+              dayjs('2019-11-16 12:50:26').valueOf(),
+            ]}
+            plain={plain}
+            valueType="dateRange"
+            mode={state}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="日期时间区间">
+          <ProField
+            text={[
+              dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
+              dayjs('2019-11-16 12:50:26').valueOf(),
+            ]}
+            plain={plain}
+            valueType="dateTimeRange"
+            mode={state}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="时间">
+          <ProField
+            text={dayjs('2019-11-16 12:50:26').valueOf()}
+            plain={plain}
+            valueType="time"
+            mode={state}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="时间区间">
+          <ProField
+            text={[
+              dayjs('2019-11-16 12:50:26').add(-1, 'd').valueOf(),
+              dayjs('2019-11-16 12:50:26').valueOf(),
+            ]}
+            plain={plain}
+            valueType="timeRange"
+            mode={state}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="密码">
+          <ProField
+            text="password"
+            plain={plain}
+            valueType="password"
+            mode={state}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="代码块">
+          <ProField
+            text={`
+yarn run v1.22.0            
+$ eslint --format=pretty ./packages
+Done in 9.70s.
+          `}
+            valueType="code"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="JSON 代码块">
+          <ProField
+            text={`{
+  "compilerOptions": {
+    "target": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+
+    "declaration": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/src", "**/docs", "scripts", "**/demo", ".eslintrc.js"]
+}
+`}
+            valueType="jsonCode"
+            mode={state}
+            plain={plain}
+          />
+        </Descriptions.Item>
+      </Descriptions>
+    </>
+  );
+};

package/packages/field/src/demos/search-value-autoClearSearchValue.tsx

@@ -0,0 +1,41 @@
+import { ProFormSelect } from '@ant-design/pro-components';
+
+export default function App() {
+  return (
+    <div>
+      <ProFormSelect
+        name="name"
+        placeholder="请输入搜索关键字"
+        allowClear
+        width={330}
+        secondary
+        mode="tags"
+        options={
+          [
+            {
+              v: 'v1',
+              l: 'l1',
+            },
+            {
+              v: 'v2',
+              l: 'l3',
+            },
+            {
+              v: 'v4',
+              l: 'l5',
+            },
+          ] as any
+        }
+        fieldProps={{
+          fieldNames: {
+            value: 'v',
+            label: 'l',
+            options: 'options',
+          },
+          showSearch: true, // 使单选模式可搜索
+          autoClearSearchValue: true,
+        }}
+      />
+    </div>
+  );
+}

package/packages/field/src/demos/search-value.tsx

@@ -0,0 +1,96 @@
+import { ProFormSelect } from '@ant-design/pro-components';
+import { useState } from 'react';
+
+export default function App() {
+  const [searchValue, setSearchValue] = useState('');
+  const [selectOpen, setSelectOpen] = useState(false);
+
+  function onBlur() {
+    setSelectOpen(false);
+  }
+
+  function onFocus() {
+    setSelectOpen(true);
+  }
+
+  /** 点击常用关键字的字母 */
+  function onClick(e: any) {
+    const text = e.target as HTMLSpanElement;
+    // 更改搜索框文字
+    setSearchValue(text.innerText);
+    onFocus();
+  }
+
+  /** 下拉搜索 */
+  function onSearch(value: string) {
+    setSearchValue(value);
+  }
+
+  /** 下拉选中 */
+  function onSelect() {
+    onBlur();
+  }
+
+  return (
+    <div>
+      <ProFormSelect
+        name="name"
+        placeholder="请输入搜索关键字"
+        allowClear
+        width={330}
+        secondary
+        options={
+          [
+            {
+              v: 'v1',
+              l: 'l1',
+            },
+            {
+              v: 'v2',
+              l: 'l3',
+            },
+            {
+              v: 'v4',
+              l: 'l5',
+            },
+          ] as any
+        }
+        fieldProps={{
+          fieldNames: {
+            value: 'v',
+            label: 'l',
+            options: 'options',
+          },
+          suffixIcon: null,
+          showSearch: true, // 使单选模式可搜索
+          popupMatchSelectWidth: false,
+          optionFilterProp: 'label', // 搜索时过滤对应的 option 属性
+          optionLabelProp: 'label', // 回填到选择框的 Option 的属性值
+          searchValue,
+          open: selectOpen,
+          onBlur: () => onBlur(),
+          onFocus: () => onFocus(),
+          onSearch: (val) => onSearch(val),
+          onSelect: () => onSelect(),
+        }}
+      />
+      <div className="keys">
+        <b>常用关键字：</b>
+        {['l', 'c', 'a'].map((item) => {
+          return (
+            <span
+              key={item}
+              onClick={onClick}
+              style={{
+                marginInlineStart: 8,
+                cursor: 'pointer',
+              }}
+            >
+              {item}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/packages/field/src/demos/select-request.tsx

@@ -0,0 +1,30 @@
+import { ProForm, ProFormSelect } from '@ant-design/pro-components';
+
+function App() {
+  return (
+    <div className="App">
+      <ProForm>
+        <ProFormSelect
+          showSearch
+          name="select"
+          request={async () => {
+            console.log('请求1');
+            return [{ label: '选项1', value: '1' }];
+          }}
+        />
+      </ProForm>
+      <ProForm>
+        <ProFormSelect
+          showSearch
+          name="select"
+          request={async () => {
+            console.log('请求2');
+            return [{ label: '选项2', value: '2' }];
+          }}
+        />
+      </ProForm>
+    </div>
+  );
+}
+
+export default App;