@xaypay/tui 0.0.81 → 0.0.83

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/NewAutocomplete.stories.js

@@ -24,11 +24,11 @@ const Template = (args) => {
   };
 
   const handleChange = (value) => {
-      fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value}`, {
+      fetch(`http://dev2.govazd-api.yerevan.am/api/v1/companies/autocomplete?slug=${value.name ? value.name : ''}`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjRlZTI2OGU3NjhkMjA0YTdiMWM1NjU4NzE2Mjg0OTdjNTlmMmZjYjc4YzdiZTRjYTYzZGUyYjZmNjZjMzU3YjI0MzMwZjRhOTc5OGRjZDY4IiwiaWF0IjoxNjgxMzYzNDI2LjE0NDc0NywibmJmIjoxNjgxMzYzNDI2LjE0NDc1NCwiZXhwIjoxNjgxMzg4NjI2LjExODkzNywic3ViIjoibWluYXNAbWFpbC5ydSIsInNjb3BlcyI6WyJlbWFpbCJdfQ.nGU1Jf4XeVEqOHCXfDsjL-q--jTDrjlACMolSISUpviSaEDVLCI6BpY5_YYjOWRBUr4Utl_guFqpnb9jxbWdugL6_uFBANj1v0bi_g-RlzzeqF0FqlUqf1YZ_8S4c-l8nLsqfSDzPJs3nRB6oJVo7Di2O3fS_ka5MCkTXShzI6UJUZEvV4j60_QD7SmqmnDiij2rnfWt76YrNXZpDHt-zWMw6d7gD_pnX5RJ0YHUaXi2-M9ip-OcJfX4e_w7iMnckecaCfUolIO_rYNnHy6mleHX6Dimu6_niyMr0dj1ph9glv7fOHrIDwXx69AfJ4nuUQBa-G_AE9abot8cVzlPXAkwVa8WVkvH2mtzDgQuBLbQDM2VISqxO8j5jZhC9JDuXKN8TGukiBbePkWmpd9ASYaLQC02OqzZxqCaBBXCd72XMrwIynyjyTAW9t-VeraxFJgZwlqCnwZ7eTiIWSpPT7B5CLVumC24kz_ll8Tdbz4tMo0xdHNggD-hdPhciyVsaLk0q0Hx-vyIlKMS0KPez4EULQT2C3HaR5t81Pf4Qq06zLPXnKXXnoFc_p3u8TGDdqVXQBPdV1W8ck_3-hwIe-QzM5TbqTJjehiiH64QMcFTsJs--2APXNy3nBmU0D98is_eBGgHbgLJgck5v7MgYBaAaPjPf2lxtS-DF76ynQQ',
+          'Authorization':  'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIwMjE0NzEyYTllNzQwZWMyMjNhYzE2MGQyNGVkY2UzNyIsImp0aSI6IjYyYTU0MzhmYjY3ODZmYzgzY2NkZmVkMGNlYzExZDZjY2IxNmRhNWJhYTVlOTMwMWVjNDU2MWRmYzIyMDcyYTc0ZjEyY2IxZGEzOTJlMjE5IiwiaWF0IjoxNjg2MDM0NTA0LjU5OTMzOSwibmJmIjoxNjg2MDM0NTA0LjU5OTM2NywiZXhwIjoxNjg2MDU5NzA0LjU4NDkxMiwic3ViIjoibWluYXM4OUBtYWlsLnJ1Iiwic2NvcGVzIjpbImVtYWlsIl19.DzzdZFLHiFTyUIlKIK25IMSxnjI0cQ5EaUT3vdMoZT3XjclPA1uohP4hiRr30Duy6psyOcPuQuZ2t8KuGUy5n500Di-Wbw0tZDVW-ctyOQNQRPjcTL41lN7xrTaRzxrkSa3KHlZT0_w4KjHTp32wo6XHWjLwrbZIFlBBbJv-bMBqj0KIcsLWHBMfHb2lU8UK6_xMgSbsV_E3FzrhbgmBeFifBTn9BVkduz450jWKmib5zKFRv4lqpFrMJo7gOQRj0-uQliCCdtnvOBW3QqBeT0Zl-RFH-Vc22GAxSYWF7PZ1M-tOZ2PlR7pyfJabp6nEtsRii5PhoejUBAynYmZBKxY-TvKGjfpOXcULm2w0zIqrV2KRf4acj189Kok_nE5rpReqc0xk6hxDdhyBPdBDtgm58c25G_fkkSpMJvDyZg0fqpCB7wkYfGpqeYH-eW4KYuZeReU1OyIKCTxBJhDfcFqZRb4x7TUIxNoFXknLhhU4mB7t75ZZxpUwtJRXqF_Ps8eiBWcfmt5uZfVQqzFXcBlx6lmDwBn7RIF0jy5oKvs6ss5mBjv0SdKSJrpRMa9GIVT9lUJDqKA15JZIGXdugjBXwlrzFfekePXA_7AAFrxgS0Dn7EZJCh7EmBdGG3slPLRtnkcVru2AOLHZ-aRPtVluzxgip9RU23VMVXvoX-I',
         },
       }).then((res)=> {
         return res.json()
@@ -47,5 +47,6 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   searchCount: 3,
-  selected: 'Jhon'
+  keyNames: { name: 'name', id: 'bbb' },
+  selected: { "bbb":"0", "name":"gasdfgdsfgdsg" },
 }

package/src/components/newAutocomplete/index.js

@@ -10,11 +10,13 @@ export const NewAutocomplete = ({
     change,
     options,
     getItem,
+    keyNames,
     required,
     disabled,
     selected,
     errorSize,
     labelSize,
+    marginTop,
     errorColor,
     labelColor,
     labelWeight,
@@ -48,6 +50,7 @@ export const NewAutocomplete = ({
     contentTopBoxSizing,
     contentTopLineHeight,
     contentBottomMaxWidth,
+    contentTopBorderHover,
     contentBottomOverflow,
     contentBottomPosition,
     contentBottomRowColor,
@@ -55,6 +58,7 @@ export const NewAutocomplete = ({
     contentBottomBoxShadow,
     contentBottomRowHeight,
     contentBottomRowCursor,
+    contentTopBorderActive,
     contentBottomRowDisplay,
     contentBottomRowPadding,
     contentBottomRowFontSize,
@@ -65,8 +69,6 @@ export const NewAutocomplete = ({
     contentBottomRowAlignItems,
     contentBottomRowTransition,
     contentBottomRowHoverColor,
-    contentTopBorderHover,
-    contentTopBorderActive,
     contentBottomInnerOverflowY,
     contentBottomInnerOverflowX,
     contentBottomInnerMaxHeight,
@@ -77,6 +79,7 @@ export const NewAutocomplete = ({
     contentBottomRowHoverBackgroundColor,
     ...props
 }) => {
+    const [id, setId] = useState('');
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
@@ -122,10 +125,11 @@ export const NewAutocomplete = ({
 
     const handleChange = (e) => {
         const value = e.target.value;
+        const currentId = e.target.id;
         value.length > 0 ? setShow(true) : setShow(false);
         setInnerValue(value);
         if (value.length >= searchCount) {
-            change(value);
+            change({ name: value, id: currentId });
         } else {
             change('');
         }
@@ -133,8 +137,9 @@ export const NewAutocomplete = ({
 
     const handleClick = (selectedValue) => {
         setShow(false);
-        getItem(selectedValue);
+        setId(selectedValue.id);
         setInnerValue(selectedValue.name);
+        getItem(selectedValue);
     };
 
     const optionList = (
@@ -200,7 +205,7 @@ export const NewAutocomplete = ({
                                                     backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
                                                 }}
                                             >
-                                                {item.name}
+                                                {item[keyNames.name]}
                                             </p>
                                         )
                                     })
@@ -209,11 +214,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 +231,7 @@ export const NewAutocomplete = ({
                                     ? 'Նման տվյալ առկա չէ'
                                     : `Լրացնել առնվազն ${searchCount} նիշ`
                                 }
-                            </p>
+                            </span>
                         : ''
                 : ''
             }
@@ -258,11 +264,13 @@ export const NewAutocomplete = ({
 
     useEffect(() => {
         if (selected) {
-            setInnerValue(selected);
+            setId(selected[keyNames.id]);
+            setInnerValue(selected[keyNames.name]);
         } else {
+            setId('');
             setInnerValue('');
         }
-    }, [selected, selected?.length]);
+    }, [selected]);
 
     return (
         <>
@@ -300,6 +308,7 @@ export const NewAutocomplete = ({
                 }}
             >
                 <input
+                    id={id}
                     type='text'
                     value={innerValue}
                     disabled={disabled}
@@ -339,10 +348,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,
                             }}
                           >
@@ -363,8 +373,10 @@ NewAutocomplete.propTypes = {
     label: PropTypes.string,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
-    selected: PropTypes.string,
+    keyNames: PropTypes.object,
+    selected: PropTypes.object,
     errorSize: PropTypes.string,
+    marginTop: PropTypes.string,
     labelSize: PropTypes.string,
     errorColor: PropTypes.string,
     labelColor: PropTypes.string,

package/src/components/select/index.js

@@ -18,9 +18,12 @@ export const Select = ({
     keyNames,
     selected,
     className,
+    marginTop,
     arrowIcon,
     closeIcon,
+    errorZindex,
     errorMessage,
+    showCloseIcon,
     defaultOption,
     multipleCheckbox,
 
@@ -198,7 +201,7 @@ export const Select = ({
     }, [options, multiple, selected, selected?.length]);
     
     return (
-        <div className={classProps}>
+        <div className={classProps} style={{ position: 'relative' }}>
             {
                 label ?
                     <label
@@ -261,11 +264,11 @@ export const Select = ({
                                 !disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
                             }
 
-                            {!disabled && newSelected && newSelected.length > 0 && 
+                            {showCloseIcon && !disabled && newSelected && newSelected.length > 0 && 
                                 <div
-                                className={`${styles['close-icon']}`}
-                                onClick={disabled ? _ => _ : handleClearSelect}
-                                style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
+                                    className={`${styles['close-icon']}`}
+                                    onClick={disabled ? _ => _ : handleClearSelect}
+                                    style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
                                 >
                                     { closeIcon ? closeIcon : <ReactCloseIcon /> }
                                 </div>
@@ -338,8 +341,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 +364,12 @@ Select.propTypes = {
     disabled: PropTypes.bool,
     selected: PropTypes.array,
     keyNames: PropTypes.object,
+    marginTop: PropTypes.string,
     className: PropTypes.string,
     arrowIcon: PropTypes.element,
     closeIcon: PropTypes.element,
+    showCloseIcon: PropTypes.bool,
+    errorZindex: PropTypes.number,
     errorMessage: PropTypes.string,
     defaultOption: PropTypes.string,
     multipleCheckbox: PropTypes.bool,

package/src/components/select/select.stories.js

@@ -17,6 +17,7 @@ const Template = (args) => <Select label='' {...args} >Default</Select>;
 
 export const Default = Template.bind({});
 Default.args = {
+    showCloseIcon: true,
     label: 'վարչական շրջան',
     options: [{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     onChange: (newValue)=> {

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;