@xaypay/tui 0.2.12 → 0.2.13

package/dist/index.es.js

@@ -1142,6 +1142,12 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    order: {
+      color: '#000',
+      font: {
+        ...fontObject
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1465,22 +1471,6 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
-class FileTypeParser {
-  static ftypHeader = new Uint8Array([0x66, 0x74, 0x79, 0x70]);
-  hasISOBaseMediaFile(buffer) {
-    const slicedBuffer = new Uint8Array(buffer.slice(0, 12));
-    return this.check(slicedBuffer, FileTypeParser.ftypHeader, {
-      offset: 4
-    }) && (slicedBuffer[8] & 0x60) !== 0x00;
-  }
-  check(buffer, headers, options) {
-    for (const [index, header] of headers.entries()) {
-      if (header !== buffer[index + options.offset]) return false;
-    }
-    return true;
-  }
-}
-
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/forwardRef(({
   or,
@@ -1587,13 +1577,19 @@ const File = /*#__PURE__*/forwardRef(({
   const [singleFile, setSingleFile] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
   const [choosenFileCount, setChoosenFileCount] = useState(0);
-  const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+  const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url.startsWith('data:image/heif') || defaultData.url.startsWith('data:image/heic') || defaultData.url.startsWith('data:application/octet-stream') ? 'heic' : defaultData.url : 'pdf' : null : null);
   const handleCheckHeicFormat = async file => {
     const buffer = await file.arrayBuffer();
-    const fileTypeParser = new FileTypeParser();
-    const hasISOBaseMediaFile = fileTypeParser.hasISOBaseMediaFile(buffer);
-    if (hasISOBaseMediaFile) {
-      return Promise.resolve();
+    const dataView = new DataView(buffer);
+    if (dataView.byteLength < 12) return false;
+    for (let i = 0; i < dataView.byteLength - 8; i++) {
+      if (dataView.getUint8(i) === 0x66 && dataView.getUint8(i + 1) === 0x74 && dataView.getUint8(i + 2) === 0x79 && dataView.getUint8(i + 3) === 0x70) {
+        const majorBrand = String.fromCharCode(dataView.getUint8(i + 4), dataView.getUint8(i + 5), dataView.getUint8(i + 6), dataView.getUint8(i + 7));
+        const heicIdentifiers = ['heic', 'heix', 'mif1', 'msf1', 'hevc'];
+        if (heicIdentifiers.includes(majorBrand)) {
+          return Promise.resolve();
+        }
+      }
     }
     return Promise.reject();
   };
@@ -1635,6 +1631,7 @@ const File = /*#__PURE__*/forwardRef(({
                       file: file[ix],
                       uuid: v4()
                     });
+                    setImage('heic');
                   }).catch(() => {
                     change({
                       file: file[ix],
@@ -1682,6 +1679,7 @@ const File = /*#__PURE__*/forwardRef(({
                     file: file[ix],
                     uuid: v4()
                   });
+                  setImage('heic');
                 }).catch(() => {
                   change({
                     file: file[ix],
@@ -1730,18 +1728,21 @@ const File = /*#__PURE__*/forwardRef(({
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
           if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
             setError('');
-            change(file);
-            setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
+              change(file[0]);
+              setSingleFile(file[0]);
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
               handleCheckHeicFormat(file[0]).then(() => {
                 setImage('heic');
+                change(file[0]);
+                setSingleFile(file[0]);
               }).catch(() => {
                 setImage(null);
                 setError(formatError ?? configStyles.FILE.error.format);
               });
             } else {
+              change(file[0]);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -1797,7 +1798,7 @@ const File = /*#__PURE__*/forwardRef(({
   }));
   useEffect(() => {
     if (!multiple && defaultData) {
-      if (!defaultData.type) {
+      if (!defaultData.type && !defaultData.url.startsWith('data:image/heif') && !defaultData.url.startsWith('data:image/heic') && !defaultData.url.startsWith('data:application/octet-stream')) {
         alert('Please add type in defaultData prop');
       }
       if (!defaultData.url) {
@@ -2497,28 +2498,38 @@ const TH = ({
   }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
 };
 
+var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_18604_3112' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3e%3cpath d='M0 0H24V24H0V0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_18604_3112)'%3e%3cpath d='M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z' fill='%23A3A5A9'/%3e%3c/g%3e%3c/svg%3e";
+
 const TD = ({
   row,
   item,
   index,
   rowItem,
   rowRadius,
+  dragStart,
+  handleMouseDown,
   hideBorder,
   innerIndex,
   tBodyColor,
+  orderColor,
   borderRight,
-  borderRightColor,
   tBodyPadding,
+  setIsDragging,
+  orderFontSize,
   tBodyFontSize,
   openListColor,
+  orderFontStyle,
   tBodyTextAlign,
+  orderFontFamily,
+  orderFontWeight,
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
   openListFontSize,
+  borderRightColor,
   openListFontStyle,
-  openListFontWeight,
   handleCheckedBody,
+  openListFontWeight,
   openListFontFamily,
   tableColumnMinWidth,
   tableColumnMaxWidth,
@@ -2646,7 +2657,26 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$9['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default.createElement("div", {
+    draggable: true,
+    style: {
+      width: '24px',
+      height: '24px',
+      cursor: 'grab'
+    },
+    onDragStart: () => dragStart(index)
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: img$1,
+    alt: "drag"
+  })), hasOwnerProperty(item, 'draggable') && /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: orderColor,
+      fontSize: orderFontSize,
+      fontStyle: orderFontStyle,
+      fontFamily: orderFontFamily,
+      fontWeight: orderFontWeight
+    }
+  }, item.order), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -2859,20 +2889,34 @@ const Table = ({
   tBodyFontWeight,
   tBodyFontFamily,
   tBodyRowMarginTop,
+  orderColor,
+  orderFontSize,
+  orderFontStyle,
+  orderFontFamily,
+  orderFontWeight,
   className,
   openListColor,
   openListFontSize,
   openListFontStyle,
   openListFontWeight,
   openListFontFamily,
-  hideBorder
+  hideBorder,
+  draggable,
+  showOrder,
+  draggableColor,
+  getDraggableData
 }) => {
+  const headerRef = useRef(null);
+  const draggedRowIndex = useRef(null);
   const [body, setBody] = useState([]);
   const [header, setHeader] = useState([]);
   const [disableArr, setDisableArr] = useState([]);
   const [classProps, setClassProps] = useState({});
+  const [checkDrag, setCheckDrag] = useState(false);
   const [checkedArray, setCheckedArray] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
+  useState(false);
+  const [draggingIndex, setDraggingIndex] = useState(null);
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3279,66 +3323,172 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
+  const handleDragStart = index => {
+    draggedRowIndex.current = index;
+    setDraggingIndex(() => index);
+  };
+  const handleDrop = index => {
+    let correctData = [];
+    const newRows = body;
+    const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
+    newRows.splice(index, 0, draggedRow);
+    newRows.map(item => {
+      correctData.push([...item]);
+    });
+    setBody(correctData);
+    getDraggableData && getDraggableData(correctData);
+    setCheckDrag(prev => !prev);
+    draggedRowIndex.current = null;
+    setDraggingIndex(() => null);
+    correctData = null;
+  };
   useEffect(() => {
-    let checkedItems = [];
-    const disabledArray = [];
-    const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
-    if (arrowShow) {
-      const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
-      const insert = checkForInsertArrow.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+    const draggableArray = body && body.length && 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 = JSON.stringify(body) === JSON.stringify(dataBody);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      let checkedItems = [];
+      const disabledArray = [];
+      const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
+      if (arrowShow) {
+        const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
+        insert = checkForInsertArrow.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
-    } else {
-      const insert = checkBodyForChackedItems.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      } else {
+        insert = checkBodyForChackedItems.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      }
+      getDraggableData && getDraggableData(newArray && newArray.length ? newArray : insert);
+      setBody(() => newArray && newArray.length ? newArray : insert);
+      setDisableArr(disabledArray);
+      setCheckedArray(() => checkedItems);
     }
-    setDisableArr(disabledArray);
-    setCheckedArray(() => checkedItems);
-  }, [dataBody, arrowColumn, arrowShow]);
+  }, [dataBody, arrowColumn, arrowShow, draggable]);
   useEffect(() => {
-    if (arrowShow) {
-      const header = dataHeader.slice();
-      const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
-      setHeader(() => checkForInsertArrow);
-    } else {
-      setHeader(() => dataHeader);
+    const isEqual = JSON.stringify(header) === JSON.stringify(dataHeader);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      if (arrowShow) {
+        const header = dataHeader.slice();
+        const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
+        insert = checkForInsertArrow;
+        if (draggable) {
+          newArray = insert;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      } else {
+        if (draggable) {
+          newArray = dataHeader;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      }
+      setHeader(() => newArray && newArray.length ? newArray : insert);
     }
-  }, [dataHeader, arrowColumn, arrowShow, disableArr]);
+  }, [dataHeader, arrowColumn, arrowShow, disableArr, draggable]);
   useEffect(() => {
     className && setClassProps(() => classnames(className ?? configStyles.TABLE.className));
   }, [className]);
@@ -3362,7 +3512,9 @@ const Table = ({
     },
     onClick: handleTableClick,
     className: classProps
-  }, header && header.length > 0 && /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
+  }, header && header.length > 0 && /*#__PURE__*/React__default.createElement("thead", {
+    ref: headerRef
+  }, /*#__PURE__*/React__default.createElement("tr", {
     style: {
       color: tHeadColor ?? configStyles.TABLE.head.color,
       backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
@@ -3393,6 +3545,9 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default.createElement("tr", {
+      onDragStart: () => handleDragStart(index),
+      onDragOver: e => e.preventDefault(),
+      onDrop: () => handleDrop(index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
@@ -3407,6 +3562,7 @@ const Table = ({
         hideBorder: hideBorder,
         innerIndex: innerIndex,
         row: Object.values(item),
+        dragStart: handleDragStart,
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -3421,6 +3577,11 @@ const Table = ({
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
+        orderColor: orderColor ?? configStyles.TABLE.order.color,
+        orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+        orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+        orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+        orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
         tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
         rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
         rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
@@ -4151,6 +4312,7 @@ const NumberInput = ({
   inpStyles,
   minNumSize,
   maxNumSize,
+  insideError,
   inputChange,
   inpAttributes,
   setInnerErrorMessage
@@ -4167,13 +4329,21 @@ const NumberInput = ({
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
+          insideError && insideError();
           setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
         }
       } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
-          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          insideError && insideError();
+          if (innerMinNumSize && !maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ պակաս ${innerMinNumSize} - ից`);
+          } else if (!innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ մեծ ${maxNumSize} ֊ ից`);
+          } else if (innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          }
         }
       } else if (currentValue >= Number.MIN_SAFE_INTEGER || currentValue <= Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue >= innerMinNumSize || maxNumSize && currentValue <= maxNumSize) {
         inputChange(currentValue);
@@ -4299,6 +4469,7 @@ const Input = ({
   telBorderRightWidth,
   telBorderRightStyle,
   telBorderRightColor,
+  fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
   type = 'text'
@@ -4440,6 +4611,7 @@ const Input = ({
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
     setInnerErrorMessage: setInnerErrorMessage,
@@ -4551,6 +4723,7 @@ Input.propTypes = {
   labelMarginBottom: PropTypes.string,
   regexpErrorMessage: PropTypes.string,
   regexp: PropTypes.instanceOf(RegExp),
+  fireInputInsideError: PropTypes.func,
   telBorderRightWidth: PropTypes.string,
   telBorderRightStyle: PropTypes.string,
   telBorderRightColor: PropTypes.string,

package/dist/index.js

@@ -1173,6 +1173,12 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    order: {
+      color: '#000',
+      font: {
+        ...fontObject
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1496,22 +1502,6 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
-class FileTypeParser {
-  static ftypHeader = new Uint8Array([0x66, 0x74, 0x79, 0x70]);
-  hasISOBaseMediaFile(buffer) {
-    const slicedBuffer = new Uint8Array(buffer.slice(0, 12));
-    return this.check(slicedBuffer, FileTypeParser.ftypHeader, {
-      offset: 4
-    }) && (slicedBuffer[8] & 0x60) !== 0x00;
-  }
-  check(buffer, headers, options) {
-    for (const [index, header] of headers.entries()) {
-      if (header !== buffer[index + options.offset]) return false;
-    }
-    return true;
-  }
-}
-
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
   or,
@@ -1618,13 +1608,19 @@ const File = /*#__PURE__*/React.forwardRef(({
   const [singleFile, setSingleFile] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
   const [choosenFileCount, setChoosenFileCount] = React.useState(0);
-  const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+  const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url.startsWith('data:image/heif') || defaultData.url.startsWith('data:image/heic') || defaultData.url.startsWith('data:application/octet-stream') ? 'heic' : defaultData.url : 'pdf' : null : null);
   const handleCheckHeicFormat = async file => {
     const buffer = await file.arrayBuffer();
-    const fileTypeParser = new FileTypeParser();
-    const hasISOBaseMediaFile = fileTypeParser.hasISOBaseMediaFile(buffer);
-    if (hasISOBaseMediaFile) {
-      return Promise.resolve();
+    const dataView = new DataView(buffer);
+    if (dataView.byteLength < 12) return false;
+    for (let i = 0; i < dataView.byteLength - 8; i++) {
+      if (dataView.getUint8(i) === 0x66 && dataView.getUint8(i + 1) === 0x74 && dataView.getUint8(i + 2) === 0x79 && dataView.getUint8(i + 3) === 0x70) {
+        const majorBrand = String.fromCharCode(dataView.getUint8(i + 4), dataView.getUint8(i + 5), dataView.getUint8(i + 6), dataView.getUint8(i + 7));
+        const heicIdentifiers = ['heic', 'heix', 'mif1', 'msf1', 'hevc'];
+        if (heicIdentifiers.includes(majorBrand)) {
+          return Promise.resolve();
+        }
+      }
     }
     return Promise.reject();
   };
@@ -1666,6 +1662,7 @@ const File = /*#__PURE__*/React.forwardRef(({
                       file: file[ix],
                       uuid: v4()
                     });
+                    setImage('heic');
                   }).catch(() => {
                     change({
                       file: file[ix],
@@ -1713,6 +1710,7 @@ const File = /*#__PURE__*/React.forwardRef(({
                     file: file[ix],
                     uuid: v4()
                   });
+                  setImage('heic');
                 }).catch(() => {
                   change({
                     file: file[ix],
@@ -1761,18 +1759,21 @@ const File = /*#__PURE__*/React.forwardRef(({
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
           if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
             setError('');
-            change(file);
-            setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
+              change(file[0]);
+              setSingleFile(file[0]);
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
               handleCheckHeicFormat(file[0]).then(() => {
                 setImage('heic');
+                change(file[0]);
+                setSingleFile(file[0]);
               }).catch(() => {
                 setImage(null);
                 setError(formatError ?? configStyles.FILE.error.format);
               });
             } else {
+              change(file[0]);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -1828,7 +1829,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   }));
   React.useEffect(() => {
     if (!multiple && defaultData) {
-      if (!defaultData.type) {
+      if (!defaultData.type && !defaultData.url.startsWith('data:image/heif') && !defaultData.url.startsWith('data:image/heic') && !defaultData.url.startsWith('data:application/octet-stream')) {
         alert('Please add type in defaultData prop');
       }
       if (!defaultData.url) {
@@ -2528,28 +2529,38 @@ const TH = ({
   }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
 };
 
+var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_18604_3112' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3e%3cpath d='M0 0H24V24H0V0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_18604_3112)'%3e%3cpath d='M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z' fill='%23A3A5A9'/%3e%3c/g%3e%3c/svg%3e";
+
 const TD = ({
   row,
   item,
   index,
   rowItem,
   rowRadius,
+  dragStart,
+  handleMouseDown,
   hideBorder,
   innerIndex,
   tBodyColor,
+  orderColor,
   borderRight,
-  borderRightColor,
   tBodyPadding,
+  setIsDragging,
+  orderFontSize,
   tBodyFontSize,
   openListColor,
+  orderFontStyle,
   tBodyTextAlign,
+  orderFontFamily,
+  orderFontWeight,
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
   openListFontSize,
+  borderRightColor,
   openListFontStyle,
-  openListFontWeight,
   handleCheckedBody,
+  openListFontWeight,
   openListFontFamily,
   tableColumnMinWidth,
   tableColumnMaxWidth,
@@ -2677,7 +2688,26 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$9['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default["default"].createElement("div", {
+    draggable: true,
+    style: {
+      width: '24px',
+      height: '24px',
+      cursor: 'grab'
+    },
+    onDragStart: () => dragStart(index)
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: img$1,
+    alt: "drag"
+  })), hasOwnerProperty(item, 'draggable') && /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      color: orderColor,
+      fontSize: orderFontSize,
+      fontStyle: orderFontStyle,
+      fontFamily: orderFontFamily,
+      fontWeight: orderFontWeight
+    }
+  }, item.order), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -2890,20 +2920,34 @@ const Table = ({
   tBodyFontWeight,
   tBodyFontFamily,
   tBodyRowMarginTop,
+  orderColor,
+  orderFontSize,
+  orderFontStyle,
+  orderFontFamily,
+  orderFontWeight,
   className,
   openListColor,
   openListFontSize,
   openListFontStyle,
   openListFontWeight,
   openListFontFamily,
-  hideBorder
+  hideBorder,
+  draggable,
+  showOrder,
+  draggableColor,
+  getDraggableData
 }) => {
+  const headerRef = React.useRef(null);
+  const draggedRowIndex = React.useRef(null);
   const [body, setBody] = React.useState([]);
   const [header, setHeader] = React.useState([]);
   const [disableArr, setDisableArr] = React.useState([]);
   const [classProps, setClassProps] = React.useState({});
+  const [checkDrag, setCheckDrag] = React.useState(false);
   const [checkedArray, setCheckedArray] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
+  React.useState(false);
+  const [draggingIndex, setDraggingIndex] = React.useState(null);
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3310,66 +3354,172 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
+  const handleDragStart = index => {
+    draggedRowIndex.current = index;
+    setDraggingIndex(() => index);
+  };
+  const handleDrop = index => {
+    let correctData = [];
+    const newRows = body;
+    const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
+    newRows.splice(index, 0, draggedRow);
+    newRows.map(item => {
+      correctData.push([...item]);
+    });
+    setBody(correctData);
+    getDraggableData && getDraggableData(correctData);
+    setCheckDrag(prev => !prev);
+    draggedRowIndex.current = null;
+    setDraggingIndex(() => null);
+    correctData = null;
+  };
   React.useEffect(() => {
-    let checkedItems = [];
-    const disabledArray = [];
-    const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
-    if (arrowShow) {
-      const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
-      const insert = checkForInsertArrow.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+    const draggableArray = body && body.length && 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 = JSON.stringify(body) === JSON.stringify(dataBody);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      let checkedItems = [];
+      const disabledArray = [];
+      const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
+      if (arrowShow) {
+        const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
+        insert = checkForInsertArrow.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
-    } else {
-      const insert = checkBodyForChackedItems.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      } else {
+        insert = checkBodyForChackedItems.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      }
+      getDraggableData && getDraggableData(newArray && newArray.length ? newArray : insert);
+      setBody(() => newArray && newArray.length ? newArray : insert);
+      setDisableArr(disabledArray);
+      setCheckedArray(() => checkedItems);
     }
-    setDisableArr(disabledArray);
-    setCheckedArray(() => checkedItems);
-  }, [dataBody, arrowColumn, arrowShow]);
+  }, [dataBody, arrowColumn, arrowShow, draggable]);
   React.useEffect(() => {
-    if (arrowShow) {
-      const header = dataHeader.slice();
-      const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
-      setHeader(() => checkForInsertArrow);
-    } else {
-      setHeader(() => dataHeader);
+    const isEqual = JSON.stringify(header) === JSON.stringify(dataHeader);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      if (arrowShow) {
+        const header = dataHeader.slice();
+        const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
+        insert = checkForInsertArrow;
+        if (draggable) {
+          newArray = insert;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      } else {
+        if (draggable) {
+          newArray = dataHeader;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      }
+      setHeader(() => newArray && newArray.length ? newArray : insert);
     }
-  }, [dataHeader, arrowColumn, arrowShow, disableArr]);
+  }, [dataHeader, arrowColumn, arrowShow, disableArr, draggable]);
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.TABLE.className));
   }, [className]);
@@ -3393,7 +3543,9 @@ const Table = ({
     },
     onClick: handleTableClick,
     className: classProps
-  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", {
+  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", {
+    ref: headerRef
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       color: tHeadColor ?? configStyles.TABLE.head.color,
       backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
@@ -3424,6 +3576,9 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
+      onDragStart: () => handleDragStart(index),
+      onDragOver: e => e.preventDefault(),
+      onDrop: () => handleDrop(index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
@@ -3438,6 +3593,7 @@ const Table = ({
         hideBorder: hideBorder,
         innerIndex: innerIndex,
         row: Object.values(item),
+        dragStart: handleDragStart,
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -3452,6 +3608,11 @@ const Table = ({
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
+        orderColor: orderColor ?? configStyles.TABLE.order.color,
+        orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+        orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+        orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+        orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
         tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
         rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
         rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
@@ -4182,6 +4343,7 @@ const NumberInput = ({
   inpStyles,
   minNumSize,
   maxNumSize,
+  insideError,
   inputChange,
   inpAttributes,
   setInnerErrorMessage
@@ -4198,13 +4360,21 @@ const NumberInput = ({
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
+          insideError && insideError();
           setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
         }
       } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
-          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          insideError && insideError();
+          if (innerMinNumSize && !maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ պակաս ${innerMinNumSize} - ից`);
+          } else if (!innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ մեծ ${maxNumSize} ֊ ից`);
+          } else if (innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          }
         }
       } else if (currentValue >= Number.MIN_SAFE_INTEGER || currentValue <= Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue >= innerMinNumSize || maxNumSize && currentValue <= maxNumSize) {
         inputChange(currentValue);
@@ -4330,6 +4500,7 @@ const Input = ({
   telBorderRightWidth,
   telBorderRightStyle,
   telBorderRightColor,
+  fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
   type = 'text'
@@ -4471,6 +4642,7 @@ const Input = ({
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
     setInnerErrorMessage: setInnerErrorMessage,
@@ -4582,6 +4754,7 @@ Input.propTypes = {
   labelMarginBottom: PropTypes__default["default"].string,
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),
+  fireInputInsideError: PropTypes__default["default"].func,
   telBorderRightWidth: PropTypes__default["default"].string,
   telBorderRightStyle: PropTypes__default["default"].string,
   telBorderRightColor: PropTypes__default["default"].string,

package/package.json

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

package/tui.config.js

@@ -767,7 +767,12 @@ export default {
         openList: {
             color: '#A3A5A9',
             font: {...fontObject}
-        } 
+        },
+
+        order: {
+            color: '#000',
+            font: {...fontObject}
+        }
     },
     // default properties for <Pagination /> component
     PAGINATION: {