designer field
This commit is contained in:
chenos
parent
b7ff2e0673
commit
60862736ea
@ -11,3 +11,14 @@ group:
|
||||
|
||||
# Designer - 字段设计器
|
||||
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import Designer from './'
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<Designer/>
|
||||
)
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,527 @@
|
||||
import React, { useMemo, useContext, createContext, useState } from 'react';
|
||||
import { Form, FormItem, FormLayout, Input } from '@formily/antd';
|
||||
import {
|
||||
observer,
|
||||
FormProvider,
|
||||
FormConsumer,
|
||||
createSchemaField,
|
||||
useField,
|
||||
useFieldSchema,
|
||||
useForm,
|
||||
Schema,
|
||||
SchemaExpressionScopeContext,
|
||||
SchemaKey,
|
||||
connect,
|
||||
mapReadPretty,
|
||||
mapProps,
|
||||
} from '@formily/react';
|
||||
import { createForm } from '@formily/core';
|
||||
import { Row, Col, Button } from 'antd';
|
||||
import { uid } from '@formily/shared';
|
||||
import { useDrop, useDrag } from 'ahooks';
|
||||
import './style.less';
|
||||
import { DeleteOutlined, MenuOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const SchemaEditorContext = createContext<Schema>(new Schema({}));
|
||||
const SchemaRefreshContext = createContext(null);
|
||||
|
||||
function DropRow() {
|
||||
const { schema: rowSchema, refresh } = useSchema();
|
||||
const schema = rowSchema.parent;
|
||||
const context = useContext(SchemaEditorContext);
|
||||
function getSchema(names: any[]) {
|
||||
const paths = [...names];
|
||||
let schema: Schema = context;
|
||||
while (paths.length) {
|
||||
schema = schema.properties[paths.shift()];
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
const [props, { isHovering }] = useDrop({
|
||||
onDom: (content, e) => {
|
||||
console.log('paths', content);
|
||||
const source = getSchema(content.paths);
|
||||
// console.log({ paths: content.paths, source });
|
||||
// schema.addProperty(source.name, source.toJSON());
|
||||
// source.parent.removeProperty(source.name);
|
||||
// refresh();
|
||||
|
||||
const rowName = `row_${uid()}`;
|
||||
const colName = `col_${uid()}`;
|
||||
const fieldName = `field_${uid()}`;
|
||||
schema.addProperty(rowName, {
|
||||
type: 'void',
|
||||
name: rowName,
|
||||
'x-component': 'GridRow',
|
||||
properties: {
|
||||
[colName]: {
|
||||
type: 'void',
|
||||
name: colName,
|
||||
'x-component': 'GridColumn',
|
||||
'x-component-props': {
|
||||
span: 24,
|
||||
},
|
||||
properties: {
|
||||
[source.name]: source.toJSON(),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
refresh();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={isHovering ? 'drop-row active' : 'drop-row'} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DropRowColumn() {
|
||||
const form = useForm();
|
||||
const { schema, refresh } = useSchema();
|
||||
const context = useContext(SchemaEditorContext);
|
||||
function getSchema(names: any[]) {
|
||||
const paths = [...names];
|
||||
let schema: Schema = context;
|
||||
while (paths.length) {
|
||||
schema = schema.properties[paths.shift()];
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
const [props, { isHovering }] = useDrop({
|
||||
onDom: (content, e) => {
|
||||
// console.log('paths', content);
|
||||
const source = getSchema(content.paths);
|
||||
const col = `col${uid()}`;
|
||||
const blockName = `block${uid()}`;
|
||||
const inputName = `input${uid()}`;
|
||||
schema.addProperty(col, {
|
||||
type: 'void',
|
||||
name: col,
|
||||
'x-component': 'GridColumn',
|
||||
'x-component-props': {
|
||||
labelCol: 6,
|
||||
wrapperCol: 10,
|
||||
},
|
||||
properties: {
|
||||
[blockName]: source.toJSON(),
|
||||
},
|
||||
});
|
||||
const len = Object.keys(schema.properties).length;
|
||||
const properties = schema.mapProperties((p) => p);
|
||||
|
||||
// schema.setProperties(newProperties);
|
||||
// console.log(properties);
|
||||
refresh();
|
||||
|
||||
properties.forEach((p) => {
|
||||
form.setFieldState(getFullPaths(p).join('.'), (state) => {
|
||||
state.componentProps = {
|
||||
span: 24 / len,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// console.log({ paths: content.paths, source });
|
||||
// schema.addProperty(source.name, source.toJSON());
|
||||
// source.parent.removeProperty(source.name);
|
||||
// refresh();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={isHovering ? `drop-column last active` : `drop-column last`}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropColumn() {
|
||||
const form = useForm();
|
||||
const { schema: columnSchema, refresh } = useSchema();
|
||||
const schema = columnSchema.parent;
|
||||
const context = useContext(SchemaEditorContext);
|
||||
function getSchema(names: any[]) {
|
||||
const paths = [...names];
|
||||
let s: Schema = context;
|
||||
while (paths.length) {
|
||||
s = s.properties[paths.shift()];
|
||||
}
|
||||
return s;
|
||||
}
|
||||
const [props, { isHovering }] = useDrop({
|
||||
onDom: (content, e) => {
|
||||
// console.log('paths', content);
|
||||
const source = getSchema(content.paths);
|
||||
const col = `col${uid()}`;
|
||||
const blockName = `block${uid()}`;
|
||||
const inputName = `input${uid()}`;
|
||||
schema.addProperty(col, {
|
||||
type: 'void',
|
||||
name: col,
|
||||
'x-component': 'GridColumn',
|
||||
'x-component-props': {
|
||||
labelCol: 6,
|
||||
wrapperCol: 10,
|
||||
},
|
||||
properties: {
|
||||
[blockName]: source.toJSON(),
|
||||
},
|
||||
});
|
||||
const len = Object.keys(schema.properties).length;
|
||||
const properties = schema.mapProperties((p) => p);
|
||||
|
||||
// schema.setProperties(newProperties);
|
||||
// console.log(properties);
|
||||
refresh();
|
||||
|
||||
properties.forEach((p) => {
|
||||
form.setFieldState(getFullPaths(p).join('.'), (state) => {
|
||||
state.componentProps = {
|
||||
span: 24 / len,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
// console.log({ paths: content.paths, source });
|
||||
// schema.addProperty(source.name, source.toJSON());
|
||||
// source.parent.removeProperty(source.name);
|
||||
// refresh();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={isHovering ? `drop-column active` : `drop-column`}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DropBlock() {
|
||||
const { schema, refresh } = useSchema();
|
||||
const context = useContext(SchemaEditorContext);
|
||||
function getSchema(names: any[]) {
|
||||
const paths = [...names];
|
||||
let s: Schema = context;
|
||||
while (paths.length) {
|
||||
s = s.properties[paths.shift()];
|
||||
}
|
||||
return s;
|
||||
}
|
||||
const [props, { isHovering }] = useDrop({
|
||||
onDom: (content, e) => {
|
||||
const source = getSchema(content.paths);
|
||||
console.log({ paths: content.paths, source });
|
||||
schema.parent.addProperty(source.name, source.toJSON());
|
||||
source.parent.removeProperty(source.name);
|
||||
refresh();
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={isHovering ? 'drop-block active' : 'drop-block'}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export const Grid = ({ children }) => {
|
||||
const { schema, refresh } = useSchema();
|
||||
return (
|
||||
<div>
|
||||
{children}
|
||||
<Button
|
||||
block
|
||||
type={'dashed'}
|
||||
onClick={() => {
|
||||
const rowName = `row_${uid()}`;
|
||||
const colName = `col_${uid()}`;
|
||||
const blockName = `block_${uid()}`;
|
||||
const fieldName = `field_${uid()}`;
|
||||
schema.addProperty(rowName, {
|
||||
type: 'void',
|
||||
name: rowName,
|
||||
'x-component': 'GridRow',
|
||||
properties: {
|
||||
[colName]: {
|
||||
type: 'void',
|
||||
name: colName,
|
||||
'x-component': 'GridColumn',
|
||||
'x-component-props': {
|
||||
span: 24,
|
||||
},
|
||||
properties: {
|
||||
[blockName]: {
|
||||
type: 'void',
|
||||
'x-component': 'GridBlock',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': false,
|
||||
properties: {
|
||||
[fieldName]: {
|
||||
type: 'string',
|
||||
name: fieldName,
|
||||
title: `输入框${fieldName}`,
|
||||
required: true,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
refresh();
|
||||
}}
|
||||
>
|
||||
+ 新增行
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const GridRow = (props) => {
|
||||
console.log('GridRow', props);
|
||||
const { children } = props;
|
||||
const form = useForm();
|
||||
const { schema, refresh } = useSchema();
|
||||
return (
|
||||
<div className={'grid-row'} style={{ position: 'relative' }}>
|
||||
<Row gutter={24}>{children}</Row>
|
||||
<DropRowColumn />
|
||||
<DropRow />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getFullPaths = (schema: Schema) => {
|
||||
if (!schema) {
|
||||
return [];
|
||||
}
|
||||
const paths = [schema.name];
|
||||
if (schema.parent.name) {
|
||||
paths.unshift(...getFullPaths(schema.parent));
|
||||
}
|
||||
return paths;
|
||||
};
|
||||
|
||||
function useSchema() {
|
||||
const context = useContext(SchemaEditorContext);
|
||||
const refresh = useContext(SchemaRefreshContext);
|
||||
const fieldSchema = useFieldSchema();
|
||||
const paths = getFullPaths(fieldSchema);
|
||||
console.log({ fieldSchema, paths, context });
|
||||
let schema: Schema = context;
|
||||
const names = [...paths];
|
||||
while (names.length) {
|
||||
schema = schema.properties[names.shift()];
|
||||
}
|
||||
return { schema, fieldSchema, refresh };
|
||||
}
|
||||
|
||||
export const GridColumn = (props) => {
|
||||
const { children } = props;
|
||||
const { schema, refresh } = useSchema();
|
||||
console.log('GridColumn', { props });
|
||||
return (
|
||||
<Col {...props}>
|
||||
<DropColumn />
|
||||
{children}
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
function GridBlock({ children, ...props }) {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { schema, refresh } = useSchema();
|
||||
const field = useField();
|
||||
console.log('x-read-pretty', field.readPretty);
|
||||
const getDragProps = useDrag({
|
||||
onDragStart: (data, e) => {
|
||||
// e.dataTransfer
|
||||
// setDragging(data);
|
||||
},
|
||||
onDragEnd: (data) => {
|
||||
// setDragging(null);
|
||||
},
|
||||
});
|
||||
const paths = getFullPaths(schema);
|
||||
console.log({ props, paths, schema, fieldSchema });
|
||||
return (
|
||||
<div className={'grid-block'} {...getDragProps({ paths })}>
|
||||
<div className={'grid-block-actions'}>
|
||||
<DeleteOutlined
|
||||
onClick={() => {
|
||||
schema.parent.removeProperty(schema.name);
|
||||
refresh();
|
||||
}}
|
||||
/>
|
||||
<MenuOutlined />
|
||||
</div>
|
||||
{children}
|
||||
<DropBlock />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function G({ children }) {
|
||||
return <div>{children}</div>;
|
||||
}
|
||||
|
||||
export const SchemaField = createSchemaField({
|
||||
components: {
|
||||
FormLayout,
|
||||
FormItem,
|
||||
Input,
|
||||
Grid,
|
||||
GridRow,
|
||||
GridColumn,
|
||||
GridBlock: (props) => {
|
||||
const field = useField();
|
||||
return React.createElement(field.readPretty ? G : GridBlock, props);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const schema = new Schema({
|
||||
type: 'object',
|
||||
properties: {
|
||||
layout: {
|
||||
type: 'void',
|
||||
'x-component': 'FormLayout',
|
||||
'x-component-props': {
|
||||
layout: 'vertical',
|
||||
// labelCol: 6,
|
||||
// wrapperCol: 10,
|
||||
},
|
||||
properties: {
|
||||
grid1: {
|
||||
type: 'void',
|
||||
'x-component': 'Grid',
|
||||
'x-component-props': {},
|
||||
properties: {
|
||||
row1: {
|
||||
type: 'void',
|
||||
'x-component': 'GridRow',
|
||||
'x-component-props': {
|
||||
labelCol: 6,
|
||||
wrapperCol: 10,
|
||||
},
|
||||
properties: {
|
||||
col1: {
|
||||
type: 'void',
|
||||
'x-component': 'GridColumn',
|
||||
'x-read-pretty': true,
|
||||
'x-component-props': {
|
||||
labelCol: 6,
|
||||
wrapperCol: 10,
|
||||
span: 12,
|
||||
},
|
||||
properties: {
|
||||
block1: {
|
||||
type: 'void',
|
||||
'x-component': 'GridBlock',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': false,
|
||||
properties: {
|
||||
input1: {
|
||||
type: 'string',
|
||||
title: '输入框1',
|
||||
required: true,
|
||||
'x-read-pretty': false,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
block2: {
|
||||
type: 'void',
|
||||
'x-component': 'GridBlock',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': false,
|
||||
properties: {
|
||||
input2: {
|
||||
type: 'string',
|
||||
title: '输入框2',
|
||||
required: true,
|
||||
'x-read-pretty': false,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
col2: {
|
||||
type: 'void',
|
||||
'x-component': 'GridColumn',
|
||||
'x-component-props': {
|
||||
span: 12,
|
||||
labelCol: 6,
|
||||
wrapperCol: 10,
|
||||
},
|
||||
properties: {
|
||||
block3: {
|
||||
type: 'void',
|
||||
'x-component': 'GridBlock',
|
||||
'x-component-props': {},
|
||||
'x-read-pretty': false,
|
||||
properties: {
|
||||
input3: {
|
||||
type: 'string',
|
||||
title: '输入框3',
|
||||
required: true,
|
||||
'x-read-pretty': false,
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Input',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function SchemaProvider(props) {
|
||||
const { schema } = props;
|
||||
const [, forceUpdate] = useState(0);
|
||||
return (
|
||||
<SchemaRefreshContext.Provider
|
||||
value={() => {
|
||||
forceUpdate(Math.random());
|
||||
}}
|
||||
>
|
||||
<SchemaEditorContext.Provider value={schema}>
|
||||
<SchemaField schema={schema}></SchemaField>
|
||||
</SchemaEditorContext.Provider>
|
||||
</SchemaRefreshContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function Designer() {
|
||||
const form = useMemo(() => createForm({}), []);
|
||||
const [, forceUpdate] = useState(0);
|
||||
return (
|
||||
<div>
|
||||
<FormProvider form={form}>
|
||||
<SchemaProvider schema={schema} />
|
||||
<FormConsumer>
|
||||
{(form) => {
|
||||
return <div>{JSON.stringify(form.values, null, 2)}</div>;
|
||||
}}
|
||||
</FormConsumer>
|
||||
</FormProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Designer;
|
||||
57
packages/client/src/fields/designer/style.less
Normal file
57
packages/client/src/fields/designer/style.less
Normal file
@ -0,0 +1,57 @@
|
||||
.drop-column {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
// border: 1px dashed rgb(232, 232, 232);
|
||||
&.active {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
&.last {
|
||||
left: auto;
|
||||
right: -24px;
|
||||
}
|
||||
}
|
||||
.drop-block {
|
||||
height: 12px;
|
||||
// background: #e6f7ff;
|
||||
// pointer-events: none;
|
||||
&.active {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
}
|
||||
.ant-formily-item + .drop-block {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-block {
|
||||
position: relative;
|
||||
padding-bottom: 1px;
|
||||
.grid-block-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
// display: none;
|
||||
}
|
||||
&:hover {
|
||||
.grid-block-actions {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drop-row {
|
||||
height: 12px;
|
||||
// background: #e6f7ff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
&.active {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user