@dreamcommerce/aurora 0.3.4-178 → 0.3.4-181

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 (5) hide show
  1. package/build/cjs/packages/aurora/src/components/modal/hoc/absolute_modal/index.js +27 -5
  2. package/build/cjs/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map +1 -1
  3. package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js +27 -5
  4. package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map +1 -1
  5. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/modal/hoc/absolute_modal/index.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var _tslib = require('../../../../../../../_virtual/_tslib.js');
7
7
  var reactJss_esm = require('../../../../../../../external/react-jss/dist/react-jss.esm.js');
8
+ var use_resize = require('../../../../hooks/use_resize.js');
8
9
  var reactDom = require('react-dom');
9
10
  var main_module = require('../../../../css/modal/main.module.less.js');
10
11
  var modal = require('../../components/modal.js');
@@ -48,7 +49,8 @@ var useStyles = reactJss_esm.createUseStyles({
48
49
  var AbsoluteModal = function (_a) {
49
50
  var vPosition = _a.vPosition, hPosition = _a.hPosition, _b = _a.offset, offset = _b === void 0 ? 0 : _b, transform = _a.transform, _c = _a.transformLength, transformLength = _c === void 0 ? constants.DEFAULT_TRANSLATE_MOVE : _c, children = _a.children, animationDirection = _a.animationDirection, isVisible = _a.isVisible, withBackground = _a.withBackground, rest = _tslib.__rest(_a, ["vPosition", "hPosition", "offset", "transform", "transformLength", "children", "animationDirection", "isVisible", "withBackground"]);
50
51
  var modalRef = React.useRef(null);
51
- var _d = React.useState({}), position = _d[0], setPosition = _d[1];
52
+ var _d = React.useState(0), updater = _d[0], setUpdater = _d[1];
53
+ var _e = React.useState({}), position = _e[0], setPosition = _e[1];
52
54
  var classes = useStyles(_tslib.__assign(_tslib.__assign({}, position), { isVisible: isVisible, transformLength: transformLength, transform: transform, animationDirection: animationDirection }));
53
55
  React.useEffect(function () {
54
56
  var _a, _b;
@@ -60,10 +62,30 @@ var AbsoluteModal = function (_a) {
60
62
  transformLength: transformLength,
61
63
  animationDirection: animationDirection
62
64
  }));
63
- }, [animationDirection, hPosition, offset, transformLength, vPosition, isVisible]);
64
- return (React__default['default'].createElement(React__default['default'].Fragment, null,
65
- reactDom.createPortal(React__default['default'].createElement(modal['default'], _tslib.__assign({ className: "".concat(classes.modal, " ").concat(isVisible ? main_module['default']['modal-window_visible'] : ''), modalRef: modalRef }, rest), children), document.body),
66
- isVisible && withBackground && reactDom.createPortal(React__default['default'].createElement("div", { className: main_module['default']['modal-window-mask'] }), document.body)));
65
+ }, [animationDirection, hPosition, offset, transformLength, vPosition, isVisible, updater]);
66
+ use_resize.useResize(function () {
67
+ var _a, _b;
68
+ setPosition(utilities.calculateAbsolutePosition({
69
+ vPosition: vPosition,
70
+ hPosition: hPosition,
71
+ modalRect: (_b = (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a),
72
+ offset: offset,
73
+ transformLength: transformLength,
74
+ animationDirection: animationDirection
75
+ }));
76
+ }, 50);
77
+ React.useEffect(function () {
78
+ var observer = new MutationObserver(function () {
79
+ setUpdater(function (updater) { return updater + 1; });
80
+ });
81
+ if (modalRef.current) {
82
+ observer.observe(modalRef.current, { childList: true, subtree: true });
83
+ }
84
+ return function () { return observer.disconnect(); };
85
+ }, []);
86
+ return reactDom.createPortal(React__default['default'].createElement(React__default['default'].Fragment, null,
87
+ React__default['default'].createElement(modal['default'], _tslib.__assign({ className: "".concat(classes.modal, " ").concat(isVisible ? main_module['default']['modal-window_visible'] : ''), modalRef: modalRef }, rest), children),
88
+ isVisible && withBackground && React__default['default'].createElement("div", { className: main_module['default']['modal-window-mask'] })), document.body);
67
89
  };
