@pky/open-modal 0.0.1

package/dist/index.cjs.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var client = require('react-dom/client');
+var classNames = require('classnames');
+var react = require('react');
+var reactDom = require('react-dom');
+
+var closeIcon = "data:image/png;base64,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";
+
+var styles = {"modal":"index-module__modal___TLS5G","topBar":"index-module__topBar___V8Gsq","content":"index-module__content___tElL8","fullHeight":"index-module__fullHeight___EOzKX","slideOut":"index-module__slideOut___8onmK"};
+
+/**
+ * 全屏弹窗，从下向上弹出
+ */
+const Modal = ({ children, visible, onClose, style, className, contentClassName, fullHeight }) => {
+    const [modalElement, setModalElement] = react.useState(null);
+    const [isClosing, setIsClosing] = react.useState(false);
+    const handleClose = () => {
+        setIsClosing(true);
+        setTimeout(() => {
+            setIsClosing(false);
+            onClose?.();
+        }, 300);
+    };
+    react.useEffect(() => {
+        if (visible) {
+            const newModalElement = document.createElement('div');
+            newModalElement.setAttribute('data-body-portal', '');
+            document.body.appendChild(newModalElement);
+            setModalElement(newModalElement);
+            return () => {
+                document.body.removeChild(newModalElement);
+            };
+        }
+    }, [visible]);
+    react.useEffect(() => { }, []);
+    if (!visible || modalElement === null)
+        return null;
+    return reactDom.createPortal(jsxRuntime.jsxs("div", { className: classNames(styles.modal, className), style: style, children: [!fullHeight && (jsxRuntime.jsx("div", { className: styles.topBar, children: jsxRuntime.jsx("span", { onClick: handleClose, style: { cursor: 'pointer' }, children: jsxRuntime.jsx("img", { src: closeIcon, width: 40, style: { padding: '0 8px' }, alt: "close" }) }) })), jsxRuntime.jsx("div", { className: classNames(styles.content, contentClassName, fullHeight && styles.fullHeight, isClosing && styles.slideOut), children: children })] }), modalElement);
+};
+
+const openModal = ({ modalContent, closeCb, ...modalProps }) => {
+    return new Promise(resolve => {
+        const div = document.createElement('div');
+        const root = client.createRoot(div);
+        function _render(currentProps) {
+            const content = typeof modalContent === 'function'
+                ? modalContent({
+                    onClose,
+                    onSubmit(v) {
+                        resolve(v);
+                        onClose();
+                    }
+                })
+                : modalContent;
+            root.render(jsxRuntime.jsx(Modal, { ...currentProps, children: content }));
+        }
+        let newProps = {
+            ...modalProps,
+            visible: true,
+            onClose
+        };
+        function onClose() {
+            newProps = {
+                ...newProps,
+                visible: false
+            };
+            _render(newProps);
+            closeCb?.();
+        }
+        _render(newProps);
+    });
+};
+
+exports.Modal = Modal;
+exports.openModal = openModal;

package/dist/index.css

