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

package/src/schema-component/antd/menu/Menu.tsx

@@ -1,433 +0,0 @@
-import { css } from '@emotion/css';
-import {
-  observer,
-  RecursionField,
-  Schema,
-  SchemaExpressionScopeContext,
-  useField,
-  useFieldSchema,
-} from '@formily/react';
-import { Menu as AntdMenu } from 'antd';
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { createDesignable, DndContext, SortableItem, useDesignable, useDesigner } from '../..';
-import { Icon, useAPIClient, useSchemaInitializer } from '../../../';
-import { useProps } from '../../hooks/useProps';
-import { MenuDesigner } from './Menu.Designer';
-import { findKeysByUid, findMenuItem } from './util';
-
-const subMenuDesignerCss = css`
-  position: relative;
-  display: inline-block;
-  margin-left: -24px;
-  margin-right: -34px;
-  padding: 0 34px 0 24px;
-  width: calc(100% + 58px);
-  &:hover {
-    > .general-schema-designer {
-      display: block;
-    }
-  }
-  &.nb-action-link {
-    > .general-schema-designer {
-      top: -10px;
-      bottom: -10px;
-      left: -10px;
-      right: -10px;
-    }
-  }
-  > .general-schema-designer {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: none;
-    background: rgba(241, 139, 98, 0.06);
-    border: 0;
-    pointer-events: none;
-    > .general-schema-designer-icons {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      line-height: 16px;
-      pointer-events: all;
-      .ant-space-item {
-        background-color: #f18b62;
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        padding-left: 1px;
-      }
-    }
-  }
-`;
-
-const designerCss = css`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-left: -20px;
-  margin-right: -20px;
-  padding: 0 20px;
-  width: calc(100% + 40px);
-  &:hover {
-    > .general-schema-designer {
-      display: block;
-    }
-  }
-  &.nb-action-link {
-    > .general-schema-designer {
-      top: -10px;
-      bottom: -10px;
-      left: -10px;
-      right: -10px;
-    }
-  }
-  > .general-schema-designer {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: none;
-    background: rgba(241, 139, 98, 0.06);
-    border: 0;
-    pointer-events: none;
-    > .general-schema-designer-icons {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      line-height: 16px;
-      pointer-events: all;
-      .ant-space-item {
-        background-color: #f18b62;
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        padding-left: 1px;
-      }
-    }
-  }
-`;
-
-type ComposedMenu = React.FC<any> & {
-  Item?: React.FC<any>;
-  URL?: React.FC<any>;
-  SubMenu?: React.FC<any>;
-  Designer?: React.FC<any>;
-};
-
-const MenuModeContext = createContext(null);
-
-const useSideMenuRef = () => {
-  const schema = useFieldSchema();
-  const scope = useContext(SchemaExpressionScopeContext);
-  const scopeKey = schema?.['x-component-props']?.['sideMenuRefScopeKey'];
-  if (!scopeKey) {
-    return;
-  }
-  return scope[scopeKey];
-};
-
-const MenuItemDesignerContext = createContext(null);
-
-export const Menu: ComposedMenu = observer((props) => {
-  let {
-    onSelect,
-    mode,
-    selectedUid,
-    defaultSelectedUid,
-    sideMenuRefScopeKey,
-    defaultSelectedKeys: dSelectedKeys,
-    defaultOpenKeys: dOpenKeys,
-    ...others
-  } = useProps(props);
-  const { t } = useTranslation();
-  const Designer = useDesigner();
-  const schema = useFieldSchema();
-  const { refresh } = useDesignable();
-  const api = useAPIClient();
-  const { render } = useSchemaInitializer(schema['x-initializer']);
-  const sideMenuRef = useSideMenuRef();
-  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState(() => {
-    if (dSelectedKeys) {
-      return dSelectedKeys;
-    }
-    if (defaultSelectedUid) {
-      return findKeysByUid(schema, defaultSelectedUid);
-    }
-    return [];
-  });
-  const [loading, setLoading] = useState(false);
-  const [defaultOpenKeys, setDefaultOpenKeys] = useState(() => {
-    if (['inline', 'mix'].includes(mode)) {
-      return dOpenKeys || defaultSelectedKeys;
-    }
-    return dOpenKeys;
-  });
-  const [sideMenuSchema, setSideMenuSchema] = useState<Schema>(() => {
-    const key = defaultSelectedKeys?.[0] || null;
-    if (mode === 'mix' && key) {
-      const s = schema.properties?.[key];
-      if (s['x-component'] === 'Menu.SubMenu') {
-        return s;
-      }
-    }
-    return null;
-  });
-  useEffect(() => {
-    const keys = findKeysByUid(schema, selectedUid);
-    setDefaultSelectedKeys(keys);
-    if (['inline', 'mix'].includes(mode)) {
-      setDefaultOpenKeys(dOpenKeys || keys);
-    }
-    const key = keys?.[0] || null;
-    if (mode === 'mix') {
-      if (key) {
-        const s = schema.properties?.[key];
-        if (s['x-component'] === 'Menu.SubMenu') {
-          setSideMenuSchema(s);
-        }
-      } else {
-        setSideMenuSchema(null);
-      }
-    }
-  }, [selectedUid]);
-  useEffect(() => {
-    if (['inline', 'mix'].includes(mode)) {
-      setDefaultOpenKeys(defaultSelectedKeys);
-    }
-  }, [defaultSelectedKeys]);
-  useEffect(() => {
-    const sideMenuElement = sideMenuRef?.current as HTMLElement;
-    if (!sideMenuElement) {
-      return;
-    }
-    sideMenuElement.style.display = sideMenuSchema?.['x-component'] === 'Menu.SubMenu' ? 'block' : 'none';
-  }, [sideMenuSchema?.name, sideMenuRef]);
-  const { designable } = useDesignable();
-  return (
-    <DndContext>
-      <MenuItemDesignerContext.Provider value={Designer}>
-        <MenuModeContext.Provider value={mode}>
-          <AntdMenu
-            {...others}
-            style={
-              {
-                // width: mode === 'mix' ? '100%' : undefined,
-              }
-            }
-            className={css`
-              .ant-menu-item:hover {
-                > .ant-menu-title-content > div {
-                  .general-schema-designer {
-                    display: block;
-                  }
-                }
-              }
-            `}
-            onSelect={(info: any) => {
-              const s = schema.properties[info.key];
-              if (mode === 'mix') {
-                setSideMenuSchema(s);
-                if (s['x-component'] !== 'Menu.SubMenu') {
-                  onSelect && onSelect(info);
-                } else {
-                  const menuItemSchema = findMenuItem(s);
-                  if (!menuItemSchema) {
-                    return;
-                  }
-                  // TODO
-                  setLoading(true);
-                  const keys = findKeysByUid(schema, menuItemSchema['x-uid']);
-                  setDefaultSelectedKeys(keys);
-                  setTimeout(() => {
-                    setLoading(false);
-                  }, 100);
-                  onSelect &&
-                    onSelect({
-                      key: menuItemSchema.name,
-                      item: {
-                        props: {
-                          schema: menuItemSchema,
-                        },
-                      },
-                    });
-                }
-              } else {
-                onSelect && onSelect(info);
-              }
-            }}
-            mode={mode === 'mix' ? 'horizontal' : mode}
-            defaultOpenKeys={defaultOpenKeys}
-            defaultSelectedKeys={defaultSelectedKeys}
-            selectedKeys={defaultSelectedKeys}
-          >
-            {designable && (
-              <AntdMenu.Item disabled style={{ padding: '0 8px', order: 9999 }}>
-                {render({ style: { background: 'none' } })}
-              </AntdMenu.Item>
-            )}
-            {props.children}
-          </AntdMenu>
-          {loading
-            ? null
-            : mode === 'mix' &&
-              sideMenuSchema?.['x-component'] === 'Menu.SubMenu' &&
-              sideMenuRef?.current?.firstChild &&
-              createPortal(
-                <MenuModeContext.Provider value={'inline'}>
-                  <AntdMenu
-                    mode={'inline'}
-                    defaultOpenKeys={defaultOpenKeys}
-                    defaultSelectedKeys={defaultSelectedKeys}
-                    onSelect={(info) => {
-                      onSelect && onSelect(info);
-                    }}
-                    className={css`
-                      .ant-menu-item {
-                        > .ant-menu-title-content {
-                          margin-left: -24px;
-                          margin-right: -16px;
-                          padding: 0 16px 0 24px;
-                          > div {
-                            > .general-schema-designer {
-                              right: 6px !important;
-                            }
-                          }
-                        }
-                      }
-                      .ant-menu-submenu-title {
-                        .ant-menu-title-content {
-                          margin-left: -24px;
-                          margin-right: -34px;
-                          padding: 0 34px 0 24px;
-                          > div {
-                            > .general-schema-designer {
-                              right: 6px !important;
-                            }
-                            > span.anticon {
-                              margin-right: 10px;
-                            }
-                          }
-                        }
-                      }
-                    `}
-                  >
-                    <RecursionField schema={sideMenuSchema} onlyRenderProperties />
-                    {render({
-                      style: { margin: 8 },
-                      insert: (s) => {
-                        const dn = createDesignable({
-                          t,
-                          api,
-                          refresh,
-                          current: sideMenuSchema,
-                        });
-                        dn.loadAPIClientEvents();
-                        dn.insertAdjacent('beforeEnd', s);
-                      },
-                    })}
-                  </AntdMenu>
-                </MenuModeContext.Provider>,
-                sideMenuRef.current.firstChild,
-              )}
-        </MenuModeContext.Provider>
-      </MenuItemDesignerContext.Provider>
-    </DndContext>
-  );
-});
-
-Menu.Item = observer((props) => {
-  const { icon, ...others } = props;
-  const schema = useFieldSchema();
-  const field = useField();
-  const Designer = useContext(MenuItemDesignerContext);
-  return (
-    <AntdMenu.Item {...others} key={schema.name} eventKey={schema.name} schema={schema}>
-      <SortableItem className={designerCss}>
-        <Icon type={icon} />
-        <span
-          className={css`
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            width: 100%;
-            vertical-align: middle;
-          `}
-        >
-          {field.title}
-        </span>
-        <Designer />
-      </SortableItem>
-    </AntdMenu.Item>
-  );
-});
-
-Menu.URL = observer((props) => {
-  const { icon, ...others } = props;
-  const schema = useFieldSchema();
-  const field = useField();
-  const Designer = useContext(MenuItemDesignerContext);
-  return (
-    <AntdMenu.Item
-      {...others}
-      key={schema.name}
-      eventKey={schema.name}
-      schema={schema}
-      onClick={() => {
-        window.open(props.href, '_blank');
-      }}
-    >
-      <SortableItem className={designerCss}>
-        <Icon type={icon} />
-        <span
-          className={css`
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: inline-block;
-            width: 100%;
-            vertical-align: middle;
-          `}
-        >
-          {field.title}
-        </span>
-        <Designer />
-      </SortableItem>
-    </AntdMenu.Item>
-  );
-});
-
-Menu.SubMenu = observer((props) => {
-  const { icon, ...others } = props;
-  const schema = useFieldSchema();
-  const field = useField();
-  const mode = useContext(MenuModeContext);
-  const Designer = useContext(MenuItemDesignerContext);
-  if (mode === 'mix') {
-    return <Menu.Item {...props} />;
-  }
-  return (
-    <AntdMenu.SubMenu
-      {...others}
-      key={schema.name}
-      eventKey={schema.name}
-      title={
-        <SortableItem className={subMenuDesignerCss}>
-          <Icon type={icon} />
-          {field.title}
-          <Designer />
-        </SortableItem>
-      }
-    >
-      <RecursionField schema={schema} onlyRenderProperties />
-    </AntdMenu.SubMenu>
-  );
-});
-
-Menu.Designer = MenuDesigner;

