update 0.14.1

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.14.1
+
+新增数据源左侧面板设置。
+
 ## 0.14.0
 
 修复左右侧配置取不到config的问题。

README.md

@@ -156,5 +156,5 @@ MIT
 ## Todo
 
 重构弹窗
-重构数据源
+重构事件
 完善文档

packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md

@@ -5,6 +5,8 @@ nav:
   title: Change log
   order: 6
 ---
+## 0.14.1
+Add data source left panel settings.
 ## 0.14.0
 Fix the problem that the left and right configurations cannot get config.
 ## 0.13.3
@@ -21,7 +23,7 @@ Modify the timeline color and style to optimize the selected state.
 ## 0.12.3
 Fix double click positioning problem
 ## 0.12.2
-New double click positioning frame.
+Add double click positioning frame.
 Fixed drag frame reset pointer behavior after pause.
 ## 0.12.0
 The operation of adding frames to the animation can accurately view the animation status every 0.1 seconds!
@@ -36,7 +38,7 @@ Add color and style settings for markline
 ## 0.11.9
 A new setting panel is added to control adsorption scaling and other behaviors.
 Fixed pop-up button style issues.
-Fix the problem that some prompts do not display.
+The repair prompt is not displayed.
 ## 0.11.8
 Timeline adds auto focus function.
 ## 0.11.7

packages/dooringx-dumi-doc/docs/ChangeLog/index.md

@@ -5,6 +5,10 @@ nav:
   title: 变更日志
   order: 6
 ---
+## 0.14.1
+
+新增数据源左侧面板设置。
+
 ## 0.14.0
 
 修复左右侧配置取不到config的问题。

packages/dooringx-example/src/plugin/index.tsx

@@ -2,11 +2,11 @@
  * @Author: yehuozhili
  * @Date: 2021-02-27 21:33:36
  * @LastEditors: yehuozhili
- * @LastEditTime: 2022-04-08 01:35:05
+ * @LastEditTime: 2022-04-09 21:55:03
  * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
  */
 
-import { InitConfig } from 'dooringx-lib';
+import { InitConfig, LeftDataPannel } from 'dooringx-lib';
 import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
 import { ContainerOutlined, PlayCircleOutlined, HighlightOutlined } from '@ant-design/icons';
 import commandModules from './commanderModules';
@@ -51,6 +51,13 @@ export const defaultConfig: Partial<InitConfig> = {
 			icon: <PlayCircleOutlined />,
 			displayName: '媒体组件',
 		},
