@xaypay/tui 0.0.81 → 0.0.82

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',
@@ -114,25 +120,25 @@ export const Modal = ({
                     display: 'flex',
                     width: '100%',
                     height: '100vh',
-                    alignItems: 'center',
-                    justifyContent: 'center'
+                    alignItems: alignItems ? alignItems : configStyles.MODAL.alignItems,
+                    justifyContent: justifyContent ? justifyContent : configStyles.MODAL.justifyContent
                 }}
             >
                 <div
                     className={`${classProps} ${styles['animation__modal']}`}
                     onClick={handleStopClosing}
                     style={{
-                        maxWidth: '95%',
                         overflow: 'auto',
-                        maxHeight: '95vh',
-                        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
@@ -246,8 +252,7 @@ export const Modal = ({
                                         {
                                             innerData && innerData.length > 1 && <>
                                                 <button
-                                                    onClick={handleGoTo}
-                                                    data-go='prev'
+                                                    onClick={_ => handleGoTo('prev')}
                                                     style={{
                                                         position: 'absolute',
                                                         left: '14px',
@@ -264,8 +269,7 @@ export const Modal = ({
                                                     <SvgPrev />
                                                 </button>
                                                 <button
-                                                    onClick={handleGoTo}
-                                                    data-go='next'
+                                                    onClick={_ => handleGoTo('next')}
                                                     style={{
                                                         position: 'absolute',
                                                         width: '24px',
@@ -297,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/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,
 }

package/src/components/table/index.js

@@ -7,7 +7,8 @@ import TD from './td';
 import { compereConfigs } from './../../utils';
 
 const Table = ({
-  data,
+  dataBody,
+  dataHeader,
 
   tHeadColor,
   tHeadFamily,
@@ -23,7 +24,12 @@ const Table = ({
   tBodyFontWeight,
   tBodyFontFamily,
 
-  tBodyRowBorder
+  tBodyRowBorder,
+
+  handleCheckedBody,
+  handleCheckedHeader,
+  handleHeaderItemClick,
+  handleBodyActionClick
 }) => {
   const [body, setBody] = useState([]);
   const [header, setHeader] = useState([]);
@@ -31,24 +37,24 @@ const Table = ({
   const configStyles = compereConfigs();
 
   useEffect(() => {
-    setBody(data.body);
-  }, [data.body]);
+    setBody(dataBody);
+  }, [dataBody]);
 
   useEffect(() => {
-    setHeader(data.header);
-  }, [data.header]);
+    setHeader(dataHeader);
+  }, [dataHeader]);
 
   return (
     <>
       <table
         style={{
-          width: '1475px',
+          width: '2000px',
           borderCollapse: 'collapse'
         }}
       >
 
         {
-          header && header?.length > 0 && <thead>
+          header && header.length > 0 && <thead>
             <tr
               style={{
                 color: tHeadColor ? tHeadColor : configStyles.TABLE.tHeadColor,
@@ -62,7 +68,9 @@ const Table = ({
                       item={item}
                       key={`${item}_${index}`}
                       tHeadFamily={tHeadFamily ? tHeadFamily : configStyles.TABLE.tHeadFamily}
+                      handleCheckedHeader={handleCheckedHeader ? handleCheckedHeader : _ => _}
                       tHeadPadding={tHeadPadding ? tHeadPadding : configStyles.TABLE.tHeadPadding}
+                      handleHeaderItemClick={handleHeaderItemClick ? handleHeaderItemClick : _ => _}
                       tHeadFontWeight={tHeadFontWeight ? tHeadFontWeight : configStyles.TABLE.tHeadFontWeight}
                       borderTopLeftRadius={index === 0 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'}
                       borderTopRightRadius={index === header.length - 1 ? tHeadBorderRadius ? tHeadBorderRadius : configStyles.TABLE.tHeadBorderRadius : '0px'}
@@ -75,7 +83,7 @@ const Table = ({
         }
 
         {
-          body && body?.length > 0 && <tbody
+          body && body.length > 0 && <tbody
             style={{
               boxShadow: '0px 10px 30px rgba(0, 35, 106, 0.06)'
             }}
@@ -94,9 +102,12 @@ const Table = ({
                           return (
                             <TD
                               item={innerItem}
+                              id={item.id ? item.id : ''}
                               key={`${innerItem}_${innerIndex}`}
+                              handleCheckedBody={handleCheckedBody ? handleCheckedBody : _ => _}
                               tBodyColor={tBodyColor ? tBodyColor : configStyles.TABLE.tBodyColor}
                               tBodyPadding={tBodyPadding ? tBodyPadding : configStyles.TABLE.tBodyPadding}
+                              handleBodyActionClick={handleBodyActionClick ? handleBodyActionClick : _ => _}
                               tBodyFontSize={tBodyFontSize ? tBodyFontSize : configStyles.TABLE.tBodyFontSize}
                               tBodyTextAlign={tBodyTextAlign ? tBodyTextAlign : configStyles.TABLE.tBodyTextAlign}
                               tBodyFontFamily={tBodyFontFamily ? tBodyFontFamily : configStyles.TABLE.tBodyFontFamily}
@@ -118,7 +129,8 @@ const Table = ({
 };
 
 Table.propTypes = {
-  data: PropTypes.object,
+  dataBody: PropTypes.array,
+  dataHeader: PropTypes.array,
 
   tHeadColor: PropTypes.string,
   tHeadFamily: PropTypes.string,
@@ -134,7 +146,12 @@ Table.propTypes = {
   tBodyFontWeight: PropTypes.string,
   tBodyFontFamily: PropTypes.string,
 
-  tBodyRowBorder: PropTypes.string
+  tBodyRowBorder: PropTypes.string,
+
+  handleCheckedBody: PropTypes.func,
+  handleCheckedHeader: PropTypes.func,
+  handleHeaderItemClick: PropTypes.func,
+  handleBodyActionClick: PropTypes.func
 };
 
 export default Table;