@nocobase/client 0.5.0-alpha.36 → 0.7.0-alpha.0

package/lib/schemas/menu/index.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Schema } from '@formily/react';
-import './style.less';
-export interface MenuContextProps {
-    schema?: Schema;
-    onRemove?: any;
-}
-export declare const MenuModeContext: React.Context<any>;
-export declare const MenuContext: React.Context<MenuContextProps>;
-export declare const MenuSelectedKeysContext: React.Context<any>;
-export declare const Menu: any;
-export default Menu;

package/lib/schemas/menu/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/schemas/menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAQL,MAAM,EAIP,MAAM,gBAAgB,CAAC;AAmCxB,OAAO,cAAc,CAAC;AAoBtB,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,eAAO,MAAM,eAAe,oBAAsB,CAAC;AACnD,eAAO,MAAM,WAAW,iCAAwC,CAAC;AA6CjE,eAAO,MAAM,uBAAuB,oBAAyB,CAAC;AAE9D,eAAO,MAAM,IAAI,EAAE,GA8HjB,CAAC;AAwzBH,eAAe,IAAI,CAAC","file":"index.d.ts","sourcesContent":["import React, {\n  Children,\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  forwardRef,\n} from 'react';\nimport {\n  connect,\n  observer,\n  mapProps,\n  mapReadPretty,\n  useField,\n  useFieldSchema,\n  RecursionField,\n  Schema,\n  SchemaOptionsContext,\n  FormProvider,\n  useForm,\n} from '@formily/react';\nimport {\n  Menu as AntdMenu,\n  MenuProps,\n  MenuItemProps,\n  SubMenuProps,\n  DividerProps,\n  Dropdown,\n  Modal,\n  Button,\n  Space,\n} from 'antd';\nimport { uid } from '@formily/shared';\nimport cls from 'classnames';\nimport {\n  SchemaField,\n  SchemaRenderer,\n  useDesignable,\n} from '../../components/schema-renderer';\nimport {\n  MenuOutlined,\n  PlusOutlined,\n  GroupOutlined,\n  LinkOutlined,\n  DeleteOutlined,\n  EditOutlined,\n  ArrowUpOutlined,\n  ArrowDownOutlined,\n  ArrowRightOutlined,\n  DragOutlined,\n  LockOutlined,\n} from '@ant-design/icons';\nimport { IconPicker } from '../../components/icon-picker';\nimport { useDefaultAction } from '..';\nimport { useMount } from 'ahooks';\nimport './style.less';\nimport { findPropertyByPath, getSchemaPath, useSchemaPath } from '../../';\nimport { generateDefaultSchema } from './defaultSchemas';\nimport _, { cloneDeep, get, isNull } from 'lodash';\nimport { FormDialog, FormItem, FormLayout, Input } from '@formily/antd';\nimport deepmerge from 'deepmerge';\nimport { onFieldChange } from '@formily/core';\nimport { VisibleContext } from '../../context';\nimport {\n  DragHandle,\n  SortableItem,\n  SortableItemContext,\n} from '../../components/Sortable';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { createPortal } from 'react-dom';\nimport { Resource } from '../../resource';\nimport { useClient } from '../../constate';\nimport { useTranslation } from 'react-i18next';\nimport { useCompile } from '../../hooks/useCompile';\n\nexport interface MenuContextProps {\n  schema?: Schema;\n  onRemove?: any;\n}\n\nexport const MenuModeContext = createContext(null);\nexport const MenuContext = createContext<MenuContextProps>(null);\n\nconst SideMenu = (props: any) => {\n  const { selectedKey, defaultSelectedKeys, onSelect, path } = props;\n  const { t } = useTranslation();\n  const { schema } = useDesignable();\n  const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);\n  useEffect(() => {\n    setSelectedKeys(defaultSelectedKeys);\n  }, [defaultSelectedKeys]);\n  if (!selectedKey) {\n    return null;\n  }\n  const child = schema.properties && schema.properties[selectedKey];\n  if (!child || child['x-component'] !== 'Menu.SubMenu') {\n    return null;\n  }\n\n  return (\n    <MenuModeContext.Provider value={'inline'}>\n      <AntdMenu\n        mode={'inline'}\n        onSelect={onSelect}\n        onOpenChange={(openKeys) => {\n          setSelectedKeys(openKeys);\n        }}\n        openKeys={selectedKeys}\n        selectedKeys={selectedKeys}\n      >\n        <RecursionField schema={child} onlyRenderProperties />\n        <Menu.AddNew key={uid()} path={[...path, selectedKey]}>\n          <Button\n            // block\n            type={'dashed'}\n            icon={<PlusOutlined />}\n            className={`nb-add-new-menu-item menu-mode-inline designable-btn designable-btn-dash`}\n          >\n            {t('Add menu item')}\n          </Button>\n        </Menu.AddNew>\n      </AntdMenu>\n    </MenuModeContext.Provider>\n  );\n};\n\nexport const MenuSelectedKeysContext = createContext<any>([]);\n\nexport const Menu: any = observer((props: any) => {\n  const {\n    mode,\n    onSelect,\n    sideMenuRef,\n    defaultSelectedKeys: keys,\n    getSelectedKeys,\n    onRemove,\n    ...others\n  } = props;\n  const defaultSelectedKeys = useContext(MenuSelectedKeysContext);\n  const { root, schema, insertAfter, remove } = useDesignable();\n  const moveToAfter = (path1, path2) => {\n    if (!path1 || !path2) {\n      return;\n    }\n    if (path1.join('.') === path2.join('.')) {\n      return;\n    }\n    const data = findPropertyByPath(root, path1);\n    if (!data) {\n      return;\n    }\n    remove(path1);\n    return insertAfter(data.toJSON(), path2);\n  };\n  const fieldSchema = useFieldSchema();\n  console.log('Menu.schema', schema, fieldSchema);\n  const [selectedKey, setSelectedKey] = useState(\n    defaultSelectedKeys[0] || null,\n  );\n  const path = useSchemaPath();\n  const child = schema.properties && schema.properties[selectedKey];\n  const isSubMenu = child && child['x-component'] === 'Menu.SubMenu';\n  const { updateSchema } = useClient();\n  const { t } = useTranslation();\n\n  useEffect(() => {\n    const sideMenuElement = sideMenuRef && (sideMenuRef.current as HTMLElement);\n    if (!sideMenuElement) {\n      return;\n    }\n    sideMenuElement.style.display = isSubMenu ? 'block' : 'none';\n  }, [selectedKey, sideMenuRef]);\n\n  const [dragOverlayContent, setDragOverlayContent] = useState('');\n  // console.log('defaultSelectedKeys', defaultSelectedKeys, getSelectedKeys);\n  return (\n    <MenuContext.Provider value={{ schema, onRemove }}>\n      <DndContext\n        onDragStart={(event) => {\n          console.log({ event });\n          setDragOverlayContent(event.active.data?.current?.title || '');\n        }}\n        onDragEnd={async (event) => {\n          console.log({ event });\n          const path1 = event.active?.data?.current?.path;\n          const path2 = event.over?.data?.current?.path;\n          const data = moveToAfter(path1, path2);\n          await updateSchema(data);\n        }}\n      >\n        {createPortal(\n          <DragOverlay\n            style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}\n            dropAnimation={{\n              duration: 10,\n              easing: 'cubic-bezier(0.18, 0.67, 0.6, 1.22)',\n            }}\n          >\n            {dragOverlayContent}\n          </DragOverlay>,\n          document.body,\n        )}\n        <MenuModeContext.Provider value={mode}>\n          <AntdMenu\n            defaultOpenKeys={defaultSelectedKeys}\n            defaultSelectedKeys={defaultSelectedKeys}\n            {...others}\n            mode={mode === 'mix' ? 'horizontal' : mode}\n            onSelect={(info) => {\n              if (mode === 'mix') {\n                setSelectedKey(info.key);\n              }\n              const selectedSchema = schema.properties[info.key];\n              console.log({ selectedSchema });\n              onSelect && onSelect({ ...info, schema: selectedSchema });\n            }}\n          >\n            <RecursionField schema={schema} onlyRenderProperties />\n            <Menu.AddNew key={uid()} path={path}>\n              {/* <PlusOutlined className={'nb-add-new-icon'} /> */}\n              <Button\n                className={`designable-btn designable-btn-dash nb-add-new-menu-item designable menu-mode-${\n                  mode === 'mix' ? 'horizontal' : mode\n                }`}\n                block\n                icon={<PlusOutlined />}\n                type={mode == 'inline' ? 'dashed' : 'primary'}\n              >\n                {t('Add menu item')}\n              </Button>\n            </Menu.AddNew>\n          </AntdMenu>\n          {mode === 'mix' &&\n            sideMenuRef.current?.firstChild &&\n            createPortal(\n              <SideMenu\n                path={path}\n                onSelect={(info) => {\n                  const keyPath = [selectedKey, ...[...info.keyPath].reverse()];\n                  const selectedSchema = findPropertyByPath(schema, keyPath);\n                  console.log('keyPath', keyPath, selectedSchema);\n                  onSelect &&\n                    onSelect({ ...info, keyPath, schema: selectedSchema });\n                }}\n                defaultSelectedKeys={defaultSelectedKeys || []}\n                selectedKey={selectedKey}\n                sideMenuRef={sideMenuRef}\n              />,\n              sideMenuRef.current.firstChild,\n            )}\n        </MenuModeContext.Provider>\n      </DndContext>\n    </MenuContext.Provider>\n  );\n});\n\nMenu.Divider = observer(AntdMenu.Divider);\n\nMenu.Item = observer((props: any) => {\n  const { icon } = props;\n  const { schema, DesignableBar } = useDesignable();\n  const compile = useCompile();\n  const title = compile(schema.title);\n  return (\n    <AntdMenu.Item\n      {...props}\n      icon={null}\n      eventKey={schema.name}\n      key={schema.name}\n    >\n      <SortableItem\n        id={schema.name}\n        data={{\n          title,\n          path: getSchemaPath(schema),\n        }}\n      >\n        {icon && (\n          <span style={{ marginRight: 10 }}>\n            <IconPicker type={icon} />\n          </span>\n        )}\n        {title}\n        <DesignableBar />\n      </SortableItem>\n    </AntdMenu.Item>\n  );\n});\n\nMenu.Link = observer((props: any) => {\n  const { icon } = props;\n  const { schema, DesignableBar } = useDesignable();\n  const compile = useCompile();\n  const title = compile(schema.title);\n  return (\n    <AntdMenu.Item\n      {...props}\n      icon={null}\n      eventKey={schema.name}\n      key={schema.name}\n    >\n      <SortableItem\n        id={schema.name}\n        data={{\n          title,\n          path: getSchemaPath(schema),\n        }}\n      >\n        {icon && (\n          <span style={{ marginRight: 10 }}>\n            <IconPicker type={icon} />\n          </span>\n        )}\n        {title}\n        <DesignableBar />\n      </SortableItem>\n      {/* <Link to={props.to || schema.name}>{schema.title}</Link> */}\n      <DesignableBar />\n    </AntdMenu.Item>\n  );\n});\n\nMenu.URL = observer((props: any) => {\n  const { icon } = props;\n  const { schema, DesignableBar } = useDesignable();\n  const compile = useCompile();\n  const title = compile(schema.title);\n  return (\n    <AntdMenu.Item\n      {...props}\n      icon={null}\n      eventKey={schema.name}\n      key={schema.name}\n      onClick={(info) => {\n        window.open(props.href);\n      }}\n    >\n      <SortableItem\n        id={schema.name}\n        data={{\n          title,\n          path: getSchemaPath(schema),\n        }}\n      >\n        {icon && (\n          <span style={{ marginRight: 10 }}>\n            <IconPicker type={icon} />\n          </span>\n        )}\n        {title}\n        <DesignableBar />\n      </SortableItem>\n      <DesignableBar />\n    </AntdMenu.Item>\n  );\n});\n\nMenu.Action = observer((props: any) => {\n  const { icon, useAction = useDefaultAction, ...others } = props;\n  const { schema, DesignableBar } = useDesignable();\n  const field = useField();\n  const [visible, setVisible] = useState(false);\n  const { run } = useAction();\n  const compile = useCompile();\n  const title = compile(schema.title);\n  return (\n    <VisibleContext.Provider value={[visible, setVisible]}>\n      <AntdMenu.Item\n        {...others}\n        key={schema.name}\n        eventKey={schema.name}\n        icon={<IconPicker type={icon} />}\n        onClick={async () => {\n          await run();\n          setVisible(true);\n        }}\n      >\n        <SortableItem\n          id={schema.name}\n          data={{\n            title,\n            path: getSchemaPath(schema),\n          }}\n        >\n          {title}\n          <DesignableBar />\n        </SortableItem>\n      </AntdMenu.Item>\n      {props.children}\n      {/* <RecursionField schema={schema} onlyRenderProperties /> */}\n    </VisibleContext.Provider>\n  );\n});\n\nMenu.SubMenu = observer((props: any) => {\n  const { icon } = props;\n  const { schema, DesignableBar } = useDesignable();\n  const mode = useContext(MenuModeContext);\n  const compile = useCompile();\n  const title = compile(schema.title);\n  return mode === 'mix' ? (\n    <Menu.Item {...props} />\n  ) : (\n    <AntdMenu.SubMenu\n      {...props}\n      icon={null}\n      // icon={<IconPicker type={icon} />}\n      title={\n        <SortableItem\n          id={schema.name}\n          data={{\n            title,\n            path: getSchemaPath(schema),\n          }}\n        >\n          {icon && (\n            <span style={{ marginRight: 10 }}>\n              <IconPicker type={icon} />\n            </span>\n          )}\n          {title}\n          <DesignableBar />\n        </SortableItem>\n        // <>\n        //   {schema.title} <DesignableBar />\n        // </>\n      }\n      eventKey={schema.name}\n      key={schema.name}\n    >\n      <RecursionField schema={schema} onlyRenderProperties />\n    </AntdMenu.SubMenu>\n  );\n});\n\nMenu.AddNew = observer((props: any) => {\n  const { designable, appendChild } = useDesignable(props.path);\n  const { createSchema, removeSchema, updateSchema } = useClient();\n  const { t } = useTranslation();\n  if (!designable) {\n    return null;\n  }\n  const schemas = {\n    'Menu.Link': {\n      icon: <MenuOutlined />,\n      title: t('Add page'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n        },\n      },\n    },\n    'Menu.SubMenu': {\n      icon: <GroupOutlined />,\n      title: t('Add group'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n        },\n      },\n    },\n    'Menu.URL': {\n      icon: <LinkOutlined />,\n      title: t('Add link'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n          'x-component-props.href': {\n            type: 'string',\n            title: t('Link'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n        },\n      },\n    },\n  };\n\n  return (\n    <AntdMenu.ItemGroup\n      className={'nb-menu-add-new'}\n      title={\n        <Dropdown\n          // trigger={['click']}\n          overlay={\n            <AntdMenu\n              onClick={async (info) => {\n                console.log({ info });\n                const values = await FormDialog(schemas[info.key].title, () => {\n                  return (\n                    <FormLayout layout={'vertical'}>\n                      <SchemaField schema={schemas[info.key].schema} />\n                    </FormLayout>\n                  );\n                }).open();\n                const defaults = generateDefaultSchema(info.key);\n                const data = appendChild(deepmerge(defaults, values));\n                await createSchema(data);\n              }}\n            >\n              <AntdMenu.Item key={'Menu.SubMenu'} icon={<GroupOutlined />}>\n                {t('Group')}\n              </AntdMenu.Item>\n              <AntdMenu.Item key={'Menu.Link'} icon={<MenuOutlined />}>\n                {t('Page')}\n              </AntdMenu.Item>\n              <AntdMenu.Item key={'Menu.URL'} icon={<LinkOutlined />}>\n                {t('Link')}\n              </AntdMenu.Item>\n            </AntdMenu>\n          }\n        >\n          {props.children}\n        </Dropdown>\n      }\n    />\n  );\n});\n\nMenu.DesignableBar = (props) => {\n  const { t } = useTranslation();\n  const schemas = {\n    'Menu.Action': {\n      icon: <MenuOutlined />,\n      title: t('Page'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n        },\n      },\n    },\n    'Menu.Item': {\n      icon: <MenuOutlined />,\n      title: t('Page'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n        },\n      },\n    },\n    'Menu.Link': {\n      icon: <MenuOutlined />,\n      title: t('Page'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n        },\n      },\n    },\n    'Menu.SubMenu': {\n      icon: <GroupOutlined />,\n      title: t('Group'),\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n        },\n      },\n    },\n    'Menu.URL': {\n      icon: <LinkOutlined />,\n      title: 'Link',\n      schema: {\n        type: 'object',\n        properties: {\n          title: {\n            type: 'string',\n            title: t('Name'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n          'x-component-props.icon': {\n            type: 'string',\n            title: t('Icon'),\n            'x-decorator': 'FormItem',\n            'x-component': 'IconPicker',\n          },\n          'x-component-props.href': {\n            type: 'string',\n            title: t('Link'),\n            required: true,\n            'x-decorator': 'FormItem',\n            'x-component': 'Input',\n          },\n        },\n      },\n    },\n  };\n\n  const field = useField();\n  const [visible, setVisible] = useState(false);\n  const {\n    designable,\n    schema,\n    remove,\n    refresh,\n    insertAfter,\n    insertBefore,\n    appendChild,\n  } = useDesignable();\n  const formConfig = schemas[schema['x-component']];\n  const isSubMenu = schema['x-component'] === 'Menu.SubMenu';\n  const ctx = useContext(MenuContext);\n  const mode = useContext(MenuModeContext);\n  const { createSchema, removeSchema, updateSchema } = useClient();\n\n  return (\n    <div className={cls('designable-bar', { active: visible })}>\n      <div\n        onClick={(e) => {\n          e.stopPropagation();\n          e.preventDefault();\n        }}\n        className={'designable-bar-actions'}\n      >\n        <Space size={2}>\n          <DragHandle />\n          <Dropdown\n            overlayStyle={{\n              minWidth: 150,\n            }}\n            trigger={['hover']}\n            overlay={\n              <AntdMenu\n                onClick={async (info) => {\n                  if (['update', 'move', 'delete'].includes(info.key)) {\n                    return;\n                  }\n                  const methodLabels = {\n                    insertBefore: 'before',\n                    insertAfter: 'after',\n                    appendChild: 'in',\n                  };\n                  const keys = info.key.split('.');\n                  const method = keys.shift();\n                  const type = keys.join('.');\n                  const config = schemas[type];\n                  if (!config) {\n                    return;\n                  }\n                  const values = await FormDialog(\n                    t(`Add {{type}} ${methodLabels[method]} \"{{title}}\"`, {\n                      type: (config.title as string).toLowerCase(),\n                      title: schema.title,\n                    }),\n                    // `在「${schema.title}」${methodLabels[method]}插入${config.title}`,\n                    () => {\n                      return (\n                        <FormLayout layout={'vertical'}>\n                          <SchemaField schema={config.schema} />\n                        </FormLayout>\n                      );\n                    },\n                  ).open();\n                  const methods = {\n                    insertAfter,\n                    insertBefore,\n                    appendChild,\n                  };\n                  const defaults = generateDefaultSchema(type);\n                  const data = methods[method](deepmerge(defaults, values));\n                  await createSchema(data);\n                }}\n              >\n                <AntdMenu.Item\n                  key={'update'}\n                  onClick={async () => {\n                    const initialValues = {};\n                    Object.keys(formConfig.schema.properties).forEach(\n                      (name) => {\n                        _.set(initialValues, name, get(schema, name));\n                      },\n                    );\n                    const values = await FormDialog(t('Edit menu item'), () => {\n                      return (\n                        <FormLayout layout={'vertical'}>\n                          <SchemaField schema={formConfig.schema} />\n                        </FormLayout>\n                      );\n                    }).open({\n                      initialValues,\n                    });\n                    if (values.title) {\n                      schema.title = values.title;\n                    }\n                    const icon =\n                      _.get(values, 'x-component-props.icon') || null;\n                    schema['x-component-props'] =\n                      schema['x-component-props'] || {};\n                    schema['x-component-props']['icon'] = icon;\n                    field.componentProps['icon'] = icon;\n                    refresh();\n                    await updateSchema(schema);\n                  }}\n                >\n                  <EditOutlined /> {t('Edit')}\n                </AntdMenu.Item>\n                <AntdMenu.Item\n                  key={'move'}\n                  onClick={async () => {\n                    let menuSchema: Schema;\n                    let parent = schema.parent;\n                    while (parent) {\n                      if (parent['x-component'] === 'Menu') {\n                        menuSchema = parent;\n                        break;\n                      }\n                      parent = parent.parent;\n                    }\n\n                    console.log({ menuSchema });\n\n                    const toTreeData = (s: Schema) => {\n                      const items = [];\n                      Object.keys(s.properties || {}).forEach((name) => {\n                        const current = s.properties[name];\n                        if (\n                          !(current['x-component'] as string).startsWith(\n                            'Menu.',\n                          )\n                        ) {\n                          return;\n                        }\n                        // if (current.name === schema.name) {\n                        //   return;\n                        // }\n                        items.push({\n                          key: current['key'] || current.name,\n                          label: current.title,\n                          title: current.title,\n                          value: getSchemaPath(current).join('.'),\n                          children: toTreeData(current),\n                        });\n                      });\n                      return items;\n                    };\n\n                    const dataSource = toTreeData(menuSchema);\n\n                    const values = await FormDialog(\n                      t(`Move {{title}} to`, { title: schema.title }),\n                      () => {\n                        return (\n                          <FormLayout layout={'vertical'}>\n                            <SchemaField\n                              schema={{\n                                type: 'object',\n                                properties: {\n                                  path: {\n                                    type: 'string',\n                                    title: t('Target position'),\n                                    enum: dataSource,\n                                    required: true,\n                                    'x-decorator': 'FormItem',\n                                    'x-component': 'TreeSelect',\n                                  },\n                                  method: {\n                                    type: 'string',\n                                    default: 'insertAfter',\n                                    enum: [\n                                      {\n                                        label: t('After'),\n                                        value: 'insertAfter',\n                                      },\n                                      {\n                                        label: t('Before'),\n                                        value: 'insertBefore',\n                                      },\n                                    ],\n                                    'x-decorator': 'FormItem',\n                                    'x-component': 'Radio.Group',\n                                  },\n                                },\n                              }}\n                            />\n                          </FormLayout>\n                        );\n                      },\n                    ).open({\n                      effects(form) {\n                        onFieldChange('path', (field) => {\n                          const target = findPropertyByPath(\n                            schema.root,\n                            // @ts-ignore\n                            field.value,\n                          );\n                          console.log({ field });\n                          field.query('method').take((f) => {\n                            // @ts-ignore\n                            // f.value = 'insertAfter';\n                            // @ts-ignore\n                            f.dataSource =\n                              target['x-component'] === 'Menu.SubMenu'\n                                ? [\n                                    { label: t('After'), value: 'insertAfter' },\n                                    {\n                                      label: t('Before'),\n                                      value: 'insertBefore',\n                                    },\n                                    { label: t('Inner'), value: 'appendChild' },\n                                  ]\n                                : [\n                                    { label: t('After'), value: 'insertAfter' },\n                                    {\n                                      label: t('Before'),\n                                      value: 'insertBefore',\n                                    },\n                                  ];\n                          });\n                        });\n                      },\n                    });\n                    const methods = {\n                      insertAfter,\n                      insertBefore,\n                      appendChild,\n                    };\n                    const data = schema.toJSON();\n                    remove();\n                    const source = methods[values.method](data, values.path);\n                    await updateSchema(source);\n                  }}\n                >\n                  <DragOutlined /> {t('Move to')}\n                </AntdMenu.Item>\n                <AntdMenu.Divider />\n                <AntdMenu.SubMenu\n                  key={'insertBefore'}\n                  icon={<ArrowUpOutlined />}\n                  title={t(`Insert ${mode == 'inline' ? 'above' : 'left'}`)}\n                >\n                  <AntdMenu.Item\n                    key={'insertBefore.Menu.SubMenu'}\n                    icon={<GroupOutlined />}\n                  >\n                    {t('Group')}\n                  </AntdMenu.Item>\n                  <AntdMenu.Item\n                    key={'insertBefore.Menu.Link'}\n                    icon={<MenuOutlined />}\n                  >\n                    {t('Page')}\n                  </AntdMenu.Item>\n                  <AntdMenu.Item\n                    key={'insertBefore.Menu.URL'}\n                    icon={<LinkOutlined />}\n                  >\n                    {t('Link')}\n                  </AntdMenu.Item>\n                </AntdMenu.SubMenu>\n                <AntdMenu.SubMenu\n                  key={'insertAfter'}\n                  icon={<ArrowDownOutlined />}\n                  title={t(`Insert ${mode == 'inline' ? 'below' : 'right'}`)}\n                >\n                  <AntdMenu.Item\n                    key={'insertAfter.Menu.SubMenu'}\n                    icon={<GroupOutlined />}\n                  >\n                    {t('Group')}\n                  </AntdMenu.Item>\n                  <AntdMenu.Item\n                    key={'insertAfter.Menu.Link'}\n                    icon={<MenuOutlined />}\n                  >\n                    {t('Page')}\n                  </AntdMenu.Item>\n                  <AntdMenu.Item\n                    key={'insertAfter.Menu.URL'}\n                    icon={<LinkOutlined />}\n                  >\n                    {t('Link')}\n                  </AntdMenu.Item>\n                </AntdMenu.SubMenu>\n                {isSubMenu && (\n                  <AntdMenu.SubMenu\n                    key={'appendChild'}\n                    icon={<ArrowRightOutlined />}\n                    title={t('Insert inner')}\n                  >\n                    <AntdMenu.Item\n                      key={'appendChild.Menu.SubMenu'}\n                      icon={<GroupOutlined />}\n                    >\n                      {t('Group')}\n                    </AntdMenu.Item>\n                    <AntdMenu.Item\n                      key={'appendChild.Menu.Link'}\n                      icon={<MenuOutlined />}\n                    >\n                      {t('Page')}\n                    </AntdMenu.Item>\n                    <AntdMenu.Item\n                      key={'appendChild.Menu.URL'}\n                      icon={<LinkOutlined />}\n                    >\n                      {t('Link')}\n                    </AntdMenu.Item>\n                  </AntdMenu.SubMenu>\n                )}\n                {/* <AntdMenu.Divider />\n                <AntdMenu.Item\n                  icon={<LockOutlined />}\n                  onClick={async () => {\n                    const loadRoles = async () => {\n                      const resource = Resource.make('roles');\n                      const data = await resource.list();\n                      console.log('loadRoles', data);\n                      return data?.data.map((item) => ({\n                        label: item.title,\n                        value: item.name,\n                      }));\n                    };\n                    const resource = Resource.make({\n                      associatedName: 'ui_schemas',\n                      associatedIndex: schema['key'],\n                      resourceName: 'roles',\n                    });\n                    const uiSchemasRoles = await resource.list();\n                    console.log({ uiSchemasRoles });\n                    const values = await FormDialog(`设置权限`, () => {\n                      return (\n                        <FormLayout layout={'vertical'}>\n                          <SchemaField\n                            scope={{ loadRoles }}\n                            schema={{\n                              type: 'object',\n                              properties: {\n                                roles: {\n                                  type: 'array',\n                                  title: '允许访问的角色',\n                                  'x-reactions': [\n                                    '{{useAsyncDataSource(loadRoles)}}',\n                                  ],\n                                  'x-decorator': 'FormilyFormItem',\n                                  'x-component': 'Select',\n                                  'x-component-props': {\n                                    mode: 'tags',\n                                  },\n                                },\n                              },\n                            }}\n                          />\n                        </FormLayout>\n                      );\n                    }).open({\n                      initialValues: {\n                        roles: uiSchemasRoles?.data?.map((role) => role.name),\n                      },\n                    });\n                    await Resource.make({\n                      resourceName: 'ui_schemas',\n                      resourceIndex: schema['key'],\n                    }).save(values);\n                  }}\n                >\n                  设置权限\n                </AntdMenu.Item> */}\n                <AntdMenu.Divider />\n                <AntdMenu.Item\n                  key={'delete'}\n                  onClick={() => {\n                    Modal.confirm({\n                      title: t(`Delete menu item`),\n                      content: t('Are you sure you want to delete it?'),\n                      onOk: async () => {\n                        const target = remove();\n                        await removeSchema(target);\n                        ctx.onRemove && ctx.onRemove(target);\n                      },\n                    });\n                  }}\n                >\n                  <DeleteOutlined /> {t('Delete')}\n                </AntdMenu.Item>\n              </AntdMenu>\n            }\n          >\n            <MenuOutlined />\n          </Dropdown>\n        </Space>\n      </div>\n    </div>\n  );\n};\n\nexport default Menu;\n"]}