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

package/src/client/core/schema/components/tab-bar/TabBar.Item.tsx

@@ -1,66 +0,0 @@
-import { useField, useFieldSchema } from '@formily/react';
-import { css, cx, GeneralSchemaDesigner, SchemaSettings, SortableItem, useDesigner } from '@nocobase/client';
-import { TabBarItemProps } from 'antd-mobile';
-import React from 'react';
-import { useTranslation } from '../../../../locale';
-import { useSchemaPatch } from '../../hooks';
-import { tabItemSchema } from './schema';
-
-const InternalItem: React.FC<TabBarItemProps> = () => {
-  // NOTE: nothing to do
-  // return <TabBar.Item {...props}></TabBar.Item>;
-  const Designer = useDesigner();
-  return (
-    <SortableItem
-      className={cx(
-        'nb-mobile-tab-bar-item',
-        css`
-          position: absolute !important;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-        `,
-      )}
-    >
-      <Designer />
-    </SortableItem>
-  );
-};
-
-export const Designer = () => {
-  const { t } = useTranslation();
-  const fieldSchema = useFieldSchema();
-  const { onUpdateComponentProps } = useSchemaPatch();
-  const field = useField();
-  const tabItems = Object.keys(fieldSchema.parent.properties).length;
-
-  return (
-    <GeneralSchemaDesigner>
-      <SchemaSettings.ModalItem
-        title={t('Edit info')}
-        initialValues={field.componentProps}
-        schema={tabItemSchema}
-        onSubmit={onUpdateComponentProps}
-      ></SchemaSettings.ModalItem>
-      {tabItems > 1 ? (
-        <SchemaSettings.Remove
-          key="remove"
-          removeParentsIfNoChildren
-          confirm={{
-            title: t('Delete tab item?'),
-          }}
-          breakRemoveOn={{
-            'x-component': 'MTabBar',
-          }}
-        ></SchemaSettings.Remove>
-      ) : null}
-    </GeneralSchemaDesigner>
-  );
-};
-
-export const TabBarItem = InternalItem as unknown as typeof InternalItem & {
-  Designer: typeof Designer;
-};
-
-TabBarItem.Designer = Designer;

package/src/client/core/schema/components/tab-bar/TabBar.tsx

@@ -1,115 +0,0 @@
-import { useFieldSchema } from '@formily/react';
-import { uid } from '@formily/shared';
-import {
-  css,
-  cx,
-  DndContext,
-  Icon,
-  SchemaComponent,
-  SchemaInitializer,
-  SortableItem,
-  useCompile,
-  useDesignable,
-} from '@nocobase/client';
-import { TabBar } from 'antd-mobile';
-import React, { useCallback } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-import { useTranslation } from '../../../../locale';
-import { PageSchema } from '../../common';
-import { tabItemSchema } from './schema';
-import { TabBarItem } from './TabBar.Item';
-
-export const InternalTabBar: React.FC = (props) => {
-  const fieldSchema = useFieldSchema();
-  const { designable } = useDesignable();
-  const { t } = useTranslation();
-  const { insertBeforeEnd } = useDesignable();
-  const navigate = useNavigate();
-  const params = useParams<{ name: string }>();
-  const compile = useCompile();
-
-  const onAddTab = useCallback((values: any) => {
-    return insertBeforeEnd({
-      type: 'void',
-      'x-component': 'MTabBar.Item',
-      'x-component-props': values,
-      'x-designer': 'MTabBar.Item.Designer',
-      properties: {
-        [uid()]: PageSchema,
-      },
-      'x-server-hooks': [
-        {
-          type: 'onSelfSave',
-          method: 'extractTextToLocale',
-        },
-      ],
-    });
-  }, []);
-
-  return (
-    <SortableItem
-      className={cx(
-        'nb-mobile-tab-bar',
-        css`
-          position: relative;
-          width: 100%;
-          display: flex;
-          align-items: center;
-        `,
-      )}
-    >
-      <DndContext>
-        <TabBar
-          activeKey={params.name}
-          onChange={(key) => {
-            if (key === 'add-tab') {
-              return;
-            }
-            navigate(`/mobile/${key}`);
-          }}
-          safeArea
-          className={cx(
-            css`
-              width: 100%;
-            `,
-          )}
-        >
-          {fieldSchema.mapProperties((schema, name) => {
-            const cp = schema['x-component-props'];
-            return (
-              <TabBar.Item
-                {...cp}
-                key={`tab_${schema['x-uid']}`}
-                title={
-                  <>
-                    {t(compile(cp.title))}
-                    <SchemaComponent schema={schema} name={name} />
-                  </>
-                }
-                icon={cp.icon ? <Icon type={cp.icon} /> : undefined}
-              ></TabBar.Item>
-            );
-          })}
-          {designable && (!fieldSchema.properties || Object.keys(fieldSchema.properties).length < 5) ? (
-            <TabBar.Item
-              className={css`
-                .adm-tab-bar-item-icon {
-                  height: auto;
-                }
-              `}
-              icon={<SchemaInitializer.ActionModal title={t('Add tab')} onSubmit={onAddTab} schema={tabItemSchema} />}
-              key="add-tab"
-            ></TabBar.Item>
-          ) : null}
-        </TabBar>
-      </DndContext>
-    </SortableItem>
-  );
-};
-
-export const MTabBar = InternalTabBar as unknown as typeof InternalTabBar & {
-  Item: typeof TabBarItem;
-};
-
-MTabBar.Item = TabBarItem;
-MTabBar.displayName = 'MTabBar';

