@rtbjs/use-state/dist/cjs/components/draggable-box/DraggableModalInner.js

`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management

"use strict";
exports.__esModule = true;
exports.DraggableModalInner = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var antd_1 = require("antd");
var ResizeHandle_1 = require("./ResizeHandle");
var useDrag_1 = require("./useDrag");
var usePrevious_1 = require("./usePrevious");
var useResize_1 = require("./useResize");
var styled_components_1 = require("styled-components");
var modalStyle = {
    margin: 0,
    paddingBottom: 0,
    pointerEvents: 'auto',
    padding: 0
};
var TitleElement = styled_components_1.styled.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  cursor: move;\n"], ["\n  cursor: move;\n"])));
var StyledModal = (0, styled_components_1.styled)(antd_1.Modal)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  &.ant-modal {\n    display: flex;\n    max-width: none;\n    transform-origin: 50% 50% !important;\n  }\n\n  & .ant-modal-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: auto;\n  }\n\n  & .ant-modal-header {\n    flex: 0;\n    padding: 0;\n  }\n\n  & .ant-modal-body {\n    flex: 1;\n    overflow-y: auto;\n  }\n"], ["\n  &.ant-modal {\n    display: flex;\n    max-width: none;\n    transform-origin: 50% 50% !important;\n  }\n\n  & .ant-modal-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: auto;\n  }\n\n  & .ant-modal-header {\n    flex: 0;\n    padding: 0;\n  }\n\n  & .ant-modal-body {\n    flex: 1;\n    overflow-y: auto;\n  }\n"])));
var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  .toolBoxdraggableRoot {\n    pointer-events: none;\n  }\n"], ["\n  .toolBoxdraggableRoot {\n    pointer-events: none;\n  }\n"])));
function DraggableModalInnerNonMemo(_a) {
    var id = _a.id, modalState = _a.modalState, dispatch = _a.dispatch, open = _a.open, children = _a.children, title = _a.title, initialWidth = _a.initialWidth, initialHeight = _a.initialHeight, otherProps = tslib_1.__rest(_a, ["id", "modalState", "dispatch", "open", "children", "title", "initialWidth", "initialHeight"]);
    // Call on mount and unmount.
    (0, react_1.useEffect)(function () {
        dispatch({
            type: 'mount',
            id: id,
            intialState: { initialWidth: initialWidth, initialHeight: initialHeight }
        });
        return function () { return dispatch({ type: 'unmount', id: id }); };
    }, [dispatch, id, initialWidth, initialHeight]);
    // Bring this to the front if it's been opened with props.
    var visiblePrevious = (0, usePrevious_1.usePrevious)(open);
    (0, react_1.useEffect)(function () {
        if (open !== visiblePrevious) {
            if (open) {
                dispatch({ type: 'show', id: id });
            }
            else {
                dispatch({ type: 'hide', id: id });
            }
        }
    }, [open, visiblePrevious, id, dispatch]);
    var zIndex = modalState.zIndex, x = modalState.x, y = modalState.y, width = modalState.width, height = modalState.height;
    var style = (0, react_1.useMemo)(function () { return (tslib_1.__assign(tslib_1.__assign({}, modalStyle), { top: y, left: x, height: height })); }, [y, x, height]);
    var onFocus = (0, react_1.useCallback)(function () { return dispatch({ type: 'focus', id: id }); }, [id, dispatch]);
    var onDragWithID = (0, react_1.useCallback)(function (args) { return dispatch(tslib_1.__assign({ type: 'drag', id: id }, args)); }, [dispatch, id]);
    var onResizeWithID = (0, react_1.useCallback)(function (args) { return dispatch(tslib_1.__assign({ type: 'resize', id: id }, args)); }, [dispatch, id]);
    var onMouseDrag = (0, useDrag_1.useDrag)(x, y, onDragWithID);
    var onMouseResize = (0, useResize_1.useResize)(x, y, width, height, onResizeWithID);
    var titleElement = (0, react_1.useMemo)(function () { return ((0, jsx_runtime_1.jsx)(TitleElement, tslib_1.__assign({ onMouseDown: onMouseDrag, onClick: onFocus }, { children: title }))); }, [onMouseDrag, onFocus, title]);
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle, {}), (0, jsx_runtime_1.jsxs)(StyledModal, tslib_1.__assign({ style: style, width: width, mask: false, maskClosable: false, zIndex: zIndex, title: titleElement, open: open, footer: null }, otherProps, { destroyOnClose: false, rootClassName: "toolBoxdraggableRoot" }, { children: [children, (0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, { onMouseDown: onMouseResize })] }))] }));
}
exports.DraggableModalInner = (0, react_1.memo)(DraggableModalInnerNonMemo);
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=DraggableModalInner.js.map