@xaypay/tui 0.0.55 → 0.0.57

package/tui.config.js

@@ -16,10 +16,10 @@ module.exports = {
         padding: '12px 20px',                              // for padding
         textTransform: 'none',                             // for text transform
         boxSizing: 'border-box',                           // for box sizing
-        bgColor: 'rgba(0, 35, 106, 1)',                    // for background color
         disabledColor: 'rgba(60, 57, 62, 1)',              // for color in disabled mode
+        backgroundColor: 'rgba(0, 35, 106, 1)',            // for background color
         disabledLineColor: 'rgba(60, 57, 62, 1)',          // for border color (outline) in disabled mode
-        disabledBgColor: 'rgba(238, 238, 238, 1)',         // for background color in disabled mode
+        disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
         transition: 'background-color 240ms, color 240ms', // for transition
     },
     // default properties for <Input /> component
@@ -30,7 +30,6 @@ module.exports = {
         radius: '0px',                                     // for input and also (if there exist left or right icons) icons block border-radius
         className: '',                                     // for input classname (you can set custom class for your custom css)
         height: '46px',                                    // for height
-        tooltip: false,                                    // for tooltip
         required: false,                                   // for showing required mark on label (it meens input is required)
         disabled: false,                                   // for disabled
         errorLeft: '0px',                                  // for error message position from left (work when errorPosition prop is 'absolute')
@@ -59,9 +58,20 @@ module.exports = {
         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)
     },
