@xaypay/tui 0.2.16 → 0.2.18

package/dist/index.es.js

@@ -1135,6 +1135,7 @@ var packageResult = {
       wrapHeight: '100%'
     },
     icon: {
+      className: 'tui_close-modal-icon'
       // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
       // prev: React.createElement(SvgChecked, { fill: 'green' }),      
       // next: React.createElement(SvgChecked, { fill: 'green' }),      
@@ -2244,7 +2245,7 @@ const File = /*#__PURE__*/forwardRef(({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     }
-  }, singleFile ? singleFile.name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
+  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -3190,7 +3191,7 @@ const Table = ({
   const [header, setHeader] = useState([]);
   const [disableArr, setDisableArr] = useState([]);
   const [classProps, setClassProps] = useState({});
-  const [checkDrag, setCheckDrag] = useState(false);
+  const [checkDrag, setCheckDrag] = useState(null);
   const [checkedArray, setCheckedArray] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
   const [dragging, setDragging] = useState(false);
@@ -3669,19 +3670,21 @@ const Table = ({
     });
   };
   useEffect(() => {
-    const draggableArray = body && body.length > 0 ? body.map((item, index) => {
-      if (showOrder) {
-        Object.values(item).map((innerItem, innerIndex) => {
-          if (innerIndex === 1) {
-            innerItem.content = index + 1, innerItem.draggable = true;
-          }
-          return innerItem;
-        });
-      }
-      return item;
-    }) : [];
-    getDraggableData && getDraggableData(draggableArray);
-    setBody(() => draggableArray);
+    if (checkDrag != null) {
+      const draggableArray = body && body.length > 0 ? body.map((item, index) => {
+        if (showOrder) {
+          Object.values(item).map((innerItem, innerIndex) => {
+            if (innerIndex === 1) {
+              innerItem.content = index + 1, innerItem.draggable = true;
+            }
+            return innerItem;
+          });
+        }
+        return item;
+      }) : [];
+      getDraggableData && getDraggableData(draggableArray);
+      setBody(() => draggableArray);
+    }
   }, [checkDrag]);
   useEffect(() => {
     const isEqual = handleSafeStringify(body) === handleSafeStringify(dataBody);
@@ -4116,6 +4119,7 @@ const Modal = ({
   nextIcon,
   closeIcon,
   showCloseIcon,
+  closeIconClass,
   closeSlideIcon,
   selected,
   children,
@@ -4348,9 +4352,10 @@ const Modal = ({
       width: 'fit-content',
       alignItems: 'center',
       alignSelf: 'flex-end',
-      height: 'fit-content',
+      height: '100%',
       justifyContent: 'center'
-    }
+    },
+    className: closeIconClass ? closeIconClass : configStyles.MODAL.icon.className
   }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)) : ''), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -4500,6 +4505,7 @@ Modal.propTypes = {
   nextIcon: PropTypes.element,
   closeIcon: PropTypes.element,
   showCloseIcon: PropTypes.bool,
+  closeIconClass: PropTypes.string,
   closeSlideIcon: PropTypes.element,
   headerText: PropTypes.string,
   headerSize: PropTypes.string,
@@ -7629,6 +7635,7 @@ const createSwipe = (id, title, child, props, swipable) => {
         });
       }
       const SwipifyBlock = document.getElementById('swipify_tui');
+      SwipifyBlock.style.display = 'block';
       SwipifyBlock.appendChild(swipable);
     }
     swipable.appendChild(swipeBlock);
@@ -7693,6 +7700,7 @@ const swipe = {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
             const SwipifyBlock = document.getElementById('swipify_tui');
+            SwipifyBlock.style.display = 'none';
             SwipifyBlock.removeChild(swipable);
           }
         }, 200);
@@ -7702,12 +7710,14 @@ const swipe = {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
           const SwipifyBlock = document.getElementById('swipify_tui');
+          SwipifyBlock.style.display = 'none';
           SwipifyBlock.removeChild(swipable);
         }
       }
     } else {
       if (swipeCount === 0 && swipable) {
         const SwipifyBlock = document.getElementById('swipify_tui');
+        SwipifyBlock.style.display = 'none';
         SwipifyBlock.removeChild(swipable);
       }
     }
@@ -7727,10 +7737,12 @@ const SwipeModal = () => {
     ref: ref,
     id: "swipify_tui",
     style: {
-      position: 'relative',
+      position: 'absolute',
       width: '100%',
+      top: 0,
       overflow: 'hidden',
-      zIndex: 1
+      zIndex: 1,
+      display: 'none'
     }
   });
 };

package/dist/index.js

