publ-echo 0.0.4 → 0.0.6

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/App.js

@@ -0,0 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { ReactGridLayoutShowcase01, } from "./examples";
+function App() {
+    // return (
+    //   <S_GridLayoutWrapper>
+    //     <ResponsiveGridLayoutShowcase01 />
+    //   </S_GridLayoutWrapper>
+    // );
+    return (_jsx(S_GridLayoutWrapper, { children: _jsx(ReactGridLayoutShowcase01, {}) }));
+}
+var S_GridLayoutWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: yellow;\n\n  & > div {\n    background-color: lightgreen;\n  }\n"], ["\n  background-color: yellow;\n\n  & > div {\n    background-color: lightgreen;\n  }\n"])));
+export default App;
+var templateObject_1;

package/dist/examples/ReactGridLayout/ReactGridLayoutShowcase01.d.ts

@@ -0,0 +1,2 @@
+declare function ReactGridLayoutShowcase01(): import("react/jsx-runtime").JSX.Element;
+export default ReactGridLayoutShowcase01;

package/dist/examples/ReactGridLayout/ReactGridLayoutShowcase01.js

@@ -0,0 +1,57 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateLayout } from "../utils";
+import styled from "styled-components";
+import { ReactGridLayoutPreview } from "../../lib/PreviewGLE";
+import ReactGridLayout from "../../lib/GridLayoutEditor/ReactGridLayout";
+var lay = generateLayout().slice(0, 2);
+// NOTE - windowSize viewport에 맞게 Resize시키기 위한 Provider
+// const Responsive = WidthProvider(ReactGridLayout);
+function ReactGridLayoutShowcase01() {
+    var _a = useState(lay), layout = _a[0], setLayout = _a[1];
+    var _b = useState(false), isOpenPreview = _b[0], setIsOpenPreview = _b[1];
+    var defaultProps = {
+        width: 1280,
+        // className: "layout",
+        items: 50,
+        cols: 12,
+        rowHeight: 50,
+        allowOverlap: true,
+        margin: [10, 10],
+    };
+    function onLayoutChange(newLayout) {
+        setLayout(newLayout);
+    }
+    var onResizeStartTemp = function (e, 
+    // { node, size }: { node: HTMLElement; size: Position }
+    _a) {
+        var node = _a.node, size = _a.size;
+        // Get new XY
+        return;
+    };
+    var onResizeTemp = function (e, 
+    // { node, size }: { node: HTMLElement; size: Position }
+    _a) {
+        var node = _a.node, size = _a.size;
+        return;
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: function () { return setIsOpenPreview(true); }, children: "previewButton" }), !isOpenPreview && (_jsx(ReactGridLayout, __assign({}, defaultProps, { layout: layout, onLayoutChange: onLayoutChange, resizeHandles: ["nw", "e", "n", "ne", "s", "se", "sw", "w"], isHiddenVisibility: true, children: layout.map(function (each) { return (_jsx(S_SampleBox, { children: each.i }, each.i)); }) }))), isOpenPreview && (_jsx(ReactGridLayoutPreview, { layout: layout, props: defaultProps }))] }));
+}
+var S_SampleBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100px;\n  height: 100px;\n  background-color: lightgray;\n  border: dodgerblue 1px solid;\n"], ["\n  width: 100px;\n  height: 100px;\n  background-color: lightgray;\n  border: dodgerblue 1px solid;\n"])));
+export default ReactGridLayoutShowcase01;
+var templateObject_1;

package/dist/examples/ReactGridLayout/index.js

@@ -0,0 +1 @@
+export { default as ReactGridLayoutShowcase01 } from "./ReactGridLayoutShowcase01";

package/dist/examples/ResponsiveGridLayout/ResponsiveGridLayoutShowcase01.d.ts

@@ -0,0 +1,2 @@
+declare function ResponsiveGridLayoutShowcase01(): import("react/jsx-runtime").JSX.Element;
+export default ResponsiveGridLayoutShowcase01;

package/dist/examples/ResponsiveGridLayout/ResponsiveGridLayoutShowcase01.js

