From 32962d47fbef4a5cd59df0431eb4df951c36f521 Mon Sep 17 00:00:00 2001
From: Wells <ww.sun@outlook.com>
Date: Mon, 29 Jan 2024 13:32:27 +0800
Subject: [PATCH] feat: add showItemSubtitle and renderItemExtra to SettingForm
 (#99)

* feat: add showItemSubtitle to SettingFormItem

* feat: add renderItemExtra to SettingForm
---
 apps/storybook/src/setting-form.stories.tsx |  8 ++++++-
 packages/setting-form/src/context.tsx       |  4 ++++
 packages/setting-form/src/form-item.tsx     |  4 ++--
 packages/setting-form/src/form.tsx          | 25 ++++++++++++++++-----
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx
index 385cf38..85393dd 100644
--- a/apps/storybook/src/setting-form.stories.tsx
+++ b/apps/storybook/src/setting-form.stories.tsx
@@ -262,7 +262,13 @@ export function Basic() {
 export function Lite() {
   return (
     <Box width={320} border="solid">
-      <SettingForm showSearch={false} showGroups={false} prototype={prototype} />
+      <SettingForm
+        showSearch={false}
+        showGroups={false}
+        showItemSubtitle={false}
+        prototype={prototype}
+        disableSwitchExpressionSetter
+      />
     </Box>
   );
 }
diff --git a/packages/setting-form/src/context.tsx b/packages/setting-form/src/context.tsx
index 58d5fc9..6d0c997 100644
--- a/packages/setting-form/src/context.tsx
+++ b/packages/setting-form/src/context.tsx
@@ -15,6 +15,10 @@ export interface FormVariableContextType {
    * 是否允许表单项切换到表达式设置器
    */
   disableSwitchExpressionSetter?: boolean;
+  /**
+   * 是否展示表单项的副标题
+   */
+  showItemSubtitle?: boolean;
 }
 
 const FormVariableContext = createContext<FormVariableContextType>(null);
diff --git a/packages/setting-form/src/form-item.tsx b/packages/setting-form/src/form-item.tsx
index 95a55d5..8960079 100644
--- a/packages/setting-form/src/form-item.tsx
+++ b/packages/setting-form/src/form-item.tsx
@@ -79,7 +79,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     extra,
     footer,
   }: FormItemProps) {
-    const { disableSwitchExpressionSetter } = useFormVariable();
+    const { disableSwitchExpressionSetter, showItemSubtitle } = useFormVariable();
     const model = useFormModel();
     const field = model.getField(name);
     const value = toJS(field.value ?? defaultValue);
@@ -141,7 +141,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
       <FormControl
         visible={getVisible(model)}
         label={title}
-        note={name}
+        note={showItemSubtitle ? name : null}
         tip={tip}
         docs={docs}
         error={field.error}
diff --git a/packages/setting-form/src/form.tsx b/packages/setting-form/src/form.tsx
index c44204f..a876609 100644
--- a/packages/setting-form/src/form.tsx
+++ b/packages/setting-form/src/form.tsx
@@ -95,6 +95,14 @@ export interface SettingFormProps {
    * 是否显示分组导航
    */
   showGroups?: boolean;
+  /**
+   * 是否显示表单项的副标题
+   */
+  showItemSubtitle?: boolean;
+  /**
+   * 自定义渲染表单项的额外内容（标签右侧）
+   */
+  renderItemExtra?: (props: ComponentPropType) => React.ReactNode;
   /**
    * 选项分组信息，用于对表单项进行分组展示，如未提供，则使用内置的分组信息
    */
@@ -113,6 +121,8 @@ export function SettingForm({
   onChange = noop,
   showSearch = true,
   showGroups = true,
+  showItemSubtitle = true,
+  renderItemExtra,
   groupOptions = internalGroups,
 }: SettingFormProps) {
   const [keyword, setKeyword] = useState('');
@@ -149,14 +159,19 @@ export function SettingForm({
     (props: ComponentPropType[]) =>
       props.map((item) => {
         const { getProp, ...rest } = item;
-        const childProto = {
+        const childProp = {
           ...rest,
           ...getProp?.(model),
         };
-        const FormChild = isValidNestProps(childProto.props) ? SettingFormObject : SettingFormItem;
-        return <FormChild key={item.name} {...childProto} />;
+        if (isValidNestProps(childProp.props)) {
+          return <SettingFormObject key={item.name} {...childProp} />;
+        } else {
+          return (
+            <SettingFormItem key={item.name} extra={renderItemExtra?.(childProp)} {...childProp} />
+          );
+        }
       }),
-    [model],
+    [model, renderItemExtra],
   );
 
   useEffect(() => {
@@ -167,7 +182,7 @@ export function SettingForm({
   }, [modelProp]);
 
   return (
-    <FormVariableProvider value={{ disableSwitchExpressionSetter }}>
+    <FormVariableProvider value={{ disableSwitchExpressionSetter, showItemSubtitle }}>
       <FormModelProvider value={model}>
         <Box className="SettingForm" mb="xl" css={formStyle}>
           <Box className="SettingFormHeader" position="sticky" top="0" bg="white" zIndex="2">