@dreamcommerce/aurora 3.1.25-2 → 3.1.25-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.
- package/build/cjs/packages/aurora/src/components/resizable/components/resizable_container.js +46 -0
- package/build/cjs/packages/aurora/src/components/resizable/components/resizable_container.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/components/resizable_handle.js +41 -0
- package/build/cjs/packages/aurora/src/components/resizable/components/resizable_handle.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/components/resizable_pure.js +42 -0
- package/build/cjs/packages/aurora/src/components/resizable/components/resizable_pure.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable.js +79 -0
- package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable_context.js +17 -0
- package/build/cjs/packages/aurora/src/components/resizable/hooks/use_resizable_context.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable.js +46 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable_container_constants.js +13 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable_container_constants.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable_context.js +14 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable_context.js.map +1 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable_utils.js +37 -0
- package/build/cjs/packages/aurora/src/components/resizable/resizable_utils.js.map +1 -0
- package/build/cjs/packages/aurora/src/index.js +2 -0
- package/build/cjs/packages/aurora/src/index.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.js +36 -9
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.js +31 -17
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_pure.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_pure.js +32 -10
- package/build/esm/packages/aurora/src/components/resizable/components/resizable_pure.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable.js +71 -64
- package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.js +11 -9
- package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable.js +36 -14
- package/build/esm/packages/aurora/src/components/resizable/resizable.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable_container_constants.js +7 -10
- package/build/esm/packages/aurora/src/components/resizable/resizable_container_constants.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable_context.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable_context.js +8 -6
- package/build/esm/packages/aurora/src/components/resizable/resizable_context.js.map +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable_utils.d.ts +1 -1
- package/build/esm/packages/aurora/src/components/resizable/resizable_utils.js +26 -19
- package/build/esm/packages/aurora/src/components/resizable/resizable_utils.js.map +1 -1
- package/build/esm/packages/aurora/src/index.d.ts +1 -0
- package/build/esm/packages/aurora/src/index.js +1 -0
- package/build/esm/packages/aurora/src/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var resizable_handle = require('./resizable_handle.js');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
|
|
12
|
+
var ResizableContainer = function ResizableContainer(_ref) {
|
|
13
|
+
var className = _ref.className,
|
|
14
|
+
style = _ref.style,
|
|
15
|
+
variant = _ref.variant,
|
|
16
|
+
handleHoverSpacePx = _ref.handleHoverSpacePx,
|
|
17
|
+
handleResizing = _ref.handleResizing,
|
|
18
|
+
children = _ref.children;
|
|
19
|
+
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
20
|
+
className: "aurora-flex aurora-relative ".concat(className),
|
|
21
|
+
style: style
|
|
22
|
+
}, variant === 'horizontal' ? (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
|
|
23
|
+
position: "left",
|
|
24
|
+
hoverGutterSizePx: handleHoverSpacePx,
|
|
25
|
+
onMouseDown: function onMouseDown(e) {
|
|
26
|
+
return handleResizing(e, 'left');
|
|
27
|
+
}
|
|
28
|
+
}), /*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
|
|
29
|
+
position: "right",
|
|
30
|
+
hoverGutterSizePx: handleHoverSpacePx,
|
|
31
|
+
onMouseDown: function onMouseDown(e) {
|
|
32
|
+
return handleResizing(e, 'right');
|
|
33
|
+
}
|
|
34
|
+
}))) : (/*#__PURE__*/React__default['default'].createElement(resizable_handle.ResizableHandle, {
|
|
35
|
+
position: variant,
|
|
36
|
+
hoverGutterSizePx: handleHoverSpacePx,
|
|
37
|
+
onMouseDown: function onMouseDown(e) {
|
|
38
|
+
return handleResizing(e, variant);
|
|
39
|
+
}
|
|
40
|
+
})), /*#__PURE__*/React__default['default'].createElement("div", {
|
|
41
|
+
className: "aurora-flex-1"
|
|
42
|
+
}, children));
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.ResizableContainer = ResizableContainer;
|
|
46
|
+
//# sourceMappingURL=resizable_container.js.map
|
package/build/cjs/packages/aurora/src/components/resizable/components/resizable_container.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var cn = require('../../../utilities/cn.js');
|
|
7
|
+
var resizable_container_constants = require('../resizable_container_constants.js');
|
|
8
|
+
var use_resizable_context = require('../hooks/use_resizable_context.js');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
+
|
|
14
|
+
var ResizableHandle = function ResizableHandle(_ref) {
|
|
15
|
+
var position = _ref.position,
|
|
16
|
+
_ref$hoverGutterSizeP = _ref.hoverGutterSizePx,
|
|
17
|
+
hoverGutterSizePx = _ref$hoverGutterSizeP === void 0 ? 8 : _ref$hoverGutterSizeP,
|
|
18
|
+
className = _ref.className,
|
|
19
|
+
onMouseDown = _ref.onMouseDown;
|
|
20
|
+
var _useResizableContext = use_resizable_context.useResizableContext(),
|
|
21
|
+
isResizing = _useResizableContext.isResizing;
|
|
22
|
+
return /*#__PURE__*/React__default['default'].createElement("div", {
|
|
23
|
+
className: cn.cn("".concat(resizable_container_constants.RESIZABLE_CONTAINER_RESIZER_CLASS, " ").concat(className, " aurora-absolute aurora-top-0 aurora-bottom-0 aurora-cursor-col-resize aurora-transition-opacity aurora-duration-200 aurora-z-[99999] aurora-opacity-0 hover:aurora-opacity-100"), {
|
|
24
|
+
'aurora-opacity-100': isResizing
|
|
25
|
+
}),
|
|
26
|
+
style: {
|
|
27
|
+
paddingLeft: "".concat(hoverGutterSizePx, "px"),
|
|
28
|
+
paddingRight: "".concat(hoverGutterSizePx, "px"),
|
|
29
|
+
left: position === 'left' ? "-".concat(hoverGutterSizePx, "px") : '',
|
|
30
|
+
right: position === 'right' ? "-".concat(hoverGutterSizePx, "px") : ''
|
|
31
|
+
},
|
|
32
|
+
onMouseDown: onMouseDown
|
|
33
|
+
}, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
34
|
+
className: cn.cn('aurora-w-[2px] aurora-h-full aurora-bg-primary', {
|
|
35
|
+
'aurora-bg-primary-hover': isResizing
|
|
36
|
+
})
|
|
37
|
+
}));
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
exports.ResizableHandle = ResizableHandle;
|
|
41
|
+
//# sourceMappingURL=resizable_handle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var use_resizable_context = require('../hooks/use_resizable_context.js');
|
|
7
|
+
var resizable_container = require('./resizable_container.js');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
|
|
13
|
+
var ResizablePure = function ResizablePure(_ref) {
|
|
14
|
+
var children = _ref.children,
|
|
15
|
+
_ref$variant = _ref.variant,
|
|
16
|
+
variant = _ref$variant === void 0 ? 'left' : _ref$variant,
|
|
17
|
+
handleHoverSpacePx = _ref.handleHoverSpacePx,
|
|
18
|
+
widthConfig = _ref.widthConfig,
|
|
19
|
+
onResize = _ref.onResize,
|
|
20
|
+
className = _ref.className;
|
|
21
|
+
var _useResizableContext = use_resizable_context.useResizableContext(),
|
|
22
|
+
currentWidth = _useResizableContext.currentWidth,
|
|
23
|
+
handleResizing = _useResizableContext.handleResizing,
|
|
24
|
+
isResizing = _useResizableContext.isResizing;
|
|
25
|
+
React.useEffect(function () {
|
|
26
|
+
onResize === null || onResize === void 0 ? void 0 : onResize(currentWidth, isResizing);
|
|
27
|
+
}, [currentWidth, isResizing, onResize]);
|
|
28
|
+
return /*#__PURE__*/React__default['default'].createElement(resizable_container.ResizableContainer, {
|
|
29
|
+
className: className || '',
|
|
30
|
+
style: {
|
|
31
|
+
width: currentWidth,
|
|
32
|
+
minWidth: widthConfig.min,
|
|
33
|
+
maxWidth: widthConfig.max
|
|
34
|
+
},
|
|
35
|
+
variant: variant,
|
|
36
|
+
handleHoverSpacePx: handleHoverSpacePx,
|
|
37
|
+
handleResizing: handleResizing
|
|
38
|
+
}, children);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
exports.ResizablePure = ResizablePure;
|
|
42
|
+
//# sourceMappingURL=resizable_pure.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
7
|
+
var resizable_container_constants = require('../resizable_container_constants.js');
|
|
8
|
+
var resizable_utils = require('../resizable_utils.js');
|
|
9
|
+
|
|
10
|
+
var useResizable = function useResizable(name, variant, widthConfig) {
|
|
11
|
+
var storageKey = "sve_resizable_".concat(name, "_width");
|
|
12
|
+
var _useState = React.useState(false),
|
|
13
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
14
|
+
isResizing = _useState2[0],
|
|
15
|
+
setIsResizing = _useState2[1];
|
|
16
|
+
var isResizingRef = React.useRef(false);
|
|
17
|
+
var resizingDirection = React.useRef(resizable_container_constants.RESIZING_DIRECTIONS.left);
|
|
18
|
+
var initialMouseX = React.useRef(0);
|
|
19
|
+
var initialWidth = React.useRef(0);
|
|
20
|
+
var _useState3 = React.useState(function () {
|
|
21
|
+
return resizable_utils.getInitialWidth(storageKey, widthConfig);
|
|
22
|
+
}),
|
|
23
|
+
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
|
24
|
+
width = _useState4[0],
|
|
25
|
+
setWidth = _useState4[1];
|
|
26
|
+
var widthRef = React.useRef(width);
|
|
27
|
+
var handleMouseMove = React.useCallback(function (e) {
|
|
28
|
+
if (!isResizingRef.current) return;
|
|
29
|
+
var direction = variant === 'horizontal' ? resizingDirection.current : variant;
|
|
30
|
+
var newWidth = calculateNewWidth(e.clientX, direction, widthConfig, initialMouseX.current, initialWidth.current);
|
|
31
|
+
widthRef.current = newWidth;
|
|
32
|
+
setWidth(newWidth);
|
|
33
|
+
}, []);
|
|
34
|
+
var handleMouseUp = React.useCallback(function () {
|
|
35
|
+
if (!isResizingRef.current) return;
|
|
36
|
+
isResizingRef.current = false;
|
|
37
|
+
setIsResizing(false);
|
|
38
|
+
resizable_utils.removeEventListeners({
|
|
39
|
+
mousemove: handleMouseMove,
|
|
40
|
+
mouseup: handleMouseUp
|
|
41
|
+
});
|
|
42
|
+
resizable_utils.saveWidthToStorage(storageKey, widthRef.current);
|
|
43
|
+
}, []);
|
|
44
|
+
var handleResizing = React.useCallback(function (e, direction) {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
isResizingRef.current = true;
|
|
47
|
+
setIsResizing(true);
|
|
48
|
+
resizingDirection.current = direction;
|
|
49
|
+
initialMouseX.current = e.clientX;
|
|
50
|
+
initialWidth.current = widthRef.current;
|
|
51
|
+
resizable_utils.addEventListeners({
|
|
52
|
+
mousemove: handleMouseMove,
|
|
53
|
+
mouseup: handleMouseUp
|
|
54
|
+
});
|
|
55
|
+
}, []);
|
|
56
|
+
var calculateNewWidth = function calculateNewWidth(clientX, direction, widthConfig, initialMouseX, initialWidth) {
|
|
57
|
+
var min = widthConfig.min,
|
|
58
|
+
max = widthConfig.max;
|
|
59
|
+
var mouseDelta = clientX - initialMouseX;
|
|
60
|
+
var newWidth = direction === resizable_container_constants.RESIZING_DIRECTIONS.left ? initialWidth - mouseDelta : initialWidth + mouseDelta;
|
|
61
|
+
return Math.min(Math.max(newWidth, min), max);
|
|
62
|
+
};
|
|
63
|
+
React.useEffect(function () {
|
|
64
|
+
return function () {
|
|
65
|
+
resizable_utils.removeEventListeners({
|
|
66
|
+
mousemove: handleMouseMove,
|
|
67
|
+
mouseup: handleMouseUp
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
}, []);
|
|
71
|
+
return {
|
|
72
|
+
isResizing: isResizing,
|
|
73
|
+
currentWidth: width,
|
|
74
|
+
handleResizing: handleResizing
|
|
75
|
+
};
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
exports.default = useResizable;
|
|
79
|
+
//# sourceMappingURL=use_resizable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var resizable_context = require('../resizable_context.js');
|
|
7
|
+
|
|
8
|
+
function useResizableContext() {
|
|
9
|
+
var context = React.useContext(resizable_context.ResizableContext);
|
|
10
|
+
if (Object.keys(context).length === 0 && context.constructor === Object) {
|
|
11
|
+
throw new Error("Resizable component cannot be rendered outside the ResizableProvider component");
|
|
12
|
+
}
|
|
13
|
+
return context;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
exports.useResizableContext = useResizableContext;
|
|
17
|
+
//# sourceMappingURL=use_resizable_context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var use_resizable = require('./hooks/use_resizable.js');
|
|
7
|
+
var resizable_context = require('./resizable_context.js');
|
|
8
|
+
var resizable_pure = require('./components/resizable_pure.js');
|
|
9
|
+
|
|
10
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
|
+
|
|
12
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
|
+
|
|
14
|
+
var Resizable = function Resizable(_ref) {
|
|
15
|
+
var name = _ref.name,
|
|
16
|
+
children = _ref.children,
|
|
17
|
+
_ref$variant = _ref.variant,
|
|
18
|
+
variant = _ref$variant === void 0 ? 'left' : _ref$variant,
|
|
19
|
+
handleHoverSpacePx = _ref.handleHoverSpacePx,
|
|
20
|
+
widthConfig = _ref.widthConfig,
|
|
21
|
+
onResize = _ref.onResize,
|
|
22
|
+
className = _ref.className;
|
|
23
|
+
var _useResizable = use_resizable['default'](name, variant, widthConfig),
|
|
24
|
+
isResizing = _useResizable.isResizing,
|
|
25
|
+
currentWidth = _useResizable.currentWidth,
|
|
26
|
+
handleResizing = _useResizable.handleResizing;
|
|
27
|
+
var contextVal = React.useMemo(function () {
|
|
28
|
+
return {
|
|
29
|
+
isResizing: isResizing,
|
|
30
|
+
currentWidth: currentWidth,
|
|
31
|
+
handleResizing: handleResizing
|
|
32
|
+
};
|
|
33
|
+
}, [isResizing, currentWidth, handleResizing]);
|
|
34
|
+
return /*#__PURE__*/React__default['default'].createElement(resizable_context.ResizableContext.Provider, {
|
|
35
|
+
value: contextVal
|
|
36
|
+
}, /*#__PURE__*/React__default['default'].createElement(resizable_pure.ResizablePure, {
|
|
37
|
+
className: className || '',
|
|
38
|
+
variant: variant,
|
|
39
|
+
handleHoverSpacePx: handleHoverSpacePx,
|
|
40
|
+
widthConfig: widthConfig,
|
|
41
|
+
onResize: onResize
|
|
42
|
+
}, children));
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.Resizable = Resizable;
|
|
46
|
+
//# sourceMappingURL=resizable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var RESIZING_DIRECTIONS = {
|
|
6
|
+
left: 'left',
|
|
7
|
+
right: 'right'
|
|
8
|
+
};
|
|
9
|
+
var RESIZABLE_CONTAINER_RESIZER_CLASS = 'js__resizable-container-resizer';
|
|
10
|
+
|
|
11
|
+
exports.RESIZABLE_CONTAINER_RESIZER_CLASS = RESIZABLE_CONTAINER_RESIZER_CLASS;
|
|
12
|
+
exports.RESIZING_DIRECTIONS = RESIZING_DIRECTIONS;
|
|
13
|
+
//# sourceMappingURL=resizable_container_constants.js.map
|
package/build/cjs/packages/aurora/src/components/resizable/resizable_container_constants.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
var ResizableContext = /*#__PURE__*/React.createContext({
|
|
8
|
+
isResizing: false,
|
|
9
|
+
currentWidth: 0,
|
|
10
|
+
handleResizing: function handleResizing() {}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
exports.ResizableContext = ResizableContext;
|
|
14
|
+
//# sourceMappingURL=resizable_context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
6
|
+
|
|
7
|
+
var getInitialWidth = function getInitialWidth(name, widthConfig) {
|
|
8
|
+
if (typeof window === 'undefined' || typeof localStorage === 'undefined') return widthConfig.default;
|
|
9
|
+
var saved = localStorage.getItem(name);
|
|
10
|
+
return saved ? Number(saved) : widthConfig.default;
|
|
11
|
+
};
|
|
12
|
+
var saveWidthToStorage = function saveWidthToStorage(name, width) {
|
|
13
|
+
if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
|
|
14
|
+
localStorage.setItem(name, width.toString());
|
|
15
|
+
};
|
|
16
|
+
var addEventListeners = function addEventListeners(events) {
|
|
17
|
+
Object.entries(events).forEach(function (_ref) {
|
|
18
|
+
var _ref2 = _rollupPluginBabelHelpers.slicedToArray(_ref, 2),
|
|
19
|
+
eventType = _ref2[0],
|
|
20
|
+
handler = _ref2[1];
|
|
21
|
+
document.addEventListener(eventType, handler);
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
var removeEventListeners = function removeEventListeners(events) {
|
|
25
|
+
Object.entries(events).forEach(function (_ref3) {
|
|
26
|
+
var _ref4 = _rollupPluginBabelHelpers.slicedToArray(_ref3, 2),
|
|
27
|
+
eventType = _ref4[0],
|
|
28
|
+
handler = _ref4[1];
|
|
29
|
+
document.removeEventListener(eventType, handler);
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
exports.addEventListeners = addEventListeners;
|
|
34
|
+
exports.getInitialWidth = getInitialWidth;
|
|
35
|
+
exports.removeEventListeners = removeEventListeners;
|
|
36
|
+
exports.saveWidthToStorage = saveWidthToStorage;
|
|
37
|
+
//# sourceMappingURL=resizable_utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -130,6 +130,7 @@ var toast_viewport = require('./components/toast/components/toast_viewport.js');
|
|
|
130
130
|
var anchor_presets_constants = require('./components/anchor_presets/anchor_presets_constants.js');
|
|
131
131
|
var anchor_presets = require('./components/anchor_presets/anchor_presets.js');
|
|
132
132
|
var anchor_presets_control = require('./components/controls/anchor_presets_control/anchor_presets_control.js');
|
|
133
|
+
var resizable = require('./components/resizable/resizable.js');
|
|
133
134
|
|
|
134
135
|
|
|
135
136
|
|
|
@@ -281,4 +282,5 @@ exports.ToastViewport = toast_viewport.ToastViewport;
|
|
|
281
282
|
exports.ANCHOR_PRESETS_VALUES = anchor_presets_constants.ANCHOR_PRESETS_VALUES;
|
|
282
283
|
exports.AnchorPresets = anchor_presets.AnchorPresets;
|
|
283
284
|
exports.AnchorPresetsControl = anchor_presets_control.AnchorPresetsControl;
|
|
285
|
+
exports.Resizable = resizable.Resizable;
|
|
284
286
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;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;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;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;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;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;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;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/resizable/components/resizable_container.js
CHANGED
|
@@ -1,11 +1,38 @@
|
|
|
1
|
-
import { ResizableHandle } from '@auroraComponents/resizable/components/resizable_handle';
|
|
2
1
|
import React from 'react';
|
|
3
|
-
import '
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
import { ResizableHandle } from './resizable_handle.js';
|
|
3
|
+
|
|
4
|
+
var ResizableContainer = function ResizableContainer(_ref) {
|
|
5
|
+
var className = _ref.className,
|
|
6
|
+
style = _ref.style,
|
|
7
|
+
variant = _ref.variant,
|
|
8
|
+
handleHoverSpacePx = _ref.handleHoverSpacePx,
|
|
9
|
+
handleResizing = _ref.handleResizing,
|
|
10
|
+
children = _ref.children;
|
|
11
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
12
|
+
className: "aurora-flex aurora-relative ".concat(className),
|
|
13
|
+
style: style
|
|
14
|
+
}, variant === 'horizontal' ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizableHandle, {
|
|
15
|
+
position: "left",
|
|
16
|
+
hoverGutterSizePx: handleHoverSpacePx,
|
|
17
|
+
onMouseDown: function onMouseDown(e) {
|
|
18
|
+
return handleResizing(e, 'left');
|
|
19
|
+
}
|
|
20
|
+
}), /*#__PURE__*/React.createElement(ResizableHandle, {
|
|
21
|
+
position: "right",
|
|
22
|
+
hoverGutterSizePx: handleHoverSpacePx,
|
|
23
|
+
onMouseDown: function onMouseDown(e) {
|
|
24
|
+
return handleResizing(e, 'right');
|
|
25
|
+
}
|
|
26
|
+
}))) : (/*#__PURE__*/React.createElement(ResizableHandle, {
|
|
27
|
+
position: variant,
|
|
28
|
+
hoverGutterSizePx: handleHoverSpacePx,
|
|
29
|
+
onMouseDown: function onMouseDown(e) {
|
|
30
|
+
return handleResizing(e, variant);
|
|
31
|
+
}
|
|
32
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: "aurora-flex-1"
|
|
34
|
+
}, children));
|
|
10
35
|
};
|
|
11
|
-
|
|
36
|
+
|
|
37
|
+
export { ResizableContainer };
|
|
38
|
+
//# sourceMappingURL=resizable_container.js.map
|
package/build/esm/packages/aurora/src/components/resizable/components/resizable_container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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,19 +1,33 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { cn } from '
|
|
3
|
-
import { RESIZABLE_CONTAINER_RESIZER_CLASS } from '
|
|
4
|
-
import { useResizableContext } from '../hooks/use_resizable_context';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
import { cn } from '../../../utilities/cn.js';
|
|
3
|
+
import { RESIZABLE_CONTAINER_RESIZER_CLASS } from '../resizable_container_constants.js';
|
|
4
|
+
import { useResizableContext } from '../hooks/use_resizable_context.js';
|
|
5
|
+
|
|
6
|
+
var ResizableHandle = function ResizableHandle(_ref) {
|
|
7
|
+
var position = _ref.position,
|
|
8
|
+
_ref$hoverGutterSizeP = _ref.hoverGutterSizePx,
|
|
9
|
+
hoverGutterSizePx = _ref$hoverGutterSizeP === void 0 ? 8 : _ref$hoverGutterSizeP,
|
|
10
|
+
className = _ref.className,
|
|
11
|
+
onMouseDown = _ref.onMouseDown;
|
|
12
|
+
var _useResizableContext = useResizableContext(),
|
|
13
|
+
isResizing = _useResizableContext.isResizing;
|
|
14
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
15
|
+
className: cn("".concat(RESIZABLE_CONTAINER_RESIZER_CLASS, " ").concat(className, " aurora-absolute aurora-top-0 aurora-bottom-0 aurora-cursor-col-resize aurora-transition-opacity aurora-duration-200 aurora-z-[99999] aurora-opacity-0 hover:aurora-opacity-100"), {
|
|
16
|
+
'aurora-opacity-100': isResizing
|
|
17
|
+
}),
|
|
18
|
+
style: {
|
|
19
|
+
paddingLeft: "".concat(hoverGutterSizePx, "px"),
|
|
20
|
+
paddingRight: "".concat(hoverGutterSizePx, "px"),
|
|
21
|
+
left: position === 'left' ? "-".concat(hoverGutterSizePx, "px") : '',
|
|
22
|
+
right: position === 'right' ? "-".concat(hoverGutterSizePx, "px") : ''
|
|
23
|
+
},
|
|
24
|
+
onMouseDown: onMouseDown
|
|
25
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
26
|
+
className: cn('aurora-w-[2px] aurora-h-full aurora-bg-primary', {
|
|
27
|
+
'aurora-bg-primary-hover': isResizing
|
|
28
|
+
})
|
|
29
|
+
}));
|
|
18
30
|
};
|
|
19
|
-
|
|
31
|
+
|
|
32
|
+
export { ResizableHandle };
|
|
33
|
+
//# sourceMappingURL=resizable_handle.js.map
|
package/build/esm/packages/aurora/src/components/resizable/components/resizable_handle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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,12 +1,34 @@
|
|
|
1
1
|
import React, { useEffect } from 'react';
|
|
2
|
-
import '
|
|
3
|
-
import { ResizableContainer } from '
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
import { useResizableContext } from '../hooks/use_resizable_context.js';
|
|
3
|
+
import { ResizableContainer } from './resizable_container.js';
|
|
4
|
+
|
|
5
|
+
var ResizablePure = function ResizablePure(_ref) {
|
|
6
|
+
var children = _ref.children,
|
|
7
|
+
_ref$variant = _ref.variant,
|
|
8
|
+
variant = _ref$variant === void 0 ? 'left' : _ref$variant,
|
|
9
|
+
handleHoverSpacePx = _ref.handleHoverSpacePx,
|
|
10
|
+
widthConfig = _ref.widthConfig,
|
|
11
|
+
onResize = _ref.onResize,
|
|
12
|
+
className = _ref.className;
|
|
13
|
+
var _useResizableContext = useResizableContext(),
|
|
14
|
+
currentWidth = _useResizableContext.currentWidth,
|
|
15
|
+
handleResizing = _useResizableContext.handleResizing,
|
|
16
|
+
isResizing = _useResizableContext.isResizing;
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
onResize === null || onResize === void 0 ? void 0 : onResize(currentWidth, isResizing);
|
|
19
|
+
}, [currentWidth, isResizing, onResize]);
|
|
20
|
+
return /*#__PURE__*/React.createElement(ResizableContainer, {
|
|
21
|
+
className: className || '',
|
|
22
|
+
style: {
|
|
23
|
+
width: currentWidth,
|
|
24
|
+
minWidth: widthConfig.min,
|
|
25
|
+
maxWidth: widthConfig.max
|
|
26
|
+
},
|
|
27
|
+
variant: variant,
|
|
28
|
+
handleHoverSpacePx: handleHoverSpacePx,
|
|
29
|
+
handleResizing: handleResizing
|
|
30
|
+
}, children);
|
|
11
31
|
};
|
|
12
|
-
|
|
32
|
+
|
|
33
|
+
export { ResizablePure };
|
|
34
|
+
//# sourceMappingURL=resizable_pure.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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,4 +1,4 @@
|
|
|
1
|
-
import { TContainerWidthConfig, TResizerVariant, TResizingDirection } from '../resizable_container_types';
|
|
1
|
+
import type { TContainerWidthConfig, TResizerVariant, TResizingDirection } from '../resizable_container_types';
|
|
2
2
|
declare const useResizable: (name: string, variant: TResizerVariant, widthConfig: TContainerWidthConfig) => {
|
|
3
3
|
isResizing: boolean;
|
|
4
4
|
currentWidth: number;
|
|
@@ -1,68 +1,75 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import '../
|
|
4
|
-
import { getInitialWidth,
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { useState, useRef, useCallback, useEffect } from 'react';
|
|
2
|
+
import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
3
|
+
import { RESIZING_DIRECTIONS } from '../resizable_container_constants.js';
|
|
4
|
+
import { getInitialWidth, removeEventListeners, saveWidthToStorage, addEventListeners } from '../resizable_utils.js';
|
|
5
|
+
|
|
6
|
+
var useResizable = function useResizable(name, variant, widthConfig) {
|
|
7
|
+
var storageKey = "sve_resizable_".concat(name, "_width");
|
|
8
|
+
var _useState = useState(false),
|
|
9
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
10
|
+
isResizing = _useState2[0],
|
|
11
|
+
setIsResizing = _useState2[1];
|
|
12
|
+
var isResizingRef = useRef(false);
|
|
13
|
+
var resizingDirection = useRef(RESIZING_DIRECTIONS.left);
|
|
14
|
+
var initialMouseX = useRef(0);
|
|
15
|
+
var initialWidth = useRef(0);
|
|
16
|
+
var _useState3 = useState(function () {
|
|
17
|
+
return getInitialWidth(storageKey, widthConfig);
|
|
18
|
+
}),
|
|
19
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
20
|
+
width = _useState4[0],
|
|
21
|
+
setWidth = _useState4[1];
|
|
22
|
+
var widthRef = useRef(width);
|
|
23
|
+
var handleMouseMove = useCallback(function (e) {
|
|
24
|
+
if (!isResizingRef.current) return;
|
|
25
|
+
var direction = variant === 'horizontal' ? resizingDirection.current : variant;
|
|
26
|
+
var newWidth = calculateNewWidth(e.clientX, direction, widthConfig, initialMouseX.current, initialWidth.current);
|
|
27
|
+
widthRef.current = newWidth;
|
|
28
|
+
setWidth(newWidth);
|
|
29
|
+
}, []);
|
|
30
|
+
var handleMouseUp = useCallback(function () {
|
|
31
|
+
if (!isResizingRef.current) return;
|
|
32
|
+
isResizingRef.current = false;
|
|
33
|
+
setIsResizing(false);
|
|
34
|
+
removeEventListeners({
|
|
35
|
+
mousemove: handleMouseMove,
|
|
36
|
+
mouseup: handleMouseUp
|
|
14
37
|
});
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
addEventListeners({
|
|
43
|
-
mousemove: handleMouseMove,
|
|
44
|
-
mouseup: handleMouseUp
|
|
45
|
-
});
|
|
46
|
-
}, []);
|
|
47
|
-
const calculateNewWidth = (clientX, direction, widthConfig, initialMouseX, initialWidth) => {
|
|
48
|
-
const { min, max } = widthConfig;
|
|
49
|
-
const mouseDelta = clientX - initialMouseX;
|
|
50
|
-
const newWidth = direction === RESIZING_DIRECTIONS.left ? initialWidth - mouseDelta : initialWidth + mouseDelta;
|
|
51
|
-
return Math.min(Math.max(newWidth, min), max);
|
|
52
|
-
};
|
|
53
|
-
useEffect(() => {
|
|
54
|
-
return () => {
|
|
55
|
-
removeEventListeners({
|
|
56
|
-
mousemove: handleMouseMove,
|
|
57
|
-
mouseup: handleMouseUp
|
|
58
|
-
});
|
|
59
|
-
};
|
|
60
|
-
}, []);
|
|
61
|
-
return {
|
|
62
|
-
isResizing,
|
|
63
|
-
currentWidth: width,
|
|
64
|
-
handleResizing
|
|
38
|
+
saveWidthToStorage(storageKey, widthRef.current);
|
|
39
|
+
}, []);
|
|
40
|
+
var handleResizing = useCallback(function (e, direction) {
|
|
41
|
+
e.preventDefault();
|
|
42
|
+
isResizingRef.current = true;
|
|
43
|
+
setIsResizing(true);
|
|
44
|
+
resizingDirection.current = direction;
|
|
45
|
+
initialMouseX.current = e.clientX;
|
|
46
|
+
initialWidth.current = widthRef.current;
|
|
47
|
+
addEventListeners({
|
|
48
|
+
mousemove: handleMouseMove,
|
|
49
|
+
mouseup: handleMouseUp
|
|
50
|
+
});
|
|
51
|
+
}, []);
|
|
52
|
+
var calculateNewWidth = function calculateNewWidth(clientX, direction, widthConfig, initialMouseX, initialWidth) {
|
|
53
|
+
var min = widthConfig.min,
|
|
54
|
+
max = widthConfig.max;
|
|
55
|
+
var mouseDelta = clientX - initialMouseX;
|
|
56
|
+
var newWidth = direction === RESIZING_DIRECTIONS.left ? initialWidth - mouseDelta : initialWidth + mouseDelta;
|
|
57
|
+
return Math.min(Math.max(newWidth, min), max);
|
|
58
|
+
};
|
|
59
|
+
useEffect(function () {
|
|
60
|
+
return function () {
|
|
61
|
+
removeEventListeners({
|
|
62
|
+
mousemove: handleMouseMove,
|
|
63
|
+
mouseup: handleMouseUp
|
|
64
|
+
});
|
|
65
65
|
};
|
|
66
|
+
}, []);
|
|
67
|
+
return {
|
|
68
|
+
isResizing: isResizing,
|
|
69
|
+
currentWidth: width,
|
|
70
|
+
handleResizing: handleResizing
|
|
71
|
+
};
|
|
66
72
|
};
|
|
73
|
+
|
|
67
74
|
export default useResizable;
|
|
68
|
-
//# sourceMappingURL=use_resizable.js.map
|
|
75
|
+
//# sourceMappingURL=use_resizable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IResizableContextProps } from '../resizable_container_types';
|
|
1
|
+
import type { IResizableContextProps } from '../resizable_container_types';
|
|
2
2
|
export declare function useResizableContext(): IResizableContextProps;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
|
-
import '../
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
import { ResizableContext } from '../resizable_context.js';
|
|
3
|
+
|
|
4
|
+
function useResizableContext() {
|
|
5
|
+
var context = useContext(ResizableContext);
|
|
6
|
+
if (Object.keys(context).length === 0 && context.constructor === Object) {
|
|
7
|
+
throw new Error("Resizable component cannot be rendered outside the ResizableProvider component");
|
|
8
|
+
}
|
|
9
|
+
return context;
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
|
|
12
|
+
export { useResizableContext };
|
|
13
|
+
//# sourceMappingURL=use_resizable_context.js.map
|
package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,16 +1,38 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
-
import '
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
2
|
+
import useResizable from './hooks/use_resizable.js';
|
|
3
|
+
import { ResizableContext } from './resizable_context.js';
|
|
4
|
+
import { ResizablePure } from './components/resizable_pure.js';
|
|
5
|
+
|
|
6
|
+
var Resizable = function Resizable(_ref) {
|
|
7
|
+
var name = _ref.name,
|
|
8
|
+
children = _ref.children,
|
|
9
|
+
_ref$variant = _ref.variant,
|
|
10
|
+
variant = _ref$variant === void 0 ? 'left' : _ref$variant,
|
|
11
|
+
handleHoverSpacePx = _ref.handleHoverSpacePx,
|
|
12
|
+
widthConfig = _ref.widthConfig,
|
|
13
|
+
onResize = _ref.onResize,
|
|
14
|
+
className = _ref.className;
|
|
15
|
+
var _useResizable = useResizable(name, variant, widthConfig),
|
|
16
|
+
isResizing = _useResizable.isResizing,
|
|
17
|
+
currentWidth = _useResizable.currentWidth,
|
|
18
|
+
handleResizing = _useResizable.handleResizing;
|
|
19
|
+
var contextVal = useMemo(function () {
|
|
20
|
+
return {
|
|
21
|
+
isResizing: isResizing,
|
|
22
|
+
currentWidth: currentWidth,
|
|
23
|
+
handleResizing: handleResizing
|
|
24
|
+
};
|
|
25
|
+
}, [isResizing, currentWidth, handleResizing]);
|
|
26
|
+
return /*#__PURE__*/React.createElement(ResizableContext.Provider, {
|
|
27
|
+
value: contextVal
|
|
28
|
+
}, /*#__PURE__*/React.createElement(ResizablePure, {
|
|
29
|
+
className: className || '',
|
|
30
|
+
variant: variant,
|
|
31
|
+
handleHoverSpacePx: handleHoverSpacePx,
|
|
32
|
+
widthConfig: widthConfig,
|
|
33
|
+
onResize: onResize
|
|
34
|
+
}, children));
|
|
15
35
|
};
|
|
16
|
-
|
|
36
|
+
|
|
37
|
+
export { Resizable };
|
|
38
|
+
//# sourceMappingURL=resizable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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,11 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
horizontal: 'horizontal'
|
|
1
|
+
var RESIZING_DIRECTIONS = {
|
|
2
|
+
left: 'left',
|
|
3
|
+
right: 'right'
|
|
5
4
|
};
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
export const RESIZABLE_CONTAINER_RESIZER_CLASS = 'js__resizable-container-resizer';
|
|
11
|
-
//# sourceMappingURL=resizable_container_constants.js.map
|
|
5
|
+
var RESIZABLE_CONTAINER_RESIZER_CLASS = 'js__resizable-container-resizer';
|
|
6
|
+
|
|
7
|
+
export { RESIZABLE_CONTAINER_RESIZER_CLASS, RESIZING_DIRECTIONS };
|
|
8
|
+
//# sourceMappingURL=resizable_container_constants.js.map
|
package/build/esm/packages/aurora/src/components/resizable/resizable_container_constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { createContext } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
|
|
3
|
+
var ResizableContext = /*#__PURE__*/createContext({
|
|
4
|
+
isResizing: false,
|
|
5
|
+
currentWidth: 0,
|
|
6
|
+
handleResizing: function handleResizing() {}
|
|
7
7
|
});
|
|
8
|
-
|
|
8
|
+
|
|
9
|
+
export { ResizableContext };
|
|
10
|
+
//# sourceMappingURL=resizable_context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TContainerWidthConfig } from './resizable_container_types';
|
|
1
|
+
import type { TContainerWidthConfig } from './resizable_container_types';
|
|
2
2
|
export declare const getInitialWidth: (name: string, widthConfig: TContainerWidthConfig) => number;
|
|
3
3
|
export declare const saveWidthToStorage: (name: string, width: number) => void;
|
|
4
4
|
export declare const addEventListeners: (events: Record<string, EventListener>) => void;
|
|
@@ -1,23 +1,30 @@
|
|
|
1
|
-
import '
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
+
|
|
3
|
+
var getInitialWidth = function getInitialWidth(name, widthConfig) {
|
|
4
|
+
if (typeof window === 'undefined' || typeof localStorage === 'undefined') return widthConfig.default;
|
|
5
|
+
var saved = localStorage.getItem(name);
|
|
6
|
+
return saved ? Number(saved) : widthConfig.default;
|
|
7
7
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
8
|
+
var saveWidthToStorage = function saveWidthToStorage(name, width) {
|
|
9
|
+
if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
|
|
10
|
+
localStorage.setItem(name, width.toString());
|
|
12
11
|
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
var addEventListeners = function addEventListeners(events) {
|
|
13
|
+
Object.entries(events).forEach(function (_ref) {
|
|
14
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
15
|
+
eventType = _ref2[0],
|
|
16
|
+
handler = _ref2[1];
|
|
17
|
+
document.addEventListener(eventType, handler);
|
|
18
|
+
});
|
|
17
19
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
var removeEventListeners = function removeEventListeners(events) {
|
|
21
|
+
Object.entries(events).forEach(function (_ref3) {
|
|
22
|
+
var _ref4 = _slicedToArray(_ref3, 2),
|
|
23
|
+
eventType = _ref4[0],
|
|
24
|
+
handler = _ref4[1];
|
|
25
|
+
document.removeEventListener(eventType, handler);
|
|
26
|
+
});
|
|
22
27
|
};
|
|
23
|
-
|
|
28
|
+
|
|
29
|
+
export { addEventListeners, getInitialWidth, removeEventListeners, saveWidthToStorage };
|
|
30
|
+
//# sourceMappingURL=resizable_utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}
|
|
@@ -134,3 +134,4 @@ export { TToastType } from "./components/toast/components/toast_components_types
|
|
|
134
134
|
export { AnchorPresets } from "./components/anchor_presets/anchor_presets";
|
|
135
135
|
export { AnchorPresetsControl } from "./components/controls/anchor_presets_control/anchor_presets_control";
|
|
136
136
|
export { ANCHOR_PRESETS_VALUES } from "./components/anchor_presets/anchor_presets_constants";
|
|
137
|
+
export { Resizable } from "./components/resizable/resizable";
|
|
@@ -126,4 +126,5 @@ export { ToastViewport } from './components/toast/components/toast_viewport.js';
|
|
|
126
126
|
export { ANCHOR_PRESETS_VALUES } from './components/anchor_presets/anchor_presets_constants.js';
|
|
127
127
|
export { AnchorPresets } from './components/anchor_presets/anchor_presets.js';
|
|
128
128
|
export { AnchorPresetsControl } from './components/controls/anchor_presets_control/anchor_presets_control.js';
|
|
129
|
+
export { Resizable } from './components/resizable/resizable.js';
|
|
129
130
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;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;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;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;"}
|