@elliemae/ds-resizeable-container 3.35.0 → 3.36.0-next.1
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 +14 -29
- package/dist/cjs/Resizable.js.map +2 -2
- package/dist/esm/Resizable.js +14 -29
- package/dist/esm/Resizable.js.map +2 -2
- package/dist/types/Resizable.d.ts +0 -7
- package/package.json +5 -5
package/dist/cjs/Resizable.js
CHANGED
|
@@ -79,18 +79,12 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
79
79
|
up: "n-resize",
|
|
80
80
|
down: "s-resize"
|
|
81
81
|
};
|
|
82
|
-
if (isVertical && nextPx && nextPx <= safeDifference + 1)
|
|
83
|
-
|
|
84
|
-
if (isVertical && px
|
|
85
|
-
|
|
86
|
-
if (isVertical && px <= safeDifference + 1)
|
|
87
|
-
|
|
88
|
-
if (!isVertical && nextPx && nextPx <= safeDifference + 1)
|
|
89
|
-
return orientation.left;
|
|
90
|
-
if (!isVertical && px <= safeDifference + 1)
|
|
91
|
-
return orientation.right;
|
|
92
|
-
if (!isVertical && px > safeDifference + 1)
|
|
93
|
-
return orientation.horizontal;
|
|
82
|
+
if (isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.up;
|
|
83
|
+
if (isVertical && px > safeDifference + 1) return orientation.vertical;
|
|
84
|
+
if (isVertical && px <= safeDifference + 1) return orientation.down;
|
|
85
|
+
if (!isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.left;
|
|
86
|
+
if (!isVertical && px <= safeDifference + 1) return orientation.right;
|
|
87
|
+
if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
|
|
94
88
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
95
89
|
}
|
|
96
90
|
const ResizableItemComponent = ({ innerRef, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { ref: innerRef, ...p });
|
|
@@ -163,10 +157,8 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
163
157
|
const [start, setStartPoint] = (0, import_react.useState)(0);
|
|
164
158
|
const [resetPoint, setResetPoint] = (0, import_react.useState)();
|
|
165
159
|
(0, import_react.useEffect)(() => {
|
|
166
|
-
if (horizontal)
|
|
167
|
-
|
|
168
|
-
if (vertical)
|
|
169
|
-
setBlocks(getHeights(refs.current));
|
|
160
|
+
if (horizontal) setContainers(getWidths(refs.current));
|
|
161
|
+
if (vertical) setBlocks(getHeights(refs.current));
|
|
170
162
|
}, [refs.current, horizontal, vertical]);
|
|
171
163
|
const addRef = (node) => {
|
|
172
164
|
refs.current.push(node);
|
|
@@ -182,8 +174,7 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
182
174
|
newContainers[index - 1] = newContainers[index - 1] - diff;
|
|
183
175
|
newContainers[index] = diff + newContainers[index];
|
|
184
176
|
}
|
|
185
|
-
if (newContainers.every((c) => c > safeDifference))
|
|
186
|
-
setContainers(newContainers);
|
|
177
|
+
if (newContainers.every((c) => c > safeDifference)) setContainers(newContainers);
|
|
187
178
|
} else {
|
|
188
179
|
const newBlocks = [...blocks];
|
|
189
180
|
if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
|
|
@@ -193,8 +184,7 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
193
184
|
newBlocks[index - 1] = newBlocks[index - 1] - diff;
|
|
194
185
|
newBlocks[index] = diff + newBlocks[index];
|
|
195
186
|
}
|
|
196
|
-
if (newBlocks.every((c) => c > safeDifference))
|
|
197
|
-
setBlocks(newBlocks);
|
|
187
|
+
if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);
|
|
198
188
|
}
|
|
199
189
|
};
|
|
200
190
|
const startResize = (event, index, v = false, type) => {
|
|
@@ -210,14 +200,12 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
210
200
|
const moveResize = (event, type) => {
|
|
211
201
|
if (isDragging && isDragging === type && !start.v) {
|
|
212
202
|
const diff = event.clientX - start.x;
|
|
213
|
-
if (diff === 0)
|
|
214
|
-
return;
|
|
203
|
+
if (diff === 0) return;
|
|
215
204
|
setStartPoint({ x: event.clientX, index: start.index });
|
|
216
205
|
resizePanels(diff);
|
|
217
206
|
} else if (isDragging && isDragging === type && start.v) {
|
|
218
207
|
const diff = event.clientY - start.y;
|
|
219
|
-
if (diff === 0)
|
|
220
|
-
return;
|
|
208
|
+
if (diff === 0) return;
|
|
221
209
|
setStartPoint({ ...start, y: event.clientY, index: start.index });
|
|
222
210
|
resizePanels(diff, true);
|
|
223
211
|
}
|
|
@@ -258,10 +246,8 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
258
246
|
const onLeave = (type) => {
|
|
259
247
|
if (isDragging === type) {
|
|
260
248
|
setDragging(false);
|
|
261
|
-
if (resetPoint && resetPoint.blocks)
|
|
262
|
-
|
|
263
|
-
if (resetPoint && resetPoint.containers)
|
|
264
|
-
setContainers(resetPoint.containers);
|
|
249
|
+
if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
|
|
250
|
+
if (resetPoint && resetPoint.containers) setContainers(resetPoint.containers);
|
|
265
251
|
}
|
|
266
252
|
};
|
|
267
253
|
const count = import_react.default.Children.count(children);
|
|
@@ -306,7 +292,6 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
306
292
|
}
|
|
307
293
|
);
|
|
308
294
|
};
|
|
309
|
-
ResizableContainer.propTypes = import_props.props;
|
|
310
295
|
ResizableContainer.defaultProps = import_defaultProps.defaultProps;
|
|
311
296
|
ResizableContainer.displayName = "ResizableContainer";
|
|
312
297
|
const DSResizableContainerWithSchema = (0, import_ds_props_helpers.describe)(ResizableContainer);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Resizable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
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-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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) 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) 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\nconst ResizableItemComponent = ({ innerRef, ...p }) => <Grid ref={innerRef} {...p} />;\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 }) => 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\nconst ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...rest }) => {\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 (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 || keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U || 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) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\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.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DgC;AA3DvD,mBAAmD;AACnD,8BAAyB;AACzB,uBAA+B;AAC/B,qBAAqB;AACrB,mBAAgC;AAChC,0BAA6B;AAE7B,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,aAAa,EAAE,OAAO,SAAS,KAAK,SAAS;AACnD,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,SAAS,aAAa,OAAO,UAAU;AACrC,MAAI;AACJ,UAAQ,OAAO;AAAA,IACb,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF;AACE,eAAS;AAAA,EACb;AACA,SAAO;AACT;AAEA,SAAS,eAAe,QAAQ,IAAI,YAAY;AAC9C,QAAM,cAAc;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAEA,MAAI,cAAc,UAAU,UAAU,iBAAiB
|
|
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-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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) 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) 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\nconst ResizableItemComponent = ({ innerRef, ...p }) => <Grid ref={innerRef} {...p} />;\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 }) => 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\nconst ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...rest }) => {\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 (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 || keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U || 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) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\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.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": "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",
|
|
6
6
|
"names": ["React", "rprops"]
|
|
7
7
|
}
|
package/dist/esm/Resizable.js
CHANGED
|
@@ -44,18 +44,12 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
44
44
|
up: "n-resize",
|
|
45
45
|
down: "s-resize"
|
|
46
46
|
};
|
|
47
|
-
if (isVertical && nextPx && nextPx <= safeDifference + 1)
|
|
48
|
-
|
|
49
|
-
if (isVertical && px
|
|
50
|
-
|
|
51
|
-
if (isVertical && px <= safeDifference + 1)
|
|
52
|
-
|
|
53
|
-
if (!isVertical && nextPx && nextPx <= safeDifference + 1)
|
|
54
|
-
return orientation.left;
|
|
55
|
-
if (!isVertical && px <= safeDifference + 1)
|
|
56
|
-
return orientation.right;
|
|
57
|
-
if (!isVertical && px > safeDifference + 1)
|
|
58
|
-
return orientation.horizontal;
|
|
47
|
+
if (isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.up;
|
|
48
|
+
if (isVertical && px > safeDifference + 1) return orientation.vertical;
|
|
49
|
+
if (isVertical && px <= safeDifference + 1) return orientation.down;
|
|
50
|
+
if (!isVertical && nextPx && nextPx <= safeDifference + 1) return orientation.left;
|
|
51
|
+
if (!isVertical && px <= safeDifference + 1) return orientation.right;
|
|
52
|
+
if (!isVertical && px > safeDifference + 1) return orientation.horizontal;
|
|
59
53
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
60
54
|
}
|
|
61
55
|
const ResizableItemComponent = ({ innerRef, ...p }) => /* @__PURE__ */ jsx(Grid, { ref: innerRef, ...p });
|
|
@@ -128,10 +122,8 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
128
122
|
const [start, setStartPoint] = useState(0);
|
|
129
123
|
const [resetPoint, setResetPoint] = useState();
|
|
130
124
|
useEffect(() => {
|
|
131
|
-
if (horizontal)
|
|
132
|
-
|
|
133
|
-
if (vertical)
|
|
134
|
-
setBlocks(getHeights(refs.current));
|
|
125
|
+
if (horizontal) setContainers(getWidths(refs.current));
|
|
126
|
+
if (vertical) setBlocks(getHeights(refs.current));
|
|
135
127
|
}, [refs.current, horizontal, vertical]);
|
|
136
128
|
const addRef = (node) => {
|
|
137
129
|
refs.current.push(node);
|
|
@@ -147,8 +139,7 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
147
139
|
newContainers[index - 1] = newContainers[index - 1] - diff;
|
|
148
140
|
newContainers[index] = diff + newContainers[index];
|
|
149
141
|
}
|
|
150
|
-
if (newContainers.every((c) => c > safeDifference))
|
|
151
|
-
setContainers(newContainers);
|
|
142
|
+
if (newContainers.every((c) => c > safeDifference)) setContainers(newContainers);
|
|
152
143
|
} else {
|
|
153
144
|
const newBlocks = [...blocks];
|
|
154
145
|
if (newBlocks[index + 1] && newBlocks[index + 1] > minDifference) {
|
|
@@ -158,8 +149,7 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
158
149
|
newBlocks[index - 1] = newBlocks[index - 1] - diff;
|
|
159
150
|
newBlocks[index] = diff + newBlocks[index];
|
|
160
151
|
}
|
|
161
|
-
if (newBlocks.every((c) => c > safeDifference))
|
|
162
|
-
setBlocks(newBlocks);
|
|
152
|
+
if (newBlocks.every((c) => c > safeDifference)) setBlocks(newBlocks);
|
|
163
153
|
}
|
|
164
154
|
};
|
|
165
155
|
const startResize = (event, index, v = false, type) => {
|
|
@@ -175,14 +165,12 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
175
165
|
const moveResize = (event, type) => {
|
|
176
166
|
if (isDragging && isDragging === type && !start.v) {
|
|
177
167
|
const diff = event.clientX - start.x;
|
|
178
|
-
if (diff === 0)
|
|
179
|
-
return;
|
|
168
|
+
if (diff === 0) return;
|
|
180
169
|
setStartPoint({ x: event.clientX, index: start.index });
|
|
181
170
|
resizePanels(diff);
|
|
182
171
|
} else if (isDragging && isDragging === type && start.v) {
|
|
183
172
|
const diff = event.clientY - start.y;
|
|
184
|
-
if (diff === 0)
|
|
185
|
-
return;
|
|
173
|
+
if (diff === 0) return;
|
|
186
174
|
setStartPoint({ ...start, y: event.clientY, index: start.index });
|
|
187
175
|
resizePanels(diff, true);
|
|
188
176
|
}
|
|
@@ -223,10 +211,8 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
223
211
|
const onLeave = (type) => {
|
|
224
212
|
if (isDragging === type) {
|
|
225
213
|
setDragging(false);
|
|
226
|
-
if (resetPoint && resetPoint.blocks)
|
|
227
|
-
|
|
228
|
-
if (resetPoint && resetPoint.containers)
|
|
229
|
-
setContainers(resetPoint.containers);
|
|
214
|
+
if (resetPoint && resetPoint.blocks) setBlocks(resetPoint.blocks);
|
|
215
|
+
if (resetPoint && resetPoint.containers) setContainers(resetPoint.containers);
|
|
230
216
|
}
|
|
231
217
|
};
|
|
232
218
|
const count = React2.Children.count(children);
|
|
@@ -271,7 +257,6 @@ const ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...res
|
|
|
271
257
|
}
|
|
272
258
|
);
|
|
273
259
|
};
|
|
274
|
-
ResizableContainer.propTypes = rprops;
|
|
275
260
|
ResizableContainer.defaultProps = defaultProps;
|
|
276
261
|
ResizableContainer.displayName = "ResizableContainer";
|
|
277
262
|
const DSResizableContainerWithSchema = describe(ResizableContainer);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/Resizable.tsx"],
|
|
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-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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) 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) 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\nconst ResizableItemComponent = ({ innerRef, ...p }) => <Grid ref={innerRef} {...p} />;\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 }) => 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\nconst ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...rest }) => {\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 (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 || keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U || 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) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\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.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC8DgC,cA6L/C,YA7L+C;AA3DvD,OAAOA,UAAS,QAAQ,UAAU,iBAAiB;AACnD,SAAS,gBAAgB;AACzB,SAAS,QAAQ,cAAc;AAC/B,SAAS,YAAY;AACrB,SAAS,SAAS,cAAc;AAChC,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,aAAa,EAAE,OAAO,SAAS,KAAK,SAAS;AACnD,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,SAAS,aAAa,OAAO,UAAU;AACrC,MAAI;AACJ,UAAQ,OAAO;AAAA,IACb,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF,KAAK,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,IACF;AACE,eAAS;AAAA,EACb;AACA,SAAO;AACT;AAEA,SAAS,eAAe,QAAQ,IAAI,YAAY;AAC9C,QAAM,cAAc;AAAA,IAClB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AAEA,MAAI,cAAc,UAAU,UAAU,iBAAiB
|
|
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-props-helpers';\nimport { styled, mapGap } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as rprops } from './props.js';\nimport { defaultProps } from './defaultProps.js';\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) 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) 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\nconst ResizableItemComponent = ({ innerRef, ...p }) => <Grid ref={innerRef} {...p} />;\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 }) => 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\nconst ResizableContainer = ({ children, cols, rows, vertical, horizontal, ...rest }) => {\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 (newContainers[index + 1] && newContainers[index + 1] > minDifference) {\n newContainers[index + 1] = newContainers[index + 1] - diff;\n newContainers[index] = diff + newContainers[index];\n } else if (newContainers[index - 1] && newContainers[index - 1] > minDifference) {\n newContainers[index - 1] = newContainers[index - 1] - diff;\n newContainers[index] = diff + newContainers[index];\n }\n if (newContainers.every((c) => c > safeDifference)) 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 || keyCodes[e.keyCode] === DIRECTION.R\n ? calcPosition(keyCodes[e.keyCode], x)\n : x;\n const clientY =\n keyCodes[e.keyCode] === DIRECTION.U || 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) 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) => startResize(e, index, false, EVENT_TYPE.MOUSE)}\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.defaultProps = defaultProps;\nResizableContainer.displayName = 'ResizableContainer';\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -7,13 +7,6 @@ declare const ResizableContainer: {
|
|
|
7
7
|
vertical: any;
|
|
8
8
|
horizontal: any;
|
|
9
9
|
}): import("react/jsx-runtime.js").JSX.Element;
|
|
10
|
-
propTypes: {
|
|
11
|
-
children: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
12
|
-
vertical: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
13
|
-
horizontal: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
14
|
-
rows: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
15
|
-
cols: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
|
|
16
|
-
};
|
|
17
10
|
defaultProps: {
|
|
18
11
|
vertical: boolean;
|
|
19
12
|
horizontal: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-resizeable-container",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Resizeable Container",
|
|
6
6
|
"files": [
|
|
@@ -48,14 +48,14 @@
|
|
|
48
48
|
"indent": 4
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@elliemae/ds-grid": "3.
|
|
52
|
-
"@elliemae/ds-props-helpers": "3.
|
|
53
|
-
"@elliemae/ds-system": "3.
|
|
51
|
+
"@elliemae/ds-grid": "3.36.0-next.1",
|
|
52
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
53
|
+
"@elliemae/ds-system": "3.36.0-next.1"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
57
57
|
"styled-components": "~5.3.9",
|
|
58
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"react": "^17.0.2",
|