mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-03-19 18:20:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(widget): add componentType into the event widget's widgetOptions

Browse Source
This commit is contained in:
MrWindlike 2022-05-30 21:01:57 +08:00
parent 6a26e1a4e3
commit 7ca673572e
2 changed files with 117 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
packages/arco-lib/src/generated/types/Table.ts
View File

@ -3,30 +3,33 @@ import { StringUnion } from '../../sunmao-helper';
import { EventHandlerSpec } from '@sunmao-ui/runtime';
import { Category } from '../../constants/category';
const moduleSpec = Type.Object({
id: Type.String({
title: 'Module ID',
}),
type: Type.String({
title: 'Module Type',
}),
properties: Type.Record(Type.String(), Type.Any(), {
title: 'Module Properties',
category: 'Basic',
widget: 'core/v1/record',
}),
handlers: Type.Array(EventHandlerSpec, {
title: 'Events',
}),
}, {
title: 'Module Config',
conditions: [
{
key: 'type',
value: 'module'
}
]
})
const moduleSpec = Type.Object(
{
id: Type.String({
title: 'Module ID',
}),
type: Type.String({
title: 'Module Type',
}),
properties: Type.Record(Type.String(), Type.Any(), {
title: 'Module Properties',
category: 'Basic',
widget: 'core/v1/record',
}),
handlers: Type.Array(EventHandlerSpec, {
title: 'Events',
}),
},
{
title: 'Module Config',
conditions: [
{
key: 'type',
value: 'module',
},
],
}
);
export const ColumnSpec = Type.Object({
title: Type.String({
@ -69,45 +72,60 @@ export const ColumnSpec = Type.Object({
'If the cell content exceeds the length, whether it is automatically omitted and displays ...,After setting this property, the table-layout of the table will automatically become fixed.',
})
),
sorter: Type.Optional(Type.Boolean({
title: 'Enable Sort',
conditions: [
{
key: 'type',
value: 'text'
}
],
})),
filter: Type.Boolean({
title: 'Enable Filter',
}),
sortDirections: Type.Optional(Type.Array(StringUnion(['descend', 'ascend']), {
conditions: [
{
key: 'sorter',
value: true
}
],
widget: 'core/v1/expression'
})),
btnCfg: Type.Optional(
Type.Object({
text: Type.String({
title:'Text'
}),
handlers: Type.Array(EventHandlerSpec,{
title:'Events'
}),
}, {
title:'Button Config',
sorter: Type.Optional(
Type.Boolean({
title: 'Enable Sort',
conditions: [
{
key: 'type',
value: 'button'
}
]
value: 'text',
},
],
})
),
filter: Type.Boolean({
title: 'Enable Filter',
}),
sortDirections: Type.Optional(
Type.Array(StringUnion(['descend', 'ascend']), {
conditions: [
{
key: 'sorter',
value: true,
},
],
widget: 'core/v1/expression',
})
),
btnCfg: Type.Optional(
Type.Object(
{
text: Type.String({
title: 'Text',
}),
handlers: Type.Array(
{
...EventHandlerSpec,
widgetOptions: {
componentType: 'arco/v1/button',
},
},
{
title: 'Events',
}
),
},
{
title: 'Button Config',
conditions: [
{
key: 'type',
value: 'button',
},
],
}
)
),
module: Type.Optional(moduleSpec),
});
@ -116,14 +134,14 @@ export const TablePropsSpec = Type.Object({
title: 'Data',
category: Category.Data,
weight: 0,
widget: 'core/v1/expression'
widget: 'core/v1/expression',
}),
columns: Type.Array(ColumnSpec, {
title: 'Columns',
description: '',
category: Category.Columns,
widgetOptions: {
displayedKeys: ['title']
displayedKeys: ['title'],
},
weight: 0,
}),
@ -158,7 +176,7 @@ export const TablePropsSpec = Type.Object({
}),
},
{
title:'Pagination',
title: 'Pagination',
category: Category.Layout,
}
),
@ -186,5 +204,5 @@ export const TablePropsSpec = Type.Object({
loading: Type.Boolean({
title: 'Show Loading',
category: Category.Basic,
})
}),
});

