aio-popup 8.0.1 → 8.2.0

package/index.css

@@ -191,6 +191,7 @@
   width: 100%;
   overflow-y: auto;
   box-sizing: border-box;
+  background:#fff;
 }
 
 .aio-popup-body * {
@@ -572,6 +573,7 @@
 
 .aio-popup-confirm {
   overflow: hidden;
+  background: #fff;
 }
 
 .aio-popup-confirm .aio-popup-body {

package/index.d.ts

@@ -102,6 +102,7 @@ export type AP_confirm = {
 export type AP_prompt = {
     title?: string;
     text: string;
+    placeholder?: string;
     subtitle?: string;
     submitText?: string;
     canselText?: string;
@@ -137,23 +138,23 @@ export type AP_usePopup = {
     addConfirm: AP_addConfirm;
     addPrompt: AP_addPrompt;
 };
-export type I_usePopup = {
+export type I_usePopup = ReturnType<typeof usePopup>;
+declare const usePopup: (props?: {
+    rtl?: boolean;
+    id?: string;
+}) => {
     addAlert: AP_addAlert;
     addSnackebar: AP_addSnackebar;
     removeModal: AP_removeModal;
     addModal: AP_addModal;
-    getModals: AP_getModals;
+    getModals: () => AP_modal[];
     addHighlight: AP_addHighlight;
     removeHighlight: AP_removeHighlight;
     render: AP_render;
     addConfirm: AP_addConfirm;
     addPrompt: AP_addPrompt;
-    portal: () => void;
+    portal: () => any;
 };
-declare const usePopup: (props?: {
-    rtl?: boolean;
-    id?: string;
-}) => I_usePopup;
 export default usePopup;
 export type AP_SnackebarItem = {
     item: AP_snackebar;

package/index.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createRef, useEffect, useState, createContext, useContext, useRef } from 'react';
+import { createRef, useEffect, useState, createContext, useContext, useRef, useMemo } from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import ReactDOM from 'react-dom';
 import { $, anime } from 'aio-deps';
@@ -195,7 +195,7 @@ const usePopup = (props) => {
     };
     const addPrompt = (obj) => {
         const id = 'a' + (Math.round(Math.random() * 100000));
-        let { title, text = '', subtitle, submitText = 'Submit', canselText = 'close', onSubmit, onCansel = () => { }, modalAttrs, backdropAttrs, headerAttrs, footerAttrs, bodyAttrs } = obj;
+        let { title, text = '', subtitle, submitText = 'Submit', placeholder = '', canselText = 'close', onSubmit, onCansel = () => { }, modalAttrs, backdropAttrs, headerAttrs, footerAttrs, bodyAttrs } = obj;
         const submitAttrs = AddToAttrs(obj.submitAttrs, {
             className: 'active', attrs: {
                 onClick: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -230,30 +230,26 @@ const usePopup = (props) => {
             position: 'center', header: { title, subtitle },
             modalAttrs: AddToAttrs(modalAttrs, { className: 'aio-popup-prompt' }),
             backdropAttrs, headerAttrs, footerAttrs, bodyAttrs,
-            body: _jsx(Prompt, { change: (value) => promptTexts.current = Object.assign(Object.assign({}, promptTexts.current), { [id]: value }), placeholder: text }),
+            body: _jsx(Prompt, { change: (value) => promptTexts.current = Object.assign(Object.assign({}, promptTexts.current), { [id]: value }), placeholder: placeholder, text: text }),
             footer: (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({}, canselAttrs, { children: canselText })), _jsx("button", Object.assign({}, submitAttrs, { children: submitText }))] }))
         };
         addModal(config);
     };
-    const getContext = () => {
-        return {
-            rtl: !!props && !!props.rtl,
-            snackebarItems: snackebarItemsRef.current,
-            removeSnackebar, removeModal
-        };
-    };
+    const ctx = useMemo(() => ({ rtl: !!(props === null || props === void 0 ? void 0 : props.rtl), snackebarItems, removeSnackebar, removeModal }), [props === null || props === void 0 ? void 0 : props.rtl, snackebarItems]);
     const render = (caller) => {
-        return (_jsxs(CTX.Provider, { value: getContext(), children: [modalsRef.current.map((modal, i) => {
+        return (_jsxs(CTX.Provider, { value: ctx, children: [modalsRef.current.map((modal, i) => {
                     return (_jsx(Popup, { modal: modal, isLast: i === modalsRef.current.length - 1, renderCaller: caller }, modal.id));
                 }), snackebarItems.map((item, i) => _jsx(SnackebarItem, { item: item, index: i }, item.id)), !!highlight && _jsx(Highlight, { highlight: highlight })] }));
     };
-    const portal = () => ReactDOM.createPortal(render(), document.body);
+    const portal = useMemo(() => {
+        return () => ReactDOM.createPortal(render(), document.body);
+    }, [modals, snackebarItems, highlight]);
     return { addAlert, addSnackebar, removeModal, addModal, getModals, addHighlight, removeHighlight, render, addConfirm, addPrompt, portal };
 };
 export default usePopup;
-const Prompt = ({ change, placeholder }) => {
-    const [text, setText] = useState('');
-    return (_jsx("textarea", { placeholder: placeholder, value: text, onChange: (e) => { const value = e.target.value; setText(value); change(value); } }));
+const Prompt = ({ change, placeholder, text = '' }) => {
+    const [value, setValue] = useState(text);
+    return (_jsx("textarea", { placeholder: placeholder, value: value, onChange: (e) => { const value = e.target.value; setValue(value); change(value); } }));
 };
 const POPUPCTX = createContext({});
 const Popup = ({ modal, isLast }) => {
@@ -742,16 +738,16 @@ function getEasing(highlight) {
     const { easing } = highlight;
     var easingNames = [
         'linear',
-        'easeInQuad',
-        'easeInSine',
-        'easeInCirc',
-        'easeInBack',
-        'easeOutQuad',
-        'easeOutSine',
-        'easeOutCirc',
-        'easeInOutQuad',
-        'easeInOutSine',
-        'easeInOutBack',
+        'easeInQuad', //1
+        'easeInSine', //5
+        'easeInCirc', //7
+        'easeInBack', //8
+        'easeOutQuad', //9
+        'easeOutSine', //13
+        'easeOutCirc', //15
+        'easeInOutQuad', //18
+        'easeInOutSine', //22
+        'easeInOutBack', //25
         'easeOutBounce', //27
     ];
     if (typeof easing === 'number') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aio-popup",
-  "version": "8.0.1",
+  "version": "8.2.0",
   "description": "handle all types of popup and modals in react",
   "main": "index.js",
   "scripts": {