@xaypay/tui 0.0.122 → 0.0.123

package/dist/index.es.js

@@ -2492,13 +2492,14 @@ const Modal = ({
   outsideClose,
   headerWeight,
   headerHeight,
-  imageMaxWidth,
+  // imageMaxWidth,
   justifyContent,
-  imageWrapWidth,
+  // imageWrapWidth,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  closeAreaBackgroundColor
 }) => {
   const [select, setSelect] = useState(0);
   const [isHover, setIsHover] = useState(false);
@@ -2668,7 +2669,7 @@ const Modal = ({
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
       height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
-      backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
+      background: closeAreaBackgroundColor ? closeAreaBackgroundColor : configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default.createElement("button", {
     onClick: handleCloseModal,
@@ -2687,7 +2688,6 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
       height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -2700,13 +2700,12 @@ const Modal = ({
         }, /*#__PURE__*/React__default.createElement("img", {
           style: {
             display: 'block',
-            objectFit: 'cover',
-            objectPosition: 'center',
+            objectFit: 'contain',
             margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
             borderRadius: radius ? radius : configStyles.MODAL.radius,
             width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
-            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
-            maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+            // maxWidth: '100%'
           },
           src: item.url
         }), isHover && showZoomIcon ? /*#__PURE__*/React__default.createElement("div", {
@@ -2794,7 +2793,8 @@ Modal.propTypes = {
   backgroundColor: PropTypes.string,
   grayDecorHeight: PropTypes.string,
   imageWrapHeight: PropTypes.string,
-  layerBackgroundColor: PropTypes.string
+  layerBackgroundColor: PropTypes.string,
+  closeAreaBackgroundColor: PropTypes.string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -3011,7 +3011,7 @@ const Input = ({
     }
     if (minNumSize && minNumSize < 0) {
       setInnerMinNumSize(0);
-      alert('minNumSize prop can\'t be less then 0');
+      alert("minNumSize prop can't be less then 0");
     } else if (minNumSize && minNumSize >= 0) {
       setInnerMinNumSize(minNumSize);
     }
@@ -3034,9 +3034,9 @@ const Input = ({
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
           !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
         }
-        setInnerValue(() => newValue);
       }
     }
+    setInnerValue(() => newValue);
   }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps

package/dist/index.js

@@ -2522,13 +2522,14 @@ const Modal = ({
   outsideClose,
   headerWeight,
   headerHeight,
-  imageMaxWidth,
+  // imageMaxWidth,
   justifyContent,
-  imageWrapWidth,
+  // imageWrapWidth,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  closeAreaBackgroundColor
 }) => {
   const [select, setSelect] = React.useState(0);
   const [isHover, setIsHover] = React.useState(false);
@@ -2698,7 +2699,7 @@ const Modal = ({
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
       height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
-      backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
+      background: closeAreaBackgroundColor ? closeAreaBackgroundColor : configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: handleCloseModal,
@@ -2717,7 +2718,6 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
       height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -2730,13 +2730,12 @@ const Modal = ({
         }, /*#__PURE__*/React__default["default"].createElement("img", {
           style: {
             display: 'block',
-            objectFit: 'cover',
-            objectPosition: 'center',
+            objectFit: 'contain',
             margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
             borderRadius: radius ? radius : configStyles.MODAL.radius,
             width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
-            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
-            maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+            // maxWidth: '100%'
           },
           src: item.url
         }), isHover && showZoomIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2824,7 +2823,8 @@ Modal.propTypes = {
   backgroundColor: PropTypes__default["default"].string,
   grayDecorHeight: PropTypes__default["default"].string,
   imageWrapHeight: PropTypes__default["default"].string,
-  layerBackgroundColor: PropTypes__default["default"].string
+  layerBackgroundColor: PropTypes__default["default"].string,
+  closeAreaBackgroundColor: PropTypes__default["default"].string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -3041,7 +3041,7 @@ const Input = ({
     }
     if (minNumSize && minNumSize < 0) {
       setInnerMinNumSize(0);
-      alert('minNumSize prop can\'t be less then 0');
+      alert("minNumSize prop can't be less then 0");
     } else if (minNumSize && minNumSize >= 0) {
       setInnerMinNumSize(minNumSize);
     }
@@ -3064,9 +3064,9 @@ const Input = ({
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
           !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
         }
-        setInnerValue(() => newValue);
       }
     }
+    setInnerValue(() => newValue);
   }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps

package/package.json

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

package/tui.config.js

@@ -413,8 +413,8 @@ module.exports = {
         imageWidth: '', // for modal image width on images mode
         headerHeight: '30px', // for modal header height
         grayDecorHeight: '80px', // for modal top decoration when show slider
-        width: 'fit-content', // for modal width
-        height: 'fit-content', // for modal width
+        width: '', // for modal width
+        height: '', // for modal width
         headerColor: '#00236a', // for modal header color
         backgroundColor: 'white', // for modal background color
         padding: '20px 20px 20px', // for modal padding
@@ -424,8 +424,9 @@ module.exports = {
         borderColor: 'transparent', // for modal border color
         imageMargin: '0px', // for image margin
         imageMaxWidth: '100%', // for image max width
-        imageWrapHeight: '80vh', // for image wrap
+        imageWrapHeight: '100%', // for image wrap
         imageWrapWidth: '100%', // for image wrap
+        closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
     },
     // default properties for <Checkbox /> component
     CHECKBOX: {