@@ -1166,6 +1166,7 @@ var packageResult = {
       wrapHeight: '100%'
     },
     icon: {
+      className: 'tui_close-modal-icon'
       // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
       // prev: React.createElement(SvgChecked, { fill: 'green' }),      
       // next: React.createElement(SvgChecked, { fill: 'green' }),      
@@ -2275,7 +2276,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     }
-  }, singleFile ? singleFile.name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -3221,7 +3222,7 @@ const Table = ({
   const [header, setHeader] = React.useState([]);
   const [disableArr, setDisableArr] = React.useState([]);
   const [classProps, setClassProps] = React.useState({});
-  const [checkDrag, setCheckDrag] = React.useState(false);
+  const [checkDrag, setCheckDrag] = React.useState(null);
   const [checkedArray, setCheckedArray] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
   const [dragging, setDragging] = React.useState(false);
@@ -3700,19 +3701,21 @@ const Table = ({
     });
   };
   React.useEffect(() => {
-    const draggableArray = body && body.length > 0 ? body.map((item, index) => {
-      if (showOrder) {
-        Object.values(item).map((innerItem, innerIndex) => {
-          if (innerIndex === 1) {
-            innerItem.content = index + 1, innerItem.draggable = true;
-          }
-          return innerItem;
-        });
-      }
-      return item;
-    }) : [];
-    getDraggableData && getDraggableData(draggableArray);
-    setBody(() => draggableArray);
+    if (checkDrag != null) {
+      const draggableArray = body && body.length > 0 ? body.map((item, index) => {
+        if (showOrder) {
+          Object.values(item).map((innerItem, innerIndex) => {
+            if (innerIndex === 1) {
+              innerItem.content = index + 1, innerItem.draggable = true;
+            }
+            return innerItem;
+          });
+        }
+        return item;
+      }) : [];
+      getDraggableData && getDraggableData(draggableArray);
+      setBody(() => draggableArray);
+    }
   }, [checkDrag]);
   React.useEffect(() => {
     const isEqual = handleSafeStringify(body) === handleSafeStringify(dataBody);
@@ -4147,6 +4150,7 @@ const Modal = ({
   nextIcon,
   closeIcon,
   showCloseIcon,
+  closeIconClass,
   closeSlideIcon,
   selected,
   children,
@@ -4379,9 +4383,10 @@ const Modal = ({
       width: 'fit-content',
       alignItems: 'center',
       alignSelf: 'flex-end',
-      height: 'fit-content',
+      height: '100%',
       justifyContent: 'center'
-    }
+    },
+    className: closeIconClass ? closeIconClass : configStyles.MODAL.icon.className
   }, closeIcon ? closeIcon : configStyles.MODAL.icon.close ? configStyles.MODAL.icon.close : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -4531,6 +4536,7 @@ Modal.propTypes = {
   nextIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
   showCloseIcon: PropTypes__default["default"].bool,
+  closeIconClass: PropTypes__default["default"].string,
   closeSlideIcon: PropTypes__default["default"].element,
   headerText: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
@@ -7660,6 +7666,7 @@ const createSwipe = (id, title, child, props, swipable) => {
         });
       }
       const SwipifyBlock = document.getElementById('swipify_tui');
+      SwipifyBlock.style.display = 'block';
       SwipifyBlock.appendChild(swipable);
     }
     swipable.appendChild(swipeBlock);
@@ -7724,6 +7731,7 @@ const swipe = {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
             const SwipifyBlock = document.getElementById('swipify_tui');
+            SwipifyBlock.style.display = 'none';
             SwipifyBlock.removeChild(swipable);
           }
         }, 200);
@@ -7733,12 +7741,14 @@ const swipe = {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
           const SwipifyBlock = document.getElementById('swipify_tui');
+          SwipifyBlock.style.display = 'none';
           SwipifyBlock.removeChild(swipable);
         }
       }
     } else {
       if (swipeCount === 0 && swipable) {
         const SwipifyBlock = document.getElementById('swipify_tui');
+        SwipifyBlock.style.display = 'none';
         SwipifyBlock.removeChild(swipable);
       }
     }
@@ -7758,10 +7768,12 @@ const SwipeModal = () => {
     ref: ref,
     id: "swipify_tui",
     style: {
-      position: 'relative',
+      position: 'absolute',
       width: '100%',
+      top: 0,
       overflow: 'hidden',
-      zIndex: 1
+      zIndex: 1,
+      display: 'none'
     }
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -720,6 +720,7 @@ export default {
         },
 
         icon: {
+            className: 'tui_close-modal-icon'
             // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
             // prev: React.createElement(SvgChecked, { fill: 'green' }),      
             // next: React.createElement(SvgChecked, { fill: 'green' }),