feat: improve code

This commit is contained in:
chenos 2021-08-17 11:24:59 +08:00
parent b0056e1aa1
commit da418720aa
9 changed files with 43 additions and 39 deletions

View File

@ -79,6 +79,10 @@ interface DesignableContextProps {
export const useAsyncDataSource = (service: any) => (field: any) => { export const useAsyncDataSource = (service: any) => (field: any) => {
field.loading = true; field.loading = true;
const disableAsyncDataSource = field.componentProps.disableAsyncDataSource;
if (disableAsyncDataSource) {
return;
}
service(field).then( service(field).then(
action.bound((data: any) => { action.bound((data: any) => {
field.dataSource = data; field.dataSource = data;
@ -87,29 +91,23 @@ export const useAsyncDataSource = (service: any) => (field: any) => {
); );
}; };
export const useChinaRegionDataSource = ({ onSuccess }) => { export const loadChinaRegionDataSource = async (field) => {
const field = useField<ArrayField>();
const maxLevel = field.componentProps.maxLevel || 3; const maxLevel = field.componentProps.maxLevel || 3;
const resource = Resource.make('china_regions'); const resource = Resource.make('china_regions');
console.log('useChinaRegionDataSource'); const { data } = await resource.list({
useRequest( perPage: -1,
() => filter: {
resource.list({ level: 1,
perPage: -1,
filter: {
level: 1,
},
}),
{
formatResult: (data) =>
data?.data?.map((item) => {
if (maxLevel !== 1) {
item.isLeaf = false;
}
return item;
}),
onSuccess,
}, },
});
console.log('loadChinaRegions', data, field.value);
return (
data?.map((item) => {
if (maxLevel !== 1) {
item.isLeaf = false;
}
return item;
}) || []
); );
}; };
@ -147,7 +145,7 @@ export const SchemaField = createSchemaField({
useAsyncDataSource, useAsyncDataSource,
ChinaRegion: { ChinaRegion: {
loadData: loadChinaRegionData, loadData: loadChinaRegionData,
useDataSource: useChinaRegionDataSource, loadDataSource: loadChinaRegionDataSource,
}, },
}, },
components: { components: {

View File

@ -73,7 +73,7 @@ Chart.DesignableBar = observer((props) => {
setVisible(false); setVisible(false);
}} }}
> >
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item <Menu.Item
@ -87,7 +87,7 @@ Chart.DesignableBar = observer((props) => {
} }
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }

View File

@ -19,7 +19,6 @@ export const chinaRegion: FieldOptions = {
'x-component-props': { 'x-component-props': {
changeOnSelect: true, changeOnSelect: true,
loadData: '{{ ChinaRegion.loadData }}', loadData: '{{ ChinaRegion.loadData }}',
useDataSource: '{{ ChinaRegion.useDataSource }}',
labelInValue: true, labelInValue: true,
maxLevel: 3, maxLevel: 3,
fieldNames: { fieldNames: {
@ -28,7 +27,7 @@ export const chinaRegion: FieldOptions = {
children: 'children', children: 'children',
}, },
}, },
'x-reactions': ['{{useAsyncDataSource(loadChinaRegions)}}'], 'x-reactions': ['{{useAsyncDataSource(ChinaRegion.loadDataSource)}}'],
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-designable-bar': 'Cascader.DesignableBar', 'x-designable-bar': 'Cascader.DesignableBar',
}, },

View File

@ -0,0 +1,8 @@
.designable-info {
position: absolute;
font-size: 12px;
background: #1890ff;
color: #fff;
padding: 0 5px;
border-bottom-right-radius: 2px;
}

View File

@ -12,12 +12,7 @@ import {
useForm, useForm,
RecursionField, RecursionField,
} from '@formily/react'; } from '@formily/react';
import { import { useSchemaPath, SchemaField, useDesignable, removeSchema } from '../';
useSchemaPath,
SchemaField,
useDesignable,
removeSchema,
} from '../';
import get from 'lodash/get'; import get from 'lodash/get';
import { Button, Dropdown, Menu, Space } from 'antd'; import { Button, Dropdown, Menu, Space } from 'antd';
import { MenuOutlined, DragOutlined } from '@ant-design/icons'; import { MenuOutlined, DragOutlined } from '@ant-design/icons';
@ -31,17 +26,18 @@ import constate from 'constate';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { getSchemaPath } from '../../components/schema-renderer'; import { getSchemaPath } from '../../components/schema-renderer';
import { useCollection } from '../../constate';
export const DesignableBar = observer((props) => { export const DesignableBar = observer((props) => {
const field = useField(); const field = useField();
const { designable, schema, refresh, deepRemove } = useDesignable(); const { designable, schema, refresh, deepRemove } = useDesignable();
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const { dragRef } = useContext(DraggableBlockContext); const { dragRef } = useContext(DraggableBlockContext);
if (!designable) { const collectionName = field.componentProps.collectionName;
return null; const { collection } = useCollection({ collectionName });
}
return ( return (
<div className={cls('designable-bar', { active: visible })}> <div className={cls('designable-bar', { active: visible })}>
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
<span <span
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

View File

@ -2,6 +2,8 @@ import React from 'react';
import { ISchema as IFormilySchema, observer, Schema, useField } from '@formily/react'; import { ISchema as IFormilySchema, observer, Schema, useField } from '@formily/react';
import { extend } from 'umi-request'; import { extend } from 'umi-request';
import './designable-bar/style.less';
export type FormilyISchema = IFormilySchema export type FormilyISchema = IFormilySchema
export interface ISchema extends IFormilySchema { export interface ISchema extends IFormilySchema {

View File

@ -93,7 +93,7 @@ Input.DesignableBar = observer((props) => {
// } // }
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }

View File

@ -137,7 +137,7 @@ Markdown.Void.DesignableBar = observer((props) => {
setVisible(false); setVisible(false);
}} }}
> >
</Menu.Item> </Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item <Menu.Item
@ -151,7 +151,7 @@ Markdown.Void.DesignableBar = observer((props) => {
} }
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }
@ -206,7 +206,7 @@ Markdown.DesignableBar = observer((props) => {
} }
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }

View File

@ -1953,10 +1953,11 @@ Table.DesignableBar = observer((props) => {
const defaultPageSize = const defaultPageSize =
field?.componentProps?.pagination?.defaultPageSize || 10; field?.componentProps?.pagination?.defaultPageSize || 10;
const collectionName = field?.componentProps?.collectionName; const collectionName = field?.componentProps?.collectionName;
const { fields } = useCollection({ collectionName }); const { collection, fields } = useCollection({ collectionName });
console.log({ collectionName }); console.log({ collectionName });
return ( return (
<div className={cls('designable-bar', { active: visible })}> <div className={cls('designable-bar', { active: visible })}>
<div className={'designable-info'}>{collection?.title || collection?.name}</div>
<span <span
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();