react-popup-ts - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/component/popup/Popup.d.ts

@@ -1,11 +0,8 @@
-import * as React from 'react';
+/// <reference types="react" />
+import { PopupObj } from '../../types/common';
 import { usePopupProps } from '../../hooks/usePopup';
-export interface PopupProps {
-    is_show: boolean;
-    children: React.ReactElement;
-    duration?: number;
-    keyframes?: usePopupProps['keyframes'];
-    top: number | string;
+export interface PopupProps extends PopupObj {
+    handleAfterEndTimeExist?: usePopupProps['handleAfterEndTimeExist'];
 }
-declare function Popup({ top, children, is_show, duration, keyframes }: PopupProps): JSX.Element | null;
+declare function Popup({ is_show, duration, keyframes, time_exist, children, handleAfterEndTimeExist }: PopupProps): JSX.Element | null;
 export default Popup;

dist/hooks/usePopup.d.ts

 /// <reference types="react" />
 import { common_types } from 'react-commons-ts';
-export interface usePopupProps {
+import { PopupObj } from '../types/common';
+export interface usePopupProps extends Omit<PopupObj, 'children'> {
     ref_popup_elm: common_types.RefElmType<HTMLElement>;
-    is_show: boolean;
-    keyframes?: Keyframe[] | PropertyIndexedKeyframes;
-    duration?: number;
+    handleAfterEndTimeExist?: () => void;
 }
-export declare function usePopup({ ref_popup_elm, is_show, keyframes, duration }: usePopupProps): {
+export declare function usePopup({ ref_popup_elm, is_show, keyframes, duration, time_exist, handleAfterEndTimeExist }: usePopupProps): {
     ref_show_popup: import("react").MutableRefObject<boolean>;
     ref_display_popup: import("react").MutableRefObject<boolean>;
 };

dist/index.d.ts

@@ -0,2 +1,5 @@
+import { usePopup } from './hooks/usePopup';
+import { usePopupMulti } from './hooks/usePopupMulti';
 import Popup from './component/popup/Popup';
-export { Popup };
+import PopupMulti from './component/popup_multi/PopupMulti';
+export { usePopup, usePopupMulti, Popup, PopupMulti };

dist/index.js

@@ -21,6 +21,11 @@ var React = require('react');
       _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? 750 : _ref$duration;
+      duration = _ref$duration === void 0 ? 750 : _ref$duration,
+      _ref$time_exist = _ref.time_exist,
+      time_exist = _ref$time_exist === void 0 ? 3000 : _ref$time_exist,
+      _ref$handleAfterEndTi = _ref.handleAfterEndTimeExist,
+      handleAfterEndTimeExist = _ref$handleAfterEndTi === void 0 ? function () {} : _ref$handleAfterEndTi;
   var ref_animation = React.useRef(null);
   var ref_show_popup = React.useRef(false);
   var ref_display_popup = React.useRef(false);
+  var ref_interval_exist = React.useRef(null);
   var ref_interval_end = React.useRef(null);
@@ -36,2 +41,9 @@ var forceUpdate = reactCommonsTs.useForceUpdate();
 
+  function clearTimeExist() {
+    if (ref_interval_exist.current) {
+      clearTimeout(ref_interval_exist.current);
+      ref_interval_exist.current = null;
+    }
+  }
+
   function handleStartShow() {
@@ -56,2 +68,9 @@ ref_display_popup.current = true;
 
+    if (time_exist) {
+      clearTimeExist();
+      ref_interval_exist.current = setTimeout(function () {
+        handleHide();
+      }, time_exist);
+    }
+
     if (ref_animation.current) {
@@ -92,2 +111,7 @@ ref_animation.current.playbackRate = 1;
     forceUpdate();
+
+    if (time_exist) {
+      clearTimeExist();
+      handleAfterEndTimeExist();
+    }
   }
@@ -101,10 +125,71 @@
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+}
+
+function usePopupMulti(_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  var popup_arr = React.useRef([]);
+  var ref_c_popup_id = React.useRef(0);
+  var forceUpdate = reactCommonsTs.useForceUpdate();
+
+  function addPopup(popup_obj) {
+    ref_c_popup_id.current += 1;
+    popup_arr.current.push(_extends({}, popup_obj, {
+      id: ref_c_popup_id.current
+    }));
+    forceUpdate();
+  }
+
+  function removePopup(popup_id) {
+    if (popup_id === void 0) {
+      popup_id = 0;
+    }
+
+    popup_arr.current = popup_arr.current.filter(function (item) {
+      return item.id !== popup_id;
+    });
+
+    if (popup_arr.current.length == 0) {
+      ref_c_popup_id.current = 0;
+    }
+
+    forceUpdate();
+  }
+
+  return {
+    popup_arr: popup_arr,
+    addPopup: addPopup,
+    removePopup: removePopup
+  };
+}
+
 var PopupStyles = {"Popup":"_2s5X0","Popup-hidden":"_2EDIN"};
 
 function Popup(_ref) {
-  var top = _ref.top,
+  var is_show = _ref.is_show,
+      duration = _ref.duration,
+      keyframes = _ref.keyframes,
+      time_exist = _ref.time_exist,
       children = _ref.children,
-      is_show = _ref.is_show,
-      duration = _ref.duration,
-      keyframes = _ref.keyframes;
+      handleAfterEndTimeExist = _ref.handleAfterEndTimeExist;
   var ref_popup_elm = React.useRef(null);
@@ -116,3 +201,5 @@
     keyframes: keyframes,
-    duration: duration
+    duration: duration,
+    time_exist: time_exist,
+    handleAfterEndTimeExist: handleAfterEndTimeExist
   }),
@@ -128,10 +215,30 @@ ref_display_popup = _usePopup.ref_display_popup,
     ref: ref_popup_elm,
-    className: "Popup " + PopupStyles['Popup'] + " " + PopupStyles[ref_show_popup.current ? '' : 'Popup-hidden'],
-    style: {
-      top: top
-    }
+    className: "Popup " + PopupStyles['Popup'] + " " + PopupStyles[ref_show_popup.current ? '' : 'Popup-hidden']
   }, children);
 }
 
