@bit.rhplus/draggable-modal 0.0.2 → 0.0.4

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.
Files changed (8) hide show
  1. package/dist/index.d.ts +2 -1
  2. package/dist/index.js +4 -6
  3. package/dist/index.js.map +1 -1
  4. package/dist/style.css +8 -1
  5. package/index.jsx +44 -43
  6. package/package.json +5 -4
  7. package/style.css +8 -1
  8. /package/dist/{preview-1727862136329.js → preview-1743430723059.js} +0 -0
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export default DraggableModal;
2
- declare function DraggableModal(props: any): import("react/jsx-runtime").JSX.Element;
2
+ declare function DraggableModal(props: any): React.ReactPortal | null;
3
+ import * as React from 'react';
package/dist/index.js CHANGED
@@ -2,9 +2,10 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as React from 'react';
3
3
  import { Modal } from 'antd';
4
4
  import Draggable from 'react-draggable';
5
+ import ReactDOM from 'react-dom';
5
6
  import './style.css';
6
7
  const DraggableModal = (props) => {
7
- const { open, onOk, onCancel, isInteractive = false, title, children } = props;
8
+ const { open, onOk, onCancel, isInteractive = false, title, children, getContainer } = props;
8
9
  const draggleRef = React.useRef(null);
9
10
  const [disabled, setDisabled] = React.useState(true);
10
11
  const [bounds, setBounds] = React.useState({
@@ -31,16 +32,13 @@ const DraggableModal = (props) => {
31
32
  bottom: clientHeight - (targetRect.bottom - uiData.y),
32
33
  });
33
34
  };
34
- return (_jsx(Modal, { ...props, mask: !isInteractive, title: _jsx("div", { style: {
35
- width: '100%',
36
- cursor: 'move',
37
- }, onMouseOver: () => {
35
+ return (open && getContainer ? (ReactDOM.createPortal(_jsx(Modal, { ...props, mask: !isInteractive, getContainer: false, title: _jsx("div", { style: { width: '100%', cursor: 'move' }, onMouseOver: () => {
38
36
  if (disabled) {
39
37
  setDisabled(false);
40
38
  }
41
39
  }, onMouseOut: () => {
42
40
  setDisabled(true);
43
- }, onFocus: () => { }, onBlur: () => { }, end: true, children: title }), open: open, onOk: onOk, onCancel: onCancel, 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 }) }));
41
+ }, onFocus: () => { }, onBlur: () => { }, children: title }), open: open, onOk: onOk, onCancel: onCancel, styles: { body: { paddingBottom: '30px' } }, 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);
44
42
  };
45
43
  export default DraggableModal;
46
44
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../index.jsx"],"names":[],"mappings":"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"}
package/dist/style.css CHANGED
@@ -1,3 +1,10 @@
1
1
  .ant-modal-content {
2
2
  box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 2.15) !important;
3
- }
3
+ }
4
+
5
+ .ant-modal-footer {
6
+ display: flex;
7
+ justify-content: flex-end; /* Tlačítka na pravou stranu */
8
+ gap: 8px; /* Mezery mezi tlačítky */
9
+ padding-top: 50px;
10
+ }
package/index.jsx CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from 'react';
2
2
  import { Modal } from 'antd';
3
3
  import Draggable from 'react-draggable';
4
+ import ReactDOM from 'react-dom';
4
5
  import './style.css';
5
6
 
