Feat/1.2.5/UI (#753)

Author: shuashuai

ui/src/components/SchemaForm/README.md

@@ -183,8 +183,9 @@ export interface BaseUIOptions {
   empty?: string;
   // Will be appended to the className of the form component itself
   className?: classnames.Argument;
+  class_name?: classnames.Argument;
   // The className that will be attached to a form field container
-  fieldClassName?: classnames.Argument;
+  field_class_name?: classnames.Argument;
   // Make a form component render into simplified mode
   readOnly?: boolean;
   simplify?: boolean;

ui/src/components/SchemaForm/components/Legend.tsx

@@ -22,9 +22,10 @@ import { Form } from 'react-bootstrap';
 
 interface Props {
   title: string;
+  className?: string | undefined;
 }
-const Index: FC<Props> = ({ title }) => {
-  return <Form.Label>{title}</Form.Label>;
+const Index: FC<Props> = ({ title, className }) => {
+  return <Form.Label className={className}>{title}</Form.Label>;
 };
 
 export default Index;

ui/src/components/SchemaForm/index.tsx

@@ -260,16 +260,19 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
           uiSchema?.[key] || {};
         formData ||= {};
         const fieldState = formData[key];
+        if (uiOpt?.class_name) {
+          uiOpt.className = uiOpt.class_name;
+        }
 
         const uiSimplify = widget === 'legend' || uiOpt?.simplify;
-        let groupClassName: BaseUIOptions['fieldClassName'] = uiOpt?.simplify
+        let groupClassName: BaseUIOptions['field_class_name'] = uiOpt?.simplify
           ? 'mb-2'
           : 'mb-3';
         if (widget === 'legend') {
           groupClassName = 'mb-0';
         }
-        if (uiOpt?.fieldClassName) {
-          groupClassName = uiOpt.fieldClassName;
+        if (uiOpt?.field_class_name) {
+          groupClassName = uiOpt.field_class_name;
         }
 
         const readOnly = uiOpt?.readOnly || false;
@@ -285,7 +288,9 @@ const SchemaForm: ForwardRefRenderFunction<FormRef, FormProps> = (
             {/* Uniform processing `label` */}
             {title && !uiSimplify ? <Form.Label>{title}</Form.Label> : null}
             {/* Handling of individual specific controls */}
-            {widget === 'legend' ? <Legend title={title} /> : null}
+            {widget === 'legend' ? (
+              <Legend title={title} className={String(uiOpt?.className)} />
+            ) : null}
             {widget === 'select' ? (
               <Select
                 desc={description}

ui/src/components/SchemaForm/types.ts

@@ -58,8 +58,9 @@ export interface BaseUIOptions {
   empty?: string;
   // Will be appended to the className of the form component itself
   className?: classnames.Argument;
+  class_name?: classnames.Argument;
   // The className that will be attached to a **form field container**
-  fieldClassName?: classnames.Argument;
+  field_class_name?: classnames.Argument;
   // Make a form component render into simplified mode
   readOnly?: boolean;
   simplify?: boolean;

ui/src/pages/Admin/SettingsUsers/index.tsx

@@ -137,7 +137,7 @@ const Index: FC = () => {
       'ui:widget': 'switch',
       'ui:options': {
         label: t('allow_update_location.label'),
-        fieldClassName: 'mb-3',
+        field_class_name: 'mb-3',
         simplify: true,
       },
     },