@regenbio/regenbio-components-react 1.2.14 → 1.2.16

package/docs/components/valueType.tsx

@@ -0,0 +1,299 @@
+import type { ProFieldValueType } from '@ant-design/pro-components';
+import { BetaSchemaForm, ProFormSelect } from '@ant-design/pro-components';
+import { useState } from 'react';
+
+const valueEnum = {
+  all: { text: '全部', status: 'Default' },
+  open: {
+    text: '未解决',
+    status: 'Error',
+  },
+  closed: {
+    text: '已解决',
+    status: 'Success',
+    disabled: true,
+  },
+  processing: {
+    text: '解决中',
+    status: 'Processing',
+  },
+};
+
+const options = [
+  { value: `password`, label: `密码输入框`, initialValue: '123456' },
+  { value: `money`, label: `金额输入`, initialValue: '123456' },
+  { value: `textarea`, label: `文本域`, initialValue: '123456\n121212' },
+  { value: `date`, label: `日期`, initialValue: Date.now() },
+  { value: `dateTime`, label: `日期时间`, initialValue: Date.now() },
+  { value: `dateWeek`, label: `周`, initialValue: Date.now() },
+  { value: `dateMonth`, label: `月`, initialValue: Date.now() },
+  { value: `dateQuarter`, label: `季度输入`, initialValue: Date.now() },
+  { value: `dateYear`, label: `年份输入`, initialValue: Date.now() },
+  {
+    value: `dateRange`,
+    label: `日期区间`,
+    initialValue: [Date.now(), Date.now()],
+  },
+  {
+    value: `dateTimeRange`,
+    label: `日期时间区间`,
+    initialValue: [Date.now(), Date.now()],
+  },
+  { value: `time`, label: `时间`, initialValue: Date.now() },
+  {
+    value: `timeRange`,
+    label: `时间区间`,
+    initialValue: [Date.now(), Date.now()],
+  },
+  { value: `text`, label: `文本框`, initialValue: '123456' },
+  { value: `select`, label: `下拉框`, initialValue: 'open' },
+  {
+    value: 'treeSelect',
+    label: '树形下拉框',
+    initialValue: ['0-0', '0-0-0'],
+  },
+  { value: `checkbox`, label: `多选框`, initialValue: 'open' },
+  { value: `rate`, label: `星级组件`, initialValue: '' },
+  { value: `radio`, label: `单选框`, initialValue: 'open' },
+  { value: `radioButton`, label: `按钮单选框`, initialValue: 'open' },
+  { value: `progress`, label: `进度条`, initialValue: '10' },
+  { value: `percent`, label: `百分比组件`, initialValue: '20' },
+  { value: `digit`, label: `数字输入框`, initialValue: '200000' },
+  { value: `second`, label: `秒格式化`, initialValue: 20000 },
+  {
+    value: `avatar`,
+    label: `头像`,
+    initialValue:
+      'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+  },
+  { value: `code`, label: `代码框`, initialValue: '# 2121' },
+  { value: `switch`, label: `开关`, initialValue: 'open' },
+  { value: `fromNow`, label: `相对于当前时间`, initialValue: Date.now() },
+  {
+    value: `image`,
+    label: `图片`,
+    initialValue:
+      'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+  },
+  {
+    value: `jsonCode`,
+    label: `JSON代码框`,
+    initialValue: '{ "name":"qixian" }',
+  },
+  {
+    value: `color`,
+    label: `颜色选择器`,
+    initialValue: '#1890ff',
+  },
+  {
+    value: 'segmented',
+    label: '分段控制器',
+    initialValue: 'open',
+  },
+  {
+    value: 'formList',
+    label: '表单列表',
+    initalValue: [{ state: 'all', title: '标题' }],
+  },
+  {
+    value: 'formSet',
+    label: '表单集合',
+    initalValue: [{ state: 'all', title: '标题' }],
+  },
+  {
+    value: 'divider',
+    label: '分割线',
+    initalValue: '',
+  },
+];
+
+type DataItem = {
+  name: string;
+  state: string;
+};
+
+export default () => {
+  const [valueType, setValueType] = useState<ProFieldValueType>('text');
+  return (
+    <>
+      <ProFormSelect.SearchSelect
+        label="valueType 选择"
+        options={options}
+        width={200}
+        mode="single"
+        fieldProps={{
+          labelInValue: false,
+          value: valueType,
+          onChange: (value) => setValueType(value),
+        }}
+      />
+      <BetaSchemaForm<DataItem>
+        layoutType="Form"
+        onFinish={async (values) => {
+          console.log(values);
+        }}
+        initialValues={options.reduce((pre, item) => {
+          return {
+            ...pre,
+            [item.value]: item.initialValue,
+          };
+        }, {})}
+        columns={[
+          {
+            title: '分组',
+            valueType: 'group',
+            columns: [
+              {
+                valueType,
+                title: '编辑器',
+                dataIndex: valueType || 'text',
+                valueEnum: [
+                  'select',
+                  'checkbox',
+                  'radio',
+                  'radioButton',
+                  'segmented',
+                ].includes(valueType)
+                  ? valueEnum
+                  : undefined,
+                fieldProps:
+                  valueType === 'treeSelect'
+                    ? {
+                        multiple: true,
+                        options: [
+                          {
+                            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',
+                              },
+                            ],
+                          },
+                        ],
+                      }
+                    : valueType === 'divider'
+                    ? {
+                        style: {
+                          width: '200px',
+                        },
+                      }
+                    : undefined,
+                formItemProps: {
+                  rules: [
+                    {
+                      required: true,
+                      message: '此项为必填项',
+                    },
+                  ],
+                },
+                width: 'm',
+                columns: ['formSet', 'formList'].includes(valueType)
+                  ? [
+                      {
+                        valueType: 'group',
+                        columns: [
+                          {
+                            title: '状态',
+                            dataIndex: 'state',
+                            valueType: 'select',
+                            colProps: {
+                              xs: 24,
+                              sm: 12,
+                            },
+                            width: 'xs',
+                            valueEnum,
+                          },
+                          {
+                            title: '标题',
+                            dataIndex: 'title',
+                            width: 'md',
+                            formItemProps: {
+                              rules: [
+                                {
+                                  required: true,
+                                  message: '此项为必填项',
+                                },
+                              ],
+                            },
+                            colProps: {
+                              xs: 24,
+                              sm: 12,
+                            },
+                          },
+                          {
+                            valueType: 'dependency',
+                            name: ['state'],
+                            columns: ({ state }) => {
+                              if (state === 'all') {
+                                return [
+                                  {
+                                    dataIndex: 'money',
+                                    title: '优惠金额',
+                                    width: 'm',
+                                    valueType: 'money',
+                                  },
+                                ];
+                              }
+                              if (state === 'open') {
+                                return [
+                                  {
+                                    dataIndex: 'discount',
+                                    title: '折扣',
+                                    valueType: 'digit',
+                                    width: 'm',
+                                    fieldProps: {
+                                      precision: 2,
+                                    },
+                                  },
+                                ];
+                              }
+
+                              return [];
+                            },
+                          },
+                        ],
+                      },
+                    ]
+                  : undefined,
+              },
+              {
+                valueType,
+                title: '只读',
+                dataIndex: valueType || 'text',
+                valueEnum,
+                readonly: true,
+                width: 'm',
+              },
+            ],
+          },
+        ]}
+      />
+    </>
+  );
+};

