perf(InternalPopoverNesterUsedInMobile): improve style performance

packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/InternalPopoverNester.style.ts

@@ -7,71 +7,78 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createStyles } from '@nocobase/client';
+import { genStyleHook } from '@nocobase/client';
+
+export const useInternalPopoverNesterUsedInMobileStyle = genStyleHook(
+  'nb-internal-popover-nester-used-in-mobile',
+  (token) => {
+    const { componentCls } = token;
 
-export const useInternalPopoverNesterUsedInMobileStyle = createStyles(({ css, token }: any) => {
     return {
-    header: css`
-      height: var(--nb-mobile-page-header-height);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid ${token.colorSplit};
-      position: sticky;
-      top: 0;
-      background-color: white;
-      z-index: 1000;
+      [componentCls]: {
+        '.nb-internal-popover-nester-used-in-mobile-header': {
+          height: 'var(--nb-mobile-page-header-height)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderBottom: `1px solid ${token.colorSplit}`,
+          position: 'sticky',
+          top: 0,
+          backgroundColor: 'white',
+          zIndex: 1000,
 
           // to match the button named 'Add block'
-      & + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn {
+          '& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn': {
             // 18px is the token marginBlock value
-        margin: 12px 12px calc(12px + 18px);
-      }
-    `,
+            margin: '12px 12px calc(12px + 18px)',
+          },
+        },
 
-    placeholder: css`
-      display: inline-block;
-      padding: 12px;
-      visibility: hidden;
-    `,
+        '.nb-internal-popover-nester-used-in-mobile-placeholder': {
+          display: 'inline-block',
+          padding: '12px',
+          visibility: 'hidden',
+        },
 
-    closeIcon: css`
-      display: inline-block;
-      padding: 12px;
-      cursor: pointer;
-    `,
+        '.nb-internal-popover-nester-used-in-mobile-close-icon': {
+          display: 'inline-block',
+          padding: '12px',
+          cursor: 'pointer',
+        },
 
-    body: css`
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-      max-height: calc(100% - var(--nb-mobile-page-header-height));
-      overflow-y: auto;
-      overflow-x: hidden;
-      // background-color: ${token.colorBgLayout};
+        '.nb-internal-popover-nester-used-in-mobile-body': {
+          borderTopLeftRadius: '8px',
+          borderTopRightRadius: '8px',
+          maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          // backgroundColor: token.colorBgLayout,
 
-      .popover-subform-container {
-        min-width: initial;
-        max-width: initial;
-        max-height: initial;
-        overflow: hidden;
-        .ant-card {
-          border-radius: 0;
-        }
-      }
-    `,
+          '.popover-subform-container': {
+            minWidth: 'initial',
+            maxWidth: 'initial',
+            maxHeight: 'initial',
+            overflow: 'hidden',
+            '.ant-card': {
+              borderRadius: 0,
+            },
+          },
+        },
 
-    footer: css`
-      padding: 8px var(--nb-mobile-page-tabs-content-padding);
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      position: sticky;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 1000;
-      border-top: 1px solid ${token.colorSplit};
-      background-color: ${token.colorBgLayout};
-    `,
+        '.nb-internal-popover-nester-used-in-mobile-footer': {
+          padding: '8px var(--nb-mobile-page-tabs-content-padding)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          position: 'sticky',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+          borderTop: `1px solid ${token.colorSplit}`,
+          backgroundColor: token.colorBgLayout,
+        },
+      },
     };
-});
+  },
+);

packages/plugins/@nocobase/plugin-mobile/src/client/adaptor-of-desktop/InternalPopoverNester.tsx

@@ -19,7 +19,7 @@ import { useInternalPopoverNesterUsedInMobileStyle } from './InternalPopoverNest
 const Container = (props) => {
   const { onOpenChange } = props;
   const { visiblePopup, popupContainerRef } = usePopupContainer(props.open);
-  const { styles } = useInternalPopoverNesterUsedInMobileStyle();
+  const { componentCls, hashId } = useInternalPopoverNesterUsedInMobileStyle();
   const field = useField();
   const { basicZIndex } = useBasicZIndex();
 
@@ -53,23 +53,24 @@ const Container = (props) => {
       <ConfigProvider theme={theme}>
         <div onClick={openPopup}>{props.children}</div>
         <Popup
+          className={`${componentCls} ${hashId}`}
           visible={visiblePopup}
           onClose={closePopup}
           onMaskClick={closePopup}
           getContainer={() => popupContainerRef.current as HTMLElement}
-          bodyClassName={styles.body}
+          bodyClassName="nb-internal-popover-nester-used-in-mobile-body"
           bodyStyle={zIndexStyle}
           maskStyle={zIndexStyle}
           showCloseButton
           closeOnSwipe
         >
-          <div className={styles.header}>
+          <div className="nb-internal-popover-nester-used-in-mobile-header">
             {/* used to make the title center */}
-            <span className={styles.placeholder}>
+            <span className="nb-internal-popover-nester-used-in-mobile-placeholder">
               <CloseOutline />
             </span>
             <span>{title}</span>
-            <span className={styles.closeIcon} onClick={closePopup}>
+            <span className="nb-internal-popover-nester-used-in-mobile-close-icon" onClick={closePopup}>
               <CloseOutline />
             </span>
           </div>