fix: should show/hide schema when enabled/disabled TabBar, Tabs, Header (#2428)

2023-08-14 20:32:40 +08:00 · 2023-08-14 20:32:40 +08:00 · 26cd9e810c
commit 26cd9e810c
parent b542802667
6 changed files with 131 additions and 111 deletions
--- a/packages/plugins/mobile-client/package.json
+++ b/packages/plugins/mobile-client/package.json
@ -20,7 +20,8 @@
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-i18next": "^11.15.1",
-    "react-router-dom": "^6.11.2"
+    "react-router-dom": "^6.11.2",
+    "ahooks": "^3.7.2"
  },
  "peerDependencies": {
    "@nocobase/client": "0.x",
--- a/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.Designer.tsx
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.Designer.tsx
@ -6,20 +6,21 @@ import { Button } from 'antd';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { generateNTemplate, useTranslation } from '../../../../locale';
-import { PageSchema } from '../../common';
 import { findSchema } from '../../helpers';
+import { useSchemaPatch } from '../../hooks';

 export const ContainerDesigner = () => {
  const { t } = useTranslation();
  const fieldSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const tabBarSchema = fieldSchema.reduceProperties(
-    (schema, next) => schema || (next['x-component'] === 'MTabBar' && next),
-  ) as Schema;
-
-  const navigate = useNavigate();
+  const { onUpdateComponentProps } = useSchemaPatch();

  const field = useField();
+  const { dn } = useDesignable();
+  const navigate = useNavigate();
+
+  const tabBarSchema = findSchema(fieldSchema, 'MTabBar');
+  const tabBarEnabled = tabBarSchema && field.componentProps.tabBarEnabled !== false;
+
  const schemaSettingsProps = {
    dn,
    field,
@ -43,13 +44,12 @@ export const ContainerDesigner = () => {
      {...schemaSettingsProps}
    >
      <SchemaSettings.SwitchItem
-        checked={!!tabBarSchema}
+        checked={tabBarEnabled}
        title={t('Enable TabBar')}
        onChange={async (v) => {
          if (v) {
+            if (!tabBarSchema) {
              const pageSchema = findSchema(fieldSchema, 'MPage');
-            if (!pageSchema) return;
-            await dn.remove(pageSchema);
              await dn.insertBeforeEnd({
                type: 'void',
                'x-component': 'MTabBar',
@ -70,17 +70,15 @@ export const ContainerDesigner = () => {
                  },
                },
              });
-          } else {
-            const tabBarSchemaFirstKey = Object.keys(tabBarSchema.properties || {})?.[0];
-            const pageSchema = tabBarSchemaFirstKey
-              ? findSchema(tabBarSchema.properties[tabBarSchemaFirstKey], 'MPage')
-              : null;
-            await dn.remove(tabBarSchema);
-            await dn.insertBeforeEnd(pageSchema || PageSchema, {
-              onSuccess() {
-                navigate('../');
-              },
+            }
+          }
+
+          await onUpdateComponentProps({
+            tabBarEnabled: v,
          });
+
+          if (v === false) {
+            navigate('../');
          }
        }}
      />
--- a/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.tsx
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/container/Container.tsx
@ -1,4 +1,4 @@
-import { useFieldSchema } from '@formily/react';
+import { useField, useFieldSchema } from '@formily/react';
 import { cx, SchemaComponent, SortableItem, useDesigner, useToken } from '@nocobase/client';
 import React, { useEffect } from 'react';
 import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
@ -36,6 +36,8 @@ const InternalContainer: React.FC = (props) => {
  const navigate = useNavigate();
  const params = useParams<{ name: string }>();
  const location = useLocation();
+  const field = useField();
+  const isTabBarEnabled = field.componentProps.tabBarEnabled !== false;
  const tabBarSchema = fieldSchema?.properties?.['tabBar'];
  const tabBarCurrentFirstKey = tabBarSchema?.properties ? Object.keys(tabBarSchema.properties)[0] : null;
  let redirectToUid = null;
@ -69,6 +71,7 @@ const InternalContainer: React.FC = (props) => {
          />
        )}
      </div>
+      {isTabBarEnabled && (
        <div className={cx('nb-mobile-container-tab-bar', styles.tabBar)}>
          <SchemaComponent
            onlyRenderProperties
@ -78,6 +81,7 @@ const InternalContainer: React.FC = (props) => {
            schema={fieldSchema}
          ></SchemaComponent>
        </div>
+      )}
    </SortableItem>
  );
 };
--- a/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.Designer.tsx
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.Designer.tsx
@ -6,15 +6,19 @@ import { Button } from 'antd';
 import React from 'react';
 import { generateNTemplate, useTranslation } from '../../../../locale';
 import { findGridSchema } from '../../helpers';
+import { useSchemaPatch } from '../../hooks';

 export const PageDesigner = (props) => {
  const { showBack } = props;
  const { t } = useTranslation();
+  const field = useField();
  const fieldSchema = useFieldSchema();
  const { dn } = useDesignable();
+  const { onUpdateComponentProps } = useSchemaPatch();
  const headerSchema = fieldSchema?.properties?.['header'];
+  const isHeaderEnabled = !!headerSchema && field.componentProps?.headerEnabled !== false;
  const tabsSchema = fieldSchema?.properties?.['tabs'];
-  const field = useField();
+  const isTabsEnabled = !!tabsSchema && field.componentProps?.tabsEnabled !== false;
  const schemaSettingsProps = {
    dn,
    field,
@ -39,10 +43,10 @@ export const PageDesigner = (props) => {
      {...schemaSettingsProps}
    >
      <SchemaSettings.SwitchItem
-        checked={!!headerSchema}
+        checked={isHeaderEnabled}
        title={t('Enable Header')}
        onChange={async (v) => {
-          if (v) {
+          if (!headerSchema) {
            await dn.insertAfterBegin({
              type: 'void',
              name: 'header',
@ -53,20 +57,19 @@ export const PageDesigner = (props) => {
                showBack,
              },
            });
-          } else {
-            await dn.remove(headerSchema);
          }
-          dn.refresh();
+          await onUpdateComponentProps({
+            headerEnabled: v,
+          });
        }}
      />
      <SchemaSettings.SwitchItem
-        checked={!!tabsSchema}
+        checked={isTabsEnabled}
        title={t('Enable Tabs')}
        onChange={async (v) => {
-          if (v) {
+          if (!tabsSchema) {
            const gridSchema = findGridSchema(fieldSchema);
-            if (gridSchema) {
-              return dn.remove(gridSchema).then(() => {
+            await dn.remove(gridSchema);
            return dn.insertBeforeEnd({
              type: 'void',
              name: 'tabs',
@ -92,14 +95,11 @@ export const PageDesigner = (props) => {
                },
              },
            });
+          }
+
+          await onUpdateComponentProps({
+            tabsEnabled: v,
          });
-            }
-          } else {
-            const gridSchema = findGridSchema(tabsSchema.properties[Object.keys(tabsSchema.properties)[0]]);
-            if (gridSchema) {
-              return dn.remove(tabsSchema).then(() => dn.insertBeforeEnd(gridSchema, {}));
-            }
-          }
        }}
      />
    </SchemaSettings>
--- a/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.tsx
+++ b/packages/plugins/mobile-client/src/client/core/schema/components/page/Page.tsx
@ -1,18 +1,32 @@
-import { RecursionField, useFieldSchema } from '@formily/react';
+import { RecursionField, useField, useFieldSchema } from '@formily/react';
 import { ActionBarProvider, SortableItem, TabsContextProvider, cx, useDesigner } from '@nocobase/client';
 import { TabsProps } from 'antd';
 import React, { useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { countGridCol } from '../../helpers';
+import { countGridCol, findSchema } from '../../helpers';
 import { PageDesigner } from './Page.Designer';
 import useStyles from './style';

 const InternalPage: React.FC = (props) => {
  const { styles } = useStyles();
  const Designer = useDesigner();
+  const field = useField();
  const fieldSchema = useFieldSchema();
  const [searchParams, setSearchParams] = useSearchParams();
  const tabsSchema = fieldSchema.properties?.['tabs'];
+  const isHeaderEnabled = field.componentProps.headerEnabled !== false;
+  const isTabsEnabled = field.componentProps.tabsEnabled !== false;
+
+  let pageSchema = findSchema(fieldSchema, 'MPage');
+  if (!isTabsEnabled && !pageSchema && tabsSchema) {
+    const schemaArr = Object.values(tabsSchema.properties || {}).sort((k1, k2) => {
+      return k1['x-index'] - k2['x-index'];
+    });
+    if (schemaArr.length !== 0) {
+      pageSchema = Object.values(schemaArr[0].properties)?.[0];
+    }
+  }
+
  // Only support globalActions in page
  const onlyInPage = fieldSchema.root === fieldSchema.parent;
  let hasGlobalActions = false;
@ -42,9 +56,9 @@ const InternalPage: React.FC = (props) => {

  const GlobalActionProvider = useCallback(
    (props) => {
-      if (hasGlobalActions) {
      return (
        <TabsContextProvider>
+          {hasGlobalActions ? (
            <ActionBarProvider
              container={
                (typeof props.active !== 'undefined' ? props.active : true) && onlyInPage
@ -58,12 +72,13 @@ const InternalPage: React.FC = (props) => {
            >
              {props.children}
            </ActionBarProvider>
+          ) : (
+            props.children
+          )}
        </TabsContextProvider>
      );
-      }
-      return <>{props.children}</>;
    },
-    [hasGlobalActions, onlyInPage],
+    [hasGlobalActions, onlyInPage, styles.globalActionCSS],
  );

  return (
@ -75,21 +90,23 @@ const InternalPage: React.FC = (props) => {
        }}
        className={cx('nb-mobile-page-header', styles.mobilePageHeader)}
      >
+        {isHeaderEnabled && (
          <RecursionField
            schema={fieldSchema}
            filterProperties={(s) => {
              return 'MHeader' === s['x-component'];
            }}
          ></RecursionField>
+        )}
        <TabsContextProvider
          PaneRoot={GlobalActionProvider}
          activeKey={searchParams.get('tab')}
          onChange={onTabsChange}
        >
          <RecursionField
-            schema={fieldSchema}
+            schema={isTabsEnabled ? fieldSchema : pageSchema}
            filterProperties={(s) => {
-              return 'Tabs' === s['x-component'];
+              return 'Tabs' === s['x-component'] || 'Grid.Row' === s['x-component'];
            }}
          ></RecursionField>
        </TabsContextProvider>
--- a/packages/plugins/mobile-client/src/client/core/schema/hooks/useSchemaPatch.ts
+++ b/packages/plugins/mobile-client/src/client/core/schema/hooks/useSchemaPatch.ts
@ -1,17 +1,17 @@
 import { useField, useFieldSchema } from '@formily/react';
 import { useDesignable } from '@nocobase/client';
 import lodash from 'lodash';
-import { useCallback } from 'react';
+import { useMemoizedFn } from 'ahooks';

 export const useSchemaPatch = () => {
  const { dn } = useDesignable();
  const fieldSchema = useFieldSchema();
  const field = useField();

-  const onUpdateComponentProps = useCallback((data) => {
+  const onUpdateComponentProps = useMemoizedFn(async (data) => {
    lodash.set(fieldSchema, 'x-component-props', data);
    field.componentProps = { ...field.componentProps, ...data };
-    dn.emit('patch', {
+    await dn.emit('patch', {
      schema: {
        ['x-uid']: fieldSchema['x-uid'],
        'x-component-props': fieldSchema['x-component-props'],
@ -23,8 +23,8 @@ export const useSchemaPatch = () => {
        ],
      },
    });
-    dn.refresh();
-  }, []);
+    await dn.refresh();
+  });

  return { onUpdateComponentProps };
 };