package/docs/components.en-US.md

@@ -0,0 +1,183 @@
+---
+title: Component Overview
+order: 0
+---
+
+# Architecture Design
+
+ProComponents was developed to reduce the cost of implementing CRUD in the middle and backend, with the idea of reducing the necessary state maintenance and focusing more on the business.
+
+- [ProLayout](/components/layout) solves the layout problem and provides out-of-the-box menu and breadcrumb functionality
+- [ProTable](/components/table) solves table issues, abstracts web requests and table formatting
+- [ProForm](/components/form) solves form issues, pre-defines common layouts and behaviors
+- [ProCard](/components/card) provides card slicing and raster layout capabilities
+- [ProDescriptions](/components/descriptions) provides the ability to use the same configuration as a table
+- [ProSkeleton](/components/skeleton) Page level skeleton screen
+
+## Form layout toggle
+
+The main feature of ProForm is that it has a lot of pre-defined layouts, so if you need to switch you just need to change the Layout of the outer wrapper, here is a demo.
+
+<code src="../packages/form/src/demos/layout-change.tsx"></code>
+
+## Configuring Use with the Web Request Library
+
+ProTable, ProList uses a new data structure which is very easy to use if you use the parameters we have agreed upon.
+
+```tsx | pure
+const msg: {
+  data: T[];
+  page: number;
+  success: boolean;
+  total: number;
+} = {
+  data: [],
+  page: 1,
+  success: true,
+  total: 0,
+};
+```
+
+If your backend data uses a familiar url, we could use a request to convert it, but it would be a pain to configure each table. If you're using umi's request, we can define a global transformer. We need to configure this in app.tsx
+
+```tsx | pure
+import { RequestConfig } from 'umi';
+
+export const request: RequestConfig = {
+  errorConfig: {
+    adaptor: (resData) => {
+      // resData is our own data
+      return {
+        ... . resData,
+        total: resData.sum,
+        success: resData.ok,
+        errorMessage: resData.message,
+      };
+    },
+  },
+};
+
+// when used
+import { request } from 'umi';
+
+<ProTable request={request('/list')} />;
+```
+
+If fetch is used, you can customize fetch.
+
+```tsx | pure
+const request = (url, options) => {
+  return fetch(url, options)
+    .then((res) => res.json())
+    .then((resData) => {
+      return Promise.resolve({
+        ... . resData,
+        total: resData.sum,
+        success: resData.ok,
+        errorMessage: resData.message,
+      });
+    });
+};
+
+// when used
+<ProTable request={request('/list')} />;
+```
+
+## General Configuration
+
+ProTable, ProDescriptions share a common set of configurations that can use the same columns and requests to generate data, the only difference being that Table requires an array, while ProDescriptions only requires an object. Here are the specific configurations.
+
+```tsx | pure
+/**
+ * Commonly supported render for each component
+ */
+export type ProSchema<T = unknown, U = string, Extra = unknown> = {
+  /**
+   * @name Determines the unique value of this column
+   */
+  key?: (string | number);
+  /**
+   * @name The key mapped to the entity
+   * @description supports a number, [a,b] will be converted to obj.a.b
+   */
+  dataIndex?: string | number | (string | number)[];
+  /**
+   * Select how to render the corresponding pattern
+   */
+  valueType?: ((entity: T, type: ProSchemaComponentTypes) => U) | U;
+
+  /**
+   * @name title
+   * @description supports ReactNode and methods
+   */
+  title?:
+    | ((
+        schema: ProSchema<T, U, Extra>,
+        type: ProSchemaComponentTypes,
+        dom: React.ReactNode,
+      ReactNode, ) => React.)
+    | ReactNode;
+
+  /**
+   *@name shows an icon, hover shows some hints
+   */
+  tooltip?: LabelTooltipType | string;
+
+  /**
+   * @deprecated you can use tooltip, this change is for consistency with antd
+   */
+  tip?: string;
+
+  render?: (
+    dom: React.ReactNode,
+    entity: T,
+    index: number,
+    action: ProCoreActionType,
+    schema: ProSchema<T, U, Extra>,
+  ) => React.ReactNode;
+
+  /**
+   * @name Customize the edit schema
+   * @description returns a node that will automatically wrap value and onChange
+   */
+  renderFormItem?: (
+    item: ProSchema<T, U, Extra>,
+    config: {
+      index?: number;
+      value?: any;
+      onSelect?: (value: any) => void;
+      type: ProSchemaComponentTypes;
+      defaultRender: (newItem: ProSchema<T, U, Extra>) => JSX.Element | null;
+    },
+    form: FormInstance,
+  ) => React.ReactNode;
+
+  /**
+   * @name Custom render
+   * @description must return string
+   */
+  renderText?: (text: any, record: T, index: number, action: ProCoreActionType) => any;
+
+  fieldProps?: any;
+  /**
+   * @name The type of the mapped value
+   */
+  valueEnum?: ProSchemaValueEnumObj | ProSchemaValueEnumMap;
+
+  /**
+   * @name request enum from server
+   */
+  request?: ProFieldRequestData<ProSchema>;
+
+  /**
+   * @name Parameter requested from the server, changes will trigger a reload
+   */
+  params?: {
+    [key: string]: any;
+  };
+  /**
+   * @name hidden in descriptions
+   */
+  hideInDescriptions?: boolean;
+} & Extra;
+```

