@regenbio/regenbio-components-react 1.2.16 → 1.2.18

package/packages/descriptions/src/demos/columns.tsx

@@ -1,127 +0,0 @@
-import { ProDescriptions } from '@ant-design/pro-components';
-
-export default () => {
-  return (
-    <ProDescriptions
-      title="高级定义列表request columns"
-      request={async () => {
-        return Promise.resolve({
-          success: true,
-          data: {
-            date: '20200809',
-            money: '1212100',
-            money2: -12345.33,
-            state: 'all',
-            switch: true,
-            state2: 'open',
-          },
-        });
-      }}
-      emptyText={'空'}
-      columns={[
-        {
-          title: '文本',
-          key: 'text',
-          dataIndex: 'id',
-        },
-        {
-          title: '状态',
-          key: 'state',
-          dataIndex: 'state',
-          valueType: 'select',
-          valueEnum: {
-            all: { text: '全部', status: 'Default' },
-            open: {
-              text: '未解决',
-              status: 'Error',
-            },
-            closed: {
-              text: '已解决',
-              status: 'Success',
-            },
-          },
-        },
-        {
-          title: '状态2',
-          key: 'state2',
-          dataIndex: 'state2',
-        },
-        {
-          title: '时间',
-          key: 'date',
-          dataIndex: 'date',
-          valueType: 'date',
-        },
-        {
-          title: '时间',
-          key: 'date',
-          dataIndex: 'date',
-          valueType: 'date',
-          fieldProps: {
-            format: 'DD.MM.YYYY',
-          },
-        },
-        {
-          title: '开关',
-          key: 'switch',
-          dataIndex: 'switch',
-          valueType: 'switch',
-        },
-        {
-          title: 'money',
-          key: 'money',
-          dataIndex: 'money',
-          valueType: 'money',
-          fieldProps: {
-            moneySymbol: '$',
-          },
-        },
-        {
-          title: 'money无符号',
-          key: 'money',
-          dataIndex: 'money',
-          valueType: 'money',
-          fieldProps: {
-            moneySymbol: false,
-          },
-        },
-        {
-          title: 'money负数无符号',
-          key: 'money2',
-          dataIndex: 'money2',
-          valueType: 'money',
-          fieldProps: {
-            moneySymbol: false,
-          },
-        },
-        {
-          title: '操作',
-          valueType: 'option',
-          render: () => [
-            <a target="_blank" rel="noopener noreferrer" key="link">
-              链路
-            </a>,
-            <a target="_blank" rel="noopener noreferrer" key="warning">
-              报警
-            </a>,
-            <a target="_blank" rel="noopener noreferrer" key="view">
-              查看
-            </a>,
-          ],
-        },
-      ]}
-    >
-      <ProDescriptions.Item
-        dataIndex="percent"
-        label="百分比"
-        valueType="percent"
-      >
-        100
-      </ProDescriptions.Item>
-      <div>多余的dom</div>
-      <ProDescriptions.Item label="超链接">
-        <a href="alipay.com">超链接</a>
-      </ProDescriptions.Item>
-    </ProDescriptions>
-  );
-};

package/packages/descriptions/src/demos/customization-value-type.tsx

