publ-echo-test 0.0.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/README.md +29 -0
- package/css/gle-styles.css +169 -0
- package/css/resizable-styles.css +76 -0
- package/dist/external-lib/classnames/index.d.ts +5 -0
- package/dist/external-lib/classnames/index.js +60 -0
- package/dist/external-lib/lodash.isEqual/index.d.ts +30 -0
- package/dist/external-lib/lodash.isEqual/index.js +1661 -0
- package/dist/lib/Draggable/Draggable.d.ts +17 -0
- package/dist/lib/Draggable/Draggable.js +192 -0
- package/dist/lib/Draggable/DraggableCore.d.ts +5 -0
- package/dist/lib/Draggable/DraggableCore.js +266 -0
- package/dist/lib/Draggable/constants.d.ts +12 -0
- package/dist/lib/Draggable/constants.js +12 -0
- package/dist/lib/Draggable/index.d.ts +2 -0
- package/dist/lib/Draggable/index.js +2 -0
- package/dist/lib/Draggable/types.d.ts +55 -0
- package/dist/lib/Draggable/types.js +1 -0
- package/dist/lib/Draggable/utils/domHelpers.d.ts +22 -0
- package/dist/lib/Draggable/utils/domHelpers.js +222 -0
- package/dist/lib/Draggable/utils/getPrefix.d.ts +5 -0
- package/dist/lib/Draggable/utils/getPrefix.js +41 -0
- package/dist/lib/Draggable/utils/positionHelpers.d.ts +7 -0
- package/dist/lib/Draggable/utils/positionHelpers.js +32 -0
- package/dist/lib/Draggable/utils/types.d.ts +30 -0
- package/dist/lib/Draggable/utils/types.js +1 -0
- package/dist/lib/Draggable/utils/validationHelpers.d.ts +4 -0
- package/dist/lib/Draggable/utils/validationHelpers.js +16 -0
- package/dist/lib/GridItem/GridItem.d.ts +5 -0
- package/dist/lib/GridItem/GridItem.js +350 -0
- package/dist/lib/GridItem/index.d.ts +1 -0
- package/dist/lib/GridItem/index.js +1 -0
- package/dist/lib/GridItem/types.d.ts +107 -0
- package/dist/lib/GridItem/types.js +1 -0
- package/dist/lib/GridItem/utils/calculateUtils.d.ts +30 -0
- package/dist/lib/GridItem/utils/calculateUtils.js +108 -0
- package/dist/lib/GridLayoutEditor/ReactGridLayout.d.ts +6 -0
- package/dist/lib/GridLayoutEditor/ReactGridLayout.js +456 -0
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.d.ts +4 -0
- package/dist/lib/GridLayoutEditor/ResponsiveGridLayout.js +117 -0
- package/dist/lib/GridLayoutEditor/index.d.ts +3 -0
- package/dist/lib/GridLayoutEditor/index.js +2 -0
- package/dist/lib/GridLayoutEditor/types.d.ts +133 -0
- package/dist/lib/GridLayoutEditor/types.js +1 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.d.ts +165 -0
- package/dist/lib/GridLayoutEditor/utils/renderHelpers.js +566 -0
- package/dist/lib/GridLayoutEditor/utils/responsiveUtils.d.ts +26 -0
- package/dist/lib/GridLayoutEditor/utils/responsiveUtils.js +77 -0
- package/dist/lib/Resizable/Resizable.d.ts +6 -0
- package/dist/lib/Resizable/Resizable.js +215 -0
- package/dist/lib/Resizable/ResizableBox.d.ts +7 -0
- package/dist/lib/Resizable/ResizableBox.js +57 -0
- package/dist/lib/Resizable/index.d.ts +1 -0
- package/dist/lib/Resizable/index.js +1 -0
- package/dist/lib/Resizable/types.d.ts +63 -0
- package/dist/lib/Resizable/types.js +1 -0
- package/dist/lib/Resizable/utils/cloneElement.d.ts +2 -0
- package/dist/lib/Resizable/utils/cloneElement.js +21 -0
- package/dist/lib/components/WidthProvider.d.ts +9 -0
- package/dist/lib/components/WidthProvider.js +65 -0
- package/dist/lib/components/index.d.ts +1 -0
- package/dist/lib/components/index.js +1 -0
- package/dist/lib/components/types.d.ts +13 -0
- package/dist/lib/components/types.js +1 -0
- package/dist/lib/index.d.ts +5 -0
- package/dist/lib/index.js +5 -0
- package/dist/lib/types.d.ts +4 -0
- package/dist/lib/types.js +1 -0
- package/package.json +56 -0
@@ -0,0 +1,215 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
24
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
25
|
+
if (ar || !(i in from)) {
|
26
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
27
|
+
ar[i] = from[i];
|
28
|
+
}
|
29
|
+
}
|
30
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
31
|
+
};
|
32
|
+
import { createElement as _createElement } from "react";
|
33
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
34
|
+
import React, { useRef } from "react";
|
35
|
+
import DraggableCore from "../Draggable/DraggableCore";
|
36
|
+
import { cloneElement } from "./utils/cloneElement";
|
37
|
+
var Resizable = function (_a) {
|
38
|
+
var children = _a.children, _b = _a.axis, axis = _b === void 0 ? "both" : _b, _c = _a.handleSize, handleSize = _c === void 0 ? [20, 20] : _c, _d = _a.lockAspectRatio, lockAspectRatio = _d === void 0 ? false : _d, _e = _a.minConstraints, minConstraints = _e === void 0 ? [20, 20] : _e, _f = _a.maxConstraints, maxConstraints = _f === void 0 ? [Infinity, Infinity] : _f, _g = _a.resizeHandles, resizeHandles = _g === void 0 ? ["se"] : _g, _h = _a.transformScale, transformScale = _h === void 0 ? 1 : _h, props = __rest(_a, ["children", "axis", "handleSize", "lockAspectRatio", "minConstraints", "maxConstraints", "resizeHandles", "transformScale"]);
|
39
|
+
var handleRefs = useRef({
|
40
|
+
s: useRef(null),
|
41
|
+
n: useRef(null),
|
42
|
+
e: useRef(null),
|
43
|
+
w: useRef(null),
|
44
|
+
se: useRef(null),
|
45
|
+
sw: useRef(null),
|
46
|
+
ne: useRef(null),
|
47
|
+
nw: useRef(null),
|
48
|
+
});
|
49
|
+
var startPosition = useRef(null);
|
50
|
+
var startSize = useRef(null);
|
51
|
+
var lastHandleRect = null;
|
52
|
+
var slack = null;
|
53
|
+
var className = props.className, draggableOpts = props.draggableOpts, width = props.width, height = props.height, handle = props.handle, onResize = props.onResize, onResizeStop = props.onResizeStop, onResizeStart = props.onResizeStart, restProps = __rest(props, ["className", "draggableOpts", "width", "height", "handle", "onResize", "onResizeStop", "onResizeStart"]);
|
54
|
+
var resetData = function () {
|
55
|
+
lastHandleRect = slack = null;
|
56
|
+
};
|
57
|
+
// NOTE - 최소 또는 최대 제약 조건 width와 height 계산, 비율 고정 계산
|
58
|
+
var checkConstraints = function (width, height) {
|
59
|
+
if (!minConstraints && !maxConstraints && !lockAspectRatio) {
|
60
|
+
return [width, height];
|
61
|
+
}
|
62
|
+
if (lockAspectRatio) {
|
63
|
+
var ratio = props.width / props.height;
|
64
|
+
var deltaWidth = width - props.width;
|
65
|
+
var deltaHeight = height - props.height;
|
66
|
+
if (Math.abs(deltaWidth) > Math.abs(deltaHeight * ratio)) {
|
67
|
+
height = width / ratio;
|
68
|
+
}
|
69
|
+
else {
|
70
|
+
width = height * ratio;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
var _a = [width, height], oldW = _a[0], oldH = _a[1];
|
74
|
+
var _b = slack || [0, 0], slackW = _b[0], slackH = _b[1];
|
75
|
+
width += slackW;
|
76
|
+
height += slackH;
|
77
|
+
if (minConstraints) {
|
78
|
+
width = Math.max(minConstraints[0], width);
|
79
|
+
height = Math.max(minConstraints[1], height);
|
80
|
+
}
|
81
|
+
if (maxConstraints) {
|
82
|
+
width = Math.min(maxConstraints[0], width);
|
83
|
+
height = Math.min(maxConstraints[1], height);
|
84
|
+
}
|
85
|
+
slack = [slackW + (oldW - width), slackH + (oldH - height)];
|
86
|
+
return [width, height];
|
87
|
+
};
|
88
|
+
var checkTopLeft = function (deltaX, deltaY, top, left, width, height, handleAxis) {
|
89
|
+
var newTop = top;
|
90
|
+
var newLeft = left;
|
91
|
+
if (!startPosition.current || !startSize.current)
|
92
|
+
return [newTop, newLeft];
|
93
|
+
var currentSumOfLeftAndWidth = left + width;
|
94
|
+
var startSumOfLeftAndWidth = startPosition.current.left + startSize.current.width;
|
95
|
+
var currentSumOfTopAndHeight = top + height;
|
96
|
+
var startSumOfTopAndHeight = startPosition.current.top + startSize.current.height;
|
97
|
+
var resizableLeft = startPosition.current.left + (startSize.current.width - width);
|
98
|
+
var resizableTop = startPosition.current.top + (startSize.current.height - height);
|
99
|
+
if (deltaX < 0) {
|
100
|
+
if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
|
101
|
+
if (currentSumOfLeftAndWidth > startSumOfLeftAndWidth) {
|
102
|
+
newLeft = Math.min(left, resizableLeft);
|
103
|
+
}
|
104
|
+
}
|
105
|
+
}
|
106
|
+
if (deltaY < 0) {
|
107
|
+
if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
|
108
|
+
if (currentSumOfTopAndHeight > startSumOfTopAndHeight) {
|
109
|
+
newTop = Math.min(top, resizableTop);
|
110
|
+
}
|
111
|
+
}
|
112
|
+
}
|
113
|
+
if (deltaX > 0) {
|
114
|
+
if (handleAxis === "nw" || handleAxis === "w" || handleAxis === "sw") {
|
115
|
+
if (width >= minConstraints[0]) {
|
116
|
+
newLeft = Math.max(left, resizableLeft);
|
117
|
+
}
|
118
|
+
}
|
119
|
+
}
|
120
|
+
if (deltaY > 0) {
|
121
|
+
if (handleAxis === "nw" || handleAxis === "n" || handleAxis === "ne") {
|
122
|
+
if (height >= minConstraints[1]) {
|
123
|
+
newTop = Math.max(top, resizableTop);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
}
|
127
|
+
return [newTop, newLeft];
|
128
|
+
};
|
129
|
+
var resizeHandler = function (handlerName, handleAxis) {
|
130
|
+
return function (e, _a) {
|
131
|
+
var _b, _c;
|
132
|
+
var _d, _e, _f, _g, _h, _j;
|
133
|
+
var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
|
134
|
+
if (handlerName === "onResizeStart") {
|
135
|
+
var position = { top: (_d = props.top) !== null && _d !== void 0 ? _d : 0, left: (_e = props.left) !== null && _e !== void 0 ? _e : 0 };
|
136
|
+
startPosition.current = position;
|
137
|
+
startSize.current = {
|
138
|
+
width: (_f = props.width) !== null && _f !== void 0 ? _f : 0,
|
139
|
+
height: (_g = props.height) !== null && _g !== void 0 ? _g : 0,
|
140
|
+
};
|
141
|
+
resetData();
|
142
|
+
}
|
143
|
+
var canDragX = (axis === "both" || axis === "x") &&
|
144
|
+
handleAxis !== "n" &&
|
145
|
+
handleAxis !== "s";
|
146
|
+
var canDragY = (axis === "both" || axis === "y") &&
|
147
|
+
handleAxis !== "e" &&
|
148
|
+
handleAxis !== "w";
|
149
|
+
if (!canDragX && !canDragY)
|
150
|
+
return;
|
151
|
+
var axisV = handleAxis[0];
|
152
|
+
var axisH = handleAxis[handleAxis.length - 1];
|
153
|
+
var handleRect = node.getBoundingClientRect();
|
154
|
+
// if (lastHandleRect !== null) {
|
155
|
+
// if (axisH === "w") {
|
156
|
+
// const deltaLeftSinceLast = handleRect.left - lastHandleRect.left;
|
157
|
+
// deltaX += deltaLeftSinceLast;
|
158
|
+
// }
|
159
|
+
// if (axisV === "n") {
|
160
|
+
// const deltaTopSinceLast = handleRect.top - lastHandleRect.top;
|
161
|
+
// deltaY += deltaTopSinceLast;
|
162
|
+
// }
|
163
|
+
// }
|
164
|
+
lastHandleRect = handleRect;
|
165
|
+
if (axisH === "w") {
|
166
|
+
deltaX = -deltaX;
|
167
|
+
}
|
168
|
+
if (axisV === "n") {
|
169
|
+
deltaY = -deltaY;
|
170
|
+
}
|
171
|
+
var width = props.width + (canDragX ? deltaX / transformScale : 0);
|
172
|
+
var height = props.height + (canDragY ? deltaY / transformScale : 0);
|
173
|
+
var left = (_h = props === null || props === void 0 ? void 0 : props.left) !== null && _h !== void 0 ? _h : 0;
|
174
|
+
var top = (_j = props === null || props === void 0 ? void 0 : props.top) !== null && _j !== void 0 ? _j : 0;
|
175
|
+
if (axisV === "n") {
|
176
|
+
top = top - deltaY;
|
177
|
+
}
|
178
|
+
if (axisH === "w") {
|
179
|
+
left = left - deltaX;
|
180
|
+
}
|
181
|
+
_b = checkConstraints(width, height), width = _b[0], height = _b[1];
|
182
|
+
_c = checkTopLeft(deltaX, deltaY, top, left, width, height, handleAxis), top = _c[0], left = _c[1];
|
183
|
+
var isDimensionsChanged = width !== props.width || height !== props.height;
|
184
|
+
var cb = typeof props[handlerName] === "function" ? props[handlerName] : null;
|
185
|
+
var isCbSkipped = handlerName === "onResize" && !isDimensionsChanged;
|
186
|
+
if (cb && !isCbSkipped) {
|
187
|
+
cb(e, { node: node, size: { width: width, height: height, top: top, left: left }, handle: handleAxis });
|
188
|
+
}
|
189
|
+
if (handlerName === "onResizeStop") {
|
190
|
+
startPosition.current = null;
|
191
|
+
startSize.current = null;
|
192
|
+
resetData();
|
193
|
+
}
|
194
|
+
};
|
195
|
+
};
|
196
|
+
var renderResizeHandle = function (handleAxis, ref) {
|
197
|
+
if (!handle) {
|
198
|
+
return (_jsx("span", { className: "react-resizable-handle react-resizable-handle-".concat(handleAxis), ref: ref }));
|
199
|
+
}
|
200
|
+
if (typeof handle === "function") {
|
201
|
+
return handle(handleAxis, ref);
|
202
|
+
}
|
203
|
+
var isDOMElement = typeof handle.type === "string";
|
204
|
+
var props = __assign({ ref: ref }, (isDOMElement ? {} : { handleAxis: handleAxis }));
|
205
|
+
return React.cloneElement(handle, props);
|
206
|
+
};
|
207
|
+
return cloneElement(children, __assign(__assign({}, restProps), { className: "".concat(className ? "".concat(className, " ") : "", "react-resizable"), children: __spreadArray([
|
208
|
+
// ...children.props.children,
|
209
|
+
React.Children.map(children.props.children, function (child) { return child; })
|
210
|
+
], resizeHandles.map(function (handleAxis) {
|
211
|
+
var ref = (handleRefs === null || handleRefs === void 0 ? void 0 : handleRefs.current) && handleRefs.current[handleAxis];
|
212
|
+
return (_createElement(DraggableCore, __assign({}, draggableOpts, { nodeRef: ref, key: "resizableHandle-".concat(handleAxis), onStop: resizeHandler("onResizeStop", handleAxis), onStart: resizeHandler("onResizeStart", handleAxis), onDrag: resizeHandler("onResize", handleAxis) }), renderResizeHandle(handleAxis, ref)));
|
213
|
+
}), true) }));
|
214
|
+
};
|
215
|
+
export default Resizable;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { ResizableProps } from "./types";
|
2
|
+
import { PropsWithChildren } from "../Draggable/types";
|
3
|
+
type ResizableBoxProps = ResizableProps & {
|
4
|
+
style?: Object;
|
5
|
+
};
|
6
|
+
declare const ResizableBox: ({ children, ...props }: PropsWithChildren<ResizableBoxProps>) => React.ReactElement;
|
7
|
+
export default ResizableBox;
|
@@ -0,0 +1,57 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
+
import { useState } from "react";
|
25
|
+
import Resizable from "./Resizable";
|
26
|
+
var ResizableBox = function (_a) {
|
27
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
28
|
+
var handle = props.handle, handleSize = props.handleSize, onResize = props.onResize, onResizeStart = props.onResizeStart, onResizeStop = props.onResizeStop, draggableOpts = props.draggableOpts, minConstraints = props.minConstraints, maxConstraints = props.maxConstraints, lockAspectRatio = props.lockAspectRatio, axis = props.axis, width = props.width, height = props.height, resizeHandles = props.resizeHandles, style = props.style, transformScale = props.transformScale, restProps = __rest(props, ["handle", "handleSize", "onResize", "onResizeStart", "onResizeStop", "draggableOpts", "minConstraints", "maxConstraints", "lockAspectRatio", "axis", "width", "height", "resizeHandles", "style", "transformScale"]);
|
29
|
+
var _b = useState({
|
30
|
+
width: width,
|
31
|
+
height: height,
|
32
|
+
propsWidth: width,
|
33
|
+
propsHeight: height,
|
34
|
+
}), resizableBoxState = _b[0], setResizableBoxState = _b[1];
|
35
|
+
var handleResize = function (e, data) {
|
36
|
+
var size = data.size;
|
37
|
+
if (props.onResize) {
|
38
|
+
setResizableBoxState(function (prevState) { return (__assign(__assign({}, prevState), { width: size.width, height: size.height })); });
|
39
|
+
props.onResize(e, data);
|
40
|
+
}
|
41
|
+
else {
|
42
|
+
setResizableBoxState(function (prevState) { return (__assign(__assign({}, prevState), { width: size.width, height: size.height })); });
|
43
|
+
}
|
44
|
+
};
|
45
|
+
// NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
|
46
|
+
if (width !== resizableBoxState.propsWidth ||
|
47
|
+
height !== resizableBoxState.propsHeight) {
|
48
|
+
setResizableBoxState({
|
49
|
+
width: width,
|
50
|
+
height: height,
|
51
|
+
propsWidth: width,
|
52
|
+
propsHeight: height,
|
53
|
+
});
|
54
|
+
}
|
55
|
+
return (_jsx(Resizable, { axis: axis, draggableOpts: draggableOpts, handle: handle, handleSize: handleSize, height: resizableBoxState.height, lockAspectRatio: lockAspectRatio, maxConstraints: maxConstraints, minConstraints: minConstraints, onResizeStart: onResizeStart, onResize: handleResize, onResizeStop: onResizeStop, resizeHandles: resizeHandles, transformScale: transformScale, width: resizableBoxState.width, children: _jsx("div", __assign({}, restProps, { style: __assign(__assign({}, style), { width: resizableBoxState.width + "px", height: resizableBoxState.height + "px" }) })) }));
|
56
|
+
};
|
57
|
+
export default ResizableBox;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Resizable } from "./Resizable";
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as Resizable } from "./Resizable";
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import { CSSProperties, ReactElement, Ref, SyntheticEvent } from "react";
|
2
|
+
import { DraggableCoreDefaultProps } from "../Draggable/types";
|
3
|
+
export type ReactRef<T> = {
|
4
|
+
current: T | null;
|
5
|
+
};
|
6
|
+
export type Axis = "both" | "x" | "y" | "none";
|
7
|
+
export type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";
|
8
|
+
export type ResizableBoxState = {
|
9
|
+
width: number;
|
10
|
+
height: number;
|
11
|
+
propsWidth: number;
|
12
|
+
propsHeight: number;
|
13
|
+
};
|
14
|
+
export type DragCallbackData = {
|
15
|
+
node: HTMLElement;
|
16
|
+
x: number;
|
17
|
+
y: number;
|
18
|
+
deltaX: number;
|
19
|
+
deltaY: number;
|
20
|
+
lastX: number;
|
21
|
+
lastY: number;
|
22
|
+
};
|
23
|
+
export type ResizeCallbackData = {
|
24
|
+
node: HTMLElement;
|
25
|
+
size: {
|
26
|
+
width: number;
|
27
|
+
height: number;
|
28
|
+
top: number;
|
29
|
+
left: number;
|
30
|
+
};
|
31
|
+
handle: ResizeHandleAxis;
|
32
|
+
};
|
33
|
+
export type ResizableDefaultProps = {
|
34
|
+
axis: Axis;
|
35
|
+
handleSize: [number, number];
|
36
|
+
lockAspectRatio: boolean;
|
37
|
+
minConstraints: [number, number];
|
38
|
+
maxConstraints: [number, number];
|
39
|
+
resizeHandles: ResizeHandleAxis[];
|
40
|
+
transformScale: number;
|
41
|
+
};
|
42
|
+
export type ResizableProps = {
|
43
|
+
top?: number;
|
44
|
+
left?: number;
|
45
|
+
children?: ReactElement<any>;
|
46
|
+
axis?: Axis;
|
47
|
+
className?: string;
|
48
|
+
draggableOpts?: Partial<DraggableCoreDefaultProps>;
|
49
|
+
handle?: ResizeHandleType;
|
50
|
+
onResizeStop?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
|
51
|
+
onResizeStart?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
|
52
|
+
onResize?: (e: SyntheticEvent<any>, data: ResizeCallbackData) => any;
|
53
|
+
handleSize?: [number, number];
|
54
|
+
lockAspectRatio?: boolean;
|
55
|
+
minConstraints?: [number, number];
|
56
|
+
maxConstraints?: [number, number];
|
57
|
+
resizeHandles?: ResizeHandleAxis[];
|
58
|
+
transformScale?: number;
|
59
|
+
style?: CSSProperties;
|
60
|
+
width: number;
|
61
|
+
height: number;
|
62
|
+
};
|
63
|
+
export type ResizeHandleType = ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis, ref: Ref<HTMLElement>) => ReactElement<any>);
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1,21 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
import React from "react";
|
13
|
+
export function cloneElement(element, props) {
|
14
|
+
if (props.style && element.props.style) {
|
15
|
+
props.style = __assign(__assign({}, element.props.style), props.style);
|
16
|
+
}
|
17
|
+
if (props.className && element.props.className) {
|
18
|
+
props.className = "".concat(element.props.className, " ").concat(props.className);
|
19
|
+
}
|
20
|
+
return React.cloneElement(element, props);
|
21
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import React from "react";
|
2
|
+
type ComposedProps<Config> = {
|
3
|
+
measureBeforeMount?: boolean;
|
4
|
+
className?: string;
|
5
|
+
style?: Object;
|
6
|
+
width?: number;
|
7
|
+
} & Config;
|
8
|
+
declare const WidthProvider: <Config>(ComposedComponent: React.ComponentType<Config>) => (props: ComposedProps<Config>) => React.ReactElement;
|
9
|
+
export default WidthProvider;
|
@@ -0,0 +1,65 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
13
|
+
/* eslint-disable react-hooks/rules-of-hooks */
|
14
|
+
import classNames from "../../external-lib/classnames";
|
15
|
+
import { useRef, useState, useEffect } from "react";
|
16
|
+
var layoutClassName = "react-grid-layout";
|
17
|
+
/*
|
18
|
+
* A simple HOC that provides facility for listening to container resizes.
|
19
|
+
*/
|
20
|
+
var WidthProvider = function (ComposedComponent) {
|
21
|
+
return function (props) {
|
22
|
+
var _a;
|
23
|
+
var elementRef = useRef(null);
|
24
|
+
var mounted = useRef(false);
|
25
|
+
var _b = useState({
|
26
|
+
width: (_a = props.width) !== null && _a !== void 0 ? _a : 1280,
|
27
|
+
}), state = _b[0], setState = _b[1];
|
28
|
+
var _c = props.measureBeforeMount, measureBeforeMount = _c === void 0 ? false : _c;
|
29
|
+
// useEffect(() => {
|
30
|
+
// if (mounted.current) {
|
31
|
+
// return;
|
32
|
+
// }
|
33
|
+
// mounted.current = true;
|
34
|
+
// window.addEventListener("resize", onWindowResize);
|
35
|
+
// onWindowResize();
|
36
|
+
// return () => {
|
37
|
+
// mounted.current = false;
|
38
|
+
// window.removeEventListener("resize", onWindowResize);
|
39
|
+
// };
|
40
|
+
// }, []);
|
41
|
+
useEffect(function () {
|
42
|
+
if (!elementRef.current)
|
43
|
+
return;
|
44
|
+
var resizeObserver = new ResizeObserver(function (callback) {
|
45
|
+
var object = callback[0];
|
46
|
+
var width = object.contentRect.width;
|
47
|
+
setState({ width: width });
|
48
|
+
});
|
49
|
+
resizeObserver.observe(elementRef.current);
|
50
|
+
return function () { return resizeObserver.disconnect(); };
|
51
|
+
}, [elementRef]);
|
52
|
+
// const onWindowResize = () => {
|
53
|
+
// if (!mounted.current) return;
|
54
|
+
// const node = elementRef.current;
|
55
|
+
// if (node instanceof HTMLElement && node.offsetWidth) {
|
56
|
+
// setState({ width: node.offsetWidth });
|
57
|
+
// }
|
58
|
+
// };
|
59
|
+
if (measureBeforeMount && !mounted.current) {
|
60
|
+
return (_jsx("div", { className: classNames(props.className, layoutClassName), style: props.style, ref: elementRef }));
|
61
|
+
}
|
62
|
+
return _jsx(ComposedComponent, __assign({}, props, { innerRef: elementRef }, state));
|
63
|
+
};
|
64
|
+
};
|
65
|
+
export default WidthProvider;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as WidthProvider } from "./WidthProvider";
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default as WidthProvider } from "./WidthProvider";
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { RefObject } from "react";
|
2
|
+
export type WidthProviderProps = {
|
3
|
+
measureBeforeMount: boolean;
|
4
|
+
className?: string;
|
5
|
+
style?: Object;
|
6
|
+
};
|
7
|
+
export type WidthProviderState = {
|
8
|
+
width: number;
|
9
|
+
};
|
10
|
+
export type WidthProviderRef = {
|
11
|
+
innerRef?: RefObject<HTMLDivElement>;
|
12
|
+
};
|
13
|
+
export type ComposedProps = WidthProviderProps & WidthProviderState & WidthProviderRef;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/package.json
ADDED
@@ -0,0 +1,56 @@
|
|
1
|
+
{
|
2
|
+
"name": "publ-echo-test",
|
3
|
+
"version": "0.0.1",
|
4
|
+
"private": false,
|
5
|
+
"main": "dist/lib/index.js",
|
6
|
+
"types": "dist/lib/index.d.js",
|
7
|
+
"files": [
|
8
|
+
"/dist",
|
9
|
+
"/css"
|
10
|
+
],
|
11
|
+
"scripts": {
|
12
|
+
"start": "react-scripts start",
|
13
|
+
"build-lib": "rm -rf ./dist && tsc -noEmit false",
|
14
|
+
"build-example": "react-scripts build",
|
15
|
+
"test": "react-scripts test",
|
16
|
+
"eject": "react-scripts eject"
|
17
|
+
},
|
18
|
+
"eslintConfig": {
|
19
|
+
"extends": [
|
20
|
+
"react-app",
|
21
|
+
"react-app/jest"
|
22
|
+
]
|
23
|
+
},
|
24
|
+
"browserslist": {
|
25
|
+
"production": [
|
26
|
+
">0.2%",
|
27
|
+
"not dead",
|
28
|
+
"not op_mini all"
|
29
|
+
],
|
30
|
+
"development": [
|
31
|
+
"last 1 chrome version",
|
32
|
+
"last 1 firefox version",
|
33
|
+
"last 1 safari version"
|
34
|
+
]
|
35
|
+
},
|
36
|
+
"devDependencies": {
|
37
|
+
"@testing-library/jest-dom": "^5.16.5",
|
38
|
+
"@testing-library/react": "^13.4.0",
|
39
|
+
"@testing-library/user-event": "^13.5.0",
|
40
|
+
"@types/jest": "^27.5.2",
|
41
|
+
"@types/lodash": "^4.14.194",
|
42
|
+
"@types/node": "^16.18.32",
|
43
|
+
"@types/react": "^18.2.6",
|
44
|
+
"@types/react-dom": "^18.2.4",
|
45
|
+
"@types/styled-components": "^5.1.26",
|
46
|
+
"commander": "^10.0.1",
|
47
|
+
"lodash": "^4.17.21",
|
48
|
+
"react": "^18.2.0",
|
49
|
+
"react-dom": "^18.2.0",
|
50
|
+
"react-feather": "^2.0.10",
|
51
|
+
"react-scripts": "^5.0.1",
|
52
|
+
"styled-components": "^5.3.10",
|
53
|
+
"typescript": "^5.1.6",
|
54
|
+
"web-vitals": "^2.1.4"
|
55
|
+
}
|
56
|
+
}
|