@elliemae/ds-resizeable-container 3.0.0-alpha.0 → 3.0.0-alpha.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 +51 -17
- package/dist/cjs/Resizable.js.map +1 -1
- package/dist/esm/Resizable.js +53 -17
- package/dist/esm/Resizable.js.map +1 -1
- package/package.json +4 -3
- package/dist/types/Resizable.d.ts +0 -55
- package/dist/types/defaultProps.d.ts +0 -4
- package/dist/types/index.d.ts +0 -2
- package/dist/types/props.d.ts +0 -38
- package/dist/types/tests/DSResizableContainer.events.test.d.ts +0 -1
package/dist/cjs/Resizable.js
CHANGED
|
@@ -1,10 +1,39 @@
|
|
|
1
1
|
var __create = Object.create;
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
8
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
9
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
7
24
|
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
8
37
|
var __export = (target, all) => {
|
|
9
38
|
for (var name in all)
|
|
10
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -91,11 +120,11 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
91
120
|
return orientation.horizontal;
|
|
92
121
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
93
122
|
}
|
|
94
|
-
function ResizableItemComponent(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
});
|
|
123
|
+
function ResizableItemComponent(_a) {
|
|
124
|
+
var _b = _a, { innerRef } = _b, p = __objRest(_b, ["innerRef"]);
|
|
125
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, __spreadValues({
|
|
126
|
+
ref: innerRef
|
|
127
|
+
}, p));
|
|
99
128
|
}
|
|
100
129
|
const ResizableGrid = (0, import_styled_components.default)(import_ds_grid.Grid)``;
|
|
101
130
|
const ResizableItem = (0, import_styled_components.default)(ResizableItemComponent)`
|
|
@@ -158,14 +187,20 @@ const ResizableBar = import_styled_components.default.div`
|
|
|
158
187
|
`;
|
|
159
188
|
const getWidths = (list) => list.map((l) => l.clientWidth);
|
|
160
189
|
const getHeights = (list) => list.map((l) => l.clientHeight);
|
|
161
|
-
function ResizableContainer({
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
}
|
|
190
|
+
function ResizableContainer(_c) {
|
|
191
|
+
var _d = _c, {
|
|
192
|
+
children,
|
|
193
|
+
cols,
|
|
194
|
+
rows,
|
|
195
|
+
vertical,
|
|
196
|
+
horizontal
|
|
197
|
+
} = _d, rest = __objRest(_d, [
|
|
198
|
+
"children",
|
|
199
|
+
"cols",
|
|
200
|
+
"rows",
|
|
201
|
+
"vertical",
|
|
202
|
+
"horizontal"
|
|
203
|
+
]);
|
|
169
204
|
const refs = (0, import_react.useRef)([]);
|
|
170
205
|
const [containers, setContainers] = (0, import_react.useState)(cols);
|
|
171
206
|
const [blocks, setBlocks] = (0, import_react.useState)(rows);
|
|
@@ -228,7 +263,7 @@ function ResizableContainer({
|
|
|
228
263
|
const diff = event.clientY - start.y;
|
|
229
264
|
if (diff === 0)
|
|
230
265
|
return;
|
|
231
|
-
setStartPoint({
|
|
266
|
+
setStartPoint(__spreadProps(__spreadValues({}, start), { y: event.clientY, index: start.index }));
|
|
232
267
|
resizePanels(diff, true);
|
|
233
268
|
}
|
|
234
269
|
};
|
|
@@ -275,15 +310,14 @@ function ResizableContainer({
|
|
|
275
310
|
}
|
|
276
311
|
};
|
|
277
312
|
const count = import_react.default.Children.count(children);
|
|
278
|
-
return /* @__PURE__ */ import_react.default.createElement(ResizableGrid, {
|
|
279
|
-
...rest,
|
|
313
|
+
return /* @__PURE__ */ import_react.default.createElement(ResizableGrid, __spreadProps(__spreadValues({}, rest), {
|
|
280
314
|
cols: containers,
|
|
281
315
|
onKeyUp: () => endResize(EVENT_TYPE.KEY),
|
|
282
316
|
onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
|
|
283
317
|
onMouseMove: (e) => moveResize(e, EVENT_TYPE.MOUSE),
|
|
284
318
|
onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
|
|
285
319
|
rows: blocks
|
|
286
|
-
}, import_react.default.Children.map(children, (child, index) => /* @__PURE__ */ import_react.default.createElement(ResizableItem, {
|
|
320
|
+
}), import_react.default.Children.map(children, (child, index) => /* @__PURE__ */ import_react.default.createElement(ResizableItem, {
|
|
287
321
|
"data-index": index,
|
|
288
322
|
innerRef: addRef
|
|
289
323
|
}, child, count - 1 !== index && horizontal && /* @__PURE__ */ import_react.default.createElement(ResizableBar, {
|
|
@@ -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 'react-desc';\nimport styled from 'styled-components';\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;\n\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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Resizable.js
CHANGED
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
1
32
|
import * as React from "react";
|
|
2
33
|
import React2, { useRef, useState, useEffect } from "react";
|
|
3
34
|
import { describe } from "react-desc";
|
|
@@ -58,11 +89,11 @@ function cursorResolver(nextPx, px, isVertical) {
|
|
|
58
89
|
return orientation.horizontal;
|
|
59
90
|
return isVertical ? orientation.vertical : orientation.horizontal;
|
|
60
91
|
}
|
|
61
|
-
function ResizableItemComponent(
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
});
|
|
92
|
+
function ResizableItemComponent(_a) {
|
|
93
|
+
var _b = _a, { innerRef } = _b, p = __objRest(_b, ["innerRef"]);
|
|
94
|
+
return /* @__PURE__ */ React2.createElement(Grid, __spreadValues({
|
|
95
|
+
ref: innerRef
|
|
96
|
+
}, p));
|
|
66
97
|
}
|
|
67
98
|
const ResizableGrid = styled(Grid)``;
|
|
68
99
|
const ResizableItem = styled(ResizableItemComponent)`
|
|
@@ -125,14 +156,20 @@ const ResizableBar = styled.div`
|
|
|
125
156
|
`;
|
|
126
157
|
const getWidths = (list) => list.map((l) => l.clientWidth);
|
|
127
158
|
const getHeights = (list) => list.map((l) => l.clientHeight);
|
|
128
|
-
function ResizableContainer({
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
159
|
+
function ResizableContainer(_c) {
|
|
160
|
+
var _d = _c, {
|
|
161
|
+
children,
|
|
162
|
+
cols,
|
|
163
|
+
rows,
|
|
164
|
+
vertical,
|
|
165
|
+
horizontal
|
|
166
|
+
} = _d, rest = __objRest(_d, [
|
|
167
|
+
"children",
|
|
168
|
+
"cols",
|
|
169
|
+
"rows",
|
|
170
|
+
"vertical",
|
|
171
|
+
"horizontal"
|
|
172
|
+
]);
|
|
136
173
|
const refs = useRef([]);
|
|
137
174
|
const [containers, setContainers] = useState(cols);
|
|
138
175
|
const [blocks, setBlocks] = useState(rows);
|
|
@@ -195,7 +232,7 @@ function ResizableContainer({
|
|
|
195
232
|
const diff = event.clientY - start.y;
|
|
196
233
|
if (diff === 0)
|
|
197
234
|
return;
|
|
198
|
-
setStartPoint({
|
|
235
|
+
setStartPoint(__spreadProps(__spreadValues({}, start), { y: event.clientY, index: start.index }));
|
|
199
236
|
resizePanels(diff, true);
|
|
200
237
|
}
|
|
201
238
|
};
|
|
@@ -242,15 +279,14 @@ function ResizableContainer({
|
|
|
242
279
|
}
|
|
243
280
|
};
|
|
244
281
|
const count = React2.Children.count(children);
|
|
245
|
-
return /* @__PURE__ */ React2.createElement(ResizableGrid, {
|
|
246
|
-
...rest,
|
|
282
|
+
return /* @__PURE__ */ React2.createElement(ResizableGrid, __spreadProps(__spreadValues({}, rest), {
|
|
247
283
|
cols: containers,
|
|
248
284
|
onKeyUp: () => endResize(EVENT_TYPE.KEY),
|
|
249
285
|
onMouseLeave: () => onLeave(EVENT_TYPE.MOUSE),
|
|
250
286
|
onMouseMove: (e) => moveResize(e, EVENT_TYPE.MOUSE),
|
|
251
287
|
onMouseUp: () => endResize(EVENT_TYPE.MOUSE),
|
|
252
288
|
rows: blocks
|
|
253
|
-
}, React2.Children.map(children, (child, index) => /* @__PURE__ */ React2.createElement(ResizableItem, {
|
|
289
|
+
}), React2.Children.map(children, (child, index) => /* @__PURE__ */ React2.createElement(ResizableItem, {
|
|
254
290
|
"data-index": index,
|
|
255
291
|
innerRef: addRef
|
|
256
292
|
}, child, count - 1 !== index && horizontal && /* @__PURE__ */ React2.createElement(ResizableBar, {
|
|
@@ -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 'react-desc';\nimport styled from 'styled-components';\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;\n\nconst DSResizableContainerWithSchema = describe(ResizableContainer);\nDSResizableContainerWithSchema.propTypes = rprops;\n\nexport { ResizableContainer, DSResizableContainerWithSchema };\nexport default ResizableContainer;\n"],
|
|
5
|
-
"mappings": "AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,aAAa,EAAE,OAAO,SAAS,KAAK;AAC1C,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAGL,sBAAsB,OAAO,UAAU;AACrC,MAAI;AACJ,UAAQ;AAAA,SACD,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,SACG,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,SACG,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,SACG,UAAU;AACb,eAAS,WAAW;AACpB;AAAA;AAEA,eAAS;AAAA;AAEb,SAAO;AAAA;AAGT,wBAAwB,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;AAGR,MAAI,cAAc,UAAU,UAAU,iBAAiB;AACrD,WAAO,YAAY;AACrB,MAAI,cAAc,KAAK,iBAAiB;AAAG,WAAO,YAAY;AAC9D,MAAI,cAAc,MAAM,iBAAiB;AAAG,WAAO,YAAY;AAE/D,MAAI,CAAC,cAAc,UAAU,UAAU,iBAAiB;AACtD,WAAO,YAAY;AACrB,MAAI,CAAC,cAAc,MAAM,iBAAiB;AAAG,WAAO,YAAY;AAChE,MAAI,CAAC,cAAc,KAAK,iBAAiB;AAAG,WAAO,YAAY;AAE/D,SAAO,aAAa,YAAY,WAAW,YAAY;AAAA;AAGzD,gCAAgC,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,aAAa,EAAE,OAAO,SAAS,KAAK;AAC1C,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA;AAGL,sBAAsB,OAAO,UAAU;AACrC,MAAI;AACJ,UAAQ;AAAA,SACD,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,SACG,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,SACG,UAAU;AACb,eAAS,WAAW;AACpB;AAAA,SACG,UAAU;AACb,eAAS,WAAW;AACpB;AAAA;AAEA,eAAS;AAAA;AAEb,SAAO;AAAA;AAGT,wBAAwB,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;AAGR,MAAI,cAAc,UAAU,UAAU,iBAAiB;AACrD,WAAO,YAAY;AACrB,MAAI,cAAc,KAAK,iBAAiB;AAAG,WAAO,YAAY;AAC9D,MAAI,cAAc,MAAM,iBAAiB;AAAG,WAAO,YAAY;AAE/D,MAAI,CAAC,cAAc,UAAU,UAAU,iBAAiB;AACtD,WAAO,YAAY;AACrB,MAAI,CAAC,cAAc,MAAM,iBAAiB;AAAG,WAAO,YAAY;AAChE,MAAI,CAAC,cAAc,KAAK,iBAAiB;AAAG,WAAO,YAAY;AAE/D,SAAO,aAAa,YAAY,WAAW,YAAY;AAAA;AAGzD,gCAAgC,IAAoB;AAApB,eAAE,eAAF,IAAe,cAAf,IAAe,CAAb;AAChC,SAAO,qCAAC,MAAD;AAAA,IAAM,KAAK;AAAA,KAAc;AAAA;AAGlC,MAAM,gBAAgB,OAAO;AAC7B,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAG7B,MAAM,eAAe,OAAO;AAAA;AAAA,YAEhB,CAAC,EAAE,WAAW,eAAe,QACrC,eAAe,eAAe,WAAW;AAAA;AAAA,IAEzC,CAAC,UAAU;AACX,MAAI,MAAM,GAAG;AACX,WAAO;AAAA,uBACU,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAaZ,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKzB,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAK/C,SAAO;AAAA;AAAA,kBAEO,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAYX,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKzB,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAM/C,MAAM,YAAY,CAAC,SAAS,KAAK,IAAI,CAAC,MAAM,EAAE;AAC9C,MAAM,aAAa,CAAC,SAAS,KAAK,IAAI,CAAC,MAAM,EAAE;AAE/C,4BAA4B,IAOzB;AAPyB,eAC1B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAL0B,IAMvB,iBANuB,IAMvB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,OAAO,OAAO;AACpB,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,QAAQ,aAAa,SAAS;AACrC,QAAM,CAAC,YAAY,eAAe,SAAS;AAC3C,QAAM,CAAC,OAAO,iBAAiB,SAAS;AACxC,QAAM,CAAC,YAAY,iBAAiB;AAEpC,YAAU,MAAM;AACd,QAAI;AAAY,oBAAc,UAAU,KAAK;AAC7C,QAAI;AAAU,gBAAU,WAAW,KAAK;AAAA,KACvC,CAAC,KAAK,SAAS,YAAY;AAC9B,QAAM,SAAS,CAAC,SAAS;AACvB,SAAK,QAAQ,KAAK;AAAA;AAEpB,QAAM,eAAe,CAAC,OAAO,GAAG,IAAI,UAAU;AAC5C,UAAM,QAAQ,SAAS,MAAM,OAAO;AACpC,QAAI,CAAC,GAAG;AACN,YAAM,gBAAgB,CAAC,GAAG;AAC1B,UACE,cAAc,QAAQ,MACtB,cAAc,QAAQ,KAAK,eAC3B;AACA,sBAAc,QAAQ,KAAK,cAAc,QAAQ,KAAK;AACtD,sBAAc,SAAS,OAAO,cAAc;AAAA,iBAE5C,cAAc,QAAQ,MACtB,cAAc,QAAQ,KAAK,eAC3B;AACA,sBAAc,QAAQ,KAAK,cAAc,QAAQ,KAAK;AACtD,sBAAc,SAAS,OAAO,cAAc;AAAA;AAE9C,UAAI,cAAc,MAAM,CAAC,MAAM,IAAI;AACjC,sBAAc;AAAA,WACX;AACL,YAAM,YAAY,CAAC,GAAG;AACtB,UAAI,UAAU,QAAQ,MAAM,UAAU,QAAQ,KAAK,eAAe;AAChE,kBAAU,QAAQ,KAAK,UAAU,QAAQ,KAAK;AAC9C,kBAAU,SAAS,OAAO,UAAU;AAAA,iBAC3B,UAAU,QAAQ,MAAM,UAAU,QAAQ,KAAK,eAAe;AACvE,kBAAU,QAAQ,KAAK,UAAU,QAAQ,KAAK;AAC9C,kBAAU,SAAS,OAAO,UAAU;AAAA;AAEtC,UAAI,UAAU,MAAM,CAAC,MAAM,IAAI;AAAiB,kBAAU;AAAA;AAAA;AAG9D,QAAM,cAAc,CAAC,OAAO,OAAO,IAAI,OAAO,SAAS;AACrD,gBAAY;AACZ,kBAAc;AAAA,MACZ,GAAG,MAAM;AAAA,MACT,GAAG,MAAM;AAAA,MACT;AAAA,MACA;AAAA;AAEF,kBAAc,EAAE,YAAY;AAAA;AAE9B,QAAM,aAAa,CAAC,OAAO,SAAS;AAClC,QAAI,cAAc,eAAe,QAAQ,CAAC,MAAM,GAAG;AACjD,YAAM,OAAO,MAAM,UAAU,MAAM;AACnC,UAAI,SAAS;AAAG;AAChB,oBAAc,EAAE,GAAG,MAAM,SAAS,OAAO,MAAM;AAC/C,mBAAa;AAAA,eACJ,cAAc,eAAe,QAAQ,MAAM,GAAG;AACvD,YAAM,OAAO,MAAM,UAAU,MAAM;AACnC,UAAI,SAAS;AAAG;AAChB,oBAAc,iCAAK,QAAL,EAAY,GAAG,MAAM,SAAS,OAAO,MAAM;AACzD,mBAAa,MAAM;AAAA;AAAA;AAGvB,QAAM,YAAY,CAAC,SAAS;AAC1B,QAAI,eAAe,MAAM;AACvB,kBAAY;AACZ;AAAA;AAAA;AAGJ,QAAM,gBAAgB,CAAC,GAAG,OAAO,IAAI,UAAU;AAC7C,UAAM,WAAW;AAAA,MACf,IAAI,UAAU;AAAA,MACd,MAAM,UAAU;AAAA,MAChB,WAAW,UAAU;AAAA,MACrB,IAAI,UAAU;AAAA,MACd,IAAI,UAAU;AAAA,MACd,SAAS,UAAU;AAAA,MACnB,IAAI,UAAU;AAAA,MACd,OAAO,UAAU;AAAA,MACjB,YAAY,UAAU;AAAA,MACtB,IAAI,UAAU;AAAA,MACd,MAAM,UAAU;AAAA,MAChB,WAAW,UAAU;AAAA;AAGvB,QAAI,SAAS,EAAE,OAAO,EAAE,UAAU;AAChC,QAAE;AACF,YAAM,EAAE,KAAK,GAAG,MAAM,MAAM,EAAE,OAAO;AACrC,UAAI,CAAC,OAAO;AACV,oBAAY,EAAE,SAAS,GAAG,SAAS,KAAK,OAAO,GAAG,WAAW;AAAA,aACxD;AACL,cAAM,UACJ,SAAS,EAAE,aAAa,UAAU,KAClC,SAAS,EAAE,aAAa,UAAU,IAC9B,aAAa,SAAS,EAAE,UAAU,KAClC;AACN,cAAM,UACJ,SAAS,EAAE,aAAa,UAAU,KAClC,SAAS,EAAE,aAAa,UAAU,IAC9B,aAAa,SAAS,EAAE,UAAU,KAClC;AAEN,mBAAW,EAAE,SAAS,WAAW,WAAW;AAAA;AAAA;AAAA;AAKlD,QAAM,UAAU,CAAC,SAAS;AACxB,QAAI,eAAe,MAAM;AACvB,kBAAY;AAEZ,UAAI,cAAc,WAAW;AAAQ,kBAAU,WAAW;AAC1D,UAAI,cAAc,WAAW;AAC3B,sBAAc,WAAW;AAAA;AAAA;AAG/B,QAAM,QAAQ,OAAM,SAAS,MAAM;AAEnC,SACE,qCAAC,eAAD,iCACM,OADN;AAAA,IAEE,MAAM;AAAA,IACN,SAAS,MAAM,UAAU,WAAW;AAAA,IACpC,cAAc,MAAM,QAAQ,WAAW;AAAA,IACvC,aAAa,CAAC,MAAM,WAAW,GAAG,WAAW;AAAA,IAC7C,WAAW,MAAM,UAAU,WAAW;AAAA,IACtC,MAAM;AAAA,MAEL,OAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UACpC,qCAAC,eAAD;AAAA,IAAe,cAAY;AAAA,IAAO,UAAU;AAAA,KACzC,OACA,QAAQ,MAAM,SAAS,cACtB,qCAAC,cAAD;AAAA,IACE,WAAW,WAAW;AAAA,IACtB,cAAY;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,eAAe,WAAW,QAAQ;AAAA,IAClC,WAAW,CAAC,MAAM,cAAc,GAAG,OAAO;AAAA,IAC1C,aAAa,CAAC,MACZ,YAAY,GAAG,OAAO,OAAO,WAAW;AAAA,IAE1C,UAAU;AAAA,MAGb,QAAQ,MAAM,SAAS,YACtB,qCAAC,cAAD;AAAA,IACE,WAAW,OAAO;AAAA,IAClB,cAAY;AAAA,IACZ,QAAQ,KAAK;AAAA,IACb,eAAe,OAAO,QAAQ;AAAA,IAC9B,WAAW,CAAC,MAAM,cAAc,GAAG,OAAO;AAAA,IAC1C,aAAa,CAAC,MAAM,YAAY,GAAG,OAAO,MAAM,WAAW;AAAA,IAC3D,UAAU;AAAA,IACV,GAAC;AAAA;AAAA;AASf,mBAAmB,YAAY;AAC/B,mBAAmB,eAAe;AAElC,MAAM,iCAAiC,SAAS;AAChD,+BAA+B,YAAY;AAG3C,IAAO,oBAAQ;",
|
|
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.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Resizeable Container",
|
|
6
6
|
"files": [
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"indent": 4
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@elliemae/ds-grid": "3.0.0-alpha.
|
|
51
|
-
"@elliemae/ds-system": "3.0.0-alpha.
|
|
50
|
+
"@elliemae/ds-grid": "3.0.0-alpha.1",
|
|
51
|
+
"@elliemae/ds-system": "3.0.0-alpha.1",
|
|
52
52
|
"react-desc": "~4.1.3"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
71
71
|
"test": "node ../../scripts/testing/test.mjs",
|
|
72
72
|
"lint": "node ../../scripts/lint.mjs",
|
|
73
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
73
74
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
74
75
|
}
|
|
75
76
|
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
/// <reference types="react" />
|
|
3
|
-
declare function ResizableContainer({ children, cols, rows, vertical, horizontal, ...rest }: {
|
|
4
|
-
[x: string]: any;
|
|
5
|
-
children: any;
|
|
6
|
-
cols: any;
|
|
7
|
-
rows: any;
|
|
8
|
-
vertical: any;
|
|
9
|
-
horizontal: any;
|
|
10
|
-
}): JSX.Element;
|
|
11
|
-
declare namespace ResizableContainer {
|
|
12
|
-
var propTypes: {
|
|
13
|
-
children: {
|
|
14
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
15
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
16
|
-
};
|
|
17
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
18
|
-
};
|
|
19
|
-
vertical: {
|
|
20
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
21
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
22
|
-
};
|
|
23
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
24
|
-
};
|
|
25
|
-
horizontal: {
|
|
26
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
27
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
28
|
-
};
|
|
29
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
30
|
-
};
|
|
31
|
-
rows: {
|
|
32
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
33
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
34
|
-
};
|
|
35
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
36
|
-
};
|
|
37
|
-
cols: {
|
|
38
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
39
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
40
|
-
};
|
|
41
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
var defaultProps: {
|
|
45
|
-
vertical: boolean;
|
|
46
|
-
horizontal: boolean;
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
declare const DSResizableContainerWithSchema: {
|
|
50
|
-
(props?: unknown): JSX.Element;
|
|
51
|
-
propTypes: unknown;
|
|
52
|
-
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
53
|
-
};
|
|
54
|
-
export { ResizableContainer, DSResizableContainerWithSchema };
|
|
55
|
-
export default ResizableContainer;
|
package/dist/types/index.d.ts
DELETED
package/dist/types/props.d.ts
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/// <reference path="../../../../shared/typings/react-desc.d.ts" />
|
|
2
|
-
export declare const props: {
|
|
3
|
-
/** grid item content */
|
|
4
|
-
children: {
|
|
5
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
6
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
7
|
-
};
|
|
8
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
9
|
-
};
|
|
10
|
-
/** vertical resizing */
|
|
11
|
-
vertical: {
|
|
12
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
13
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
14
|
-
};
|
|
15
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
16
|
-
};
|
|
17
|
-
/** horizontal resizing */
|
|
18
|
-
horizontal: {
|
|
19
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
20
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
21
|
-
};
|
|
22
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
23
|
-
};
|
|
24
|
-
/** Row layout cells */
|
|
25
|
-
rows: {
|
|
26
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
27
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
28
|
-
};
|
|
29
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
30
|
-
};
|
|
31
|
-
/** Column layout cells */
|
|
32
|
-
cols: {
|
|
33
|
-
defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
|
|
34
|
-
deprecated: import("react-desc").PropTypesDescValidator;
|
|
35
|
-
};
|
|
36
|
-
isRequired: import("react-desc").PropTypesDescValue;
|
|
37
|
-
};
|
|
38
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|