feat: improve code

This commit is contained in:
chenos 2021-08-17 10:30:11 +08:00
parent 20c839bfa9
commit b0056e1aa1
5 changed files with 29 additions and 38 deletions

View File

@ -38,7 +38,7 @@ export const SiteTitle = () => {
{!loading && data?.logo?.url && ( {!loading && data?.logo?.url && (
<img className={'site-logo'} src={data?.logo?.url} /> <img className={'site-logo'} src={data?.logo?.url} />
)} )}
{!loading && !data.showLogoOnly && data.title && ( {!loading && !data?.showLogoOnly && data?.title && (
<div className={'site-title'}>{data.title}</div> <div className={'site-title'}>{data.title}</div>
)} )}
</div> </div>

View File

@ -62,6 +62,7 @@
color: #fff; color: #fff;
} }
} }
.site-info { .site-info {
display: flex; display: flex;
align-items: center; align-items: center;
@ -72,5 +73,6 @@
.site-title { .site-title {
color: #fff; color: #fff;
font-size: 20px; font-size: 20px;
padding-right: 8px;
} }
} }

View File

@ -34,8 +34,7 @@ const schema = {
'x-component': 'Cascader', 'x-component': 'Cascader',
'x-component-props': { 'x-component-props': {
changeOnSelect: true, changeOnSelect: true,
loadData: '{{ loadData }}', loadData: '{{ loadChinaRegionData }}',
useDataSource: '{{ useDataSource }}',
labelInValue: true, labelInValue: true,
maxLevel: 3, maxLevel: 3,
fieldNames: { fieldNames: {
@ -46,7 +45,7 @@ const schema = {
// changeOnSelect: true, // changeOnSelect: true,
}, },
'x-reactions': [ 'x-reactions': [
// '{{useAsyncDataSource(loadOptions)}}', '{{useAsyncDataSource(loadChinaRegions)}}',
{ {
target: 'read', target: 'read',
fulfill: { fulfill: {
@ -67,8 +66,7 @@ const schema = {
'x-component': 'Cascader', 'x-component': 'Cascader',
'x-component-props': { 'x-component-props': {
changeOnSelect: true, changeOnSelect: true,
loadData: '{{ loadData }}', loadData: '{{ loadChinaRegionData }}',
useDataSource: '{{ useDataSource }}',
labelInValue: true, labelInValue: true,
fieldNames: { fieldNames: {
label: 'name', label: 'name',
@ -80,32 +78,30 @@ const schema = {
}, },
}; };
const useDataSource = ({ onSuccess }) => { // disableAsyncDataSource
const field = useField<ArrayField>(); const loadChinaRegions = async (field) => {
const maxLevel = field.componentProps.maxLevel || 3; const maxLevel = field.componentProps.maxLevel || 3;
const resource = Resource.make('china_regions'); const resource = Resource.make('china_regions');
useRequest( const { data } = await resource.list({
() => perPage: -1,
resource.list({ filter: {
perPage: -1, level: 1,
filter: {
level: 1,
},
}),
{
formatResult: (data) =>
data?.data?.map((item) => {
if (maxLevel !== 1) {
item.isLeaf = false;
}
return item;
}),
onSuccess,
}, },
});
return (
data?.map((item) => {
if (maxLevel !== 1) {
item.isLeaf = false;
}
return item;
}) || []
); );
}; };
const loadData = (selectedOptions: CascaderOptionType[], field: ArrayField) => { const loadChinaRegionData = (
selectedOptions: CascaderOptionType[],
field: ArrayField,
) => {
const maxLevel = field.componentProps.maxLevel || 3; const maxLevel = field.componentProps.maxLevel || 3;
const targetOption = selectedOptions[selectedOptions.length - 1]; const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true; targetOption.loading = true;
@ -132,6 +128,6 @@ const loadData = (selectedOptions: CascaderOptionType[], field: ArrayField) => {
export default () => { export default () => {
return ( return (
<SchemaRenderer debug scope={{ useDataSource, loadData }} schema={schema} /> <SchemaRenderer debug scope={{ loadChinaRegions, loadChinaRegionData }} schema={schema} />
); );
}; };

View File

@ -28,11 +28,10 @@ export const Cascader = connect(
onChange, onChange,
loadData, loadData,
labelInValue, labelInValue,
useDataSource,
fieldNames = defaultFieldNames, fieldNames = defaultFieldNames,
...others ...others
} = props; } = props;
console.log('Cascader', props) console.log('Cascader', props);
// 兼容值为 object[] 的情况 // 兼容值为 object[] 的情况
const toValue = () => { const toValue = () => {
return toArr(value).map((item) => { return toArr(value).map((item) => {
@ -46,6 +45,7 @@ export const Cascader = connect(
const values = toArr(value); const values = toArr(value);
if (values.length !== labels.length) { if (values.length !== labels.length) {
labels = toValue(); labels = toValue();
selectedOptions = values;
} }
if (selectedOptions.length === 0) { if (selectedOptions.length === 0) {
selectedOptions = values; selectedOptions = values;
@ -73,14 +73,6 @@ export const Cascader = connect(
); );
}); });
}; };
// 这里没有用 x-reactions 是因为 readyPretty=true 时不需要
if (typeof useDataSource === 'function') {
useDataSource({
onSuccess: (data) => {
field.dataSource = data;
},
});
}
if (loadData) { if (loadData) {
Object.assign(others, { Object.assign(others, {
loadData: (selectedOptions: CascaderOptionType[]) => { loadData: (selectedOptions: CascaderOptionType[]) => {

View File

@ -28,6 +28,7 @@ export const chinaRegion: FieldOptions = {
children: 'children', children: 'children',
}, },
}, },
'x-reactions': ['{{useAsyncDataSource(loadChinaRegions)}}'],
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-designable-bar': 'Cascader.DesignableBar', 'x-designable-bar': 'Cascader.DesignableBar',
}, },