@@ -0,0 +1,69 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateLayout } from "../utils";
+import _ from "lodash";
+import styled from "styled-components";
+import { WidthProvider } from "../../lib/components";
+import { ResponsiveGridLayoutPreview } from "../../lib/PreviewGLE";
+import ResponsiveGridLayout from "../../lib/GridLayoutEditor/ResponsiveGridLayout";
+// NOTE - windowSize viewport에 맞게 Resize시키기 위한 Provider
+var Responsive = WidthProvider(ResponsiveGridLayout);
+function ResponsiveGridLayoutShowcase01() {
+    var _a = useState("lg"), currentBreakpoint = _a[0], setCurrentBreakpoint = _a[1];
+    var _b = useState("vertical"), currentCompactType = _b[0], setCurrentCompactType = _b[1];
+    var _c = useState(false), mounted = _c[0], setMounted = _c[1];
+    var _d = useState({
+        lg: generateLayout().slice(0, 1),
+    }), layouts = _d[0], setLayouts = _d[1];
+    var _e = useState(false), isOpenPreview = _e[0], setIsOpenPreview = _e[1];
+    var defaultProps = {
+        // className: "layout",
+        cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+        rowHeight: 50,
+        allowOverlap: true,
+        margin: [10, 10],
+    };
+    var onLayoutChange = function (_a) {
+        var layout = _a.layout, layouts = _a.layouts;
+        setLayouts(__assign({}, layouts));
+    };
+    var onBreakpointChange = function (breakpoint) {
+        setCurrentBreakpoint(breakpoint);
+    };
+    var onCompactTypeChange = function () {
+        var compactType = currentCompactType === "horizontal"
+            ? "vertical"
+            : currentCompactType === "vertical"
+                ? null
+                : "horizontal";
+        setCurrentCompactType(compactType);
+    };
+    var onWidthChange = function (containerWidth, margin, cols, containerPadding) {
+        return;
+    };
+    function generateDOM() {
+        return _.map(layouts.lg, function (l, i) {
+            return (_jsx(S_SampleBox, { className: l.static ? "static" : "", children: l.static ? (_jsxs("span", { className: "text", title: "This item is static and cannot be removed or resized.", children: ["Static - ", i] })) : (_jsx("span", { className: "text", children: i })) }, i));
+        });
+    }
+    // NOTE - window resize 적용된 Responsive
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: function () { return setIsOpenPreview(true); }, children: "previewButton" }), !isOpenPreview && (_jsx(Responsive, __assign({}, defaultProps, { layouts: layouts, onLayoutChange: onLayoutChange, resizeHandles: ["nw", "e", "n", "ne", "s", "se", "sw", "w"], children: generateDOM() }))), isOpenPreview && (_jsx(ResponsiveGridLayoutPreview, { layouts: layouts, props: defaultProps }))] }));
+}
+var S_SampleBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100px;\n  height: 100px;\n  background-color: lightgray;\n  border: dodgerblue 1px solid;\n"], ["\n  width: 100px;\n  height: 100px;\n  background-color: lightgray;\n  border: dodgerblue 1px solid;\n"])));
+export default ResponsiveGridLayoutShowcase01;
+var templateObject_1;

package/dist/examples/ResponsiveGridLayout/index.js

@@ -0,0 +1 @@
+export { default as ResponsiveGridLayoutShowcase01 } from "./ResponsiveGridLayoutShowcase01";

package/dist/examples/index.js

@@ -0,0 +1,2 @@
+export { default as ResponsiveGridLayoutShowcase01 } from "./ResponsiveGridLayout/ResponsiveGridLayoutShowcase01";
+export { default as ReactGridLayoutShowcase01 } from "./ReactGridLayout/ReactGridLayoutShowcase01";

package/dist/examples/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function generateLayout(): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    i: string;
+    static: boolean;
+}[];

package/dist/examples/utils.js

