From 5e181c3adecd8a19905ecf666070d73c2741d9e8 Mon Sep 17 00:00:00 2001 From: chenos Date: Sun, 4 Jul 2021 00:19:26 +0800 Subject: [PATCH] lots of updates --- packages/client/package.json | 2 + .../blocks/DesignableSchemaField/index.tsx | 11 +- packages/client/src/blocks/SchemaField.tsx | 137 ------------------ packages/client/src/blocks/action/index.md | 4 +- packages/client/src/blocks/add-new/index.md | 12 +- packages/client/src/blocks/add-new/index.tsx | 82 ++++++++++- packages/client/src/blocks/cascader/index.md | 4 +- packages/client/src/blocks/checkbox/index.md | 4 +- .../client/src/blocks/color-select/index.md | 4 +- .../client/src/blocks/database-field/index.md | 4 +- .../client/src/blocks/date-picker/index.md | 4 +- .../client/src/blocks/drawer-select/index.md | 4 +- .../client/src/blocks/filter/FilterItem.tsx | 4 +- packages/client/src/blocks/filter/index.md | 4 +- .../client/src/blocks/form-item/index.tsx | 7 +- packages/client/src/blocks/form/ActionBar.tsx | 53 ------- packages/client/src/blocks/form/index.md | 21 ++- packages/client/src/blocks/form/index.tsx | 32 ++-- .../client/src/blocks/grid/demos/demo1.tsx | 13 ++ packages/client/src/blocks/grid/hooks.tsx | 24 ++- packages/client/src/blocks/grid/index.md | 2 +- packages/client/src/blocks/grid/index.tsx | 6 +- packages/client/src/blocks/grid/style.less | 34 +++-- .../client/src/blocks/icon-picker/index.md | 8 +- packages/client/src/blocks/index.tsx | 39 +---- .../client/src/blocks/input-number/index.md | 12 +- packages/client/src/blocks/input/index.md | 24 +-- packages/client/src/blocks/markdown/index.md | 8 +- packages/client/src/blocks/menu/index.md | 4 +- packages/client/src/blocks/menu/index.tsx | 4 +- packages/client/src/blocks/password/index.md | 8 +- packages/client/src/blocks/radio/index.md | 8 +- packages/client/src/blocks/radio/index.tsx | 1 - packages/client/src/blocks/select/index.md | 20 +-- packages/client/src/blocks/table/index.md | 8 +- packages/client/src/blocks/tabs/index.md | 8 +- .../client/src/blocks/time-picker/index.md | 4 +- packages/client/src/blocks/upload/index.md | 4 +- .../src/demos/api/blocks-getSchema/item2.ts | 4 +- .../src/demos/api/blocks-getSchema/item3.ts | 40 ++++- .../src/templates/admin-layout/index.tsx | 8 +- .../src/templates/default-page/index.tsx | 4 +- yarn.lock | 26 ++++ 43 files changed, 333 insertions(+), 381 deletions(-) delete mode 100644 packages/client/src/blocks/SchemaField.tsx delete mode 100644 packages/client/src/blocks/form/ActionBar.tsx diff --git a/packages/client/package.json b/packages/client/package.json index ef8c37eb7..b47330855 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -21,9 +21,11 @@ "@formily/antd": "^2.0.0-beta.72", "@formily/core": "^2.0.0-beta.72", "@formily/react": "^2.0.0-beta.72", + "@monaco-editor/react": "^4.2.1", "ahooks": "^2.10.2", "axios": "^0.21.1", "beautiful-react-hooks": "^0.35.0", + "constate": "^3.3.0", "lodash": "^4.17.21", "react-dnd": "^14.0.2", "react-dnd-html5-backend": "^14.0.0", diff --git a/packages/client/src/blocks/DesignableSchemaField/index.tsx b/packages/client/src/blocks/DesignableSchemaField/index.tsx index 2ba04a815..dcdb32aff 100644 --- a/packages/client/src/blocks/DesignableSchemaField/index.tsx +++ b/packages/client/src/blocks/DesignableSchemaField/index.tsx @@ -171,7 +171,7 @@ export function useDesignable(path?: any) { const currentSchema = findPropertyByPath(schema, schemaPath); console.log('useDesignable', { schema, schemaPath, currentSchema }); return { - schema: currentSchema, + schema: (currentSchema || {} as any), refresh, prepend: (property: ISchema, targetPath?: any): Schema => { let target = currentSchema; @@ -263,6 +263,7 @@ export function useDesignable(path?: any) { return; } s.parent.removeProperty(s.name); + console.log('s.parent.properties', s.name, s.parent.properties) if (Object.keys(s.parent.properties || {}).length === 0) { remove(s.parent); } @@ -297,6 +298,7 @@ export function useSchemaPath() { path.unshift(parent.name); parent = parent.parent; } + console.log('useSchemaPath', path, schema); return [...path]; } @@ -335,7 +337,7 @@ const CodePreview = ({ schema }) => { return ( <> setVisible(true)} /> - setVisible(false)} visible={visible}> + setVisible(false)} visible={visible}> { ); }; +export const SchemaField = createSchemaField({ + scope, + components, +}); + export const DesignableSchemaField = createDesignableSchemaField({ scope, components, diff --git a/packages/client/src/blocks/SchemaField.tsx b/packages/client/src/blocks/SchemaField.tsx deleted file mode 100644 index 950d9b484..000000000 --- a/packages/client/src/blocks/SchemaField.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import React, { createContext, useState } from 'react'; -import { - // FormItem, - FormLayout, - FormButtonGroup, - Submit, - ArrayTable, - ArrayCollapse, -} from '@formily/antd'; -import { createForm } from '@formily/core'; -import { - Schema, - ISchema, - useForm, - FormProvider, - createSchemaField, - observer, - useFieldSchema, -} from '@formily/react'; -import { Space, Card } from 'antd'; -import { Action, useLogin, useRegister, useSubmit } from './action'; -import { AddNew } from './add-new'; -import { Cascader } from './cascader'; -import { Checkbox } from './checkbox'; -import { ColorSelect } from './color-select'; -import { DatabaseField } from './database-field'; -import { DatePicker } from './date-picker'; -import { DrawerSelect } from './drawer-select'; -import { Filter } from './filter'; -import { Form } from './form'; -import { Grid } from './grid'; -import { IconPicker } from './icon-picker'; -import { Input } from './input'; -import { InputNumber } from './input-number'; -import { Markdown } from './markdown'; -import { Menu } from './menu'; -import { Password } from './password'; -import { Radio } from './radio'; -import { Select } from './select'; -import { Table } from './table'; -import { Tabs } from './tabs'; -import { TimePicker } from './time-picker'; -import { Upload } from './upload'; -import { FormItem } from './form-item'; - -export const BlockContext = createContext({ dragRef: null }); - -const Div = (props) =>
; - -export const scope = { - useLogin, - useRegister, - useSubmit, -}; - -export const components = { - Div, - Space, - Card, - - ArrayCollapse, - ArrayTable, - FormLayout, - FormItem, - - Action, - AddNew, - Cascader, - Checkbox, - ColorSelect, - DatabaseField, - DatePicker, - DrawerSelect, - Filter, - Form, - Grid, - IconPicker, - Input, - InputNumber, - Markdown, - Menu, - Password, - Radio, - Select, - Table, - Tabs, - TimePicker, - Upload, -}; - -export function registerScope(scopes) { - Object.keys(scopes).forEach((key) => { - scope[key] = scopes[key]; - }); -} - -export function registerComponents(values) { - Object.keys(values).forEach((key) => { - components[key] = values[key]; - }); -} - -export const SchemaField = createSchemaField({ - scope, - components, -}); - -export const DesignableSchemaContext = createContext(new Schema({})); -export const RefreshDesignableSchemaContext = createContext(null); - -export function DesignableProvider(props) { - const { schema } = props; - const [, refresh] = useState(0); - return ( - { - refresh(Math.random()); - }} - > - - {props.children(schema)} - - {/* 
{JSON.stringify(schema.toJSON(), null, 2)}
*/} - - ); -} - -export const DesignableContext = - createContext<{ schema: Schema; refresh: any }>(null); - -export function DesignableSchemaField(props: { schema?: ISchema }) { - return ( - - {(s) => } - - ); -} diff --git a/packages/client/src/blocks/action/index.md b/packages/client/src/blocks/action/index.md index 2b0b99333..d5da98ebc 100644 --- a/packages/client/src/blocks/action/index.md +++ b/packages/client/src/blocks/action/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Action - 操作 diff --git a/packages/client/src/blocks/add-new/index.md b/packages/client/src/blocks/add-new/index.md index c40d90906..88dd52f03 100644 --- a/packages/client/src/blocks/add-new/index.md +++ b/packages/client/src/blocks/add-new/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # AddNew - 新增区块 @@ -15,7 +15,7 @@ group: ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'void', @@ -24,7 +24,7 @@ const schema = { }; export default () => { - return + return } ``` @@ -32,7 +32,7 @@ export default () => { ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'void', @@ -41,6 +41,6 @@ const schema = { }; export default () => { - return + return } ``` diff --git a/packages/client/src/blocks/add-new/index.tsx b/packages/client/src/blocks/add-new/index.tsx index c9d47927e..454d5b413 100644 --- a/packages/client/src/blocks/add-new/index.tsx +++ b/packages/client/src/blocks/add-new/index.tsx @@ -43,13 +43,53 @@ import { DownOutlined, DatabaseOutlined, } from '@ant-design/icons'; +import { useDesignable, useSchemaPath } from '../DesignableSchemaField'; +import { uid } from '@formily/shared'; export const AddNew: any = observer((props) => { + const { schema, insertBefore } = useDesignable(); + const path = useSchemaPath(); + if (schema.parent['x-component'] === 'Grid.Block') { + path.pop(); // block + path.pop(); // col + path.pop(); // row + } return ( - 新建 Markdown + { + insertBefore({ + type: 'void', + name: uid(), + "x-component": 'Grid.Row', + properties: { + [uid()]: { + type: 'void', + "x-component": 'Grid.Col', + properties: { + [uid()]: { + type: 'void', + "x-component": 'Grid.Block', + properties: { + [uid()]: { + type: 'void', + title: uid(), + 'x-designable-bar': 'FormItem.DesignableBar', + "x-decorator": 'FormItem', + 'x-component': 'Markdown', + } + } + }, + }, + }, + }, + }, [...path]); + }} + > + 新建 Markdown + } > @@ -59,11 +99,49 @@ export const AddNew: any = observer((props) => { }); AddNew.FormItem = observer((props) => { + const { schema, insertBefore } = useDesignable(); + const path = useSchemaPath(); + if (schema.parent['x-component'] === 'Grid.Block') { + path.pop(); // block + path.pop(); // col + path.pop(); // row + } return ( - 字段 1 + { + insertBefore({ + type: 'void', + name: uid(), + "x-component": 'Grid.Row', + properties: { + [uid()]: { + type: 'void', + "x-component": 'Grid.Col', + properties: { + [uid()]: { + type: 'void', + "x-component": 'Grid.Block', + properties: { + [uid()]: { + type: 'void', + title: uid(), + 'x-designable-bar': 'FormItem.DesignableBar', + "x-decorator": 'FormItem', + 'x-component': 'Markdown', + } + } + }, + }, + }, + }, + }, [...path]); + }} + > + 字段 1 + } > diff --git a/packages/client/src/blocks/cascader/index.md b/packages/client/src/blocks/cascader/index.md index 107baa382..b4e8d3479 100644 --- a/packages/client/src/blocks/cascader/index.md +++ b/packages/client/src/blocks/cascader/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Cascader - 级联选择 diff --git a/packages/client/src/blocks/checkbox/index.md b/packages/client/src/blocks/checkbox/index.md index bd9360af1..d429e486b 100644 --- a/packages/client/src/blocks/checkbox/index.md +++ b/packages/client/src/blocks/checkbox/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Checkbox - 多选框 diff --git a/packages/client/src/blocks/color-select/index.md b/packages/client/src/blocks/color-select/index.md index 0724433ed..1fb4be362 100644 --- a/packages/client/src/blocks/color-select/index.md +++ b/packages/client/src/blocks/color-select/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # ColorSelect - 颜色选择器 diff --git a/packages/client/src/blocks/database-field/index.md b/packages/client/src/blocks/database-field/index.md index 1f13270c1..a847b3dad 100644 --- a/packages/client/src/blocks/database-field/index.md +++ b/packages/client/src/blocks/database-field/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # DatabaseField - 数据表字段 diff --git a/packages/client/src/blocks/date-picker/index.md b/packages/client/src/blocks/date-picker/index.md index ed4624bf8..f7f755f3c 100644 --- a/packages/client/src/blocks/date-picker/index.md +++ b/packages/client/src/blocks/date-picker/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # DatePicker - 日期选择器 diff --git a/packages/client/src/blocks/drawer-select/index.md b/packages/client/src/blocks/drawer-select/index.md index f3d5de6d6..b80715c55 100644 --- a/packages/client/src/blocks/drawer-select/index.md +++ b/packages/client/src/blocks/drawer-select/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # DrawerSelect - 抽屉选择器 diff --git a/packages/client/src/blocks/filter/FilterItem.tsx b/packages/client/src/blocks/filter/FilterItem.tsx index 8b12aaa98..ebc1a5d7f 100644 --- a/packages/client/src/blocks/filter/FilterItem.tsx +++ b/packages/client/src/blocks/filter/FilterItem.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from 'react'; -import { getFieldComponent, 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'; @@ -51,7 +51,7 @@ export const FilterItem = (props) => { } else { field.visible = true; } - field.setComponent(getFieldComponent(schema['x-component'])); + // field.setComponent(getFieldComponent(schema['x-component'])); // field.visible = opValue ? !opValue.noValue : true; }); }, diff --git a/packages/client/src/blocks/filter/index.md b/packages/client/src/blocks/filter/index.md index e110fad0c..51051e0e8 100644 --- a/packages/client/src/blocks/filter/index.md +++ b/packages/client/src/blocks/filter/index.md @@ -5,6 +5,6 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- diff --git a/packages/client/src/blocks/form-item/index.tsx b/packages/client/src/blocks/form-item/index.tsx index f5c9e9261..fde6721f4 100644 --- a/packages/client/src/blocks/form-item/index.tsx +++ b/packages/client/src/blocks/form-item/index.tsx @@ -8,6 +8,7 @@ import './style.less'; import get from 'lodash/get'; import { GridBlockContext } from '../grid'; import { uid } from '@formily/shared'; +import { useDesignable } from '../DesignableSchemaField'; function Blank() { return null; @@ -36,6 +37,7 @@ export const FormItem: any = connect((props) => { FormItem.DesignableBar = () => { const field = useField(); + const { schema, refresh } = useDesignable(); const [visible, setVisible] = useState(false); const { dragRef } = useContext(GridBlockContext); return ( @@ -58,8 +60,11 @@ FormItem.DesignableBar = () => { { - field.title = uid(); + const title = uid(); + schema.title = title; + field.title = title; setVisible(false); + refresh(); }} > 点击修改按钮文案 diff --git a/packages/client/src/blocks/form/ActionBar.tsx b/packages/client/src/blocks/form/ActionBar.tsx deleted file mode 100644 index fff2e5763..000000000 --- a/packages/client/src/blocks/form/ActionBar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useState } from 'react'; -import classNames from 'classnames'; -import { useField, observer, RecursionField, Schema } from '@formily/react'; -import { Dropdown, Menu } from 'antd'; -import { useSchemaQuery } from '../grid'; -import { - MenuOutlined, - ArrowUpOutlined, - ArrowDownOutlined, - DeleteOutlined, -} from '@ant-design/icons'; - -export const ActionBar = (props) => { - const { addBlock, removeBlock } = useSchemaQuery(); - const [active, setActive] = useState(false); - return ( - <> - { - addBlock( - {}, - { - insertBefore: true, - }, - ); - setActive(false); - }} - icon={} - > - 在上方插入区块 - - { - addBlock(); - setActive(false); - }} - icon={} - > - 在下方插入区块 - - - { - removeBlock(); - setActive(false); - }} - icon={} - > - 删除区块 - - - ); -}; diff --git a/packages/client/src/blocks/form/index.md b/packages/client/src/blocks/form/index.md index d575dbaa7..8baa76e7f 100644 --- a/packages/client/src/blocks/form/index.md +++ b/packages/client/src/blocks/form/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Form - 表单 @@ -17,7 +17,7 @@ group: ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -47,7 +47,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -56,7 +56,7 @@ export default () => { ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'void', @@ -257,7 +257,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -266,7 +266,7 @@ export default () => { ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; import { uid } from '@formily/shared'; const schema = { @@ -302,6 +302,7 @@ const schema = { type: 'string', required: true, title: '字段1', + 'x-designable-bar': 'FormItem.DesignableBar', 'x-decorator': 'FormItem', 'x-component': 'Input', }, @@ -329,6 +330,7 @@ const schema = { type: 'string', required: true, title: '字段2', + 'x-designable-bar': 'FormItem.DesignableBar', 'x-decorator': 'FormItem', 'x-component': 'Input', }, @@ -361,6 +363,7 @@ const schema = { type: 'string', required: true, title: '字段3', + 'x-designable-bar': 'FormItem.DesignableBar', 'x-decorator': 'FormItem', 'x-component': 'Input', }, @@ -388,6 +391,7 @@ const schema = { type: 'string', required: true, title: '字段4', + 'x-designable-bar': 'FormItem.DesignableBar', 'x-decorator': 'FormItem', 'x-component': 'Input', }, @@ -423,6 +427,7 @@ const schema = { type: 'string', required: true, title: '字段5', + 'x-designable-bar': 'FormItem.DesignableBar', 'x-decorator': 'FormItem', 'x-component': 'Input', }, @@ -496,7 +501,7 @@ const schema = { export default () => { return ( - + ); }; ``` \ No newline at end of file diff --git a/packages/client/src/blocks/form/index.tsx b/packages/client/src/blocks/form/index.tsx index 05539cedb..8cd48f8fc 100644 --- a/packages/client/src/blocks/form/index.tsx +++ b/packages/client/src/blocks/form/index.tsx @@ -1,23 +1,29 @@ import React, { useMemo } from 'react'; import { createForm } from '@formily/core'; -import { FormProvider, useFieldSchema } from '@formily/react'; -import { DesignableSchemaField } from '../SchemaField'; +import { FormProvider, Schema, useFieldSchema } from '@formily/react'; +import { SchemaRenderer, useDesignable } from '../DesignableSchemaField'; import { DesignableBar } from './DesignableBar'; export const Form = (props) => { - const form = useMemo(() => createForm(), []); const schema = useFieldSchema(); + const { schema: designableSchema, refresh } = useDesignable(); + return { + designableSchema.properties = subSchema.properties; + refresh(); + }} schema={schema.toJSON()} onlyRenderProperties/> - return ( - - - - ); + // return ( + // + // + // + // ); }; Form.DesignableBar = DesignableBar; diff --git a/packages/client/src/blocks/grid/demos/demo1.tsx b/packages/client/src/blocks/grid/demos/demo1.tsx index 33a7dd9c4..7965d61ef 100644 --- a/packages/client/src/blocks/grid/demos/demo1.tsx +++ b/packages/client/src/blocks/grid/demos/demo1.tsx @@ -44,6 +44,19 @@ const schema: ISchema = { }, }, }, + [`block_${uid()}`]: { + type: 'void', + 'x-component': 'Grid.Block', + properties: { + [uid()]: { + type: 'string', + title: uid(), + 'x-designable-bar': 'FormItem.DesignableBar', + 'x-decorator': 'FormItem', + 'x-component': 'Input', + }, + }, + }, }, }, [`col_${uid()}`]: { diff --git a/packages/client/src/blocks/grid/hooks.tsx b/packages/client/src/blocks/grid/hooks.tsx index d9da26051..495ae5277 100644 --- a/packages/client/src/blocks/grid/hooks.tsx +++ b/packages/client/src/blocks/grid/hooks.tsx @@ -57,14 +57,7 @@ export function useDrag(options?: any) { left: 0, top: 0, }); - const { setDrag, setDrop, getDrop } = useDragDropManagerContext(); - // const dragDropManager = useContext(DragDropManagerContext); - const field = useField(); - console.log( - 'init', - { isDragging, previewElement }, - field ? field.address.segments : null, - ); + const { drag, setDrag, setDrop, getDrop } = useDragDropManagerContext(); useWillUnmount(() => { setIsDragging(false); @@ -74,8 +67,9 @@ export function useDrag(options?: any) { window.__previewElement = undefined; setDrag(null); + setDrop(null); - // dragDropManager.drag = null; + document.body.classList.remove('dragging'); document.body.style.cursor = null; document.body.style.userSelect = null; }); @@ -86,8 +80,6 @@ export function useDrag(options?: any) { } setDrop({ type, item }); setDrag({ type, item }); - // dragDropManager.drag = { type, item }; - // dragDropManager.drop = { type, item }; setIsDragging(true); const postion = { @@ -127,7 +119,7 @@ export function useDrag(options?: any) { onDragStart && onDragStart(event); document.body.style.cursor = 'grab'; document.body.style.userSelect = 'none'; - document.body.className = 'dragging'; + document.body.classList.add('dragging'); // console.log( // 'onMouseDown', @@ -157,6 +149,7 @@ export function useDrag(options?: any) { // dragDropManager.drag = null; previewElement.remove(); setPreviewElement(undefined); + document.body.classList.remove('dragging'); document.body.style.cursor = null; document.body.style.userSelect = null; // @ts-ignore @@ -197,6 +190,8 @@ export function useDrag(options?: any) { if (!isDragging || !previewElement) { return; } + + console.log('drag', drag.dropIds); // console.log( // 'onMouseMove', // { isDragging, previewElement }, @@ -214,7 +209,6 @@ export function useDrag(options?: any) { if (type) { let dropElement = document.elementFromPoint(event.clientX, event.clientY); - console.log({ dropElement }); const dropIds = []; while (dropElement) { if (!dropElement.getAttribute) { @@ -224,7 +218,6 @@ export function useDrag(options?: any) { const dropId = dropElement.getAttribute('data-drop-id'); const dropContext = getDrop(dropId); if (dropContext && dropContext.accept === type) { - console.log({ dropId }); if ( !dropContext.shallow || (dropContext.shallow && dropIds.length === 0) @@ -276,7 +269,7 @@ export function useDrop(options) { // shallow, // }; dropRef.current.setAttribute('data-drop-id', dropId); - }, []); + }, [dropId]); onMouseEnter((event) => { if (!canDrop) { @@ -296,6 +289,7 @@ export function useDrop(options) { if (!drag || drag.type !== accept) { return; } + console.log('drag.dropIds', drag.dropIds, dropId) if (drag.dropIds && drag.dropIds.includes(dropId)) { const top = event.clientY - dropRef.current.getBoundingClientRect().top; const onTop = top < dropRef.current.clientHeight / 2; diff --git a/packages/client/src/blocks/grid/index.md b/packages/client/src/blocks/grid/index.md index 007a4d9e3..f1579299f 100644 --- a/packages/client/src/blocks/grid/index.md +++ b/packages/client/src/blocks/grid/index.md @@ -6,7 +6,7 @@ nav: group: order: 2 title: Blocks - path: /client/blocks + path: /client/components --- # Grid - 栅格 diff --git a/packages/client/src/blocks/grid/index.tsx b/packages/client/src/blocks/grid/index.tsx index 93f1ceaa8..44ae41ab2 100644 --- a/packages/client/src/blocks/grid/index.tsx +++ b/packages/client/src/blocks/grid/index.tsx @@ -96,7 +96,6 @@ export const Grid: any = observer((props) => { onDrop={(e) => { const blockSchema = e.dragItem.schema; const path = [...e.dragItem.path]; - path.pop(); prepend({ type: 'void', 'x-component': 'Grid.Row', @@ -125,7 +124,6 @@ export const Grid: any = observer((props) => { onDrop={(e) => { const blockSchema = e.dragItem.schema; const path = [...e.dragItem.path]; - path.pop(); insertAfter( { type: 'void', @@ -168,7 +166,7 @@ Grid.Row = observer((props) => { deepRemove, } = useDesignable(); const len = Object.keys(designableSchema.properties || {}).length; - console.log({ len }); + console.log({ len, schema, designableSchema }); return ( { }, }); const path = [...e.dragItem.path]; - path.pop(); deepRemove(path); }} /> @@ -207,7 +204,6 @@ Grid.Row = observer((props) => { [...rowPath, key], ); const path = [...e.dragItem.path]; - path.pop(); deepRemove(path); }} onDragEnd={(e) => { diff --git a/packages/client/src/blocks/grid/style.less b/packages/client/src/blocks/grid/style.less index 41dbab720..28c9930cf 100644 --- a/packages/client/src/blocks/grid/style.less +++ b/packages/client/src/blocks/grid/style.less @@ -5,17 +5,36 @@ margin: 0px -24px; } -.nb-grid { - .nb-grid-col-divider { - &.resizable { - cursor: col-resize; - &:hover { - background: #e6f7ff; +// .nb-grid { +// .nb-grid-col-divider { +// &.resizable { +// cursor: col-resize; +// &:hover { +// background: #e6f7ff; +// } +// } +// } +// } + +body:not(.dragging) { + .nb-grid { + .nb-grid-col-divider { + &.resizable { + cursor: col-resize; + &:hover { + background: #e6f7ff; + } } } } } +body.dragging { + .designable-bar { + display: none !important; + } +} + .nb-grid.dragging { position: relative; .nb-grid-col-divider { @@ -35,9 +54,6 @@ background: #e6f7ff; } } - .designable-bar { - display: none !important; - } .nb-grid-block { position: relative; &.hover { diff --git a/packages/client/src/blocks/icon-picker/index.md b/packages/client/src/blocks/icon-picker/index.md index d414fae1d..514a6fb4e 100644 --- a/packages/client/src/blocks/icon-picker/index.md +++ b/packages/client/src/blocks/icon-picker/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # IconPicker - 图标选择器 @@ -16,7 +16,7 @@ group: * title: 图标 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -50,7 +50,7 @@ const schema = { export default () => { return (
- +
); }; diff --git a/packages/client/src/blocks/index.tsx b/packages/client/src/blocks/index.tsx index cddc4bb1f..bb2da2e16 100644 --- a/packages/client/src/blocks/index.tsx +++ b/packages/client/src/blocks/index.tsx @@ -1,38 +1 @@ -import React, { useMemo } from 'react'; -import { createForm } from '@formily/core'; -import { FormProvider } from '@formily/react'; -import { DesignableSchemaField, SchemaField } from './SchemaField'; - -export * from './SchemaField'; - -export { SchemaRenderer, useDesignable, registerComponents, registerScope } from './DesignableSchemaField'; - -export const SchemaBlock = ({ schema, onlyRenderProperties = false, designable = true }) => { - const form = useMemo(() => createForm(), []); - - let s = schema; - - if (onlyRenderProperties) { - s = { - type: 'object', - properties: schema.properties, - }; - } else if (schema.name) { - s = { - type: 'object', - properties: { - [schema.name]: schema, - }, - }; - } - - return ( - - {designable ? ( - - ) : ( - - )} - - ); -}; +export * from './DesignableSchemaField'; diff --git a/packages/client/src/blocks/input-number/index.md b/packages/client/src/blocks/input-number/index.md index d16961551..1744f38cb 100644 --- a/packages/client/src/blocks/input-number/index.md +++ b/packages/client/src/blocks/input-number/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # InputNumber - 数字框 @@ -18,7 +18,7 @@ group: * title: 数字框 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -50,7 +50,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -62,7 +62,7 @@ export default () => { * title: 百分比 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -103,7 +103,7 @@ const schema = { export default () => { return ( - + ); }; ``` diff --git a/packages/client/src/blocks/input/index.md b/packages/client/src/blocks/input/index.md index ce2397ad2..4569e7574 100644 --- a/packages/client/src/blocks/input/index.md +++ b/packages/client/src/blocks/input/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Input - 输入框 @@ -22,7 +22,7 @@ group: * title: 单行文本 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -54,7 +54,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -67,7 +67,7 @@ export default () => { * desc: 用于多行输入，使用 `Input.TextArea` 组件，`ellipsis=true` 时超出隐藏 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -112,7 +112,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -125,7 +125,7 @@ export default () => { * desc: 加上邮箱验证 `x-validator=email` */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -160,7 +160,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -173,7 +173,7 @@ export default () => { * desc: 加上手机号验证 `x-validator=phone` */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -208,7 +208,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -221,7 +221,7 @@ export default () => { * desc: 加上 URL 验证 `x-validator=url` */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -254,7 +254,7 @@ const schema = { export default () => { return ( - + ); }; ``` diff --git a/packages/client/src/blocks/markdown/index.md b/packages/client/src/blocks/markdown/index.md index ff61acb02..99abda4bb 100644 --- a/packages/client/src/blocks/markdown/index.md +++ b/packages/client/src/blocks/markdown/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Markdown 编辑器 @@ -17,7 +17,7 @@ group: ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -62,7 +62,7 @@ const schema = { export default () => { return ( - + ); }; ``` diff --git a/packages/client/src/blocks/menu/index.md b/packages/client/src/blocks/menu/index.md index 7ee1ac063..23d984c7a 100644 --- a/packages/client/src/blocks/menu/index.md +++ b/packages/client/src/blocks/menu/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Menu - 菜单 diff --git a/packages/client/src/blocks/menu/index.tsx b/packages/client/src/blocks/menu/index.tsx index 9198449bc..4cdf3919d 100644 --- a/packages/client/src/blocks/menu/index.tsx +++ b/packages/client/src/blocks/menu/index.tsx @@ -50,7 +50,7 @@ import { useHistory } from 'react-router-dom'; import cls from 'classnames'; import ReactDOM from 'react-dom'; import { useMount } from 'ahooks'; -import { useDesignable, SchemaRenderer, SchemaBlock } from '../'; +import { useDesignable, SchemaRenderer } from '../'; import { Router } from "react-router"; import { useLifecycle } from 'beautiful-react-hooks'; @@ -130,9 +130,11 @@ export const Menu: MenuType = observer((props) => { if (name.endsWith('-add-new')) { return; } + console.log('diff', name) const current = diff.properties[name]; selected.addProperty(current.name, current.toJSON()); }); + console.log({selected }) refresh(); }} schema={{ diff --git a/packages/client/src/blocks/password/index.md b/packages/client/src/blocks/password/index.md index 5d3a23d1b..dd80d4c0b 100644 --- a/packages/client/src/blocks/password/index.md +++ b/packages/client/src/blocks/password/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Password - 密码 @@ -17,7 +17,7 @@ group: ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -48,7 +48,7 @@ const schema = { export default () => { return ( - + ); }; ``` \ No newline at end of file diff --git a/packages/client/src/blocks/radio/index.md b/packages/client/src/blocks/radio/index.md index 7a4b57513..41c9dcf28 100644 --- a/packages/client/src/blocks/radio/index.md +++ b/packages/client/src/blocks/radio/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Radio - 单选框 @@ -20,7 +20,7 @@ group: * title: 单选框 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const options = [ { @@ -66,7 +66,7 @@ const schema = { export default () => { return ( - + ); }; ``` diff --git a/packages/client/src/blocks/radio/index.tsx b/packages/client/src/blocks/radio/index.tsx index f408245d3..44c1a972c 100644 --- a/packages/client/src/blocks/radio/index.tsx +++ b/packages/client/src/blocks/radio/index.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { connect, mapProps, mapReadPretty, SchemaOptionsContext, useField } from '@formily/react' import { Radio as AntdRadio, Tag } from 'antd' import { RadioProps, RadioGroupProps } from 'antd/lib/radio' -import uniq from 'lodash/uniq'; type ComposedRadio = React.FC & { Group?: React.FC diff --git a/packages/client/src/blocks/select/index.md b/packages/client/src/blocks/select/index.md index d0ebdae74..f7072dc00 100644 --- a/packages/client/src/blocks/select/index.md +++ b/packages/client/src/blocks/select/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Select - 选择器 @@ -15,7 +15,7 @@ group: ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const options = [ { @@ -65,7 +65,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -74,7 +74,7 @@ export default () => { ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const options = [ { @@ -129,7 +129,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -138,7 +138,7 @@ export default () => { ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const dataSource = [ { @@ -195,7 +195,7 @@ const schema = { export default () => { return ( - + ); }; ``` @@ -204,7 +204,7 @@ export default () => { ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const dataSource = [ { @@ -267,7 +267,7 @@ const schema = { export default () => { return ( - + ); }; ``` \ No newline at end of file diff --git a/packages/client/src/blocks/table/index.md b/packages/client/src/blocks/table/index.md index 7c382d6e5..d211c08aa 100644 --- a/packages/client/src/blocks/table/index.md +++ b/packages/client/src/blocks/table/index.md @@ -5,15 +5,15 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Table - 表格 ```tsx import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; import { uid } from '@formily/shared'; const schema = { @@ -103,7 +103,7 @@ const schema = { export default () => { return ( - + ); }; ``` \ No newline at end of file diff --git a/packages/client/src/blocks/tabs/index.md b/packages/client/src/blocks/tabs/index.md index c34ae3f10..7675cc6bc 100644 --- a/packages/client/src/blocks/tabs/index.md +++ b/packages/client/src/blocks/tabs/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Tabs - 标签页 @@ -20,7 +20,7 @@ group: * title: 基本使用 */ import React from 'react'; -import { SchemaBlock } from '../'; +import { SchemaRenderer } from '../'; const schema = { type: 'object', @@ -68,7 +68,7 @@ const schema = { export default () => { return ( - + ); }; ``` diff --git a/packages/client/src/blocks/time-picker/index.md b/packages/client/src/blocks/time-picker/index.md index 0b2d4a167..33f7fb112 100644 --- a/packages/client/src/blocks/time-picker/index.md +++ b/packages/client/src/blocks/time-picker/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # TimePicker - 时间选择器 diff --git a/packages/client/src/blocks/upload/index.md b/packages/client/src/blocks/upload/index.md index 3b87560c3..03131eb13 100644 --- a/packages/client/src/blocks/upload/index.md +++ b/packages/client/src/blocks/upload/index.md @@ -5,8 +5,8 @@ nav: path: /client group: order: 1 - title: 区块 - Blocks - path: /client/blocks + title: Components - 组件 + path: /client/components --- # Upload - 上传 diff --git a/packages/client/src/demos/api/blocks-getSchema/item2.ts b/packages/client/src/demos/api/blocks-getSchema/item2.ts index 10fd89aae..8766c0eac 100644 --- a/packages/client/src/demos/api/blocks-getSchema/item2.ts +++ b/packages/client/src/demos/api/blocks-getSchema/item2.ts @@ -1,3 +1,4 @@ +import { ISchema } from '@formily/json-schema'; import { uid } from '@formily/shared'; export default { @@ -5,6 +6,7 @@ export default { properties: { [`g_${uid()}`]: { type: 'void', + 'x-decorator': 'Card', 'x-component': 'Grid', properties: { [`gr_${uid()}`]: { @@ -35,4 +37,4 @@ export default { }, }, }, -} +} as ISchema; diff --git a/packages/client/src/demos/api/blocks-getSchema/item3.ts b/packages/client/src/demos/api/blocks-getSchema/item3.ts index f815b08e8..4758eeb9a 100644 --- a/packages/client/src/demos/api/blocks-getSchema/item3.ts +++ b/packages/client/src/demos/api/blocks-getSchema/item3.ts @@ -1,12 +1,13 @@ -export default { +import { uid } from '@formily/shared'; + +const schema = { type: 'void', - name: 'item3', + name: `form_${uid()}`, 'x-decorator': 'Card', 'x-component': 'Form', properties: { grid: { type: 'void', - title: 'aa', 'x-component': 'Grid', properties: { row1: { @@ -26,6 +27,7 @@ export default { 'x-component-props': { title: 'block11', }, + 'x-designable-bar': 'FormItem.DesignableBar', properties: { field1: { type: 'string', @@ -52,6 +54,7 @@ export default { 'x-component-props': { title: 'block21', }, + 'x-designable-bar': 'FormItem.DesignableBar', properties: { field2: { type: 'string', @@ -83,6 +86,7 @@ export default { 'x-component-props': { title: 'block211', }, + 'x-designable-bar': 'FormItem.DesignableBar', properties: { field3: { type: 'string', @@ -109,6 +113,7 @@ export default { 'x-component-props': { title: 'block221', }, + 'x-designable-bar': 'FormItem.DesignableBar', properties: { field4: { type: 'string', @@ -158,6 +163,31 @@ export default { }, }, }, + [`gr_${uid()}`]: { + type: 'void', + 'x-component': 'Grid.Row', + properties: { + [`gc_${uid()}`]: { + type: 'void', + 'x-component': 'Grid.Col', + 'x-component-props': { + size: 1, + }, + properties: { + [`gb_${uid()}`]: { + type: 'void', + 'x-component': 'Grid.Block', + properties: { + [`gbn_${uid()}`]: { + type: 'void', + 'x-component': 'AddNew.FormItem', + }, + }, + }, + }, + }, + }, + }, }, }, actions: { @@ -193,4 +223,6 @@ export default { }, }, }, -} \ No newline at end of file +}; + +export default schema; diff --git a/packages/client/src/templates/admin-layout/index.tsx b/packages/client/src/templates/admin-layout/index.tsx index 6c9ce918e..164e7fa0a 100644 --- a/packages/client/src/templates/admin-layout/index.tsx +++ b/packages/client/src/templates/admin-layout/index.tsx @@ -22,12 +22,8 @@ import { refreshGlobalAction, RouteComponentContext, } from '../../'; -import { SchemaBlock, SchemaRenderer } from '../../blocks'; +import { SchemaRenderer } from '../../blocks'; import { useRequest } from 'ahooks'; -import cloneDeep from 'lodash/cloneDeep'; -import { Schema } from '@formily/react'; -import { DesignableContext } from '../../blocks/SchemaField'; -import { uid } from '@formily/shared'; import { DatabaseOutlined, PlusOutlined, @@ -154,7 +150,7 @@ function Database() { // bodyStyle={{ padding: 0 }} // footer={null} > - + setVisible(true)} diff --git a/packages/client/src/templates/default-page/index.tsx b/packages/client/src/templates/default-page/index.tsx index fcfd6355c..bbab8cb67 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 { SchemaBlock } from '../../blocks'; +import { SchemaRenderer } from '../../blocks'; export function DefaultPage({ route }) { const { data = {}, loading } = useRequest( @@ -17,7 +17,7 @@ export function DefaultPage({ route }) { } return (
- +
); } diff --git a/yarn.lock b/yarn.lock index 50d2ad25f..166c22c6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2872,6 +2872,22 @@ semver "^7.3.4" tar "^6.1.0" +"@monaco-editor/loader@^1.1.1": + version "1.1.1" + resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.1.1.tgz#37db648c81a86946d0febd391de00df9c28a0a3d" + integrity sha512-mkT4r4xDjIyOG9o9M6rJDSzEIeonwF80sYErxEvAAL4LncFVdcbNli8Qv6NDqF6nyv6sunuKkDzo4iFjxPL+uQ== + dependencies: + state-local "^1.0.6" + +"@monaco-editor/react@^4.2.1": + version "4.2.1" + resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.2.1.tgz#75cb6e85e3640e05887a14005c370e46bd71256b" + integrity sha512-yN8qVY0PyFIbqPjfrZ5TbR/wrcfeiwoys8+0QkmyfiOzG74vXxSBOPIUxk7Ly+qCj7qWHPq1uDJskzFGaIqaPA== + dependencies: + "@monaco-editor/loader" "^1.1.1" + prop-types "^15.7.2" + state-local "^1.0.7" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -6228,6 +6244,11 @@ constants-browserify@^1.0.0: resolved "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U= +constate@^3.3.0: + version "3.3.0" + resolved "https://registry.npmjs.org/constate/-/constate-3.3.0.tgz#3961f552ab1bec2a9d0d56c9bc1d6bcde407357b" + integrity sha512-mRjWH2J4D3Rq6XAuEhoGUkBWrBLUNbiYr/Rp4M/MEEp+LN0vctQS3EAw/6bxlnDy59T+UrAEU9Tg136Dfp6ytg== + content-disposition@~0.5.2: version "0.5.3" resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd" @@ -17352,6 +17373,11 @@ stack-utils@^2.0.2: dependencies: escape-string-regexp "^2.0.0" +state-local@^1.0.6, state-local@^1.0.7: + version "1.0.7" + resolved "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5" + integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w== + static-extend@^0.1.1: version "0.1.2" resolved "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"