feat: themeCss支持数据域变量,循环数据支持单独样式 (baidu#9463)

* feat: themeCss支持数据域变量,循环数据支持单独样式 * feat: 自定义样式支持变量 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
lhtuling · Jan 23, 2024 · 3a6b138 · 3a6b138
1 parent 002b824
commit 3a6b138
Show file tree

Hide file tree

Showing 30 changed files with 732 additions and 229 deletions.
diff --git a/packages/amis-core/src/components/CustomStyle.tsx b/packages/amis-core/src/components/CustomStyle.tsx
@@ -12,13 +12,13 @@ interface CustomStyleProps {
     wrapperCustomStyle?: any;
     componentId?: string;
   } & InsertCustomStyle;
-  env: RendererEnv;
+  [propName: string]: any;
 }
 
 export const styleIdCount = new Map();
 
 export default function (props: CustomStyleProps) {
-  const {config, env} = props;
+  const {config, env, data} = props;
   const {themeCss, classNames, id, defaultData, wrapperCustomStyle} = config;
   if (!themeCss && !wrapperCustomStyle) {
     return null;
@@ -42,38 +42,46 @@ export default function (props: CustomStyleProps) {
 
   useEffect(() => {
     if (themeCss && id) {
-      insertCustomStyle(
+      insertCustomStyle({
         themeCss,
         classNames,
         id,
         defaultData,
-        env?.customStyleClassPrefix,
-        env.getModalContainer?.()?.ownerDocument
-      );
+        customStyleClassPrefix: env?.customStyleClassPrefix,
+        doc: env?.getModalContainer?.()?.ownerDocument,
+        data
+      });
     }
 
     return () => {
       if (id && !styleIdCount.get(id)) {
-        removeCustomStyle('', id, env.getModalContainer?.()?.ownerDocument);
+        removeCustomStyle(
+          '',
+          id,
+          env?.getModalContainer?.()?.ownerDocument,
+          data
+        );
       }
     };
   }, [themeCss, id]);
 
   useEffect(() => {
     if (wrapperCustomStyle && id) {
-      insertEditCustomStyle(
-        wrapperCustomStyle,
+      insertEditCustomStyle({
+        customStyle: wrapperCustomStyle,
         id,
-        env.getModalContainer?.()?.ownerDocument
-      );
+        doc: env?.getModalContainer?.()?.ownerDocument,
+        data
+      });
     }
 
     return () => {
       if (id && !styleIdCount.get(id)) {
         removeCustomStyle(
           'wrapperCustomStyle',
           id,
-          env.getModalContainer?.()?.ownerDocument
+          env?.getModalContainer?.()?.ownerDocument,
+          data
         );
       }
     };

diff --git a/packages/amis-core/src/renderers/Item.tsx b/packages/amis-core/src/renderers/Item.tsx
@@ -507,7 +507,13 @@ const getItemLabelClassName = (props: FormItemProps) => {
     ? staticLabelClassName
     : classNames(
         labelClassName,
-        setThemeClassName('labelClassName', id, themeCss, 'item')
+        setThemeClassName({
+          ...props,
+          name: 'labelClassName',
+          id,
+          themeCss,
+          extra: 'item'
+        })
       );
 };
 
@@ -916,12 +922,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               controlSize !== 'full'
           },
           model?.errClassNames,
-          setThemeClassName(
-            'wrapperCustomStyle',
-            rest.id,
-            rest.wrapperCustomStyle,
-            'item'
-          ),
+          setThemeClassName({
+            ...this.props,
+            name: 'wrapperCustomStyle',
+            id: rest.id,
+            themeCss: rest.wrapperCustomStyle,
+            extra: 'item'
+          }),
           getItemInputClassName(this.props)
         )
       });
@@ -994,12 +1001,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               [`is-required`]: required
             },
             model?.errClassNames,
-            setThemeClassName(
-              'wrapperCustomStyle',
+            setThemeClassName({
+              ...props,
+              name: 'wrapperCustomStyle',
               id,
-              wrapperCustomStyle,
-              'item'
-            )
+              themeCss: wrapperCustomStyle,
+              extra: 'item'
+            })
           )}
           style={style}
         >
@@ -1088,12 +1096,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   className: cx(
                     `Form-description`,
                     descriptionClassName,
-                    setThemeClassName(
-                      'descriptionClassName',
+                    setThemeClassName({
+                      ...props,
+                      name: 'descriptionClassName',
                       id,
                       themeCss,
-                      'item'
-                    )
+                      extra: 'item'
+                    })
                   )
                 })
               : null}
@@ -1146,12 +1155,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               [`is-required`]: required
             },
             model?.errClassNames,
-            setThemeClassName(
-              'wrapperCustomStyle',
+            setThemeClassName({
+              ...props,
+              name: 'wrapperCustomStyle',
               id,
-              wrapperCustomStyle,
-              'item'
-            )
+              themeCss: wrapperCustomStyle,
+              extra: 'item'
+            })
           )}
           style={style}
         >
@@ -1219,12 +1229,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                     className: cx(
                       `Form-description`,
                       descriptionClassName,
-                      setThemeClassName(
-                        'descriptionClassName',
+                      setThemeClassName({
+                        ...props,
+                        name: 'descriptionClassName',
                         id,
                         themeCss,
-                        'item'
-                      )
+                        extra: 'item'
+                      })
                     )
                   })
                 : null}
@@ -1271,12 +1282,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                     className: cx(
                       `Form-description`,
                       descriptionClassName,
-                      setThemeClassName(
-                        'descriptionClassName',
+                      setThemeClassName({
+                        ...props,
+                        name: 'descriptionClassName',
                         id,
                         themeCss,
-                        'item'
-                      )
+                        extra: 'item'
+                      })
                     )
                   })
                 : null}
@@ -1330,12 +1342,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               [`is-required`]: required
             },
             model?.errClassNames,
-            setThemeClassName(
-              'wrapperCustomStyle',
+            setThemeClassName({
+              ...props,
+              name: 'wrapperCustomStyle',
               id,
-              wrapperCustomStyle,
-              'item'
-            )
+              themeCss: wrapperCustomStyle,
+              extra: 'item'
+            })
           )}
           style={style}
         >
@@ -1405,12 +1418,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                   className: cx(
                     `Form-description`,
                     descriptionClassName,
-                    setThemeClassName(
-                      'descriptionClassName',
+                    setThemeClassName({
+                      ...props,
+                      name: 'descriptionClassName',
                       id,
                       themeCss,
-                      'item'
-                    )
+                      extra: 'item'
+                    })
                   )
                 })
               : null}
@@ -1463,12 +1477,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
               [`is-required`]: required
             },
             model?.errClassNames,
-            setThemeClassName(
-              'wrapperCustomStyle',
+            setThemeClassName({
+              ...props,
+              name: 'wrapperCustomStyle',
               id,
-              wrapperCustomStyle,
-              'item'
-            )
+              themeCss: wrapperCustomStyle,
+              extra: 'item'
+            })
           )}
           style={style}
         >
@@ -1539,12 +1554,13 @@ export class FormItemWrap extends React.Component<FormItemProps> {
                 className: cx(
                   `Form-description`,
                   descriptionClassName,
-                  setThemeClassName(
-                    'descriptionClassName',
+                  setThemeClassName({
+                    ...props,
+                    name: 'descriptionClassName',
                     id,
                     themeCss,
-                    'item'
-                  )
+                    extra: 'item'
+                  })
                 )
               })
             : null}
@@ -1597,6 +1613,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
             )
           : null}
         <CustomStyle
+          {...this.props}
           config={{
             themeCss: themeCss || css,
             classNames: [