ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lots of updates

Browse Source
This commit is contained in:
chenos 2021-07-04 00:19:26 +08:00
parent 699726d5bb
commit 5e181c3ade
43 changed files with 333 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/package.json
View File

@ -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",

11
packages/client/src/blocks/DesignableSchemaField/index.tsx
View File

@ -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 (
<>
<CodeOutlined onClick={() => setVisible(true)} />
<Modal width={'80%'} onCancel={() => setVisible(false)} visible={visible}>
<Modal width={'50%'} onCancel={() => setVisible(false)} visible={visible}>
<Editor
height="60vh"
defaultLanguage="json"
@ -347,6 +349,11 @@ const CodePreview = ({ schema }) => {
);
};
export const SchemaField = createSchemaField({
scope,
components,
});
export const DesignableSchemaField = createDesignableSchemaField({
scope,
components,

137
packages/client/src/blocks/SchemaField.tsx
View File

@ -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) => <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<Schema>(new Schema({}));
export const RefreshDesignableSchemaContext = createContext(null);
export function DesignableProvider(props) {
const { schema } = props;
const [, refresh] = useState(0);
return (
<RefreshDesignableSchemaContext.Provider
value={() => {
refresh(Math.random());
}}
>
<DesignableSchemaContext.Provider value={schema}>
{props.children(schema)}
</DesignableSchemaContext.Provider>
{/* <pre>{JSON.stringify(schema.toJSON(), null, 2)}</pre> */}
</RefreshDesignableSchemaContext.Provider>
);
}
export const DesignableContext =
createContext<{ schema: Schema; refresh: any }>(null);
export function DesignableSchemaField(props: { schema?: ISchema }) {
return (
<DesignableProvider schema={new Schema(props.schema)}>
{(s) => <SchemaField schema={s} />}
</DesignableProvider>
);
}

4
packages/client/src/blocks/action/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# Action - 操作

12
packages/client/src/blocks/add-new/index.md
View File

@ -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 <SchemaBlock schema={schema} />
return <SchemaRenderer schema={schema} />
}
```
@ -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 <SchemaBlock schema={schema} />
return <SchemaRenderer schema={schema} />
}
```

82
packages/client/src/blocks/add-new/index.tsx
View File

