update doc
This commit is contained in:
@@ -15,6 +15,10 @@ const ContextMenu = () => {
|
||||
const handleclick = () => {
|
||||
unmountContextMenu();
|
||||
};
|
||||
const forceUpdate = useState(0)[1];
|
||||
contextMenuState.forceUpdate = () => {
|
||||
forceUpdate((pre) => pre + 1);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@@ -42,4 +46,6 @@ contextMenuState.contextMenu = <ContextMenu></ContextMenu>;
|
||||
|
||||
所以在点击后需要调用关闭。
|
||||
|
||||
同时上面的left和top是右键的位置。
|
||||
同时上面的left和top是右键的位置。
|
||||
|
||||
另外,你还需要在组件内增加个强刷赋值给forceUpdate,用于在组件移动时进行跟随。
|
@@ -2,17 +2,16 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-07 14:51:17
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-10 19:07:10
|
||||
* @LastEditTime: 2021-07-13 19:55:15
|
||||
* @FilePath: \dooringx\packages\dooringx-example\src\layouts\index.tsx
|
||||
*/
|
||||
import { Button } from 'antd';
|
||||
import { UserConfig } from 'dooringx-lib/dist';
|
||||
import { UserConfig } from 'dooringx-lib';
|
||||
import 'dooringx-lib/dist/dooringx-lib.esm.css';
|
||||
import { createContext } from 'react';
|
||||
import { createContext, useState } from 'react';
|
||||
import { IRouteComponentProps } from 'umi';
|
||||
import plugin from '../plugin';
|
||||
import 'antd/dist/antd.css';
|
||||
import 'dooringx-lib/dist/dooringx-lib.esm';
|
||||
import '../global.less';
|
||||
import 'animate.css';
|
||||
|
||||
@@ -26,6 +25,10 @@ const ContextMenu = () => {
|
||||
const handleclick = () => {
|
||||
unmountContextMenu();
|
||||
};
|
||||
const forceUpdate = useState(0)[1];
|
||||
contextMenuState.forceUpdate = () => {
|
||||
forceUpdate((pre) => pre + 1);
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
|
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"version": "0.4.1",
|
||||
"version": "0.4.2",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/dooringx-lib.esm.js",
|
||||
@@ -44,10 +44,10 @@
|
||||
"tsdx": "^0.14.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.3.1",
|
||||
"deepcopy": "^2.1.0",
|
||||
"nanoid": "^3.1.23",
|
||||
"react-color": "^2.19.3",
|
||||
"react-sortable-hoc": "^2.0.0",
|
||||
"uuid": "^8.3.2"
|
||||
"react-sortable-hoc": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
@@ -2,7 +2,7 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-03-14 04:29:09
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-12 20:31:47
|
||||
* @LastEditTime: 2021-07-13 19:57:45
|
||||
* @FilePath: \dooringx\packages\dooringx-lib\src\core\contextMenu\index.tsx
|
||||
*/
|
||||
import { Button } from 'antd';
|
||||
|
@@ -145,90 +145,41 @@ export const resizerMouseMove = (e: React.MouseEvent, config: UserConfig) => {
|
||||
}
|
||||
};
|
||||
|
||||
const directionArr: directionType[] = [
|
||||
'top',
|
||||
'topleft',
|
||||
'left',
|
||||
'topright',
|
||||
'bottomleft',
|
||||
'bottom',
|
||||
'right',
|
||||
'bottomright',
|
||||
];
|
||||
|
||||
export function BlockResizer(props: BlockResizerProps) {
|
||||
const render = useMemo(() => {
|
||||
if (props.data.focus && props.data.resize) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.top)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'top', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.topleft)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'topleft', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.left)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'left', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.topright)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'topright', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.bottomleft)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'bottomleft', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.bottom)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'bottom', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.right)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'right', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles.bottomright)}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, 'bottomright', props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
{directionArr.map((v) => {
|
||||
return (
|
||||
<div
|
||||
className={classnames(styles.resizepoint, styles[v])}
|
||||
onMouseDown={(e) => {
|
||||
onMouseDown(e, v, props.data, props.rect, props.config);
|
||||
}}
|
||||
onMouseUp={() => {
|
||||
resizerMouseUp(props.config);
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.data.focus, props.data.resize]);
|
||||
}, [props.config, props.data, props.rect]);
|
||||
|
||||
return <>{render}</>;
|
||||
}
|
||||
|
@@ -4692,7 +4692,7 @@ class-utils@^0.3.5:
|
||||
isobject "^3.0.0"
|
||||
static-extend "^0.1.1"
|
||||
|
||||
classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5, classnames@^2.2.6:
|
||||
classnames@2.x, classnames@^2.2.0, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.4, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
|
||||
|
Reference in New Issue
Block a user