@@ -1,166 +0,0 @@
-import { ProDescriptions, ProProvider } from '@ant-design/pro-components';
-import type { InputRef } from 'antd';
-import { Input, Space, Tag } from 'antd';
-import React, { useContext, useRef, useState } from 'react';
-
-const valueEnum = {
-  0: 'close',
-  1: 'running',
-  2: 'online',
-  3: 'error',
-};
-
-export type TableListItem = {
-  key: number;
-  name: string;
-  status: {
-    label: string | number;
-    value: number;
-  }[];
-};
-const tableListDataSource: TableListItem = {
-  key: 1,
-  name: `TradeCode 1`,
-  status: [
-    {
-      value: Math.floor(Math.random() * 10),
-      label: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
-    },
-    {
-      value: Math.floor(Math.random() * 10),
-      label: valueEnum[((Math.floor(Math.random() * 10) % 4) + '') as '0'],
-    },
-  ],
-};
-
-const TagList: React.FC<{
-  value?: {
-    key: string;
-    label: string;
-  }[];
-  onChange?: (
-    value: {
-      key: string;
-      label: string;
-    }[],
-  ) => void;
-}> = ({ value, onChange }) => {
-  const ref = useRef<InputRef | null>(null);
-  const [newTags, setNewTags] = useState<
-    {
-      key: string;
-      label: string;
-    }[]
-  >([]);
-  const [inputValue, setInputValue] = useState<string>('');
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-  };
-
-  const handleInputConfirm = () => {
-    let tempsTags = [...(value || [])];
-    if (
-      inputValue &&
-      tempsTags.filter((tag) => tag.label === inputValue).length === 0
-    ) {
-      tempsTags = [
-        ...tempsTags,
-        { key: `new-${tempsTags.length}`, label: inputValue },
-      ];
-    }
-    onChange?.(tempsTags);
-    setNewTags([]);
-    setInputValue('');
-  };
-
-  return (
-    <Space>
-      {(value || []).concat(newTags).map((item) => (
-        <Tag key={item.key}>{item.label}</Tag>
-      ))}
-      <Input
-        ref={ref}
-        type="text"
-        size="small"
-        style={{ width: 78 }}
-        value={inputValue}
-        onChange={handleInputChange}
-        onBlur={handleInputConfirm}
-        onPressEnter={handleInputConfirm}
-      />
-    </Space>
-  );
-};
-
-export default () => {
-  const values = useContext(ProProvider);
-  return (
-    <ProProvider.Provider
-      value={{
-        ...values,
-        valueTypeMap: {
-          link: {
-            render: (text) => <a>{text}</a>,
-            renderFormItem: (text, props) => (
-              <Input placeholder="请输入链接" {...props?.fieldProps} />
-            ),
-          },
-          tags: {
-            render: (text) => {
-              return (
-                <>
-                  {[text].flat(1).map((item) => (
-                    <Tag key={item.value}>{item.label}</Tag>
-                  ))}
-                </>
-              );
-            },
-            renderFormItem: (text, props) => (
-              <TagList {...props} {...props?.fieldProps} />
-            ),
-          },
-        },
-      }}
-    >
-      <ProDescriptions<TableListItem, 'link' | 'tags'>
-        columns={[
-          {
-            title: '链接',
-            dataIndex: 'name',
-            valueType: 'link',
-          },
-          {
-            title: '标签',
-            dataIndex: 'status',
-            key: 'status',
-            valueType: 'tags',
-          },
-          {
-            title: '操作',
-            key: 'option',
-            valueType: 'option',
-            render: (_, row, index, action) => [
-              <a
-                key="a"
-                onClick={() => {
-                  action?.reload();
-                }}
-              >
-                刷新
-              </a>,
-            ],
-          },
-        ]}
-        editable={{}}
-        request={() => {
-          return Promise.resolve({
-            data: tableListDataSource,
-            success: true,
-          });
-        }}
-        title="自定义 valueType"
-      />
-    </ProProvider.Provider>
-  );
-};

package/packages/descriptions/src/demos/dynamic-descriptions.tsx

