feat(FormRender): support readonly status

Barrior · Jan 4, 2024 · 5ba6ab3 · 5ba6ab3
1 parent 189e682
commit 5ba6ab3
Show file tree

Hide file tree

Showing 17 changed files with 164 additions and 2 deletions.
diff --git a/packages/form-render-react/src/components/Description.tsx b/packages/form-render-react/src/components/Description.tsx
@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react'
+
+const Description: FC<{ children: ReactNode }> = ({ children }) => {
+  return <>{children}</>
+}
+
+export default Description
diff --git a/packages/form-render-react/src/constants/index.tsx b/packages/form-render-react/src/constants/index.tsx
@@ -53,3 +53,9 @@ export type IActionsLoading = typeof ACTIONS_DEFAULT_LOADING_STATE
  * Actions 渲染器名称
  */
 export const ACTIONS_RENDER_TYPE = '__FORM_RENDER_ACTIONS__'
+
+/**
+ * 默认时间展示格式
+ */
+export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD'
+export const DEFAULT_DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
diff --git a/packages/form-render-react/src/locale/en_US.ts b/packages/form-render-react/src/locale/en_US.ts
@@ -7,5 +7,7 @@ export default {
     reset: 'Reset',
     placeholderInput: 'Please enter ${title}',
     placeholderSelect: 'Please select ${title}',
+    comma: ',',
+    displayDate: '${start} to ${end}',
   },
 }
diff --git a/packages/form-render-react/src/locale/zh_CN.ts b/packages/form-render-react/src/locale/zh_CN.ts
@@ -7,5 +7,7 @@ export default {
     reset: '重置',
     placeholderInput: '请输入${title}',
     placeholderSelect: '请选择${title}',
+    comma: '，',
+    displayDate: '${start} 至 ${end}',
   },
 }
diff --git a/packages/form-render-react/src/renderers/Checkbox.tsx b/packages/form-render-react/src/renderers/Checkbox.tsx
@@ -2,14 +2,25 @@ import type { IOpenComponentParams } from '@schema-render/core-react'
 import { Checkbox as AntCheckbox } from 'antd'
 import React from 'react'
 
+import Description from '../components/Description'
+import { getOptionsLabels } from '../utils'
+
 type IValue = Array<string | number | boolean>
 
 const Checkbox: React.FC<IOpenComponentParams<IValue>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
