@xaypay/tui 0.0.110 → 0.0.112

package/dist/index.js

@@ -299,9 +299,11 @@ const SvgCheckboxChecked = ({
 
 const Checkbox$1 = ({
   data,
+  index,
   styles,
   checked,
   disabled,
+  innerIndex,
   checkedColor,
   handleChecked,
   unCheckedColor,
@@ -311,7 +313,11 @@ const Checkbox$1 = ({
   const [innerChecked, setInnerChecked] = React.useState(false);
   const [innerDisabled, setInnerDisabled] = React.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);
+    }
   };
   React.useEffect(() => {
     setInnerDisabled(disabled);
@@ -338,9 +344,11 @@ const Checkbox$1 = ({
 
 const SingleCheckbox = ({
   data,
+  index,
   styles,
   checked,
   disabled,
+  innerIndex,
   checkedColor,
   handleChecked,
   unCheckedColor,
@@ -360,10 +368,12 @@ const SingleCheckbox = ({
     setInnerData(data);
   }, [data]);
   return /*#__PURE__*/React__default["default"].createElement(Checkbox$1, {
+    index: index,
     styles: styles,
     data: innerData,
     checked: checked,
     disabled: disabled,
+    innerIndex: innerIndex,
     checkedColor: checkedColor,
     handleChecked: handleChecked,
     unCheckedColor: unCheckedColor,
@@ -373,8 +383,10 @@ const SingleCheckbox = ({
 SingleCheckbox.propTypes = {
   data: PropTypes__default["default"].object,
   onClick: PropTypes__default["default"].func,
+  index: PropTypes__default["default"].number,
   styles: PropTypes__default["default"].object,
   disabled: PropTypes__default["default"].bool,
+  innerIndex: PropTypes__default["default"].number,
   checkedColor: PropTypes__default["default"].string,
   unCheckedColor: PropTypes__default["default"].string,
   ignoreDisabledForChecked: PropTypes__default["default"].bool
@@ -449,9 +461,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["default"].createElement("td", {
     style: {
       width: 'auto',
@@ -464,7 +488,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') {
@@ -479,10 +503,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)) {
@@ -504,10 +527,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
           }) : _ => _,
@@ -523,20 +543,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["default"].createElement("div", {
+  }, Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default["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["default"].createElement(SingleCheckbox, {
+  }, item.status === 'close' ? item.closeArrow : item.openArrow), Object.prototype.hasOwnProperty.call(item, 'checkBox') && /*#__PURE__*/React__default["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
@@ -560,6 +583,7 @@ const TD = ({
       position: 'absolute',
       display: item.dotsStatus === 'deActive' ? 'none' : 'block',
       top: '0px',
+      zIndex: 100,
       right: 'calc(100% + 6px)',
       width: '223px',
       height: 'auto',
@@ -570,21 +594,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["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["default"].createElement("span", {
       style: {
         marginRight: '10px'
       }
-    }, item.icon), /*#__PURE__*/React__default["default"].createElement("span", {
+    }, optionItem.icon), /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
         width: 'calc(100% - 36px)',
         textAlign: 'left',
@@ -592,23 +623,33 @@ const TD = ({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
       },
-      title: item.content
-    }, item.content));
-  }))) : ''), item.contentList && /*#__PURE__*/React__default["default"].createElement("div", {
+      title: optionItem.content
+    }, optionItem.content));
+  }))) : ''), Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default["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["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);
   })))) : '');
 };
 
@@ -691,6 +732,30 @@ const Table = ({
   const [disableArr, setDisableArr] = React.useState([]);
   const [checkedArray, setCheckedArray] = React.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 !== '') {
@@ -716,19 +781,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 = [];
@@ -809,7 +877,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;
@@ -854,12 +922,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,
@@ -870,6 +943,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 => {
@@ -1015,6 +1100,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);
+  };
   React.useEffect(() => {
     let checkedItems = [];
     const disabledArray = [];
@@ -1022,7 +1153,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')) {
@@ -1037,12 +1168,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')) {
@@ -1057,8 +1188,10 @@ const Table = ({
             }
           }
         });
+        return item;
       });
-      setBody(() => dataBody);
+      checkedItems = handleSetCheckboxArray(insert);
+      setBody(() => insert);
     }
     setDisableArr(disabledArray);
     setCheckedArray(() => checkedItems);
@@ -1079,7 +1212,8 @@ const Table = ({
     style: {
       width: '100%',
       borderCollapse: 'collapse'
-    }
+    },
+    onClick: handleTableClick
   }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
@@ -1120,6 +1254,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,
@@ -4296,6 +4432,9 @@ const Textarea = ({
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+    if (value === '') {
+      setError('');
+    }
     setInnerValue(value);
   }, [value, onChange]);
   React.useEffect(() => {

package/package.json

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

package/src/components/singleCheckbox/Checkbox.js

@@ -7,9 +7,11 @@ import ReactCheckboxChecked from '../icon/CheckboxChecked'
 
 const Checkbox = ({
     data,
+    index,
     styles,
     checked,
     disabled,
+    innerIndex,
     checkedColor,
     handleChecked,
     unCheckedColor,
@@ -21,7 +23,16 @@ const Checkbox = ({
     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(() => {

package/src/components/singleCheckbox/index.js

@@ -5,9 +5,11 @@ import Checkbox from './Checkbox'
 
 export const SingleCheckbox = ({
     data,
+    index,
     styles,
     checked,
     disabled,
+    innerIndex,
     checkedColor,
     handleChecked,
     unCheckedColor,
@@ -30,10 +32,12 @@ export const SingleCheckbox = ({
 
     return (
         <Checkbox
+            index={index}
             styles={styles}
             data={innerData}
             checked={checked}
             disabled={disabled}
+            innerIndex={innerIndex}
             checkedColor={checkedColor}
             handleChecked={handleChecked}
             unCheckedColor={unCheckedColor}
@@ -45,8 +49,10 @@ export 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,