Skip to content

Commit b0e9685

Browse files
xingmoluxingmolu
committed
fix: 🐛 修复数据源面板编辑报错问题
1 parent bd2aaff commit b0e9685

26 files changed

Lines changed: 131 additions & 811 deletions

‎packages/plugin-datasource-pane/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@alilc/lowcode-plugin-datasource-pane",
3-
"version": "1.0.0",
3+
"version": "1.0.1-beta.0",
44
"description": "低代码引擎数据源面板",
55
"main": "lib/index.js",
66
"files": [
@@ -33,8 +33,9 @@
3333
"@types/babel__preset-env": "^7.9.2",
3434
"@types/react": "^16.9.13",
3535
"@types/react-dom": "^16.9.4",
36+
"@types/traverse": "^0.6.32",
3637
"build-plugin-fusion": "^0.1.9",
37-
"monaco-editor": "^0.20.0"
38+
"monaco-editor": "^0.21.0"
3839
},
3940
"peerDependencies": {
4041
"@alifd/next": "^1.20.28",
@@ -58,5 +59,5 @@
5859
"traverse": "^0.6.6",
5960
"xstate": "^4.26.0"
6061
},
61-
"homepage": "https://unpkg.com/@alilc/[email protected]/build/index.html"
62+
"homepage": "https://unpkg.com/@alilc/[email protected].1-beta.0/build/index.html"
6263
}

‎packages/plugin-datasource-pane/src/components/ClassNameView/ClassNameView.tsx‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@ import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
33
import { Select } from '@alifd/next';
44

5-
interface Color {
6-
rgb: any;
7-
onChange: () => void;
8-
}
95

106
export interface PluginProps {
117
value: string;
128
onChange: any;
139
}
1410

