@xaypay/tui 0.0.80 → 0.0.82

package/src/components/icon/Upload.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const SvgUpload = ({ title, titleId, ...props }) => (
+const SvgUpload = ({ title, titleId, fillColor, ...props }) => (
   <svg
     width="51"
     height="35"
@@ -18,7 +18,7 @@ const SvgUpload = ({ title, titleId, ...props }) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M41.822 17.245c-4.864 0-8.822 3.982-8.822 8.878C33 31.018 36.958 35 41.822 35c4.864 0 8.822-3.982 8.822-8.877 0-4.896-3.959-8.878-8.822-8.878Zm-.536 13.005v-6.689l-3.067 3.22a.69.69 0 0 1-1.01 0 .777.777 0 0 1 0-1.06l4.286-4.5A.71.71 0 0 1 42 21a.684.684 0 0 1 .505.22l4.286 4.5a.777.777 0 0 1 0 1.06.69.69 0 0 1-1.01 0l-3.067-3.22v6.69c0 .414-.32.75-.714.75-.395 0-.714-.336-.714-.75Z"
-      fill="#0DA574"
+      fill={fillColor ? fillColor : '#0DA574'}
     />
   </svg>
 );

package/src/components/input/index.js

@@ -12,7 +12,7 @@ export const InputTypes = {
     PASSWORD: "password",
 };
 
-const P = styled.p`
+const P = styled.span`
     animation: ${props => props.errorAnimation ? props.animation : 'none'};
 `;
 
@@ -33,6 +33,7 @@ export const Input = ({
     leftIcon,
     required,
     disabled,
+    marginTop,
     transform,
     iconWidth,
     rightIcon,
@@ -48,7 +49,6 @@ export const Input = ({
     borderRight,
     placeholder,
     errorZindex,
-    errorBottom,
     labelWeight,
     phoneDisplay,
     errorMessage,
@@ -112,10 +112,6 @@ export const Input = ({
             if (!phoneNumberRegex.test(currentValue)) {
                 if (currentValue === '') {
                     setInnerErrorMessage('');
-                    setInnerValue('');
-                    if (change) {
-                        change('');
-                    }
                 } else {
                     telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
                     setInnerValue(prevValue);
@@ -130,11 +126,6 @@ export const Input = ({
                     if (change) {
                         change(currentValue.substr(0, 8));
                     }
-                } else {
-                    setInnerValue(currentValue);
-                    if (change) {
-                        change(currentValue);
-                    }
                 }
             }
         } 
@@ -181,16 +172,14 @@ export const Input = ({
                         } else {
                             telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
                         }
-                        setInnerValue('');
                     } else {
-                        setInnerErrorMessage('');
-                        if (value.length > 8) {
+                        if (value.length < 8) {
+                            telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
+                        } else if (value.length > 8) {
                             setInnerValue(value.substr(0, 8));
-                        } else {
-                            setInnerValue(value);
                         }
                     }
-                } 
+                }
 
                 if (maxLength && value.length > maxLength && type !== 'tel') {
                     setInnerValue(value.substr(0, maxLength));
@@ -301,8 +290,8 @@ export const Input = ({
                         padding: padding ? padding : configStyles.INPUT.padding,
                         borderRadius: radius ? radius : configStyles.INPUT.radius,
                         boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
-                        backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,                       
                         color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                        backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor                      
                     }}
                 />
                 {
@@ -336,13 +325,14 @@ export const Input = ({
                         animation={animation}
                         style={{
                             margin: '0px',
+                            position: 'absolute',
+                            width: width ? width : configStyles.INPUT.width,
                             left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
                             color: errorColor ? errorColor : configStyles.INPUT.errorColor,
                             fontSize: errorSize ? errorSize : configStyles.INPUT.errorSize,
-                            bottom: errorBottom ? errorBottom : configStyles.INPUT.errorBottom,
                             zIndex: errorZindex ? errorZindex : configStyles.INPUT.errorZindex,
-                            position: errorPosition ? errorPosition : configStyles.INPUT.errorPosition,
                             lineHeight: errorLineHeight ? errorLineHeight : configStyles.INPUT.errorLineHeight,
+                            top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
                             transform: !errorAnimation ? 'scale3d(1,1,1)' : transform ? transform : configStyles.INPUT.transform,
                         }}
                         className={errorClassName ? errorClassName : configStyles.INPUT.errorClassName}
@@ -368,6 +358,7 @@ Input.propTypes = {
     padding: PropTypes.string,
     fontSize: PropTypes.string,
     tooltip: PropTypes.element,
+    marginTop: PropTypes.string,
     transform: PropTypes.string,
     className: PropTypes.string,
     iconWidth: PropTypes.string,
@@ -382,7 +373,6 @@ Input.propTypes = {
     borderRight: PropTypes.string,
     placeholder: PropTypes.string,
     errorZindex: PropTypes.string,
-    errorBottom: PropTypes.string,
     labelWeight: PropTypes.string,
     errorMessage: PropTypes.string,
     phoneDisplay: PropTypes.string,

package/src/components/modal/index.js

@@ -13,7 +13,9 @@ import SvgCloseSlide from './../icon/CloseSlide';
 export const Modal = ({
     type,
     data,
+    width,
     radius,
+    height,
     padding,
     setShow,
     selected,
@@ -21,13 +23,18 @@ export const Modal = ({
     minWidth,
     minHeight,
     className,
+    mMaxWidth,
+    alignItems,
+    mMaxHeight,
     headerText,
     imageWidth,
     headerSize,
     imageHeight,
     headerColor,
+    outsideClose,
     headerWeight,
     headerHeight,
+    justifyContent,
     backgroundColor,
     layerBackgroundColor,
 }) => {
@@ -45,8 +52,7 @@ export const Modal = ({
         e.stopPropagation();
     };
 
-    const handleGoTo = (e) => {
-        const goTo = e.target.getAttribute('data-go');
+    const handleGoTo = (goTo) => {
         if (goTo === 'next') {
             if (select >= data.length - 1) {
                 setSelect(0);
@@ -97,7 +103,7 @@ export const Modal = ({
 
     return (
         <div
-            onClick={handleCloseModal}
+            onClick={outsideClose || configStyles.MODAL.outsideClose ? handleCloseModal : _ => _}
             style={{
                 top: '0px',
                 left: '0px',
@@ -111,31 +117,28 @@ export const Modal = ({
             <div
                 style={{
                     position: 'relative',
+                    display: 'flex',
                     width: '100%',
-                    height: '100vh'
+                    height: '100vh',
+                    alignItems: alignItems ? alignItems : configStyles.MODAL.alignItems,
+                    justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
                 }}
             >
                 <div
                     className={`${classProps} ${styles['animation__modal']}`}
                     onClick={handleStopClosing}
                     style={{
-                        top: '0px',
-                        left: '0px',
-                        right: '0px',
-                        bottom: '0px',
-                        margin: 'auto',
-                        maxWidth: '95%',
                         overflow: 'auto',
-                        maxHeight: '95vh',
-                        position: 'absolute',
-                        width: 'fit-content',
-                        height: 'fit-content',
                         boxSizing: 'border-box',
+                        width: width ? width : configStyles.MODAL.width,
+                        height: height ? height : configStyles.MODAL.height,
                         borderRadius: radius ? radius : configStyles.MODAL.radius,
-                        minWidth: type === 'content' ? minWidth ? minWidth : '' : '',
-                        minHeight: type === 'content' ? minHeight ? minHeight : '' : '',
+                        maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
+                        maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
+                        minWidth: type === 'content' ? minWidth ? minWidth : configStyles.MODAL.minWidth : '',
                         padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
                         backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
+                        minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : '',
                     }}
                 >
                     <div
@@ -249,8 +252,7 @@ export const Modal = ({
                                         {
                                             innerData && innerData.length > 1 && <>
                                                 <button
-                                                    onClick={handleGoTo}
-                                                    data-go='prev'
+                                                    onClick={_ => handleGoTo('prev')}
                                                     style={{
                                                         position: 'absolute',
                                                         left: '14px',
@@ -267,8 +269,7 @@ export const Modal = ({
                                                     <SvgPrev />
                                                 </button>
                                                 <button
-                                                    onClick={handleGoTo}
-                                                    data-go='next'
+                                                    onClick={_ => handleGoTo('next')}
                                                     style={{
                                                         position: 'absolute',
                                                         width: '24px',
@@ -300,19 +301,26 @@ Modal.propTypes = {
     data: PropTypes.array,
     type: PropTypes.string,
     setShow: PropTypes.func,
+    width: PropTypes.string,
     radius: PropTypes.string,
+    height: PropTypes.string,
     padding: PropTypes.string,
     selected: PropTypes.number,
     minWidth: PropTypes.string,
+    mMaxWidth: PropTypes.string,
     minHeight: PropTypes.string,
     className: PropTypes.string,
+    alignItems: PropTypes.string,
+    mMaxHeight: PropTypes.string,
     headerText: PropTypes.string,
     imageWidth: PropTypes.string,
     headerSize: PropTypes.string,
+    outsideClose: PropTypes.bool,
     headerColor: PropTypes.string,
     imageHeight: PropTypes.string,
     headerWeight: PropTypes.string,
     headerHeight: PropTypes.string,
+    justifyContent: PropTypes.string,
     backgroundColor: PropTypes.string,
     layerBackgroundColor: PropTypes.string,
 };

package/src/components/modal/modal.stories.js

@@ -55,7 +55,7 @@ const Template = ({ headerText, className }) => {
         style={{ cursor: 'pointer', padding: '8px', fontSize: '16px' }}
       >Change type to {type === 'content' ? 'images' : 'content'}</button>
       {show && (
-        <Modal type={type} selected={0} data={data} setShow={setShow} minHeight='400px' minWidth='600px' className={className}>
+        <Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
           <p>
             Children content
           </p>

package/src/components/newAutocomplete/index.js

@@ -15,6 +15,7 @@ export const NewAutocomplete = ({
     selected,
     errorSize,
     labelSize,
+    marginTop,
     errorColor,
     labelColor,
     labelWeight,
@@ -209,11 +210,12 @@ export const NewAutocomplete = ({
                         </div>
                     : innerOptions.length <= 0
                         ?
-                            <p
+                            <span
                                 style={{
-                                    margin: '0px',
+                                    position: 'absolute',
                                     color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
                                     fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                                    top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
                                     height: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
                                     padding: contentBottomRowPadding ? contentBottomRowPadding : configStyles.NEWAUTOCOMPLETE.contentBottomRowPadding,
                                     lineHeight: contentBottomRowHeight ? contentBottomRowHeight : configStyles.NEWAUTOCOMPLETE.contentBottomRowHeight,
@@ -225,7 +227,7 @@ export const NewAutocomplete = ({
                                     ? 'Նման տվյալ առկա չէ'
                                     : `Լրացնել առնվազն ${searchCount} նիշ`
                                 }
-                            </p>
+                            </span>
                         : ''
                 : ''
             }
@@ -339,10 +341,11 @@ export const NewAutocomplete = ({
                     errorMessage
                         ? <span
                             style={{
-                                margin: '0px',
-                                display: 'inline-block',
+                                left: '0px',
+                                position: 'absolute',
                                 color: errorColor ? errorColor : configStyles.NEWAUTOCOMPLETE.errorColor,
                                 fontSize: errorSize ? errorSize : configStyles.NEWAUTOCOMPLETE.errorSize,
+                                top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
                                 maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
                             }}
                           >
@@ -365,6 +368,7 @@ NewAutocomplete.propTypes = {
     disabled: PropTypes.bool,
     selected: PropTypes.string,
     errorSize: PropTypes.string,
+    marginTop: PropTypes.string,
     labelSize: PropTypes.string,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,

package/src/components/newFile/index.js

@@ -18,7 +18,6 @@ export const NewFile = ({
     name,
     color,
     label,
-    width,
     weight,
     height,
     radius,
@@ -26,6 +25,7 @@ export const NewFile = ({
     border,
     upload,
     maxSize,
+    maxWidth,
     disabled,
     multiple,
     required,
@@ -227,7 +227,8 @@ export const NewFile = ({
         <div
             ref={ref}
             style={{
-                width: width ? width : configStyles.File.width
+                width: '100%',
+                maxWidth: maxWidth ? maxWidth : configStyles.File.maxWidth
             }}
         >
             <div
@@ -441,7 +442,6 @@ NewFile.propTypes = {
     or: PropTypes.string,
     size: PropTypes.string,
     label: PropTypes.string,
-    width: PropTypes.string,
     color: PropTypes.string,
     height: PropTypes.string,
     disabled: PropTypes.bool,
@@ -451,6 +451,7 @@ NewFile.propTypes = {
     upload: PropTypes.string,
     weight: PropTypes.number,
     maxSize: PropTypes.number,
+    maxWidth: PropTypes.string,
     removeFile: PropTypes.func,
     errorSize: PropTypes.string,
     labelSize: PropTypes.string,

package/src/components/select/index.js

@@ -18,8 +18,10 @@ export const Select = ({
     keyNames,
     selected,
     className,
+    marginTop,
     arrowIcon,
     closeIcon,
+    errorZindex,
     errorMessage,
     defaultOption,
     multipleCheckbox,
@@ -198,7 +200,7 @@ export const Select = ({
     }, [options, multiple, selected, selected?.length]);
     
     return (
-        <div className={classProps}>
+        <div className={classProps} style={{ position: 'relative' }}>
             {
                 label ?
                     <label
@@ -338,8 +340,11 @@ export const Select = ({
                 errorMessage ?
                     <span
                         style={{
+                            position: 'absolute',
                             color: errorColor ? errorColor : configStyles.SELECT.errorColor,
-                            fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize
+                            fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize,
+                            zIndex: errorZindex ? errorZindex : configStyles.SELECT.errorZindex,
+                            top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`
                         }}
                     >
                         {errorMessage}
