@xaypay/tui 0.1.0 → 0.1.2

package/dist/index.es.js

@@ -1596,14 +1596,15 @@ const TD = ({
       optionIndex
     });
   };
-  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
+  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex, contentListInnerItem) => {
     handleContentListClick(e, {
       item,
       index,
       innerIndex,
       listContentId,
       listContent,
-      listContentIndex
+      listContentIndex,
+      contentListInnerItem
     });
   };
   return /*#__PURE__*/React__default.createElement("td", {
@@ -1763,20 +1764,46 @@ const TD = ({
       height: item.status === 'close' ? '0px' : 'auto'
     }
   }, item.contentList.map((innerItem, innerItemIndex) => {
-    return /*#__PURE__*/React__default.createElement("p", {
-      key: `${innerItem}_${innerItemIndex}`,
-      className: styles$9['list-text'],
-      style: {
-        maxWidth: '100%',
-        color: openListColor,
-        textAlign: tBodyTextAlign,
-        fontSize: openListFontSize,
-        fontStyle: openListFontStyle,
-        fontWeight: openListFontWeight,
-        fontFamily: openListFontFamily
-      },
-      onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
-    }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    if (Array.isArray(innerItem.content)) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        key: `__${innerItemIndex}__`,
+        style: {
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      }, innerItem.content.map((contInnerItem, contInnerIndex) => {
+        return /*#__PURE__*/React__default.createElement("p", {
+          key: `${contInnerItem}_${contInnerIndex}`,
+          className: styles$9['list-text'],
+          style: {
+            maxWidth: '100%',
+            color: openListColor,
+            textAlign: tBodyTextAlign,
+            fontSize: openListFontSize,
+            fontStyle: openListFontStyle,
+            fontWeight: openListFontWeight,
+            fontFamily: openListFontFamily,
+            marginRight: contInnerIndex === innerItem.content.length - 1 ? '0px' : '10px'
+          },
+          onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex, contInnerItem)
+        }, contInnerItem.content === 0 ? contInnerItem.content.toString() : contInnerItem.content ? contInnerItem.content : '');
+      }));
+    } else {
+      return /*#__PURE__*/React__default.createElement("p", {
+        key: `${innerItem}_${innerItemIndex}`,
+        className: styles$9['list-text'],
+        style: {
+          maxWidth: '100%',
+          color: openListColor,
+          textAlign: tBodyTextAlign,
+          fontSize: openListFontSize,
+          fontStyle: openListFontStyle,
+          fontWeight: openListFontWeight,
+          fontFamily: openListFontFamily
+        },
+        onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
+      }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    }
   }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default.createElement("div", {
     id: item.id,
     style: {
@@ -2256,7 +2283,8 @@ const Table = ({
       listItemId: data.listContentId,
       listItemContent: data.listContent,
       itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
-      listItemInnerIndex: data.listContentIndex
+      listItemInnerIndex: data.listContentIndex,
+      contentListInnerItem: data.contentListInnerItem
     };
     getData(listData);
   };
@@ -2727,8 +2755,8 @@ const Modal = ({
       height: height ?? merge.MODAL.height,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
       borderRadius: radius ?? merge.MODAL.radius,
-      maxWidth: mMaxWidth ?? merge.MODAL.mMaxWidth,
-      maxHeight: mMaxHeight ?? merge.MODAL.mMaxHeight,
+      maxWidth: mMaxWidth ?? merge.MODAL.maxWidth,
+      maxHeight: mMaxHeight ?? merge.MODAL.maxHeight,
       minWidth: type === 'content' ? minWidth ?? merge.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? merge.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? merge.MODAL.minHeight : ''
@@ -2993,7 +3021,6 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
-  telErrorMessage,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -3029,14 +3056,10 @@ const Input = ({
   const handleCheckTypeTel = (val, prevVal) => {
     if (type === 'tel') {
       if (!phoneNumberRegex.test(val)) {
-        if (val === '') {
-          setInnerErrorMessage('');
-        } else {
-          telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(merge.INPUT.error.telMessage);
+        if (val !== '') {
           val = prevVal;
         }
       } else {
-        setInnerErrorMessage('');
         if (val.length > 8) {
           val = val.substr(0, 8);
         }
@@ -3168,7 +3191,7 @@ const Input = ({
       }
     }
     setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -3340,7 +3363,6 @@ Input.propTypes = {
   boxShadowHover: PropTypes.string,
   errorClassName: PropTypes.string,
   labelFontFamily: PropTypes.string,
-  telErrorMessage: PropTypes.string,
   backgroundColor: PropTypes.string,
   phoneAlignItems: PropTypes.string,
   errorLineHeight: PropTypes.string,
@@ -4824,22 +4846,21 @@ const Textarea = ({
     }
   };
   useEffect(() => {
-    if (value === undefined) {
-      alert('Please add value prop on Textarea component');
-    }
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+  }, [onChange]);
+  useEffect(() => {
+    if (value === undefined) {
+      alert('Please add value prop on Textarea component');
+    }
     if (errorMessage) {
-      setError(errorMessage);
+      value === '' ? setError(errorMessage) : setError('');
     } else {
       setError('');
     }
-    if (value === '') {
-      setError('');
-    }
     setInnerValue(value);
-  }, [value, onChange, errorMessage]);
+  }, [value, errorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: width ?? merge.TEXTAREA.width
@@ -4911,7 +4932,7 @@ const Textarea = ({
   }, /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'inline-block',
-      color: errorColor ?? merge.TEXTAREA.error.font.color,
+      color: errorColor ?? merge.TEXTAREA.error.color,
       fontSize: errorSize ?? merge.TEXTAREA.error.font.size,
       fontStyle: errorStyle ?? merge.TEXTAREA.error.font.style,
       fontWeight: errorWeight ?? merge.TEXTAREA.error.font.weight,

package/dist/index.js

@@ -1626,14 +1626,15 @@ const TD = ({
       optionIndex
     });
   };
-  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
+  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex, contentListInnerItem) => {
     handleContentListClick(e, {
       item,
       index,
       innerIndex,
       listContentId,
       listContent,
-      listContentIndex
+      listContentIndex,
+      contentListInnerItem
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("td", {
@@ -1793,20 +1794,46 @@ const TD = ({
       height: item.status === 'close' ? '0px' : 'auto'
     }
   }, item.contentList.map((innerItem, innerItemIndex) => {
-    return /*#__PURE__*/React__default["default"].createElement("p", {
-      key: `${innerItem}_${innerItemIndex}`,
-      className: styles$9['list-text'],
-      style: {
-        maxWidth: '100%',
-        color: openListColor,
-        textAlign: tBodyTextAlign,
-        fontSize: openListFontSize,
-        fontStyle: openListFontStyle,
-        fontWeight: openListFontWeight,
-        fontFamily: openListFontFamily
-      },
-      onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
-    }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    if (Array.isArray(innerItem.content)) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: `__${innerItemIndex}__`,
+        style: {
+          display: 'flex',
+          justifyContent: 'center'
+        }
+      }, innerItem.content.map((contInnerItem, contInnerIndex) => {
+        return /*#__PURE__*/React__default["default"].createElement("p", {
+          key: `${contInnerItem}_${contInnerIndex}`,
+          className: styles$9['list-text'],
+          style: {
+            maxWidth: '100%',
+            color: openListColor,
+            textAlign: tBodyTextAlign,
+            fontSize: openListFontSize,
+            fontStyle: openListFontStyle,
+            fontWeight: openListFontWeight,
+            fontFamily: openListFontFamily,
+            marginRight: contInnerIndex === innerItem.content.length - 1 ? '0px' : '10px'
+          },
+          onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex, contInnerItem)
+        }, contInnerItem.content === 0 ? contInnerItem.content.toString() : contInnerItem.content ? contInnerItem.content : '');
+      }));
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
+        key: `${innerItem}_${innerItemIndex}`,
+        className: styles$9['list-text'],
+        style: {
+          maxWidth: '100%',
+          color: openListColor,
+          textAlign: tBodyTextAlign,
+          fontSize: openListFontSize,
+          fontStyle: openListFontStyle,
+          fontWeight: openListFontWeight,
+          fontFamily: openListFontFamily
+        },
+        onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
+      }, innerItem.content === 0 ? innerItem.content.toString() : innerItem.content ? innerItem.content : '');
+    }
   }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
@@ -2286,7 +2313,8 @@ const Table = ({
       listItemId: data.listContentId,
       listItemContent: data.listContent,
       itemIndex: removeItemIndex !== undefined && removeItemIndex < data.innerIndex ? data.innerIndex - 1 : data.innerIndex,
-      listItemInnerIndex: data.listContentIndex
+      listItemInnerIndex: data.listContentIndex,
+      contentListInnerItem: data.contentListInnerItem
     };
     getData(listData);
   };
@@ -2757,8 +2785,8 @@ const Modal = ({
       height: height ?? merge.MODAL.height,
       gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
       borderRadius: radius ?? merge.MODAL.radius,
-      maxWidth: mMaxWidth ?? merge.MODAL.mMaxWidth,
-      maxHeight: mMaxHeight ?? merge.MODAL.mMaxHeight,
+      maxWidth: mMaxWidth ?? merge.MODAL.maxWidth,
+      maxHeight: mMaxHeight ?? merge.MODAL.maxHeight,
       minWidth: type === 'content' ? minWidth ?? merge.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? merge.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? merge.MODAL.minHeight : ''
@@ -3023,7 +3051,6 @@ const Input = ({
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
-  telErrorMessage,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
@@ -3059,14 +3086,10 @@ const Input = ({
   const handleCheckTypeTel = (val, prevVal) => {
     if (type === 'tel') {
       if (!phoneNumberRegex.test(val)) {
-        if (val === '') {
-          setInnerErrorMessage('');
-        } else {
-          telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(merge.INPUT.error.telMessage);
+        if (val !== '') {
           val = prevVal;
         }
       } else {
-        setInnerErrorMessage('');
         if (val.length > 8) {
           val = val.substr(0, 8);
         }
@@ -3198,7 +3221,7 @@ const Input = ({
       }
     }
     setInnerValue(() => newValue);
-  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -3370,7 +3393,6 @@ Input.propTypes = {
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
-  telErrorMessage: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
@@ -4854,22 +4876,21 @@ const Textarea = ({
     }
   };
   React.useEffect(() => {
-    if (value === undefined) {
-      alert('Please add value prop on Textarea component');
-    }
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
+  }, [onChange]);
+  React.useEffect(() => {
+    if (value === undefined) {
+      alert('Please add value prop on Textarea component');
+    }
     if (errorMessage) {
-      setError(errorMessage);
+      value === '' ? setError(errorMessage) : setError('');
     } else {
       setError('');
     }
-    if (value === '') {
-      setError('');
-    }
     setInnerValue(value);
-  }, [value, onChange, errorMessage]);
+  }, [value, errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: width ?? merge.TEXTAREA.width
@@ -4941,7 +4962,7 @@ const Textarea = ({
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
-      color: errorColor ?? merge.TEXTAREA.error.font.color,
+      color: errorColor ?? merge.TEXTAREA.error.color,
       fontSize: errorSize ?? merge.TEXTAREA.error.font.size,
       fontStyle: errorStyle ?? merge.TEXTAREA.error.font.style,
       fontWeight: errorWeight ?? merge.TEXTAREA.error.font.weight,

package/package.json

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

package/tui.config.js

@@ -113,7 +113,6 @@ export default {
             marginTop: '10px',
             animation: false,
             transform: 'scale3d(0,0,0)',
-            telMessage: '',
             lineHeight: '19px',
             animationDuration: '240ms',