@nocobase/client 0.7.0-alpha.82 → 0.7.1-alpha.4

package/src/schema-component/index.md

@@ -1,133 +0,0 @@
----
-nav:
-  path: /client
-group:
-  path: /client
----
-
-# SchemaComponent
-
-## Components
-
-### SchemaComponentProvider
-
-```tsx | pure
-<SchemaComponentProvider>
-  <SchemaComponent schema={{}}/>
-</SchemaComponentProvider>
-```
-
-### SchemaComponentOptions
-
-提供 SchemaComponent 所需的 scope 和 components，可以嵌套，当 `inherit={true}` 时，继承父级的 scope 和 components。
-
-```tsx | pure
-<SchemaComponentOptions scope={{}} components={{}}>
-</SchemaComponentOptions>
-
-<SchemaComponentOptions scope={{}} components={{}}>
-  {/* 继承父级的 scope 和 components */}
-  <SchemaComponentOptions inherit scope={{}} components={{}}>
-  </SchemaComponentOptions>
-</SchemaComponentOptions>
-```
-
-例如将  useTranslation 的 t 附加给 scope
-
-```tsx | pure
-import { useTranslation } from 'react-i18next';
-
-function TranslationProvider(props) {
-  const { t } = useTranslation();
-  return (
-    <SchemaComponentOptions inherit scope={{ t }}>
-      { props.children }
-    </SchemaComponentOptions>
-  );
-}
-```
-
-### SchemaComponent
-
-## Hooks
-
-### useSchemaComponentContext()
-
-获取 SchemaComponent 的上下文
-
-```ts
-const { refresh, reset } = useSchemaComponentContext();
-```
-
-### useDesignable()
-
-获取当前 schema 节点设计器的 API
-
-```ts
-const {
-  designable,         // 是否可以配置
-  patch,              // 更新当前节点配置
-  remove,             // 移除当前节点
-  insertAdjacent,     // 在某位置插入，四个位置：beforeBegin、afterBegin、beforeEnd、afterEnd
-  insertBeforeBegin,  // 在当前节点的前面插入
-  insertAfterBegin,   // 在当前节点的第一个子节点前面插入
-  insertBeforeEnd,    // 在当前节点的最后一个子节点后面
-  insertAfterEnd,     // 在当前节点的后面
-} = useDesignable();
-
-const schema = {
-  name: uid(),
-  'x-component': 'Hello',
-};
-
-// 在当前节点的前面插入
-insertBeforeBegin(schema);
-// 等同于
-insertAdjacent('beforeBegin', schema);
-
-// 在当前节点的第一个子节点前面插入
-insertAfterBegin(schema);
-// 等同于
-insertAdjacent('afterBegin', schema);
-
-// 在当前节点的最后一个子节点后面
-insertBeforeEnd(schema);
-// 等同于
-insertAdjacent('beforeEnd', schema);
-
-// 在当前节点的后面
-insertAfterEnd(schema);
-// 等同于
-insertAdjacent('afterEnd', schema);
-```
-
-几个插入的位置：
-
-```ts
-{
-  properties: {
-    // beforeBegin 在当前节点的前面插入
-    node1: {
-      properties: {
-        // afterBegin 在当前节点的第一个子节点前面插入
-        // ...
-        // beforeEnd 在当前节点的最后一个子节点后面
-      },
-    },
-    // afterEnd 在当前节点的后面
-  },
-}
-```
-
-## 扩展的 Formily Schema 属性
-
-- `x-uid` 可缺失，前端无感。主要用于插件 `plugin-ui-schema-storage`，用于后端 schema 的增删改查  
-- `x-designer` schema 设计器
-- `x-initializer` schema 初始化器
-- `x-collection-field` 用来标记 [CollectionField](collection-manager#collectionfield)
-- `x-action` 用来标记 [Action](schema-components/action)
-- `x-align` ActionBar 里用于 action 的布局，包括 `left` 和 `right`
-
-## Examples
-
-<code src="./demos/demo1.tsx" />

package/src/schema-component/index.tsx

@@ -1,7 +0,0 @@
-export * from './antd';
-export * from './antd/AntdSchemaComponentProvider';
-export * from './common';
-export * from './context';
-export * from './core';
-export * from './hooks';
-export * from './types';

package/src/schema-component/types.ts

@@ -1,34 +0,0 @@
-import { Form } from '@formily/core';
-import {
-  IRecursionFieldProps,
-  ISchemaFieldProps, SchemaReactComponents
-} from '@formily/react';
-import React from 'react';
-
-export interface ISchemaComponentContext {
-  scope?: any;
-  components?: SchemaReactComponents;
-  refresh?: () => void;
-  reset?: () => void;
-  designable?: boolean;
-  setDesignable?: (value: boolean) => void;
-  SchemaField?: React.FC<ISchemaFieldProps>;
-}
-
-export interface ISchemaComponentProvider {
-  designable?: boolean;
-  form?: Form;
-  scope?: any;
-  components?: SchemaReactComponents;
-}
-
-export interface IRecursionComponentProps extends IRecursionFieldProps {
-  scope?: any;
-  components?: SchemaReactComponents;
-}
-
-export interface ISchemaComponentOptionsProps {
-  scope?: any;
-  components?: SchemaReactComponents;
-  inherit?: boolean;
-}

package/src/schema-initializer/SchemaInitializer.tsx

@@ -1,224 +0,0 @@
-import { css } from '@emotion/css';
-import { ISchema, observer } from '@formily/react';
-import { Button, Dropdown, Menu, Switch } from 'antd';
-import classNames from 'classnames';
-import React, { createContext, useContext, useState } from 'react';
-import { Icon } from '../icon';
-import { useCompile, useDesignable } from '../schema-component/hooks';
-import {
-  SchemaInitializerButtonProps,
-  SchemaInitializerItemComponent,
-  SchemaInitializerItemOptions,
-  SchemaInitializerItemProps
-} from './types';
-
-const defaultWrap = (s: ISchema) => s;
-
-export const SchemaInitializerItemContext = createContext(null);
-
-export const SchemaInitializer = () => null;
-
-SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
-  const {
-    title,
-    insert,
-    wrap = defaultWrap,
-    items = [],
-    insertPosition = 'beforeEnd',
-    dropdown,
-    component,
-    style,
-    icon,
-    onSuccess,
-    ...others
-  } = props;
-  const compile = useCompile();
-  let { insertAdjacent, findComponent, designable } = useDesignable();
-  const [visible, setVisible] = useState(false);
-  const insertSchema = (schema) => {
-    if (props.insert) {
-      props.insert(wrap(schema));
-    } else {
-      insertAdjacent(insertPosition, wrap(schema), { onSuccess });
-    }
-  };
-  const renderItems = (items: any) => {
-    return items?.map((item, indexA) => {
-      if (item.type === 'divider') {
-        return <Menu.Divider key={item.key || `item-${indexA}`} />;
-      }
-      if (item.type === 'item' && item.component) {
-        const Component = findComponent(item.component);
-        return (
-          Component && (
-            <SchemaInitializerItemContext.Provider
-              key={`item-${indexA}`}
-              value={{
-                index: indexA,
-                item,
-                info: item,
-                insert: insertSchema,
-              }}
-            >
-              <Component
-                {...item}
-                item={{
-                  ...item,
-                  title: compile(item.title),
-                }}
-                insert={insertSchema}
-              />
-            </SchemaInitializerItemContext.Provider>
-          )
-        );
-      }
-      if (item.type === 'itemGroup') {
-        return (
-          !!item.children?.length && (
-            <Menu.ItemGroup key={item.key || `item-group-${indexA}`} title={compile(item.title)}>
-              {renderItems(item.children)}
-            </Menu.ItemGroup>
-          )
-        );
-      }
-      if (item.type === 'subMenu') {
-        return (
-          !!item.children?.length && (
-            <Menu.SubMenu key={item.key || `item-group-${indexA}`} title={compile(item.title)}>
-              {renderItems(item.children)}
-            </Menu.SubMenu>
-          )
-        );
-      }
-    });
-  };
-  const menu = <Menu>{renderItems(items)}</Menu>;
-
-  if (!designable && props.designable !== true) {
-    return null;
-  }
-
-  return (
-    <Dropdown
-      className={classNames('nb-schema-initializer-button')}
-      openClassName={`nb-schema-initializer-button-open`}
-      overlayClassName={classNames(
-        'nb-schema-initializer-button-overlay',
-        css`
-          .ant-dropdown-menu-item-group-list {
-            max-height: 40vh;
-            overflow: auto;
-          }
-        `,
-      )}
-      visible={visible}
-      onVisibleChange={(visible) => {
-        setVisible(visible);
-      }}
-      {...dropdown}
-      overlay={menu}
-    >
-      {component ? (
-        component
-      ) : (
-        <Button
-          type={'dashed'}
-          style={{
-            borderColor: '#f18b62',
-            color: '#f18b62',
-            ...style,
-          }}
-          {...others}
-          icon={<Icon type={icon as string}/>}
-        >
-          {compile(props.children || props.title)}
-        </Button>
-      )}
-    </Dropdown>
-  );
-});
-
-SchemaInitializer.Item = (props: SchemaInitializerItemProps) => {
-  const { index, info } = useContext(SchemaInitializerItemContext);
-  const compile = useCompile();
-  const { items = [], children = info?.title, icon, onClick, ...others } = props;
-  if (items?.length > 0) {
-    const renderMenuItem = (items: SchemaInitializerItemOptions[]) => {
-      if (!items?.length) {
-        return null;
-      }
-      return items.map((item, indexA) => {
-        if (item.type === 'divider') {
-          return <Menu.Divider key={`divider-${indexA}`} />;
-        }
-        if (item.type === 'itemGroup') {
-          return (
-            <Menu.ItemGroup
-              // @ts-ignore
-              eventKey={item.key || `item-group-${indexA}`}
-              key={item.key || `item-group-${indexA}`}
-              title={compile(item.title)}
-            >
-              {renderMenuItem(item.children)}
-            </Menu.ItemGroup>
-          );
-        }
-        if (item.type === 'subMenu') {
-          return (
-            <Menu.SubMenu
-              // @ts-ignore
-              eventKey={item.key || `sub-menu-${indexA}`}
-              key={item.key || `sub-menu-${indexA}`}
-              title={compile(item.title)}
-            >
-              {renderMenuItem(item.children)}
-            </Menu.SubMenu>
-          );
-        }
-        return (
-          <Menu.Item
-            eventKey={item.key}
-            key={item.key}
-            onClick={(info) => {
-              onClick({ ...info, item });
-            }}
-          >
-            {compile(item.title)}
-          </Menu.Item>
-        );
-      });
-    };
-    return (
-      // @ts-ignore
-      <Menu.SubMenu eventKey={index} key={index} title={compile(children)} icon={icon}>
-        {renderMenuItem(items)}
-      </Menu.SubMenu>
-    );
-  }
-  return (
-    <Menu.Item
-      eventKey={index}
-      icon={icon}
-      onClick={(opts) => {
-        onClick({ ...opts, item: info });
-      }}
-      {...others}
-    >
-      {compile(children)}
-    </Menu.Item>
-  );
-};
-
-SchemaInitializer.itemWrap = (component?: SchemaInitializerItemComponent) => {
-  return component;
-};
-
-SchemaInitializer.SwitchItem = (props) => {
-  return (
-    <SchemaInitializer.Item onClick={props.onClick}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        {props.title} <Switch style={{ marginLeft: 20 }} size={'small'} checked={props.checked} />
-      </div>
-    </SchemaInitializer.Item>
-  );
-};