@@ -358,9 +363,11 @@ Select.propTypes = {
     disabled: PropTypes.bool,
     selected: PropTypes.array,
     keyNames: PropTypes.object,
+    marginTop: PropTypes.string,
     className: PropTypes.string,
     arrowIcon: PropTypes.element,
     closeIcon: PropTypes.element,
+    errorZindex: PropTypes.number,
     errorMessage: PropTypes.string,
     defaultOption: PropTypes.string,
     multipleCheckbox: PropTypes.bool,

package/src/components/singleCheckbox/index.js

@@ -1,20 +1,42 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import ReactCheckbox from '../icon/CheckboxUnchecked';
 import ReactCheckboxChecked from '../icon/CheckboxChecked';
 
-export const SingleCheckbox = ({ checked }) => {
+export const SingleCheckbox = ({
+  id,
+  float,
+  checked,
+  onClick,
+  content,
+  disabled,
+  checkedColor,
+  unCheckedColor
+}) => {
+  const [innerCheckd, setInnerChecked] = useState(false);
 
+  useEffect(() => {
+    setInnerChecked(checked);
+  }, [checked]);
   return <div
     style={{
-      marginRight: '9px'
+      width: '16px',
+      height: '16px',
+      marginRight: '9px',
+      display: 'inline-block',
+      float: float ? float : '',
+      cursor: !disabled && onClick ? 'pointer' : 'normal'
     }}
   >
-    { checked ? <ReactCheckboxChecked /> : <ReactCheckbox /> }
+    { innerCheckd
+        ? <ReactCheckboxChecked onClick={!disabled && onClick ? (e) => onClick(e, content, id) : _ => _} fillColor={checkedColor ? checkedColor : ''} />
+        : <ReactCheckbox onClick={!disabled && onClick ? (e) => onClick(e, content, id) : _ => _} fillColor={unCheckedColor ? unCheckedColor : ''} />
+    }
   </div>;
 };
 
 SingleCheckbox.propTypes = {
-  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool.isRequired,
 }