@@ -0,0 +1,14 @@
+import _ from "lodash";
+export function generateLayout() {
+    return _.map(_.range(0, 25), function (item, i) {
+        var y = Math.ceil(Math.random() * 4) + 1;
+        return {
+            x: Math.round(Math.random() * 5) * 2,
+            y: Math.floor(i / 6) * y,
+            w: 2,
+            h: y,
+            i: i.toString(),
+            static: Math.random() < 0.05,
+        };
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./lib";

package/{src/index.tsx → dist/index.js}

@@ -1,21 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import reportWebVitals from "./reportWebVitals";
 import App from "./App";
-
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
+var root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(_jsx(React.StrictMode, { children: _jsx(App, {}) }));
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
-
 export * from "./lib";

package/dist/lib/Draggable/Draggable.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { Bounds, ControlPosition } from "./utils/types";
+import { AxisType, DraggableCoreDefaultProps, DraggablePositionType, PropsWithChildren } from "./types";
+export type DraggableDefaultProps = {
+    axis?: AxisType;
+    bounds?: Bounds | string | false;
+    defaultClassName?: string;
+    defaultClassNameDragging?: string;
+    defaultClassNameDragged?: string;
+    defaultPosition?: ControlPosition;
+    scale?: number;
+    nodeRef?: React.RefObject<HTMLElement>;
+    className?: string;
+    style?: Object;
+} & DraggableCoreDefaultProps & DraggablePositionType;
+declare const Draggable: ({ children, axis, bounds, defaultClassName, defaultClassNameDragging, defaultClassNameDragged, defaultPosition, scale, ...props }: PropsWithChildren<DraggableDefaultProps>) => import("react/jsx-runtime").JSX.Element;
+export default Draggable;

package/dist/lib/Draggable/Draggable.js

@@ -0,0 +1,192 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import DraggableCore from "./DraggableCore";
+import { canDragX, canDragY, cloneBounds, createDraggableData, } from "./utils/positionHelpers";
+import { int, isNum } from "./utils/validationHelpers";
+import { createCSSTransform, createSVGTransform, innerHeight, innerWidth, outerHeight, outerWidth, } from "./utils/domHelpers";
+import classNames from "classnames";
+var Draggable = function (_a) {
+    var _b, _c;
+    var children = _a.children, _d = _a.axis, axis = _d === void 0 ? "both" : _d, _e = _a.bounds, bounds = _e === void 0 ? false : _e, _f = _a.defaultClassName, defaultClassName = _f === void 0 ? "react-draggable" : _f, _g = _a.defaultClassNameDragging, defaultClassNameDragging = _g === void 0 ? "react-draggable-dragging" : _g, _h = _a.defaultClassNameDragged, defaultClassNameDragged = _h === void 0 ? "react-draggable-dragged" : _h, _j = _a.defaultPosition, defaultPosition = _j === void 0 ? { x: 0, y: 0 } : _j, _k = _a.scale, scale = _k === void 0 ? 1 : _k, props = __rest(_a, ["children", "axis", "bounds", "defaultClassName", "defaultClassNameDragging", "defaultClassNameDragged", "defaultPosition", "scale"]);
+    var position = props.position, positionOffset = props.positionOffset, draggableCoreProps = __rest(props, ["position", "positionOffset"]);
+    var draggableRef = useRef(null);
+    var _l = useState({
+        dragged: false,
+        dragging: false,
+        x: position ? position === null || position === void 0 ? void 0 : position.x : defaultPosition.x,
+        y: position ? position === null || position === void 0 ? void 0 : position.y : defaultPosition.y,
+        slackX: 0,
+        slackY: 0,
+        isElementSVG: false,
+        prevPropsPosition: position,
+    }), draggableState = _l[0], setDraggableState = _l[1];
+    /**
+     * @when Draggable이 화면에 그려질 때
+     * @expected 해당 DOMNode가 SVGElement인지를 확인
+     * @clear 페이지를 나갔을 때 dragging을 false로 변경하여 drag되지 않도록 설정
+     */
+    useEffect(function () {
+        if (typeof window.SVGElement !== "undefined" &&
+            findDOMNode() instanceof window.SVGElement) {
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { isElementSVG: true })); });
+        }
+        return function () {
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { dragging: false })); });
+        };
+    }, []);
+    var style = {};
+    var svgTransform = null;
+    var findDOMNode = function () {
+        var _a, _b;
+        return (_b = (_a = props === null || props === void 0 ? void 0 : props.nodeRef) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : draggableRef === null || draggableRef === void 0 ? void 0 : draggableRef.current;
+    };
+    var getBoundPosition = function (x, y, node) {
+        var _a;
+        if (!bounds)
+            return [x, y];
+        var newBounds = bounds;
+        newBounds = typeof bounds === "string" ? bounds : cloneBounds(bounds);
+        if (typeof newBounds === "string") {
+            var ownerWindow = (_a = node === null || node === void 0 ? void 0 : node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+            var boundNode = void 0;
+            if (newBounds === "parent") {
+                boundNode = node === null || node === void 0 ? void 0 : node.parentNode;
+            }
+            else {
+                boundNode = node === null || node === void 0 ? void 0 : node.ownerDocument.querySelector(newBounds);
+            }
+            if (!(ownerWindow && boundNode instanceof ownerWindow.HTMLElement)) {
+                throw new Error('Bounds selector "' + newBounds + '" could not find an element');
+            }
+            var boundNodeElement = boundNode;
+            var nodeStyle = ownerWindow.getComputedStyle(node);
+            var boundNodeStyle = ownerWindow.getComputedStyle(boundNodeElement);
+            newBounds = {
+                left: -node.offsetLeft +
+                    int(boundNodeStyle.paddingLeft) +
+                    int(nodeStyle.marginLeft),
+                top: -node.offsetTop +
+                    int(boundNodeStyle.paddingTop) +
+                    int(nodeStyle.marginTop),
+                right: innerWidth(boundNodeElement) -
+                    outerWidth(node) -
+                    node.offsetLeft +
+                    int(boundNodeStyle.paddingRight) -
+                    int(nodeStyle.marginRight),
+                bottom: innerHeight(boundNodeElement) -
+                    outerHeight(node) -
+                    node.offsetTop +
+                    int(boundNodeStyle.paddingBottom) -
+                    int(nodeStyle.marginBottom),
+            };
+        }
+        if (isNum(newBounds.right))
+            x = Math.min(x, newBounds.right);
+        if (isNum(newBounds.bottom))
+            y = Math.min(y, newBounds.bottom);
+        if (isNum(newBounds.left))
+            x = Math.max(x, newBounds.left);
+        if (isNum(newBounds.top))
+            y = Math.max(y, newBounds.top);
+        return [x, y];
+    };
+    var handleDragStart = function (e, coreData) {
+        if (props.onStart) {
+            var shouldStart = props.onStart(e, createDraggableData(draggableState, scale, coreData));
+            if (shouldStart === false)
+                return false;
+        }
+        setDraggableState(function (prev) { return (__assign(__assign({}, prev), { dragged: true, dragging: true })); });
+    };
+    var handleDrag = function (e, coreData, node) {
+        if (!draggableState.dragging)
+            return false;
+        var uiData = createDraggableData(draggableState, scale, coreData);
+        var newState = __assign(__assign({}, draggableState), { x: uiData.x, y: uiData.y });
+        if (bounds) {
+            var x = newState.x, y = newState.y;
+            newState.x += draggableState.slackX;
+            newState.y += draggableState.slackY;
+            var _a = getBoundPosition(newState.x, newState.y, node), newBoundPositionX = _a[0], newBoundPositionY = _a[1];
+            newState.x = newBoundPositionX;
+            newState.y = newBoundPositionY;
+            newState.slackX = draggableState.slackX + (x - newState.x);
+            newState.slackY = draggableState.slackY + (y - newState.y);
+            uiData.x = newState.x;
+            uiData.y = newState.y;
+            uiData.deltaX = newState.x - draggableState.x;
+            uiData.deltaY = newState.y - draggableState.y;
+        }
+        if (props.onDrag) {
+            var shouldUpdate = props.onDrag(e, uiData);
+            if (shouldUpdate === false)
+                return false;
+        }
+        setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: newState.x, y: newState.y })); });
+    };
+    var handleDragStop = function (e, coreData) {
+        if (!draggableState.dragging)
+            return false;
+        if (props.onStop) {
+            var shouldContinue = props.onStop(e, createDraggableData(draggableState, scale, coreData));
+            if (shouldContinue === false)
+                return false;
+        }
+        if (position && Boolean(position)) {
+            var x_1 = position.x, y_1 = position.y;
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: x_1, y: y_1, dragging: false, slackX: 0, slackY: 0 })); });
+        }
+        else {
+            setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { dragging: false, slackX: 0, slackY: 0 })); });
+        }
+    };
+    var controlled = Boolean(position);
+    var draggable = !controlled || draggableState.dragging;
+    var validPosition = position || defaultPosition;
+    var transformOptions = {
+        x: canDragX(axis) && draggable ? draggableState.x : validPosition.x,
+        y: canDragY(axis) && draggable ? draggableState.y : validPosition.y,
+    };
+    if (draggableState.isElementSVG) {
+        svgTransform = createSVGTransform(transformOptions, positionOffset);
+    }
+    else {
+        style = createCSSTransform(transformOptions, positionOffset);
+    }
+    var className = classNames(props.className || "", defaultClassName, (_b = {}, _b[defaultClassNameDragging] = draggableState.dragging, _b), (_c = {}, _c[defaultClassNameDragged] = draggableState.dragged, _c));
+    // NOTE - class형 컴포넌트에서 사용되는 getDerivedStateFromProps에 대응하기 위한 조건문입니다.
+    if (position &&
+        (!draggableState.prevPropsPosition ||
+            position.x !== draggableState.prevPropsPosition.x ||
+            position.y !== draggableState.prevPropsPosition.y)) {
+        setDraggableState(function (prevState) { return (__assign(__assign({}, prevState), { x: position.x, y: position.y, prevPropsPosition: __assign({}, position) })); });
+    }
+    return (_jsx(DraggableCore, __assign({}, draggableCoreProps, { onStart: handleDragStart, onDrag: handleDrag, onStop: handleDragStop, children: React.cloneElement(children, {
+            className: className,
+            style: __assign(__assign({}, props.style), style),
+            transform: svgTransform,
+        }) })));
+};
+export default Draggable;

package/dist/lib/Draggable/DraggableCore.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { DraggableCoreDefaultProps, PropsWithChildren } from "./types";
+type Props = DraggableCoreDefaultProps;
+declare const DraggableCore: ({ allowAnyClick, disabled, enableUserSelectHack, onStart, onDrag, onStop, onMouseDown, scale, children, ...props }: PropsWithChildren<Props>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export default DraggableCore;