@@ -89,7 +89,104 @@ type DataSourceType = {
8989
9090## 定制导入插件
9191
92- WIP
92+ ### 导入组件示例
93+
94+ 导入组件引入方式参考 pluginProps
95+ ```
96+ import { DataSourceImportPluginTest } from './DataSourceImportPluginTest';
97+
98+ {
99+ ...
100+ importPlugins: [
101+ {
102+ name: '这里可以导入',
103+ title: '这里可以导入',
104+ component: DataSourceImportPluginTest,
105+ componentProps: {
106+ onImport: (res) => {
107+ console.log('ceshi ')
108+
109+ },
110+ onCancel: () => {
111+ console.log('ceshi2 ')
112+
113+ }
114+ }
115+ }
116+ ],
117+ exportPlugins: [],
118+ formComponents: { },
119+ ...
120+ }
121+
122+ // DataSourceImportPluginTest.jsx
123+
124+ /**
125+ * 源码导入插件
126+ * @todo editor 关联 types，并提供详细的出错信息
127+ */
128+ import React, { PureComponent } from 'react';
129+ import { Button } from '@alifd/next';
130+ import _noop from 'lodash/noop';
131+ import _isArray from 'lodash/isArray';
132+ import _last from 'lodash/last';
133+ import _isPlainObject from 'lodash/isPlainObject';
134+ import { RuntimeDataSourceConfig as DataSourceConfig } from '@alilc/lowcode-datasource-types';
135+ import { JSONSchema6 } from 'json-schema';
136+ import type { ComponentType } from 'react';
137+ export interface DataSourceType {
138+ type: string;
139+ schema: JSONSchema6;
140+ plugin?: ComponentType;
141+ }
142+ export interface DataSourcePaneImportPluginComponentProps {
143+ dataSourceTypes: DataSourceType[];
144+ onImport?: (dataSourceList: DataSourceConfig[]) => void;
145+ onCancel?: () => void;
146+ }
147+ export interface DataSourceImportPluginCodeProps
148+ extends DataSourcePaneImportPluginComponentProps {
149+ defaultValue?: DataSourceConfig[];
150+ }
151+ export interface DataSourceImportPluginCodeState {
152+ code: string;
153+ isCodeValid: boolean;
154+ }
155+ export class DataSourceImportPluginCode extends PureComponent<
156+ DataSourceImportPluginCodeProps,
157+ DataSourceImportPluginCodeState
158+ > {
159+ handleComplete = () => {
160+ console.log('确认')
161+ };
162+ onCancel = () => {
163+ console.log('取消')
164+ };
165+ render() {
166+ return (
167+ <div className="lowcode-plugin-datasource-import-plugin-code">
168+ 此处代码可以自定义
169+ <p className="btns">
170+ <Button onClick={this.onCancel}>取消</Button>
171+ <Button type="primary" onClick={this.handleComplete}>
172+ 确认
173+ </Button>
174+ </p>
175+ </div>
176+ );
177+ }
178+ }
179+
180+ ```
181+
182+ 具体的 component 可参考 DataSourceImportPluginCode
183+ [ 查看] ( https://github.com/alibaba/lowcode-plugins/blob/main/packages/plugin-datasource-pane/src/components/DataSourceImportPluginCode/DataSourceImportPluginCode.tsx )
184+
185+ demo 截图
186+ ![ Alt] ( https://user-images.githubusercontent.com/14235113/186659341-dff511e8-f032-423c-8be7-e0cc281f3964.png )
187+
188+
189+
93190
94191## 定制导出插件
95192
0 commit comments