package/docs/components.md

@@ -0,0 +1,78 @@
+---
+title: 组件总览
+apiHeader: false
+order: 0
+---
+
+# 架构设计
+
+ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著地提升制作 CRUD 页面的效率，更加专注于页面。
+
+- [ProLayout](/components/layout) 解决布局的问题，提供开箱即用的菜单和面包屑功能
+- [ProTable](/components/table) 表格模板组件，抽象网络请求和表格格式化
+- [ProForm](/components/form) 表单模板组件，预设常见布局和行为
+- [ProCard](/components/card) 提供卡片切分以及栅格布局能力
+- [ProDescriptions](/components/descriptions) 定义列表模板组件，ProTable 的配套组件
+- [ProSkeleton](/components/skeleton) 页面级别的骨架屏
+
+> 如果您是阿里内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。TechUI 在封装 ProComponents 的基础上还提供了丰富的 Ant Design 扩展组件。
+
+## 与网络请求库配置使用
+
+ProTable 和 ProList 使用了新的数据结构，如果你使用了我们约定的参数使用起来会非常简单。
+
+```tsx | pure
+const msg: {
+  data: T[];
+  page: number;
+  success: boolean;
+  total: number;
+} = {
+  data: [],
+  page: 1,
+  success: true,
+  total: 0,
+};
+```
+
+如果你的后端数据使用了自己熟悉的 url，虽然我们可以用 Umi 的 request 来转化，但是每个 table 都需要配置就比较麻烦。如果你使用 Umi 的 request，我们可以定义一个全局的转化器。我们需要在 app.tsx 中配置
+
+```tsx | pure
+import { request, RequestConfig } from 'umi';
+
+export const request: RequestConfig = {
+  errorConfig: {
+    adaptor: (resData) => {
+      // resData 是我们自己的数据
+      return {
+        ...resData,
+        total: resData.sum,
+        success: resData.ok,
+        errorMessage: resData.message,
+      };
+    },
+  },
+};
+
+<ProTable request={request('/list')} />;
+```
+
+如果使用了 fetch ，可以对 fetch 进行自定义。
+
+```tsx | pure
+const request = (url, options) => {
+  return fetch(url, options)
+    .then((res) => res.json())
+    .then((resData) => {
+      return Promise.resolve({
+        ...resData,
+        total: resData.sum,
+        success: resData.ok,
+        errorMessage: resData.message,
+      });
+    });
+};
+
+// 使用时
+<ProTable request={request('/list')} />;
+```