package/src/client/core/schema/components/tab-bar/index.ts

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

package/src/client/core/schema/components/tab-bar/schema.ts

@@ -1,18 +0,0 @@
-export const tabItemSchema = {
-  properties: {
-    title: {
-      type: 'string',
-      title: `{{ t('Title') }}`,
-      required: true,
-      'x-component': 'Input',
-      'x-decorator': 'FormItem',
-    },
-    icon: {
-      required: true,
-      'x-decorator': 'FormItem',
-      'x-component': 'IconPicker',
-      title: `{{ t('Icon') }}`,
-      'x-component-props': {},
-    },
-  },
-};

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

@@ -1,38 +0,0 @@
-import { ISchema, Schema } from '@formily/react';
-import { uid } from '@formily/shared';
-export const gridItemWrap = (schema: ISchema) => {
-  return {
-    type: 'void',
-    'x-component': 'MGrid.Item',
-    properties: {
-      [schema.name || uid()]: schema,
-    },
-  };
-};
-
-export const findSchema = (schema: Schema, component: string) => {
-  const gridSchema = schema.reduceProperties(
-    (schema, next) => schema || (next['x-component'] === component && next),
-  ) as Schema;
-  return gridSchema;
-};
-export const findGridSchema = (schema: Schema) => {
-  return findSchema(schema, 'Grid');
-};
-
-const allowComponents = ['Grid', 'Grid.Row'];
-const plusComponent = ['Grid.Col'];
-export const countGridCol = (schema: Schema, countToStop?: number) => {
-  if (!schema) return 0;
-  let count = 0;
-  if (plusComponent.includes(schema['x-component'])) {
-    count += 1;
-  }
-  if (typeof countToStop === 'number' && count >= countToStop) return count;
-  if (allowComponents.includes(schema['x-component'])) {
-    schema.mapProperties((schema) => {
-      count += countGridCol(schema, countToStop);
-    });
-  }
-  return count;
-};

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

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

package/src/client/core/schema/hooks/useSchemaPatch.ts