@@ -0,0 +1 @@
+.index-module__modal___TLS5G{background-color:rgba(0,0,0,.5);bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000}.index-module__modal___TLS5G .index-module__topBar___V8Gsq{height:40px;text-align:right}.index-module__modal___TLS5G .index-module__topBar___V8Gsq>span{cursor:pointer;display:inline-block;margin:6px 10px 0 0}.index-module__modal___TLS5G .index-module__content___tElL8{animation:index-module__slideIn___JBZ5J .3s ease;background-color:#fff;height:calc(100vh - 40px)}.index-module__modal___TLS5G .index-module__content___tElL8.index-module__fullHeight___EOzKX{height:100vh}.index-module__modal___TLS5G .index-module__content___tElL8.index-module__slideOut___8onmK{animation:index-module__slideOut___8onmK .3s ease}@keyframes index-module__slideIn___JBZ5J{0%{opacity:0;transform:translateY(50%)}to{opacity:1;transform:translateY(0)}}@keyframes index-module__slideOut___8onmK{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(50%)}}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ModalProps } from './modal';
+export type OpenModalRenderProps<T> = {
+    onClose: () => void;
+    onSubmit: (v: T) => void;
+};
+type OpenModalParams<T> = {
+    modalContent: ReactElement | ((p: OpenModalRenderProps<T>) => ReactElement);
+    closeCb?: () => void;
+} & ModalProps;
+export { Modal } from './modal';
+export declare const openModal: <T>({ modalContent, closeCb, ...modalProps }: OpenModalParams<T>) => Promise<T>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAS,MAAM,SAAS,CAAA;AAE3C,MAAM,MAAM,oBAAoB,CAAC,CAAC,IAAI;IAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;CAAE,CAAA;AAEvF,KAAK,eAAe,CAAC,CAAC,IAAI;IACxB,YAAY,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,CAAA;IAC3E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,GAAG,UAAU,CAAA;AAEd,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,0CAA0C,eAAe,CAAC,CAAC,CAAC,KAAG,OAAO,CAAC,CAAC,CAqCrG,CAAA"}

package/dist/index.esm.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
+import classNames from 'classnames';
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+var closeIcon = "data:image/png;base64,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";
+
+var styles = {"modal":"index-module__modal___TLS5G","topBar":"index-module__topBar___V8Gsq","content":"index-module__content___tElL8","fullHeight":"index-module__fullHeight___EOzKX","slideOut":"index-module__slideOut___8onmK"};
+
+/**
+ * 全屏弹窗，从下向上弹出
+ */
+const Modal = ({ children, visible, onClose, style, className, contentClassName, fullHeight }) => {
+    const [modalElement, setModalElement] = useState(null);
+    const [isClosing, setIsClosing] = useState(false);
+    const handleClose = () => {
+        setIsClosing(true);
+        setTimeout(() => {
+            setIsClosing(false);
+            onClose?.();
+        }, 300);
+    };
+    useEffect(() => {
+        if (visible) {
+            const newModalElement = document.createElement('div');
+            newModalElement.setAttribute('data-body-portal', '');
+            document.body.appendChild(newModalElement);
+            setModalElement(newModalElement);
+            return () => {
+                document.body.removeChild(newModalElement);
+            };
+        }
+    }, [visible]);
+    useEffect(() => { }, []);
+    if (!visible || modalElement === null)
+        return null;
+    return createPortal(jsxs("div", { className: classNames(styles.modal, className), style: style, children: [!fullHeight && (jsx("div", { className: styles.topBar, children: jsx("span", { onClick: handleClose, style: { cursor: 'pointer' }, children: jsx("img", { src: closeIcon, width: 40, style: { padding: '0 8px' }, alt: "close" }) }) })), jsx("div", { className: classNames(styles.content, contentClassName, fullHeight && styles.fullHeight, isClosing && styles.slideOut), children: children })] }), modalElement);
+};
+
+const openModal = ({ modalContent, closeCb, ...modalProps }) => {
+    return new Promise(resolve => {
+        const div = document.createElement('div');
+        const root = createRoot(div);
+        function _render(currentProps) {
+            const content = typeof modalContent === 'function'
+                ? modalContent({
+                    onClose,
+                    onSubmit(v) {
+                        resolve(v);
+                        onClose();
+                    }
+                })
+                : modalContent;
+            root.render(jsx(Modal, { ...currentProps, children: content }));
+        }
+        let newProps = {
+            ...modalProps,
+            visible: true,
+            onClose
+        };
+        function onClose() {
+            newProps = {
+                ...newProps,
+                visible: false
+            };
+            _render(newProps);
+            closeCb?.();
+        }
+        _render(newProps);
+    });
+};
+
+export { Modal, openModal };

package/dist/modal/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface ModalProps {
+    children?: ReactNode;
+    visible?: boolean;
+    onClose?: () => void;
+    style?: React.CSSProperties;
+    className?: string;
+    contentClassName?: string;
+    fullHeight?: boolean;
+}
+/**
+ * 全屏弹窗，从下向上弹出
+ */
+export declare const Modal: ({ children, visible, onClose, style, className, contentClassName, fullHeight }: ModalProps) => import("react").ReactPortal | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modal/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAA;AAMtD,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,gFAAgF,UAAU,uCAmD/G,CAAA"}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@pky/open-modal",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c ../../rollup.config.js --environment TARGET:open-modal"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@mix-toolkit/better-lazy-image": "workspace:^0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  }
+}