@elliemae/ds-resizeable-container 3.4.2 → 3.4.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/dist/cjs/Resizable.js +35 -25
- package/dist/cjs/Resizable.js.map +2 -2
- package/dist/cjs/defaultProps.js +4 -1
- package/dist/cjs/defaultProps.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/props.js +10 -3
- package/dist/cjs/props.js.map +1 -1
- package/dist/esm/Resizable.js +31 -24
- package/dist/esm/Resizable.js.map +2 -2
- package/dist/esm/defaultProps.js.map +1 -1
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/props.js +6 -2
- package/dist/esm/props.js.map +1 -1
- package/package.json +4 -4
package/dist/cjs/Resizable.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var Resizable_exports = {};
|
|
23
26
|
__export(Resizable_exports, {
|
|
@@ -27,6 +30,7 @@ __export(Resizable_exports, {
|
|
|
27
30
|
});
|
|
28
31
|
module.exports = __toCommonJS(Resizable_exports);
|
|
29
32
|
var React = __toESM(require("react"));
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
34
|
var import_react = __toESM(require("react"));
|
|
31
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
@@ -87,7 +91,7 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
87
91
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
88
92
|
}
|
|
89
93
|
function ResizableItemComponent({ innerRef, ...p }) {
|
|
90
|
-
return /* @__PURE__ */
|
|
94
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
91
95
|
ref: innerRef,
|
|
92
96
|
...p
|
|
93
97
|
});
|
|
@@ -270,35 +274,41 @@ function ResizableContainer({
|
|
|
270
274
|
}
|
|
271
275
|
};
|
|
272
276
|
const count = import_react.default.Children.count(children);
|
|
273
|
-
return /* @__PURE__ */
|
|
277
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableGrid, {
|
|
274
278
|
...rest,
|
|
275
279
|
cols: containers,
|
|
276
280
|
onKeyUp: () => endResize(EVENT_TYPE.KEY),
|
|
277
281
|
onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
|
|
278
282
|
onMouseMove: (e) => moveResize(e, EVENT_TYPE.MOUSE),
|
|
279
283
|
onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
|
|
280
|
-
rows: blocks
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
284
|
+
rows: blocks,
|
|
285
|
+
children: import_react.default.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ResizableItem, {
|
|
286
|
+
"data-index": index,
|
|
287
|
+
innerRef: addRef,
|
|
288
|
+
children: [
|
|
289
|
+
child,
|
|
290
|
+
count - 1 !== index && horizontal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableBar, {
|
|
291
|
+
container: containers[index],
|
|
292
|
+
"data-index": index,
|
|
293
|
+
gutter: rest.gutter,
|
|
294
|
+
nextContainer: containers[index + 1],
|
|
295
|
+
onKeyDown: (e) => handleKeyDown(e, index, false),
|
|
296
|
+
onMouseDown: (e) => startResize(e, index, false, EVENT_TYPE.MOUSE),
|
|
297
|
+
tabIndex: 0
|
|
298
|
+
}),
|
|
299
|
+
count - 1 !== index && vertical && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizableBar, {
|
|
300
|
+
container: blocks[index],
|
|
301
|
+
"data-index": index,
|
|
302
|
+
gutter: rest.gutter,
|
|
303
|
+
nextContainer: blocks[index + 1],
|
|
304
|
+
onKeyDown: (e) => handleKeyDown(e, index, true),
|
|
305
|
+
onMouseDown: (e) => startResize(e, index, true, EVENT_TYPE.MOUSE),
|
|
306
|
+
tabIndex: 0,
|
|
307
|
+
v: true
|
|
308
|
+
})
|
|
309
|
+
]
|
|
310
|
+
}))
|
|
311
|
+
});
|
|
302
312
|
}
|
|
303
313
|
ResizableContainer.propTypes = import_props.props;
|
|
304
314
|
ResizableContainer.defaultProps = import_defaultProps.defaultProps;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Resizable.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst safeDifference = 15;\nconst minDifference = 8;\nconst EVENT_TYPE = { MOUSE: 'mouse', KEY: 'arrows' };\nconst DIRECTION = {\n L: 'left',\n R: 'right',\n U: 'up',\n D: 'down',\n};\n\nfunction calcPosition(arrow, position) {\n let offset;\n switch (arrow) {\n case DIRECTION.U:\n offset = position - 3;\n break;\n case DIRECTION.D:\n offset = position + 3;\n break;\n case DIRECTION.L:\n offset = position - 3;\n break;\n case DIRECTION.R:\n offset = position + 3;\n break;\n default:\n offset = position;\n }\n return offset;\n}\n\nfunction cursorResolver(nextPx, px, isVertical) {\n const orientation = {\n vertical: 'row-resize',\n horizontal: 'col-resize',\n left: 'w-resize',\n right: 'e-resize',\n up: 'n-resize',\n down: 's-resize',\n };\n\n if (isVertical && nextPx && nextPx <= safeDifference + 1)\n return orientation.up;\n if (isVertical && px > safeDifference + 1) return orientation.vertical;\n if (isVertical && px <= safeDifference + 1) return orientation.down;\n\n if (!isVertical && nextPx && nextPx <= safeDifference + 1)\n return orientation.left;\n if (!isVertical && px <= safeDifference + 1) return orientation.right;\n if (!isVertical && px > safeDifference + 1) return orientation.horizontal;\n\n return isVertical ? orientation.vertical : orientation.horizontal;\n}\n\nfunction ResizableItemComponent({ innerRef, ...p }) {\n return <Grid ref={innerRef} {...p} />;\n}\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n position: relative;\n`;\nconst ResizableBar = styled.div`\n position: absolute;\n cursor: ${({ container, nextContainer, v }) =>\n cursorResolver(nextContainer, container, v)};\n\n ${(props) => {\n if (props.v) {\n return `\n bottom: calc(${mapGap(props.gutter)} * -0.5);\n left: 0;\n width: 100%;\n height: 10px;\n margin-bottom: -5px;\n display: flex;\n flex-direction: column;\n justify-content:space-around;\n align-items: center;\n &:after{\n width: 100%;\n height: 1px;\n display: block;\n background: ${props.theme.colors.neutral['300']};\n content: '';\n }\n &:hover{\n &:after{\n background: ${props.theme.colors.brand['600']};\n } \n }\n `;\n }\n return `\n top: 0;\n right: calc(${mapGap(props.gutter)} * -0.5);\n height: 100%;\n width: 10px;\n margin-right: -5px;\n display: flex;\n flex-direction: row;\n justify-content:space-around;\n align-items: center;\n &:after{\n height: 100%;\n width: 1px;\n display: block;\n background: ${props.theme.colors.neutral['300']};\n content: '';\n }\n &:hover{\n &:after{\n background: ${props.theme.colors.brand['600']};\n } \n }\n `;\n }}\n`;\nconst getWidths = (list) => list.map((l) => l.clientWidth);\nconst getHeights = (list) => list.map((l) => l.clientHeight);\n\nfunction ResizableContainer({\n children,\n cols,\n rows,\n vertical,\n horizontal,\n ...rest\n}) {\n const refs = useRef([]);\n const [containers, setContainers] = useState(cols);\n const [blocks, setBlocks] = useState(rows);\n const [isDragging, setDragging] = useState(false);\n const [start, setStartPoint] = useState(0);\n const [resetPoint, setResetPoint] = useState();\n\n useEffect(() => {\n if (horizontal) setContainers(getWidths(refs.current));\n if (vertical) setBlocks(getHeights(refs.current));\n }, [refs.current, horizontal, vertical]);\n const addRef = (node) => {\n refs.current.push(node);\n };\n const resizePanels = (diff = 1, v = false) => {\n const index = parseInt(start.index, 10);\n if (!v) {\n const newContainers = [...containers];\n if (\n newContainers[index + 1] &&\n newContainers[index + 1] > minDifference\n ) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (\n newContainers[index - 1] &&\n newContainers[index - 1] > minDifference\n ) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference))\n setContainers(newContainers);\n } else {\n const newBlocks = [...blocks];\n if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {\n newBlocks[index + 1] = newBlocks[index + 1] - diff;\n newBlocks[index] = diff + newBlocks[index];\n } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {\n newBlocks[index - 1] = newBlocks[index - 1] - diff;\n newBlocks[index] = diff + newBlocks[index];\n }\n if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);\n }\n };\n const startResize = (event, index, v = false, type) => {\n setDragging(type);\n setStartPoint({\n x: event.clientX,\n y: event.clientY,\n index,\n v,\n });\n setResetPoint({ containers, blocks });\n };\n const moveResize = (event, type) => {\n if (isDragging && isDragging === type && !start.v) {\n const diff = event.clientX - start.x;\n if (diff === 0) return;\n setStartPoint({ x: event.clientX, index: start.index });\n resizePanels(diff);\n } else if (isDragging && isDragging === type && start.v) {\n const diff = event.clientY - start.y;\n if (diff === 0) return;\n setStartPoint({ ...start, y: event.clientY, index: start.index });\n resizePanels(diff, true);\n }\n };\n const endResize = (type) => {\n if (isDragging === type) {\n setDragging(false);\n setStartPoint();\n }\n };\n const handleKeyDown = (e, index, v = false) => {\n const keyCodes = {\n 37: DIRECTION.L,\n Left: DIRECTION.L,\n ArrowLeft: DIRECTION.L,\n 38: DIRECTION.U,\n Up: DIRECTION.U,\n ArrowUp: DIRECTION.U,\n 39: DIRECTION.R,\n Right: DIRECTION.R,\n ArrowRight: DIRECTION.R,\n 40: DIRECTION.D,\n Down: DIRECTION.D,\n ArrowDown: DIRECTION.D,\n };\n\n if (keyCodes[e.key || e.keyCode]) {\n e.preventDefault();\n const { top: y, left: x } = e.target.getBoundingClientRect();\n if (!start) {\n startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n } else {\n const clientX =\n keyCodes[e.keyCode] === DIRECTION.L ||\n keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U ||\n keyCodes[e.keyCode] === DIRECTION.D\n ? calcPosition(keyCodes[e.keyCode], y)\n : y;\n\n moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n }\n }\n };\n\n const onLeave = (type) => {\n if (isDragging === type) {\n setDragging(false);\n\n if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n if (resetPoint && resetPoint.containers)\n setContainers(resetPoint.containers);\n }\n };\n const count = React.Children.count(children);\n\n return (\n <ResizableGrid\n {...rest}\n cols={containers}\n onKeyUp={() => endResize(EVENT_TYPE.KEY)}\n onMouseLeave={() => onLeave(EVENT_TYPE.MOUSE)}\n onMouseMove={(e) => moveResize(e, EVENT_TYPE.MOUSE)}\n onMouseUp={() => endResize(EVENT_TYPE.MOUSE)}\n rows={blocks}\n >\n {React.Children.map(children, (child, index) => (\n <ResizableItem data-index={index} innerRef={addRef}>\n {child}\n {count - 1 !== index && horizontal && (\n <ResizableBar\n container={containers[index]}\n data-index={index}\n gutter={rest.gutter}\n nextContainer={containers[index + 1]}\n onKeyDown={(e) => handleKeyDown(e, index, false)}\n onMouseDown={(e) =>\n startResize(e, index, false, EVENT_TYPE.MOUSE)\n }\n tabIndex={0}\n />\n )}\n {count - 1 !== index && vertical && (\n <ResizableBar\n container={blocks[index]}\n data-index={index}\n gutter={rest.gutter}\n nextContainer={blocks[index + 1]}\n onKeyDown={(e) => handleKeyDown(e, index, true)}\n onMouseDown={(e) => startResize(e, index, true, EVENT_TYPE.MOUSE)}\n tabIndex={0}\n v\n />\n )}\n </ResizableItem>\n ))}\n </ResizableGrid>\n );\n}\n\nResizableContainer.propTypes = rprops;\nResizableContainer.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["import_ds_system", "React", "rprops"]
|
|
7
7
|
}
|
package/dist/cjs/defaultProps.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var defaultProps_exports = {};
|
|
23
26
|
__export(defaultProps_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const defaultProps = {\n vertical: false,\n horizontal: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,7 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
+
mod
|
|
24
|
+
));
|
|
22
25
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
23
26
|
var src_exports = {};
|
|
24
27
|
__export(src_exports, {
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './Resizable';\nexport { default } from './Resizable';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,wBAAd;AACA,uBAAwB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/props.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var props_exports = {};
|
|
23
26
|
__export(props_exports, {
|
|
@@ -30,7 +33,11 @@ const props = {
|
|
|
30
33
|
children: import_ds_utilities.PropTypes.node.description("Grid item content"),
|
|
31
34
|
vertical: import_ds_utilities.PropTypes.bool.description("vertical resizing"),
|
|
32
35
|
horizontal: import_ds_utilities.PropTypes.bool.description("horizontal resizing"),
|
|
33
|
-
rows: import_ds_utilities.PropTypes.arrayOf(
|
|
34
|
-
|
|
36
|
+
rows: import_ds_utilities.PropTypes.arrayOf(
|
|
37
|
+
import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string])
|
|
38
|
+
).description("Row layout cells"),
|
|
39
|
+
cols: import_ds_utilities.PropTypes.arrayOf(
|
|
40
|
+
import_ds_utilities.PropTypes.oneOfType([import_ds_utilities.PropTypes.number, import_ds_utilities.PropTypes.string])
|
|
41
|
+
).description("Column layout cells")
|
|
35
42
|
};
|
|
36
43
|
//# sourceMappingURL=props.js.map
|
package/dist/cjs/props.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const props = {\n /** grid item content */\n children: PropTypes.node.description('Grid item content'),\n /** vertical resizing */\n vertical: PropTypes.bool.description('vertical resizing'),\n /** horizontal resizing */\n horizontal: PropTypes.bool.description('horizontal resizing'),\n /** Row layout cells */\n rows: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n ).description('Row layout cells'),\n /** Column layout cells */\n cols: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n ).description('Column layout cells'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,QAAQ;AAAA,EAEnB,UAAU,8BAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,UAAU,8BAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,YAAY,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAE5D,MAAM,8BAAU;AAAA,IACd,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC;AAAA,EAC1D,EAAE,YAAY,kBAAkB;AAAA,EAEhC,MAAM,8BAAU;AAAA,IACd,8BAAU,UAAU,CAAC,8BAAU,QAAQ,8BAAU,MAAM,CAAC;AAAA,EAC1D,EAAE,YAAY,qBAAqB;AACrC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Resizable.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import React2, { useRef, useState, useEffect } from "react";
|
|
3
4
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
5
|
import { styled } from "@elliemae/ds-system";
|
|
@@ -59,7 +60,7 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
59
60
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
60
61
|
}
|
|
61
62
|
function ResizableItemComponent({ innerRef, ...p }) {
|
|
62
|
-
return /* @__PURE__ */
|
|
63
|
+
return /* @__PURE__ */ jsx(Grid, {
|
|
63
64
|
ref: innerRef,
|
|
64
65
|
...p
|
|
65
66
|
});
|
|
@@ -242,35 +243,41 @@ function ResizableContainer({
|
|
|
242
243
|
}
|
|
243
244
|
};
|
|
244
245
|
const count = React2.Children.count(children);
|
|
245
|
-
return /* @__PURE__ */
|
|
246
|
+
return /* @__PURE__ */ jsx(ResizableGrid, {
|
|
246
247
|
...rest,
|
|
247
248
|
cols: containers,
|
|
248
249
|
onKeyUp: () => endResize(EVENT_TYPE.KEY),
|
|
249
250
|
onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
|
|
250
251
|
onMouseMove: (e) => moveResize(e, EVENT_TYPE.MOUSE),
|
|
251
252
|
onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
|
|
252
|
-
rows: blocks
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
253
|
+
rows: blocks,
|
|
254
|
+
children: React2.Children.map(children, (child, index) => /* @__PURE__ */ jsxs(ResizableItem, {
|
|
255
|
+
"data-index": index,
|
|
256
|
+
innerRef: addRef,
|
|
257
|
+
children: [
|
|
258
|
+
child,
|
|
259
|
+
count - 1 !== index && horizontal && /* @__PURE__ */ jsx(ResizableBar, {
|
|
260
|
+
container: containers[index],
|
|
261
|
+
"data-index": index,
|
|
262
|
+
gutter: rest.gutter,
|
|
263
|
+
nextContainer: containers[index + 1],
|
|
264
|
+
onKeyDown: (e) => handleKeyDown(e, index, false),
|
|
265
|
+
onMouseDown: (e) => startResize(e, index, false, EVENT_TYPE.MOUSE),
|
|
266
|
+
tabIndex: 0
|
|
267
|
+
}),
|
|
268
|
+
count - 1 !== index && vertical && /* @__PURE__ */ jsx(ResizableBar, {
|
|
269
|
+
container: blocks[index],
|
|
270
|
+
"data-index": index,
|
|
271
|
+
gutter: rest.gutter,
|
|
272
|
+
nextContainer: blocks[index + 1],
|
|
273
|
+
onKeyDown: (e) => handleKeyDown(e, index, true),
|
|
274
|
+
onMouseDown: (e) => startResize(e, index, true, EVENT_TYPE.MOUSE),
|
|
275
|
+
tabIndex: 0,
|
|
276
|
+
v: true
|
|
277
|
+
})
|
|
278
|
+
]
|
|
279
|
+
}))
|
|
280
|
+
});
|
|
274
281
|
}
|
|
275
282
|
ResizableContainer.propTypes = rprops;
|
|
276
283
|
ResizableContainer.defaultProps = defaultProps;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Resizable.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useEffect } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst safeDifference = 15;\nconst minDifference = 8;\nconst EVENT_TYPE = { MOUSE: 'mouse', KEY: 'arrows' };\nconst DIRECTION = {\n L: 'left',\n R: 'right',\n U: 'up',\n D: 'down',\n};\n\nfunction calcPosition(arrow, position) {\n let offset;\n switch (arrow) {\n case DIRECTION.U:\n offset = position - 3;\n break;\n case DIRECTION.D:\n offset = position + 3;\n break;\n case DIRECTION.L:\n offset = position - 3;\n break;\n case DIRECTION.R:\n offset = position + 3;\n break;\n default:\n offset = position;\n }\n return offset;\n}\n\nfunction cursorResolver(nextPx, px, isVertical) {\n const orientation = {\n vertical: 'row-resize',\n horizontal: 'col-resize',\n left: 'w-resize',\n right: 'e-resize',\n up: 'n-resize',\n down: 's-resize',\n };\n\n if (isVertical && nextPx && nextPx <= safeDifference + 1)\n return orientation.up;\n if (isVertical && px > safeDifference + 1) return orientation.vertical;\n if (isVertical && px <= safeDifference + 1) return orientation.down;\n\n if (!isVertical && nextPx && nextPx <= safeDifference + 1)\n return orientation.left;\n if (!isVertical && px <= safeDifference + 1) return orientation.right;\n if (!isVertical && px > safeDifference + 1) return orientation.horizontal;\n\n return isVertical ? orientation.vertical : orientation.horizontal;\n}\n\nfunction ResizableItemComponent({ innerRef, ...p }) {\n return <Grid ref={innerRef} {...p} />;\n}\n\nconst ResizableGrid = styled(Grid)``;\nconst ResizableItem = styled(ResizableItemComponent)`\n position: relative;\n`;\nconst ResizableBar = styled.div`\n position: absolute;\n cursor: ${({ container, nextContainer, v }) =>\n cursorResolver(nextContainer, container, v)};\n\n ${(props) => {\n if (props.v) {\n return `\n bottom: calc(${mapGap(props.gutter)} * -0.5);\n left: 0;\n width: 100%;\n height: 10px;\n margin-bottom: -5px;\n display: flex;\n flex-direction: column;\n justify-content:space-around;\n align-items: center;\n &:after{\n width: 100%;\n height: 1px;\n display: block;\n background: ${props.theme.colors.neutral['300']};\n content: '';\n }\n &:hover{\n &:after{\n background: ${props.theme.colors.brand['600']};\n } \n }\n `;\n }\n return `\n top: 0;\n right: calc(${mapGap(props.gutter)} * -0.5);\n height: 100%;\n width: 10px;\n margin-right: -5px;\n display: flex;\n flex-direction: row;\n justify-content:space-around;\n align-items: center;\n &:after{\n height: 100%;\n width: 1px;\n display: block;\n background: ${props.theme.colors.neutral['300']};\n content: '';\n }\n &:hover{\n &:after{\n background: ${props.theme.colors.brand['600']};\n } \n }\n `;\n }}\n`;\nconst getWidths = (list) => list.map((l) => l.clientWidth);\nconst getHeights = (list) => list.map((l) => l.clientHeight);\n\nfunction ResizableContainer({\n children,\n cols,\n rows,\n vertical,\n horizontal,\n ...rest\n}) {\n const refs = useRef([]);\n const [containers, setContainers] = useState(cols);\n const [blocks, setBlocks] = useState(rows);\n const [isDragging, setDragging] = useState(false);\n const [start, setStartPoint] = useState(0);\n const [resetPoint, setResetPoint] = useState();\n\n useEffect(() => {\n if (horizontal) setContainers(getWidths(refs.current));\n if (vertical) setBlocks(getHeights(refs.current));\n }, [refs.current, horizontal, vertical]);\n const addRef = (node) => {\n refs.current.push(node);\n };\n const resizePanels = (diff = 1, v = false) => {\n const index = parseInt(start.index, 10);\n if (!v) {\n const newContainers = [...containers];\n if (\n newContainers[index + 1] &&\n newContainers[index + 1] > minDifference\n ) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (\n newContainers[index - 1] &&\n newContainers[index - 1] > minDifference\n ) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference))\n setContainers(newContainers);\n } else {\n const newBlocks = [...blocks];\n if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {\n newBlocks[index + 1] = newBlocks[index + 1] - diff;\n newBlocks[index] = diff + newBlocks[index];\n } else if (newBlocks[index - 1] && newBlocks[index - 1] > minDifference) {\n newBlocks[index - 1] = newBlocks[index - 1] - diff;\n newBlocks[index] = diff + newBlocks[index];\n }\n if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);\n }\n };\n const startResize = (event, index, v = false, type) => {\n setDragging(type);\n setStartPoint({\n x: event.clientX,\n y: event.clientY,\n index,\n v,\n });\n setResetPoint({ containers, blocks });\n };\n const moveResize = (event, type) => {\n if (isDragging && isDragging === type && !start.v) {\n const diff = event.clientX - start.x;\n if (diff === 0) return;\n setStartPoint({ x: event.clientX, index: start.index });\n resizePanels(diff);\n } else if (isDragging && isDragging === type && start.v) {\n const diff = event.clientY - start.y;\n if (diff === 0) return;\n setStartPoint({ ...start, y: event.clientY, index: start.index });\n resizePanels(diff, true);\n }\n };\n const endResize = (type) => {\n if (isDragging === type) {\n setDragging(false);\n setStartPoint();\n }\n };\n const handleKeyDown = (e, index, v = false) => {\n const keyCodes = {\n 37: DIRECTION.L,\n Left: DIRECTION.L,\n ArrowLeft: DIRECTION.L,\n 38: DIRECTION.U,\n Up: DIRECTION.U,\n ArrowUp: DIRECTION.U,\n 39: DIRECTION.R,\n Right: DIRECTION.R,\n ArrowRight: DIRECTION.R,\n 40: DIRECTION.D,\n Down: DIRECTION.D,\n ArrowDown: DIRECTION.D,\n };\n\n if (keyCodes[e.key || e.keyCode]) {\n e.preventDefault();\n const { top: y, left: x } = e.target.getBoundingClientRect();\n if (!start) {\n startResize({ clientX: x, clientY: y }, index, v, EVENT_TYPE.KEY);\n } else {\n const clientX =\n keyCodes[e.keyCode] === DIRECTION.L ||\n keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U ||\n keyCodes[e.keyCode] === DIRECTION.D\n ? calcPosition(keyCodes[e.keyCode], y)\n : y;\n\n moveResize({ clientX, clientY }, EVENT_TYPE.KEY);\n }\n }\n };\n\n const onLeave = (type) => {\n if (isDragging === type) {\n setDragging(false);\n\n if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);\n if (resetPoint && resetPoint.containers)\n setContainers(resetPoint.containers);\n }\n };\n const count = React.Children.count(children);\n\n return (\n <ResizableGrid\n {...rest}\n cols={containers}\n onKeyUp={() => endResize(EVENT_TYPE.KEY)}\n onMouseLeave={() => onLeave(EVENT_TYPE.MOUSE)}\n onMouseMove={(e) => moveResize(e, EVENT_TYPE.MOUSE)}\n onMouseUp={() => endResize(EVENT_TYPE.MOUSE)}\n rows={blocks}\n >\n {React.Children.map(children, (child, index) => (\n <ResizableItem data-index={index} innerRef={addRef}>\n {child}\n {count - 1 !== index && horizontal && (\n <ResizableBar\n container={containers[index]}\n data-index={index}\n gutter={rest.gutter}\n nextContainer={containers[index + 1]}\n onKeyDown={(e) => handleKeyDown(e, index, false)}\n onMouseDown={(e) =>\n startResize(e, index, false, EVENT_TYPE.MOUSE)\n }\n tabIndex={0}\n />\n )}\n {count - 1 !== index && vertical && (\n <ResizableBar\n container={blocks[index]}\n data-index={index}\n gutter={rest.gutter}\n nextContainer={blocks[index + 1]}\n onKeyDown={(e) => handleKeyDown(e, index, true)}\n onMouseDown={(e) => startResize(e, index, true, EVENT_TYPE.MOUSE)}\n tabIndex={0}\n v\n />\n )}\n </ResizableItem>\n ))}\n </ResizableGrid>\n );\n}\n\nResizableContainer.propTypes = rprops;\nResizableContainer.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const defaultProps = {\n vertical: false,\n horizontal: false,\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AAAA,EAC1B,UAAU;AAAA,EACV,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Resizable';\nexport { default } from './Resizable';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;",
|
|
6
|
+
"names": ["default"]
|
|
7
7
|
}
|
package/dist/esm/props.js
CHANGED
|
@@ -4,8 +4,12 @@ const props = {
|
|
|
4
4
|
children: PropTypes.node.description("Grid item content"),
|
|
5
5
|
vertical: PropTypes.bool.description("vertical resizing"),
|
|
6
6
|
horizontal: PropTypes.bool.description("horizontal resizing"),
|
|
7
|
-
rows: PropTypes.arrayOf(
|
|
8
|
-
|
|
7
|
+
rows: PropTypes.arrayOf(
|
|
8
|
+
PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
|
9
|
+
).description("Row layout cells"),
|
|
10
|
+
cols: PropTypes.arrayOf(
|
|
11
|
+
PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
|
12
|
+
).description("Column layout cells")
|
|
9
13
|
};
|
|
10
14
|
export {
|
|
11
15
|
props
|
package/dist/esm/props.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const props = {\n /** grid item content */\n children: PropTypes.node.description('Grid item content'),\n /** vertical resizing */\n vertical: PropTypes.bool.description('vertical resizing'),\n /** horizontal resizing */\n horizontal: PropTypes.bool.description('horizontal resizing'),\n /** Row layout cells */\n rows: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n ).description('Row layout cells'),\n /** Column layout cells */\n cols: PropTypes.arrayOf(\n PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n ).description('Column layout cells'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAEnB,MAAM,QAAQ;AAAA,EAEnB,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAAA,EAExD,YAAY,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAE5D,MAAM,UAAU;AAAA,IACd,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,EAC1D,EAAE,YAAY,kBAAkB;AAAA,EAEhC,MAAM,UAAU;AAAA,IACd,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,MAAM,CAAC;AAAA,EAC1D,EAAE,YAAY,qBAAqB;AACrC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-resizeable-container",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Resizeable Container",
|
|
6
6
|
"files": [
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
"indent": 4
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@elliemae/ds-grid": "3.4.
|
|
51
|
-
"@elliemae/ds-system": "3.4.
|
|
52
|
-
"@elliemae/ds-utilities": "3.4.
|
|
50
|
+
"@elliemae/ds-grid": "3.4.3",
|
|
51
|
+
"@elliemae/ds-system": "3.4.3",
|
|
52
|
+
"@elliemae/ds-utilities": "3.4.3"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@testing-library/jest-dom": "~5.16.4",
|