6
7
  const DraggableModal = (props) => {
7
- const { open, onOk, onCancel, isInteractive = false, title, children } = props;
8
+ const { open, onOk, onCancel, isInteractive = false, title, children, getContainer } = props;
8
9
  const draggleRef = React.useRef(null);
9
10
  const [disabled, setDisabled] = React.useState(true);
10
11
  const [bounds, setBounds] = React.useState({
@@ -20,7 +21,6 @@ const DraggableModal = (props) => {
20
21
  }
21
22
  }, [isInteractive]);
22
23
 
23
-
24
24
  const onStart = (_event, uiData) => {
25
25
  const { clientWidth, clientHeight } = window.document.documentElement;
26
26
  const targetRect = draggleRef.current?.getBoundingClientRect();
@@ -36,47 +36,48 @@ const DraggableModal = (props) => {
36
36
  };
37
37
 
38
38
  return (
39
- <Modal
40
- {...props}
41
- mask={!isInteractive}
42
- title={
43
- <div
44
- style={{
45
- width: '100%',
46
- cursor: 'move',
47
- }}
48
- onMouseOver={() => {
49
- if (disabled) {
50
- setDisabled(false);
51
- }
52
- }}
53
- onMouseOut={() => {
54
- setDisabled(true);
55
- }}
56
- onFocus={() => { }}
57
- onBlur={() => { }}
58
- end
59
- >
60
- {title}
61
- </div>
62
- }
63
- open={open}
64
- onOk={onOk}
65
- onCancel={onCancel}
66
- modalRender={(modal) => (
67
- <Draggable
68
- disabled={disabled}
69
- bounds={bounds}
70
- onStart={(event, uiData) => onStart(event, uiData)}
71
- >
72
- <div ref={draggleRef}>{modal}</div>
73
- </Draggable>
74
- )}
75
- >
76
- <>
77
- {children}
78
- </>
79
- </Modal>
39
+ open && getContainer ? (
40
+ ReactDOM.createPortal(
41
+ <Modal
42
+ {...props}
43
+ mask={!isInteractive}
44
+ getContainer={false} // Zajistí, že modal bude přímo vložen do portálu
45
+ title={
46
+ <div
47
+ style={{ width: '100%', cursor: 'move' }}
48
+ onMouseOver={() => {
49
+ if (disabled) {
50
+ setDisabled(false);
51
+ }
52
+ }}
53
+ onMouseOut={() => {
54
+ setDisabled(true);
55
+ }}
56
+ onFocus={() => { }}
57
+ onBlur={() => { }}
58
+ >
59
+ {title}
60
+ </div>
61
+ }
62
+ open={open}
63
+ onOk={onOk}
64
+ onCancel={onCancel}
65
+ styles={{ body: { paddingBottom: '30px' } }}
66
+ modalRender={(modal) => (
67
+ <Draggable
68
+ disabled={disabled}
69
+ bounds={bounds}
70
+ onStart={(event, uiData) => onStart(event, uiData)}
71
+ >
72
+ <div ref={draggleRef}>{modal}</div>
73
+ </Draggable>
74
+ )}
75
+ >
76
+ <>{children}</>
77
+ </Modal>,
78
+ getContainer()
79
+ )
80
+ ) : null
80
81
  );
81
82
  };
82
83
 
package/package.json CHANGED
@@ -1,22 +1,23 @@
1
1
  {
2
2
  "name": "@bit.rhplus/draggable-modal",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
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.2"
9
+ "version": "0.0.4"
10
10
  },
11
11
  "dependencies": {
12
12
  "antd": "^5.20.6",
13
13
  "react-draggable": "^4.4.6"
14
14
  },
15
15
  "devDependencies": {
16
- "@teambit/react.react-env": "1.0.98"
16
+ "@teambit/react.react-env": "1.0.129"
17
17
  },
18
18
  "peerDependencies": {
19
- "react": "^17.0.0 || ^18.0.0"
19
+ "react": "^17.0.0 || ^18.0.0",
20
+ "react-dom": "^17.0.0 || ^18.0.0"
20
21
  },
21
22
  "license": "SEE LICENSE IN UNLICENSED",
22
23
  "optionalDependencies": {},
package/style.css CHANGED
@@ -1,3 +1,10 @@
1
1
  .ant-modal-content {
2
2
  box-shadow: 0px 0px 56px 0px rgba(0, 0, 0, 2.15) !important;
3
- }
3
+ }
4
+
5
+ .ant-modal-footer {
6
+ display: flex;
7
+ justify-content: flex-end; /* Tlačítka na pravou stranu */
8
+ gap: 8px; /* Mezery mezi tlačítky */
9
+ padding-top: 50px;
10
+ }