@ -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 (
<Dropdown
overlay={
<Menu>
<Menu.Item>新建 Markdown</Menu.Item>
<Menu.Item
onClick={() => {
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
</Menu.Item>
</Menu>
}
>
@ -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 (
<Dropdown
overlay={
<Menu>
<Menu.Item>字段 1</Menu.Item>
<Menu.Item
onClick={() => {
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
</Menu.Item>
</Menu>
}
>

4
packages/client/src/blocks/cascader/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# Cascader - 级联选择

4
packages/client/src/blocks/checkbox/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# Checkbox - 多选框

4
packages/client/src/blocks/color-select/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# ColorSelect - 颜色选择器

4
packages/client/src/blocks/database-field/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# DatabaseField - 数据表字段

4
packages/client/src/blocks/date-picker/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# DatePicker - 日期选择器

4
packages/client/src/blocks/drawer-select/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# DrawerSelect - 抽屉选择器

4
packages/client/src/blocks/filter/FilterItem.tsx
View File

@ -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;
});
},

4
packages/client/src/blocks/filter/index.md
View File

@ -5,6 +5,6 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---

7
packages/client/src/blocks/form-item/index.tsx
View File

@ -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 = () => {
<Menu>
<Menu.Item
onClick={(e) => {
field.title = uid();
const title = uid();
schema.title = title;
field.title = title;
setVisible(false);
refresh();
}}
>
点击修改按钮文案

53
packages/client/src/blocks/form/ActionBar.tsx
View File

@ -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 (
<>
<Menu.Item
onClick={() => {
addBlock(
{},
{
insertBefore: true,
},
);
setActive(false);
}}
icon={<ArrowUpOutlined />}
>
在上方插入区块
</Menu.Item>
<Menu.Item
onClick={() => {
addBlock();
setActive(false);
}}
icon={<ArrowDownOutlined />}
>
在下方插入区块
</Menu.Item>
<Menu.Divider />
<Menu.Item
onClick={() => {
removeBlock();
setActive(false);
}}
icon={<DeleteOutlined />}
>
删除区块
</Menu.Item>
</>
);
};

21
packages/client/src/blocks/form/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

32
packages/client/src/blocks/form/index.tsx
View File

@ -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 <SchemaRenderer onRefresh={(subSchema: Schema) => {
designableSchema.properties = subSchema.properties;
refresh();
}} schema={schema.toJSON()} onlyRenderProperties/>
return (
<FormProvider form={form}>
<DesignableSchemaField
schema={{
type: 'object',
properties: schema.properties,
}}
/>
</FormProvider>
);
// return (
// <FormProvider form={form}>
// <DesignableSchemaField
// schema={{
// type: 'object',
// properties: {
// ...schema,
// },
// }}
// />
// </FormProvider>
// );
};
Form.DesignableBar = DesignableBar;

13
packages/client/src/blocks/grid/demos/demo1.tsx
View File

@ -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()}`]: {

24
packages/client/src/blocks/grid/hooks.tsx
View File

@ -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;

2
packages/client/src/blocks/grid/index.md
View File

@ -6,7 +6,7 @@ nav:
group:
order: 2
title: Blocks
path: /client/blocks
path: /client/components
---
# Grid - 栅格

6
packages/client/src/blocks/grid/index.tsx
View File

@ -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 (
<ColumnSizeContext.Provider value={len}>
<ColDivider
@ -183,7 +181,6 @@ Grid.Row = observer((props) => {
},
});
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) => {

24
packages/client/src/blocks/grid/style.less
View File

@ -5,7 +5,19 @@
margin: 0px -24px;
}
.nb-grid {
// .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;
@ -14,6 +26,13 @@
}
}
}
}
}
body.dragging {
.designable-bar {
display: none !important;
}
}
.nb-grid.dragging {
@ -35,9 +54,6 @@
background: #e6f7ff;
}
}
.designable-bar {
display: none !important;
}
.nb-grid-block {
position: relative;
&.hover {

8
packages/client/src/blocks/icon-picker/index.md
View File

@ -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 (
<div>
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
</div>
);
};

39
packages/client/src/blocks/index.tsx
View File

@ -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 (
<FormProvider form={form}>
{designable ? (
<DesignableSchemaField schema={s} />
) : (
<SchemaField schema={s} />
)}
</FormProvider>
);
};
export * from './DesignableSchemaField';

12
packages/client/src/blocks/input-number/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

24
packages/client/src/blocks/input/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

8
packages/client/src/blocks/markdown/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

4
packages/client/src/blocks/menu/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# Menu - 菜单

4
packages/client/src/blocks/menu/index.tsx
View File

@ -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={{

8
packages/client/src/blocks/password/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

8
packages/client/src/blocks/radio/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

1
packages/client/src/blocks/radio/index.tsx
View File

@ -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<RadioProps> & {
Group?: React.FC<RadioGroupProps>

20
packages/client/src/blocks/select/index.md
View File

@ -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 (
<SchemaBlock schema={schema}/>
<SchemaRenderer schema={schema}/>
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```
@ -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 (
<SchemaBlock schema={schema}/>
<SchemaRenderer schema={schema}/>
);
};
```
@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

8
packages/client/src/blocks/table/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

8
packages/client/src/blocks/tabs/index.md
View File

@ -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 (
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
);
};
```

4
packages/client/src/blocks/time-picker/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# TimePicker - 时间选择器

4
packages/client/src/blocks/upload/index.md
View File

@ -5,8 +5,8 @@ nav:
path: /client
group:
order: 1
title: 区块 - Blocks
path: /client/blocks
title: Components - 组件
path: /client/components
---
# Upload - 上传

4
packages/client/src/demos/api/blocks-getSchema/item2.ts
View File

@ -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;

40
packages/client/src/demos/api/blocks-getSchema/item3.ts
View File

@ -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 {
},
},
},
}
};
export default schema;

8
packages/client/src/templates/admin-layout/index.tsx
View File

@ -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}
>
<SchemaBlock schema={schema} />
<SchemaRenderer schema={schema} />
</Modal>
<DatabaseOutlined
onClick={() => setVisible(true)}

4
packages/client/src/templates/default-page/index.tsx
View File

@ -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 (
<div>
<SchemaBlock schema={data} />
<SchemaRenderer schema={data} />
</div>
);
}

26
yarn.lock
View File

@ -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"