@bit.rhplus/draggable-modal 0.0.2 → 0.0.3

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 -3
  3. package/dist/index.js.map +1 -1
  4. package/dist/style.css +8 -1
  5. package/index.jsx +50 -44
  6. package/package.json +4 -3
  7. package/style.css +8 -1
  8. /package/dist/{preview-1727862136329.js → preview-1728465798513.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,7 +32,7 @@ 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
+ return (open && getContainer ? (ReactDOM.createPortal(_jsx(Modal, { ...props, mask: !isInteractive, getContainer: false, title: _jsx("div", { style: {
35
36
  width: '100%',
36
37
  cursor: 'move',
37
38
  }, onMouseOver: () => {
@@ -40,7 +41,7 @@ const DraggableModal = (props) => {
40
41
  }
41
42
  }, onMouseOut: () => {
42
43
  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 }) }));
44
+ }, onFocus: () => { }, onBlur: () => { }, children: title }), open: open, onOk: onOk, onCancel: onCancel, bodyStyle: { 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
45
  };
45
46
  export default DraggableModal;
46
47
  //# 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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAC7B,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,aAAa,CAAC;AAErB,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,GAAG,KAAK,CAAC;IAC/E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC;QACzC,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,KAAK,EAAE,CAAC;KACT,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,CAAC,wBAAwB,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAGpB,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACjC,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC;QACtE,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC;QAC/D,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,SAAS,CAAC;YACR,IAAI,EAAE,CAAC,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;YACjC,KAAK,EAAE,WAAW,GAAG,CAAC,UAAU,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC;YAClD,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC;YAC/B,MAAM,EAAE,YAAY,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;SACtD,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,KAAK,OACA,KAAK,EACT,IAAI,EAAE,CAAC,aAAa,EACpB,KAAK,EACH,cACE,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,IAAI,QAAQ,EAAE,CAAC;oBACb,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC;YACH,CAAC,EACD,UAAU,EAAE,GAAG,EAAE;gBACf,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,EAClB,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,EACjB,GAAG,kBAEF,KAAK,GACF,EAER,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,YAElD,cAAK,GAAG,EAAE,UAAU,YAAG,KAAK,GAAO,GACzB,CACb,YAED,4BACG,QAAQ,GACR,GACG,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
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,48 +36,54 @@ 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={{
48
+ width: '100%',
49
+ cursor: 'move',
50
+ }}
51
+ onMouseOver={() => {
52
+ if (disabled) {
53
+ setDisabled(false);
54
+ }
55
+ }}
56
+ onMouseOut={() => {
57
+ setDisabled(true);
58
+ }}
59
+ onFocus={() => { }}
60
+ onBlur={() => { }}
61
+ >
62
+ {title}
63
+ </div>
64
+ }
65
+ open={open}
66
+ onOk={onOk}
67
+ onCancel={onCancel}
68
+ bodyStyle={{ paddingBottom: '30px' }}
69
+ modalRender={(modal) => (
70
+ <Draggable
71
+ disabled={disabled}
72
+ bounds={bounds}
73
+ onStart={(event, uiData) => onStart(event, uiData)}
74
+ >
75
+ <div ref={draggleRef}>{modal}</div>
76
+ </Draggable>
77
+ )}
78
+ >
79
+ <>
80
+ {children}
81
+ </>
82
+ </Modal>,
83
+ getContainer()
84
+ )
85
+ ) : null
80
86
  );
81
87
  };
82
88
 
83
- export default DraggableModal;
89
+ export default DraggableModal;
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@bit.rhplus/draggable-modal",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
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.3"
10
10
  },
11
11
  "dependencies": {
12
12
  "antd": "^5.20.6",
@@ -16,7 +16,8 @@
16
16
  "@teambit/react.react-env": "1.0.98"
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
+ }