@nocobase/plugin-mobile-client 0.11.1-alpha.5 → 0.12.0-alpha.1

package/src/client/core/schema/components/header/Header.tsx

@@ -1,49 +0,0 @@
-import { useField } from '@formily/react';
-import { cx, SortableItem, useCompile, useDesigner, useDocumentTitle, useToken } from '@nocobase/client';
-import { NavBar, NavBarProps } from 'antd-mobile';
-import React, { useEffect, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { generateNTemplate } from '../../../../locale';
-import { HeaderDesigner } from './Header.Designer';
-
-export interface HeaderProps extends NavBarProps {
-  title?: string;
-  showBack?: boolean;
-}
-const InternalHeader = (props: HeaderProps) => {
-  const field = useField();
-  const { title = generateNTemplate('Untitled'), showBack = false } = { ...props, ...field?.componentProps };
-  const Designer = useDesigner();
-  const compile = useCompile();
-  const compiledTitle = compile(title);
-  const navigate = useNavigate();
-  const { setTitle } = useDocumentTitle();
-  const { token } = useToken();
-
-  useEffect(() => {
-    // sync title
-    setTitle(compiledTitle);
-  }, [compiledTitle]);
-
-  const style = useMemo(() => {
-    return {
-      width: '100%',
-      background: token.colorBgContainer,
-    };
-  }, [token.colorBgContainer]);
-
-  return (
-    <SortableItem className={cx('nb-mobile-header')} style={style}>
-      <NavBar backArrow={showBack} onBack={() => navigate(-1)}>
-        {compiledTitle}
-      </NavBar>
-      <Designer />
-    </SortableItem>
-  );
-};
-
-export const MHeader = InternalHeader as unknown as typeof InternalHeader & {
-  Designer: typeof HeaderDesigner;
-};
-
-MHeader.Designer = HeaderDesigner;

package/src/client/core/schema/components/header/index.ts

@@ -1 +0,0 @@
-export * from './Header';

package/src/client/core/schema/components/index.ts

@@ -1,6 +0,0 @@
-export * from './menu';
-export * from './container';
-export * from './tab-bar';
-export * from './page';
-export * from './header';
-export * from './settings';

package/src/client/core/schema/components/menu/Menu.Designer.tsx

@@ -1,46 +0,0 @@
-import { MenuOutlined } from '@ant-design/icons';
-import { useField, useFieldSchema } from '@formily/react';
-import { SchemaSettings, useDesignable } from '@nocobase/client';
-import { Button } from 'antd';
-import React from 'react';
-import { useTranslation } from '../../../../locale';
-
-export const MenuDesigner: React.FC = (props) => {
-  const { t } = useTranslation();
-  const fieldSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const field = useField();
-  const schemaSettingsProps = {
-    dn,
-    field,
-    fieldSchema,
-  };
-  return (
-    <SchemaSettings
-      title={
-        <Button
-          style={{
-            borderColor: 'var(--colorSettings)',
-            color: 'var(--colorSettings)',
-          }}
-          icon={<MenuOutlined />}
-          type="dashed"
-        >
-          {t('Menu configuration')}
-        </Button>
-      }
-      {...schemaSettingsProps}
-    >
-      <SchemaSettings.Remove
-        key="remove"
-        removeParentsIfNoChildren
-        confirm={{
-          title: t('Delete menu block'),
-        }}
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </SchemaSettings>
-  );
-};

package/src/client/core/schema/components/menu/Menu.Item.tsx

@@ -1,89 +0,0 @@
-import { useField, useFieldSchema } from '@formily/react';
-import {
-  GeneralSchemaDesigner,
-  Icon,
-  SchemaSettings,
-  SortableItem,
-  css,
-  cx,
-  useCompile,
-  useDesigner,
-} from '@nocobase/client';
-import { List, ListItemProps } from 'antd-mobile';
-import React from 'react';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { useTranslation } from '../../../../locale';
-import { useSchemaPatch } from '../../hooks';
-import { menuItemSchema } from './schema';
-
-interface MMenuItemProps extends ListItemProps {
-  name: string;
-  icon: string;
-}
-
-const InternalMenuItem: React.FC<MMenuItemProps> = (props) => {
-  const { icon, name } = props;
-  const Designer = useDesigner();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const fieldSchema = useFieldSchema();
-  const compile = useCompile();
-  const params = useParams<{ name: string }>();
-
-  const onToPage = () => {
-    const locationPath = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
-    navigate(params.name ? `/mobile/${fieldSchema['x-uid']}` : `${locationPath}/${fieldSchema['x-uid']}`);
-  };
-  return (
-    <SortableItem
-      className={cx(
-        'nb-mobile-menu-item',
-        css`
-          width: 100%;
-          background: var(--adm-color-background);
-          > .adm-list-item {
-            background: inherit;
-          }
-        `,
-      )}
-    >
-      <List.Item arrow clickable {...props} prefix={<Icon type={icon} />} onClick={onToPage}>
-        {compile(name)}
-      </List.Item>
-      <Designer></Designer>
-    </SortableItem>
-  );
-};
-
-const MenuItemDesigner: React.FC = () => {
-  const { t } = useTranslation();
-  const { onUpdateComponentProps } = useSchemaPatch();
-  const field = useField();
-
-  return (
-    <GeneralSchemaDesigner>
-      <SchemaSettings.ModalItem
-        title={t('Edit menu info')}
-        initialValues={field.componentProps}
-        schema={menuItemSchema}
-        onSubmit={onUpdateComponentProps}
-      />
-      <SchemaSettings.Remove
-        key="remove"
-        removeParentsIfNoChildren
-        confirm={{
-          title: t('Delete menu item?'),
-        }}
-        breakRemoveOn={{
-          'x-component': 'MMenu',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};
-
-export const MenuItem = InternalMenuItem as typeof InternalMenuItem as unknown as {
-  Designer: typeof MenuItemDesigner;
-};
-
-MenuItem.Designer = MenuItemDesigner;

package/src/client/core/schema/components/menu/Menu.tsx

@@ -1,75 +0,0 @@
-import { useFieldSchema } from '@formily/react';
-import {
-  cx,
-  DndContext,
-  SchemaComponent,
-  SchemaInitializer,
-  SortableItem,
-  useDesignable,
-  useDesigner,
-} from '@nocobase/client';
-import { List } from 'antd-mobile';
-import React from 'react';
-import { useTranslation } from '../../../../locale';
-import { PageSchema } from '../../common';
-import { MenuDesigner } from './Menu.Designer';
-import { MenuItem } from './Menu.Item';
-import { menuItemSchema } from './schema';
-import useStyles from './style';
-
-const InternalMenu: React.FC = (props) => {
-  const { styles } = useStyles();
-  const Designer = useDesigner();
-  const fieldSchema = useFieldSchema();
-  const { insertBeforeEnd, designable } = useDesignable();
-
-  const { t } = useTranslation();
-
-  const onAddMenuItem = (values: any) => {
-    const properties = {
-      page: PageSchema,
-    };
-
-    return insertBeforeEnd({
-      type: 'void',
-      title: values.name,
-      'x-component': 'MMenu.Item',
-      'x-component-props': values,
-      'x-designer': 'MMenu.Item.Designer',
-      properties,
-    });
-  };
-
-  return (
-    <SortableItem className={cx('nb-mobile-menu', styles.mobileMenu)}>
-      <List>
-        {designable && (
-          <List.Item>
-            <Designer />
-          </List.Item>
-        )}
-        <DndContext>
-          <SchemaComponent onlyRenderProperties schema={fieldSchema}></SchemaComponent>
-        </DndContext>
-        {designable ? (
-          <List.Item>
-            <SchemaInitializer.ActionModal
-              buttonText={t('Add menu item')}
-              title={t('Add menu item')}
-              schema={menuItemSchema}
-              onSubmit={onAddMenuItem}
-            />
-          </List.Item>
-        ) : null}
-      </List>
-    </SortableItem>
-  );
-};
-
-export const MMenu = InternalMenu as unknown as typeof InternalMenu & {
-  Item: typeof MenuItem;
-  Designer: typeof MenuDesigner;
-};
-
-MMenu.Item = MenuItem;
-MMenu.Designer = MenuDesigner;

package/src/client/core/schema/components/menu/MenuBlockInitializer.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { MenuOutlined } from '@ant-design/icons';
-import { SchemaInitializer } from '@nocobase/client';
-
-export const MMenuBlockInitializer = (props) => {
-  const { insert } = props;
-  return (
-    <SchemaInitializer.Item
-      icon={<MenuOutlined />}
-      onClick={async () => {
-        insert({
-          type: 'void',
-          'x-component': 'MMenu',
-          'x-designer': 'MMenu.Designer',
-          'x-component-props': {},
-        });
-      }}
-    />
-  );
-};

package/src/client/core/schema/components/menu/index.ts

@@ -1,2 +0,0 @@
-export * from './MenuBlockInitializer';
-export * from './Menu';

package/src/client/core/schema/components/menu/schema.ts

@@ -1,19 +0,0 @@
-import { generateNTemplate } from '../../../../locale';
-
-export const menuItemSchema = {
-  properties: {
-    name: {
-      type: 'string',
-      title: generateNTemplate('Menu name'),
-      required: true,
-      'x-component': 'Input',
-      'x-decorator': 'FormItem',
-    },
-    icon: {
-      'x-decorator': 'FormItem',
-      'x-component': 'IconPicker',
-      title: generateNTemplate('Icon'),
-      'x-component-props': {},
-    },
-  },
-};

package/src/client/core/schema/components/menu/style.ts

@@ -1,20 +0,0 @@
-import { createStyles } from '@nocobase/client';
-
-const useStyles = createStyles(({ token, css }) => {
-  return {
-    mobileMenu: css`
-      --adm-color-primary: ${token.colorPrimary};
-      --adm-color-primary-hover: ${token.colorPrimaryHover};
-      --adm-color-primary-active: ${token.colorPrimaryActive};
-      --padding-left: ${token.paddingSM}px;
-      --adm-color-background: ${token.colorBgContainer};
-      --adm-color-border: ${token.colorBorder};
-
-      background: ${token.colorBgContainer};
-      width: 100%;
-      margin-bottom: var(--nb-spacing);
-    `,
-  };
-});
-
-export default useStyles;

package/src/client/core/schema/components/page/Page.Designer.tsx

@@ -1,107 +0,0 @@
-import { MenuOutlined } from '@ant-design/icons';
-import { useField, useFieldSchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import { SchemaSettings, useDesignable } from '@nocobase/client';
-import { Button } from 'antd';
-import React from 'react';
-import { generateNTemplate, useTranslation } from '../../../../locale';
-import { findGridSchema } from '../../helpers';
-
-export const PageDesigner = (props) => {
-  const { showBack } = props;
-  const { t } = useTranslation();
-  const fieldSchema = useFieldSchema();
-  const { dn } = useDesignable();
-  const headerSchema = fieldSchema?.properties?.['header'];
-  const tabsSchema = fieldSchema?.properties?.['tabs'];
-  const field = useField();
-  const schemaSettingsProps = {
-    dn,
-    field,
-    fieldSchema,
-  };
-
-  return (
-    <SchemaSettings
-      title={
-        <Button
-          style={{
-            borderColor: 'var(--colorSettings)',
-            color: 'var(--colorSettings)',
-            width: '100%',
-          }}
-          icon={<MenuOutlined />}
-          type="dashed"
-        >
-          {t('Page configuration')}
-        </Button>
-      }
-      {...schemaSettingsProps}
-    >
-      <SchemaSettings.SwitchItem
-        checked={!!headerSchema}
-        title={t('Enable Header')}
-        onChange={async (v) => {
-          if (v) {
-            await dn.insertAfterBegin({
-              type: 'void',
-              name: 'header',
-              'x-component': 'MHeader',
-              'x-designer': 'MHeader.Designer',
-              'x-component-props': {
-                title: fieldSchema.parent['x-component-props']?.name,
-                showBack,
-              },
-            });
-          } else {
-            await dn.remove(headerSchema);
-          }
-          dn.refresh();
-        }}
-      />
-      <SchemaSettings.SwitchItem
-        checked={!!tabsSchema}
-        title={t('Enable Tabs')}
-        onChange={async (v) => {
-          if (v) {
-            const gridSchema = findGridSchema(fieldSchema);
-            if (gridSchema) {
-              return dn.remove(gridSchema).then(() => {
-                return dn.insertBeforeEnd({
-                  type: 'void',
-                  name: 'tabs',
-                  'x-component': 'Tabs',
-                  'x-component-props': {},
-                  'x-initializer': 'TabPaneInitializers',
-                  'x-initializer-props': {
-                    gridInitializer: 'MBlockInitializers',
-                  },
-                  properties: {
-                    tab1: {
-                      type: 'void',
-                      title: generateNTemplate('Untitled'),
-                      'x-component': 'Tabs.TabPane',
-                      'x-designer': 'Tabs.Designer',
-                      'x-component-props': {},
-                      properties: {
-                        grid: {
-                          ...gridSchema,
-                          'x-uid': uid(),
-                        },
-                      },
-                    },
-                  },
-                });
-              });
-            }
-          } else {
-            const gridSchema = findGridSchema(tabsSchema.properties[Object.keys(tabsSchema.properties)[0]]);
-            if (gridSchema) {
-              return dn.remove(tabsSchema).then(() => dn.insertBeforeEnd(gridSchema, {}));
-            }
-          }
-        }}
-      />
-    </SchemaSettings>
-  );
-};

package/src/client/core/schema/components/page/Page.tsx

@@ -1,115 +0,0 @@
-import { RecursionField, 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 { PageDesigner } from './Page.Designer';
-import useStyles from './style';
-
-const InternalPage: React.FC = (props) => {
-  const { styles } = useStyles();
-  const Designer = useDesigner();
-  const fieldSchema = useFieldSchema();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const tabsSchema = fieldSchema.properties?.['tabs'];
-  // Only support globalActions in page
-  const onlyInPage = fieldSchema.root === fieldSchema.parent;
-  let hasGlobalActions = false;
-  if (!tabsSchema && fieldSchema.properties) {
-    hasGlobalActions = countGridCol(fieldSchema.properties['grid'], 2) === 1;
-  } else if (searchParams.has('tab') && tabsSchema?.properties?.[searchParams.get('tab')]) {
-    hasGlobalActions = countGridCol(tabsSchema.properties[searchParams.get('tab')]?.properties?.['grid'], 2) === 1;
-  } else if (tabsSchema?.properties) {
-    const schema = Object.values(tabsSchema.properties).sort((t1, t2) => t1['x-index'] - t2['x-index'])[0];
-    if (schema) {
-      setTimeout(() => {
-        setSearchParams([['tab', schema.name.toString()]], {
-          replace: true,
-        });
-      });
-    }
-  }
-
-  const onTabsChange = useCallback<TabsProps['onChange']>(
-    (key) => {
-      setSearchParams([['tab', key]], {
-        replace: true,
-      });
-    },
-    [setSearchParams],
-  );
-
-  const GlobalActionProvider = useCallback(
-    (props) => {
-      if (hasGlobalActions) {
-        return (
-          <TabsContextProvider>
-            <ActionBarProvider
-              container={
-                (typeof props.active !== 'undefined' ? props.active : true) && onlyInPage
-                  ? document.getElementById('nb-position-container')
-                  : null
-              }
-              forceProps={{
-                layout: 'one-column',
-                className: styles.globalActionCSS,
-              }}
-            >
-              {props.children}
-            </ActionBarProvider>
-          </TabsContextProvider>
-        );
-      }
-      return <>{props.children}</>;
-    },
-    [hasGlobalActions, onlyInPage],
-  );
-
-  return (
-    <SortableItem eid="nb-mobile-scroll-wrapper" className={cx('nb-mobile-page', styles.mobilePage)}>
-      <Designer {...fieldSchema?.['x-designer-props']}></Designer>
-      <div
-        style={{
-          paddingBottom: tabsSchema ? null : 'var(--nb-spacing)',
-        }}
-        className={cx('nb-mobile-page-header', styles.mobilePageHeader)}
-      >
-        <RecursionField
-          schema={fieldSchema}
-          filterProperties={(s) => {
-            return 'MHeader' === s['x-component'];
-          }}
-        ></RecursionField>
-        <TabsContextProvider
-          PaneRoot={GlobalActionProvider}
-          activeKey={searchParams.get('tab')}
-          onChange={onTabsChange}
-        >
-          <RecursionField
-            schema={fieldSchema}
-            filterProperties={(s) => {
-              return 'Tabs' === s['x-component'];
-            }}
-          ></RecursionField>
-        </TabsContextProvider>
-      </div>
-      <GlobalActionProvider>
-        {!tabsSchema && (
-          <RecursionField
-            schema={fieldSchema}
-            filterProperties={(s) => {
-              return s['x-component'] !== 'MHeader';
-            }}
-          ></RecursionField>
-        )}
-      </GlobalActionProvider>
-    </SortableItem>
-  );
-};
-
-export const MPage = InternalPage as unknown as typeof InternalPage & {
-  Designer: typeof PageDesigner;
-};
-MPage.Designer = PageDesigner;
-MPage.displayName = 'MPage';

package/src/client/core/schema/components/page/index.ts

@@ -1 +0,0 @@
-export * from './Page';

package/src/client/core/schema/components/page/style.ts

@@ -1,43 +0,0 @@
-import { createStyles } from '@nocobase/client';
-
-const useStyles = createStyles(({ token, css }) => {
-  return {
-    globalActionCSS: css`
-      #nb-position-container > & {
-        height: ${token.sizeXXL}px;
-        border-top: 1px solid var(--nb-box-bg);
-        margin-bottom: 0px !important;
-        padding: 0 var(--nb-spacing);
-        align-items: center;
-        overflow-x: auto;
-        background: ${token.colorBgContainer};
-        z-index: 100;
-      }
-    `,
-
-    mobilePage: css`
-      background: var(--nb-box-bg);
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding-bottom: var(--nb-spacing);
-    `,
-
-    mobilePageHeader: css`
-      & > .ant-tabs > .ant-tabs-nav {
-        .ant-tabs-tab {
-          margin: 0 !important;
-          padding: 0 ${token.paddingContentHorizontal}px !important;
-        }
-        background: ${token.colorBgContainer};
-      }
-      display: flex;
-      flex-direction: column;
-    `,
-  };
-});
-
-export default useStyles;

package/src/client/core/schema/components/settings/Settings.Designer.tsx

@@ -1,22 +0,0 @@
-import { GeneralSchemaDesigner, SchemaSettings } from '@nocobase/client';
-import React from 'react';
-import { useTranslation } from '../../../../locale';
-
-export const SettingsDesigner = () => {
-  const { t } = useTranslation();
-
-  return (
-    <GeneralSchemaDesigner>
-      <SchemaSettings.Remove
-        key="remove"
-        removeParentsIfNoChildren
-        confirm={{
-          title: t('Delete settings block'),
-        }}
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};

package/src/client/core/schema/components/settings/Settings.tsx

@@ -1,24 +0,0 @@
-import { css, cx, SettingsMenu, SortableItem, useDesigner } from '@nocobase/client';
-import React from 'react';
-import { SettingsDesigner } from './Settings.Designer';
-export const InternalSettings = () => {
-  const Designer = useDesigner();
-  return (
-    <SortableItem
-      className={cx(
-        'nb-mobile-setting',
-        css`
-          margin-bottom: var(--nb-spacing);
-        `,
-      )}
-    >
-      <Designer />
-      <SettingsMenu redirectUrl="/mobile" />
-    </SortableItem>
-  );
-};
-export const MSettings = InternalSettings as unknown as typeof InternalSettings & {
-  Designer: typeof SettingsDesigner;
-};
-
-MSettings.Designer = SettingsDesigner;

package/src/client/core/schema/components/settings/SettingsBlockInitializer.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { SettingOutlined } from '@ant-design/icons';
-import { SchemaInitializer } from '@nocobase/client';
-
-export const MSettingsBlockInitializer = (props) => {
-  const { insert } = props;
-  return (
-    <SchemaInitializer.Item
-      icon={<SettingOutlined />}
-      onClick={async () => {
-        insert({
-          type: 'void',
-          'x-component': 'MSettings',
-          'x-designer': 'MSettings.Designer',
-          'x-component-props': {},
-        });
-      }}
-    />
-  );
-};

package/src/client/core/schema/components/settings/index.ts

@@ -1,2 +0,0 @@
-export * from './Settings';
-export * from './SettingsBlockInitializer';