github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-02-28 21:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
muyun.my 2020-09-22 11:10:17 +08:00
parent 47f55cafce
commit 4dd2eefc90
16 changed files with 367 additions and 318 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/demo/src/editor/config.js
View File

@ -139,7 +139,7 @@ export default {
type: 'PanelIcon',
props: {
align: 'top',
icon: 'wenjian',
icon: 'shujuyuan',
description: '数据源面板',
panelProps: {
floatable: true,

4
packages/plugin-components-pane/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@ali/lowcode-plugin-components-pane",
"version": "1.0.7-0",
"description": "alibaba lowcode editor component-list plugin",
"version": "0.1.0-beta.0",
"description": "低代码引擎数据源配置面板",
"files": [
"es/",
"lib/"

5
packages/plugin-datasource-pane/DEV.md Normal file
View File

@ -0,0 +1,5 @@
## 插件开发
[https://yuque.antfin-inc.com/ali-lowcode/docs/ip4awq](插件开发文档)。
本地开发需要在 v14.4.0 的 node 环境下进行。

56
packages/plugin-datasource-pane/README.md
View File

@ -2,9 +2,49 @@
对页面的数据源进行管理（新建，编辑，导入）。
一个 pluginProps 的例子
```
{
importPlugins: [
{
name: 'code',
title: '源码',
content: DataSourceImportPluginCode,
},
],
dataSourceTypes: [
{
type: 'mopen',
schema: {
type: 'object',
properties: {
options: {
type: 'object',
properties: {
uri: {
title: 'api',
},
v: {
title: 'v',
type: 'string',
},
appKey: {
title: 'appKey',
type: 'string',
},
},
},
},
},
},
],
}
```
## 数据源类型定义
内置 fetch 和 mtop 类型，支持传入自定义类型。
内置 fetch，mtop，jsonp 类型，支持传入自定义类型。
```
type DataSourceType = {
@ -29,17 +69,15 @@ interface DataSourcePaneImportPlugin {
componentProps?: DataSourcePaneImportPluginCustomProps;
}
interface DataSourcePaneImportPluginCustomProps {
[customPropName: string]: any;
interface DataSourcePaneImportPluginComponentProps {
onImport?: (dataSourceList: DataSourceConfig[]) => void;
onCancel?: () => void;
dataSourceTypes?: DataSourceType[];
}
interface DataSourcePaneImportPluginComponentProps extends DataSourcePaneImportPluginCustomProps {
onChange: (dataSourceList: DataSourceConfig[]) => void;
interface DataSourcePaneImportPluginCustomProps extends DataSourcePaneImportPluginComponentProps {
[customPropName: string]: any;
}
```
## 插件开发
[https://yuque.antfin-inc.com/ali-lowcode/docs/ip4awq](插件开发文档)。
本地开发需要在 v14.4.0 的 node 环境下进行。

7
packages/plugin-datasource-pane/TODO.md
View File

@ -2,14 +2,15 @@ TODO
---
* 多语言
* ICON
* 支持变量
* 定制样式
* 不使用 bind
* 表达式 setter 的联想
* [later]表达式和其他类型的切换
## 提案
* mock
* 变量，上下文的提案
* mock 的提案
## 问题

10
packages/plugin-datasource-pane/package.json
View File

@ -1,13 +1,14 @@
{
"name": "@ali/lowcode-plugin-datasource-pane",
"version": "1.0.7-0",
"version": "0.1.0-beta.3",
"description": "低代码引擎数据源面板",
"main": "lib/index.js",
"files": [
"lib"
],
"scripts": {
"build": "tsc",
"build": "build-scripts build",
"cloud-build": "build-scripts build --skip-demo",
"test": "ava",
"test:snapshot": "ava --update-snapshots"
},
@ -29,6 +30,7 @@
"monaco-editor": "^0.20.0"
},
"dependencies": {
"@alib/build-scripts": "^0.1.3",
"@ali/lowcode-editor-setters": "^1.0.7-0",
"@alifd/next": "^1.20.28",
"@formily/next": "^1.3.2",
@ -40,5 +42,9 @@
"react-monaco-editor": "^0.40.0",
"styled-components": "^5.2.0",
"traverse": "^0.6.6"
},
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-plugin-datasource-pane@0.1.0-beta.1/build/index.html",
"publishConfig": {
"registry": "https://registry.npm.alibaba-inc.com"
}
}

96
packages/plugin-datasource-pane/src/datasource-form.tsx
View File

@ -1,20 +1,17 @@
// @todo schema default
import React, { PureComponent, ReactElement, FC } from 'react';
import React, { PureComponent } from 'react';
import { Button } from '@alifd/next';
import { SchemaForm, FormButtonGroup, Submit } from '@formily/next';
import { ArrayTable, Input, Switch, NumberPicker } from '@formily/next-components';
import _isPlainObject from 'lodash/isPlainObject';
import _isArray from 'lodash/isArray';
import _isNumber from 'lodash/isNumber';
import _isString from 'lodash/isString';
import _isBoolean from 'lodash/isBoolean';
import _cloneDeep from 'lodash/cloneDeep';
import _mergeWith from 'lodash/mergeWith';
import _get from 'lodash/get';
import _tap from 'lodash/tap';
import traverse from 'traverse';
import { DataSourceConfig } from '@ali/lowcode-types';
import { ParamValue, JSFunction } from './form-components';
import { DataSourceType, DataSourceConfig } from './types';
import { DataSourceType } from './types';
// @todo $ref
@ -89,11 +86,11 @@ const SCHEMA = {
export interface DataSourceFormProps {
dataSourceType: DataSourceType;
dataSource?: DataSourceConfig;
omComplete?: (dataSource: DataSourceConfig) => void;
onComplete?: (dataSource: DataSourceConfig) => void;
onCancel?: () => void;
}
export interface DataSourceFormState {
}
export type DataSourceFormState = {};
/**
* 通过是否存在 ID 来决定读写状态
@ -101,65 +98,63 @@ export interface DataSourceFormState {
export class DataSourceForm extends PureComponent<DataSourceFormProps, DataSourceFormState> {
state = {};
handleFormSubmit = (formData) => {
handleFormSubmit = (formData: any) => {
// @todo mutable?
if (_isArray(_get(formData, 'options.params'))) {
formData.options.params = formData.options.params.reduce((acc, cur) => {
if (!cur.name) return;
formData.options.params = formData.options.params.reduce((acc: any, cur: any) => {
if (!cur.name) return acc;
acc[cur.name] = cur.value;
return acc;
}, {});
}
if (_isArray(_get(formData, 'options.headers'))) {
formData.options.headers = formData.options.headers.reduce((acc, cur) => {
if (!cur.name) return;
formData.options.headers = formData.options.headers.reduce((acc: any, cur: any) => {
if (!cur.name) return acc;
acc[cur.name] = cur.value;
return acc;
}, {});
}
console.log('submit', formData);
this.props?.onComplete(formData);
// console.log('submit', formData);
this.props.onComplete?.(formData);
};
deriveInitialData = (dataSource = {}) => {
handleCancel = () => {
this.props.onCancel?.();
};
deriveInitialData = (dataSource: object = {}) => {
const { dataSourceType } = this.props;
const result = _cloneDeep(dataSource);
const result: any = _cloneDeep(dataSource);
if (_isPlainObject(_get(result, 'options.params'))) {
result.options.params = Object.keys(result.options.params).reduce(
(acc, cur) => {
acc.push({
name: cur,
value: result.options.params[cur]
});
return acc;
},
[]
);
result.options.params = Object.keys(result.options.params).reduce((acc: any, cur: any) => {
acc.push({
name: cur,
value: result.options.params[cur],
});
return acc;
}, []);
}
if (_isPlainObject(_get(result, 'options.headers'))) {
result.options.headers = Object.keys(result.options.headers).reduce(
(acc, cur) => {
acc.push({
name: cur,
value: result.options.headers[cur]
});
return acc;
},
[]
);
result.options.headers = Object.keys(result.options.headers).reduce((acc: any, cur: any) => {
acc.push({
name: cur,
value: result.options.headers[cur],
});
return acc;
}, []);
}
result.type = dataSourceType.type;
return result;
}
};
deriveSchema = () => {
const { dataSourceType } = this.props;
// @todo 减小覆盖的风险
const formSchema = _mergeWith({}, SCHEMA, dataSourceType.schema, (objValue, srcValue) => {
const formSchema: any = _mergeWith({}, SCHEMA, dataSourceType.schema, (objValue, srcValue) => {
if (_isArray(objValue)) {
return srcValue;
}
@ -185,16 +180,11 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps, DataSourc
type: 'string',
'x-component': 'ParamValue',
'x-component-props': {
types: [
'string',
'boolean',
'expression',
'number'
],
types: ['string', 'boolean', 'expression', 'number'],
},
},
},
}
},
};
delete formSchema.properties.options.properties.params.properties;
}
@ -218,9 +208,7 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps, DataSourc
type: 'string',
'x-component': 'ParamValue',
'x-component-props': {
types: [
'string'
],
types: ['string'],
},
},
},
@ -257,8 +245,12 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps, DataSourc
Switch,
JSFunction,
}}
labelCol={4}
wrapperCol={19}
labelCol={{
span: 4,
}}
wrapperCol={{
span: 19,
}}
schema={this.deriveSchema()}
initialValues={this.deriveInitialData(dataSource)}
>

44
packages/plugin-datasource-pane/src/form-components/jsfunction.tsx
View File

@ -1,60 +1,46 @@
import React, { PureComponent, createRef } from 'react';
import { Button, Input, Radio, NumberPicker, Switch } from '@alifd/next';
import React, { PureComponent } from 'react';
import { connect } from '@formily/react-schema-renderer';
import _isPlainObject from 'lodash/isPlainObject';
import _isArray from 'lodash/isArray';
import _isNumber from 'lodash/isNumber';
import _isString from 'lodash/isString';
import _isBoolean from 'lodash/isBoolean';
import _get from 'lodash/get';
import _tap from 'lodash/tap';
import MonacoEditor, { EditorWillMount } from 'react-monaco-editor';
const { Group: RadioGroup } = Radio;
import _noop from 'lodash/noop';
import { editor } from 'monaco-editor';
export interface JSFunctionProps {
className: string;
value: any;
onChange?: () => void;
onChange?: (val: any) => void;
}
export interface JSFunctionState {
}
export type JSFunctionState = {};
class JSFunctionComp extends PureComponent<JSFunctionProps, JSFunctionState> {
static isFieldComponent = true;
private monacoRef = createRef<editor.IStandaloneCodeEditor>();
static defaultProps = {
onChange: _noop,
};
constructor(props) {
super(props);
this.handleEditorChange = this.handleEditorChange.bind(this);
}
private monacoRef: any = null;
handleEditorChange = () => {
if (this.monacoRef.current) {
if (
!(this.monacoRef.current as editor.IStandaloneCodeEditor)
.getModelMarkers()
.find((marker: editor.IMarker) => marker.owner === 'json')
) {
this.props?.onChange(this.monacoRef.current?.getModels()?.[0]?.getValue());
if (this.monacoRef) {
if (!(this.monacoRef as any).getModelMarkers().find((marker: editor.IMarker) => marker.owner === 'json')) {
this.props.onChange?.((this.monacoRef as any)?.getModels()?.[0]?.getValue());
}
}
};
handleEditorWillMount: EditorWillMount = (editor) => {
(this.monacoRef as MutableRefObject<editor.IStandaloneCodeEditor>).current = editor?.editor;
this.monacoRef = editor?.editor;
};
render() {
const { value, onChange } = this.props;
const { value } = this.props;
return (
<MonacoEditor
theme="vs-dark"
width={400}
height={150}
defaulvValue={value}
defaultValue={value}
language="js"
onChange={this.handleEditorChange}
editorWillMount={this.handleEditorWillMount}

66
packages/plugin-datasource-pane/src/form-components/param-value.tsx
View File

@ -19,12 +19,12 @@ type ParamValueType = 'string' | 'number' | 'boolean' | 'expression';
export interface ParamValueProps {
className: string;
value: any;
onChange?: () => void;
onChange?: (value: any) => void;
types: ParamValueType[];
}
export interface ParamValueState {
type: 'string' | 'number' | 'boolean' | '';
type: ParamValueType;
}
const TYPE_LABEL_MAP = {
@ -41,16 +41,17 @@ class ParamValueComp extends PureComponent<ParamValueProps, ParamValueState> {
types: ['string', 'boolean', 'number', 'expression'],
};
state = {
type: '',
state: ParamValueState = {
type: 'string',
};
constructor(props) {
constructor(props: ParamValueProps) {
super(props);
this.state.type = this.getTypeFromValue(this.props.value);
}
getTypeFromValue = (value) => {
// @todo
getTypeFromValue = (value: any) => {
if (_isBoolean(value)) {
return 'boolean';
} else if (_isNumber(value)) {
@ -62,36 +63,38 @@ class ParamValueComp extends PureComponent<ParamValueProps, ParamValueState> {
};
// @todo 需要再 bind 一次？
handleChange = (value) => {
this.props?.onChange(value);
handleChange = (value: any) => {
this.props?.onChange?.(value);
};
componentDidUpdate(prevProps) {
componentDidUpdate(prevProps: ParamValueProps) {
if (this.props.value !== prevProps.value) {
this.setState({
value: this.props.value,
type: this.getTypeFromValue(this.props.value),
});
}
}
handleTypeChange = (type) => {
this.setState(({ value }) => {
let nextValue = value || '';
if (type === 'string') {
nextValue = nextValue.toString();
} else if (type === 'number') {
nextValue = nextValue * 1;
} else if (type === 'boolean') {
nextValue = nextValue === 'true' || nextValue;
} else if (type === 'expression') {
nextValue = '';
}
return {
value: nextValue,
type,
};
});
handleTypeChange = (type: string) => {
this.setState(
{
type: type as ParamValueType,
},
() => {
let nextValue = this.props.value || '';
const { type } = this.state;
if (type === 'string') {
nextValue = nextValue.toString();
} else if (type === 'number') {
nextValue = nextValue * 1;
} else if (type === 'boolean') {
nextValue = nextValue === 'true' || nextValue;
} else if (type === 'expression') {
nextValue = '';
}
this.props.onChange?.(nextValue);
},
);
};
renderTypeSelect = () => {
@ -107,6 +110,7 @@ class ParamValueComp extends PureComponent<ParamValueProps, ParamValueState> {
value: item,
}))}
value={type}
onChange={this.handleTypeChange}
/>
);
}
@ -134,10 +138,10 @@ class ParamValueComp extends PureComponent<ParamValueProps, ParamValueState> {
return (
<div className="param-value">
{this.renderTypeSelect()}
{type === 'string' && <Input onChange={this.handleChange.bind(this)} value={value} />}
{type === 'boolean' && <Switch onChange={this.handleChange.bind(this)} checked={value} />}
{type === 'number' && <NumberPicker onChange={this.handleChange.bind(this)} value={value} />}
{type === 'expression' && <ExpressionSetter onChange={this.handleChange.bind(this)} value={value} />}
{type === 'string' && <Input onChange={this.handleChange} value={value} />}
{type === 'boolean' && <Switch onChange={this.handleChange} checked={value} />}
{type === 'number' && <NumberPicker onChange={this.handleChange} value={value} />}
{type === 'expression' && <ExpressionSetter onChange={this.handleChange} value={value} />}
</div>
);
}

42
packages/plugin-datasource-pane/src/import-plugins/code.tsx
View File

@ -1,8 +1,10 @@
/* eslint-disable @typescript-eslint/indent */
// @todo 缩进问题
/**
* 源码导入插件
* @todo editor 关联 types，并提供详细的出错信息
*/
import React, { PureComponent, createRef, MutableRefObject } from 'react';
import React, { PureComponent } from 'react';
import { Button } from '@alifd/next';
import _noop from 'lodash/noop';
import _isArray from 'lodash/isArray';
@ -35,7 +37,7 @@ export class DataSourceImportPluginCode extends PureComponent<
type: 'http',
id: 'test',
},
]
],
};
state = {
@ -43,7 +45,7 @@ export class DataSourceImportPluginCode extends PureComponent<
isCodeValid: true,
};
private monacoRef = createRef<editor.IStandaloneCodeEditor>();
private monacoRef: any;
constructor(props: DataSourceImportPluginCodeProps) {
super(props);
@ -77,14 +79,12 @@ export class DataSourceImportPluginCode extends PureComponent<
};
handleComplete = () => {
if (this.monacoRef.current) {
if (
!(this.monacoRef.current as editor.IStandaloneCodeEditor)
.getModelMarkers()
.find((marker: editor.IMarker) => marker.owner === 'json')
) {
if (this.monacoRef) {
if (!this.monacoRef.getModelMarkers().find((marker: editor.IMarker) => marker.owner === 'json')) {
this.setState({ isCodeValid: true });
this.props?.onImport(this.deriveValue(JSON.parse(_last(this.monacoRef.current.getModels()).getValue())));
const model: any = _last(this.monacoRef.getModels());
if (!model) return;
this.props.onImport?.(this.deriveValue(JSON.parse(model.getValue())));
return;
}
}
@ -92,30 +92,28 @@ export class DataSourceImportPluginCode extends PureComponent<
};
handleEditorChange = () => {
if (this.monacoRef.current) {
if (
!(this.monacoRef.current as editor.IStandaloneCodeEditor)
.getModelMarkers()
.find((marker: editor.IMarker) => marker.owner === 'json')
) {
if (this.monacoRef) {
if (!this.monacoRef.getModelMarkers().find((marker: editor.IMarker) => marker.owner === 'json')) {
this.setState({ isCodeValid: true });
}
}
};
handleEditorWillMount: EditorWillMount = (editor) => {
(this.monacoRef as MutableRefObject<editor.IStandaloneCodeEditor>).current = editor?.editor;
this.monacoRef = editor?.editor;
// @todo 格式化一次
};
handleCodeChagne = (code) => {
handleCodeChagne = (code: string) => {
this.setState({ code });
}
};
render() {
const { onCancel = _noop } = this.props;
const { code, isCodeValid } = this.state;
// @todo
// formatOnType formatOnPaste
return (
<div className="lowcode-plugin-datasource-import-plugin-code">
<MonacoEditor
@ -126,13 +124,13 @@ export class DataSourceImportPluginCode extends PureComponent<
language="json"
onChange={this.handleEditorChange}
editorWillMount={this.handleEditorWillMount}
formatOnType
formatOnPaste
/>
{!isCodeValid && <p className="error-msg">格式有误</p>}
<p className="btns">
<Button onClick={onCancel}>取消</Button>
<Button type="primary" onClick={this.handleComplete}>确认</Button>
<Button type="primary" onClick={this.handleComplete}>
确认
</Button>
</p>
</div>
);

26
packages/plugin-datasource-pane/src/index.tsx
View File

@ -19,9 +19,9 @@ export interface DataSourcePaneState {
active: boolean;
}
const BUILTIN_DATASOURCE_TYPES = [
const BUILTIN_DATASOURCE_TYPES: DataSourceType[] = [
{
type: 'http',
type: 'fetch',
schema: {
type: 'object',
properties: {
@ -56,9 +56,25 @@ const BUILTIN_DATASOURCE_TYPES = [
},
},
},
{
type: 'jsonp',
schema: {
type: 'object',
properties: {
options: {
type: 'object',
properties: {
method: {
enum: ['GET'],
},
},
},
},
},
},
];
const BUILTIN_IMPORT_PLUGINS = [
const BUILTIN_IMPORT_PLUGINS: DataSourcePaneImportPlugin[] = [
{
name: 'default',
title: '源码',
@ -98,7 +114,7 @@ export default class DataSourcePanePlugin extends PureComponent<DataSourcePanePr
}
render() {
const { importPlugins, dataSourceTypes, editor } = this.props;
const { importPlugins, dataSourceTypes = [], editor } = this.props;
const { active } = this.state;
if (!active) return null;
@ -114,3 +130,5 @@ export default class DataSourcePanePlugin extends PureComponent<DataSourcePanePr
);
}
}
export * from './types';

135
packages/plugin-datasource-pane/src/list.tsx
View File

@ -10,6 +10,13 @@ import { DataSourceType } from './types';
const { Column: TableCol } = Table;
function deriveTypeFromValue(val: any) {
if (_isBoolean(val)) return 'bool';
if (_isNumber(val)) return 'number';
if (_isPlainObject(val)) return 'obj';
return 'string';
}
export interface DataSourceListProps {
dataSourceTypes: DataSourceType[];
dataSource: DataSourceConfig[];
@ -56,7 +63,7 @@ export default class DataSourceList extends PureComponent<DataSourceListProps, D
deriveListDataSource = () => {
const { filteredType, keyword } = this.state;
const { dataSource } = this.props;
const { dataSource, dataSourceTypes } = this.props;
return (
dataSource
@ -69,63 +76,61 @@ export default class DataSourceList extends PureComponent<DataSourceListProps, D
<div className="datasource-item-id" title={item.id}>
{item.id}
</div>
<Balloon
trigger={<Button size="small">详情</Button>}
align="b"
alignEdge
triggerType="hover"
style={{ width: 300 }}
>
<Table
dataSource={_tap(
Object.keys(item.options || {}).reduce<TableRow[]>((acc, cur) => {
// @todo 这里的 ts 处理得不好
if (_isPlainObject(item.options[cur])) {
Object.keys(item?.options?.[cur] || {}).forEach((curInOption) => {
acc.push({
label: `${cur}.${curInOption}`,
value: (item?.options?.[cur] as any)?.[curInOption],
});
});
} else if (!_isNil(item.options[cur])) {
// @todo 排除 null
acc.push({
label: cur,
value: item.options[cur],
});
}
return acc;
}, []),
console.log,
)}
{!!dataSourceTypes.find((ds) => ds.type === item.type) && (
<Balloon
trigger={<Button size="small">详情</Button>}
align="b"
alignEdge
triggerType="hover"
style={{ width: 300 }}
>
<TableCol title="" dataIndex="label" />
<TableCol
title=""
dataIndex="value"
cell={(val: any) => (
<div>
<Tag>
{_isBoolean(val)
? 'bool'
: _isNumber(val)
? 'number'
: _isPlainObject(val)
? 'obj'
: 'string'}
</Tag>
{val.toString()}
</div>
<Table
dataSource={_tap(
Object.keys(item.options || {}).reduce<TableRow[]>((acc, cur) => {
// @todo 这里的 ts 处理得不好
if (_isPlainObject(item.options[cur])) {
Object.keys(item?.options?.[cur] || {}).forEach((curInOption) => {
acc.push({
label: `${cur}.${curInOption}`,
value: (item?.options?.[cur] as any)?.[curInOption],
});
});
} else if (!_isNil(item.options[cur])) {
// @todo 排除 null
acc.push({
label: cur,
value: item.options[cur],
});
}
return acc;
}, []),
console.log,
)}
/>
</Table>
</Balloon>
<Button size="small" onClick={this.handleEditDataSource.bind(this, item.id)}>
编辑
</Button>
<Button size="small" onClick={this.handleDuplicateDataSource.bind(this, item.id)}>
复制
</Button>
>
<TableCol title="" dataIndex="label" />
<TableCol
title=""
dataIndex="value"
cell={(val: any) => (
<div>
<Tag>{deriveTypeFromValue(val)}</Tag>
{val.toString()}
</div>
)}
/>
</Table>
</Balloon>
)}
{!!dataSourceTypes.find((ds) => ds.type === item.type) && (
<Button size="small" onClick={this.handleEditDataSource.bind(this, item.id)}>
编辑
</Button>
)}
{!!dataSourceTypes.find((ds) => ds.type === item.type) && (
<Button size="small" onClick={this.handleDuplicateDataSource.bind(this, item.id)}>
复制
</Button>
)}
<Button size="small" onClick={this.handleRemoveDataSource.bind(this, item.id)}>
删除
</Button>
@ -142,6 +147,7 @@ export default class DataSourceList extends PureComponent<DataSourceListProps, D
render() {
const { dataSourceTypes } = this.props;
const { filteredType } = this.state;
return (
<div className="lowcode-plugin-datasource-pane-list">
@ -149,11 +155,18 @@ export default class DataSourceList extends PureComponent<DataSourceListProps, D
hasClear
onSearch={this.handleSearch}
filterProps={{}}
defaultFilterValue={dataSourceTypes?.[0]?.type}
filter={dataSourceTypes.map((type) => ({
label: type?.type,
value: type?.type,
}))}
defaultFilterValue={filteredType}
filter={[
{
label: '全部',
value: '',
},
].concat(
dataSourceTypes.map((type) => ({
label: type?.type,
value: type?.type,
})),
)}
onFilterChange={this.handleSearchFilterChange}
/>
<div className="datasource-list">

8
packages/plugin-datasource-pane/src/locale/index.ts
View File

@ -1,10 +1,10 @@
import { createIntl } from '@ali/lowcode-editor-core';
import en_US from './en-US.json';
import zh_CN from './zh-CN.json';
import enUS from './en-US.json';
import zhCN from './zh-CN.json';
const { intl, intlNode, getLocale, setLocale } = createIntl({
'en-US': en_US,
'zh-CN': zh_CN,
'en-US': enUS,
'zh-CN': zhCN,
});
export { intl, intlNode, getLocale, setLocale };

176
packages/plugin-datasource-pane/src/pane.tsx
View File

@ -6,7 +6,6 @@ import { DataSource, DataSourceConfig } from '@ali/lowcode-types';
import { Tab, Button, MenuButton, Message, Dialog } from '@alifd/next';
import _cloneDeep from 'lodash/cloneDeep';
import _uniqueId from 'lodash/uniqueId';
import _startsWith from 'lodash/startsWith';
import _isArray from 'lodash/isArray';
import _get from 'lodash/get';
import List from './list';
@ -29,15 +28,12 @@ export interface DataSourcePaneProps {
onSchemaChange?: (schema: DataSource) => void;
}
export interface TabItemProps {
export interface TabItem {
key: string;
title: string;
closeable: boolean;
data: any;
}
export interface TabItem {
tabItemProps: TabItemProps;
data?: any;
content?: any;
}
export interface DataSourcePaneState {
@ -47,32 +43,18 @@ export interface DataSourcePaneState {
}
export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourcePaneState> {
state = {
state: DataSourcePaneState = {
dataSourceList: [...(this.props.defaultSchema?.list || [])],
tabItems: [
{
tabItemProps: {
key: TAB_ITEM_LIST,
title: '数据源列表',
closeable: false,
},
key: TAB_ITEM_LIST,
title: '数据源列表',
closeable: false,
},
],
activeTabKey: TAB_ITEM_LIST,
};
constructor(props) {
super(props);
// this.handleDataSourceListChange = this.handleDataSourceListChange.bind(this);
// this.handleImportDataSourceList = this.handleImportDataSourceList.bind(this);
// this.handleCreateDataSource = this.handleCreateDataSource.bind(this);
// this.handleUpdateDataSource = this.handleUpdateDataSource.bind(this);
// this.handleRemoveDataSource = this.handleRemoveDataSource.bind(this);
// this.handleDuplicateDataSource = this.handleDuplicateDataSource.bind(this);
// this.handleEditDataSource = this.handleEditDataSource.bind(this);
// this.handleTabChange = this.handleTabChange.bind(this);
}
handleDataSourceListChange = (dataSourceList?: DataSourceConfig[]) => {
if (dataSourceList) {
this.setState({ dataSourceList });
@ -99,16 +81,16 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
return;
}
const repeatedDataSourceList = toImport.filter(
item => !!this.state.dataSourceList.find(
dataSource => dataSource.id === item.id
)
(item) => !!this.state.dataSourceList.find((dataSource) => dataSource.id === item.id),
);
if (repeatedDataSourceList.length > 0) {
Dialog.confirm({
content: `数据源（${repeatedDataSourceList.map(item => item.id).join('，')}）已存在，如果导入会替换原数据源，是否继续？`,
content: `数据源（${repeatedDataSourceList
.map((item) => item.id)
.join('，')}）已存在，如果导入会替换原数据源，是否继续？`,
onOk: () => {
importDataSourceList();
}
},
});
return;
}
@ -131,14 +113,12 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
},
);
};
if (this.state.dataSourceList.find(
dataSource => dataSource.id === toCreate.id
)) {
if (this.state.dataSourceList.find((dataSource) => dataSource.id === toCreate.id)) {
Dialog.confirm({
content: `数据源（${toCreate.id}）已存在，如果导入会替换原数据源，是否继续？`,
onOk: () => {
create();
}
},
});
return;
}
@ -179,12 +159,13 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
content: `确定要删除吗？`,
onOk: () => {
remove();
}
},
});
};
handleDuplicateDataSource = (dataSourceId: string) => {
const target = this.state.dataSourceList.find((item) => item.id === dataSourceId);
if (!target) return;
const cloned = _cloneDeep(target);
this.openCreateDataSourceTab({
@ -195,6 +176,7 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
handleEditDataSource = (dataSourceId: string) => {
const target = this.state.dataSourceList.find((item) => item.id === dataSourceId);
if (!target) return;
const cloned = _cloneDeep(target);
this.openEditDataSourceTab({
@ -207,22 +189,18 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
this.setState({ activeTabKey });
};
openCreateDataSourceTab = (dataSourceTypeName: string) => {
openCreateDataSourceTab = (dataSource: DataSourceConfig) => {
const { tabItems } = this.state;
const { dataSourceTypes } = this.props;
const { dataSourceTypes = [] } = this.props;
if (!tabItems.find((item) => item.tabItemProps.key === TAB_ITEM_CREATE)) {
if (!tabItems.find((item) => item.key === TAB_ITEM_CREATE)) {
this.setState(({ tabItems }) => ({
tabItems: tabItems.concat({
tabItemProps: {
key: TAB_ITEM_CREATE,
title: `添加数据源`,
closeable: true,
data: {
dataSourceType: dataSourceTypes?.find(
type => type.type === dataSourceTypeName
),
},
key: TAB_ITEM_CREATE,
title: `添加数据源`,
closeable: true,
data: {
dataSourceType: dataSourceTypes?.find((type) => type.type === dataSource.type),
},
}),
}));
@ -232,23 +210,31 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
}
};
handleCreateDataSourceBtnClick = (dataSourceType: string) => {
this.openCreateDataSourceTab({
type: dataSourceType,
} as DataSourceConfig);
};
handleCreateDataSourceMenuBtnClick = (dataSourceType: string) => {
this.openCreateDataSourceTab({
type: dataSourceType,
} as DataSourceConfig);
};
openEditDataSourceTab = (dataSource: DataSourceConfig) => {
const { tabItems } = this.state;
const { dataSourceTypes } = this.props;
const { dataSourceTypes = [] } = this.props;
if (!tabItems.find((item) => item.tabItemProps.key === TAB_ITEM_EDIT)) {
if (!tabItems.find((item) => item.key === TAB_ITEM_EDIT)) {
this.setState(({ tabItems }) => ({
tabItems: tabItems.concat({
tabItemProps: {
key: TAB_ITEM_EDIT,
title: '修改数据源',
closeable: true,
data: {
dataSource,
dataSourceType: dataSourceTypes?.find(
type => type.type === dataSource.type
),
},
key: TAB_ITEM_EDIT,
title: '修改数据源',
closeable: true,
data: {
dataSource,
dataSourceType: dataSourceTypes?.find((type) => type.type === dataSource.type),
},
}),
}));
@ -256,22 +242,20 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
this.setState({ activeTabKey: TAB_ITEM_EDIT });
};
openImportDataSourceTab = (selectedImportPluginName) => {
openImportDataSourceTab = (selectedImportPluginName: string) => {
const { tabItems } = this.state;
const { importPlugins } = this.props;
if (!tabItems.find((item) => item.tabItemProps.key === `${TAB_ITEM_IMPORT}_${selectedImportPluginName}`)) {
if (!tabItems.find((item) => item.key === `${TAB_ITEM_IMPORT}_${selectedImportPluginName}`)) {
this.setState(({ tabItems }) => ({
tabItems: tabItems.concat({
tabItemProps: {
key: TAB_ITEM_IMPORT,
title: `导入数据源-${selectedImportPluginName}`,
closeable: true,
content: _get(
importPlugins?.find((plugin) => selectedImportPluginName === plugin.name),
'component',
),
},
key: TAB_ITEM_IMPORT,
title: `导入数据源-${selectedImportPluginName}`,
closeable: true,
content: _get(
importPlugins?.find((plugin) => selectedImportPluginName === plugin.name),
'component',
),
}),
}));
this.setState({ activeTabKey: TAB_ITEM_IMPORT });
@ -283,11 +267,11 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
closeTab = (tabKey: any) => {
this.setState(
({ tabItems }) => ({
tabItems: tabItems.filter((item) => item.tabItemProps.key !== tabKey),
tabItems: tabItems.filter((item) => item.key !== tabKey),
}),
() => {
this.setState(({ tabItems }) => ({
activeTabKey: _get(tabItems, '[0].tabItemProps.key')
activeTabKey: _get(tabItems, '[0].key'),
}));
},
);
@ -298,14 +282,14 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
// @todo onSelect 不行？
return [
_isArray(dataSourceTypes) && dataSourceTypes.length > 1 ? (
<MenuButton label="新建" onItemClick={this.openCreateDataSourceTab}>
_isArray(dataSourceTypes) && dataSourceTypes.length > 0 ? (
<MenuButton label="新建" onItemClick={this.handleCreateDataSourceMenuBtnClick}>
{dataSourceTypes.map((type) => (
<MenuButtonItem key={type.type}>{type.type}</MenuButtonItem>
))}
</MenuButton>
) : _isArray(dataSourceTypes) && dataSourceTypes.length === 1 ? (
<Button onClick={this.openCreateDataSourceTab.bind(this, dataSourceTypes[0].type)}>新建</Button>
<Button onClick={this.handleCreateDataSourceBtnClick.bind(this, dataSourceTypes[0].type)}>新建</Button>
) : null,
_isArray(importPlugins) && importPlugins.length > 1 ? (
<MenuButton label="导入" onItemClick={this.openImportDataSourceTab}>
@ -322,7 +306,7 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
// 更通用的处理
renderTabItemContentByKey = (tabItemKey: any, data: any) => {
const { dataSourceList, tabItems } = this.state;
const { dataSourceTypes } = this.props;
const { dataSourceTypes = [] } = this.props;
if (tabItemKey === TAB_ITEM_LIST) {
return (
@ -336,16 +320,17 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
);
} else if (tabItemKey === TAB_ITEM_EDIT) {
const dataSourceType = dataSourceTypes.find((type) => type.type === data?.dataSource.type);
return (
<DataSourceForm
dataSourceType={dataSourceType}
dataSource={data?.dataSource}
onComplete={this.handleUpdateDataSource}
onCancel={this.closeTab.bind(this, TAB_ITEM_EDIT)}
/>
);
if (dataSourceType) {
return (
<DataSourceForm
dataSourceType={dataSourceType}
dataSource={data?.dataSource}
onComplete={this.handleUpdateDataSource}
onCancel={this.closeTab.bind(this, TAB_ITEM_EDIT)}
/>
);
}
} else if (tabItemKey === TAB_ITEM_CREATE) {
const tabItemData = tabItems.find((tabItem) => tabItem.tabItemProps.key === tabItemKey);
return (
<DataSourceForm
dataSourceType={data?.dataSourceType}
@ -354,18 +339,23 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
/>
);
} else if (tabItemKey === TAB_ITEM_IMPORT) {
const tabItemData = tabItems.find((tabItem) => tabItem.tabItemProps.key === tabItemKey);
const tabItemData = tabItems.find((tabItem) => tabItem.key === tabItemKey);
if (tabItemData) {
const Content = tabItemData.tabItemProps.content;
return <Content dataSourceTypes={dataSourceTypes} onCancel={this.closeTab.bind(this, tabItemKey)} onImport={this.handleImportDataSourceList} />;
const Content = tabItemData.content;
return (
<Content
dataSourceTypes={dataSourceTypes}
onCancel={this.closeTab.bind(this, tabItemKey)}
onImport={this.handleImportDataSourceList}
/>
);
}
}
return null;
};
render() {
const { dataSourceList, activeTabKey, tabItems } = this.state;
const { importPlugins, dataSourceTypes } = this.props;
const { activeTabKey, tabItems } = this.state;
return (
<div className="lowcode-plugin-datasource-pane">
@ -375,10 +365,8 @@ export class DataSourcePane extends PureComponent<DataSourcePaneProps, DataSourc
onChange={this.handleTabChange}
onClose={this.closeTab}
>
{tabItems.map((item) => (
<TabItem {...item.tabItemProps}>
{this.renderTabItemContentByKey(item.tabItemProps.key, item.tabItemProps.data)}
</TabItem>
{tabItems.map((item: TabItem) => (
<TabItem {...item}>{this.renderTabItemContentByKey(item.key, item.data)}</TabItem>
))}
</Tab>
</div>

4
packages/plugin-datasource-pane/src/types/datasource-type.ts
View File

@ -1,6 +1,6 @@
import { JSONSchema4 } from '@types/json-schema';
import { JSONSchema6 } from 'json-schema';
export type DataSourceType = {
type: string;
schema: JSONSchema4
schema: JSONSchema6;
};

4
packages/plugin-datasource-pane/src/types/import-plugin.ts
View File

@ -9,11 +9,11 @@ export interface DataSourcePaneImportPlugin {
componentProps?: DataSourcePaneImportPluginCustomProps;
}
export interface DataSourcePaneImportPluginCustomProps {
export interface DataSourcePaneImportPluginCustomProps extends DataSourcePaneImportPluginComponentProps {
[customPropName: string]: any;
}
export interface DataSourcePaneImportPluginComponentProps extends DataSourcePaneImportPluginCustomProps {
export interface DataSourcePaneImportPluginComponentProps {
dataSourceTypes: DataSourceType[];
onImport?: (dataSourceList: DataSourceConfig[]) => void;
onCancel?: () => void;