@xaypay/tui 0.1.3 → 0.1.4

package/dist/index.es.js

@@ -38,7 +38,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -958,7 +958,7 @@ const File = ({
       setSingleFile(null);
     }
     if (multiple && !removeFile) {
-      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+      alert('Please add removeFile prop on File component, it is a require in multiple mode');
     }
     if (maxCHoosenLength) {
       if (typeof maxCHoosenLength !== 'number') {
@@ -974,7 +974,7 @@ const File = ({
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   useEffect(() => {
     if (deleteComponent && !removeComponent) {
-      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+      alert('Please add removeComponent prop on File component it is require when deleteComponent prop is true');
     }
   }, [deleteComponent]);
   useEffect(() => {
@@ -3010,11 +3010,11 @@ const TelInput = ({
   type,
   value,
   radius,
-  inputChange,
   isHover,
   disabled,
   inpStyles,
   errorColor,
+  inputChange,
   phoneDisplay,
   inpAttributes,
   phoneAlignItems,
@@ -3093,7 +3093,7 @@ const TextInput = ({
     }
   };
   useEffect(() => {
-    let newValue = value;
+    let newValue = '';
     if (value !== undefined && value !== null) {
       newValue = value;
       if (maxLength && value.length > maxLength) {
@@ -3174,12 +3174,12 @@ const NumberInput = ({
   value,
   float,
   radius,
-  inputChange,
   maxLength,
   inpStyles,
-  inpAttributes,
   minNumSize,
-  maxNumSize
+  maxNumSize,
+  inputChange,
+  inpAttributes
 }) => {
   const [innerValue, setInnerValue] = useState('');
   const [innerMinNumSize, setInnerMinNumSize] = useState(0);
@@ -3244,7 +3244,7 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled.span`
-    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
+    animation: ${true};
 `;
 const Input = ({
   type,
@@ -3266,7 +3266,6 @@ const Input = ({
   leftIcon,
   required,
   disabled,
-  transform,
   iconWidth,
   rightIcon,
   className,
@@ -3296,7 +3295,6 @@ const Input = ({
   errorMarginTop,
   boxShadowHover,
   errorClassName,
-  errorAnimation,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
@@ -3309,7 +3307,6 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  errorAnimationDuration,
   telBorderRightColorHover
 }) => {
   const [show, setShow] = useState(false);
@@ -3328,12 +3325,12 @@ const Input = ({
     color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
   };
+  const uuid = v4();
   const inpAttributes = {
     placeholder: placeholder ?? '',
-    iName: name ? name : `tui_${random}_tui`,
+    iName: name ? name : `tui_${uuid}_tui`,
     autoComplete: autoComplete ?? merge.INPUT.autoComplete
   };
-  const random = Math.floor(Math.random() * 1000 + 1);
   const classProps = classnames(className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = keyframes`
         100% {
@@ -3346,7 +3343,7 @@ const Input = ({
         }
     `;
   const animation = () => css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
+        ${errorShow} 240ms forwards
     `;
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -3435,9 +3432,10 @@ const Input = ({
     show: show,
     type: type,
     value: value,
-    inputChange: change,
     isHover: isHover,
     disabled: disabled,
+    inputChange: change,
+    maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
@@ -3445,6 +3443,7 @@ const Input = ({
     value: value,
     inputChange: change,
     inpStyles: inpStyles,
+    maxLength: maxLength,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
   }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
@@ -3463,7 +3462,6 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
-    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
@@ -3478,7 +3476,7 @@ const Input = ({
       zIndex: errorZindex ?? merge.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
-      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
+      transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
@@ -3500,7 +3498,6 @@ Input.propTypes = {
   padding: PropTypes.string,
   tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
-  transform: PropTypes.string,
   className: PropTypes.string,
   iconWidth: PropTypes.string,
   boxSizing: PropTypes.string,
@@ -3525,7 +3522,6 @@ Input.propTypes = {
   errorMessage: PropTypes.string,
   phoneDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
-  errorAnimation: PropTypes.bool,
   labelDisplay: PropTypes.string,
   errorPosition: PropTypes.string,
   errorMarginTop: PropTypes.string,
@@ -3544,7 +3540,6 @@ Input.propTypes = {
   telBorderRightColor: PropTypes.string,
   phoneJustifyContent: PropTypes.string,
   backgroundDisableColor: PropTypes.string,
-  errorAnimationDuration: PropTypes.string,
   telBorderRightColorHover: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),

package/dist/index.js

@@ -68,7 +68,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -988,7 +988,7 @@ const File = ({
       setSingleFile(null);
     }
     if (multiple && !removeFile) {
-      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+      alert('Please add removeFile prop on File component, it is a require in multiple mode');
     }
     if (maxCHoosenLength) {
       if (typeof maxCHoosenLength !== 'number') {
@@ -1004,7 +1004,7 @@ const File = ({
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   React.useEffect(() => {
     if (deleteComponent && !removeComponent) {
-      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+      alert('Please add removeComponent prop on File component it is require when deleteComponent prop is true');
     }
   }, [deleteComponent]);
   React.useEffect(() => {
@@ -3040,11 +3040,11 @@ const TelInput = ({
   type,
   value,
   radius,
-  inputChange,
   isHover,
   disabled,
   inpStyles,
   errorColor,
+  inputChange,
   phoneDisplay,
   inpAttributes,
   phoneAlignItems,
@@ -3123,7 +3123,7 @@ const TextInput = ({
     }
   };
   React.useEffect(() => {
-    let newValue = value;
+    let newValue = '';
     if (value !== undefined && value !== null) {
       newValue = value;
       if (maxLength && value.length > maxLength) {
@@ -3204,12 +3204,12 @@ const NumberInput = ({
   value,
   float,
   radius,
-  inputChange,
   maxLength,
   inpStyles,
-  inpAttributes,
   minNumSize,
-  maxNumSize
+  maxNumSize,
+  inputChange,
+  inpAttributes
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
   const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
@@ -3274,7 +3274,7 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled__default["default"].span`
-    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
+    animation: ${true};
 `;
 const Input = ({
   type,
@@ -3296,7 +3296,6 @@ const Input = ({
   leftIcon,
   required,
   disabled,
-  transform,
   iconWidth,
   rightIcon,
   className,
@@ -3326,7 +3325,6 @@ const Input = ({
   errorMarginTop,
   boxShadowHover,
   errorClassName,
-  errorAnimation,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
@@ -3339,7 +3337,6 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  errorAnimationDuration,
   telBorderRightColorHover
 }) => {
   const [show, setShow] = React.useState(false);
@@ -3358,12 +3355,12 @@ const Input = ({
     color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
   };
+  const uuid = v4();
   const inpAttributes = {
     placeholder: placeholder ?? '',
-    iName: name ? name : `tui_${random}_tui`,
+    iName: name ? name : `tui_${uuid}_tui`,
     autoComplete: autoComplete ?? merge.INPUT.autoComplete
   };
-  const random = Math.floor(Math.random() * 1000 + 1);
   const classProps = classnames__default["default"](className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = styled.keyframes`
         100% {
@@ -3376,7 +3373,7 @@ const Input = ({
         }
     `;
   const animation = () => styled.css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
+        ${errorShow} 240ms forwards
     `;
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -3465,9 +3462,10 @@ const Input = ({
     show: show,
     type: type,
     value: value,
-    inputChange: change,
     isHover: isHover,
     disabled: disabled,
+    inputChange: change,
+    maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
@@ -3475,6 +3473,7 @@ const Input = ({
     value: value,
     inputChange: change,
     inpStyles: inpStyles,
+    maxLength: maxLength,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
   }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3493,7 +3492,6 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
-    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
@@ -3508,7 +3506,7 @@ const Input = ({
       zIndex: errorZindex ?? merge.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
-      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
+      transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
@@ -3530,7 +3528,6 @@ Input.propTypes = {
   padding: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
-  transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
@@ -3555,7 +3552,6 @@ Input.propTypes = {
   errorMessage: PropTypes__default["default"].string,
   phoneDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
-  errorAnimation: PropTypes__default["default"].bool,
   labelDisplay: PropTypes__default["default"].string,
   errorPosition: PropTypes__default["default"].string,
   errorMarginTop: PropTypes__default["default"].string,
@@ -3574,7 +3570,6 @@ Input.propTypes = {
   telBorderRightColor: PropTypes__default["default"].string,
   phoneJustifyContent: PropTypes__default["default"].string,
   backgroundDisableColor: PropTypes__default["default"].string,
-  errorAnimationDuration: PropTypes__default["default"].string,
   telBorderRightColorHover: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),

package/package.json

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

package/tui.config.js

@@ -111,10 +111,7 @@ export default {
             zIndex: '1',
             className: '',
             marginTop: '10px',
-            animation: false,
-            transform: 'scale3d(0,0,0)',
             lineHeight: '19px',
-            animationDuration: '240ms',
 
             font: {...fontObject}
         },