+  locale,
 }) => {
+  // 只读态
+  if (readonly) {
+    const labels = getOptionsLabels(schema.renderOptions?.options, value)
+    return <Description>{labels.join(locale.FormRender.comma)}</Description>
+  }
+
   return (
     <AntCheckbox.Group
       {...schema.renderOptions}

diff --git a/packages/form-render-react/src/renderers/DatePicker.tsx b/packages/form-render-react/src/renderers/DatePicker.tsx
@@ -4,11 +4,15 @@ import { DatePicker as AntDatePicker } from 'antd'
 import dayjs from 'dayjs'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from '../constants'
+
 const DatePicker: React.FC<IOpenComponentParams<string>> = ({
   schema,
   value,
   onChange,
   disabled,
+  readonly,
   locale,
   validator,
 }) => {
@@ -20,6 +24,22 @@ const DatePicker: React.FC<IOpenComponentParams<string>> = ({
     [schema.title, locale.FormRender.placeholderSelect]
   )
 
+  // 只读态
+  if (readonly) {
+    return (
+      <Description>
+        {value
+          ? dayjs(value).format(
+              schema.renderOptions?.format ||
+                (schema.renderOptions?.showTime
+                  ? DEFAULT_DATE_TIME_FORMAT
+                  : DEFAULT_DATE_FORMAT)
+            )
+          : ''}
+      </Description>
+    )
+  }
+
   return (
     <AntDatePicker
       allowClear

diff --git a/packages/form-render-react/src/renderers/DateRangePicker.tsx b/packages/form-render-react/src/renderers/DateRangePicker.tsx
@@ -1,9 +1,13 @@
 import type { IOpenComponentParams } from '@schema-render/core-react'
+import { utils } from '@schema-render/core-react'
 import { DatePicker } from 'antd'
 import type { Dayjs } from 'dayjs'
 import dayjs from 'dayjs'
 import React from 'react'
 
+import Description from '../components/Description'
+import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_TIME_FORMAT } from '../constants'
+
 function toISOString(date: Dayjs | string | null) {
   return dayjs(date).toISOString()
 }
@@ -13,8 +17,28 @@ const DateRangePicker: React.FC<IOpenComponentParams<[string, string]>> = ({
   value,
   onChange,
   disabled,
+  readonly,
   validator,
+  locale,
 }) => {
+  // 只读态
+  if (readonly) {
+    let displayText = ''
+
+    if (utils.isArray(value) && value[0] && value[1]) {
+      const defaultFormat = schema.renderOptions?.showTime
+        ? DEFAULT_DATE_TIME_FORMAT
+        : DEFAULT_DATE_FORMAT
+      const format = schema.renderOptions?.format || defaultFormat
+      displayText = utils.templateCompiled(locale.FormRender.displayDate, {
+        start: dayjs(value?.[0]).format(format),
+        end: dayjs(value?.[1]).format(format),
+      })
+    }
+
+    return <Description>{displayText}</Description>
+  }
+
   return (
     <DatePicker.RangePicker
       allowClear

diff --git a/packages/form-render-react/src/renderers/InputNumber.tsx b/packages/form-render-react/src/renderers/InputNumber.tsx
@@ -3,9 +3,12 @@ import { utils } from '@schema-render/core-react'
 import { InputNumber as AntInputNumber } from 'antd'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+
 const InputNumber: React.FC<IOpenComponentParams<number>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
   validator,
@@ -19,6 +22,11 @@ const InputNumber: React.FC<IOpenComponentParams<number>> = ({
     [schema.title, locale.FormRender.placeholderInput]
   )
 
+  // 只读态
+  if (readonly) {
+    return <Description>{value}</Description>
+  }
+
   return (
     <AntInputNumber
       style={{ width: '100%' }}

diff --git a/packages/form-render-react/src/renderers/InputText.tsx b/packages/form-render-react/src/renderers/InputText.tsx
@@ -3,9 +3,12 @@ import { utils } from '@schema-render/core-react'
 import { Input } from 'antd'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+
 const InputText: React.FC<IOpenComponentParams<string>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
   validator,
@@ -28,6 +31,11 @@ const InputText: React.FC<IOpenComponentParams<string>> = ({
     }
   }
 
+  // 只读态
+  if (readonly) {
+    return <Description>{value}</Description>
+  }
+
   return (
     <Input
       placeholder={placeholder}

diff --git a/packages/form-render-react/src/renderers/Password.tsx b/packages/form-render-react/src/renderers/Password.tsx
@@ -3,9 +3,12 @@ import { utils } from '@schema-render/core-react'
 import { Input } from 'antd'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+
 const Password: React.FC<IOpenComponentParams<string>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
   validator,
@@ -28,6 +31,11 @@ const Password: React.FC<IOpenComponentParams<string>> = ({
     }
   }
 
+  // 只读态
+  if (readonly) {
+    return <Description>{value}</Description>
+  }
+
   return (
     <Input.Password
       placeholder={placeholder}

diff --git a/packages/form-render-react/src/renderers/Radio.tsx b/packages/form-render-react/src/renderers/Radio.tsx
@@ -3,6 +3,9 @@ import type { RadioChangeEvent } from 'antd'
 import { Radio as AntRadio } from 'antd'
 import React from 'react'
 
+import Description from '../components/Description'
+import { getOptionsLabels } from '../utils'
+
 export interface IOptions {
   value: string | number
   label: string
@@ -12,6 +15,7 @@ export interface IOptions {
 const Radio: React.FC<IOpenComponentParams<IOptions['value']>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
 }) => {
@@ -22,6 +26,12 @@ const Radio: React.FC<IOpenComponentParams<IOptions['value']>> = ({
     onChange(e.target.value)
   }
 
+  // 只读态
+  if (readonly) {
+    const labels = getOptionsLabels(options, [value])
+    return <Description>{labels[0]}</Description>
+  }
+
   return (
     <AntRadio.Group value={value} onChange={onRadioChange} disabled={disabled}>
       {options.map((item) => {

diff --git a/packages/form-render-react/src/renderers/Rate.tsx b/packages/form-render-react/src/renderers/Rate.tsx
@@ -4,6 +4,7 @@ import { Rate as AntRate } from 'antd'
 const Rate: React.FC<IOpenComponentParams<number>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
 }) => {
@@ -12,7 +13,7 @@ const Rate: React.FC<IOpenComponentParams<number>> = ({
       {...schema.renderOptions}
       value={value ?? 0}
       onChange={(val) => onChange(val)}
-      disabled={disabled}
+      disabled={disabled || readonly}
     />
   )
 }

diff --git a/packages/form-render-react/src/renderers/Select.tsx b/packages/form-render-react/src/renderers/Select.tsx
@@ -3,9 +3,13 @@ import { utils } from '@schema-render/core-react'
 import { Select as AntSelect } from 'antd'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+import { getOptionsLabels } from '../utils'
+
 const Select: React.FC<IOpenComponentParams<string>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
   locale,
@@ -19,6 +23,12 @@ const Select: React.FC<IOpenComponentParams<string>> = ({
     [schema.title, locale.FormRender.placeholderSelect]
   )
 
+  // 只读态
+  if (readonly) {
+    const labels = getOptionsLabels(schema.renderOptions?.options, [value])
+    return <Description>{labels.join(locale.FormRender?.comma)}</Description>
+  }
+
   return (
     <AntSelect
       allowClear

diff --git a/packages/form-render-react/src/renderers/SelectMultiple.tsx b/packages/form-render-react/src/renderers/SelectMultiple.tsx
@@ -3,9 +3,13 @@ import { utils } from '@schema-render/core-react'
 import { Select as AntSelect } from 'antd'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+import { getOptionsLabels } from '../utils'
+
 const SelectMultiple: React.FC<IOpenComponentParams<string[]>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
   validator,
@@ -19,6 +23,12 @@ const SelectMultiple: React.FC<IOpenComponentParams<string[]>> = ({
     [schema.title, locale.FormRender.placeholderSelect]
   )
 
+  // 只读态
+  if (readonly) {
+    const labels = getOptionsLabels(schema.renderOptions?.options, value)
+    return <Description>{labels.join(locale.FormRender?.comma)}</Description>
+  }
+
   return (
     <AntSelect
       allowClear

diff --git a/packages/form-render-react/src/renderers/Switch.tsx b/packages/form-render-react/src/renderers/Switch.tsx
@@ -5,6 +5,7 @@ import React from 'react'
 const Switch: React.FC<IOpenComponentParams<boolean>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
 }) => {
@@ -13,7 +14,7 @@ const Switch: React.FC<IOpenComponentParams<boolean>> = ({
       {...schema.renderOptions}
       checked={value}
       onChange={(val) => onChange(val)}
-      disabled={disabled}
+      disabled={disabled || readonly}
     />
   )
 }

diff --git a/packages/form-render-react/src/renderers/TextArea.tsx b/packages/form-render-react/src/renderers/TextArea.tsx
@@ -3,9 +3,12 @@ import { utils } from '@schema-render/core-react'
 import { Input } from 'antd'
 import React, { useMemo } from 'react'
 
+import Description from '../components/Description'
+
 const TextArea: React.FC<IOpenComponentParams<string>> = ({
   schema,
   disabled,
+  readonly,
   value,
   onChange,
   validator,
@@ -28,6 +31,11 @@ const TextArea: React.FC<IOpenComponentParams<string>> = ({
     }
   }
 
+  // 只读态
+  if (readonly) {
+    return <Description>{value}</Description>
+  }
+
   return (
     <Input.TextArea
       rows={3}

diff --git a/packages/form-render-react/src/utils/index.ts b/packages/form-render-react/src/utils/index.ts
@@ -1,5 +1,6 @@
 import type { IBaseSchema, IRootSchema } from '@schema-render/core-react'
 import { utils } from '@schema-render/core-react'
+import type { CheckboxOptionType } from 'antd'
 
 import { ACTIONS_RENDER_TYPE } from '../constants'
 import type { IInnerFormRenderProps } from '../typings'
@@ -37,3 +38,28 @@ export function calcActionsMarginLeft({
   }
   return 0
 }
+
+/**
+ * 获取 Antd options 选项 label 数据
+ * @param options Antd options
+ * @param values label 对应的 value 值，可以多个
+ */
+export function getOptionsLabels(
+  options?: CheckboxOptionType[],
+  values?: (CheckboxOptionType['value'] | undefined)[]
+) {
+  const labels: string[] = []
+
+  if (utils.isArray(values) && utils.isArray(options)) {
+    values.forEach((value) => {
+      if (!utils.isNil(value)) {
+        const result = utils.find<CheckboxOptionType>(options, { value })
+        if (result) {
+          labels.push(result.label as string)
+        }
+      }
+    })
+  }
+
+  return labels
+}