+    // default properties for <Tooltip /> component
     TOOLTIP: {
-        width: '46px',
-        height: '46px'
+        type: 'top',                                       // for tooltip type (top, right, bottom, left)
+        width: '46px',                                     // for tooltip parent block width
+        radius: '0px',                                     // for tooltip parent block border radius
+        className: '',                                     // for tooltip className (maybe you want to add your custom class for your custom css)
+        color: 'white',                                    // for tooltip color
+        height: '46px',                                    // for tooltip parent block height
+        fontSize: '14px',                                  // for tooltip font size
+        tooltipRadius: '3px',                              // for tooltip border radius
+        tooltipWidth: '100px',                             // for tooltip width
+        backgroundColor: 'transparent',                    // for tooltip parent block background color (maybe you want to see it)
+        fontFamily: 'Arial, sans-serif',                   // for tooltip font family
+        tooltipBackgroundColor: '#03a9f4'                  // for tooltip backgrond color
     },
     // default properties for <Typography /> component
     TYPOGRAPHY: {
@@ -133,14 +143,14 @@ module.exports = {
         colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
         colorHoverspan: '#3C393E',                         // for variant span color in hover mode
 
-        bgColorp: 'transparent',                           // for variant p background color
-        bgColorh1: 'transparent',                          // for variant h1 background color
-        bgColorh2: 'transparent',                          // for variant h2 background color
-        bgColorh3: 'transparent',                          // for variant h3 background color
-        bgColorh4: 'transparent',                          // for variant h4 background color
-        bgColorh5: 'transparent',                          // for variant h5 background color
-        bgColorh6: 'transparent',                          // for variant h6 background color
-        bgColorspan: 'transparent',                        // for variant span background color
+        backgroundColorp: 'transparent',                   // for variant p background color
+        backgroundColorh1: 'transparent',                  // for variant h1 background color
+        backgroundColorh2: 'transparent',                  // for variant h2 background color
+        backgroundColorh3: 'transparent',                  // for variant h3 background color
+        backgroundColorh4: 'transparent',                  // for variant h4 background color
+        backgroundColorh5: 'transparent',                  // for variant h5 background color
+        backgroundColorh6: 'transparent',                  // for variant h6 background color
+        backgroundColorspan: 'transparent',                // for variant span background color
 
         textDecorationp: 'none',                           // for variant p text decoration
         textDecorationh1: 'none',                          // for variant h1 text decoration
@@ -186,5 +196,49 @@ module.exports = {
         fontFamilyh5: 'Arial, sans-serif',                 // for variant h5 font family
         fontFamilyh6: 'Arial, sans-serif',                 // for variant h6 font family
         fontFamilyspan: 'Arial, sans-serif',               // for variant span font family
+    },
+    // default properties for <Select /> component
+    SELECT: {
+        labelWeight: '500',                                // for label font weight
+        labelColor: '#3C393E',                             // for label color
+        labelDisplay: 'block',                             // for label display
+        labelFontSize: '16px',                             // for label font size
+        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
+        selectedFontWeight: '500',                         // for selected font weight
+        selectedLineHeight: '22px',                        // for selected line height
+        selectedPadding: '0px 15px',                       // for selected padding
+        selectedBorder: '2px solid',                       // for selected border
+        selectedHoverColor: '#373538',                     // for selected color ( when hover )
+        selectedBorderColor: '#D1D1D1',                    // for selected border color
+        selectedBoxSizing: 'border-box',                   // for selected box sizing
+        selectedTransition: 'border-color 240ms',          // for selected transition
+
+        optionsBorderRadius: '6px',                        // for options block border radius
+        optionsBackgroundColor: '#FBFBFB',                 // for options block background color
+        optionsBoxShadow: '0 0 10px rgba(60, 57, 62, 0.08)',  // for options block box shadow
+
+        optionItemColor: '#3C393E',                        // for option color
+        optionItemFontSize: '16px',                        // for option font size
+        optionItemCursor: 'pointer',                       // for option cursor
+        optionItemMinHeight: '46px',                       // for option min height
+        optionItemFontWeight: '500',                       // for option font weight
+        optionItemLineHeight: '22px',                      // for option line height
+        optionItemPadding: '0px 15px',                     // for option padding
+        optionItemMarginBottom: '2px',                     // for option margin bottom
+        optionItemColorHover: '#00236A',                   // for option color ( when hover )
+        optionItemBoxSizing: 'border-box',                 // for option box sizing
+        optionItemBackgroudColor: '#ffffff',               // for option background color
+        optionItemBackgroudColorHover: 'unset',            // for option background color ( when hover )
     }
 };

package/src/components/multiselect/index.js

@@ -1,96 +0,0 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./multiselect.module.css";
-import Icon from '../icon/Icon'
-
-export const Multiselect = ({
-  className,
-  label,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
-  onchange,
-  keyNames,
-  value
-}) => {
-  const [searchedOptions, setSearchedOptions] = useState(jsonOptionsData.length ? JSON.parse(jsonOptionsData) : []);
-  const [options, setOptions] = useState(jsonSelectedOptionsData?.length ? JSON.parse(jsonSelectedOptionsData) : []);
-  const [values, setValues] = useState(jsonOptionsData.length ? JSON.parse(jsonOptionsData) : []);
-  const [opened, setOpened] = useState(false);
-  return (
-    <div className={`${styles.main} multi-select`}>
-      {label ? <label className={`${styles['multi-select-title']} multi-select-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-      <div className={`${styles['multi-select-content-top']} multi-select-content-top-rem`} onClick={() => { setOpened(!opened) }}>
-        {
-          options.map((option, i) => {
-            return (<div className={`${styles['multi-select-content-bottom-row']} multi-select-content-bottom-row-rem`} key={option[keyNames.id]}>
-              <div id={option[keyNames.id]}>{option[keyNames.name]}</div>
-              <div
-                onClick={() => {
-                  options.splice(i, 1);
-                  setOptions(options);
-                  setValues([...values, option]);
-                  setSearchedOptions([...values, option]);
-                  setOpened(true);
-                }}
-              >
-                {/*<Icon className='icon-close' />*/}
-                <i className='icon-close'></i>
-              </div>
-
-            </div>)
-          })
-        }
-
-        <input onChange={(e) => {
-          setValues(e.target.value ? searchedOptions.filter((option) => {
-            return option[keyNames.name].toLowerCase().includes(e.target.value.toLowerCase())
-          }) : searchedOptions)
-
-
-        }} className={styles.input} type='text' />
-        <div className={`${styles['select-content-top-icon']} select-content-top-icon-rem`}>
-          <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'} />
-        </div>
-      </div>
-      {
-
-        opened ? <div className={`${styles['multi-select-content-bottom']} multi-select-content-bottom-rem`} onClick={onchange}>
-          <div className={`${styles['multi-select-content-bottom-inner']} multi-select-content-bottom-inner-rem`}>
-            {
-              values.length ?
-                values.map((value, i) => {
-                  return (<div
-                    className={`${styles['multi-select-content-bottom-row']} multi-select-content-bottom-row-rem`}
-                    key={value[keyNames.id]}
-                    id={value.id}
-                    onClick={(e) => {
-                      setOptions([...options, { [keyNames.name]: value[keyNames.name], [keyNames.id]: value[keyNames.id] }])
-                      values.splice(i, 1);
-                      setValues(values);
-                      setSearchedOptions(values);
-                    }}>
-                    {value[keyNames.name]}
-                  </div>)
-                }) :
-                <div className={`${styles['no-elements']} no-elements-rem`}>No Elements!</div>
-            }
-          </div>
-        </div> : null
-      }
-
-    </div>
-  );
-};
-
-Multiselect.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  jsonOptionsData: PropTypes.string,
-  jsonSelectedOptionsData: PropTypes.string,
-  onchange: PropTypes.func,
-  keyNames: PropTypes.object,
-};
-
-Multiselect.defaultProps = {
-  required: false,
-};

package/src/components/multiselect/multiselect.module.css

@@ -1,137 +0,0 @@
-.fff {
-    background: red;
-}
-.multi-select-title {
-    display: block;
-    text-transform: none;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    margin-bottom: 6px;
-}
-.multi-select-title span {
-    font-size: 16px;
-    line-height: 20px;
-    color: #ff0000;
-}
-.multi-select-content {
-    display: flex;
-    flex-direction: column;
-}
-.multi-select-content-top {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    max-width: 840px;
-    height: 46px;
-    gap: 10px;
-    padding: 0 40px 0 15px;
-    font-size: 16px;
-    color: #3C393E;
-    line-height: 22px;
-    font-weight: 500;
-    border: 2px solid #D1D1D1;
-    border-radius: 6px;
-    transition: border-color 240ms;
-    box-sizing: border-box;
-    cursor: pointer;
-}
-.select-content-top-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 100%;
-}
-.select-content-top-icon i {
-    font-size: 10px;
-}
-.multi-select-content-top.active {
-    border-color: #00236A;
-}
-.multi-select-content-top:hover {
-    border-color: #3C393E;
-}
-.multi-select-content-bottom {
-    position: relative;
-    top: 6px;
-    overflow: hidden;
-    max-width: 840px;
-    background: #ffffff;
-    box-shadow: 0 0 10px rgba(60, 57, 62, 0.08);
-    border-radius: 6px;
-    animation: multi-select-show 640ms linear forwards;
-    max-height: 0;
-}
-.multi-select-content-bottom-inner {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 234px;
-    padding: 10px;
-    gap: 8px;
-}
-@keyframes multi-select-show {
-    100% {
-        max-height: 400px;
-    }
-}
-.multi-select-content-top-text {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-}
-.multi-select-content-top-icon {
-    padding: 0 5px 0 20px;
-    box-sizing: border-box;
-}
-.multi-select-content-top-icon {
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
-}
-.multi-select-content-top-icon > i{
-    font-size: 8px;
-    color: #3C393E;
-}
-.multi-select-content-bottom-row {
-    display: flex;
-    align-items: center;
-    background: #ffffff;
-    padding: 0 10px;
-    height: 30px;
-    font-size: 16px;
-    color: #3C393E;
-    border: 1px solid #D1D1D1;
-    line-height: 20px;
-    font-weight: 500;
-    border-radius: 4px;
-    box-sizing: border-box;
-    transition: border-color 240ms, color 240ms;
-    cursor: pointer;
-}
-.multi-select-content-bottom-row:hover {
-    color: #00236A;
-    border-color: #00236A;
-}
-.multi-select-content-top .multi-select-content-bottom-row i {
-    padding: 0 8px;
-    font-size: 10px;
-}
-.multi-select-content-top .multi-select-content-bottom-row {
-    border: 0;
-    padding: 0;
-}
-.no-elements {
-    color: #ff0000;
-}

package/src/components/multiselect/multiselect.stories.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Multiselect } from "./index";
-
-export default {
-    component: Multiselect,
-    title: "Components/Multiselect",
-};
-
-const Template = (args) => <Multiselect {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-    jsonOptionsData: '[{"bbb":"1", "value":"Կենտրոն"}]',
-    jsonSelectedOptionsData: '[{"bbb":"0", "value":"Արաբկիր"}, {"bbb":"2", "value":"Մալաթիա"}]',
-    label: 'label',
-    onchange: (newValue) => {
-        console.log(newValue);
-    },
-    keyNames: { name: 'value', id: 'bbb' }
-};