@xaypay/tui 0.0.59 → 0.0.60

package/src/components/select/index.js

@@ -3,14 +3,17 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
 
+import { SelectCheckbox } from './../selectCheckbox';
+
 import ReactArrowIcon from './../../assets/icons/arrow.svg';
 import ReactCloseIcon from './../../assets/icons/close-icon.svg';
 
 import styles from './select.module.css';
 
 export const Select = ({
+    options,
+    multiple,
     disabled,
-    jsonData,
     required,
     onChange,
     keyNames,
@@ -20,6 +23,7 @@ export const Select = ({
     closeIcon,
     errorMessage,
     defaultOption,
+    multipleCheckbox,
 
     label,
     labelColor,
@@ -35,7 +39,7 @@ export const Select = ({
     errorColor,
     selectedColor,
     selectedRadius,
-    selectedHeight,
+    selectedMinHeight,
     selectedBorder,
     selectedPadding,
     selectedFontSize,
@@ -63,12 +67,12 @@ export const Select = ({
     optionItemBackgroudColor,
     optionItemBackgroudColorHover,
 }) => {
-    const options = jsonData.length ? JSON.parse(jsonData) : [];
     const ref = useRef();
     
     const [opened, setOpened] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [newSelected, setNewSelected] = useState({});
+    const [newSelected, setNewSelected] = useState([]);
+    const [existOptions, setExistOptions] = useState([]);
 
     const configStyles = compereConfigs();
     const classProps = classnames(
@@ -81,14 +85,43 @@ export const Select = ({
 
     const handleClearSelect = (e) => {
         onChange({});
-        setNewSelected({})
+        setNewSelected([]);
+        const clearedOptions = existOptions && existOptions.length > 0 && existOptions.map(item => {
+            item.checked = false;
+            return item;
+        });
+        setExistOptions(clearedOptions);
         e.stopPropagation();
     };
 
     const handleSelectItem = (option) => {
-        onChange(option);
-        setOpened(!opened);
-        setNewSelected(option);
+        const checkedOption = {...option};
+        delete checkedOption.checked;
+        onChange(checkedOption);
+        
+        if (!multiple) {
+            setOpened(!opened);
+            setNewSelected([option]);
+        } else {
+            const indexOfObject = newSelected.findIndex(obj => {
+                return obj.value === option.value;
+            });
+            if (indexOfObject === -1) {
+                option.checked = true;
+                setNewSelected(prev => {
+                    return [
+                        ...prev,
+                        option
+                    ]
+                });
+            } else {
+                option.checked = false;
+                setNewSelected([
+                    ...newSelected.slice(0, indexOfObject),
+                    ...newSelected.slice(indexOfObject + 1),
+                ]);
+            }
+        }
     };
 
     const handleMouseEnter = () => {
@@ -109,11 +142,6 @@ export const Select = ({
         e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
     };
 
-    useEffect(()=>{
-        const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
-        setNewSelected(parseSelectedData);
-    },[selected])
-
     useEffect(() => {
         if(opened){
             const checkIfClickedOutside = e => {
@@ -127,6 +155,26 @@ export const Select = ({
             }
         }
     }, [opened]);
+
+    useEffect(() => {
+        selected && selected.length > 0 && setNewSelected(selected);
+        if (!multiple) {
+            options && options.length > 0 && setExistOptions(options);
+        } else {
+            const modifiedOptions = options && options.length > 0 && options.map((item, index) => {
+                item.checked = false;
+                if (selected && selected.length > 0) {
+                    selected.map(innerItem => {
+                        if (innerItem.value === item.value) {
+                            item.checked = true;
+                        }
+                    });
+                }
+                return item;
+            });
+            setExistOptions(modifiedOptions);
+        }
+    }, [options, multiple, selected]);
     
     return (
         <div className={classProps}>
@@ -153,7 +201,7 @@ export const Select = ({
                     <div
                         style={{
                             cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
-                            height: selectedHeight ? selectedHeight : configStyles.SELECT.selectedHeight,
+                            minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
                             border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
                             padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
                             borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
@@ -165,8 +213,8 @@ export const Select = ({
                             borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
                         }}
                         onClick={disabled ? _ => _ : _ => handleOpenClose()}
-                        onMouseEnter={disabled ? _ => _ : handleMouseEnter}
-                        onMouseLeave={disabled ? _ => _ : handleMouseLeave}
+                        onMouseEnter={disabled ? _ => _ : _ => handleMouseEnter()}
+                        onMouseLeave={disabled ? _ => _ : _ => handleMouseLeave()}
                         className={`${styles['select-content-top']}`}
                     >
                         <div
@@ -175,14 +223,29 @@ export const Select = ({
                                 color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor,
                             }}
                         >
-                            {newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}
+                            {
+                                !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] :
+                                newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
+                                    if (newSelected[index][keyNames.name]) {
+                                        if (index > 0) {
+                                            return ', ' + newSelected[index][keyNames.name];
+                                        } else {
+                                            return newSelected[index][keyNames.name];
+                                        }
+                                    }
+                                }) : defaultOption ? defaultOption : ''
+                            }
                         </div>
                         <div className={`${styles['select-content-top-icon']}`}>
+                            {
+                                multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
+                            }
 
-                            {Object.keys(newSelected).length > 0 && 
+                            {newSelected && newSelected.length > 0 && 
                                 <div
-                                    className={`${styles['close-icon']}`}
-                                    onClick={disabled ? _ => _ : handleClearSelect}
+                                className={`${styles['close-icon']}`}
+                                onClick={disabled ? _ => _ : handleClearSelect}
+                                style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
                                 >
                                     { closeIcon ? closeIcon : <img src={ReactCloseIcon} alt="icon" /> }
                                 </div>
@@ -204,13 +267,13 @@ export const Select = ({
                                     boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
                                     borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
                                     backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-                                    top: parseFloat( selectedHeight ? selectedHeight.substring(0, selectedHeight.length - 2) : configStyles.SELECT.selectedHeight.substring(0, configStyles.SELECT.selectedHeight.length - 2)) + 6 + 'px'
+                                    top: parseFloat( selectedMinHeight ? selectedMinHeight.substring(0, selectedMinHeight.length - 2) : configStyles.SELECT.selectedMinHeight.substring(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
                                 }}
                                 className={`${styles['select-content-bottom']}`}
                             >
                                 <div className={`${styles['select-content-bottom-inner']}`}>
                                     {
-                                        options.map((option, i) => {
+                                        existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
                                             return <div
                                                         key={i}
                                                         disabled={true}
@@ -232,6 +295,7 @@ export const Select = ({
                                                             backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor,
                                                         }}
                                                     >
+                                                        {multiple && multipleCheckbox ? <SelectCheckbox checked={option.checked} /> : ''}
                                                         {option[keyNames.name]}
                                                     </div>
                                         })
@@ -259,17 +323,19 @@ export const Select = ({
 };
 
 Select.propTypes = {
+    options: PropTypes.array,
+    multiple: PropTypes.bool,
     onChange: PropTypes.func,
     required: PropTypes.bool,
     disabled: PropTypes.bool,
-    selected: PropTypes.string,
-    jsonData: PropTypes.string,
+    selected: PropTypes.array,
     keyNames: PropTypes.object,
     className: PropTypes.string,
     arrowIcon: PropTypes.element,
     closeIcon: PropTypes.element,
     errorMessage: PropTypes.string,
     defaultOption: PropTypes.string,
+    multipleCheckbox: PropTypes.bool,
 
     label: PropTypes.string,
     labelColor: PropTypes.string,
@@ -286,7 +352,7 @@ Select.propTypes = {
     selectedColor: PropTypes.string,
     selectedBorder: PropTypes.string,
     selectedRadius: PropTypes.string,
-    selectedHeight: PropTypes.string,
+    selectedMinHeight: PropTypes.string,
     selectedPadding: PropTypes.string,
     selectedFontSize: PropTypes.string,
     selectedBoxSizing: PropTypes.string,

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

@@ -3,6 +3,14 @@ import { Select } from ".";
 export default {
     component: Select,
     title: 'Components/Select',
+    argTypes: {
+        options: {
+            control: 'array'
+        },
+        selected: {
+            control: 'array'
+        }
+    }
 };
 
 const Template = (args) => <Select label='' {...args} >Default</Select>;
@@ -10,11 +18,11 @@ const Template = (args) => <Select label='' {...args} >Default</Select>;
 export const Default = Template.bind({});
 Default.args = {
     label: 'վարչական շրջան',
-    jsonData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}]',
+    options: [{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     onChange: (newValue)=> {
     },
-    defaultOption: '',
-    selected: '{"bbb":"2", "value":"Մալաթիա"}',
+    defaultOption: 'Ընտրել',
+    selected: [{"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     keyNames: {name: 'value', id : 'bbb'}
 };
 

package/src/components/selectCheckbox/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ReactCheckbox from './../../assets/icons/checkbox-unchecked.svg';
+import ReactCheckboxChecked from './../../assets/icons/checkbox-checked.svg';
+
+export const SelectCheckbox = ({ checked }) => {
+
+  return <div
+    style={{
+      marginRight: '9px'
+    }}
+  >
+    { checked ? <img src={ReactCheckboxChecked} /> : <img src={ReactCheckbox} /> }
+  </div>;
+};
+
+SelectCheckbox.propTypes = {
+  checked: PropTypes.bool,
+}

package/src/components/selectCheckbox/selectCheckbox.stories.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { SelectCheckbox } from ".";
+export default {
+  component: SelectCheckbox,
+  title: "Components/SelectCheckbox",
+};
+
+const Template = (args) => <SelectCheckbox {...args} />;
+
+export const Default = Template.bind({});

package/src/components/typography/index.js

@@ -22,8 +22,6 @@ export const Typography = ({
 	radius,
 	border,
 	cursor,
-	margin,
-	padding,
 	variant,
 	onClick,
 	children,
@@ -67,9 +65,7 @@ export const Typography = ({
 				cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
 				borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
 				fontSize: size ? size : configStyles.TYPOGRAPHY['size'+variant],
-				margin: margin ? margin : configStyles.TYPOGRAPHY['margin'+variant],
 				fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight'+variant],
-				padding: padding ? padding : configStyles.TYPOGRAPHY['padding'+variant],
 				textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
 				textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign'+variant],
 				fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle'+variant],
@@ -102,9 +98,7 @@ Typography.propTypes = {
 	weight: PropTypes.string,
 	border: PropTypes.string,
 	cursor: PropTypes.string,
-	margin: PropTypes.string,
 	radius: PropTypes.string,
-	padding: PropTypes.string,
 	textAlign: PropTypes.string,
 	className: PropTypes.string,
 	fontStyle: PropTypes.string,

package/src/index.js

@@ -12,4 +12,5 @@ export * from './components/checkbox';
 export * from './components/icon/Icon';
 export * from './components/typography';
 export * from './components/pagination';
-export * from './components/autocomplate';
+export * from './components/autocomplate';
+export * from './components/selectCheckbox';

package/src/stories/changelog.stories.mdx

@@ -114,5 +114,18 @@ import StackAlt from './assets/stackalt.svg';
   `}
 </style>
 
-# Documentation
+# Changelog
+
+### v0.0.59
+
+1. Change: errorMesage to errorMessage (in all components)
+
+### v0.0.60
+
+1. Change/Add/Remove: tui.config.js file, //SELECT prop name selectedHeight to selectedMinHeight, //INPUT new props, // TYPOGRAPHY remove some props
+2. Add: new component selectCheckbox
+3. Remove: unnecessary unmount from Filr component
+4. Change: select prop jsonData to options always get an array
+5. Add: new functionality on select component, multiple mode
+
 

package/src/stories/configuration.stories.mdx

@@ -144,7 +144,7 @@ import StackAlt from './assets/stackalt.svg';
     disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
     disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
     transition: 'background-color 240ms, color 240ms', // for transition
-},
+}
 ```
 
 ### Input
@@ -167,6 +167,7 @@ import StackAlt from './assets/stackalt.svg';
     errorColor: '#e00',                                // for error message color
     labelWeight: '500',                                // for label font weight
     errorClassName: '',                                // for error message classname (you can set custom class for your custom css)
+    phoneDisplay: 'flex',                              // for phone extention display, work when input type is tel
     autoComplete: 'off',                               // for autocomplete fill mode (browser specific, may not work)
     errorBottom: '-20px',                              // for error message position from bottom (work when errorPosition prop is 'absolute')
     padding: '12px 15px',                              // for padding
@@ -179,8 +180,10 @@ import StackAlt from './assets/stackalt.svg';
     backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color 
     color: 'rgb(60, 57, 62)',                          // for input color
     labelMarginBottom: '6px',                          // for label margin bottom
+    phoneAlignItems: 'center',                         // for phone extention inside item, work when input type is tel
     errorPosition: 'absolute',                         // for error message position (maybe you want to show error message in custom place)
     transform: 'scale3d(0,0,0)',                       // for transform (when have error message and errorAnimation prop is true)
+    phoneJustifyContent: 'center',                     // for phone extention inside item, work when input type is tel
     boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
     errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
     boxShadowHover: '0 0 0 2px #3c393e',               // for border size and color in hover mode (set if you want to change it)
@@ -214,15 +217,6 @@ import StackAlt from './assets/stackalt.svg';
     cursor: 'default',                                 // for cursor
     textShadow: 'none',                                // for text shadow
 
-    marginp: '0px',                                    // for variant p margin
-    marginh1: '0px',                                   // for variant h1 margin 
-    marginh2: '0px',                                   // for variant h2 margin
-    marginh3: '0px',                                   // for variant h3 margin
-    marginh4: '0px',                                   // for variant h4 margin
-    marginh5: '0px',                                   // for variant h5 margin
-    marginh6: '0px',                                   // for variant h6 margin
-    marginspan: '0px',                                 // for variant span margin
-
     colorp: '#3C393E',                                 // for variant p color
     colorh1: '#3C393E',                                // for variant h1 color
     colorh2: '#3C393E',                                // for variant h2 color 
@@ -230,16 +224,7 @@ import StackAlt from './assets/stackalt.svg';
     colorh4: '#3C393E',                                // for variant h4 color 
     colorh5: '#3C393E',                                // for variant h5 color
     colorh6: '#3C393E',                                // for variant h6 color
-    colorspan: '#3C393E',                              // for variant span color 
-
-    paddingp: '0px',                                   // for variant p padding
-    paddingh1: '0px',                                  // for variant h1 padding
-    paddingh2: '0px',                                  // for variant h2 padding
-    paddingh3: '0px',                                  // for variant h3 padding
-    paddingh4: '0px',                                  // for variant h4 padding
-    paddingh5: '0px',                                  // for variant h5 padding
-    paddingh6: '0px',                                  // for variant h6 padding
-    paddingspan: '0px',                                // for variant span padding
+    colorspan: '#3C393E',                              // for variant span color
 
     sizep: '13px',                                     // for variant p font size
     sizeh1: '70px',                                    // for variant h1 font size
@@ -344,15 +329,15 @@ import StackAlt from './assets/stackalt.svg';
     labelLineHeight: '22px',                           // for label line height
     labelMarginBottom: '6px',                          // for label margin bottom
     labelTextTransform: 'none',                        // for label text transform
-
+    
     errorSize: '14px',                                 // for error font size
     errorColor: 'rgb(238, 0, 0)',                      // for error color
 
     cursor: 'pointer',                                 // for selected cursor
     selectedRadius: '6px',                             // for selected border radius
-    selectedHeight: '46px',                            // for selected height
     selectedColor: '#3C393E',                          // for selected color
     selectedFontSize: '16px',                          // for selected font size
+    selectedMinHeight: '46px',                            // for selected height
     selectedFontWeight: '500',                         // for selected font weight
     selectedLineHeight: '22px',                        // for selected line height
     selectedPadding: '0px 15px',                       // for selected padding

package/tui.config.js

@@ -40,6 +40,7 @@ module.exports = {
         errorColor: '#e00',                                // for error message color
         labelWeight: '500',                                // for label font weight
         errorClassName: '',                                // for error message classname (you can set custom class for your custom css)
+        phoneDisplay: 'flex',                              // for phone extention display, work when input type is tel
         autoComplete: 'off',                               // for autocomplete fill mode (browser specific, may not work)
         errorBottom: '-20px',                              // for error message position from bottom (work when errorPosition prop is 'absolute')
         padding: '12px 15px',                              // for padding
@@ -52,8 +53,10 @@ module.exports = {
         backgroundColor: 'white',                          // for input and also (if there exist left or right icons) icons block background color 
         color: 'rgb(60, 57, 62)',                          // for input color
         labelMarginBottom: '6px',                          // for label margin bottom
+        phoneAlignItems: 'center',                         // for phone extention inside item, work when input type is tel
         errorPosition: 'absolute',                         // for error message position (maybe you want to show error message in custom place)
         transform: 'scale3d(0,0,0)',                       // for transform (when have error message and errorAnimation prop is true)
+        phoneJustifyContent: 'center',                     // for phone extention inside item, work when input type is tel
         boxShadow: '0 0 0 2px #d1d1d1',                    // for border size and color
         errorAnimationDuration: '240ms',                   // for animation duration (when have error message and errorAnimation prop is true)
         boxShadowHover: '0 0 0 2px #3c393e',               // for border size and color in hover mode (set if you want to change it)
@@ -80,15 +83,6 @@ module.exports = {
         cursor: 'default',                                 // for cursor
         textShadow: 'none',                                // for text shadow
 
-        marginp: '0px',                                    // for variant p margin
-        marginh1: '0px',                                   // for variant h1 margin 
-        marginh2: '0px',                                   // for variant h2 margin
-        marginh3: '0px',                                   // for variant h3 margin
-        marginh4: '0px',                                   // for variant h4 margin
-        marginh5: '0px',                                   // for variant h5 margin
-        marginh6: '0px',                                   // for variant h6 margin
-        marginspan: '0px',                                 // for variant span margin
-
         colorp: '#3C393E',                                 // for variant p color
         colorh1: '#3C393E',                                // for variant h1 color
         colorh2: '#3C393E',                                // for variant h2 color 
@@ -96,16 +90,7 @@ module.exports = {
         colorh4: '#3C393E',                                // for variant h4 color 
         colorh5: '#3C393E',                                // for variant h5 color
         colorh6: '#3C393E',                                // for variant h6 color
-        colorspan: '#3C393E',                              // for variant span color 
-
-        paddingp: '0px',                                   // for variant p padding
-        paddingh1: '0px',                                  // for variant h1 padding
-        paddingh2: '0px',                                  // for variant h2 padding
-        paddingh3: '0px',                                  // for variant h3 padding
-        paddingh4: '0px',                                  // for variant h4 padding
-        paddingh5: '0px',                                  // for variant h5 padding
-        paddingh6: '0px',                                  // for variant h6 padding
-        paddingspan: '0px',                                // for variant span padding
+        colorspan: '#3C393E',                              // for variant span color
 
         sizep: '13px',                                     // for variant p font size
         sizeh1: '70px',                                    // for variant h1 font size
@@ -206,15 +191,15 @@ module.exports = {
         labelLineHeight: '22px',                           // for label line height
         labelMarginBottom: '6px',                          // for label margin bottom
         labelTextTransform: 'none',                        // for label text transform
-
+        
         errorSize: '14px',                                 // for error font size
         errorColor: 'rgb(238, 0, 0)',                      // for error color
 
         cursor: 'pointer',                                 // for selected cursor
         selectedRadius: '6px',                             // for selected border radius
-        selectedHeight: '46px',                            // for selected height
         selectedColor: '#3C393E',                          // for selected color
         selectedFontSize: '16px',                          // for selected font size
+        selectedMinHeight: '46px',                            // for selected height
         selectedFontWeight: '500',                         // for selected font weight
         selectedLineHeight: '22px',                        // for selected line height
         selectedPadding: '0px 15px',                       // for selected padding