@@ -1,319 +0,0 @@
-import {
-  ProCard,
-  ProDescriptions,
-  ProForm,
-  ProFormDependency,
-  ProFormDigit,
-  ProFormList,
-  ProFormSelect,
-  ProFormSwitch,
-  ProFormText,
-  ProFormTextArea,
-} from '@ant-design/pro-components';
-import { useState } from 'react';
-
-const valueTypeArray = [
-  'password',
-  'money',
-  'textarea',
-  'option',
-  'date',
-  'dateWeek',
-  'dateMonth',
-  'dateQuarter',
-  'dateYear',
-  'dateRange',
-  'dateTimeRange',
-  'dateTime',
-  'time',
-  'timeRange',
-  'text',
-  'select',
-  'checkbox',
-  'rate',
-  'radio',
-  'radioButton',
-  'index',
-  'indexBorder',
-  'progress',
-  'percent',
-  'digit',
-  'second',
-  'avatar',
-  'code',
-  'switch',
-  'fromNow',
-  'image',
-  'jsonCode',
-];
-
-const initialValues = {
-  title: '高级定义列表',
-  column: '3',
-  columns: [
-    {
-      title: '文本',
-      key: 'text',
-      dataIndex: 'id',
-    },
-    {
-      title: '状态',
-      key: 'state',
-      dataIndex: 'state',
-      valueType: 'select',
-      valueEnum: {
-        all: { text: '全部', status: 'Default' },
-        open: {
-          text: '未解决',
-          status: 'Error',
-        },
-        closed: {
-          text: '已解决',
-          status: 'Success',
-        },
-      },
-    },
-    {
-      title: '状态2',
-      key: 'state2',
-      dataIndex: 'state2',
-    },
-    {
-      title: '时间',
-      key: 'date',
-      dataIndex: 'date',
-      valueType: 'date',
-    },
-    {
-      title: 'money',
-      key: 'money',
-      dataIndex: 'money',
-      valueType: 'money',
-    },
-    {
-      title: '百分比',
-      key: 'percent',
-      dataIndex: 'percent',
-      valueType: 'percent',
-    },
-    {
-      title: '操作',
-      valueType: 'option',
-      render: () => [
-        <a target="_blank" rel="noopener noreferrer" key="link">
-          链路
-        </a>,
-        <a target="_blank" rel="noopener noreferrer" key="warning">
-          报警
-        </a>,
-        <a target="_blank" rel="noopener noreferrer" key="view">
-          查看
-        </a>,
-      ],
-    },
-  ],
-};
-
-export default () => {
-  const [values, setValues] = useState<Record<string, any>>(initialValues);
-  return (
-    <ProCard
-      bordered
-      split="vertical"
-      headerBordered
-      style={{
-        minHeight: 500,
-      }}
-    >
-      <ProCard colSpan="calc(100% - 580px)">
-        <ProDescriptions
-          title="高级定义列表"
-          {...values}
-          columns={values?.columns?.filter(Boolean) || []}
-          request={async () => {
-            return Promise.resolve({
-              success: true,
-              data: {
-                id: '这是一段文本columns',
-                date: '20200809',
-                money: '1212100',
-                state: 'all',
-                state2: 'open',
-                percent: '20%',
-              },
-            });
-          }}
-        />
-      </ProCard>
-      <ProForm
-        initialValues={values}
-        onValuesChange={(_, allValue) => {
-          setValues({ ...initialValues, ...allValue });
-        }}
-        submitter={false}
-      >
-        <ProCard
-          colSpan="580px"
-          title="配置菜单"
-          tabs={{
-            items: [
-              {
-                label: '基本配置',
-                key: 'base',
-                children: (
-                  <>
-                    <ProFormText label="标题" name="title" />
-                    <ProForm.Group>
-                      <ProFormSelect
-                        name="layout"
-                        label="布局"
-                        initialValue="horizontal"
-                        options={[
-                          {
-                            label: '水平',
-                            value: 'horizontal',
-                          },
-                          {
-                            label: '垂直',
-                            value: 'vertical',
-                          },
-                        ]}
-                      />
-                      <ProFormSwitch
-                        label="加载中"
-                        tooltip="loading"
-                        name="loading"
-                      />
-                      <ProFormSelect
-                        name="size"
-                        label="尺寸"
-                        initialValue="default"
-                        options={[
-                          {
-                            label: '大',
-                            value: 'default',
-                          },
-                          {
-                            label: '中',
-                            value: 'middle',
-                          },
-                          {
-                            label: '小',
-                            value: 'small',
-                          },
-                        ]}
-                      />
-
-                      <ProFormSwitch
-                        label="边框"
-                        tooltip="bordered"
-                        name="bordered"
-                      />
-                      <ProFormDigit width="xs" label="列数" name="column" />
-                    </ProForm.Group>
-                  </>
-                ),
-              },
-              {
-                label: '列配置',
-                key: 'columns',
-                children: (
-                  <ProFormList
-                    name="columns"
-                    label="列配置"
-                    creatorButtonProps={{
-                      position: 'top',
-                    }}
-                    itemRender={({ listDom, action }) => {
-                      return (
-                        <ProCard
-                          bordered
-                          style={{
-                            marginBlockEnd: 8,
-                            position: 'relative',
-                          }}
-                        >
-                          <div
-                            style={{
-                              position: 'absolute',
-                              top: -2,
-                              right: 4,
-                            }}
-                          >
-                            {action}
-                          </div>
-                          {listDom}
-                        </ProCard>
-                      );
-                    }}
-                  >
-                    <ProForm.Group size={16} key="Group">
-                      <ProFormText label="标题" name="title" />
-                      <ProFormDigit
-                        width="xs"
-                        initialValue={1}
-                        label="占据列数"
-                        name="span"
-                      />
-                      <ProFormSelect
-                        width="xs"
-                        label="值类型"
-                        name="valueType"
-                        options={valueTypeArray.map((value) => ({
-                          label: value,
-                          value,
-                        }))}
-                      />
-                      <ProFormSelect
-                        label="dataIndex"
-                        width="xs"
-                        name="dataIndex"
-                        valueEnum={{
-                          age: 'age',
-                          address: 'address',
-                          name: 'name',
-                          time: 'time',
-                          description: 'string',
-                        }}
-                      />
-                    </ProForm.Group>
-                    <ProFormDependency
-                      key="valueType"
-                      name={['valueType', 'valueEnum']}
-                    >
-                      {({ valueType, valueEnum }) => {
-                        if (valueType !== 'select') {
-                          return null;
-                        }
-                        return (
-                          <ProFormTextArea
-                            formItemProps={{
-                              style: {
-                                marginBlockStart: 8,
-                              },
-                            }}
-                            fieldProps={{
-                              value: JSON.stringify(valueEnum),
-                            }}
-                            normalize={(value) => {
-                              return JSON.parse(value);
-                            }}
-                            label="数据枚举"
-                            name="valueEnum"
-                          />
-                        );
-                      }}
-                    </ProFormDependency>
-                  </ProFormList>
-                ),
-              },
-            ],
-          }}
-          style={{
-            width: 500,
-          }}
-        />
-      </ProForm>
-    </ProCard>
-  );
-};