@xaypay/tui 0.0.83 → 0.0.84

package/dist/index.es.js

@@ -657,13 +657,14 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
   TEXT: "text",
+  NUMBER: 'number',
   PASSWORD: "password"
 };
 const P = styled.span`
@@ -697,6 +698,8 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  minNumSize,
+  maxNumSize,
   labelColor,
   errorColor,
   borderRight,
@@ -731,7 +734,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames(className ? className : configStyles.INPUT.className);
+  const classProps = classnames(className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '');
   const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -773,13 +776,33 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+    if (type === 'number') {
+      if (minNumSize && currentValue < minNumSize) {
+        setInnerValue(minNumSize);
+        if (change) {
+          change(minNumSize);
+        }
+      }
+      if (maxNumSize && currentValue > maxNumSize) {
+        setInnerValue(maxNumSize);
+        if (change) {
+          change(maxNumSize);
+        }
+      }
+      if (currentValue === '') {
+        setInnerValue('');
+        if (change) {
+          change('');
+        }
+      }
+    }
+    if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
       setInnerValue(currentValue.substr(0, maxLength));
       if (change) {
         change(currentValue.substr(0, maxLength));
       }
     }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       if (change) {
         change(currentValue);
@@ -892,6 +915,8 @@ const Input = ({
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    min: type === 'number' && minNumSize ? minNumSize : '',
+    max: type === 'number' && maxNumSize ? maxNumSize : '',
     style: {
       border: 'none',
       outline: 'none',
@@ -960,6 +985,8 @@ Input.propTypes = {
   errorLeft: PropTypes.string,
   labelSize: PropTypes.string,
   maxLength: PropTypes.number,
+  minNumSize: PropTypes.number,
+  maxNumSize: PropTypes.number,
   errorColor: PropTypes.string,
   labelColor: PropTypes.string,
   borderRight: PropTypes.string,

package/dist/index.js

@@ -687,13 +687,14 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
+var css_248z$b = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$b);
 
 const InputTypes = {
   TEL: 'tel',
   TEXT: "text",
+  NUMBER: 'number',
   PASSWORD: "password"
 };
 const P = styled__default["default"].span`
@@ -727,6 +728,8 @@ const Input = ({
   errorSize,
   labelSize,
   maxLength,
+  minNumSize,
+  maxNumSize,
   labelColor,
   errorColor,
   borderRight,
@@ -761,7 +764,7 @@ const Input = ({
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
-  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
+  const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '');
   const errorShow = styled.keyframes`
         100% {
             bottom: '-20px';
@@ -803,13 +806,33 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+    if (type === 'number') {
+      if (minNumSize && currentValue < minNumSize) {
+        setInnerValue(minNumSize);
+        if (change) {
+          change(minNumSize);
+        }
+      }
+      if (maxNumSize && currentValue > maxNumSize) {
+        setInnerValue(maxNumSize);
+        if (change) {
+          change(maxNumSize);
+        }
+      }
+      if (currentValue === '') {
+        setInnerValue('');
+        if (change) {
+          change('');
+        }
+      }
+    }
+    if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
       setInnerValue(currentValue.substr(0, maxLength));
       if (change) {
         change(currentValue.substr(0, maxLength));
       }
     }
-    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+    if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
       !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
       if (change) {
         change(currentValue);
@@ -922,6 +945,8 @@ const Input = ({
     name: name ? name : `tui_${random}_tui`,
     placeholder: placeholder ? placeholder : '',
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    min: type === 'number' && minNumSize ? minNumSize : '',
+    max: type === 'number' && maxNumSize ? maxNumSize : '',
     style: {
       border: 'none',
       outline: 'none',
@@ -990,6 +1015,8 @@ Input.propTypes = {
   errorLeft: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
+  minNumSize: PropTypes__default["default"].number,
+  maxNumSize: PropTypes__default["default"].number,
   errorColor: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   borderRight: PropTypes__default["default"].string,

package/package.json

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

package/src/components/input/index.js

@@ -9,6 +9,7 @@ import styles from "./input.module.css";
 export const InputTypes = {
     TEL: 'tel',
     TEXT: "text",
+    NUMBER: 'number',
     PASSWORD: "password",
 };
 
@@ -44,6 +45,8 @@ export const Input = ({
     errorSize,
     labelSize,
     maxLength,
+    minNumSize,
+    maxNumSize,
     labelColor,
     errorColor,
     borderRight,
@@ -80,7 +83,8 @@ export const Input = ({
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
     const classProps = classnames(
-        className ? className : configStyles.INPUT.className
+        className ? className : configStyles.INPUT.className,
+        type === 'number' ? styles['inp-num'] : ''
     );
 
     const errorShow = keyframes`
@@ -128,16 +132,37 @@ export const Input = ({
                     }
                 }
             }
-        } 
+        }
+
+        if (type === 'number') {
+            if (minNumSize && currentValue < minNumSize) {
+                setInnerValue(minNumSize);
+                if (change) {
+                    change(minNumSize);
+                }
+            }
+            if (maxNumSize && currentValue > maxNumSize) {
+                setInnerValue(maxNumSize);
+                if (change) {
+                    change(maxNumSize);
+                }
+            }
+            if (currentValue === '') {
+                setInnerValue('');
+                if (change) {
+                    change('');
+                }
+            }
+        }
 
