From 6295f4ce6965064ba273439417d592508121f66a Mon Sep 17 00:00:00 2001 From: yehuozhili <673632758@qq.com> Date: Sun, 10 Apr 2022 17:15:13 +0800 Subject: [PATCH] update 0.14.1 --- CHANGELOG.md | 4 + README.md | 2 +- .../docs/ChangeLog/index.en.md | 6 +- .../dooringx-dumi-doc/docs/ChangeLog/index.md | 4 + .../dooringx-example/src/plugin/index.tsx | 11 +- packages/dooringx-lib/README.md | 2 +- packages/dooringx-lib/package.json | 2 +- .../src/components/leftDataPannel.tsx | 247 ++++++++++++++++++ .../dooringx-lib/src/core/dataCenter/index.ts | 6 +- packages/dooringx-lib/src/index.tsx | 5 +- .../dooringx-plugin-template/package.json | 2 +- .../template/template.json | 2 +- 12 files changed, 280 insertions(+), 13 deletions(-) create mode 100644 packages/dooringx-lib/src/components/leftDataPannel.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 1467f13..0d02b3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.14.1 + +新增数据源左侧面板设置。 + ## 0.14.0 修复左右侧配置取不到config的问题。 diff --git a/README.md b/README.md index 339e7db..0681ef7 100644 --- a/README.md +++ b/README.md @@ -156,5 +156,5 @@ MIT ## Todo 重构弹窗 -重构数据源 +重构事件 完善文档 diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md index 9fd27ff..8d542cc 100644 --- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.en.md +++ b/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 diff --git a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md index a8a4d1c..f25075a 100644 --- a/packages/dooringx-dumi-doc/docs/ChangeLog/index.md +++ b/packages/dooringx-dumi-doc/docs/ChangeLog/index.md @@ -5,6 +5,10 @@ nav: title: 变更日志 order: 6 --- +## 0.14.1 + +新增数据源左侧面板设置。 + ## 0.14.0 修复左右侧配置取不到config的问题。 diff --git a/packages/dooringx-example/src/plugin/index.tsx b/packages/dooringx-example/src/plugin/index.tsx index 22fd739..b7315e7 100644 --- a/packages/dooringx-example/src/plugin/index.tsx +++ b/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 = { icon: , displayName: '媒体组件', }, + { + type: 'datax', + icon: , + custom: true, + displayName: '数据源', + customRender: (config) => , + }, { type: 'xxc', icon: , diff --git a/packages/dooringx-lib/README.md b/packages/dooringx-lib/README.md index 339e7db..0681ef7 100644 --- a/packages/dooringx-lib/README.md +++ b/packages/dooringx-lib/README.md @@ -156,5 +156,5 @@ MIT ## Todo 重构弹窗 -重构数据源 +重构事件 完善文档 diff --git a/packages/dooringx-lib/package.json b/packages/dooringx-lib/package.json index 09ee349..7b134df 100644 --- a/packages/dooringx-lib/package.json +++ b/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", diff --git a/packages/dooringx-lib/src/components/leftDataPannel.tsx b/packages/dooringx-lib/src/components/leftDataPannel.tsx new file mode 100644 index 0000000..01e74b6 --- /dev/null +++ b/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>({}); + + const column: ColumnsType = [ + { + title: 'Key', + dataIndex: 'key', + key: 'key', + }, + { + title: '操作', + render: (_v, record: any) => { + return ( + + + { + const newObj = { ...dataMap }; + delete newObj[record.key]; + dataCenter.staticSetToMap({ ...newObj }, props.config); + forceUpdate((v) => v + 1); + }} + okText={replaceLocale('yes', '确定', config)} + cancelText={replaceLocale('no', '取消', config)} + > + + + + ); + }, + }, + ]; + 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 ( +
+ + + + +
+ + {addVisible && ( + { + setAddVisible(false); + form.resetFields(); + }} + onOk={() => { + form.validateFields().then((res) => { + formSubmit(res); + }); + }} + okText={replaceLocale('yes', '确定', config)} + cancelText={replaceLocale('no', '取消', config)} + > +
+
+ ({ + 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')); + }, + }), + ]} + > + + + 支持字符串、数字、JSON对象格式，直接输入内容即可} + rules={[{ required: true, message: 'Please input your value' }]} + > + + +
+
+ + )} + {editVisible && ( + { + 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)} + > +
+ 支持字符串、数字、JSON对象格式，直接输入内容即可} + rules={[{ required: true, message: 'Please input your value' }]} + > + + +
+ + )} +
+ ); +} + +export default LeftDataPannel; diff --git a/packages/dooringx-lib/src/core/dataCenter/index.ts b/packages/dooringx-lib/src/core/dataCenter/index.ts index 864aa14..f90524e 100644 --- a/packages/dooringx-lib/src/core/dataCenter/index.ts +++ b/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 - * @FilePath: \dooringv2\packages\dooring-v2-lib\src\core\dataCenter\index.ts + * @LastEditTime: 2022-04-10 01:02:03 + * @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 { diff --git a/packages/dooringx-lib/src/index.tsx b/packages/dooringx-lib/src/index.tsx index 2c7e435..7c63042 100644 --- a/packages/dooringx-lib/src/index.tsx +++ b/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'; diff --git a/packages/dooringx-plugin-template/package.json b/packages/dooringx-plugin-template/package.json index 467779c..e28d4a4 100644 --- a/packages/dooringx-plugin-template/package.json +++ b/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", diff --git a/packages/dooringx-plugin-template/template/template.json b/packages/dooringx-plugin-template/template/template.json index 090d6fe..1baac72 100644 --- a/packages/dooringx-plugin-template/template/template.json +++ b/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",