package/docs/docs/faq.en-US.md

@@ -0,0 +1,75 @@
+---
+title: FAQ
+order: 3
+
+nav:
+  title: FAQ
+  path: /docs
+---
+
+## FAQ
+
+Here are some commonly asked questions from the ProComponents community along with official responses. Before asking a question, it is recommended to check if there are similar questions. Additionally, we maintain a [how to use tag](https://github.com/ant-design/pro-components/issues?q=is%3Aissue+label%3A%22%F0%9F%A4%B7%F0%9F%8F%BC+How+to+use%22+) , which has a higher number of feedback that you can refer to.
+
+### Can the data format returned by ProTable requests be customized?
+
+No, it is not possible. However, you can transform the data in the request or use an interceptor.
+
+[Example](https://beta-pro.ant.design/docs/request-cn)
+
+### How can I hide the label generated by ProTable search?
+
+The title property in columns supports a function, so you can write it like this:
+
+```typescript
+title: (_, type) => {
+  if (type === 'table') {
+    return '标题';
+  }
+  return null;
+};
+```
+
+### I'm unable to install `ProComponents` and its dependencies. By the way, I'm in the Mainland of China.
+
+Well, you can try [cnpm](http://npm.taobao.org/) and [yarn](https://www.npmjs.com/package/yarn).
+
+### `Form` within `initialValues`
+
+`ProComponents` is based on [antd](https://ant.design/index-cn), so the usage is similar to [antd](https://ant.design/index-cn). Note that `initialValues` cannot be dynamically updated using `setState`. You need to use `setFieldsValue` to update it. `initialValues` only takes effect once during `form` initialization. If you need to load asynchronously, it is recommended to use `request` or `initialValues ? <Form/> : null`.
+
+### Compatibility issues with browsers below Chrome 88
+
+Since `ProComponent` uses newer CSS properties, the desired compatibility may not be achieved in older browsers (even if your project has polyfills configured).
+
+Therefore, additional compatibility configurations are required:
+
+1. Configure according to this documentation: <https://ant.design/docs/react/compatible-style-cn>
+
+2. If it's a Umi project, you can configure in app.ts ：
+
+```typescript
+import {
+  StyleProvider,
+  legacyLogicalPropertiesTransformer,
+} from '@ant-design/cssinjs';
+
+export function rootContainer(container: React.ReactElement) {
+  return React.createElement(
+    StyleProvider,
+    {
+      hashPriority: 'high',
+      transformers: [legacyLogicalPropertiesTransformer],
+    },
+    container,
+  );
+}
+```
+
+## Errors and Warnings
+
+Here are some errors and warnings you may encounter while using ProComponents. However, some of them may not be related to ProComponents bugs.
+
+### Cannot read property 'Provider' of undefined
+
+Please make sure your Ant Design version is >= `4.11.1`