package/src/schema-initializer/SchemaInitializerProvider.tsx

@@ -1,58 +0,0 @@
-import { isPlainObj } from '@formily/shared';
-import React, { createContext, useContext } from 'react';
-import { SchemaComponentOptions } from '../schema-component';
-import * as globals from './buttons';
-import * as initializerComponents from './components';
-import * as items from './items';
-import { SchemaInitializer } from './SchemaInitializer';
-
-export const SchemaInitializerContext = createContext<any>({});
-
-export interface SchemaInitializerProviderProps {
-  components?: any;
-  initializers?: Record<string, any>;
-}
-
-export const useSchemaInitializer = (name: string) => {
-  const initializers = useContext(SchemaInitializerContext);
-
-  const render = (component?: any, props?: any) => {
-    return component && React.createElement(component, props);
-  };
-
-  if (!name) {
-    return { exists: false, render: (props?: any) => render(null) };
-  }
-
-  const initializer = initializers?.[name];
-
-  if (!initializer) {
-    return { exists: false, render: (props?: any) => render(null) };
-  }
-
-  if (isPlainObj(initializer)) {
-    return {
-      exists: true,
-      render: (props?: any) => {
-        const component = (initializer as any).component || SchemaInitializer.Button;
-        return render(component, { ...initializer, ...props });
-      },
-    };
-  }
-
-  return {
-    exists: true,
-    render: (props?: any) => render(initializer, props),
-  };
-};
-
-export const SchemaInitializerProvider: React.FC<SchemaInitializerProviderProps> = (props) => {
-  const { initializers, components, children } = props;
-  return (
-    <SchemaInitializerContext.Provider value={{ ...globals, ...initializers }}>
-      <SchemaComponentOptions components={{ ...items, ...components, ...initializerComponents }}>
-        {children}
-      </SchemaComponentOptions>
-    </SchemaInitializerContext.Provider>
-  );
-};