package/src/schema-component/antd/menu/MenuItemInitializers/index.tsx

@@ -1,229 +0,0 @@
-import { FormDialog, FormLayout } from '@formily/antd';
-import { SchemaOptionsContext } from '@formily/react';
-import React, { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { SchemaComponent, SchemaComponentOptions } from '../../..';
-import { SchemaInitializer } from '../../../../schema-initializer';
-
-export const MenuItemInitializers = (props: any) => {
-  const { t } = useTranslation();
-  return (
-    <SchemaInitializer.Button
-      insertPosition={'beforeEnd'}
-      icon={'PlusOutlined'}
-      insert={props.insert}
-      style={props.style}
-      {...props}
-      items={[
-        {
-          type: 'item',
-          title: t('Group'),
-          component: GroupItem,
-        },
-        {
-          type: 'item',
-          title: t('Page'),
-          component: PageMenuItem,
-        },
-        {
-          type: 'item',
-          title: t('Link'),
-          component: LinkMenuItem,
-        },
-      ]}
-    >
-      {t('Add menu item')}
-    </SchemaInitializer.Button>
-  );
-};
-
-const itemWrap = SchemaInitializer.itemWrap;
-
-export const GroupItem = itemWrap((props) => {
-  const { insert } = props;
-  const { t } = useTranslation();
-  const options = useContext(SchemaOptionsContext);
-  return (
-    <SchemaInitializer.Item
-      {...props}
-      onClick={async () => {
-        const values = await FormDialog(t('Add group'), () => {
-          return (
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-              <FormLayout layout={'vertical'}>
-                <SchemaComponent
-                  schema={{
-                    properties: {
-                      title: {
-                        title: t('Menu item title'),
-                        'x-component': 'Input',
-                        'x-decorator': 'FormItem',
-                        required: true,
-                      },
-                      icon: {
-                        title: t('Icon'),
-                        'x-component': 'IconPicker',
-                        'x-decorator': 'FormItem',
-                      },
-                    },
-                  }}
-                />
-              </FormLayout>
-            </SchemaComponentOptions>
-          );
-        }).open({
-          initialValues: {},
-        });
-        const { title, icon } = values;
-        insert({
-          type: 'void',
-          title,
-          'x-component': 'Menu.SubMenu',
-          'x-decorator': 'ACLMenuItemProvider',
-          'x-component-props': {
-            icon,
-          },
-          'x-server-hooks': [
-            {
-              type: 'onSelfCreate',
-              method: 'bindMenuToRole',
-            },
-          ],
-        });
-      }}
-    />
-  );
-});
-
-export const PageMenuItem = itemWrap((props) => {
-  const { insert } = props;
-  const { t } = useTranslation();
-  const options = useContext(SchemaOptionsContext);
-  return (
-    <SchemaInitializer.Item
-      {...props}
-      onClick={async () => {
-        const values = await FormDialog(t('Add page'), () => {
-          return (
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-              <FormLayout layout={'vertical'}>
-                <SchemaComponent
-                  schema={{
-                    properties: {
-                      title: {
-                        title: t('Menu item title'),
-                        required: true,
-                        'x-component': 'Input',
-                        'x-decorator': 'FormItem',
-                      },
-                      icon: {
-                        title: t('Icon'),
-                        'x-component': 'IconPicker',
-                        'x-decorator': 'FormItem',
-                      },
-                    },
-                  }}
-                />
-              </FormLayout>
-            </SchemaComponentOptions>
-          );
-        }).open({
-          initialValues: {},
-        });
-        const { title, icon } = values;
-        insert({
-          type: 'void',
-          title,
-          'x-component': 'Menu.Item',
-          'x-decorator': 'ACLMenuItemProvider',
-          'x-component-props': {
-            icon,
-          },
-          'x-server-hooks': [
-            {
-              type: 'onSelfCreate',
-              method: 'bindMenuToRole',
-            },
-          ],
-          properties: {
-            page: {
-              type: 'void',
-              'x-component': 'Page',
-              'x-async': true,
-              properties: {
-                grid: {
-                  type: 'void',
-                  'x-component': 'Grid',
-                  'x-initializer': 'BlockInitializers',
-                  properties: {},
-                },
-              },
-            },
-          },
-        });
-      }}
-    />
-  );
-});
-
-export const LinkMenuItem = itemWrap((props) => {
-  const { insert } = props;
-  const { t } = useTranslation();
-  const options = useContext(SchemaOptionsContext);
-  return (
-    <SchemaInitializer.Item
-      {...props}
-      onClick={async () => {
-        const values = await FormDialog(t('Add link'), () => {
-          return (
-            <SchemaComponentOptions scope={options.scope} components={{ ...options.components }}>
-              <FormLayout layout={'vertical'}>
-                <SchemaComponent
-                  schema={{
-                    properties: {
-                      title: {
-                        title: t('Menu item title'),
-                        required: true,
-                        'x-component': 'Input',
-                        'x-decorator': 'FormItem',
-                      },
-                      icon: {
-                        title: t('Icon'),
-                        'x-component': 'IconPicker',
-                        'x-decorator': 'FormItem',
-                      },
-                      href: {
-                        title: t('Link'),
-                        'x-component': 'Input',
-                        'x-decorator': 'FormItem',
-                      },
-                    },
-                  }}
-                />
-              </FormLayout>
-            </SchemaComponentOptions>
-          );
-        }).open({
-          initialValues: {},
-        });
-        const { title, href, icon } = values;
-        insert({
-          type: 'void',
-          title,
-          'x-component': 'Menu.URL',
-          'x-decorator': 'ACLMenuItemProvider',
-          'x-component-props': {
-            icon,
-            href,
-          },
-          'x-server-hooks': [
-            {
-              type: 'onSelfCreate',
-              method: 'bindMenuToRole',
-            },
-          ],
-        });
-      }}
-    />
-  );
-});