@bit.rhplus/draggable-modal 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import Draggable from 'react-draggable';
|
|
|
6
6
|
import ReactDOM from 'react-dom';
|
|
7
7
|
import './style.css';
|
|
8
8
|
const DraggableModal = (props) => {
|
|
9
|
-
const { open, onOk, onCancel, isInteractive = false, title, children, getContainer } = props;
|
|
9
|
+
const { open, onOk, onCancel, isInteractive = false, title, children, getContainer, height } = props;
|
|
10
10
|
const draggleRef = React.useRef(null);
|
|
11
11
|
const [disabled, setDisabled] = React.useState(true);
|
|
12
12
|
const [bounds, setBounds] = React.useState({
|
|
@@ -33,13 +33,28 @@ const DraggableModal = (props) => {
|
|
|
33
33
|
bottom: clientHeight - (targetRect.bottom - uiData.y),
|
|
34
34
|
});
|
|
35
35
|
};
|
|
36
|
-
return (open && getContainer ? (ReactDOM.createPortal(_jsx(Modal, { ...props, mask: !isInteractive, getContainer: false, title: _jsx("div", { style: { width: '100%', cursor: 'move' }, onMouseOver: () => {
|
|
36
|
+
return (open && getContainer ? (ReactDOM.createPortal(_jsx(Modal, { ...props, mask: !isInteractive, getContainer: false, zIndex: props.zIndex || 99999999, height: height, title: _jsx("div", { style: { width: '100%', cursor: 'move' }, onMouseOver: () => {
|
|
37
37
|
if (disabled) {
|
|
38
38
|
setDisabled(false);
|
|
39
39
|
}
|
|
40
40
|
}, onMouseOut: () => {
|
|
41
41
|
setDisabled(true);
|
|
42
|
-
}, onFocus: () => { }, onBlur: () => { }, children: title }), open: open, onOk: onOk, onCancel: onCancel, styles: {
|
|
42
|
+
}, onFocus: () => { }, onBlur: () => { }, children: title }), open: open, onOk: onOk, onCancel: onCancel, styles: {
|
|
43
|
+
body: {
|
|
44
|
+
paddingBottom: '30px',
|
|
45
|
+
...(height && {
|
|
46
|
+
height: `calc(${height} - 110px)`,
|
|
47
|
+
overflow: 'hidden',
|
|
48
|
+
display: 'flex',
|
|
49
|
+
flexDirection: 'column'
|
|
50
|
+
})
|
|
51
|
+
},
|
|
52
|
+
content: height ? {
|
|
53
|
+
height: height,
|
|
54
|
+
display: 'flex',
|
|
55
|
+
flexDirection: 'column'
|
|
56
|
+
} : {}
|
|
57
|
+
}, modalRender: (modal) => (_jsx(Draggable, { disabled: disabled, bounds: bounds, onStart: (event, uiData) => onStart(event, uiData), children: _jsx("div", { ref: draggleRef, children: modal }) })), children: _jsx(_Fragment, { children: children }) }), getContainer())) : null);
|
|
43
58
|
};
|
|
44
59
|
export default DraggableModal;
|
|
45
60
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":";AAAA,oBAAoB;AACpB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,aAAa,CAAC;AAGrB,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,EAAE;IAC/B,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
|
package/index.jsx
CHANGED
|
@@ -7,7 +7,7 @@ import './style.css';
|
|
|
7
7
|
|
|
8
8
|
|
|
9
9
|
const DraggableModal = (props) => {
|
|
10
|
-
const { open, onOk, onCancel, isInteractive = false, title, children, getContainer } = props;
|
|
10
|
+
const { open, onOk, onCancel, isInteractive = false, title, children, getContainer, height } = props;
|
|
11
11
|
const draggleRef = React.useRef(null);
|
|
12
12
|
const [disabled, setDisabled] = React.useState(true);
|
|
13
13
|
const [bounds, setBounds] = React.useState({
|
|
@@ -44,6 +44,8 @@ const DraggableModal = (props) => {
|
|
|
44
44
|
{...props}
|
|
45
45
|
mask={!isInteractive}
|
|
46
46
|
getContainer={false} // Zajistí, že modal bude přímo vložen do portálu
|
|
47
|
+
zIndex={props.zIndex || 99999999}
|
|
48
|
+
height={height}
|
|
47
49
|
title={
|
|
48
50
|
<div
|
|
49
51
|
style={{ width: '100%', cursor: 'move' }}
|
|
@@ -64,7 +66,22 @@ const DraggableModal = (props) => {
|
|
|
64
66
|
open={open}
|
|
65
67
|
onOk={onOk}
|
|
66
68
|
onCancel={onCancel}
|
|
67
|
-
styles={{
|
|
69
|
+
styles={{
|
|
70
|
+
body: {
|
|
71
|
+
paddingBottom: '30px',
|
|
72
|
+
...(height && {
|
|
73
|
+
height: `calc(${height} - 110px)`,
|
|
74
|
+
overflow: 'hidden',
|
|
75
|
+
display: 'flex',
|
|
76
|
+
flexDirection: 'column'
|
|
77
|
+
})
|
|
78
|
+
},
|
|
79
|
+
content: height ? {
|
|
80
|
+
height: height,
|
|
81
|
+
display: 'flex',
|
|
82
|
+
flexDirection: 'column'
|
|
83
|
+
} : {}
|
|
84
|
+
}}
|
|
68
85
|
modalRender={(modal) => (
|
|
69
86
|
<Draggable
|
|
70
87
|
disabled={disabled}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/draggable-modal",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/draggable-modal",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "draggable-modal",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.12"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"antd": "^5.20.6",
|
|
File without changes
|