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

package/lib/server/migrations/20230620203218-mobile-ui-schema-uid.js

@@ -1,59 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _server() {
-  const data = require("@nocobase/server");
-  _server = function _server() {
-    return data;
-  };
-  return data;
-}
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-class _default extends _server().Migration {
-  up() {
-    var _this = this;
-    return _asyncToGenerator(function* () {
-      var _instance, _instance$options, _instance2, _instance2$options;
-      const systemSettings = _this.db.getRepository('systemSettings');
-      let instance = yield systemSettings.findOne();
-      if ((_instance = instance) !== null && _instance !== void 0 && (_instance$options = _instance.options) !== null && _instance$options !== void 0 && _instance$options.mobileSchemaUid) {
-        return;
-      }
-      const uiRoutes = _this.db.getRepository('uiRoutes');
-      const routes = yield uiRoutes.find();
-      var _iterator = _createForOfIteratorHelper(routes),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var _route$options;
-          const route = _step.value;
-          if (route.uiSchemaUid && (route === null || route === void 0 ? void 0 : (_route$options = route.options) === null || _route$options === void 0 ? void 0 : _route$options.component) === 'MApplication') {
-            const options = instance.options || {};
-            options['mobileSchemaUid'] = route.uiSchemaUid;
-            instance.set('options', options);
-            instance.changed('options', true);
-            yield instance.save();
-            return;
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      instance = yield systemSettings.findOne();
-      if (!((_instance2 = instance) !== null && _instance2 !== void 0 && (_instance2$options = _instance2.options) !== null && _instance2$options !== void 0 && _instance2$options.mobileSchemaUid)) {
-        throw new Error('mobileSchemaUid invalid');
-      }
-      _this.app.log.info('systemSettings.options', instance.toJSON());
-    })();
-  }
-}
-exports.default = _default;

package/lib/server/plugin.js

@@ -1,102 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MobileClientPlugin = void 0;
-function _server() {
-  const data = require("@nocobase/server");
-  _server = function _server() {
-    return data;
-  };
-  return data;
-}
-function _path() {
-  const data = require("path");
-  _path = function _path() {
-    return data;
-  };
-  return data;
-}
-var _routes = require("./routes");
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-class MobileClientPlugin extends _server().Plugin {
-  afterAdd() {}
-  load() {
-    var _this = this;
-    return _asyncToGenerator(function* () {
-      _this.db.addMigrations({
-        namespace: 'client',
-        directory: (0, _path().resolve)(__dirname, './migrations'),
-        context: {
-          plugin: _this
-        }
-      });
-    })();
-  }
-  install() {
-    var _this2 = this;
-    return _asyncToGenerator(function* () {
-      const repository = _this2.app.db.getRepository('uiRoutes');
-      var _iterator = _createForOfIteratorHelper(_routes.routes),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          const values = _step.value;
-          yield repository.create({
-            values
-          });
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-      const uiSchemas = _this2.db.getRepository('uiSchemas');
-      const systemSettings = _this2.db.getRepository('systemSettings');
-      const schema = yield uiSchemas.insert({
-        type: 'void',
-        'x-component': 'MContainer',
-        'x-designer': 'MContainer.Designer',
-        'x-component-props': {},
-        properties: {
-          page: {
-            type: 'void',
-            'x-component': 'MPage',
-            'x-designer': 'MPage.Designer',
-            'x-component-props': {},
-            properties: {
-              grid: {
-                type: 'void',
-                'x-component': 'Grid',
-                'x-initializer': 'MBlockInitializers',
-                'x-component-props': {
-                  showDivider: false
-                }
-              }
-            }
-          }
-        }
-      });
-      const instance = yield systemSettings.findOne();
-      instance.set('options.mobileSchemaUid', schema['x-uid']);
-      yield instance.save();
-    })();
-  }
-  afterEnable() {
-    return _asyncToGenerator(function* () {})();
-  }
-  afterDisable() {
-    return _asyncToGenerator(function* () {})();
-  }
-  remove() {
-    return _asyncToGenerator(function* () {})();
-  }
-}
-exports.MobileClientPlugin = MobileClientPlugin;
-var _default = MobileClientPlugin;
-exports.default = _default;

package/lib/server/routes.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.routes = void 0;
-const routes = [{
-  type: 'route',
-  path: '/mobile/:name(.+)?',
-  component: 'MApplication',
-  uiSchema: {
-    type: 'void',
-    'x-component': 'MContainer',
-    'x-designer': 'MContainer.Designer',
-    'x-component-props': {},
-    properties: {
-      page: {
-        type: 'void',
-        'x-component': 'MPage',
-        'x-designer': 'MPage.Designer',
-        'x-component-props': {},
-        properties: {
-          grid: {
-            type: 'void',
-            'x-component': 'Grid',
-            'x-initializer': 'MBlockInitializers',
-            'x-component-props': {
-              showDivider: false
-            }
-          }
-        }
-      }
-    }
-  },
-  routes: [{
-    type: 'route',
-    path: '',
-    component: 'RouteSchemaComponent'
-  }]
-}];
-exports.routes = routes;

package/src/client/MobileClientProvider.tsx

@@ -1,41 +0,0 @@
-import { SettingsCenterProvider } from '@nocobase/client';
-import React, { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { AppConfiguration, InterfaceConfiguration } from './configuration';
-import { isJSBridge } from './core/bridge';
-import { useTranslation } from './locale';
-
-export const MobileClientProvider = React.memo((props) => {
-  const { t } = useTranslation();
-  const location = useLocation();
-  const navigation = useNavigate();
-
-  useEffect(() => {
-    if (isJSBridge() && location.pathname === '/admin') {
-      navigation('/mobile', { replace: true });
-    }
-  }, [location.pathname, navigation]);
-
-  return (
-    <SettingsCenterProvider
-      settings={{
-        ['mobile-client']: {
-          title: t('Mobile Client-side'),
-          icon: 'MobileOutlined',
-          tabs: {
-            interface: {
-              title: t('Interface Configuration'),
-              component: InterfaceConfiguration,
-            },
-            app: {
-              title: t('App Configuration'),
-              component: AppConfiguration,
-            },
-          },
-        },
-      }}
-    >
-      {props.children}
-    </SettingsCenterProvider>
-  );
-});

package/src/client/configuration/App.tsx

@@ -1,23 +0,0 @@
-import { Card, Form, Input } from 'antd';
-import React from 'react';
-import { useTranslation } from '../locale';
-
-export const AppConfiguration = () => {
-  const { t } = useTranslation();
-  return (
-    <Card
-      style={{
-        minHeight: '600px',
-      }}
-    >
-      <Form layout="vertical">
-        <Form.Item
-          tooltip={`${t('The full address is')} ${window.origin}/mobile`}
-          label={t('Mobile client access address')}
-        >
-          <Input value="/mobile" disabled />
-        </Form.Item>
-      </Form>
-    </Card>
-  );
-};

package/src/client/configuration/Interface.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { InterfaceRouter } from '../router';
-import { MobileDevice } from '../devices';
-
-export const InterfaceConfiguration = () => {
-  return (
-    <MobileDevice>
-      <InterfaceRouter></InterfaceRouter>
-    </MobileDevice>
-  );
-};

package/src/client/configuration/index.ts

@@ -1,2 +0,0 @@
-export * from './App';
-export * from './Interface';

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

@@ -1,2 +0,0 @@
-import './native-call';
-export * from './injects';

package/src/client/core/bridge/injects.ts

@@ -1,15 +0,0 @@
-interface InvokeFunction {
-  (params: { action: 'scan' }, cb: (data: { url: string }) => void): void;
-  (params: { action: 'moveTaskToBack' }, cb?: () => void): void;
-}
-
-const getJsBridge = () =>
-  (window as any).JsBridge as {
-    invoke: InvokeFunction;
-  };
-
-export const invoke: InvokeFunction = (params, cb) => {
-  return getJsBridge().invoke(params, cb);
-};
-
-export const isJSBridge = () => !!getJsBridge();

package/src/client/core/bridge/native-call.ts

@@ -1,23 +0,0 @@
-import { invoke } from './injects';
-
-/**
- * App 右滑返回
- * @param cb 回调函数，返回 true 表示 web 自己消费，false表示 app 消费
- */
-
-const JSBridgeFunction = {
-  /**
-   * @description JSBridge injects
-   */
-  onBackPressed: () => {
-    if (history.length === 1) {
-      invoke({ action: 'moveTaskToBack' });
-    } else {
-      history.back();
-    }
-  },
-};
-
-Object.keys(JSBridgeFunction).forEach((key) => {
-  window[key] = JSBridgeFunction[key];
-});

package/src/client/core/index.tsx

@@ -1,45 +0,0 @@
-import { SchemaComponentOptions, SchemaInitializerProvider } from '@nocobase/client';
-import React from 'react';
-import {
-  MBlockInitializers,
-  MMenuBlockInitializer,
-  MMenu,
-  MContainer,
-  MTabBar,
-  MPage,
-  MHeader,
-  MSettingsBlockInitializer,
-  MSettings,
-  useGridCardBlockItemProps,
-  useGridCardBlockProps,
-} from './schema';
-import './bridge';
-
-export const MobileCore: React.FC = (props) => {
-  return (
-    <SchemaInitializerProvider
-      initializers={{
-        MBlockInitializers,
-      }}
-    >
-      <SchemaComponentOptions
-        components={{
-          MMenuBlockInitializer,
-          MSettingsBlockInitializer,
-          MContainer,
-          MMenu,
-          MTabBar,
-          MPage,
-          MHeader,
-          MSettings,
-        }}
-        scope={{
-          useGridCardBlockItemProps,
-          useGridCardBlockProps,
-        }}
-      >
-        {props.children}
-      </SchemaComponentOptions>
-    </SchemaInitializerProvider>
-  );
-};

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

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

package/src/client/core/schema/common/page.ts

@@ -1,16 +0,0 @@
-export const PageSchema = {
-  type: 'void',
-  'x-component': 'MPage',
-  'x-designer': 'MPage.Designer',
-  'x-component-props': {},
-  properties: {
-    grid: {
-      type: 'void',
-      'x-component': 'Grid',
-      'x-initializer': 'MBlockInitializers',
-      'x-component-props': {
-        showDivider: false,
-      },
-    },
-  },
-};

package/src/client/core/schema/components/container/Container.Designer.tsx

@@ -1,89 +0,0 @@
-import { MenuOutlined } from '@ant-design/icons';
-import { Schema, 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 { useNavigate } from 'react-router-dom';
-import { generateNTemplate, useTranslation } from '../../../../locale';
-import { PageSchema } from '../../common';
-import { findSchema } from '../../helpers';
-
-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 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('App level Configuration')}
-        </Button>
-      }
-      {...schemaSettingsProps}
-    >
-      <SchemaSettings.SwitchItem
-        checked={!!tabBarSchema}
-        title={t('Enable TabBar')}
-        onChange={async (v) => {
-          if (v) {
-            const pageSchema = findSchema(fieldSchema, 'MPage');
-            if (!pageSchema) return;
-            await dn.remove(pageSchema);
-            await dn.insertBeforeEnd({
-              type: 'void',
-              'x-component': 'MTabBar',
-              'x-component-props': {},
-              name: 'tabBar',
-              properties: {
-                [uid()]: {
-                  type: 'void',
-                  'x-component': 'MTabBar.Item',
-                  'x-designer': 'MTabBar.Item.Designer',
-                  'x-component-props': {
-                    icon: 'HomeOutlined',
-                    title: generateNTemplate('Untitled'),
-                  },
-                  properties: {
-                    page: pageSchema.toJSON(),
-                  },
-                },
-              },
-            });
-          } 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('../');
-              },
-            });
-          }
-        }}
-      />
-    </SchemaSettings>
-  );
-};