56
packages/editor-sdk/src/components/Widgets/EventWidget.tsx
View File

@ -11,13 +11,16 @@ import { SpecWidget } from './SpecWidget';
import { observer } from 'mobx-react-lite';
import { CORE_VERSION, CoreWidgetName } from '@sunmao-ui/shared';
const EventWidgetOptions = Type.Object({});
const EventWidgetOptions = Type.Object({
componentType: Type.String(),
});
type EventWidgetOptionsType = Static<typeof EventWidgetOptions>;
export const EventWidget: React.FC<WidgetProps<EventWidgetOptionsType>> = observer(
props => {
const { value, path, level, component, spec, services, onChange } = props;
const { componentType } = spec.widgetOptions || {};
const { registry, editorStore, appModelManager } = services;
const { utilMethods } = registry;
const { components } = editorStore;
@ -48,7 +51,7 @@ export const EventWidget: React.FC<WidgetProps<EventWidgetOptionsType>> = observ
};
const eventTypes = useMemo(() => {
return registry.getComponentByType(component.type).spec.events;
return registry.getComponentByType(componentType || component.type).spec.events;
}, [component.type, registry]);
const hasParams = useMemo(
() => Object.keys(formik.values.method.parameters ?? {}).length,
@ -93,10 +96,16 @@ export const EventWidget: React.FC<WidgetProps<EventWidgetOptionsType>> = observ
return params;
}, [formik.values.method.name]);
const parametersPath = useMemo(()=> path.concat('method', 'parameters'), [path]);
const parametersSpec = useMemo(()=> mergeWidgetOptionsIntoSpec(paramsSpec, { onlySetValue: true }), [paramsSpec]);
const disabledPath = useMemo(()=> path.concat('disabled'), [path]);
const disabledSpec = useMemo(()=> Type.Boolean({ widgetOptions: { isShowAsideExpressionButton: true } }), []);
const parametersPath = useMemo(() => path.concat('method', 'parameters'), [path]);
const parametersSpec = useMemo(
() => mergeWidgetOptionsIntoSpec(paramsSpec, { onlySetValue: true }),
[paramsSpec]
);
const disabledPath = useMemo(() => path.concat('disabled'), [path]);
const disabledSpec = useMemo(
() => Type.Boolean({ widgetOptions: { isShowAsideExpressionButton: true } }),
[]
);
const updateMethods = useCallback(
(componentId: string) => {
@ -131,22 +140,31 @@ export const EventWidget: React.FC<WidgetProps<EventWidgetOptionsType>> = observ
}
}, [value, updateMethods]);
const onTargetComponentChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
updateMethods(e.target.value);
formik.handleChange(e);
formik.setFieldValue('method', { name: '', parameters: {} });
}, [updateMethods, formik]);
const onTargetComponentChange = useCallback(
(e: React.ChangeEvent<HTMLSelectElement>) => {
updateMethods(e.target.value);
formik.handleChange(e);
formik.setFieldValue('method', { name: '', parameters: {} });
},
[updateMethods, formik]
);
const onSubmit = useCallback(() => {
formik.submitForm();
}, [formik]);
const onParametersChange = useCallback(json => {
formik.setFieldValue('method.parameters', json);
formik.submitForm();
}, [formik]);
const onDisabledChange = useCallback(value => {
formik.setFieldValue('disabled', value);
formik.submitForm();
}, [formik]);
const onParametersChange = useCallback(
json => {
formik.setFieldValue('method.parameters', json);
formik.submitForm();
},
[formik]
);
const onDisabledChange = useCallback(
value => {
formik.setFieldValue('disabled', value);
formik.submitForm();
},
[formik]
);
const typeField = (
<FormControl>