+function PopupMulti(_ref) {
+  var popup_arr = _ref.popup_arr,
+      removePopup = _ref.removePopup;
+  return React.createElement("div", null, popup_arr.map(function (item) {
+    return React.createElement("div", {
+      key: item.id,
+      style: {
+        paddingBottom: '8px'
+      }
+    }, React.createElement(Popup, {
+      is_show: item.is_show,
+      duration: item.duration,
+      keyframes: item.keyframes,
+      handleAfterEndTimeExist: function handleAfterEndTimeExist() {
+        return removePopup(item.id);
+      }
+    }, item.children));
+  }));
+}
+
 exports.Popup = Popup;
+exports.PopupMulti = PopupMulti;
+exports.usePopup = usePopup;
+exports.usePopupMulti = usePopupMulti;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -21,6 +21,11 @@ import { useRef, useEffect, createElement } from 'react';
       _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? 750 : _ref$duration;
+      duration = _ref$duration === void 0 ? 750 : _ref$duration,
+      _ref$time_exist = _ref.time_exist,
+      time_exist = _ref$time_exist === void 0 ? 3000 : _ref$time_exist,
+      _ref$handleAfterEndTi = _ref.handleAfterEndTimeExist,
+      handleAfterEndTimeExist = _ref$handleAfterEndTi === void 0 ? function () {} : _ref$handleAfterEndTi;
   var ref_animation = useRef(null);
   var ref_show_popup = useRef(false);
   var ref_display_popup = useRef(false);
+  var ref_interval_exist = useRef(null);
   var ref_interval_end = useRef(null);
@@ -36,2 +41,9 @@ var forceUpdate = useForceUpdate();
 