+		{
+			type: 'datax',
+			icon: <ContainerOutlined />,
+			custom: true,
+			displayName: '数据源',
+			customRender: (config) => <LeftDataPannel config={config}></LeftDataPannel>,
+		},
 		{
 			type: 'xxc',
 			icon: <ContainerOutlined />,

packages/dooringx-lib/README.md

@@ -156,5 +156,5 @@ MIT
 ## Todo
 
 重构弹窗
-重构数据源
+重构事件
 完善文档

packages/dooringx-lib/package.json

@@ -1,5 +1,5 @@
 {
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/dooringx-lib.esm.js",

packages/dooringx-lib/src/components/leftDataPannel.tsx

@@ -0,0 +1,247 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2022-04-09 21:44:55
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2022-04-10 15:59:37
+ * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftDataPannel.tsx
+ */
+import {
+	Button,
+	Form,
+	Modal,
+	Row,
+	Space,
+	Table,
+	Input,
+	Typography,
+	message,
+	Popconfirm,
+} from 'antd';
+import { ColumnsType } from 'antd/lib/table';
+import React, { useState } from 'react';
+import UserConfig from '../config';
+import { replaceLocale } from '../locale';
+
+interface LeftDataPannelProps {
+	config: UserConfig;
+}
+const formItemLayout = {
+	labelCol: {
+		span: 4,
+	},
+	wrapperCol: {
+		span: 20,
+	},
+};
+
+const { Text } = Typography;
+const reg = /[`~!@#-_$%^&*()+=|{}':;',\[\]<>/?~！@#￥%……&*（）——+|{}【】《》 ‘；：”“’。，、？]/g;
+
+/**
+ *
+ * 左侧tab页插件
+ * @param {LeftDataPannelProps} props
+ * @returns
+ */
+function LeftDataPannel(props: LeftDataPannelProps) {
+	const config = props.config;
+	const dataCenter = config.getDataCenter();
+	const dataMap = dataCenter.getDataMap();
+	const keys = Object.keys(dataMap);
+	const dataSource = keys.map((v) => ({ key: v, value: dataMap[v] }));
+	const forceUpdate = useState(0)[1];
+	const [addVisible, setAddVisible] = useState(false);
+	const [editVisible, setEditVisible] = useState(false);
+	const [current, setCurrent] = useState<Record<string, any>>({});
+
+	const column: ColumnsType<any> = [
+		{
+			title: 'Key',
+			dataIndex: 'key',
+			key: 'key',
+		},
+		{
+			title: '操作',
+			render: (_v, record: any) => {
+				return (
+					<Space size="middle">
+						<Button
+							type="link"
+							onClick={() => {
+								const value =
+									typeof record.value === 'object' ? JSON.stringify(record.value) : record.value;
+								const obj = { value, key: record.key };
+								editForm.setFieldsValue(obj);
+								setCurrent(record);
+								setEditVisible(true);
+							}}
+						>
+							编辑
+						</Button>
+						<Popconfirm
+							title={replaceLocale('control.popup.delete', '确认删除么', config)}
+							onConfirm={() => {
+								const newObj = { ...dataMap };
+								delete newObj[record.key];
+								dataCenter.staticSetToMap({ ...newObj }, props.config);
+								forceUpdate((v) => v + 1);
+							}}
+							okText={replaceLocale('yes', '确定', config)}
+							cancelText={replaceLocale('no', '取消', config)}
+						>
+							<Button type="link">删除</Button>
+						</Popconfirm>
+					</Space>
+				);
+			},
+		},
+	];
+	const [form] = Form.useForm();
+	const [editForm] = Form.useForm();
+
+	const formSubmit = (res: any) => {
+		let value: string = res.value;
+		value = value.replace('/s', '').replace('↵', '');
+		if (value.startsWith('{')) {
+			try {
+				const json = JSON.parse(value);
+				const newObj = { [res.key]: json };
+				dataCenter.staticSetToMap({ ...dataMap, ...newObj }, props.config);
+				setAddVisible(false);
+				form.resetFields();
+			} catch (error) {
+				message.error('json格式转换失败');
+			}
+		} else {
+			const newObj = { [res.key]: value };
+			dataCenter.staticSetToMap({ ...dataMap, ...newObj }, props.config);
+			setAddVisible(false);
+			form.resetFields();
+		}
+	};
+
+	return (
+		<div style={{ width: '100%' }}>
+			<Row style={{ marginBottom: '10px' }}>
+				<Button
+					type="primary"
+					onClick={() => {
+						setAddVisible(true);
+					}}
+				>
+					添加数据源
+				</Button>
+			</Row>
+			<Row>
+				<Table
+					pagination={false}
+					style={{ width: '100%' }}
+					dataSource={dataSource}
+					columns={column}
+				></Table>
+			</Row>
+			{addVisible && (
+				<Modal
+					visible={addVisible}
+					title={'添加数据源'}
+					onCancel={() => {
+						setAddVisible(false);
+						form.resetFields();
+					}}
+					onOk={() => {
+						form.validateFields().then((res) => {
+							formSubmit(res);
+						});
+					}}
+					okText={replaceLocale('yes', '确定', config)}
+					cancelText={replaceLocale('no', '取消', config)}
+				>
+					<div>
+						<Form form={form} {...formItemLayout}>
+							<Form.Item
+								label="key"
+								name={'key'}
+								rules={[
+									{ required: true, message: 'Please input your key' },
+									() => ({
+										validator(_, value) {
+											if (!keys.includes(value)) {
+												return Promise.resolve();
+											}
+											return Promise.reject(new Error('Duplicate  keys!'));
+										},
+									}),
+									() => ({
+										validator(_, value) {
+											if (!reg.exec(value)) {
+												return Promise.resolve();
+											}
+											return Promise.reject(new Error('invalid key'));
+										},
+									}),
+								]}
+							>
+								<Input></Input>
+							</Form.Item>
+							<Form.Item
+								label="value"
+								name={'value'}
+								extra={<Text type="warning">支持字符串、数字、JSON对象格式，直接输入内容即可</Text>}
+								rules={[{ required: true, message: 'Please input your value' }]}
+							>
+								<Input.TextArea></Input.TextArea>
+							</Form.Item>
+						</Form>
+					</div>
+				</Modal>
+			)}
+			{editVisible && (
+				<Modal
+					visible={editVisible}
+					title={'修改数据源'}
+					onCancel={() => {
+						setEditVisible(false);
+						editForm.resetFields();
+					}}
+					onOk={() => {
+						editForm.validateFields().then((res) => {
+							let value: string = res.value;
+							value = value.replace('/s', '').replace('↵', '');
+							if (value.startsWith('{')) {
+								try {
+									const json = JSON.parse(value);
+									const newObj = { [current.key]: json };
+									dataCenter.staticSetToMap({ ...dataMap, ...newObj }, props.config);
+									setEditVisible(false);
+									editForm.resetFields();
+								} catch (error) {
+									message.error('json格式转换失败');
+								}
+							} else {
+								const newObj = { [current.key]: value };
+								dataCenter.staticSetToMap({ ...dataMap, ...newObj }, props.config);
+								setEditVisible(false);
+								editForm.resetFields();
+							}
+						});
+					}}
+					okText={replaceLocale('yes', '确定', config)}
+					cancelText={replaceLocale('no', '取消', config)}
+				>
+					<Form form={editForm}>
+						<Form.Item
+							label="value"
+							name={'value'}
+							extra={<Text type="warning">支持字符串、数字、JSON对象格式，直接输入内容即可</Text>}
+							rules={[{ required: true, message: 'Please input your value' }]}
+						>
+							<Input.TextArea></Input.TextArea>
+						</Form.Item>
+					</Form>
+				</Modal>
+			)}
+		</div>
+	);
+}
+
+export default LeftDataPannel;

packages/dooringx-lib/src/core/dataCenter/index.ts

@@ -2,8 +2,8 @@
  * @Author: yehuozhili
  * @Date: 2021-04-13 11:20:55
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-05-04 20:34:36
+ * @LastEditTime: 2022-04-10 01:02:03
- * @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\dataCenter\index.ts
+ * @FilePath: \dooringx\packages\dooringx-lib\src\core\dataCenter\index.ts
  */
 
 import UserConfig from '../../config';
@@ -63,7 +63,7 @@ export class DataCenter {
 		if (sign) {
 			const originData = storeChanger.getOrigin();
 			if (originData) {
-				const currentData = originData.data[originData.current];
+				const currentData = originData.now;
 				currentData.dataSource = data;
 			}
 		} else {

packages/dooringx-lib/src/index.tsx

@@ -2,7 +2,7 @@
  * @Author: yehuozhili
  * @Date: 2021-03-14 04:22:18
  * @LastEditors: yehuozhili
- * @LastEditTime: 2021-09-27 21:08:40
+ * @LastEditTime: 2022-04-09 21:49:01
  * @FilePath: \dooringx\packages\dooringx-lib\src\index.tsx
  */
 
@@ -22,6 +22,9 @@ export { default as RightConfig } from './components/rightConfig';
 export { default as ContainerWrapper } from './components/wrapperMove';
 // 控制全局 弹窗等
 export { default as Control } from './components/control/control';
+// 左侧数据源tab
+export { default as LeftDataPannel } from './components/leftDataPannel';
+
 // 这个放到外层容器属性里 ...innerContainerDragUp()
 export { innerContainerDragUp } from './core/innerDrag';
 

packages/dooringx-plugin-template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dooringx-plugin-template",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "> TODO: description",
   "author": "yehuozhili <673632758@qq.com>",
   "homepage": "https://github.com/H5-Dooring/dooringx#readme",

packages/dooringx-plugin-template/template/template.json

@@ -40,7 +40,7 @@
 		"@rollup/plugin-node-resolve": "^13.0.4",
 		"@rollup/plugin-url": "^6.1.0",
 		"@svgr/rollup": "^5.5.0",
-		"dooringx-lib": "^0.14.0",
+		"dooringx-lib": "^0.14.1",
 		"postcss": "^8.3.6",
 		"rollup-plugin-peer-deps-external": "^2.2.4",
 		"rollup-plugin-postcss": "^4.0.1",