📝 docs: update doc

dream2023 · Apr 17, 2021 · 82f6ffe · 82f6ffe
1 parent 8c8a5c6
commit 82f6ffe
Show file tree

Hide file tree

Showing 20 changed files with 8,046 additions and 502 deletions.
diff --git a/.umirc.js b/.umirc.js
@@ -125,7  125,7 @@ export default {
     '/components': [
       {
         title: '架构设计',
-        children: ['components.md'],
         children: ['components.md', 'schema.md'],
       },
       {
         title: '布局',

diff --git a/docs/components.md b/docs/components.md
@@ -1,5  1,5 @@
 ---
-title: ProComponents - 组件总览
 title: 组件总览
 order: 0
 group:
   path: /

diff --git a/docs/demos/customization-value-type.tsx b/docs/demos/customization-value-type.tsx
@@ -0,0  1,214 @@
 import React, { useContext, useRef, useState } from 'react';
 import type { ProFormColumnsType } from '@ant-design/pro-form';
 import { BetaSchemaForm } from '@ant-design/pro-form';
 import ProProvider from '@ant-design/pro-provider';
 import { Input, Space, Tag } from 'antd';
 import ProTable from '@ant-design/pro-table';
 import ProDescriptions from '@ant-design/pro-descriptions';
 import ProCard from '@ant-design/pro-card';
 
 const valueEnum = {
   0: 'close',
   1: 'running',
   2: 'online',
   3: 'error',
 };
 
 export type TableListItem = {
   key: number;
   name: string;
   status: {
     label: string | number;
     value: number;
   }[];
 };
 
 const TagList: React.FC<{
   value?: {
     key: string;
     label: string;
   }[];
   onChange?: (
     value: {
       key: string;
       label: string;
     }[],
   ) => void;
 }> = ({ value, onChange }) => {
   const ref = useRef<Input | 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>
   );
 };
 
 const columns: ProFormColumnsType<TableListItem, 'link' | 'tags'>[] = [
   {
     title: '标签',
     valueType: 'group',
     columns: [
       {
         title: '只读链接',
         readonly: true,
         dataIndex: 'name',
         valueType: 'link',
       },
       {
         title: '链接',
         dataIndex: 'name',
         valueType: 'link',
       },
     ],
   },
   {
     title: '路径',
     valueType: 'group',
     columns: [
       {
         title: '标签',
         dataIndex: 'status',
         key: 'status',
         valueType: 'tags',
       },
       {
         title: '只读标签',
         readonly: true,
         dataIndex: 'status',
         key: 'status',
         valueType: 'tags',
       },
     ],
   },
 ];
 
 const tableColumns = [
   {
     title: '链接',
     dataIndex: 'name',
     valueType: 'link',
   },
   {
     title: '标签',
     dataIndex: 'status',
     key: 'status',
     valueType: 'tags',
   },
 ];
 
 const initialValue = {
   key: 1,
   name: `TradeCode 1`,
   status: [
     {
       value: Math.floor(Math.random() * 10),
       label: valueEnum[Math.floor(Math.random() * 10) % 4],
     },
     {
       value: Math.floor(Math.random() * 10),
       label: valueEnum[Math.floor(Math.random() * 10) % 4],
     },
   ],
 };
 
 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} />,
           },
         },
       }}
     >
       <ProCard
         title="SchemaForm"
         bordered
         style={{
           marginBottom: 24,
         }}
       >
         <BetaSchemaForm<TableListItem, 'link' | 'tags'>
           initialValues={initialValue}
           columns={columns}
           title="自定义 valueType"
         />
       </ProCard>
       <ProCard
         title="ProTable"
         bordered
         style={{
           marginBottom: 24,
         }}
       >
         <ProTable
           columns={tableColumns}
           pagination={false}
           toolBarRender={false}
           dataSource={[initialValue]}
         />
       </ProCard>
       <ProCard
         title="ProDescriptions"
         bordered
         style={{
           marginBottom: 24,
         }}
       >
         <ProDescriptions columns={tableColumns} dataSource={initialValue} />
       </ProCard>
     </ProProvider.Provider>
   );
 };
diff --git a/docs/demos/valueType.tsx b/docs/demos/valueType.tsx
@@ -0,0  1,133 @@
 import React, { useState } from 'react';
 import { BetaSchemaForm, ProFormSelect } from '@ant-design/pro-form';
 import type { ProFieldValueType } from '@ant-design/pro-utils';
 
 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: `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',
   },
 ];
 
 type DataItem = {
   name: string;
   state: string;
 };
 
 export default () => {
   const [valueType, setValueType] = useState<ProFieldValueType>('text');
   return (
     <>
       <ProFormSelect.SearchSelect
         label="valueType 选择"
         options={options}
         width={200}
         mode="singe"
         fieldProps={{
           labelInValue: false,
           value: valueType,
           onChange: (value) => setValueType(value),
         }}
       />
       <BetaSchemaForm<DataItem>
         trigger={<a>点击我</a>}
         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,
                 formItemProps: {
                   rules: [
                     {
                       required: true,
                       message: '此项为必填项',
                     },
                   ],
                 },
                 width: 'm',
               },
               {
                 valueType,
                 title: '只读',
                 dataIndex: valueType || 'text',
                 valueEnum,
                 readonly: true,
                 width: 'm',
               },
             ],
           },
         ]}
       />
     </>
   );
 };