@xaypay/tui 0.0.110 → 0.0.112

package/dist/index.es.js

@@ -269,9 +269,11 @@ const SvgCheckboxChecked = ({
 
 const Checkbox$1 = ({
   data,
+  index,
   styles,
   checked,
   disabled,
+  innerIndex,
   checkedColor,
   handleChecked,
   unCheckedColor,
@@ -281,7 +283,11 @@ const Checkbox$1 = ({
   const [innerChecked, setInnerChecked] = useState(false);
   const [innerDisabled, setInnerDisabled] = useState(false);
   const handleClick = e => {
-    handleChecked(data, e);
+    if (index !== undefined && innerIndex !== undefined && typeof index === 'number' && typeof innerIndex === 'number') {
+      handleChecked(data, e, index, innerIndex);
+    } else {
+      handleChecked(data, e);
+    }
   };
   useEffect(() => {
     setInnerDisabled(disabled);
@@ -308,9 +314,11 @@ const Checkbox$1 = ({
 
 const SingleCheckbox = ({
   data,
+  index,
   styles,
   checked,
   disabled,
+  innerIndex,
   checkedColor,
   handleChecked,
   unCheckedColor,
@@ -330,10 +338,12 @@ const SingleCheckbox = ({
     setInnerData(data);
   }, [data]);
   return /*#__PURE__*/React__default.createElement(Checkbox$1, {
+    index: index,
     styles: styles,
     data: innerData,
     checked: checked,
     disabled: disabled,
+    innerIndex: innerIndex,
     checkedColor: checkedColor,
     handleChecked: handleChecked,
     unCheckedColor: unCheckedColor,
@@ -343,8 +353,10 @@ const SingleCheckbox = ({
 SingleCheckbox.propTypes = {
   data: PropTypes.object,
   onClick: PropTypes.func,
+  index: PropTypes.number,
   styles: PropTypes.object,
   disabled: PropTypes.bool,
+  innerIndex: PropTypes.number,
   checkedColor: PropTypes.string,
   unCheckedColor: PropTypes.string,
   ignoreDisabledForChecked: PropTypes.bool
@@ -419,9 +431,21 @@ const TD = ({
   handleCheckDots,
   handleCheckedBody,
   handleBodyActionClick,
+  handleMoreOptionsClick,
+  handleContentListClick,
   handleCheckArrowAction,
   handleOpenCloseRowSingleArrow
 }) => {
+  const handleBodyAction = (e, data) => {
+    const actionData = {
+      index,
+      innerIndex,
+      items: item,
+      item: data.item,
+      itemIndex: data.itemIndex
+    };
+    handleBodyActionClick(e, actionData);
+  };
   return /*#__PURE__*/React__default.createElement("td", {
     style: {
       width: 'auto',
@@ -434,7 +458,7 @@ const TD = ({
       textAlign: tBodyTextAlign,
       fontFamily: tBodyFontFamily,
       fontWeight: tBodyFontWeight,
-      boxShadow: item.colorStatus ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
+      boxShadow: Object.prototype.hasOwnProperty.call(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
     }
   }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
     if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
@@ -449,10 +473,9 @@ const TD = ({
         type: newItem.type,
         className: styles$c['td-span'],
         key: `${newItem.id}_${newIndex}`,
-        onClick: Object.prototype.hasOwnProperty.call(newItem, 'type') ? e => handleBodyActionClick(e, {
-          item,
-          index,
-          innerIndex
+        onClick: Object.prototype.hasOwnProperty.call(newItem, 'type') ? e => handleBodyAction(e, {
+          item: newItem,
+          itemIndex: newIndex
         }) : _ => _
       }, newItem.content);
     } else if (newItem && Array.isArray(newItem)) {
@@ -474,10 +497,7 @@ const TD = ({
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
           className: styles$c['td-span'],
-          onClick: Object.prototype.hasOwnProperty.call(iT, 'type') ? e => handleBodyActionClick(e, {
-            index,
-            innerIndex,
-            items: item,
+          onClick: Object.prototype.hasOwnProperty.call(iT, 'type') ? e => handleBodyAction(e, {
             item: iT,
             itemIndex: iN
           }) : _ => _,
@@ -493,20 +513,23 @@ const TD = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: item.contentList || item.checkBox ? 'space-between' : 'center'
+      justifyContent: Object.prototype.hasOwnProperty.call(item, 'contentList') || Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center'
     }
-  }, item.contentList && /*#__PURE__*/React__default.createElement("div", {
+  }, Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default.createElement("div", {
     id: item.id,
     style: {
       width: '21px',
-      height: '21px'
+      height: '21px',
+      cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex),
     className: styles$c['td-span']
-  }, item.status === 'close' ? item.closeArrow : item.openArrow), item.checkBox && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
+  }, item.status === 'close' ? item.closeArrow : item.openArrow), Object.prototype.hasOwnProperty.call(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
     data: item,
-    handleChecked: handleCheckedBody,
+    index: index,
+    innerIndex: innerIndex,
     checked: item.checkBox.checked,
+    handleChecked: handleCheckedBody,
     disabled: item.checkBox.disabled,
     checkedColor: item.checkBox.checkedColor,
     unCheckedColor: item.checkBox.unCheckedColor
@@ -530,6 +553,7 @@ const TD = ({
       position: 'absolute',
       display: item.dotsStatus === 'deActive' ? 'none' : 'block',
       top: '0px',
+      zIndex: 100,
       right: 'calc(100% + 6px)',
       width: '223px',
       height: 'auto',
@@ -540,21 +564,28 @@ const TD = ({
       backgroundColor: '#FFFFFF',
       boxShadow: '0px 0px 20px 0px #3C393E4D'
     }
-  }, item.options && item.options.map((item, index) => {
+  }, Object.prototype.hasOwnProperty.call(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default.createElement("span", {
-      key: `${item.content}_${index}`,
+      key: `${optionItem.content}_${optionIndex}`,
       className: styles$c['dots-option-item'],
       style: {
         color: '#3C393E',
         fontSize: '14px',
         fontFamily: 'Noto Sans Armenian'
-      }
-      // TODO: onClick
+      },
+      onClick: () => handleMoreOptionsClick({
+        item,
+        index,
+        optionItem,
+        innerIndex,
+        optionIndex,
+        options: item.options
+      })
     }, /*#__PURE__*/React__default.createElement("span", {
       style: {
         marginRight: '10px'
       }
-    }, item.icon), /*#__PURE__*/React__default.createElement("span", {
+    }, optionItem.icon), /*#__PURE__*/React__default.createElement("span", {
       style: {
         width: 'calc(100% - 36px)',
         textAlign: 'left',
@@ -562,23 +593,33 @@ const TD = ({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
       },
-      title: item.content
-    }, item.content));
-  }))) : ''), item.contentList && /*#__PURE__*/React__default.createElement("div", {
+      title: optionItem.content
+    }, optionItem.content));
+  }))) : ''), Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default.createElement("div", {
     style: {
-      overflow: 'hidden',
+      overflow: 'auto',
       marginTop: '10px',
+      maxHeight: '300px',
+      maxWidth: '100%',
       height: item.status === 'close' ? '0px' : 'auto'
     }
-  }, item.contentList.map((innerItem, innerIndex) => {
+  }, item.contentList.map((innerItem, innerItemIndex) => {
     return /*#__PURE__*/React__default.createElement("p", {
-      key: `${innerItem}_${innerIndex}`,
+      key: `${innerItem}_${innerItemIndex}`,
       className: styles$c['list-text'],
       style: {
-        color: openListColor
-      }
-      // TODO: add onClick
-    }, innerItem);
+        color: openListColor,
+        maxWidth: (item.content.length * 9 <= 100 ? 100 : item.content.length * 9) + 'px'
+      },
+      onClick: e => handleContentListClick(e, {
+        item,
+        index,
+        innerIndex,
+        listContentId: innerItem.id,
+        listContent: innerItem.content,
+        listContentIndex: innerItemIndex
+      })
+    }, innerItem.content);
   })))) : '');
 };
 
@@ -661,6 +702,30 @@ const Table = ({
   const [disableArr, setDisableArr] = useState([]);
   const [checkedArray, setCheckedArray] = useState([]);
   const configStyles = compereConfigs();
+  const handleCheckIfArrow = (bodyData, data) => {
+    let removeItemIndex;
+    let headerWithoutArrow = [];
+    bodyData.map((item, index) => {
+      if (index === data.index) {
+        item.map((innerItem, innerIndex) => {
+          if (Object.prototype.hasOwnProperty.call(innerItem, 'arrowComponent')) {
+            removeItemIndex = innerIndex;
+          }
+        });
+        if (removeItemIndex !== undefined) {
+          const firstPart = item.slice(0, removeItemIndex);
+          const secondPart = item.slice(removeItemIndex + 1, item.length);
+          headerWithoutArrow = [...firstPart, ...secondPart];
+        } else {
+          headerWithoutArrow.push(item);
+        }
+      }
+    });
+    return {
+      removeItemIndex,
+      headerWithoutArrow
+    };
+  };
   const handleHeaderItemClick = e => {
     e.stopPropagation();
     if (!e.target.tagName.startsWith('svg') && e.target.innerText !== undefined && e.target.innerText !== '') {
@@ -686,19 +751,22 @@ const Table = ({
   };
   const handleBodyActionClick = (e, data) => {
     e.stopPropagation();
-    // const dataRow =
-
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, data);
     const actionData = {
-      row: '',
+      from: 'body',
       item: data.item,
       id: data.item.id,
       items: data.items,
       type: data.item.type,
       rowIndex: data.index,
-      itemIndex: data.innerIndex,
-      itemInnerIndex: data.itemIndex
+      row: headerWithoutArrow,
+      itemInnerIndex: data.itemIndex,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex
     };
-    console.log(actionData);
+    getData(actionData);
   };
   const handleSetCheckboxArray = data => {
     let checkedItems = [];
@@ -779,7 +847,7 @@ const Table = ({
     const updatedHeader = header.slice();
     const updatedBody = body.slice().map(item => Object.values(item));
     const newData = updatedHeader.map((item, index) => {
-      if (item.content === data.content) {
+      if (item.content == data.content) {
         checkableItemIndex = index;
         checkableItemBool = !item.checkBox.checked;
         item.checkBox.checked = !item.checkBox.checked;
@@ -824,12 +892,17 @@ const Table = ({
     setHeader(newData);
     setBody(newUpdatedBody);
   };
-  const handleCheckedBody = (data, e) => {
+  const handleCheckedBody = (data, e, dataRowIndex, dataItemIndex) => {
     e.stopPropagation();
+    const transformedData = {
+      ...data
+    };
+    transformedData.index = dataRowIndex;
+    transformedData.innerIndex = dataItemIndex;
     const updatedBody = body.slice().map(item => Object.values(item));
     const newData = updatedBody.map((item, index) => {
       return item.map((innerItem, innerIndex) => {
-        if (innerItem.id === data.id && innerItem.content === data.content && innerItem.checkBox) {
+        if (innerItem.id === data.id && innerItem.content == data.content && Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
           innerItem.checkBox.checked = !innerItem.checkBox.checked;
           handleHeaderCheckedUpdate({
             row: index,
@@ -840,6 +913,18 @@ const Table = ({
         return innerItem;
       });
     });
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, transformedData);
+    const checkedData = {
+      item: data,
+      from: 'body',
+      row: removeItemIndex !== undefined ? headerWithoutArrow : headerWithoutArrow[0],
+      rowIndex: transformedData.index,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < transformedData.innerIndex ? transformedData.innerIndex - 1 : transformedData.innerIndex
+    };
+    getData(checkedData);
     setBody(newData);
   };
   const handleHeaderCheckedUpdate = checkedData => {
@@ -985,6 +1070,52 @@ const Table = ({
     }
     return headerWithDisabled;
   };
+  const handleContentListClick = (e, data) => {
+    e.stopPropagation();
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, data);
+    const listData = {
+      from: 'body',
+      item: data.item,
+      rowIndex: data.index,
+      row: headerWithoutArrow,
+      listItemId: data.listContentId,
+      listItemContent: data.listContent,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
+      listItemInnerIndex: data.listContentIndex
+    };
+    getData(listData);
+  };
+  const handleMoreOptionsClick = data => {
+    const {
+      removeItemIndex,
+      headerWithoutArrow
+    } = handleCheckIfArrow(body, data);
+    const moreData = {
+      from: 'body',
+      item: data.item,
+      rowIndex: data.index,
+      options: data.options,
+      row: headerWithoutArrow,
+      itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
+      optionItem: data.optionItem,
+      optionIndex: data.optionIndex
+    };
+    getData(moreData);
+  };
+  const handleTableClick = () => {
+    const checkBodyMore = body.map(elemItem => {
+      return elemItem.map(elemInnerItem => {
+        if (Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+          elemInnerItem.dotsStatus = 'deActive';
+        }
+        return elemInnerItem;
+      });
+    });
+    setBody(() => checkBodyMore);
+  };
   useEffect(() => {
     let checkedItems = [];
     const disabledArray = [];
@@ -992,7 +1123,7 @@ const Table = ({
     if (arrowShow) {
       const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
       const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
-      checkForInsertArrow.map((item, index) => {
+      const insert = checkForInsertArrow.map((item, index) => {
         item.map((innerItem, innerIndex) => {
           if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
             if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
@@ -1007,12 +1138,12 @@ const Table = ({
             }
           }
         });
+        return item;
       });
-      checkedItems = handleSetCheckboxArray(checkForInsertArrow);
-      setBody(() => checkForInsertArrow);
+      checkedItems = handleSetCheckboxArray(insert);
+      setBody(() => insert);
     } else {
-      checkedItems = handleSetCheckboxArray(checkBodyForChackedItems);
-      checkBodyForChackedItems.map((item, index) => {
+      const insert = checkBodyForChackedItems.map((item, index) => {
         item.map((innerItem, innerIndex) => {
           if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
             if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
@@ -1027,8 +1158,10 @@ const Table = ({
             }
           }
         });
+        return item;
       });
-      setBody(() => dataBody);
+      checkedItems = handleSetCheckboxArray(insert);
+      setBody(() => insert);
     }
     setDisableArr(disabledArray);
     setCheckedArray(() => checkedItems);
@@ -1049,7 +1182,8 @@ const Table = ({
     style: {
       width: '100%',
       borderCollapse: 'collapse'
-    }
+    },
+    onClick: handleTableClick
   }, header && header.length > 0 && /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
     style: {
       color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
@@ -1090,6 +1224,8 @@ const Table = ({
         openListColor: openListColor ? openListColor : configStyles.TABLE.openListColor,
         handleCheckedBody: handleCheckedBody,
         handleBodyActionClick: handleBodyActionClick,
+        handleMoreOptionsClick: handleMoreOptionsClick,
+        handleContentListClick: handleContentListClick,
         tBodyColor: tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor,
         tBodyPadding: tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding,
         tBodyFontSize: tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize,
@@ -4266,6 +4402,9 @@ const Textarea = ({
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+    if (value === '') {
+      setError('');
+    }
     setInnerValue(value);
   }, [value, onChange]);
   useEffect(() => {