docs(FormRender): improve documentation

Barrior · Jan 5, 2024 · a6abcc5 · a6abcc5
1 parent 09ff0f7
commit a6abcc5
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 2 deletions.
diff --git a/examples/form-render-react/500-builtin-renderers.md b/examples/form-render-react/500-builtin-renderers.md
@@ -8,25 +8,45 @@ toc: content
 `FormRender` 内置了常用的表单渲染器集合
 
 ```tsx
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
+import { Button } from 'antd'
 import SyntaxHighlighter from '@examples/components/SyntaxHighlighter'
 import FormRender from '@schema-render/form-render-react'
+import * as styles from './styles'
 
+// 引入所有渲染器的 Schema
 import schema from './schemas/all'
 
 const Demo = () => {
+  const [isReadonly, setIsReadonly] = useState(false)
   const [value, setValue] = useState<object>({
     Description: '纯展示的内容吧啦吧啦',
   })
 
+  const registerActions = useMemo(() => {
+    return {
+      readonly: () => (
+        <Button type="dashed" onClick={() => setIsReadonly(!isReadonly)}>
+          {isReadonly ? '取消 ' : '设置为 '}readonly 状态
+        </Button>
+      ),
+    }
+  }, [isReadonly])
+
   return (
     <div className="example-layout-cols-2">
       <FormRender
-        rootStyle={{ minWidth: 550 }}
+        rootClassName={styles.builtinRenderers}
         labelWidth={230}
         schema={schema}
         value={value}
         onChange={setValue}
+        actions={['submit', 'reset', 'readonly']}
+        registerActions={registerActions}
+        // 是否只读状态
+        readonly={isReadonly}
+        // 只读状态没有数据时的占位符
+        readonlyPlaceholder={<span style={{ color: '#666', fontSize: 14 }}>-</span>}
       />
       <SyntaxHighlighter value={value} />
     </div>
@@ -38,6 +58,10 @@ export default Demo
 
 如无特别说明，内置渲染器的参数可以通过 `schema.renderOptions` 传递，对应 [Antd](https://ant-design.antgroup.com/components/overview-cn/) 组件的参数。
 
+## Description
+
+非 Antd Descriptions 组件，无入参，仅作纯数据展示。
+
 ## DatePicker
 
 返回 [ISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) 格式的日期值，该值可以更好的支持跨时区的需要。

diff --git a/examples/form-render-react/800-api-reference.md b/examples/form-render-react/800-api-reference.md
@@ -14,6 +14,7 @@ toc: content
 | **rootClassName**              | 根节点样式名                                                                          | `string`                                                                                                    | -                     |
 | **rootStyle**                  | 根节点样式                                                                            | `string`                                                                                                    | -                     |
 | **itemLayout**                 | 表单项布局结构                                                                        | `horizontal` \| `vertical` \| [React.ComponentType\<IOpenItemLayoutParams\>](../core-react/101-item-layout) | `horizontal`          |
+| **readonlyPlaceholder**        | 只读状态没有数据时的占位符，`null`、`undefined`、`空字符串` 会被判定为空数据          | `ReactNode`                                                                                                 | `-`                   |
 | **labelWidth**                 | 标签（标题块）宽度                                                                    | `number` \| `string`                                                                                        | `100`                 |
 | **labelColon**                 | 标签冒号                                                                              | `ReactNode`                                                                                                 | -                     |
 | **labelGap**                   | 标签与右侧内容的间距                                                                  | `number`                                                                                                    | `15`                  |

diff --git a/examples/form-render-react/schemas/all.ts b/examples/form-render-react/schemas/all.ts
@@ -82,6 +82,7 @@ const schema: IRootSchema = {
       renderType: 'DatePicker',
       renderOptions: {
         placeholder: '请选择日期',
+        format: 'YYYY年MM月DD日',
       },
     },
     DateRangePicker: {

diff --git a/examples/form-render-react/styles/index.ts b/examples/form-render-react/styles/index.ts
@@ -0,0 +1,12 @@
+import { cij } from '@examples/utils/cssinjs'
+
+export const builtinRenderers = cij`
+  min-width: 550px;
+  font-size: 15px;
+
+  .schema-render-form-actions {
+    margin-left: 0 !important;
+    display: flex;
+    justify-content: center;
+  }
+`