package/src/schema-initializer/buttons/BlockInitializers.tsx

@@ -1,60 +0,0 @@
-import { gridRowColWrap } from '../utils';
-
-// 页面里添加区块
-export const BlockInitializers = {
-  title: '{{t("Add block")}}',
-  icon: 'PlusOutlined',
-  wrap: gridRowColWrap,
-  items: [
-    {
-      key: 'dataBlocks',
-      type: 'itemGroup',
-      title: '{{t("Data blocks")}}',
-      children: [
-        {
-          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: 'kanban',
-          type: 'item',
-          title: '{{t("Kanban")}}',
-          component: 'KanbanBlockInitializer',
-        },
-      ],
-    },
-    {
-      key: 'media',
-      type: 'itemGroup',
-      title: '{{t("Media")}}',
-      children: [
-        {
-          key: 'markdown',
-          type: 'item',
-          title: '{{t("Markdown")}}',
-          component: 'MarkdownBlockInitializer',
-        },
-      ],
-    },
-  ],
-};

package/src/schema-initializer/buttons/CalendarActionInitializers.tsx

@@ -1,79 +0,0 @@
-// 日历的操作配置
-export const CalendarActionInitializers = {
-  title: '{{t("Configure actions")}}',
-  icon: 'SettingOutlined',
-  style: { marginLeft: 8 },
-  items: [
-    {
-      type: 'itemGroup',
-      title: '{{t("Enable actions")}}',
-      children: [
-        {
-          type: 'item',
-          title: '{{t("Today")}}',
-          component: 'ActionInitializer',
-          schema: {
-            title: '{{t("Today")}}',
-            'x-component': 'CalendarV2.Today',
-            'x-action': `calendar:today`,
-            'x-align': 'left',
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Turn pages")}}',
-          component: 'ActionInitializer',
-          schema: {
-            title: '{{t("Turn pages")}}',
-            'x-component': 'CalendarV2.Nav',
-            'x-action': `calendar:nav`,
-            'x-align': 'left',
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Title")}}',
-          component: 'ActionInitializer',
-          schema: {
-            title: '{{t("Title")}}',
-            'x-component': 'CalendarV2.Title',
-            'x-action': `calendar:title`,
-            'x-align': 'left',
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Select view")}}',
-          component: 'ActionInitializer',
-          schema: {
-            title: '{{t("Select view")}}',
-            'x-component': 'CalendarV2.ViewSelect',
-            'x-action': `calendar:viewSelect`,
-            'x-align': 'right',
-            'x-designer': 'Action.Designer',
-          },
-        },
-        {
-          type: 'item',
-          title: "{{t('Filter')}}",
-          component: 'FilterActionInitializer',
-          schema: {
-            'x-align': 'right',
-          },
-        },
-        {
-          type: 'item',
-          title: '{{ t("Add new") }}',
-          component: 'CreateActionInitializer',
-          schema: {
-            'x-align': 'right',
-            'x-decorator': 'ACLActionProvider',
-            'x-acl-action-props': {
-              skipScopeCheck: true,
-            },
-          },
-        },
-      ],
-    },
-  ],
-};

package/src/schema-initializer/buttons/CreateFormBlockInitializers.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { SchemaInitializer } from '../..';
-import { gridRowColWrap } from '../utils';
-
-export const CreateFormBlockInitializers = (props: any) => {
-  const { t } = useTranslation();
-  const { insertPosition, component } = props;
-  return (
-    <SchemaInitializer.Button
-      wrap={gridRowColWrap}
-      title={component ? null : t('Add block')}
-      icon={'PlusOutlined'}
-      insertPosition={insertPosition}
-      component={component}
-      items={[
-        {
-          type: 'itemGroup',
-          title: '{{t("Data blocks")}}',
-          children: [
-            {
-              type: 'item',
-              title: '{{t("Form")}}',
-              component: 'CreateFormBlockInitializer',
-            },
-          ],
-        },
-        {
-          type: 'itemGroup',
-          title: '{{t("Media")}}',
-          children: [
-            {
-              type: 'item',
-              title: '{{t("Markdown")}}',
-              component: 'MarkdownBlockInitializer',
-            },
-          ],
-        },
-      ]}
-    />
-  );
-};

package/src/schema-initializer/buttons/CustomFormItemInitializers.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { SchemaInitializer } from '../SchemaInitializer';
-import { gridRowColWrap, useCustomFormItemInitializerFields } from '../utils';
-
-// 表单里配置字段
-export const CustomFormItemInitializers = (props: any) => {
-  const { t } = useTranslation();
-  const { insertPosition, component } = props;
-  return (
-    <SchemaInitializer.Button
-      wrap={gridRowColWrap}
-      icon={'SettingOutlined'}
-      items={[
-        {
-          type: 'itemGroup',
-          title: t('Configure fields'),
-          children: useCustomFormItemInitializerFields(),
-        },
-      ]}
-      insertPosition={insertPosition}
-      component={component}
-      title={component ? null : t('Configure fields')}
-    />
-  );
-};

package/src/schema-initializer/buttons/DetailsActionInitializers.tsx

@@ -1,37 +0,0 @@
-// 表单的操作配置
-export const DetailsActionInitializers = {
-  title: '{{t("Configure actions")}}',
-  icon: 'SettingOutlined',
-  style: {
-    marginLeft: 8,
-  },
-  items: [
-    {
-      type: 'itemGroup',
-      title: '{{t("Enable actions")}}',
-      children: [
-        {
-          type: 'item',
-          title: '{{t("Edit")}}',
-          component: 'UpdateActionInitializer',
-          schema: {
-            'x-component': 'Action',
-            'x-decorator': 'ACLActionProvider',
-            'x-component-props': {
-              type: 'primary',
-            },
-          },
-        },
-        {
-          type: 'item',
-          title: '{{t("Delete")}}',
-          component: 'DestroyActionInitializer',
-          schema: {
-            'x-component': 'Action',
-            'x-decorator': 'ACLActionProvider',
-          },
-        },
-      ],
-    },
-  ],
-};