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

@@ -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>
   );
 }

packages/setting-form/src/context.tsx

@@ -15,6 +15,10 @@ export interface FormVariableContextType {
    * 是否允许表单项切换到表达式设置器
    */
   disableSwitchExpressionSetter?: boolean;
+  /**
+   * 是否展示表单项的副标题
+   */
+  showItemSubtitle?: boolean;
 }
 
 const FormVariableContext = createContext<FormVariableContextType>(null);

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}

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">