+  function clearTimeExist() {
+    if (ref_interval_exist.current) {
+      clearTimeout(ref_interval_exist.current);
+      ref_interval_exist.current = null;
+    }
+  }
+
   function handleStartShow() {
@@ -56,2 +68,9 @@ ref_display_popup.current = true;
 
+    if (time_exist) {
+      clearTimeExist();
+      ref_interval_exist.current = setTimeout(function () {
+        handleHide();
+      }, time_exist);
+    }
+
     if (ref_animation.current) {
@@ -92,2 +111,7 @@ ref_animation.current.playbackRate = 1;
     forceUpdate();
+
+    if (time_exist) {
+      clearTimeExist();
+      handleAfterEndTimeExist();
+    }
   }
@@ -101,10 +125,71 @@
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+}
+
+function usePopupMulti(_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  var popup_arr = useRef([]);
+  var ref_c_popup_id = useRef(0);
+  var forceUpdate = useForceUpdate();
+
+  function addPopup(popup_obj) {
+    ref_c_popup_id.current += 1;
+    popup_arr.current.push(_extends({}, popup_obj, {
+      id: ref_c_popup_id.current
+    }));
+    forceUpdate();
+  }
+
+  function removePopup(popup_id) {
+    if (popup_id === void 0) {
+      popup_id = 0;
+    }
+
+    popup_arr.current = popup_arr.current.filter(function (item) {
+      return item.id !== popup_id;
+    });
+
+    if (popup_arr.current.length == 0) {
+      ref_c_popup_id.current = 0;
+    }
+
+    forceUpdate();
+  }
+
+  return {
+    popup_arr: popup_arr,
+    addPopup: addPopup,
+    removePopup: removePopup
+  };
+}
+
 var PopupStyles = {"Popup":"_2s5X0","Popup-hidden":"_2EDIN"};
 
 function Popup(_ref) {
-  var top = _ref.top,
+  var is_show = _ref.is_show,
+      duration = _ref.duration,
+      keyframes = _ref.keyframes,
+      time_exist = _ref.time_exist,
       children = _ref.children,
-      is_show = _ref.is_show,
-      duration = _ref.duration,
-      keyframes = _ref.keyframes;
+      handleAfterEndTimeExist = _ref.handleAfterEndTimeExist;
   var ref_popup_elm = useRef(null);
@@ -116,3 +201,5 @@
     keyframes: keyframes,
-    duration: duration
+    duration: duration,
+    time_exist: time_exist,
+    handleAfterEndTimeExist: handleAfterEndTimeExist
   }),
@@ -128,10 +215,27 @@ ref_display_popup = _usePopup.ref_display_popup,
     ref: ref_popup_elm,
-    className: "Popup " + PopupStyles['Popup'] + " " + PopupStyles[ref_show_popup.current ? '' : 'Popup-hidden'],
-    style: {
-      top: top
-    }
+    className: "Popup " + PopupStyles['Popup'] + " " + PopupStyles[ref_show_popup.current ? '' : 'Popup-hidden']
   }, children);
 }
 
-export { Popup };
+function PopupMulti(_ref) {
+  var popup_arr = _ref.popup_arr,
+      removePopup = _ref.removePopup;
+  return createElement("div", null, popup_arr.map(function (item) {
+    return createElement("div", {
+      key: item.id,
+      style: {
+        paddingBottom: '8px'
+      }
+    }, createElement(Popup, {
+      is_show: item.is_show,
+      duration: item.duration,
+      keyframes: item.keyframes,
+      handleAfterEndTimeExist: function handleAfterEndTimeExist() {
+        return removePopup(item.id);
+      }
+    }, item.children));
+  }));
+}
+
+export { Popup, PopupMulti, usePopup, usePopupMulti };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "react-popup-ts",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Made with create-react-library",
@@ -5,0 +5,0 @@ "author": "vandat9xhn",

README.md

@@ -18,3 +18,3 @@ # react-popup-ts
 
-import { Popup } from 'react-popup-ts';
+import { Popup, PopupMulti, usePopupMulti } from 'react-popup-ts';
 import 'react-popup-ts/dist/index.css';
@@ -28,2 +28,7 @@
     //
+    const { popup_arr, addPopup, removePopup } = usePopupMulti({});
+
+    // -----
+
+    //
     function toggleShow() {
@@ -34,8 +39,33 @@ setIsShow((is_show) => !is_show);
     //
+    function onAddPopup() {
+        addPopup({
+            is_show: true,
+            children: (
+                <div
+                    style={{
+                        width: 'fit-content',
+                        padding: '6px 12px',
+                        borderRadius: '10px',
+                        backgroundColor: 'rgba(0,0,0,0.8)',
+                        color: 'white'
+                    }}
+                >
+                    This is Popup {Math.floor(Math.random() * 1000)}
+                </div>
+            )
+        });
+    }
+
+    //
     return (
         <div>
             <div onClick={toggleShow}>Toggle</div>
+            <div onClick={onAddPopup}>Add Popup</div>
 
-            <div>
-                <Popup is_show={is_show} top={200}>
+            <div style={{ position: 'fixed', left: 0, top: 100 }}>
+                <Popup
+                    is_show={is_show}
+                    handleAfterEndTimeExist={toggleShow}
+                    time_exist={0}
+                >
                     <div
@@ -54,2 +84,9 @@ style={{
             </div>
+
+            <div style={{ position: 'fixed', left: 0, top: 200 }}>
+                <PopupMulti
+                    popup_arr={popup_arr.current}
+                    removePopup={removePopup}
+                />
+            </div>
         </div>
@@ -56,0 +93,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

44654

increased by67.11%

Number of package files

15

increased by25%

Lines of code

465

increased by78.16%

Number of lines in readme file

99

increased by59.68%

No dependency changes