@@ -1,30 +0,0 @@
-import { useField, useFieldSchema } from '@formily/react';
-import { useDesignable } from '@nocobase/client';
-import { lodash } from '@nocobase/utils/client';
-import { useCallback } from 'react';
-
-export const useSchemaPatch = () => {
-  const { dn } = useDesignable();
-  const fieldSchema = useFieldSchema();
-  const field = useField();
-
-  const onUpdateComponentProps = useCallback((data) => {
-    lodash.set(fieldSchema, 'x-component-props', data);
-    field.componentProps = { ...field.componentProps, ...data };
-    dn.emit('patch', {
-      schema: {
-        ['x-uid']: fieldSchema['x-uid'],
-        'x-component-props': fieldSchema['x-component-props'],
-        'x-server-hooks': [
-          {
-            type: 'onSelfSave',
-            method: 'extractTextToLocale',
-          },
-        ],
-      },
-    });
-    dn.refresh();
-  }, []);
-
-  return { onUpdateComponentProps };
-};

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

@@ -1,3 +0,0 @@
-export * from './initializers';
-export * from './components';
-export * from './scopes';

package/src/client/core/schema/initializers/BlockInitializers.ts

@@ -1,81 +0,0 @@
-import { gridRowColWrap } from '@nocobase/client';
-import { generateNTemplate } from '../../../locale';
-
-// 页面里添加区块
-export const MBlockInitializers = {
-  title: '{{t("Add block")}}',
-  icon: 'PlusOutlined',
-  wrap: gridRowColWrap,
-  items: [
-    {
-      key: 'dataBlocks',
-      type: 'itemGroup',
-      title: '{{t("Data blocks")}}',
-      children: [
-        {
-          key: 'GridCard',
-          type: 'item',
-          title: '{{t("Grid Card")}}',
-          component: 'GridCardBlockInitializer',
-        },
-        {
-          key: 'table',
-          type: 'item',
-          title: '{{t("Table")}}',
-          component: 'TableBlockInitializer',
-        },
-        {
-          key: 'form',
-          type: 'item',
-          title: '{{t("Form")}}',
-          component: 'FormBlockInitializer',
-        },
-        {
-          key: 'details',
-          type: 'item',
-          title: '{{t("Details")}}',
-          component: 'DetailsBlockInitializer',
-        },
-        {
-          key: 'calendar',
-          type: 'item',
-          title: '{{t("Calendar")}}',
-          component: 'CalendarBlockInitializer',
-        },
-        {
-          key: 'mapBlock',
-          type: 'item',
-          title: generateNTemplate('Map'),
-          component: 'MapBlockInitializer',
-        },
-      ],
-    },
-    {
-      key: 'otherBlocks',
-      type: 'itemGroup',
-      title: '{{t("Other blocks")}}',
-      children: [
-        {
-          key: 'menu',
-          type: 'item',
-          title: generateNTemplate('Menu'),
-          component: 'MMenuBlockInitializer',
-          sort: 100,
-        },
-        {
-          key: 'markdown',
-          type: 'item',
-          title: '{{t("Markdown")}}',
-          component: 'MarkdownBlockInitializer',
-        },
-        {
-          key: 'settings',
-          type: 'item',
-          title: generateNTemplate('Settings'),
-          component: 'MSettingsBlockInitializer',
-          sort: 100,
-        },
-      ],
-    },
-  ],
-};

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

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

package/src/client/core/schema/scopes/grid-card.ts

@@ -1,35 +0,0 @@
-import { css } from '@nocobase/client';
-import { useInterfaceContext } from '../../../router/InterfaceProvider';
-import { PaginationProps } from 'antd';
-
-const listCss = css`
-  padding: 0 var(--nb-spacing);
-  & > .nb-action-bar {
-    padding: unset !important;
-    background: unset !important;
-  }
-`;
-export const useGridCardBlockItemProps = () => {
-  return {
-    className: listCss,
-  };
-};
-
-const columnCountConfig = {
-  xs: 1,
-  sm: 1,
-  md: 1,
-  lg: 1,
-  xl: 1,
-  xxl: 1,
-};
-
-export const useGridCardBlockProps = () => {
-  const isInterface = useInterfaceContext();
-  return {
-    columnCount: isInterface ? columnCountConfig : null,
-    pagination: {
-      simple: true,
-    } as PaginationProps,
-  };
-};

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

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