package/src/client/core/schema/components/container/Container.tsx

@@ -1,89 +0,0 @@
-import { 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';
-import { ContainerDesigner } from './Container.Designer';
-import useStyles from './style';
-
-const findGrid = (schema, uid) => {
-  return schema.reduceProperties((final, next) => {
-    if (final) return final;
-    if (next['x-component'] === 'MTabBar') {
-      return findGrid(next, uid);
-    }
-    if (next['x-component'] === 'MTabBar.Item' && uid === next['x-uid']) {
-      return next;
-    }
-  });
-};
-
-const TabContentComponent = () => {
-  const { name } = useParams<{ name: string }>();
-  const fieldSchema = useFieldSchema();
-  if (!name) return <></>;
-  const gridSchema = findGrid(fieldSchema.properties['tabBar'], name.replace('tab_', ''));
-  if (!gridSchema) {
-    return <Navigate replace to="../" />;
-  }
-  return <SchemaComponent schema={gridSchema} />;
-};
-
-const InternalContainer: React.FC = (props) => {
-  const { styles } = useStyles();
-  const { token } = useToken();
-  const Designer = useDesigner();
-  const fieldSchema = useFieldSchema();
-  const navigate = useNavigate();
-  const params = useParams<{ name: string }>();
-  const location = useLocation();
-  const tabBarSchema = fieldSchema?.properties?.['tabBar'];
-  const tabBarCurrentFirstKey = tabBarSchema?.properties ? Object.keys(tabBarSchema.properties)[0] : null;
-  let redirectToUid = null;
-  if (tabBarCurrentFirstKey) {
-    redirectToUid = tabBarSchema?.properties[tabBarCurrentFirstKey]?.['x-uid'];
-  }
-  useEffect(() => {
-    if (redirectToUid && !params.name) {
-      const locationPath = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
-      navigate(`${locationPath}/tab_${redirectToUid}`, { replace: true });
-    }
-  }, [location.pathname, navigate, params.name, redirectToUid]);
-
-  return (
-    <SortableItem eid="nb-mobile-scroll-wrapper" className={cx('nb-mobile-container', styles.mobileContainer)}>
-      <Designer></Designer>
-      <div
-        style={{
-          paddingBottom: redirectToUid ? token.paddingLG * 2 : 0,
-        }}
-        className="nb-mobile-container-content"
-      >
-        {redirectToUid ? (
-          <TabContentComponent />
-        ) : (
-          <SchemaComponent
-            filterProperties={(schema) => {
-              return schema['x-component'] !== 'MTabBar';
-            }}
-            schema={fieldSchema}
-          />
-        )}
-      </div>
-      <div className={cx('nb-mobile-container-tab-bar', styles.tabBar)}>
-        <SchemaComponent
-          onlyRenderProperties
-          filterProperties={(schema) => {
-            return schema['x-component'] === 'MTabBar';
-          }}
-          schema={fieldSchema}
-        ></SchemaComponent>
-      </div>
-    </SortableItem>
-  );
-};
-
-export const MContainer = InternalContainer as unknown as typeof InternalContainer & {
-  Designer: typeof ContainerDesigner;
-};
-MContainer.Designer = ContainerDesigner;
-MContainer.displayName = 'MContainer';

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

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

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

@@ -1,35 +0,0 @@
-import { createStyles } from '@nocobase/client';
-
-const useStyles = createStyles(({ token, css }) => {
-  return {
-    mobileContainer: css`
-      --adm-color-primary: ${token.colorPrimary};
-
-      & > .general-schema-designer > .general-schema-designer-icons {
-        right: unset;
-        left: 2px;
-      }
-      background: var(--nb-box-bg);
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      height: 100%;
-      overflow-y: scroll;
-      position: initial !important;
-    `,
-
-    tabBar: css`
-      & > .general-schema-designer {
-        --nb-designer-top: ${token.marginMD}px;
-      }
-      position: absolute;
-      background: ${token.colorBgContainer};
-      width: 100%;
-      bottom: 0;
-      left: 0;
-      z-index: 1000;
-    `,
-  };
-});
-
-export default useStyles;

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

@@ -1,39 +0,0 @@
-import { Switch } from '@formily/antd-v5';
-import { useField } from '@formily/react';
-import { GeneralSchemaDesigner, SchemaSettings } from '@nocobase/client';
-import React from 'react';
-import { useTranslation } from '../../../../locale';
-import { useSchemaPatch } from '../../hooks';
-
-export const HeaderDesigner = () => {
-  const field = useField();
-  const { onUpdateComponentProps } = useSchemaPatch();
-  const { t } = useTranslation();
-  return (
-    <GeneralSchemaDesigner draggable={false}>
-      <SchemaSettings.ModalItem
-        title={t('Edit info')}
-        components={{ Switch }}
-        initialValues={field.componentProps}
-        schema={{
-          properties: {
-            title: {
-              type: 'string',
-              title: t('Title'),
-              required: true,
-              'x-component': 'Input',
-              'x-decorator': 'FormItem',
-            },
-            showBack: {
-              type: 'boolean',
-              title: t('Display back button'),
-              'x-component': 'Switch',
-              'x-decorator': 'FormItem',
-            },
-          },
-        }}
-        onSubmit={onUpdateComponentProps}
-      />
-    </GeneralSchemaDesigner>
-  );
-};