@rtbjs/use-state/dist/esm/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

import { __assign, __makeTemplateObject, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useMemo, useCallback, memo } from 'react';
import { Modal } from 'antd';
import { ResizeHandle } from './ResizeHandle';
import { useDrag } from './useDrag';
import { usePrevious } from './usePrevious';
import { useResize } from './useResize';
import { createGlobalStyle, styled } from 'styled-components';
var modalStyle = {
    margin: 0,
    paddingBottom: 0,
    pointerEvents: 'auto',
    padding: 0
};
var TitleElement = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: move;\n"], ["\n  cursor: move;\n"])));
var StyledModal = styled(Modal)(templateObject_2 || (templateObject_2 = __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 = createGlobalStyle(templateObject_3 || (templateObject_3 = __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 = __rest(_a, ["id", "modalState", "dispatch", "open", "children", "title", "initialWidth", "initialHeight"]);
    // Call on mount and unmount.
    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 = usePrevious(open);
    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 = useMemo(function () { return (__assign(__assign({}, modalStyle), { top: y, left: x, height: height })); }, [y, x, height]);
    var onFocus = useCallback(function () { return dispatch({ type: 'focus', id: id }); }, [id, dispatch]);
    var onDragWithID = useCallback(function (args) { return dispatch(__assign({ type: 'drag', id: id }, args)); }, [dispatch, id]);
    var onResizeWithID = useCallback(function (args) { return dispatch(__assign({ type: 'resize', id: id }, args)); }, [dispatch, id]);
    var onMouseDrag = useDrag(x, y, onDragWithID);
    var onMouseResize = useResize(x, y, width, height, onResizeWithID);
    var titleElement = useMemo(function () { return (_jsx(TitleElement, __assign({ onMouseDown: onMouseDrag, onClick: onFocus }, { children: title }))); }, [onMouseDrag, onFocus, title]);
    return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}), _jsxs(StyledModal, __assign({ style: style, width: width, mask: false, maskClosable: false, zIndex: zIndex, title: titleElement, open: open, footer: null }, otherProps, { destroyOnClose: false, rootClassName: "toolBoxdraggableRoot" }, { children: [children, _jsx(ResizeHandle, { onMouseDown: onMouseResize })] }))] }));
}
export var DraggableModalInner = memo(DraggableModalInnerNonMemo);
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=DraggableModalInner.js.map