-        if (maxLength && currentValue.length > maxLength && type !== 'tel') {
+        if (maxLength && currentValue.length > maxLength && type !== 'tel' && type !== 'number') {
             setInnerValue(currentValue.substr(0, maxLength));
             if (change) {
                 change(currentValue.substr(0, maxLength));
             }
         }
 
-        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
+        if (regexp && regexpErrorMessage && !maxLength && type !== 'tel' && type !== 'number') {
             !regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
             if (change) {
                 change(currentValue);
@@ -280,6 +305,8 @@ export const Input = ({
                     name={name ? name : `tui_${random}_tui`}
                     placeholder={placeholder ? placeholder : ''}
                     autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
+                    min={type === 'number' && minNumSize ? minNumSize: ''}
+                    max={type === 'number' && maxNumSize ? maxNumSize : ''}
                     style={{
                         border: 'none',
                         outline: 'none',
@@ -368,6 +395,8 @@ Input.propTypes = {
     errorLeft: PropTypes.string,
     labelSize: PropTypes.string,
     maxLength: PropTypes.number,
+    minNumSize: PropTypes.number,
+    maxNumSize: PropTypes.number,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,
     borderRight: PropTypes.string,

package/src/components/input/input.module.css

@@ -20,6 +20,18 @@ input:-webkit-autofill:active  {
     animation-fill-mode: forwards;
 }
 
+/* Works for Chrome, Safari, Edge, Opera */
+.inp-num::-webkit-outer-spin-button,
+.inp-num::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+.inp-num[type="number"] {
+  -moz-appearance: textfield;
+}
+
 @keyframes error-show {
     100% {
         bottom: -20px;

package/src/components/input/input.stories.js

@@ -22,6 +22,8 @@ const Template = (args) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  type: InputTypes.TEXT
+  type: InputTypes.TEXT,
+  minNumSize: 1,
+  maxNumSize: 8.8
 };
 

package/src/components/table/table.stories.js

@@ -294,18 +294,27 @@ const bodyData = [
                 'text for => test',
             ]
         },
-        create: {
-            content: '27.05.2022'
-        },
+        create: [
+            [
+                {
+                    content: '21'
+                }
+            ],
+            [
+                {
+                    content: '13'
+                }
+            ]
+        ],
         actions: [
             [
                 {
-                    id: 20037,
+                    id: 21031,
                     type: 'attach',
                     content: <ReactSVGAttach />
                 },
                 {
-                    id: 20037,
+                    id: 21031,
                     type: 'plus',
                     content: <ReactSVGPlus />
                 }

package/src/components/table/td.js

@@ -58,27 +58,34 @@ const TD = ({
                                 </span>
                             )
                         } else if (newItem && Array.isArray(newItem)) {
-                            const x = item[newIndex].map((iT, iN) => {
-                                // console.log(iT, ' - - - ->>>>>>>>>>>>>>>>>>>>>>>');
-                                // return <span key={`${iT.id}_${iN}`}>
-                                //     {iT}
-                                // </span>;
-                                return <span
+                            return (
+                                <span
                                     style={{
-                                        width: '32px',
-                                        height: '32px',
-                                        marginRight: '10px'
+                                        display: 'inline-block',
+                                        marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
+                                        borderRight: newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none'
                                     }}
-                                    id={iT.id}
-                                    type={iT.type}
-                                    className={styles['td-span']}
-                                    key={`${iT.id}_${iN}`}
-                                    onClick={handleBodyActionClick}
                                 >
-                                    { iT.content }
+                                    {
+                                        item[newIndex].map((iT, iN) => {
+                                            return <span
+                                                style={{
+                                                    width: '32px',
+                                                    height: '32px',
+                                                    marginRight: '10px',
+                                                }}
+                                                id={iT.id ? iT.id : ''}
+                                                type={iT.type ? iT.type : ''}
+                                                className={styles['td-span']}
+                                                onClick={handleBodyActionClick}
+                                                key={`${iT.id || iT.content}_${iN}`}
+                                            >
+                                                { iT.content }
+                                            </span>
+                                        })
+                                    }
                                 </span>
-                            });
-                            console.log(x, 'x');
+                            );
                         } else {
                             return <span
                                 key={`${newItem}_${newIndex}`}