guoshujing/dooring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 0.9.1

Browse Source
This commit is contained in:
yehuozhili
2021-09-27 21:52:16 +08:00
parent b371f494cb
commit 8aabe0d4ed
18 changed files with 429 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@@ -1,5 +1,10 @@
## changelog ## changelog
## 0.9.1
增加config.i18n配置，不使用国际化则不需要导入intl的context。
control组件第一个按钮变更为拖拽，功能合并至timeline
## 0.9.0 ## 0.9.0
增加react-intl，修改部分样式。 增加react-intl，修改部分样式。

5
packages/dooringx-doc/src/changelog/1.1.md
View File

@@ -4,6 +4,11 @@ order: 1
--- ---
## changelog ## changelog
## 0.9.1
增加config.i18n配置，不使用国际化则不需要导入intl的context。
control组件第一个按钮变更为拖拽，功能合并至timeline
## 0.9.0 ## 0.9.0
增加react-intl，修改部分样式。 增加react-intl，修改部分样式。

19
packages/dooringx-example/src/layouts/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-07-07 14:51:17 * @Date: 2021-07-07 14:51:17
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 14:45:47 * @LastEditTime: 2021-09-27 21:44:56
* @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx * @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx
*/ */
import { Button } from 'antd'; import { Button } from 'antd';
@@ -19,7 +19,7 @@ import { locale } from 'dooringx-lib';
import { localeKey } from '../../../dooringx-lib/dist/locale'; import { localeKey } from '../../../dooringx-lib/dist/locale';
export const config = new UserConfig(plugin); export const config = new UserConfig(plugin);
export const configContext = createContext<UserConfig>(config); export const configContext = createContext<UserConfig>(config);
config.i18n = false;
// 自定义右键 // 自定义右键
const contextMenuState = config.getContextMenuState(); const contextMenuState = config.getContextMenuState();
const unmountContextMenu = contextMenuState.unmountContextMenu; const unmountContextMenu = contextMenuState.unmountContextMenu;
@@ -84,11 +84,12 @@ export const LocaleContext = createContext<LocaleContextType>({
export default function Layout({ children }: IRouteComponentProps) { export default function Layout({ children }: IRouteComponentProps) {
const [l, setLocale] = useState<localeKey>('zh-CN'); const [l, setLocale] = useState<localeKey>('zh-CN');
return ( // return (
<LocaleContext.Provider value={{ change: setLocale, current: l }}> // <LocaleContext.Provider value={{ change: setLocale, current: l }}>
<IntlProvider messages={locale.localeMap[l]} locale={l} defaultLocale={l}> // <IntlProvider messages={locale.localeMap[l]} locale={l} defaultLocale={l}>
<configContext.Provider value={config}>{children}</configContext.Provider> // <configContext.Provider value={config}>{children}</configContext.Provider>
</IntlProvider> // </IntlProvider>
</LocaleContext.Provider> // </LocaleContext.Provider>
); // );
return <configContext.Provider value={config}>{children}</configContext.Provider>;
} }

2
packages/dooringx-lib/README.md
View File

@@ -142,7 +142,7 @@ Contributions, issues and feature requests are welcome!.
### 技术交流 | Technical Communication ### 技术交流 | Technical Communication
<a href="http://cdn.dooring.cn/dr/q3.png" target="_blank"><img src="http://cdn.dooring.cn/dr/q3.png" width=260 />dooringx-lib交流群</a> <a href="http://x.dooring.cn/editor/static/qrcode.15924f99.png" target="_blank"><img src="http://x.dooring.cn/editor/static/qrcode.15924f99.png" width=260 />dooringx-lib交流群</a>
## License ## License

2
packages/dooringx-lib/package.json
View File

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

461
packages/dooringx-lib/src/components/control.tsx
View File

@@ -1,461 +0,0 @@
import {
CompressOutlined,
DeleteOutlined,
FullscreenExitOutlined,
FullscreenOutlined,
GatewayOutlined,
LayoutOutlined,
MenuOutlined,
SyncOutlined,
UnorderedListOutlined,
VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Divider, Form, Input, List, message, Modal, Popconfirm, Popover } from 'antd';
import React, { CSSProperties, PropsWithChildren, useState } from 'react';
import { UserConfig } from '..';
import { IBlockType, IStoreData } from '../core/store/storetype';
import { deepCopy, arrayMove, changeItem, changeLayer, focusEle } from '../core/utils';
import { SortEnd, SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { wrapperMoveState } from './wrapperMove/event';
import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
export interface ControlProps {
config: UserConfig;
style?: CSSProperties;
}
const DragHandle = SortableHandle(() => <MenuOutlined />);
const SortableItem = SortableElement(
({ value }: { value: { value: IBlockType; config: UserConfig; intl: IntlShape } }) => (
<div
style={{
userSelect: 'none',
display: 'flex',
alignItems: 'center',
width: 430,
}}
>
<div style={{ width: 30, textAlign: 'center', cursor: 'move' }}>
<DragHandle></DragHandle>
</div>
<Divider type="vertical"></Divider>
<div style={{ width: 100, textAlign: 'center' }}>
{value.config.getComponentRegister().getMap()[value.value.name].display}
</div>
<Divider type="vertical"></Divider>
<div style={{ width: 80, textAlign: 'center' }}>{value.value.id.slice(-6)}</div>
<Divider type="vertical"></Divider>
<div style={{ width: 50, textAlign: 'center' }}>{value.value.position}</div>
<Divider type="vertical"></Divider>
<div style={{ width: 200 }}>
<Popconfirm
title={value.intl.formatMessage({
id: 'contorl.popup.absolute',
defaultMessage: '确认变更为绝对定位吗',
})}
onConfirm={() => {
changeItem(value.config.getStore(), value.value.id, 'position', 'absolute');
}}
okText={value.intl.formatMessage({ id: 'yes' })}
cancelText={value.intl.formatMessage({ id: 'no' })}
>
<Button
type="link"
title={value.intl.formatMessage({
id: 'contorl.absolute',
defaultMessage: '切换绝对定位',
})}
icon={<FullscreenOutlined />}
></Button>
</Popconfirm>
<Popconfirm
title={value.intl.formatMessage({
id: 'contorl.popup.static',
defaultMessage: '确认变更为静态定位吗',
})}
onConfirm={() => {
changeItem(value.config.getStore(), value.value.id, 'position', 'static');
}}
okText={value.intl.formatMessage({ id: 'yes' })}
cancelText={value.intl.formatMessage({ id: 'no' })}
>
<Button
type="link"
title={value.intl.formatMessage({
id: 'contorl.static',
defaultMessage: '切换静态定位',
})}
icon={<FullscreenExitOutlined />}
></Button>
</Popconfirm>
<Button
type="link"
title={value.intl.formatMessage({ id: 'control.focus', defaultMessage: '选中聚焦' })}
icon={<CompressOutlined />}
onClick={() => {
focusEle(value.config.getStore(), value.value.id);
}}
></Button>
<Popconfirm
title={value.intl.formatMessage({
id: 'control.popup.delete',
defaultMessage: '确认删除吗',
})}
onConfirm={() => {
changeLayer(value.config.getStore(), value.value.id, 'delete');
}}
okText={value.intl.formatMessage({ id: 'yes' })}
cancelText={value.intl.formatMessage({ id: 'no' })}
>
<Button
icon={<DeleteOutlined />}
title={value.intl.formatMessage({ id: 'control.delete', defaultMessage: '删除' })}
type="link"
></Button>
</Popconfirm>
</div>
</div>
)
);
const SortableList = SortableContainer(
({ items }: { items: { data: IBlockType[]; config: UserConfig; intl: IntlShape } }) => {
return (
<div>
{items.data.map((value, index: number) => (
<SortableItem
key={value.id}
index={index}
value={{ value, config: items.config, intl: items.intl }}
/>
))}
</div>
);
}
);
const moveState = {
startX: 0,
startY: 0,
isMove: false,
};
const mouseUp = () => {
if (moveState.isMove) {
moveState.isMove = false;
}
};
export function Control(props: PropsWithChildren<ControlProps>) {
const { style } = props;
const [visible, setVisible] = useState(false);
const [configVisible, setConfigVisible] = useState(false);
const [form] = Form.useForm();
const data = props.config.getStore().getData().block;
const onSortEnd = (sort: SortEnd) => {
const { oldIndex, newIndex } = sort;
const newblocks: IBlockType[] = arrayMove(data, oldIndex, newIndex);
// 这里要判断是否edit ,如果edit时，只要看第一个是不是container，不是则不移动
const isEdit = props.config.getStoreChanger().isEdit();
if (isEdit) {
const firstType = newblocks[0].name;
if (firstType !== 'modalMask') {
return;
}
}
const store = props.config.getStore();
const cloneData: IStoreData = deepCopy(store.getData());
cloneData.block = newblocks;
store.setData(cloneData);
};
const intl = useIntl();
const content =
data.length === 0 ? (
<div>
<FormattedMessage id="control.no-component" defaultMessage="暂无组件"></FormattedMessage>
</div>
) : (
<div style={{ maxHeight: 300, overflow: 'auto' }}>
<SortableList
distance={2}
useDragHandle
items={{
data,
config: props.config,
intl: intl,
}}
onSortEnd={onSortEnd}
axis="y"
></SortableList>
</div>
);
const [xy, setXy] = useState({ x: 0, y: 0 });
return (
<>
<div
className="ant-menu"
onMouseDown={(e) => {
moveState.startX = e.clientX;
moveState.startY = e.clientY;
moveState.isMove = true;
}}
onMouseMove={(e) => {
if (moveState.isMove) {
const diffx = e.clientX - moveState.startX;
const diffy = e.clientY - moveState.startY;
setXy((pre) => ({ x: pre.x + diffx, y: pre.y + diffy }));
moveState.startX = e.clientX;
moveState.startY = e.clientY;
}
}}
onMouseUp={mouseUp}
onMouseLeave={mouseUp}
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
transform: `translate(${xy.x}px,${xy.y}px)`,
...style,
}}
>
<Popover style={{ minWidth: '208px' }} content={content} trigger="click">
<Button icon={<UnorderedListOutlined />}></Button>
</Popover>
<Button
icon={<LayoutOutlined />}
onClick={() => {
props.config.ticker = !props.config.ticker;
props.config.getStore().forceUpdate();
}}
></Button>
<Popover
placement="left"
content={
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
>
<Button
onClick={() => {
setVisible(true);
}}
style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
<FormattedMessage id="modal.new" defaultMessage="新建弹窗"></FormattedMessage>
</Button>
<Button
onClick={() => {
setConfigVisible(true);
}}
style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
<FormattedMessage id="modal.control" defaultMessage="弹窗配置"></FormattedMessage>
</Button>
</div>
}
>
<Button icon={<GatewayOutlined />}></Button>
</Popover>
<Button
icon={<VideoCameraOutlined />}
onClick={() => {
props.config.timeline = !props.config.timeline;
props.config.getStore().forceUpdate();
}}
></Button>
<Button
icon={<SyncOutlined />}
onClick={() => {
wrapperMoveState.needX = 0;
wrapperMoveState.needY = 0;
props.config.getStore().forceUpdate();
}}
></Button>
</div>
<Modal
title={intl.formatMessage({ id: 'modal.control', defaultMessage: '弹窗配置' })}
visible={configVisible}
onOk={() => setConfigVisible(false)}
onCancel={() => setConfigVisible(false)}
footer={null}
>
<List>
{props.config.getStoreChanger().getState().modalEditName !== '' && (
<div>
<FormattedMessage
id="modal.popup.exit"
defaultMessage="请退出编辑弹窗后再打开该配置"
></FormattedMessage>
</div>
)}
{props.config.getStoreChanger().getState().modalEditName === '' &&
Object.keys(props.config.getStore().getData().modalMap).map((v) => {
return (
<List.Item
key={v}
actions={[
<Popconfirm
title={intl.formatMessage({
id: 'modal.popup.edit',
defaultMessage: '是否切换至该弹窗并进行编辑?',
})}
onConfirm={() => {
const sign = props.config
.getStoreChanger()
.updateModal(props.config.getStore(), v);
if (!sign.success && sign.sign === 0) {
message.error(
intl.formatMessage({
id: 'modal.popup.save',
defaultMessage: '请保存弹窗后编辑其他弹窗',
})
);
}
if (!sign.success && sign.sign === 1) {
message.error(
intl.formatMessage(
{
id: 'modal.popup.notfond',
defaultMessage: '未找到该弹窗 {name}',
},
{
name: sign.param,
}
)
);
}
setConfigVisible(false);
}}
okText={intl.formatMessage({ id: 'yes' })}
cancelText={intl.formatMessage({ id: 'no' })}
>
<Button type="link">修改</Button>
</Popconfirm>,
<Popconfirm
title="您确定要删除这个弹窗吗?"
onConfirm={() => {
const sign = props.config
.getStoreChanger()
.removeModal(props.config.getStore(), v);
if (!sign.success && sign.sign === 0) {
message.error(
intl.formatMessage({
id: 'modal.popup.save',
defaultMessage: '请保存弹窗后编辑其他弹窗',
})
);
}
if (!sign.success && sign.sign === 1) {
message.error(
intl.formatMessage(
{
id: 'modal.popup.notfond',
defaultMessage: '未找到该弹窗 {name}',
},
{
name: sign.param,
}
)
);
}
setConfigVisible(false);
}}
okText={intl.formatMessage({ id: 'yes' })}
cancelText={intl.formatMessage({ id: 'no' })}
>
<Button type="link">
<FormattedMessage
id="control.delete"
defaultMessage="删除"
></FormattedMessage>
</Button>
</Popconfirm>,
]}
>
{v}
</List.Item>
);
})}
{props.config.getStoreChanger().getState().modalEditName === '' &&
Object.keys(props.config.getStore().getData().modalMap).length === 0 && (
<div style={{ textAlign: 'center' }}>
<FormattedMessage id="modal.popup.nomodal"></FormattedMessage>
</div>
)}
</List>
</Modal>
<Modal
onOk={() => {
form
.validateFields()
.then((values) => {
form.resetFields();
const modalName = values.modalName;
const sign = props.config
.getStoreChanger()
.newModalMap(props.config.getStore(), modalName);
if (sign.succeess && sign.sign === 0) {
message.error(
intl.formatMessage({
id: 'modal.popup.save',
defaultMessage: '请保存弹窗后编辑其他弹窗',
})
);
}
if (sign.succeess && sign.sign === 1) {
message.error(
intl.formatMessage(
{
id: 'modal.popup.repeat',
defaultMessage: '已有重名弹窗 {name}',
},
{
name: sign.param,
}
)
);
}
setVisible(false);
})
.catch((info) => {
console.log('Validate Failed:', info);
});
}}
title={intl.formatMessage({ id: 'modal.new', defaultMessage: '新增弹窗' })}
onCancel={() => setVisible(false)}
visible={visible}
>
<Form layout="vertical" name="basic" form={form}>
<Form.Item
label={intl.formatMessage({ id: 'modal.name', defaultMessage: '弹窗名称' })}
name="modalName"
rules={[
{
required: true,
message: intl.formatMessage({
id: 'modal.popup.name',
defaultMessage: '请输入弹窗名称!',
}),
},
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</>
);
}
export default Control;

276
packages/dooringx-lib/src/components/control/control.tsx Normal file
View File

@@ -0,0 +1,276 @@
import {
GatewayOutlined,
LayoutOutlined,
SyncOutlined,
UnorderedListOutlined,
VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Form, Input, List, message, Modal, Popconfirm, Popover } from 'antd';
import React, { CSSProperties, PropsWithChildren, useState } from 'react';
import { UserConfig } from '../..';
import { wrapperMoveState } from '../wrapperMove/event';
import { replaceLocale } from '../../locale';
import { mouseUp, moveState } from './state';
export interface ControlProps {
config: UserConfig;
style?: CSSProperties;
}
export function Control(props: PropsWithChildren<ControlProps>) {
const { style } = props;
const [visible, setVisible] = useState(false);
const [configVisible, setConfigVisible] = useState(false);
const [form] = Form.useForm();
const [xy, setXy] = useState({ x: 0, y: 0 });
return (
<>
<div
className="ant-menu"
onMouseUp={mouseUp}
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
transform: `translate(${xy.x}px,${xy.y}px)`,
...style,
}}
>
<Button
onMouseDown={(e) => {
moveState.startX = e.clientX;
moveState.startY = e.clientY;
moveState.fn = setXy;
moveState.isMove = true;
}}
type="text"
style={{ cursor: 'move' }}
icon={<UnorderedListOutlined />}
></Button>
<Button
icon={<LayoutOutlined />}
onClick={() => {
props.config.ticker = !props.config.ticker;
props.config.getStore().forceUpdate();
}}
></Button>
<Popover
placement="left"
content={
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
}}
>
<Button
onClick={() => {
setVisible(true);
}}
style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
{replaceLocale('modal.new', '新建弹窗', props.config)}
</Button>
<Button
onClick={() => {
setConfigVisible(true);
}}
style={{ width: '100px', overflow: 'hidden', textOverflow: 'ellipsis' }}
>
{replaceLocale('modal.control', '弹窗配置', props.config)}
</Button>
</div>
}
>
<Button icon={<GatewayOutlined />}></Button>
</Popover>
<Button
icon={<VideoCameraOutlined />}
onClick={() => {
props.config.timeline = !props.config.timeline;
props.config.getStore().forceUpdate();
}}
></Button>
<Button
icon={<SyncOutlined />}
onClick={() => {
wrapperMoveState.needX = 0;
wrapperMoveState.needY = 0;
props.config.getStore().forceUpdate();
}}
></Button>
</div>
<Modal
title={replaceLocale('modal.control', '弹窗配置', props.config)}
visible={configVisible}
onOk={() => setConfigVisible(false)}
onCancel={() => setConfigVisible(false)}
footer={null}
>
<List>
{props.config.getStoreChanger().getState().modalEditName !== '' && (
<div>
{replaceLocale('modal.popup.exit', '请退出编辑弹窗后再打开该配置', props.config)}
</div>
)}
{props.config.getStoreChanger().getState().modalEditName === '' &&
Object.keys(props.config.getStore().getData().modalMap).map((v) => {
return (
<List.Item
key={v}
actions={[
<Popconfirm
title={replaceLocale(
'modal.popup.edit',
'是否切换至该弹窗并进行编辑?',
props.config
)}
onConfirm={() => {
const sign = props.config
.getStoreChanger()
.updateModal(props.config.getStore(), v);
if (!sign.success && sign.sign === 0) {
message.error(
replaceLocale(
'modal.popup.save',
'请保存弹窗后编辑其他弹窗',
props.config
)
);
}
if (!sign.success && sign.sign === 1) {
message.error(
replaceLocale(
'modal.popup.notfond',
`未找到该弹窗 ${sign.param}`,
props.config,
{ name: sign.param },
'未找到该弹窗 {name}'
)
);
}
setConfigVisible(false);
}}
okText={replaceLocale('yes', '确定', props.config)}
cancelText={replaceLocale('no', '取消', props.config)}
>
<Button type="link">修改</Button>
</Popconfirm>,
<Popconfirm
title="您确定要删除这个弹窗吗?"
onConfirm={() => {
const sign = props.config
.getStoreChanger()
.removeModal(props.config.getStore(), v);
if (!sign.success && sign.sign === 0) {
message.error(
replaceLocale(
'modal.popup.save',
'请保存弹窗后编辑其他弹窗',
props.config
)
);
}
if (!sign.success && sign.sign === 1) {
message.error(
replaceLocale(
'modal.popup.notfond',
`未找到该弹窗 ${sign.param}`,
props.config,
{ name: sign.param },
'未找到该弹窗 {name}'
)
);
}
setConfigVisible(false);
}}
okText={replaceLocale('yes', '确定', props.config)}
cancelText={replaceLocale('no', '取消', props.config)}
>
<Button type="link">
{replaceLocale('control.delete', `删除`, props.config)}
</Button>
</Popconfirm>,
]}
>
{v}
</List.Item>
);
})}
{props.config.getStoreChanger().getState().modalEditName === '' &&
Object.keys(props.config.getStore().getData().modalMap).length === 0 && (
<div style={{ textAlign: 'center' }}>
{replaceLocale('modal.popup.nomodal', `暂时没有弹窗`, props.config)}
</div>
)}
</List>
</Modal>
<Modal
okText={replaceLocale('yes', '确定', props.config)}
cancelText={replaceLocale('no', '取消', props.config)}
onOk={() => {
form
.validateFields()
.then((values) => {
form.resetFields();
const modalName = values.modalName;
const sign = props.config
.getStoreChanger()
.newModalMap(props.config.getStore(), modalName);
if (!sign.succeess && sign.sign === 0) {
message.error(
replaceLocale('modal.popup.save', `请保存弹窗后编辑其他弹窗`, props.config)
);
}
if (!sign.succeess && sign.sign === 1) {
message.error(
replaceLocale(
'modal.popup.repeat',
`已有重名弹窗 ${sign.param}`,
props.config,
{
name: sign.param,
},
'已有重名弹窗 {name}'
)
);
}
setVisible(false);
})
.catch((info) => {
console.log('Validate Failed:', info);
});
}}
title={replaceLocale('modal.new', '新增弹窗', props.config)}
onCancel={() => setVisible(false)}
visible={visible}
>
<Form layout="vertical" name="basic" form={form}>
<Form.Item
label={replaceLocale('modal.name', '弹窗名称', props.config)}
name="modalName"
rules={[
{
required: true,
message: replaceLocale('modal.popup.name', '请输入弹窗名称!', props.config),
},
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</>
);
}
export default Control;

10
packages/dooringx-lib/src/components/control/index.ts Normal file
View File

@@ -0,0 +1,10 @@
/*
* @Author: yehuozhili
* @Date: 2021-09-27 20:57:27
* @LastEditors: yehuozhili
* @LastEditTime: 2021-09-27 20:59:34
* @FilePath: \dooringx\packages\dooringx-lib\src\components\control\index.ts
*/
import Control from './control';
export default Control;

38
packages/dooringx-lib/src/components/control/state.ts Normal file
View File

@@ -0,0 +1,38 @@
/*
* @Author: yehuozhili
* @Date: 2021-09-27 20:56:21
* @LastEditors: yehuozhili
* @LastEditTime: 2021-09-27 20:57:01
* @FilePath: \dooringx\packages\dooringx-lib\src\components\control\state.ts
*/
interface MoveStateType {
startX: number;
startY: number;
fn: Function;
isMove: boolean;
}
export const moveState: MoveStateType = {
startX: 0,
startY: 0,
fn: () => {},
isMove: false,
};
export const mouseUp = () => {
if (moveState.isMove) {
moveState.isMove = false;
}
};
export const controlMouseMove = (e: React.MouseEvent) => {
if (moveState.isMove) {
const diffx = e.clientX - moveState.startX;
const diffy = e.clientY - moveState.startY;
const setXy = moveState.fn;
if (setXy) setXy((pre: { x: number; y: number }) => ({ x: pre.x + diffx, y: pre.y + diffy }));
moveState.startX = e.clientX;
moveState.startY = e.clientY;
}
};

36
packages/dooringx-lib/src/components/rightConfig.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-14 05:42:13 * @Date: 2021-03-14 05:42:13
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 16:20:29 * @LastEditTime: 2021-09-27 20:33:04
* @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\components\rightConfig.tsx
*/ */
import { CreateOptionsRes } from '../core/components/formTypes'; import { CreateOptionsRes } from '../core/components/formTypes';
@@ -14,7 +14,7 @@ import UserConfig from '../config';
import { RGBColor, SketchPicker } from 'react-color'; import { RGBColor, SketchPicker } from 'react-color';
import { rgba2Obj } from '../core/utils'; import { rgba2Obj } from '../core/utils';
import deepcopy from 'deepcopy'; import deepcopy from 'deepcopy';
import { FormattedMessage } from 'react-intl'; import { replaceLocale } from '../locale';
const colStyle: CSSProperties = { const colStyle: CSSProperties = {
display: 'flex', display: 'flex',
@@ -84,14 +84,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
); );
}); });
} else { } else {
return ( return <div>{replaceLocale('right.noprops', '还没有配置属性', props.config)}</div>;
<div>
<FormattedMessage
id="right.noprops"
defaultMessage="还没有配置属性"
></FormattedMessage>
</div>
);
} }
} }
return null; return null;
@@ -164,11 +157,11 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
{!current && !isEdit && !customGlobal && ( {!current && !isEdit && !customGlobal && (
<div style={{ padding: '20px' }}> <div style={{ padding: '20px' }}>
<Row style={{ padding: '10px 0 20px 0', fontWeight: 'bold', userSelect: 'none' }}> <Row style={{ padding: '10px 0 20px 0', fontWeight: 'bold', userSelect: 'none' }}>
<FormattedMessage id="right.global" defaultMessage="全局设置"></FormattedMessage> {replaceLocale('right.global', '全局设置', props.config)}
</Row> </Row>
<Row style={{ padding: '10px 0' }}> <Row style={{ padding: '10px 0' }}>
<Col span={6} style={{ userSelect: 'none' }}> <Col span={6} style={{ userSelect: 'none' }}>
<FormattedMessage id="title" defaultMessage="标题"></FormattedMessage> {replaceLocale('title', '标题', props.config)}
</Col> </Col>
<Col span={18} style={colStyle}> <Col span={18} style={colStyle}>
<Input <Input
@@ -194,10 +187,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
</Row> </Row>
<Row style={{ padding: '10px 0' }}> <Row style={{ padding: '10px 0' }}>
<Col span={6} style={{ userSelect: 'none' }}> <Col span={6} style={{ userSelect: 'none' }}>
<FormattedMessage {replaceLocale('right.containerheight', '容器高度', props.config)}
id="right.containerheight"
defaultMessage="容器高度"
></FormattedMessage>
</Col> </Col>
<Col span={18} style={colStyle}> <Col span={18} style={colStyle}>
<InputNumber <InputNumber
@@ -223,10 +213,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
</Row> </Row>
<Row style={{ padding: '10px 0' }}> <Row style={{ padding: '10px 0' }}>
<Col span={6} style={{ userSelect: 'none' }}> <Col span={6} style={{ userSelect: 'none' }}>
<FormattedMessage {replaceLocale('right.containerColor', '容器底色', props.config)}
id="right.containerColor"
defaultMessage="容器底色"
></FormattedMessage>
</Col> </Col>
<Col span={18} style={colStyle}> <Col span={18} style={colStyle}>
{ {
@@ -300,7 +287,7 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
</Row> </Row>
<Row style={{ padding: '10px 0' }}> <Row style={{ padding: '10px 0' }}>
<Col span={6} style={{ userSelect: 'none' }}> <Col span={6} style={{ userSelect: 'none' }}>
<FormattedMessage id="right.bodyColor" defaultMessage="body底色"></FormattedMessage> {replaceLocale('right.bodyColor', 'body底色', props.config)}
</Col> </Col>
<Col span={18} style={colStyle}> <Col span={18} style={colStyle}>
{ {
@@ -378,14 +365,11 @@ function RightConfig(props: PropsWithChildren<RightConfigProps>) {
{!current && isEdit && ( {!current && isEdit && (
<div style={{ padding: '20px' }} className="yh-tcsz"> <div style={{ padding: '20px' }} className="yh-tcsz">
<Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}> <Row style={{ padding: '10 0 20px 0', fontWeight: 'bold' }}>
<FormattedMessage id="modal.control" defaultMessage="弹窗配置"></FormattedMessage> {replaceLocale('modal.control', '弹窗配置', props.config)}
</Row> </Row>
<Row style={{ padding: '10px 0' }}> <Row style={{ padding: '10px 0' }}>
<Col span={8}> <Col span={8}>
<FormattedMessage {replaceLocale('modal.control.remove', '取消点击删除弹窗', props.config)}
id="modal.control.remove"
defaultMessage="取消点击删除弹窗"
></FormattedMessage>
</Col> </Col>
<Col span={16} style={{ ...colStyle }}> <Col span={16} style={{ ...colStyle }}>
<Checkbox <Checkbox

26
packages/dooringx-lib/src/components/timeLine/timeline.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-08-09 15:15:25 * @Date: 2021-08-09 15:15:25
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 14:16:07 * @LastEditTime: 2021-09-27 21:41:20
* @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\components\timeLine\timeline.tsx
*/ */
import deepcopy from 'deepcopy'; import deepcopy from 'deepcopy';
@@ -11,7 +11,7 @@ import { SortableContainer, SortableElement, SortableHandle, SortEnd } from 'rea
import UserConfig from '../../config'; import UserConfig from '../../config';
import { IBlockType, IStoreData } from '../../core/store/storetype'; import { IBlockType, IStoreData } from '../../core/store/storetype';
import { arrayMove } from '../../core/utils'; import { arrayMove } from '../../core/utils';
import { MenuOutlined, PlayCircleOutlined } from '@ant-design/icons'; import { DeleteOutlined, MenuOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { import {
TimeLineItem, TimeLineItem,
itemHeight, itemHeight,
@@ -21,7 +21,8 @@ import {
iter, iter,
} from './timelineItem'; } from './timelineItem';
import { specialCoList } from '../../core/utils/special'; import { specialCoList } from '../../core/utils/special';
import { FormattedMessage } from 'react-intl'; import { replaceLocale } from '../../locale';
import { Popconfirm } from 'antd';
export interface TimeLineProps { export interface TimeLineProps {
style?: CSSProperties; style?: CSSProperties;
@@ -81,6 +82,23 @@ const SortableItem = SortableElement(
</div> </div>
<div>{value.config.getComponentRegister().getMap()[value.value.name].display}</div> <div>{value.config.getComponentRegister().getMap()[value.value.name].display}</div>
<div>{value.value.id.slice(-6)}</div> <div>{value.value.id.slice(-6)}</div>
<div style={{ marginLeft: 5 }}>
<Popconfirm
title={replaceLocale('control.popup.delete', '确认删除么', value.config)}
onConfirm={() => {
const store = value.config.getStore();
const clone = deepcopy(store.getData());
clone.block = clone.block.filter((v) => {
return !(v.id === value.value.id && !specialCoList.includes(value.value.name));
});
store.setData(clone);
}}
okText={replaceLocale('yes', '确定', value.config)}
cancelText={replaceLocale('no', '取消', value.config)}
>
<DeleteOutlined />
</Popconfirm>
</div>
</div> </div>
</div> </div>
) )
@@ -182,7 +200,7 @@ export function TimeLine(props: TimeLineProps) {
height: itemHeight, height: itemHeight,
}} }}
> >
<FormattedMessage id="timeline.name" defaultMessage="组件名称"></FormattedMessage> {replaceLocale('timeline.name', '组件名称', props.config)}
<span <span
title="play" title="play"
style={{ style={{

3
packages/dooringx-lib/src/config/index.tsx
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-02-25 21:16:58 * @Date: 2021-02-25 21:16:58
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-19 16:17:39 * @LastEditTime: 2021-09-27 17:34:21
* @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx * @FilePath: \dooringx\packages\dooringx-lib\src\config\index.tsx
*/ */
import React from 'react'; import React from 'react';
@@ -354,6 +354,7 @@ export class UserConfig {
}; };
public iframeOrigin = ''; public iframeOrigin = '';
public iframeId = 'yh-container-iframe'; public iframeId = 'yh-container-iframe';
public i18n = true;
constructor(initConfig?: Partial<InitConfig>) { constructor(initConfig?: Partial<InitConfig>) {
const mergeConfig = userConfigMerge(defaultConfig, initConfig); const mergeConfig = userConfigMerge(defaultConfig, initConfig);
this.initConfig = mergeConfig; this.initConfig = mergeConfig;

4
packages/dooringx-lib/src/core/resizeHandler/containerResizer.ts
View File

@@ -2,10 +2,11 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-03-09 15:19:36 * @Date: 2021-03-09 15:19:36
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-09 14:37:55 * @LastEditTime: 2021-09-27 20:58:13
* @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts * @FilePath: \dooringx\packages\dooringx-lib\src\core\resizeHandler\containerResizer.ts
*/ */
import { controlMouseMove } from '../../components/control/state';
import UserConfig from '../../config'; import UserConfig from '../../config';
import { IStoreData } from '../store/storetype'; import { IStoreData } from '../store/storetype';
import { deepCopy } from '../utils'; import { deepCopy } from '../utils';
@@ -39,6 +40,7 @@ export const containerResizer = {
store.setData(clonedata); store.setData(clonedata);
containerState.startY = e.clientY; containerState.startY = e.clientY;
} }
controlMouseMove(e);
}, },
onMouseUp: (config: UserConfig) => { onMouseUp: (config: UserConfig) => {
if (containerState.isDrag) { if (containerState.isDrag) {

4
packages/dooringx-lib/src/index.tsx
View File

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

4
packages/dooringx-lib/src/locale/en.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-08-27 10:20:23 * @Date: 2021-08-27 10:20:23
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 16:06:49 * @LastEditTime: 2021-09-27 21:11:51
* @FilePath: \dooringx\packages\dooringx-lib\src\locale\en.ts * @FilePath: \dooringx\packages\dooringx-lib\src\locale\en.ts
*/ */
@@ -37,5 +37,5 @@ export const en: typeof zhCN = {
'right.containerheight': 'Container height', 'right.containerheight': 'Container height',
'right.containerColor': 'Container background color', 'right.containerColor': 'Container background color',
'right.bodyColor': 'Body background color', 'right.bodyColor': 'Body background color',
title: 'title', title: 'Title',
}; };

18
packages/dooringx-lib/src/locale/index.ts
View File

@@ -1,18 +0,0 @@
/*
* @Author: yehuozhili
* @Date: 2021-08-27 10:20:38
* @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 14:30:05
* @FilePath: \dooringx\packages\dooringx-lib\src\locale\index.ts
*/
import { en } from './en';
import { zhCN } from './zh-CN';
export const localeMap = {
'zh-CN': zhCN,
en,
};
export type localeKey = keyof typeof localeMap;
export { en } from './en';
export { zhCN } from './zh-CN';

39
packages/dooringx-lib/src/locale/index.tsx Normal file
View File

@@ -0,0 +1,39 @@
/*
* @Author: yehuozhili
* @Date: 2021-08-27 10:20:38
* @LastEditors: yehuozhili
* @LastEditTime: 2021-09-27 18:08:49
* @FilePath: \dooringx\packages\dooringx-lib\src\locale\index.tsx
*/
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { UserConfig } from '..';
import { en } from './en';
import { zhCN } from './zh-CN';
export const localeMap = {
'zh-CN': zhCN,
en,
};
export type localeKey = keyof typeof localeMap;
export { en } from './en';
export { zhCN } from './zh-CN';
export const replaceLocale = (
id: string,
msg: string,
config: UserConfig,
param?: any,
paramString?: string
) => {
if (config.i18n) {
if (paramString) {
return (
<FormattedMessage id={id} defaultMessage={paramString} values={param}></FormattedMessage>
);
}
return <FormattedMessage id={id} defaultMessage={msg}></FormattedMessage>;
}
return msg;
};

6
packages/dooringx-lib/src/locale/zh-CN.ts
View File

@@ -2,7 +2,7 @@
* @Author: yehuozhili * @Author: yehuozhili
* @Date: 2021-08-27 10:20:15 * @Date: 2021-08-27 10:20:15
* @LastEditors: yehuozhili * @LastEditors: yehuozhili
* @LastEditTime: 2021-08-27 16:06:45 * @LastEditTime: 2021-09-27 21:11:43
* @FilePath: \dooringx\packages\dooringx-lib\src\locale\zh-CN.ts * @FilePath: \dooringx\packages\dooringx-lib\src\locale\zh-CN.ts
*/ */
export const zhCN = { export const zhCN = {
@@ -27,8 +27,8 @@ export const zhCN = {
'modal.popup.name': '请输入弹窗名称', 'modal.popup.name': '请输入弹窗名称',
'modal.name': '弹窗名称', 'modal.name': '弹窗名称',
'modal.control.remove': '取消点击删除弹窗', 'modal.control.remove': '取消点击删除弹窗',
yes: '是', yes: '确定',
no: '否', no: '取消',
'right.noprops': '还没有配置属性', 'right.noprops': '还没有配置属性',
'right.global': '全局设置', 'right.global': '全局设置',
'right.containerheight': '容器高度', 'right.containerheight': '容器高度',