update 0.14.1
This commit is contained in:
yehuozhili
247
packages/dooringx-lib/src/components/leftDataPannel.tsx
Normal file
247
packages/dooringx-lib/src/components/leftDataPannel.tsx
Normal file
@@ -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;
|
||||
@@ -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 {
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user