package/src/client/devices/iOS6.tsx

@@ -1,24 +0,0 @@
-import { css, cx } from '@nocobase/client';
-import React from 'react';
-
-const iOS6: React.FC<{
-  className: string;
-}> = (props) => {
-  return (
-    <div
-      className={cx(
-        'nb-mobile-device-ios6',
-        css(`
-          display: flex;
-          width: 375px;
-          height: 667px;
-      `),
-        props.className,
-      )}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-export default iOS6;

package/src/client/devices/index.tsx

@@ -1,27 +0,0 @@
-import { css, cx } from '@nocobase/client';
-import React from 'react';
-import Device from './iOS6';
-
-export const MobileDevice: React.FC = (props) => {
-  return (
-    <div
-      className={cx(
-        'nb-mobile-device-wrapper',
-        css`
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        `,
-      )}
-    >
-      <Device
-        className={css`
-          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-        `}
-        {...props}
-      ></Device>
-    </div>
-  );
-};

package/src/client/index.tsx

@@ -1,48 +0,0 @@
-import { createRouterManager, Plugin, RouterManager, RouteSchemaComponent } from '@nocobase/client';
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-import { MobileClientProvider } from './MobileClientProvider';
-import MApplication from './router/Application';
-
-export class MobileClientPlugin extends Plugin {
-  public mobileRouter: RouterManager;
-  async load() {
-    this.setMobileRouter();
-    this.addRoutes();
-    this.app.use(MobileClientProvider);
-  }
-
-  setMobileRouter() {
-    const router = createRouterManager({ type: 'hash' });
-    router.add('root', {
-      path: '/',
-      element: <Navigate replace to="/mobile" />,
-    });
-    router.add('mobile', {
-      path: '/mobile',
-      element: <MApplication />,
-    });
-    router.add('mobile.page', {
-      path: '/mobile/:name',
-      element: <RouteSchemaComponent />,
-    });
-    this.mobileRouter = router;
-  }
-
-  getMobileRouterComponent() {
-    return this.mobileRouter.getRouterComponent();
-  }
-
-  addRoutes() {
-    this.app.router.add('mobile', {
-      path: '/mobile',
-      element: <MApplication />,
-    });
-    this.app.router.add('mobile.page', {
-      path: '/mobile/:name',
-      Component: 'RouteSchemaComponent',
-    });
-  }
-}
-
-export default MobileClientPlugin;

package/src/client/locale/index.ts

@@ -1,21 +0,0 @@
-import { i18n } from '@nocobase/client';
-import { useTranslation as useT } from 'react-i18next';
-
-export const NAMESPACE = 'mobile-client';
-
-// i18n.addResources('zh-CN', NAMESPACE, zhCN);
-// i18n.addResources('en-US', NAMESPACE, enUS);
-
-export function lang(key: string) {
-  return i18n.t(key, { ns: NAMESPACE });
-}
-
-export function generateNTemplate(key: string) {
-  return `{{t('${key}', { ns: '${NAMESPACE}', nsMode: 'fallback' })}}`;
-}
-
-export function useTranslation() {
-  return useT([NAMESPACE, 'client'], {
-    nsMode: 'fallback',
-  });
-}

package/src/client/router/Application.tsx

@@ -1,128 +0,0 @@
-import {
-  ActionContextProvider,
-  AdminProvider,
-  css,
-  cx,
-  RemoteSchemaComponent,
-  useSystemSettings,
-  useViewport,
-} from '@nocobase/client';
-import { DrawerProps, ModalProps } from 'antd';
-import React, { useMemo } from 'react';
-import { Outlet, useParams } from 'react-router-dom';
-import { MobileCore } from '../core';
-import { useInterfaceContext } from './InterfaceProvider';
-
-const commonCSSVariables = css`
-  --nb-spacing: 14px;
-`;
-const commonCSSOverride = css``;
-const commonDesignerCSS = css`
-  --nb-designer-top: 2px;
-  --nb-designer-right: 2px;
-  .nb-sortable-designer:hover {
-    position: relative;
-    > .general-schema-designer {
-      display: block;
-    }
-  }
-  .general-schema-designer {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: none;
-    border: 0;
-    pointer-events: none;
-    > .general-schema-designer-icons {
-      position: absolute;
-      top: var(--nb-designer-top);
-      right: var(--nb-designer-right);
-      line-height: 16px;
-      pointer-events: all;
-      .ant-space-item {
-        background-color: var(--colorSettings);
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        padding-left: 1px;
-        align-self: stretch;
-      }
-    }
-  }
-`;
-
-const drawerProps: DrawerProps = {
-  getContainer: '.nb-mobile-application',
-  width: '90%',
-  style: {
-    position: 'absolute',
-  },
-};
-const modalProps = {
-  ...drawerProps,
-  style: {
-    maxWidth: 'calc(100% - 16px)',
-  },
-  maskStyle: {
-    position: 'absolute',
-  },
-  wrapClassName: css`
-    position: absolute !important;
-  `,
-};
-
-const useMobileSchemaUid = () => {
-  const ctx = useSystemSettings();
-  return ctx?.data?.data?.options?.mobileSchemaUid;
-};
-
-const MApplication: React.FC = (props) => {
-  const mobileSchemaUid = useMobileSchemaUid();
-  const params = useParams<{ name: string }>();
-  const interfaceContext = useInterfaceContext();
-  const Provider = useMemo(() => {
-    return interfaceContext ? React.Fragment : AdminProvider;
-  }, [interfaceContext]);
-
-  useViewport();
-
-  return (
-    <Provider>
-      <MobileCore>
-        <ActionContextProvider modalProps={modalProps as ModalProps} drawerProps={drawerProps}>
-          <div
-            className={cx(
-              'nb-mobile-application',
-              commonDesignerCSS,
-              commonCSSVariables,
-              commonCSSOverride,
-              css`
-                display: flex;
-                flex-direction: column;
-                width: 100%;
-                height: 100%;
-                position: relative;
-                overflow: hidden;
-              `,
-            )}
-          >
-            {params.name && !params.name.startsWith('tab_') ? (
-              <Outlet />
-            ) : (
-              <RemoteSchemaComponent key={mobileSchemaUid} uid={mobileSchemaUid}>
-                {props.children}
-              </RemoteSchemaComponent>
-            )}
-            {/* Global action will insert here */}
-            <div id="nb-position-container"></div>
-          </div>
-        </ActionContextProvider>
-      </MobileCore>
-    </Provider>
-  );
-};
-
-export default MApplication;

package/src/client/router/InterfaceProvider.tsx

@@ -1,11 +0,0 @@
-import React, { useContext } from 'react';
-
-export const InterfaceContext = React.createContext(null);
-
-export const InterfaceProvider = (props) => {
-  return <InterfaceContext.Provider value={{ interface: true }}>{props.children}</InterfaceContext.Provider>;
-};
-
-export const useInterfaceContext = () => {
-  return useContext(InterfaceContext);
-};

package/src/client/router/InterfaceRouter.tsx

@@ -1,16 +0,0 @@
-import { usePlugin } from '@nocobase/client';
-import React from 'react';
-import { MobileClientPlugin } from '../index';
-import { InterfaceProvider } from './InterfaceProvider';
-
-export const InterfaceRouter: React.FC = React.memo(() => {
-  const plugin = usePlugin(MobileClientPlugin);
-  const MobileRouter = plugin.getMobileRouterComponent();
-
-  return (
-    <InterfaceProvider>
-      <MobileRouter />
-    </InterfaceProvider>
-  );
-});
-InterfaceRouter.displayName = 'InterfaceRouter';

package/src/client/router/index.ts

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