15-
export default class ClassNameView extends PureComponent<PluginProps> {
11+
export interface ClassNameViewState {
12+
dataSource: Array<{
13+
value: string;
14+
label: string;
15+
}>;
16+
selectValue: string[];
17+
}
18+
export default class ClassNameView extends PureComponent<PluginProps, ClassNameViewState> {
1619
static display = 'ClassNameSetter';
1720

1821
static propTypes = {
@@ -29,10 +32,10 @@ export default class ClassNameView extends PureComponent<PluginProps> {
2932
const { project } = this.context;
3033
const schema = project.exportSchema();
3134
const { css } = schema.componentsTree[0];
32-
const classNameList = [];
35+
const classNameList: string[] = [];
3336
const re = /\.?\w+[^{]+\{[^}]*\}/g;
3437
const list = css.match(re);
35-
list.map((item) => {
38+
list.map((item: string) => {
3639
if (item[0] === '.') {
3740
const className = item.substring(1, item.indexOf('{'));
3841
classNameList.push(className);
@@ -45,7 +48,7 @@ export default class ClassNameView extends PureComponent<PluginProps> {
4548
};
4649

4750

48-
handleChange = (value) => {
51+
handleChange = (value: string[]) => {
4952
const { onChange } = this.props;
5053
onChange(value.join(' '));
5154
this.setState({
@@ -57,7 +60,10 @@ export default class ClassNameView extends PureComponent<PluginProps> {
5760
componentWillMount() {
5861
const { value } = this.props;
5962
const classnameList = this.getClassNameList();
60-
const dataSource = [];
63+
const dataSource: Array<{
64+
label: string;
65+
value: string;
66+
}> = [];
6167
classnameList.map((item) => {
6268
dataSource.push({
6369
value: item,
@@ -68,7 +74,7 @@ export default class ClassNameView extends PureComponent<PluginProps> {
6874
});
6975

7076

71-
let selectValue = [];
77+
let selectValue: string[] = [];
7278
if (value && value !== '') {
7379
selectValue = value.split(' ');
7480
}

‎packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx‎

Lines changed: 10 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import _cloneDeep from 'lodash/cloneDeep';
2121
import _mergeWith from 'lodash/mergeWith';
2222
import _get from 'lodash/get';
2323
import traverse from 'traverse';
24-
import { RuntimeDataSourceConfig as DataSourceConfig } from '@alilc/lowcode-datasource-types';
24+
2525
import {
2626
ParamValue,
2727
JSFunction,
@@ -30,10 +30,11 @@ import {
3030
FormLazyObj,
3131
LowcodeExpression,
3232
} from '../Forms';
33-
import { DataSourceType } from '../../types';
3433
import { generateClassName } from '../../utils/misc';
3534
import { filterXDisplay } from '../../utils/filter-x-display';
3635

36+
import { DataSourceFormProps, DataSourceFormMode } from '../../types';
37+
3738
const SCHEMA = {
3839
type: 'object',
3940
properties: {
@@ -177,14 +178,6 @@ const SCHEMA = {
177178
},
178179
};
179180

180-
export interface DataSourceFormProps {
181-
dataSourceType: DataSourceType;
182-
dataSource?: DataSourceConfig;
183-
dataSourceList?: DataSourceConfig[];
184-
readonly?: boolean;
185-
}
186-
187-
// export interface DataSourceFormState {}
188181

189182
/**
190183
* 通过是否存在 ID 来决定读写状态
@@ -258,7 +251,7 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps> {
258251
};
259252

260253
deriveSchema = () => {
261-
const { dataSourceType, dataSourceList = [] } = this.props;
254+
const { dataSourceType, dataSourceList = [], mode } = this.props;
262255

263256
// 添加校验规则
264257
// TODO 返回对象会报错
@@ -286,11 +279,12 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps> {
286279
// 过滤 x-display 值为隐藏的属性
287280
filterXDisplay(formSchema);
288281

289-
console.log('new schema', formSchema, dataSourceType);
290-
formSchema.properties.id['x-validator'] = {
291-
validateDataSourceId: true,
292-
message: '该数据源已存在',
293-
};
282+
if (mode === DataSourceFormMode.CREATE) {
283+
formSchema.properties.id['x-validator'] = {
284+
validateDataSourceId: true,
285+
message: '该数据源已存在',
286+
};
287+
}
294288

295289
if (_get(formSchema, 'properties.options.properties.params')) {
296290
formSchema.properties.options.properties.params = {
@@ -502,32 +496,6 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps> {
502496
<SchemaField
503497
schema={_thru(this.deriveSchema(), (arg) => {
504498
return arg;
505-
// return {
506-
// type: 'object',
507-
// properties: {
508-
// layout: {
509-
// type: 'void',
510-
// 'x-component': 'FormLayout',
511-
// 'x-component-props': {
512-
// labelCol: 6,
513-
// wrapperCol: 10,
514-
// layout: 'vertical',
515-
// },
516-
// properties: {
517-
// input: {
518-
// type: 'string',
519-
// title: '输入框',
520-
// required: true,
521-
// 'x-decorator': 'FormItem',
522-
// 'x-decorator-props': {
523-
// tooltip: <div>123</div>,
524-
// },
525-
// 'x-component': 'Input',
526-
// },
527-
// },
528-
// },
529-
// },
530-
// };
531499
})}
532500
/>
533501
</Form>

‎packages/plugin-datasource-pane/src/components/DataSourceImport/DataSourceImport.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export class DataSourceImport extends PureComponent<
104104
this.setState({ isCodeValid: false });
105105
};
106106

107-
handleEditorChange = (newValue) => {
107+
handleEditorChange = (newValue: string) => {
108108
if (this.monacoRef) {
109109
if (
110110
!this.monacoRef
@@ -116,7 +116,7 @@ export class DataSourceImport extends PureComponent<
116116
}
117117
};
118118

119-
handleEditorDidMount = (isFullscreen, editor, monaco) => {
119+
handleEditorDidMount = (isFullscreen: boolean, editor: MonacoEditor, monaco: MonacoEditor) => {
120120
this.monacoRef = monaco?.editor;
121121
};
122122

‎packages/plugin-datasource-pane/src/components/DataSourceImportPluginCode/DataSourceImportPluginCode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export class DataSourceImportPluginCode extends PureComponent<
9696
this.setState({ isCodeValid: false });
9797
};
9898

99-
handleEditorChange = (newValue) => {
99+
handleEditorChange = (newValue: string) => {
100100
if (this.monacoRef) {
101101
if (
102102
!this.monacoRef

‎packages/plugin-datasource-pane/src/components/DataSourceList/DataSourceList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export interface DataSourceListProps {
1111
dataSource: DataSourceConfig[];
1212
onOperationClick?: (operationType: string, dataSourceId: string) => void;
1313
onToggleSelect?: (dataSourceId: string) => void;
14-
renderItemInfoTags: (dataSource: DataSourceConfig) => DataSourceInfoTag[];
14+
renderItemInfoTags?: (dataSource: DataSourceConfig) => DataSourceInfoTag[];
1515
}
1616

1717
interface DataSourceListState {

‎packages/plugin-datasource-pane/src/components/DataSourceListItem/DataSourceListItem.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import cn from 'classnames';
66
import { DragSource, DropTarget } from 'react-dnd';
77
import _uniqueId from 'lodash/uniqueId';
88
import type { DataSourceInfoTag } from '../../types';
9+
import { DataSourcePanelMode } from 'src/pane';
910
import { generateClassName } from '../../utils/misc';
1011
import { DataSourcePaneContext } from '../../utils/panel-context';
1112

@@ -59,7 +60,7 @@ export interface DataSourceListItemProps {
5960
onStartDrag?: (id: string) => void;
6061
onDragOver?: (from: string, to: string) => void;
6162
onDrop?: (from: string, to: string) => void;
62-
mode: 'sorting' | 'exporting' | 'normal';
63+
mode: DataSourcePanelMode;
6364
onToggleSelect?: (id: string) => void;
6465
selected: boolean;
6566
renderInfoTags: (dataSource: DataSourceConfig) => DataSourceInfoTag[];
@@ -77,13 +78,10 @@ export class DataSourceListItem extends Component<DataSourceListItemProps> {
7778
);
7879
}
7980
}
80-
// console.log('props.isDragging', `${this.props.dataSource.id} ${prevProps.isDragging} => ${this.props.isDragging}`);
81-
// if (prevProps.isDragging !== this.props.isDragging && !this.props.isDragging) {}
8281
if (
8382
prevProps.isDragging !== this.props.isDragging &&
8483
this.props.isDragging
8584
) {
86-
// console.log('start drag 2', this.props.dataSource.id);
8785
this.props.onStartDrag?.(this.props.dataSource.id);
8886
}
8987
if (prevProps.isOver !== this.props.isOver && this.props.isOver) {
@@ -119,20 +117,20 @@ export class DataSourceListItem extends Component<DataSourceListItemProps> {
119117
generateClassName('list-item'),
120118
{
121119
[generateClassName('list-item-dragging')]: isDragging,
122-
[generateClassName('list-item-sort')]: mode === 'sorting',
123-
[generateClassName('list-item-export')]: mode === 'exporting',
120+
[generateClassName('list-item-sort')]: mode === DataSourcePanelMode.SORTING,
121+
[generateClassName('list-item-export')]: mode === DataSourcePanelMode.EXPORTING,
124122
},
125123
className,
126124
)}
127125
style={style}
128126
>
129-
{mode === 'sorting' &&
127+
{mode === DataSourcePanelMode.SORTING &&
130128
this.props.connectDragSource?.(
131129
<span className={generateClassName('list-item-drag-handle')}>
132130
<DataSourceListItemDragHandler />
133131
</span>,
134132
)}
135-
{mode === 'exporting' && (
133+
{mode === DataSourcePanelMode.EXPORTING && (
136134
<Checkbox
137135
className={generateClassName('list-item-export-checkbox')}
138136
checked={selected}
@@ -306,11 +304,7 @@ export const DroppableDataSourceListItem = DropTarget(
306304
if (monitor.didDrop()) {
307305
return;
308306
}
309-
310307
const item = monitor.getItem();
311-
312-
// console.log('drop', item);
313-
314308
return { moved: true, from: item.id, to: props?.dataSource?.id };
315309
},
316310
},

‎packages/plugin-datasource-pane/src/components/DataSourceOperations/DataSourceOperations.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button, MenuButton } from '@alifd/next';
33
import { RuntimeDataSourceConfig as DataSourceConfig } from '@alilc/lowcode-datasource-types';
44
import _isArray from 'lodash/isArray';
55
import { generateClassName } from '../../utils/misc';
6-
import { DataSourcePaneImportPlugin, DataSourceType } from '../../types';
6+
import { DataSourcePaneImportPlugin, DataSourceType, DataSourcePanelMode } from '../../types';
77

88
const { Item: MenuButtonItem } = MenuButton;
99

@@ -25,8 +25,9 @@ export interface DataSourceOperationsProps {
2525
onCancelSort?: () => void;
2626
onStartExport?: () => void;
2727
onFinishExport?: () => void;
28+
onCancelExport?: () => void;
2829
selectedList: string[];
29-
mode: 'sorting' | 'exporting' | 'normal';
30+
mode: DataSourcePanelMode;
3031
empty: boolean;
3132
}
3233

@@ -51,15 +52,15 @@ export class DataSourceOperations extends PureComponent<DataSourceOperationsProp
5152
const { importPlugins, dataSourceTypes, mode, selectedList, empty } =
5253
this.props;
5354

54-
if (mode === 'sorting') {
55+
if (mode === DataSourcePanelMode.SORTING) {
5556
return [
5657
<Button onClick={this.props.onFinishSort}>完成</Button>,
5758
<Button text onClick={this.props.onCancelSort}>
5859
取消
5960
</Button>,
6061
];
6162
}
62-
if (mode === 'exporting') {
63+
if (mode === DataSourcePanelMode.EXPORTING) {
6364
return [
6465
<Button
6566
disabled={selectedList.length === 0}

0 commit comments

Comments
 (0)