From e53a1edf7d7904687958edd5a4792c9c3ff3870c Mon Sep 17 00:00:00 2001 From: chenos Date: Thu, 8 Jul 2021 14:21:18 +0800 Subject: [PATCH] lots of updates --- .../client/src/blocks/table/demos/demo1.tsx | 283 ---------- .../src/components/drag-and-drop/index.tsx | 2 +- .../DesignableSchemaField/index.tsx | 0 .../src/{blocks => schemas}/action/index.md | 105 +++- .../src/{blocks => schemas}/action/index.tsx | 49 +- .../src/{blocks => schemas}/action/style.less | 29 + .../src/{blocks => schemas}/add-new/index.md | 4 +- .../src/{blocks => schemas}/add-new/index.tsx | 0 .../{blocks => schemas}/block-item/index.tsx | 0 .../{blocks => schemas}/block-item/style.less | 0 .../src/{blocks => schemas}/cascader/index.md | 4 +- .../{blocks => schemas}/cascader/index.tsx | 0 .../src/{blocks => schemas}/checkbox/index.md | 4 +- .../{blocks => schemas}/checkbox/index.tsx | 0 .../{blocks => schemas}/color-select/index.md | 4 +- .../color-select/index.tsx | 0 .../database-field/index.md | 4 +- .../database-field/index.tsx | 0 .../{blocks => schemas}/date-picker/index.md | 4 +- .../{blocks => schemas}/date-picker/index.tsx | 0 .../src/{blocks => schemas}/display/index.tsx | 0 .../drag-and-drop/index.tsx | 0 .../drawer-select/index.md | 4 +- .../drawer-select/index.tsx | 0 .../{blocks => schemas}/filter/FilterItem.tsx | 2 +- .../src/{blocks => schemas}/filter/Group.tsx | 0 .../src/{blocks => schemas}/filter/index.md | 4 +- .../src/{blocks => schemas}/filter/index.tsx | 0 .../src/{blocks => schemas}/filter/style.less | 0 .../{blocks => schemas}/form-item/index.tsx | 0 .../{blocks => schemas}/form-item/style.less | 0 .../src/{blocks => schemas}/form/index.md | 4 +- .../src/{blocks => schemas}/form/index.tsx | 0 .../src/{blocks => schemas}/form/style.less | 0 .../{blocks => schemas}/grid/demos/demo1.tsx | 2 +- .../src/{blocks => schemas}/grid/index.md | 2 +- .../src/{blocks => schemas}/grid/index.tsx | 2 +- .../src/{blocks => schemas}/grid/style.less | 0 .../{blocks => schemas}/icon-picker/index.md | 4 +- .../{blocks => schemas}/icon-picker/index.tsx | 0 .../client/src/{blocks => schemas}/index.tsx | 0 .../{blocks => schemas}/input-number/index.md | 4 +- .../input-number/index.tsx | 0 .../input/DesignableBar.tsx | 0 .../src/{blocks => schemas}/input/index.md | 4 +- .../src/{blocks => schemas}/input/index.tsx | 0 .../src/{blocks => schemas}/markdown/index.md | 4 +- .../{blocks => schemas}/markdown/index.tsx | 0 .../src/{blocks => schemas}/menu/index.md | 4 +- .../src/{blocks => schemas}/menu/index.tsx | 12 +- .../src/{blocks => schemas}/menu/style.less | 0 .../password/PasswordStrength.tsx | 0 .../src/{blocks => schemas}/password/index.md | 4 +- .../{blocks => schemas}/password/index.tsx | 0 .../src/{blocks => schemas}/radio/index.md | 4 +- .../src/{blocks => schemas}/radio/index.tsx | 0 .../src/{blocks => schemas}/select/index.md | 4 +- .../src/{blocks => schemas}/select/index.tsx | 0 .../table/ColumnDesignableBar.tsx | 0 .../table/DesignableBar.tsx | 0 .../client/src/schemas/table/demos/demo1.tsx | 498 ++++++++++++++++++ .../src/{blocks => schemas}/table/index.md | 4 +- .../src/{blocks => schemas}/table/index.tsx | 204 +++++-- .../src/{blocks => schemas}/tabs/index.md | 4 +- .../src/{blocks => schemas}/tabs/index.tsx | 0 .../{blocks => schemas}/time-picker/index.md | 4 +- .../{blocks => schemas}/time-picker/index.tsx | 0 .../src/{blocks => schemas}/upload/index.md | 4 +- .../src/{blocks => schemas}/upload/index.tsx | 0 .../{blocks => schemas}/upload/placeholder.ts | 0 .../src/templates/admin-layout/index.tsx | 4 +- .../src/templates/default-page/index.tsx | 2 +- 72 files changed, 893 insertions(+), 387 deletions(-) delete mode 100644 packages/client/src/blocks/table/demos/demo1.tsx rename packages/client/src/{blocks => schemas}/DesignableSchemaField/index.tsx (100%) rename packages/client/src/{blocks => schemas}/action/index.md (73%) rename packages/client/src/{blocks => schemas}/action/index.tsx (85%) rename packages/client/src/{blocks => schemas}/action/style.less (64%) rename packages/client/src/{blocks => schemas}/add-new/index.md (98%) rename packages/client/src/{blocks => schemas}/add-new/index.tsx (100%) rename packages/client/src/{blocks => schemas}/block-item/index.tsx (100%) rename packages/client/src/{blocks => schemas}/block-item/style.less (100%) rename packages/client/src/{blocks => schemas}/cascader/index.md (96%) rename packages/client/src/{blocks => schemas}/cascader/index.tsx (100%) rename packages/client/src/{blocks => schemas}/checkbox/index.md (96%) rename packages/client/src/{blocks => schemas}/checkbox/index.tsx (100%) rename packages/client/src/{blocks => schemas}/color-select/index.md (95%) rename packages/client/src/{blocks => schemas}/color-select/index.tsx (100%) rename packages/client/src/{blocks => schemas}/database-field/index.md (95%) rename packages/client/src/{blocks => schemas}/database-field/index.tsx (100%) rename packages/client/src/{blocks => schemas}/date-picker/index.md (97%) rename packages/client/src/{blocks => schemas}/date-picker/index.tsx (100%) rename packages/client/src/{blocks => schemas}/display/index.tsx (100%) rename packages/client/src/{blocks => schemas}/drag-and-drop/index.tsx (100%) rename packages/client/src/{blocks => schemas}/drawer-select/index.md (70%) rename packages/client/src/{blocks => schemas}/drawer-select/index.tsx (100%) rename packages/client/src/{blocks => schemas}/filter/FilterItem.tsx (99%) rename packages/client/src/{blocks => schemas}/filter/Group.tsx (100%) rename packages/client/src/{blocks => schemas}/filter/index.md (61%) rename packages/client/src/{blocks => schemas}/filter/index.tsx (100%) rename packages/client/src/{blocks => schemas}/filter/style.less (100%) rename packages/client/src/{blocks => schemas}/form-item/index.tsx (100%) rename packages/client/src/{blocks => schemas}/form-item/style.less (100%) rename packages/client/src/{blocks => schemas}/form/index.md (98%) rename packages/client/src/{blocks => schemas}/form/index.tsx (100%) rename packages/client/src/{blocks => schemas}/form/style.less (100%) rename packages/client/src/{blocks => schemas}/grid/demos/demo1.tsx (99%) rename packages/client/src/{blocks => schemas}/grid/index.md (98%) rename packages/client/src/{blocks => schemas}/grid/index.tsx (99%) rename packages/client/src/{blocks => schemas}/grid/style.less (100%) rename packages/client/src/{blocks => schemas}/icon-picker/index.md (94%) rename packages/client/src/{blocks => schemas}/icon-picker/index.tsx (100%) rename packages/client/src/{blocks => schemas}/index.tsx (100%) rename packages/client/src/{blocks => schemas}/input-number/index.md (97%) rename packages/client/src/{blocks => schemas}/input-number/index.tsx (100%) rename packages/client/src/{blocks => schemas}/input/DesignableBar.tsx (100%) rename packages/client/src/{blocks => schemas}/input/index.md (98%) rename packages/client/src/{blocks => schemas}/input/index.tsx (100%) rename packages/client/src/{blocks => schemas}/markdown/index.md (95%) rename packages/client/src/{blocks => schemas}/markdown/index.tsx (100%) rename packages/client/src/{blocks => schemas}/menu/index.md (99%) rename packages/client/src/{blocks => schemas}/menu/index.tsx (97%) rename packages/client/src/{blocks => schemas}/menu/style.less (100%) rename packages/client/src/{blocks => schemas}/password/PasswordStrength.tsx (100%) rename packages/client/src/{blocks => schemas}/password/index.md (93%) rename packages/client/src/{blocks => schemas}/password/index.tsx (100%) rename packages/client/src/{blocks => schemas}/radio/index.md (94%) rename packages/client/src/{blocks => schemas}/radio/index.tsx (100%) rename packages/client/src/{blocks => schemas}/select/index.md (98%) rename packages/client/src/{blocks => schemas}/select/index.tsx (100%) rename packages/client/src/{blocks => schemas}/table/ColumnDesignableBar.tsx (100%) rename packages/client/src/{blocks => schemas}/table/DesignableBar.tsx (100%) create mode 100644 packages/client/src/schemas/table/demos/demo1.tsx rename packages/client/src/{blocks => schemas}/table/index.md (85%) rename packages/client/src/{blocks => schemas}/table/index.tsx (65%) rename packages/client/src/{blocks => schemas}/tabs/index.md (95%) rename packages/client/src/{blocks => schemas}/tabs/index.tsx (100%) rename packages/client/src/{blocks => schemas}/time-picker/index.md (94%) rename packages/client/src/{blocks => schemas}/time-picker/index.tsx (100%) rename packages/client/src/{blocks => schemas}/upload/index.md (95%) rename packages/client/src/{blocks => schemas}/upload/index.tsx (100%) rename packages/client/src/{blocks => schemas}/upload/placeholder.ts (100%) diff --git a/packages/client/src/blocks/table/demos/demo1.tsx b/packages/client/src/blocks/table/demos/demo1.tsx deleted file mode 100644 index b0cae4bf6..000000000 --- a/packages/client/src/blocks/table/demos/demo1.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import React from 'react'; -import { SchemaRenderer } from '../../'; -import { uid } from '@formily/shared'; -import Editor from '@monaco-editor/react'; -import { createForm } from '@formily/core'; -import { observer } from '@formily/react'; - -const schema = { - name: `t_${uid()}`, - type: 'array', - 'x-component': 'Table', - // default: [ - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // { key: uid(), field1: uid(), field2: uid() }, - // ], - 'x-component-props': { - rowKey: 'key', - // isRemoteDataSource: true, - }, - properties: { - [`a_${uid()}`]: { - type: 'void', - 'x-component': 'Table.ActionBar', - properties: { - action1: { - type: 'void', - name: 'action1', - title: '筛选', - 'x-component': 'Action', - properties: { - popover1: { - type: 'void', - title: '弹窗标题', - 'x-component': 'Action.Popover', - 'x-component-props': {}, - properties: { - [uid()]: { - name: 'form', - type: 'object', - 'x-component': 'Form', - properties: { - filter: { - type: 'string', - title: '字段1', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - action: { - type: 'void', - title: '提交', - 'x-component': 'Action', - 'x-component-props': { - 'useAction': '{{ useTableFilterAction }}' - }, - } - } - }, - }, - }, - }, - }, - action2: { - type: 'void', - name: 'action1', - title: '新增', - 'x-component': 'Action', - 'x-designable-bar': 'Action.DesignableBar', - properties: { - drawer1: { - type: 'void', - title: '抽屉标题', - 'x-component': 'Action.Drawer', - 'x-component-props': {}, - properties: { - [uid()]: { - name: 'form', - type: 'object', - 'x-component': 'Form', - properties: { - field1: { - type: 'string', - title: '字段1', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - field2: { - type: 'string', - title: '字段2', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - action: { - type: 'void', - title: '提交', - 'x-component': 'Action', - 'x-component-props': { - 'useAction': '{{ useTableCreateAction }}' - }, - } - } - }, - }, - }, - }, - }, - action3: { - type: 'void', - name: 'action1', - title: '删除', - 'x-component': 'Action', - 'x-component-props': { - 'useAction': '{{ useTableDestroyAction }}' - }, - }, - }, - }, - [`a_${uid()}`]: { - type: 'void', - 'x-component': 'Table.ActionBar', - 'x-component-props': { - align: 'bottom', - }, - properties: { - pagination: { - type: 'void', - 'x-component': 'Table.Pagination', - 'x-component-props': { - defaultPageSize: 5, - }, - }, - }, - }, - [`c_${uid()}`]: { - type: 'void', - title: '排序', - 'x-component': 'Table.Column', - properties: { - sort: { - type: 'void', - 'x-component': 'Table.SortHandle', - }, - }, - }, - [`c_${uid()}`]: { - type: 'void', - title: '序号', - 'x-component': 'Table.Column', - properties: { - index: { - type: 'void', - 'x-component': 'Table.Index', - }, - }, - }, - [`c_${uid()}`]: { - type: 'void', - title: '字段1', - 'x-component': 'Table.Column', - 'x-component-props': { - title: 'z1', - }, - 'x-designable-bar': 'Table.Column.DesignableBar', - properties: { - field1: { - type: 'string', - required: true, - 'x-read-pretty': true, - 'x-decorator-props': { - feedbackLayout: 'popover', - }, - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - }, - }, - [`c_${uid()}`]: { - type: 'void', - title: '字段2', - 'x-component': 'Table.Column', - properties: { - field2: { - type: 'string', - // title: '字段2', - required: true, - 'x-read-pretty': true, - 'x-decorator-props': { - feedbackLayout: 'popover', - }, - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - }, - }, - [`col_${uid()}`]: { - type: 'void', - title: '操作', - 'x-component': 'Table.Column', - properties: { - action3: { - type: 'void', - title: '删除', - 'x-component': 'Action', - 'x-component-props': { - 'useAction': '{{ useTableDestroyAction }}' - }, - }, - action2: { - type: 'void', - name: 'action1', - title: '修改', - 'x-component': 'Action', - 'x-default-action': true, - 'x-designable-bar': 'Action.DesignableBar', - properties: { - drawer1: { - type: 'void', - title: '编辑表单', - 'x-component': 'Action.Drawer', - 'x-component-props': {}, - properties: { - [uid()]: { - name: 'form', - type: 'void', - 'x-component': 'Form', - 'x-component-props': { - 'useValues': '{{ useTableRow }}', - }, - properties: { - field1: { - type: 'string', - title: '字段1', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - field2: { - type: 'string', - title: '字段2', - 'x-decorator': 'FormItem', - 'x-component': 'Input', - }, - action: { - type: 'void', - title: '提交', - 'x-component': 'Action', - 'x-component-props': { - 'useAction': '{{ useTableUpdateAction }}' - }, - } - } - }, - }, - }, - }, - }, - }, - }, - }, -}; - -const form = createForm(); - -export default observer(() => { - return ( -
- - -
- ) -}); diff --git a/packages/client/src/components/drag-and-drop/index.tsx b/packages/client/src/components/drag-and-drop/index.tsx index 9a8a9d3ee..388cbd8db 100644 --- a/packages/client/src/components/drag-and-drop/index.tsx +++ b/packages/client/src/components/drag-and-drop/index.tsx @@ -4,7 +4,7 @@ import { useMouseEvents, useWillUnmount } from 'beautiful-react-hooks'; import { useField, useFieldSchema } from '@formily/react'; import { useMount } from 'ahooks'; import constate from 'constate'; -import { useSchemaPath } from '../../blocks'; +import { useSchemaPath } from '../../schemas'; export const DraggableBlockContext = createContext({ dragRef: null, diff --git a/packages/client/src/blocks/DesignableSchemaField/index.tsx b/packages/client/src/schemas/DesignableSchemaField/index.tsx similarity index 100% rename from packages/client/src/blocks/DesignableSchemaField/index.tsx rename to packages/client/src/schemas/DesignableSchemaField/index.tsx diff --git a/packages/client/src/blocks/action/index.md b/packages/client/src/schemas/action/index.md similarity index 73% rename from packages/client/src/blocks/action/index.md rename to packages/client/src/schemas/action/index.md index c3a29588c..af15c5328 100644 --- a/packages/client/src/blocks/action/index.md +++ b/packages/client/src/schemas/action/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Action - 操作 @@ -94,6 +94,107 @@ export default () => { } ``` +## Action.Dropdown - 下拉操作 + +```tsx +import React from 'react'; +import { SchemaRenderer } from '../'; + +function useAction() { + return { + run() { + alert('这是自定义的操作逻辑'); + } + } +} + +const popoverSchema = { + type: 'void', + name: 'action1', + title: '按钮', + 'x-component': 'Action', + properties: { + popover1: { + type: 'void', + title: '弹窗标题', + 'x-component': 'Action.Popover', + 'x-component-props': {}, + properties: { + input: { + type: 'string', + 'x-component': 'Input', + } + }, + }, + }, +}; + +const drawerSchema = { + type: 'void', + title: '按钮', + 'x-component': 'Action', + properties: { + drawer1: { + type: 'void', + title: '抽屉标题', + 'x-component': 'Action.Drawer', + 'x-component-props': {}, + properties: { + input: { + type: 'string', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + action2: { + type: 'void', + title: '打开二级抽屉', + // 'x-decorator': 'FormItem', + 'x-component': 'Action', + properties: { + drawer1: { + type: 'void', + title: '二级抽屉标题', + 'x-component': 'Action.Drawer', + 'x-component-props': {}, + properties: { + input: { + type: 'string', + 'x-component': 'Input', + }, + }, + }, + }, + } + }, + }, + }, +}; + +const schema = { + type: 'void', + name: 'action1', + title: '下拉菜单', + 'x-component': 'Action.Dropdown', + properties: { + action1: { + type: 'void', + name: 'action1', + title: '按钮', + 'x-component': 'Action', + 'x-component-props': { + useAction, + }, + }, + action2: drawerSchema, + action3: popoverSchema, + }, +}; + +export default () => { + return +} +``` + ## Action.Popover - 打开气泡 ```tsx diff --git a/packages/client/src/blocks/action/index.tsx b/packages/client/src/schemas/action/index.tsx similarity index 85% rename from packages/client/src/blocks/action/index.tsx rename to packages/client/src/schemas/action/index.tsx index 95a7a984a..f5cbda794 100644 --- a/packages/client/src/blocks/action/index.tsx +++ b/packages/client/src/schemas/action/index.tsx @@ -12,10 +12,10 @@ import { } from '@formily/react'; import { Button, Dropdown, Menu, Popover, Space, Drawer, Modal } from 'antd'; import { Link, useHistory, LinkProps } from 'react-router-dom'; -import { SchemaRenderer, useDesignable } from '../'; +import { SchemaRenderer, useDesignable } from '..'; import ReactDOM from 'react-dom'; import get from 'lodash/get'; -import { MenuOutlined } from '@ant-design/icons'; +import { MenuOutlined, DownOutlined } from '@ant-design/icons'; import classNames from 'classnames'; import { useMount } from 'ahooks'; import { uid } from '@formily/shared'; @@ -78,6 +78,7 @@ export type ActionType = React.FC & { Drawer?: React.FC; Modal?: React.FC; Dropdown?: React.FC; + Group?: React.FC; DesignableBar?: React.FC; }; @@ -115,7 +116,7 @@ const BaseAction = observer((props: any) => { field.componentProps.setVisible = setVisible; }, []); - console.log('BaseAction', { field, schema }, field.title) + console.log('BaseAction', { field, schema }, field.title); const renderButton = () => ( + + ); +}); + Action.DesignableBar = () => { const field = useField(); const schema = useFieldSchema(); diff --git a/packages/client/src/blocks/action/style.less b/packages/client/src/schemas/action/style.less similarity index 64% rename from packages/client/src/blocks/action/style.less rename to packages/client/src/schemas/action/style.less index 12deac12b..518755856 100644 --- a/packages/client/src/blocks/action/style.less +++ b/packages/client/src/schemas/action/style.less @@ -51,3 +51,32 @@ } } } + +.ant-popover.nb-action-group { + z-index: 1000; + padding-top: 0; + .ant-popover-arrow { + display: none; + } + .ant-popover-inner-content { + padding: 4px 0; + .ant-btn { + display: block; + min-width: 100px; + width: 100%; + border: 0; + border-radius: 0; + text-align: left; + padding: 5px 12px; + color: #000; + &:hover { + background-color: #f5f5f5; + } + &[disabled] { + color: #00000040; + background-color:#fff; + cursor:not-allowed; + } + } + } +} diff --git a/packages/client/src/blocks/add-new/index.md b/packages/client/src/schemas/add-new/index.md similarity index 98% rename from packages/client/src/blocks/add-new/index.md rename to packages/client/src/schemas/add-new/index.md index 97a18555e..58a507013 100644 --- a/packages/client/src/blocks/add-new/index.md +++ b/packages/client/src/schemas/add-new/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # AddNew - 新增 diff --git a/packages/client/src/blocks/add-new/index.tsx b/packages/client/src/schemas/add-new/index.tsx similarity index 100% rename from packages/client/src/blocks/add-new/index.tsx rename to packages/client/src/schemas/add-new/index.tsx diff --git a/packages/client/src/blocks/block-item/index.tsx b/packages/client/src/schemas/block-item/index.tsx similarity index 100% rename from packages/client/src/blocks/block-item/index.tsx rename to packages/client/src/schemas/block-item/index.tsx diff --git a/packages/client/src/blocks/block-item/style.less b/packages/client/src/schemas/block-item/style.less similarity index 100% rename from packages/client/src/blocks/block-item/style.less rename to packages/client/src/schemas/block-item/style.less diff --git a/packages/client/src/blocks/cascader/index.md b/packages/client/src/schemas/cascader/index.md similarity index 96% rename from packages/client/src/blocks/cascader/index.md rename to packages/client/src/schemas/cascader/index.md index b4e8d3479..ada3c3fb3 100644 --- a/packages/client/src/blocks/cascader/index.md +++ b/packages/client/src/schemas/cascader/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Cascader - 级联选择 diff --git a/packages/client/src/blocks/cascader/index.tsx b/packages/client/src/schemas/cascader/index.tsx similarity index 100% rename from packages/client/src/blocks/cascader/index.tsx rename to packages/client/src/schemas/cascader/index.tsx diff --git a/packages/client/src/blocks/checkbox/index.md b/packages/client/src/schemas/checkbox/index.md similarity index 96% rename from packages/client/src/blocks/checkbox/index.md rename to packages/client/src/schemas/checkbox/index.md index d429e486b..1eb98e554 100644 --- a/packages/client/src/blocks/checkbox/index.md +++ b/packages/client/src/schemas/checkbox/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Checkbox - 多选框 diff --git a/packages/client/src/blocks/checkbox/index.tsx b/packages/client/src/schemas/checkbox/index.tsx similarity index 100% rename from packages/client/src/blocks/checkbox/index.tsx rename to packages/client/src/schemas/checkbox/index.tsx diff --git a/packages/client/src/blocks/color-select/index.md b/packages/client/src/schemas/color-select/index.md similarity index 95% rename from packages/client/src/blocks/color-select/index.md rename to packages/client/src/schemas/color-select/index.md index 1fb4be362..f02eea629 100644 --- a/packages/client/src/blocks/color-select/index.md +++ b/packages/client/src/schemas/color-select/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # ColorSelect - 颜色选择器 diff --git a/packages/client/src/blocks/color-select/index.tsx b/packages/client/src/schemas/color-select/index.tsx similarity index 100% rename from packages/client/src/blocks/color-select/index.tsx rename to packages/client/src/schemas/color-select/index.tsx diff --git a/packages/client/src/blocks/database-field/index.md b/packages/client/src/schemas/database-field/index.md similarity index 95% rename from packages/client/src/blocks/database-field/index.md rename to packages/client/src/schemas/database-field/index.md index 211c487dd..72f1379fc 100644 --- a/packages/client/src/blocks/database-field/index.md +++ b/packages/client/src/schemas/database-field/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # DatabaseField - 数据表字段 diff --git a/packages/client/src/blocks/database-field/index.tsx b/packages/client/src/schemas/database-field/index.tsx similarity index 100% rename from packages/client/src/blocks/database-field/index.tsx rename to packages/client/src/schemas/database-field/index.tsx diff --git a/packages/client/src/blocks/date-picker/index.md b/packages/client/src/schemas/date-picker/index.md similarity index 97% rename from packages/client/src/blocks/date-picker/index.md rename to packages/client/src/schemas/date-picker/index.md index f7f755f3c..872de8a1b 100644 --- a/packages/client/src/blocks/date-picker/index.md +++ b/packages/client/src/schemas/date-picker/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # DatePicker - 日期选择器 diff --git a/packages/client/src/blocks/date-picker/index.tsx b/packages/client/src/schemas/date-picker/index.tsx similarity index 100% rename from packages/client/src/blocks/date-picker/index.tsx rename to packages/client/src/schemas/date-picker/index.tsx diff --git a/packages/client/src/blocks/display/index.tsx b/packages/client/src/schemas/display/index.tsx similarity index 100% rename from packages/client/src/blocks/display/index.tsx rename to packages/client/src/schemas/display/index.tsx diff --git a/packages/client/src/blocks/drag-and-drop/index.tsx b/packages/client/src/schemas/drag-and-drop/index.tsx similarity index 100% rename from packages/client/src/blocks/drag-and-drop/index.tsx rename to packages/client/src/schemas/drag-and-drop/index.tsx diff --git a/packages/client/src/blocks/drawer-select/index.md b/packages/client/src/schemas/drawer-select/index.md similarity index 70% rename from packages/client/src/blocks/drawer-select/index.md rename to packages/client/src/schemas/drawer-select/index.md index b80715c55..971d7772a 100644 --- a/packages/client/src/blocks/drawer-select/index.md +++ b/packages/client/src/schemas/drawer-select/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # DrawerSelect - 抽屉选择器 diff --git a/packages/client/src/blocks/drawer-select/index.tsx b/packages/client/src/schemas/drawer-select/index.tsx similarity index 100% rename from packages/client/src/blocks/drawer-select/index.tsx rename to packages/client/src/schemas/drawer-select/index.tsx diff --git a/packages/client/src/blocks/filter/FilterItem.tsx b/packages/client/src/schemas/filter/FilterItem.tsx similarity index 99% rename from packages/client/src/blocks/filter/FilterItem.tsx rename to packages/client/src/schemas/filter/FilterItem.tsx index ebc1a5d7f..bea41c73a 100644 --- a/packages/client/src/blocks/filter/FilterItem.tsx +++ b/packages/client/src/schemas/filter/FilterItem.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from 'react'; -import { SchemaField } from '../'; +import { SchemaField } from '..'; import { createForm, onFieldChange, onFieldReact } from '@formily/core' import { FormProvider, FormConsumer } from '@formily/react' import { Field } from '@formily/core/esm/models/Field'; diff --git a/packages/client/src/blocks/filter/Group.tsx b/packages/client/src/schemas/filter/Group.tsx similarity index 100% rename from packages/client/src/blocks/filter/Group.tsx rename to packages/client/src/schemas/filter/Group.tsx diff --git a/packages/client/src/blocks/filter/index.md b/packages/client/src/schemas/filter/index.md similarity index 61% rename from packages/client/src/blocks/filter/index.md rename to packages/client/src/schemas/filter/index.md index 51051e0e8..78a3c6a8e 100644 --- a/packages/client/src/blocks/filter/index.md +++ b/packages/client/src/schemas/filter/index.md @@ -5,6 +5,6 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- diff --git a/packages/client/src/blocks/filter/index.tsx b/packages/client/src/schemas/filter/index.tsx similarity index 100% rename from packages/client/src/blocks/filter/index.tsx rename to packages/client/src/schemas/filter/index.tsx diff --git a/packages/client/src/blocks/filter/style.less b/packages/client/src/schemas/filter/style.less similarity index 100% rename from packages/client/src/blocks/filter/style.less rename to packages/client/src/schemas/filter/style.less diff --git a/packages/client/src/blocks/form-item/index.tsx b/packages/client/src/schemas/form-item/index.tsx similarity index 100% rename from packages/client/src/blocks/form-item/index.tsx rename to packages/client/src/schemas/form-item/index.tsx diff --git a/packages/client/src/blocks/form-item/style.less b/packages/client/src/schemas/form-item/style.less similarity index 100% rename from packages/client/src/blocks/form-item/style.less rename to packages/client/src/schemas/form-item/style.less diff --git a/packages/client/src/blocks/form/index.md b/packages/client/src/schemas/form/index.md similarity index 98% rename from packages/client/src/blocks/form/index.md rename to packages/client/src/schemas/form/index.md index ec1bba30b..6f0ac8846 100644 --- a/packages/client/src/blocks/form/index.md +++ b/packages/client/src/schemas/form/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Form - 表单 diff --git a/packages/client/src/blocks/form/index.tsx b/packages/client/src/schemas/form/index.tsx similarity index 100% rename from packages/client/src/blocks/form/index.tsx rename to packages/client/src/schemas/form/index.tsx diff --git a/packages/client/src/blocks/form/style.less b/packages/client/src/schemas/form/style.less similarity index 100% rename from packages/client/src/blocks/form/style.less rename to packages/client/src/schemas/form/style.less diff --git a/packages/client/src/blocks/grid/demos/demo1.tsx b/packages/client/src/schemas/grid/demos/demo1.tsx similarity index 99% rename from packages/client/src/blocks/grid/demos/demo1.tsx rename to packages/client/src/schemas/grid/demos/demo1.tsx index cd09f364b..ef1acab81 100644 --- a/packages/client/src/blocks/grid/demos/demo1.tsx +++ b/packages/client/src/schemas/grid/demos/demo1.tsx @@ -8,7 +8,7 @@ import { RecursionField, useField, } from '@formily/react'; -import { SchemaRenderer } from '../../'; +import { SchemaRenderer } from '../..'; const schema: ISchema = { type: 'void', diff --git a/packages/client/src/blocks/grid/index.md b/packages/client/src/schemas/grid/index.md similarity index 98% rename from packages/client/src/blocks/grid/index.md rename to packages/client/src/schemas/grid/index.md index 8b8f08a3c..533449052 100644 --- a/packages/client/src/blocks/grid/index.md +++ b/packages/client/src/schemas/grid/index.md @@ -6,7 +6,7 @@ nav: group: order: 2 title: Blocks - path: /client/components + path: /client/schemas --- # Grid - 栅格 diff --git a/packages/client/src/blocks/grid/index.tsx b/packages/client/src/schemas/grid/index.tsx similarity index 99% rename from packages/client/src/blocks/grid/index.tsx rename to packages/client/src/schemas/grid/index.tsx index 6698260f9..a45b9640d 100644 --- a/packages/client/src/blocks/grid/index.tsx +++ b/packages/client/src/schemas/grid/index.tsx @@ -29,7 +29,7 @@ import { useColResizer, useDragDropUID, DragDropManagerProvider, -} from './../../components/drag-and-drop'; +} from '../../components/drag-and-drop'; const ColumnSizeContext = createContext(null); diff --git a/packages/client/src/blocks/grid/style.less b/packages/client/src/schemas/grid/style.less similarity index 100% rename from packages/client/src/blocks/grid/style.less rename to packages/client/src/schemas/grid/style.less diff --git a/packages/client/src/blocks/icon-picker/index.md b/packages/client/src/schemas/icon-picker/index.md similarity index 94% rename from packages/client/src/blocks/icon-picker/index.md rename to packages/client/src/schemas/icon-picker/index.md index 514a6fb4e..73338a1c5 100644 --- a/packages/client/src/blocks/icon-picker/index.md +++ b/packages/client/src/schemas/icon-picker/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # IconPicker - 图标选择器 diff --git a/packages/client/src/blocks/icon-picker/index.tsx b/packages/client/src/schemas/icon-picker/index.tsx similarity index 100% rename from packages/client/src/blocks/icon-picker/index.tsx rename to packages/client/src/schemas/icon-picker/index.tsx diff --git a/packages/client/src/blocks/index.tsx b/packages/client/src/schemas/index.tsx similarity index 100% rename from packages/client/src/blocks/index.tsx rename to packages/client/src/schemas/index.tsx diff --git a/packages/client/src/blocks/input-number/index.md b/packages/client/src/schemas/input-number/index.md similarity index 97% rename from packages/client/src/blocks/input-number/index.md rename to packages/client/src/schemas/input-number/index.md index 1744f38cb..49f39568b 100644 --- a/packages/client/src/blocks/input-number/index.md +++ b/packages/client/src/schemas/input-number/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # InputNumber - 数字框 diff --git a/packages/client/src/blocks/input-number/index.tsx b/packages/client/src/schemas/input-number/index.tsx similarity index 100% rename from packages/client/src/blocks/input-number/index.tsx rename to packages/client/src/schemas/input-number/index.tsx diff --git a/packages/client/src/blocks/input/DesignableBar.tsx b/packages/client/src/schemas/input/DesignableBar.tsx similarity index 100% rename from packages/client/src/blocks/input/DesignableBar.tsx rename to packages/client/src/schemas/input/DesignableBar.tsx diff --git a/packages/client/src/blocks/input/index.md b/packages/client/src/schemas/input/index.md similarity index 98% rename from packages/client/src/blocks/input/index.md rename to packages/client/src/schemas/input/index.md index 4569e7574..63724362f 100644 --- a/packages/client/src/blocks/input/index.md +++ b/packages/client/src/schemas/input/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Input - 输入框 diff --git a/packages/client/src/blocks/input/index.tsx b/packages/client/src/schemas/input/index.tsx similarity index 100% rename from packages/client/src/blocks/input/index.tsx rename to packages/client/src/schemas/input/index.tsx diff --git a/packages/client/src/blocks/markdown/index.md b/packages/client/src/schemas/markdown/index.md similarity index 95% rename from packages/client/src/blocks/markdown/index.md rename to packages/client/src/schemas/markdown/index.md index 99abda4bb..7a20698ba 100644 --- a/packages/client/src/blocks/markdown/index.md +++ b/packages/client/src/schemas/markdown/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Markdown 编辑器 diff --git a/packages/client/src/blocks/markdown/index.tsx b/packages/client/src/schemas/markdown/index.tsx similarity index 100% rename from packages/client/src/blocks/markdown/index.tsx rename to packages/client/src/schemas/markdown/index.tsx diff --git a/packages/client/src/blocks/menu/index.md b/packages/client/src/schemas/menu/index.md similarity index 99% rename from packages/client/src/blocks/menu/index.md rename to packages/client/src/schemas/menu/index.md index 23d984c7a..de9242322 100644 --- a/packages/client/src/blocks/menu/index.md +++ b/packages/client/src/schemas/menu/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Menu - 菜单 diff --git a/packages/client/src/blocks/menu/index.tsx b/packages/client/src/schemas/menu/index.tsx similarity index 97% rename from packages/client/src/blocks/menu/index.tsx rename to packages/client/src/schemas/menu/index.tsx index 4cdf3919d..c39305f6f 100644 --- a/packages/client/src/blocks/menu/index.tsx +++ b/packages/client/src/schemas/menu/index.tsx @@ -50,10 +50,11 @@ import { useHistory } from 'react-router-dom'; import cls from 'classnames'; import ReactDOM from 'react-dom'; import { useMount } from 'ahooks'; -import { useDesignable, SchemaRenderer } from '../'; +import { useDesignable, SchemaRenderer } from '..'; import { Router } from "react-router"; import { useLifecycle } from 'beautiful-react-hooks'; +import { useDefaultAction } from '../action'; export type MenuType = React.FC & { Item?: React.FC; @@ -273,13 +274,18 @@ Menu.Link = observer((props) => { ); }); -Menu.Item = observer((props) => { +Menu.Item = observer((props: any) => { + const { useAction = useDefaultAction, ...others } = props; + const { run } = useAction(); const field = useField(); const schema = useFieldSchema(); const { DesignableBar } = useDesignableBar(); return ( { + await run(); + }} schema={schema} // @ts-ignore eventKey={schema.name} diff --git a/packages/client/src/blocks/menu/style.less b/packages/client/src/schemas/menu/style.less similarity index 100% rename from packages/client/src/blocks/menu/style.less rename to packages/client/src/schemas/menu/style.less diff --git a/packages/client/src/blocks/password/PasswordStrength.tsx b/packages/client/src/schemas/password/PasswordStrength.tsx similarity index 100% rename from packages/client/src/blocks/password/PasswordStrength.tsx rename to packages/client/src/schemas/password/PasswordStrength.tsx diff --git a/packages/client/src/blocks/password/index.md b/packages/client/src/schemas/password/index.md similarity index 93% rename from packages/client/src/blocks/password/index.md rename to packages/client/src/schemas/password/index.md index dd80d4c0b..b69740890 100644 --- a/packages/client/src/blocks/password/index.md +++ b/packages/client/src/schemas/password/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Password - 密码 diff --git a/packages/client/src/blocks/password/index.tsx b/packages/client/src/schemas/password/index.tsx similarity index 100% rename from packages/client/src/blocks/password/index.tsx rename to packages/client/src/schemas/password/index.tsx diff --git a/packages/client/src/blocks/radio/index.md b/packages/client/src/schemas/radio/index.md similarity index 94% rename from packages/client/src/blocks/radio/index.md rename to packages/client/src/schemas/radio/index.md index 41c9dcf28..579d74a7e 100644 --- a/packages/client/src/blocks/radio/index.md +++ b/packages/client/src/schemas/radio/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Radio - 单选框 diff --git a/packages/client/src/blocks/radio/index.tsx b/packages/client/src/schemas/radio/index.tsx similarity index 100% rename from packages/client/src/blocks/radio/index.tsx rename to packages/client/src/schemas/radio/index.tsx diff --git a/packages/client/src/blocks/select/index.md b/packages/client/src/schemas/select/index.md similarity index 98% rename from packages/client/src/blocks/select/index.md rename to packages/client/src/schemas/select/index.md index f7072dc00..feba122b7 100644 --- a/packages/client/src/blocks/select/index.md +++ b/packages/client/src/schemas/select/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Select - 选择器 diff --git a/packages/client/src/blocks/select/index.tsx b/packages/client/src/schemas/select/index.tsx similarity index 100% rename from packages/client/src/blocks/select/index.tsx rename to packages/client/src/schemas/select/index.tsx diff --git a/packages/client/src/blocks/table/ColumnDesignableBar.tsx b/packages/client/src/schemas/table/ColumnDesignableBar.tsx similarity index 100% rename from packages/client/src/blocks/table/ColumnDesignableBar.tsx rename to packages/client/src/schemas/table/ColumnDesignableBar.tsx diff --git a/packages/client/src/blocks/table/DesignableBar.tsx b/packages/client/src/schemas/table/DesignableBar.tsx similarity index 100% rename from packages/client/src/blocks/table/DesignableBar.tsx rename to packages/client/src/schemas/table/DesignableBar.tsx diff --git a/packages/client/src/schemas/table/demos/demo1.tsx b/packages/client/src/schemas/table/demos/demo1.tsx new file mode 100644 index 000000000..c91d0642c --- /dev/null +++ b/packages/client/src/schemas/table/demos/demo1.tsx @@ -0,0 +1,498 @@ +import React from 'react'; +import { SchemaRenderer } from '../..'; +import { uid } from '@formily/shared'; +import Editor from '@monaco-editor/react'; +import { createForm } from '@formily/core'; +import { observer } from '@formily/react'; + +function useAction() { + return { + async run() { + alert('自定义') + } + } +} + +const schema = { + name: `t_${uid()}`, + type: 'array', + 'x-component': 'Table', + // default: [ + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // { key: uid(), field1: uid(), field2: uid() }, + // ], + 'x-component-props': { + rowKey: 'key', + // isRemoteDataSource: true, + }, + properties: { + [`a_${uid()}`]: { + type: 'void', + 'x-component': 'Table.ActionBar', + properties: { + action1: { + type: 'void', + name: 'action1', + title: '筛选', + 'x-component': 'Action', + properties: { + popover1: { + type: 'void', + title: '弹窗标题', + 'x-component': 'Action.Popover', + 'x-component-props': {}, + properties: { + [uid()]: { + name: 'form', + type: 'object', + 'x-component': 'Form', + properties: { + filter: { + type: 'string', + title: '字段1', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + action: { + type: 'void', + title: '提交', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableFilterAction }}', + }, + }, + }, + }, + }, + }, + }, + }, + action2: { + type: 'void', + name: 'action1', + title: '新增', + 'x-component': 'Action', + 'x-designable-bar': 'Action.DesignableBar', + properties: { + drawer1: { + type: 'void', + title: '抽屉标题', + 'x-component': 'Action.Modal', + 'x-component-props': {}, + properties: { + [uid()]: { + name: 'form', + type: 'object', + 'x-component': 'Form', + properties: { + field1: { + type: 'string', + title: '字段1', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + field2: { + type: 'string', + title: '字段2', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + action: { + type: 'void', + title: '提交', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableCreateAction }}', + }, + }, + }, + }, + }, + }, + }, + }, + action3: { + type: 'void', + name: 'action1', + title: '删除', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableDestroyAction }}', + }, + }, + }, + }, + [`a_${uid()}`]: { + type: 'void', + 'x-component': 'Table.ActionBar', + 'x-component-props': { + align: 'bottom', + }, + properties: { + pagination: { + type: 'void', + 'x-component': 'Table.Pagination', + 'x-component-props': { + defaultPageSize: 5, + }, + }, + }, + }, + [`a_${uid()}`]: { + type: 'void', + 'x-component': 'Table.ActionBar', + 'x-component-props': { + align: 'bottom', + }, + properties: { + pagination: { + type: 'void', + title: '新增', + 'x-component': 'Table.Addition', + 'x-component-props': {}, + }, + }, + }, + [`c_${uid()}`]: { + type: 'void', + title: '排序', + 'x-component': 'Table.Column', + properties: { + sort: { + type: 'void', + 'x-component': 'Table.SortHandle', + }, + }, + }, + [`c_${uid()}`]: { + type: 'void', + title: '序号', + 'x-component': 'Table.Column', + properties: { + index: { + type: 'void', + 'x-component': 'Table.Index', + }, + }, + }, + [`c_${uid()}`]: { + type: 'void', + title: '字段1', + 'x-component': 'Table.Column', + 'x-component-props': { + // title: 'z1', + }, + 'x-designable-bar': 'Table.Column.DesignableBar', + properties: { + field1: { + type: 'string', + required: true, + // 'x-read-pretty': true, + 'x-decorator-props': { + feedbackLayout: 'popover', + }, + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + }, + }, + [`c_${uid()}`]: { + type: 'void', + title: '字段2', + 'x-component': 'Table.Column', + properties: { + field2: { + type: 'string', + // title: '字段2', + required: true, + // 'x-read-pretty': true, + 'x-decorator-props': { + feedbackLayout: 'popover', + }, + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + }, + }, + [`col_${uid()}`]: { + type: 'void', + title: '操作', + 'x-component': 'Table.Column', + properties: { + action1: { + type: 'void', + name: 'action1', + title: '查看', + 'x-component': 'Action', + 'x-default-action': true, + 'x-designable-bar': 'Action.DesignableBar', + properties: { + drawer1: { + type: 'void', + title: '查看', + 'x-component': 'Action.Modal', + 'x-component-props': {}, + properties: { + [uid()]: { + type: 'void', + 'x-component': 'Tabs', + properties: { + tab1: { + type: 'void', + 'x-component': 'Tabs.TabPane', + 'x-component-props': { + tab: 'Tab1', + }, + properties: { + aaa: { + type: 'string', + title: 'AAA', + 'x-decorator': 'FormItem', + required: true, + 'x-component': 'Input', + }, + }, + }, + tab2: { + type: 'void', + 'x-component': 'Tabs.TabPane', + 'x-component-props': { + tab: 'Tab2', + }, + properties: { + bbb: { + type: 'string', + title: 'BBB', + 'x-decorator': 'FormItem', + required: true, + 'x-component': 'Input', + }, + }, + }, + }, + }, + }, + }, + }, + }, + action2: { + type: 'void', + name: 'action1', + title: '修改', + 'x-component': 'Action', + 'x-default-action': true, + 'x-designable-bar': 'Action.DesignableBar', + properties: { + drawer1: { + type: 'void', + title: '编辑表单', + 'x-component': 'Action.Modal', + 'x-component-props': {}, + properties: { + [uid()]: { + name: 'form', + type: 'void', + 'x-component': 'Form', + 'x-component-props': { + useValues: '{{ useTableRow }}', + }, + properties: { + field1: { + type: 'string', + title: '字段1', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + field2: { + type: 'string', + title: '字段2', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + action: { + type: 'void', + title: '提交', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableUpdateAction }}', + }, + }, + }, + }, + }, + }, + }, + }, + action3: { + type: 'void', + title: '删除', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableDestroyAction }}', + }, + }, + action4: { + type: 'void', + title: '...', + 'x-component': 'Action.Dropdown', + properties: { + action5: { + type: 'void', + title: '操作 1', + 'x-component': 'Action', + 'x-component-props': { + useAction, + disabled: true, + }, + }, + action4: { + type: 'void', + title: '操作 2', + 'x-component': 'Action', + 'x-component-props': { + useAction, + }, + }, + action1: { + type: 'void', + name: 'action1', + title: '查看', + 'x-component': 'Action', + // 'x-default-action': true, + 'x-designable-bar': 'Action.DesignableBar', + properties: { + drawer1: { + type: 'void', + title: '查看', + 'x-component': 'Action.Modal', + 'x-component-props': {}, + properties: { + [uid()]: { + type: 'void', + 'x-component': 'Tabs', + properties: { + tab1: { + type: 'void', + 'x-component': 'Tabs.TabPane', + 'x-component-props': { + tab: 'Tab1', + }, + properties: { + aaa: { + type: 'string', + title: 'AAA', + 'x-decorator': 'FormItem', + required: true, + 'x-component': 'Input', + }, + }, + }, + tab2: { + type: 'void', + 'x-component': 'Tabs.TabPane', + 'x-component-props': { + tab: 'Tab2', + }, + properties: { + bbb: { + type: 'string', + title: 'BBB', + 'x-decorator': 'FormItem', + required: true, + 'x-component': 'Input', + }, + }, + }, + }, + }, + }, + }, + }, + }, + action2: { + type: 'void', + name: 'action1', + title: '修改', + 'x-component': 'Action', + 'x-default-action': true, + 'x-designable-bar': 'Action.DesignableBar', + properties: { + drawer1: { + type: 'void', + title: '编辑表单', + 'x-component': 'Action.Modal', + 'x-component-props': {}, + properties: { + [uid()]: { + name: 'form', + type: 'void', + 'x-component': 'Form', + 'x-component-props': { + useValues: '{{ useTableRow }}', + }, + properties: { + field1: { + type: 'string', + title: '字段1', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + field2: { + type: 'string', + title: '字段2', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + action: { + type: 'void', + title: '提交', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableUpdateAction }}', + }, + }, + }, + }, + }, + }, + }, + }, + action3: { + type: 'void', + title: '删除', + 'x-component': 'Action', + 'x-component-props': { + useAction: '{{ useTableDestroyAction }}', + }, + }, + }, + }, + }, + }, + }, +}; + +const form = createForm(); + +export default observer(() => { + return ( +
+ + {/* */} +
+ ); +}); diff --git a/packages/client/src/blocks/table/index.md b/packages/client/src/schemas/table/index.md similarity index 85% rename from packages/client/src/blocks/table/index.md rename to packages/client/src/schemas/table/index.md index b95eacb69..f4a17111c 100644 --- a/packages/client/src/blocks/table/index.md +++ b/packages/client/src/schemas/table/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Table - 表格 diff --git a/packages/client/src/blocks/table/index.tsx b/packages/client/src/schemas/table/index.tsx similarity index 65% rename from packages/client/src/blocks/table/index.tsx rename to packages/client/src/schemas/table/index.tsx index e7862cb4f..a4a956279 100644 --- a/packages/client/src/blocks/table/index.tsx +++ b/packages/client/src/schemas/table/index.tsx @@ -1,4 +1,4 @@ -import React, { createContext, useContext, useState } from 'react'; +import React, { createContext, useContext, useRef, useState } from 'react'; import { useFieldSchema, Schema, @@ -24,12 +24,17 @@ import { BaseResult } from '@ahooksjs/use-request/lib/types'; import { uid, clone } from '@formily/shared'; import { MenuOutlined } from '@ant-design/icons'; import { useVisibleContext } from '../action'; +import { SortableHandle, SortableContainer, SortableElement } from 'react-sortable-hoc' +import cls from 'classnames'; interface TableRowProps { index: number; data: any; } +const SortableRow = SortableElement((props: any) => ) +const SortableBody = SortableContainer((props: any) => ) + const TableRowContext = createContext(null); function usePaginationProps() { @@ -55,6 +60,21 @@ function usePaginationProps() { return false; } +function useDefaultAction() { + const schema = useFieldSchema(); + + function findDefaultAction(schema: Schema): Schema[] { + return schema.reduceProperties((columns, current) => { + if (current['x-default-action']) { + return [...columns, current]; + } + return [...columns, ...findDefaultAction(current)]; + }, []); + } + + return findDefaultAction(schema).shift(); +} + function useTableActionBars() { const schema = useFieldSchema(); @@ -127,7 +147,9 @@ export function useTableRow() { } export function useTableIndex() { - const { params: { page, pageSize } } = useTableContext(); + const { + params: { page, pageSize }, + } = useTableContext(); const ctx = useContext(TableRowContext); const field = useField(); if (!field.componentProps.isRemoteDataSource) { @@ -138,7 +160,8 @@ export function useTableIndex() { export function useTableDestroyAction() { const ctx = useContext(TableRowContext); - const { field, selectedRowKeys, setSelectedRowKeys, refresh } = useTableContext(); + const { field, selectedRowKeys, setSelectedRowKeys, refresh } = + useTableContext(); const rowKey = field.componentProps.rowKey || 'id'; return { @@ -148,23 +171,19 @@ export function useTableDestroyAction() { refresh(); return; } - + if (!selectedRowKeys.length) { return; } while (selectedRowKeys.length) { const key = selectedRowKeys.shift(); - const index = findIndex( - field.value, - (item) => item[rowKey] === key, - ); + const index = findIndex(field.value, (item) => item[rowKey] === key); field.remove(index); } refresh(); setSelectedRowKeys([]); - } - } - + }, + }; } export function useTableFilterAction() { @@ -175,8 +194,8 @@ export function useTableFilterAction() { async run() { setVisible && setVisible(false); refresh(); - } - } + }, + }; } export function useTableCreateAction() { @@ -186,11 +205,14 @@ export function useTableCreateAction() { return { async run() { setVisible && setVisible(false); - field.unshift(clone(form.values)); + field.push({ + key: uid(), + ...clone(form.values), + }); form.reset(); - exec({...params, page: 1}); - } - } + exec({ ...params, page: 1 }); + }, + }; } export function useTableUpdateAction() { @@ -201,12 +223,13 @@ export function useTableUpdateAction() { async run() { setVisible && setVisible(false); refresh(); - } - } + }, + }; } const [TableContextProvider, useTableContext] = constate(() => { const field = useField(); + const schema = useFieldSchema(); const [selectedRowKeys, setSelectedRowKeys] = useState([]); const pagination = usePaginationProps(); const response = useRequest<{ @@ -239,7 +262,14 @@ const [TableContextProvider, useTableContext] = constate(() => { pageSize: pagination.defaultPageSize, ...(response.params[0] || {}), }; - return { ...response, params, field, selectedRowKeys, setSelectedRowKeys }; + return { + ...response, + params, + field, + schema, + selectedRowKeys, + setSelectedRowKeys, + }; }); export { TableContextProvider, useTableContext }; @@ -251,12 +281,26 @@ const TableContainer = observer((props) => { const { loading, data, refresh, selectedRowKeys, setSelectedRowKeys } = useTableContext(); const rowKey = field.componentProps.rowKey || 'id'; - console.log({ actionBars }); - const dataSource = Array.isArray(field.value) ? field.value.slice() : [] + const defaultAction = useDefaultAction(); + console.log({ defaultAction }); + const dataSource = Array.isArray(field.value) ? field.value.slice() : []; const columns = useTableColumns({ dataSource }); - + const ref = useRef() + const addTdStyles = (node: HTMLElement) => { + const helper = document.body.querySelector(`.nb-table-sort-helper`) + if (helper) { + const tds = node.querySelectorAll('td') + requestAnimationFrame(() => { + helper.querySelectorAll('td').forEach((td, index) => { + if (tds[index]) { + td.style.width = getComputedStyle(tds[index]).width + } + }) + }) + } + } return ( -
+
{actionBars.top.map((actionBarSchema) => { return ( { }} dataSource={data?.list} columns={columns} + components={{ + body: { + wrapper: (props: any) => ( + { + return ref.current?.querySelector('tbody') + }} + onSortStart={({ node }) => { + addTdStyles(node) + }} + onSortEnd={({ oldIndex, newIndex }) => { + field.move(oldIndex, newIndex); + refresh(); + }} + {...props} + /> + ), + row: (props: any) => { + const index = findIndex(field.value, item => item[rowKey] === props['data-row-key']); + return ( + + ) + }, + }, + }} onRow={(data) => { const index = dataSource.indexOf(data); return { onClick(e) { - field.query(`.${schema.name}.${index}.action2`).take((f) => { - const setVisible = f.componentProps.setVisible; - setVisible && setVisible(true); - }); + console.log('onRow', (e.target as HTMLElement), (e.target as HTMLElement).classList.contains('ant-table-cell')); + if (!(e.target as HTMLElement).classList.contains('ant-table-cell')) { + return; + } + if (!defaultAction) { + return; + } + // console.log('defaultAction'); + field + .query(`.${schema.name}.${index}.${defaultAction.name}`) + .take((f) => { + const setVisible = f.componentProps.setVisible; + setVisible && setVisible(true); + }); }, }; }} @@ -337,28 +423,64 @@ Table.ActionBar = observer((props) => { Table.Pagination = observer((props) => { const { data, params, run } = useTableContext(); - return data?.total > params?.pageSize && ( - { - run({ page, pageSize }); - }} - /> + return ( + data?.total > params?.pageSize && ( + { + run({ page, pageSize }); + }} + /> + ) ); }); +const SortHandle = SortableHandle((props: any) => { + return ( + + ) +}) as any + Table.SortHandle = observer((props) => { const field = useField(); console.log('SortHandle', field.value); - return ; + return ; }); Table.Index = observer((props) => { const index = useTableIndex(); return
#{index + 1}
; }); + +Table.Addition = observer((props: any) => { + const { field, refresh } = useTableContext(); + const current = useField(); + return ( + + ); +}); diff --git a/packages/client/src/blocks/tabs/index.md b/packages/client/src/schemas/tabs/index.md similarity index 95% rename from packages/client/src/blocks/tabs/index.md rename to packages/client/src/schemas/tabs/index.md index 7675cc6bc..5e344b13e 100644 --- a/packages/client/src/blocks/tabs/index.md +++ b/packages/client/src/schemas/tabs/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Tabs - 标签页 diff --git a/packages/client/src/blocks/tabs/index.tsx b/packages/client/src/schemas/tabs/index.tsx similarity index 100% rename from packages/client/src/blocks/tabs/index.tsx rename to packages/client/src/schemas/tabs/index.tsx diff --git a/packages/client/src/blocks/time-picker/index.md b/packages/client/src/schemas/time-picker/index.md similarity index 94% rename from packages/client/src/blocks/time-picker/index.md rename to packages/client/src/schemas/time-picker/index.md index 33f7fb112..8d350895f 100644 --- a/packages/client/src/blocks/time-picker/index.md +++ b/packages/client/src/schemas/time-picker/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # TimePicker - 时间选择器 diff --git a/packages/client/src/blocks/time-picker/index.tsx b/packages/client/src/schemas/time-picker/index.tsx similarity index 100% rename from packages/client/src/blocks/time-picker/index.tsx rename to packages/client/src/schemas/time-picker/index.tsx diff --git a/packages/client/src/blocks/upload/index.md b/packages/client/src/schemas/upload/index.md similarity index 95% rename from packages/client/src/blocks/upload/index.md rename to packages/client/src/schemas/upload/index.md index 03131eb13..56dfbc2db 100644 --- a/packages/client/src/blocks/upload/index.md +++ b/packages/client/src/schemas/upload/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: Components - 组件 - path: /client/components + title: Schemas + path: /client/schemas --- # Upload - 上传 diff --git a/packages/client/src/blocks/upload/index.tsx b/packages/client/src/schemas/upload/index.tsx similarity index 100% rename from packages/client/src/blocks/upload/index.tsx rename to packages/client/src/schemas/upload/index.tsx diff --git a/packages/client/src/blocks/upload/placeholder.ts b/packages/client/src/schemas/upload/placeholder.ts similarity index 100% rename from packages/client/src/blocks/upload/placeholder.ts rename to packages/client/src/schemas/upload/placeholder.ts diff --git a/packages/client/src/templates/admin-layout/index.tsx b/packages/client/src/templates/admin-layout/index.tsx index 164e7fa0a..a03c8372a 100644 --- a/packages/client/src/templates/admin-layout/index.tsx +++ b/packages/client/src/templates/admin-layout/index.tsx @@ -22,7 +22,7 @@ import { refreshGlobalAction, RouteComponentContext, } from '../../'; -import { SchemaRenderer } from '../../blocks'; +import { SchemaRenderer } from '../../schemas'; import { useRequest } from 'ahooks'; import { DatabaseOutlined, @@ -32,7 +32,7 @@ import { import { Tabs } from 'antd'; import '@formily/antd/esm/array-collapse/style'; import './style.less'; -import { MenuContainerContext } from '../../blocks/menu'; +import { MenuContainerContext } from '../../schemas/menu'; function LogoutButton() { const history = useHistory(); diff --git a/packages/client/src/templates/default-page/index.tsx b/packages/client/src/templates/default-page/index.tsx index bbab8cb67..f8713a8c0 100644 --- a/packages/client/src/templates/default-page/index.tsx +++ b/packages/client/src/templates/default-page/index.tsx @@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { Spin } from 'antd'; import { Helmet } from 'react-helmet'; import { useRequest } from 'ahooks'; -import { SchemaRenderer } from '../../blocks'; +import { SchemaRenderer } from '../../schemas'; export function DefaultPage({ route }) { const { data = {}, loading } = useRequest(