@xaypay/tui 0.0.104 → 0.0.106

package/src/components/table/td.js

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 
-import { SingleCheckbox } from './../singleCheckbox';
+import { SingleCheckbox } from './../singleCheckbox'
 
-import styles from './table.module.css';
+import styles from './table.module.css'
 
 const TD = ({
-    id,
     item,
     tBodyColor,
     borderRight,
@@ -15,13 +14,13 @@ const TD = ({
     tBodyFontFamily,
     tBodyFontWeight,
     handleCheckedBody,
-    handleBodyActionClick
+    handleBodyActionClick,
 }) => {
-    const [opend, setOpend] = useState(false);
+    const [opend, setOpend] = useState(false)
 
     const handleOpenCloseSubTd = () => {
-        setOpend(!opend);
-    };
+        setOpend(!opend)
+    }
 
     return (
         <td
@@ -36,17 +35,16 @@ const TD = ({
                 fontWeight: tBodyFontWeight,
             }}
         >
-            {
-                Array.isArray(item)
-                ? item.length > 0
-                    ? item.map((newItem, newIndex) => {
+            {Array.isArray(item) ? (
+                item.length > 0 ? (
+                    item.map((newItem, newIndex) => {
                         if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
                             return (
                                 <span
                                     style={{
                                         width: '32px',
                                         height: '32px',
-                                        marginRight: '10px'
+                                        marginRight: '10px',
                                     }}
                                     id={newItem.id}
                                     type={newItem.type}
@@ -54,21 +52,23 @@ const TD = ({
                                     key={`${newItem}_${newIndex}`}
                                     onClick={handleBodyActionClick}
                                 >
-                                    { newItem.content }
+                                    {newItem.content}
                                 </span>
                             )
                         } else if (newItem && Array.isArray(newItem)) {
                             return (
                                 <span
+                                    key={newItem.id}
                                     style={{
                                         display: 'inline-block',
                                         marginRight: newIndex !== item.length - 1 ? '10px' : '0px',
-                                        borderRight: newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none'
+                                        borderRight:
+                                            newIndex !== item.length - 1 ? '1px solid rgb(238, 238, 238)' : 'none',
                                     }}
                                 >
-                                    {
-                                        item[newIndex].map((iT, iN) => {
-                                            return <span
+                                    {item[newIndex].map((iT, iN) => {
+                                        return (
+                                            <span
                                                 style={{
                                                     width: '32px',
                                                     height: '32px',
@@ -80,60 +80,62 @@ const TD = ({
                                                 onClick={handleBodyActionClick}
                                                 key={`${iT.id || iT.content}_${iN}`}
                                             >
-                                                { iT.content }
+                                                {iT.content}
                                             </span>
-                                        })
-                                    }
+                                        )
+                                    })}
                                 </span>
-                            );
+                            )
                         } else {
-                            return <span
-                                key={`${newItem}_${newIndex}`}
-                            >
-                                {newItem}
-                            </span>
+                            return <span key={`${newItem}_${newIndex}`}>{newItem}</span>
                         }
                     })
-                    : <></>
-                : item !== null && !Array.isArray(item) && typeof item === 'object'
-                    ? <div
-                        style={{
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            justifyContent: item.contentList || item.checkBox ? 'space-between' : 'center'
-                        }}
-                      >
-                        {item.contentList && <div
+                ) : (
+                    <></>
+                )
+            ) : item !== null && !Array.isArray(item) && typeof item === 'object' ? (
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        justifyContent: item.contentList || item.checkBox ? 'space-between' : 'center',
+                    }}
+                >
+                    {item.contentList && (
+                        <div
                             id={item.id}
                             style={{
                                 width: '21px',
-                                height: '21px'
+                                height: '21px',
                             }}
                             onClick={handleOpenCloseSubTd}
                             className={styles['td-span']}
                         >
-                            { opend === false ? item.closeArrow : item.openArrow }
+                            {opend === false ? item.closeArrow : item.openArrow}
                         </div>
-                        }
+                    )}
 
-                        {
-                            item.checkBox && <SingleCheckbox
-                                id={item.id}
-                                content={item.content}
-                                onClick={handleCheckedBody}
-                                checked={item.checkBox.checked}
-                                checkedColor={item.checkBox.checkedColor}
-                                unCheckedColor={item.checkBox.unCheckedColor}
-                            />
-                        }
+                    {item.checkBox && (
+                        <SingleCheckbox
+                            data={item}
+                            handleChecked={handleCheckedBody}
+                            checked={item.checkBox.checked}
+                            disabled={item.checkBox.disabled}
+                            checkedColor={item.checkBox.checkedColor}
+                            unCheckedColor={item.checkBox.unCheckedColor}
+                        />
+                    )}
 
-                        <div>
-                            <p
-                                style={{
-                                    margin: '0px'
-                                }}
-                            >{ item.content }</p>
-                            {item.contentList && <div
+                    <div>
+                        <p
+                            style={{
+                                margin: '0px',
+                            }}
+                        >
+                            {item.content}
+                        </p>
+                        {item.contentList && (
+                            <div
                                 style={{
                                     overflow: 'hidden',
                                     marginTop: '10px',
@@ -141,22 +143,28 @@ const TD = ({
                                 }}
                             >
                                 {item.contentList.map((innerItem, innerIndex) => {
-                                    return <p
-                                        key={`${innerItem}_${innerIndex}`}
-                                        style={{
-                                            margin: '0px',
-                                            textAlign: 'left',
-                                            paddingLeft: '10px'
-                                        }}
-                                    >{innerItem}</p>
+                                    return (
+                                        <p
+                                            key={`${innerItem}_${innerIndex}`}
+                                            style={{
+                                                margin: '0px',
+                                                textAlign: 'left',
+                                                paddingLeft: '10px',
+                                            }}
+                                        >
+                                            {innerItem}
+                                        </p>
+                                    )
                                 })}
-                            </div>}
-                        </div>
-                      </div>
-                    : ''
-            }
+                            </div>
+                        )}
+                    </div>
+                </div>
+            ) : (
+                ''
+            )}
         </td>
     )
-};
+}
 
-export default TD;
+export default TD

package/src/components/table/th.js

@@ -1,8 +1,9 @@
-import React from 'react';
+/* eslint-disable no-prototype-builtins */
+import React from 'react'
 
-import { SingleCheckbox } from './../singleCheckbox';
+import { SingleCheckbox } from './../singleCheckbox'
 
-import styles from './table.module.css';
+import styles from './table.module.css'
 
 const TH = ({
     item,
@@ -12,7 +13,7 @@ const TH = ({
     handleCheckedHeader,
     borderTopLeftRadius,
     borderTopRightRadius,
-    handleHeaderItemClick
+    handleHeaderItemClick,
 }) => {
     return (
         <th
@@ -23,33 +24,35 @@ const TH = ({
                 fontWeight: tHeadFontWeight,
                 borderTopLeftRadius: borderTopLeftRadius,
                 borderTopRightRadius: borderTopRightRadius,
-                cursor: handleHeaderItemClick ? 'pointer' : 'normal'
+                cursor: handleHeaderItemClick ? 'pointer' : 'normal',
             }}
-            onClick={handleHeaderItemClick ? handleHeaderItemClick : _ => _}
+            onClick={handleHeaderItemClick ? handleHeaderItemClick : (_) => _}
             className={`${item.sortingArrows && styles['sorting-arrows']}`}
         >
             <div
                 style={{
                     display: 'flex',
                     alignItems: 'flex-start',
-                    justifyContent: item.hasOwnProperty('checkBox') ? 'space-between' : 'center'
+                    justifyContent: item.hasOwnProperty('checkBox') ? 'space-between' : 'center',
                 }}
             >
-                {item.hasOwnProperty('checkBox')
-                    ? <SingleCheckbox
-                        float='left'
+                {item.hasOwnProperty('checkBox') ? (
+                    <SingleCheckbox
+                        data={item}
+                        float="left"
                         checked={item.checkBox.checked}
-                        content={item.content ? item.content : ''}
-                        onClick={handleCheckedHeader ? handleCheckedHeader : _ => _}
+                        disabled={item.checkBox.disabled}
+                        handleChecked={handleCheckedHeader ? handleCheckedHeader : (_) => _}
                         checkedColor={item.checkBox.checkedColor ? item.checkBox.checkedColor : ''}
                         unCheckedColor={item.checkBox.unCheckedColor ? item.checkBox.unCheckedColor : ''}
                     />
-                    : ''
-                }
+                ) : (
+                    ''
+                )}
                 {item.type === 'show' ? item.content : ''}
             </div>
         </th>
     )
-};
+}
 
-export default TH;
+export default TH

package/src/components/textarea/index.js

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
 
-import { compereConfigs } from "./../../utils";
+import { compereConfigs } from './../../utils'
 
-import './textarea.module.css';
+import './textarea.module.css'
 
 export const Textarea = ({
     size,
@@ -37,70 +37,70 @@ export const Textarea = ({
     borderHoverColor,
     labelMarginBottom,
     showCharacterCount,
-    labelRequiredColor
+    labelRequiredColor,
 }) => {
-    const [error, setError] = useState('');
-    const [isHover, setIsHover] = useState(false);
-    const [isFocus, setIsFocus] = useState(false);
-    const [innerValue, setInnerValue] = useState('');
+    const [error, setError] = useState('')
+    const [isHover, setIsHover] = useState(false)
+    const [isFocus, setIsFocus] = useState(false)
+    const [innerValue, setInnerValue] = useState('')
 
-    const configStyles = compereConfigs();
+    const configStyles = compereConfigs()
 
     const handleMouseEnter = () => {
-        setIsHover(true);
-    };
-      
+        setIsHover(true)
+    }
+
     const handleMouseLeave = () => {
-        setIsHover(false);
-    };
+        setIsHover(false)
+    }
 
     const handleFocus = () => {
-        setIsFocus(true);
-    };
+        setIsFocus(true)
+    }
 
     const handleBlur = () => {
-        setIsFocus(false);
-    };
+        setIsFocus(false)
+    }
 
     const handleChange = (e) => {
-        const value = e.target.value;
-        onChange(value);
+        const value = e.target.value
+        onChange(value)
         if (maxLength) {
             if (value.length > maxLength) {
-                onChange(value.substr(0, maxLength));
-                setError('Նիշերի քանակը գերազանցում է');
+                onChange(value.substr(0, maxLength))
+                setError('Նիշերի քանակը գերազանցում է')
             } else {
-                setError('');
+                setError('')
             }
         } else {
             if (value.length > configStyles.TEXTAREA.maxLength) {
-                setError('Նիշերի քանակը գերազանցում է');
-                onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
+                setError('Նիշերի քանակը գերազանցում է')
+                onChange(value.substr(0, configStyles.TEXTAREA.maxLength))
             } else {
-                setError('');
+                setError('')
             }
         }
-    };
+    }
 
     useEffect(() => {
         if (value === undefined) {
-            alert('Please add value prop on Textarea component');
+            alert('Please add value prop on Textarea component')
         }
 
         if (!onChange) {
-            alert('Please add onChange function on Textarea component');
+            alert('Please add onChange function on Textarea component')
         }
 
-        setInnerValue(value);
-    }, [value, onChange]);
+        setInnerValue(value)
+    }, [value, onChange])
 
     useEffect(() => {
         if (errorMessage) {
-            setError(errorMessage);
+            setError(errorMessage)
         } else {
-            setError('');
+            setError('')
         }
-    }, [errorMessage]);
+    }, [errorMessage])
 
     return (
         <div
@@ -113,36 +113,45 @@ export const Textarea = ({
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: label ? 'space-between' : 'flex-end',
-                    marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom
+                    marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.TEXTAREA.labelMarginBottom,
                 }}
             >
-                {
-                    label
-                    ? <label
+                {label ? (
+                    <label
                         style={{
                             color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
                             fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
                             display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
-                            fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
+                            fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight,
                         }}
                     >
                         {label}
-                        {
-                            required &&
-                            <sup style={{color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor}}>*</sup>
-                        }
+                        {required && (
+                            <sup
+                                style={{
+                                    color: labelRequiredColor
+                                        ? labelRequiredColor
+                                        : configStyles.TEXTAREA.labelRequiredColor,
+                                }}
+                            >
+                                *
+                            </sup>
+                        )}
                     </label>
-                    : ''
-                }
+                ) : (
+                    ''
+                )}
 
-                {
-                    showCharacterCount && maxLength && <span
+                {showCharacterCount && maxLength && (
+                    <span
                         style={{
                             color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
                             fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
                         }}
-                    >{ maxLength - value.length } նիշ</span>
-                }
+                    >
+                        {maxLength - value.length} նիշ
+                    </span>
+                )}
             </div>
             <textarea
                 style={{
@@ -160,10 +169,21 @@ export const Textarea = ({
                     maxHeight: maxHeight ? maxHeight : configStyles.TEXTAREA.maxHeight,
                     boxSizing: boxSizing ? boxSizing : configStyles.TEXTAREA.boxSizing,
                     backgroundColor: backgroundColor ? backgroundColor : configStyles.TEXTAREA.backgroundColor,
-                    boxShadow: error ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.TEXTAREA.errorColor}` :
-                               isFocus ? borderFocusColor ? `0 0 0 2px ${borderFocusColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderFocusColor}` :
-                               isHover ? borderHoverColor ? `0 0 0 2px ${borderHoverColor}` : `0 0 0 2px ${configStyles.TEXTAREA.borderHoverColor}` :
-                               boxShadow ? boxShadow : configStyles.INPUT.boxShadow,
+                    boxShadow: error
+                        ? errorColor
+                            ? `0 0 0 2px ${errorColor}`
+                            : `0 0 0 2px ${configStyles.TEXTAREA.errorColor}`
+                        : isFocus
+                        ? borderFocusColor
+                            ? `0 0 0 2px ${borderFocusColor}`
+                            : `0 0 0 2px ${configStyles.TEXTAREA.borderFocusColor}`
+                        : isHover
+                        ? borderHoverColor
+                            ? `0 0 0 2px ${borderHoverColor}`
+                            : `0 0 0 2px ${configStyles.TEXTAREA.borderHoverColor}`
+                        : boxShadow
+                        ? boxShadow
+                        : configStyles.INPUT.boxShadow,
                     resize: resize ? resize : configStyles.TEXTAREA.resize,
                 }}
                 value={innerValue}
@@ -174,19 +194,23 @@ export const Textarea = ({
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             ></textarea>
-            {
-                error ? <span
+            {error ? (
+                <span
                     style={{
                         display: 'inline-block',
                         fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
                         color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
-                        marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
+                        marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop,
                     }}
-                >{ error }</span> : ''
-            }
+                >
+                    {error}
+                </span>
+            ) : (
+                ''
+            )}
         </div>
-    );
-};
+    )
+}
 
 Textarea.propTypes = {
     size: PropTypes.string,
@@ -220,5 +244,5 @@ Textarea.propTypes = {
     borderHoverColor: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     onChange: PropTypes.func.isRequired,
-    labelRequiredColor: PropTypes.string
+    labelRequiredColor: PropTypes.string,
 }

package/src/components/textarea/textarea.stories.js

@@ -1,25 +1,22 @@
-import React, { useState } from 'react';
-import { Textarea } from '.';
-import { Input } from '../input';
+import React, { useState } from 'react'
+import { Textarea } from '.'
 
 export default {
     Comment: Textarea,
-    title: 'Components/Textarea'
+    title: 'Components/Textarea',
 }
 
 const Template = (args) => {
-    const [val, setVal] = useState('');
+    const [val, setVal] = useState('')
 
     const handleChangeValue = (value) => {
-        setVal(value);
+        setVal(value)
     }
 
-    return (
-        <Textarea value={val} onChange={handleChangeValue} {...args} />
-    );
-};
+    return <Textarea value={val} onChange={handleChangeValue} {...args} />
+}
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
     label: 'Label for textarea',
     required: true,
@@ -46,8 +43,8 @@ Default.args = {
     borderColor: '#D1D1D1',
     boxSizing: 'border-box',
     backgroundColor: 'white',
-    showCharacterCount: true,                             // for showing textarea character count
+    showCharacterCount: true, // for showing textarea character count
     borderHoverColor: '#3C393E',
     borderFocusColor: '#00236A',
     labelRequiredColor: '#ee0000',
-}
+}