@nocobase/plugin-mobile-client 0.10.0-alpha.2

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

@@ -0,0 +1,106 @@
+import { GeneralSchemaDesigner, SchemaSettings, useDesignable } from '@nocobase/client';
+import React from 'react';
+import { generateNTemplate, useTranslation } from '../../../../locale';
+import { useField, useFieldSchema } from '@formily/react';
+import { findGridSchema } from '../../helpers';
+import { uid } from '@formily/shared';
+import { Button } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+
+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: 'rgb(241, 139, 98)',
+            color: 'rgb(241, 139, 98)',
+          }}
+          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

@@ -0,0 +1,132 @@
+import { css, cx } from '@emotion/css';
+import { RecursionField, useFieldSchema } from '@formily/react';
+import { ActionBarProvider, SortableItem, TabsContextProvider, useDesigner } from '@nocobase/client';
+import { TabsProps } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { countGridCol } from '../../helpers';
+import { PageDesigner } from './Page.Designer';
+
+const globalActionCSS = css`
+  #nb-position-container > & {
+    height: 49px;
+    border-top: 1px solid #f0f2f5;
+    margin-bottom: 0px !important;
+    padding: 0 var(--nb-spacing);
+    align-items: center;
+    overflow-x: auto;
+    background: #ffffff;
+    z-index: 100;
+  }
+`;
+
+const InternalPage: React.FC = (props) => {
+  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) {
+    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()]]);
+      });
+    }
+  }
+
+  const onTabsChange = useCallback<TabsProps['onChange']>(
+    (key) => {
+      setSearchParams([['tab', key]]);
+    },
+    [setSearchParams],
+  );
+
+  const GlobalActionProvider = useMemo(() => {
+    if (hasGlobalActions) {
+      return ActionBarProvider;
+    }
+    return (props) => <>{props.children}</>;
+  }, [hasGlobalActions]);
+
+  return (
+    <GlobalActionProvider
+      container={hasGlobalActions && onlyInPage ? document.getElementById('nb-position-container') : null}
+      forceProps={{
+        layout: 'one-column',
+        className: globalActionCSS,
+      }}
+    >
+      <SortableItem
+        eid="nb-mobile-scroll-wrapper"
+        className={cx(
+          'nb-mobile-page',
+          css`
+            background: #f0f2f5;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding-bottom: var(--nb-spacing);
+          `,
+        )}
+      >
+        <Designer {...fieldSchema?.['x-designer-props']}></Designer>
+        <div
+          style={{
+            paddingBottom: tabsSchema ? null : 'var(--nb-spacing)',
+          }}
+          className={cx(
+            'nb-mobile-page-header',
+            css`
+              & > .ant-tabs > .ant-tabs-nav {
+                background: #fff;
+                padding: 0 var(--nb-spacing);
+              }
+              display: flex;
+              flex-direction: column;
+            `,
+          )}
+        >
+          <RecursionField
+            schema={fieldSchema}
+            filterProperties={(s) => {
+              return 'MHeader' === s['x-component'];
+            }}
+          ></RecursionField>
+          <TabsContextProvider deep={false} activeKey={searchParams.get('tab')} onChange={onTabsChange}>
+            <RecursionField
+              schema={fieldSchema}
+              filterProperties={(s) => {
+                return 'Tabs' === s['x-component'];
+              }}
+            ></RecursionField>
+          </TabsContextProvider>
+        </div>
+
+        {!tabsSchema && (
+          <RecursionField
+            schema={fieldSchema}
+            filterProperties={(s) => {
+              return s['x-component'] !== 'MHeader';
+            }}
+          ></RecursionField>
+        )}
+      </SortableItem>
+    </GlobalActionProvider>
+  );
+};
+
+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

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

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SettingsMenu, SortableItem, useDesigner } from '@nocobase/client';
+import { SettingsDesigner } from './Settings.Designer';
+import { css, cx } from '@emotion/css';
+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

@@ -0,0 +1,20 @@
+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

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

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

@@ -0,0 +1,67 @@
+import React, { useEffect, useMemo } from 'react';
+import { TabBar, TabBarItemProps } from 'antd-mobile';
+import { GeneralSchemaDesigner, SchemaSettings, SortableItem, useDesigner } from '@nocobase/client';
+import { useTranslation } from '../../../../locale';
+import { Schema, useField, useFieldSchema } from '@formily/react';
+import { useSchemaPatch } from '../../hooks';
+import { css, cx } from '@emotion/css';
+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

@@ -0,0 +1,108 @@
+import { TabBar } from 'antd-mobile';
+import { TabBarItem } from './TabBar.Item';
+import React, { useCallback } from 'react';
+import { useFieldSchema } from '@formily/react';
+import {
+  DndContext,
+  Icon,
+  SchemaComponent,
+  SchemaInitializer,
+  SortableItem,
+  useCompile,
+  useDesignable,
+} from '@nocobase/client';
+import { useTranslation } from '../../../../locale';
+import { css, cx } from '@emotion/css';
+import { uid } from '@formily/shared';
+import { useNavigate, useParams } from 'react-router-dom';
+import { tabItemSchema } from './schema';
+import { PageSchema } from '../../common';
+
+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,
+      },
+    });
+  }, []);
+
+  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={
+                  <>
+                    {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

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

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,38 @@
+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

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

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

@@ -0,0 +1,24 @@
+import { useField, useFieldSchema } from '@formily/react';
+import { useDesignable } from '@nocobase/client';
+import _ from 'lodash';
+import { useCallback } from 'react';
+
+export const useSchemaPatch = () => {
+  const { dn } = useDesignable();
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+
+  const onUpdateComponentProps = useCallback((data) => {
+    _.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'],
+      },
+    });
+    dn.refresh();
+  }, []);
+
+  return { onUpdateComponentProps };
+};

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

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

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

@@ -0,0 +1,81 @@
+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

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