68
90
 
69
91
  exports.default = AbsoluteModal;
package/build/cjs/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,+DAAmE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,+DAAmE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, { useRef, useState, useEffect } from 'react';
2
2
  import { __rest, __assign } from '../../../../../../../_virtual/_tslib.js';
3
3
  import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
4
+ import { useResize } from '../../../../hooks/use_resize.js';
4
5
  import { createPortal } from 'react-dom';
5
6
  import cssClasses from '../../../../css/modal/main.module.less.js';
6
7
  import Modal from '../../components/modal.js';
@@ -40,7 +41,8 @@ var useStyles = createUseStyles({
40
41
  var AbsoluteModal = function (_a) {
41
42
  var vPosition = _a.vPosition, hPosition = _a.hPosition, _b = _a.offset, offset = _b === void 0 ? 0 : _b, transform = _a.transform, _c = _a.transformLength, transformLength = _c === void 0 ? DEFAULT_TRANSLATE_MOVE : _c, children = _a.children, animationDirection = _a.animationDirection, isVisible = _a.isVisible, withBackground = _a.withBackground, rest = __rest(_a, ["vPosition", "hPosition", "offset", "transform", "transformLength", "children", "animationDirection", "isVisible", "withBackground"]);
42
43
  var modalRef = useRef(null);
43
- var _d = useState({}), position = _d[0], setPosition = _d[1];
44
+ var _d = useState(0), updater = _d[0], setUpdater = _d[1];
45
+ var _e = useState({}), position = _e[0], setPosition = _e[1];
44
46
  var classes = useStyles(__assign(__assign({}, position), { isVisible: isVisible, transformLength: transformLength, transform: transform, animationDirection: animationDirection }));
45
47
  useEffect(function () {
46
48
  var _a, _b;
@@ -52,10 +54,30 @@ var AbsoluteModal = function (_a) {
52
54
  transformLength: transformLength,
53
55
  animationDirection: animationDirection
54
56
  }));
55
- }, [animationDirection, hPosition, offset, transformLength, vPosition, isVisible]);
56
- return (React.createElement(React.Fragment, null,
57
- createPortal(React.createElement(Modal, __assign({ className: "".concat(classes.modal, " ").concat(isVisible ? cssClasses['modal-window_visible'] : ''), modalRef: modalRef }, rest), children), document.body),
58
- isVisible && withBackground && createPortal(React.createElement("div", { className: cssClasses['modal-window-mask'] }), document.body)));
57
+ }, [animationDirection, hPosition, offset, transformLength, vPosition, isVisible, updater]);
58
+ useResize(function () {
59
+ var _a, _b;
60
+ setPosition(calculateAbsolutePosition({
61
+ vPosition: vPosition,
62
+ hPosition: hPosition,
63
+ modalRect: (_b = (_a = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a),
64
+ offset: offset,
65
+ transformLength: transformLength,
66
+ animationDirection: animationDirection
67
+ }));
68
+ }, 50);
69
+ useEffect(function () {
70
+ var observer = new MutationObserver(function () {
71
+ setUpdater(function (updater) { return updater + 1; });
72
+ });
73
+ if (modalRef.current) {
74
+ observer.observe(modalRef.current, { childList: true, subtree: true });
75
+ }
76
+ return function () { return observer.disconnect(); };
77
+ }, []);
78
+ return createPortal(React.createElement(React.Fragment, null,
79
+ React.createElement(Modal, __assign({ className: "".concat(classes.modal, " ").concat(isVisible ? cssClasses['modal-window_visible'] : ''), modalRef: modalRef }, rest), children),
80
+ isVisible && withBackground && React.createElement("div", { className: cssClasses['modal-window-mask'] })), document.body);
59
81
  };
60
82
 
61
83
  export default AbsoluteModal;
package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,gCAAgC,+DAAmE;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,gCAAgC,+DAAmE;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.1.1",
4
4
  "sideEffects": false,
5
- "version": "0.3.4-178",
5
+ "version": "0.3.4-181",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",