imbric-theme 1.0.7 → 1.0.9

package/.nvmrc

@@ -1 +1 @@
-v15
+16.13.2

package/atoms/Icon/Icon.js

@@ -18,28 +18,59 @@ export const Icon = ({
   size,
   isClickable,
   getStyles,
+  disabled,
 }) => {
   const icon = iconsMap[name]
   const mappedSize = mapSize(size)
 
   return (
-    <div
-      id={id}
-      className={getStyles(className, 'icon', ['color', 'size', 'background'], {
-        'is-clickable': isClickable || !!onClick,
-      })}
-      style={{ width: mappedSize, height: mappedSize }}
-      onClick={onClick && handleClick({ onClick })}
-    >
-      <svg
-        viewBox={icon.viewBox}
-        xmlns="http://www.w3.org/2000/svg"
-        width={mappedSize}
-        height={mappedSize}
+
+    !disabled ?
+      <div
+        id={id}
+        className={getStyles(className, 'icon', ['color', 'size', 'background'], {
+          'is-clickable': isClickable || !!onClick,
+        })}
+        style={{ width: mappedSize, height: mappedSize }
+        }
+        onClick={onClick && handleClick({ onClick })}
+      >
+        <svg
+          viewBox={icon.viewBox}
+          xmlns="http://www.w3.org/2000/svg"
+          width={mappedSize}
+          height={mappedSize}
+        >
+          {icon.svg}
+        </svg>
+      </div >
+
+      :
+
+      <div
+        id={id}
+        className={getStyles(className, 'icon', ['color', 'size', 'background'], {
+          'is-clickable': isClickable || !!onClick,
+          'is-disabled': disabled,
+        })}
+        style={{ width: mappedSize, height: mappedSize }
+        }
       >
-        {icon.svg}
-      </svg>
-    </div>
+        <svg
+          viewBox={icon.viewBox}
+          xmlns="http://www.w3.org/2000/svg"
+          width={mappedSize}
+          height={mappedSize}
+          className={getStyles({
+            'is-disabled': disabled,
+          })}
+        >
+          {icon.svg}
+        </svg>
+      </div >
+
+
+
   )
 }
 
@@ -53,6 +84,7 @@ Icon.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
   isClickable: PropTypes.bool,
+  disabled: PropTypes.bool,
 }
 
 Icon.defaultProps = {
@@ -60,6 +92,7 @@ Icon.defaultProps = {
   color: 'base',
   background: 'transparent',
   isClickable: false,
+  disabled: false,
   getStyles: () => { },
 }
 

package/atoms/Icon/Icon.module.css

@@ -140,3 +140,8 @@
 .is-clickable {
   cursor: pointer;
 }
+
+.is-disabled {
+  cursor: no-drop;
+  fill: #e8e8e8;
+}

package/atoms/Icon/constants.js

@@ -1071,6 +1071,17 @@ export const iconsMap = {
       </>
     ),
   },
+  iconSave: {
+    viewBox: '0 0 24 24',
+    svg: (
+      <>
+        <path d="M21.7,23.8H0.2V2.3c0-1.1,0.9-2,2-2h17.2l4.3,3.7v17.8C23.8,22.8,22.8,23.8,21.7,23.8z M1.8,22.3h20c0.3,0,0.5-0.2,0.5-0.5
+	V4.6l-3.3-2.9H2.3C2,1.7,1.8,2,1.8,2.3V22.3z"/>
+        <path d="M18.1,9.7H5.9V0.2h12.3V9.7z M7.4,8.2h9.3V1.7H7.4V8.2z" />
+        <path d="M20,23.8H4V13.5h16V23.8z M5.5,22.3h13V15h-13V22.3z" />
+      </>
+    ),
+  },
 }
 
 

package/atoms/Icon/save-file-svgrepo-com.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M21.7,23.8H0.2V2.3c0-1.1,0.9-2,2-2h17.2l4.3,3.7v17.8C23.8,22.8,22.8,23.8,21.7,23.8z M1.8,22.3h20c0.3,0,0.5-0.2,0.5-0.5
+	V4.6l-3.3-2.9H2.3C2,1.7,1.8,2,1.8,2.3V22.3z"/>
+<path d="M18.1,9.7H5.9V0.2h12.3V9.7z M7.4,8.2h9.3V1.7H7.4V8.2z"/>
+<path d="M20,23.8H4V13.5h16V23.8z M5.5,22.3h13V15h-13V22.3z"/>
+</svg>

package/atoms/Input/Input.js

@@ -50,6 +50,7 @@ export const Input = ({
   onClickModal,
   formikForm,
   inputExtra,
+  cleanSelected,
 }) => {
 
   const onClickDeleteInput = (results, id) => {
@@ -63,6 +64,10 @@ export const Input = ({
       inputExtra([])
     }
 
+    if (cleanSelected) {
+      cleanSelected()
+    }
+
   }
 
   const pulsar = (e, id) => {
@@ -164,15 +169,13 @@ export const Input = ({
           : isOpenModal
 
             ?
-            <div className={getStyles('DynamicSelect_dynamic-select__oduOS')}>
+            <div style={{ pointerEvents: disabled ? 'none' : 'all' }} id="onClickModalDynamicSelect_dynamic" className={getStyles('DynamicSelect_dynamic-select__oduOS')}>
               <div className={getStyles('css-1mfv3n-container')}>
-                <div style={{ zIndex: 1 }} className={getStyles('css-mlo5or-control')}>
+                <div style={{ zIndex: 1, background: disabled ? '#eeeeee' : 'hsl(0, 0%, 100%)' }} className={getStyles('css-mlo5or-control')}>
                   <div onClick={(op) => onClickModal(op, id)} style={{ height: '36px' }} className={getStyles('css-1huup54-ValueContainer')}>
                     <div className={getStyles('css-qc6sy-singleValue')}>{value}</div>
                   </div>
                   <div className={getStyles('css-1hb7zxy-IndicatorsContainer')}>
-
-
                     {value !== '' ? <div onClick={(op) => onClickDeleteInput(op, id)} className={getStyles('css-tlfecz-indicatorContainer')} aria-hidden="true">
                       <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" className={getStyles('css-tj5bde-Svg')} >
                         <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>

package/atoms/Toggle/Toggle.module.css

@@ -10,7 +10,8 @@
   z-index: 1;
   cursor: pointer;
 }
-.toggle-item + .checkbox-custom-label {
+
+.toggle-item+.checkbox-custom-label {
   display: flex;
   width: 4em;
   height: 2em;
@@ -21,7 +22,8 @@
   cursor: pointer;
   box-shadow: inset 0 0 5px #222;
 }
-.toggle-item + .checkbox-custom-label:after {
+
+.toggle-item+.checkbox-custom-label:after {
   content: '';
   position: absolute;
   width: 1.5em;
@@ -32,10 +34,17 @@
   left: .25em;
   transition: all .2s ease;
 }
-.toggle-item:checked + .checkbox-custom-label {
+
+.toggle-item:checked+.checkbox-custom-label {
   background: var(--color-tertiary);
   box-shadow: inset 0 0 5px rgb(95, 95, 95);
 }
-.toggle-item:checked + .checkbox-custom-label:after {
+
+.toggle-item:checked+.checkbox-custom-label:after {
   left: 2.3em;
+}
+
+.toggle-item:disabled+.checkbox-custom-label {
+  background: #dedede;
+  cursor: no-drop;
 }

package/index.js

@@ -56,7 +56,7 @@ export { default as ColumnTable } from './molecules/ColumnTable'
 export { default as RowTable } from './molecules/RowTable'
 export { default as FooterTable } from './molecules/FooterTable'
 export { default as DynamicSelect } from './molecules/DynamicSelect'
-export { default as DatePicker } from './molecules/DynamicSelect'
+export { default as DatePicker } from './molecules/DatePicker'
 export { default as CardDefault } from './molecules/CardDefault'
 export { default as Tabs } from './molecules/Tabs'
 export { default as DatePickerTime } from './molecules/DatePickerTime'

package/layout/DynamicTable/DynamicTable.js

@@ -71,6 +71,7 @@ export const DynamicTable = ({
   titleHeadingTable,
   titleHeadingTableSecundary,
   handleChangeCheckboxDate,
+  isMultiSelectFilter,
 }) => {
 
   const [tableData, setTableData] = useState(optionsData)
@@ -95,7 +96,10 @@ export const DynamicTable = ({
   }
 
   useEffect(() => {
-    setColumnsData(opColumns);
+    setColumnsData(opColumns)
+    setFilterTableData(opFilterTable)
+    setAddColumsData(opAddColumns)
+    setFilterSecondaryTableData(opFilterSecondaryTable)
   })
 
   const handleSorting = (sortField, sortOrder) => {
@@ -290,6 +294,7 @@ export const DynamicTable = ({
                   closeMenuOnSelect={false}
                   isClearable={false}
                   instanceId={'idFilterTableAll'}
+                  isMulti={isMultiSelectFilter}
                 // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
                 /> : null
               }
@@ -473,6 +478,7 @@ DynamicTable.propTypes = {
   txtTootipFileDownload: PropTypes.string,
   titleHeadingTable: PropTypes.string,
   titleHeadingTableSecundary: PropTypes.string,
+  isMultiSelectFilter: PropTypes.bool,
 }
 
 DynamicTable.defaultProps = {
@@ -518,6 +524,7 @@ DynamicTable.defaultProps = {
   txtTootipFileDownload: '',
   titleHeadingTable: 'Total: 200',
   titleHeadingTableSecundary: '',
+  isMultiSelectFilter: false,
 }
 
 export default withStyles(styles)(DynamicTable)

package/molecules/ColumnTable/ColumnTable.js

@@ -100,14 +100,30 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                 {props.viewIsFilter ? (
 
                   props.typeFilter === 'select' ?
-                    <DynamicSelect
-                      isInline
-                      // onChange={item => useStateDate([item.selection])}
-                      onChange={item => { onChangeSelect(item, props.idInput) }}
-                      optionsSelect={opSelect || props.optionsSelect}
-                      placeholder={props.placeholder}
-                      maxMenuHeight={110}
-                    />
+
+
+                    props.opSelectSecundary ?
+
+                      <DynamicSelect
+                        isInline
+                        // onChange={item => useStateDate([item.selection])}
+                        onChange={item => { onChangeSelect(item, props.idInput) }}
+                        optionsSelect={props.optionsSelect}
+                        placeholder={props.placeholder}
+                        maxMenuHeight={110}
+                      />
+
+                      :
+
+                      <DynamicSelect
+                        isInline
+                        // onChange={item => useStateDate([item.selection])}
+                        onChange={item => { onChangeSelect(item, props.idInput) }}
+                        optionsSelect={opSelect || props.optionsSelect}
+                        placeholder={props.placeholder}
+                        maxMenuHeight={110}
+                      />
+
                     :
                     <Input
                       isInputFilter

package/molecules/DynamicSelect/DynamicSelect.js

@@ -63,21 +63,24 @@ export const DynamicSelect = ({
   hideSelectedOptions,
   menuPlacement,
   getOptionValue,
-  getOptionLabel
+  getOptionLabel,
+  isMaxContent,
+  id,
 }) => {
 
 
   const customStyles = {
-
     option: (base, state) => ({
       ...base,
       cursor: 'pointer',
-      width: "max-content",
-      minWidth: "100%",
+      width: 'max-content',
+      minWidth: '100%',
       position: 'relative',
-      backgroundColor: state.isSelected ? 'var(--color-primary)' : 'transparent',
-      "&:hover": {
-        backgroundColor: "var(--color-primary-highlight)",
+      backgroundColor: state.isSelected
+        ? 'var(--color-primary)'
+        : 'transparent',
+      '&:hover': {
+        backgroundColor: 'var(--color-primary-highlight)',
         color: 'var(--color-primary)',
       },
       // "&:active": {
@@ -87,13 +90,16 @@ export const DynamicSelect = ({
     control: (base, state) => ({
       ...base,
       cursor: 'pointer',
-      width: '100%',
+      width: isMaxContent ? 'max-content' : '100%',
+      flexWrap: 'nowrap',
       borderRadius: 0,
       border: 'var(--border-width-thin) solid var(--color-brand-white-lilac)',
       // border: state.isFocused ? "var(--border-width-thin) solid var(--color-brand-white-lilac)" : "var(--border-width-thin) solid var(--color-brand-white-lilac)",
-      boxShadow: state.isFocused ? "0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)" : "none",
-      "&:hover": {
-        borderColor: "var(--color-primary)"
+      boxShadow: state.isFocused
+        ? '0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary)'
+        : 'none',
+      '&:hover': {
+        borderColor: 'var(--color-primary)',
       },
     }),
     input: (base) => ({
@@ -113,51 +119,47 @@ export const DynamicSelect = ({
       textOverflow: 'ellipsis',
     }),
 
-    valueContainer: (base, state) => ({
+    valueContainer: (base) => ({
       ...base,
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap",
-      overflow: "hidden",
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
       // display: "inline-grid"
       // maxHeight: "38px",
     }),
 
-    container: (base) => ({
+    singleValue: (base) => ({
       ...base,
-      // width: "max-content",
-      minWidth: "100%",
+      overflow: 'visible',
     }),
 
-    menu: (base) => ({
+    container: (base) => ({
       ...base,
-      width: "max-content",
-      minWidth: "100%",
+      // width: "max-content",
+      minWidth: '100%',
+      width: 'fit-content',
     }),
 
-    multiValue: (base) => ({
+    menu: (base) => ({
       ...base,
-      color: "hsl(0deg 100% 50%)",
-      zIndex: "40",
-      // width: "max-content",
-      // minWidth: "100%",
+      width: 'fit-content',
+      minWidth: '100%',
+      zIndex: 10000000000,
     }),
 
-    MultiValueGeneric: (base) => ({
+    menuPortal: (base) => ({
       ...base,
-      color: "hsl(0deg 100% 50%)",
-      // width: "max-content",
-      // minWidth: "100%",
+      zIndex: 999999999999,
     }),
 
-    // menu: styles => ({ ...styles,                 
+    // menu: styles => ({ ...styles,
     //   width: '500px'
-    //  })  
+    //  })
 
     // indicatorsContainer: (provided, state) => ({
     //   ...provided,
     //   height: '50px',
     // }),
-
   }
 
 
@@ -170,6 +172,7 @@ export const DynamicSelect = ({
 
       {sortableMultiSelect ?
         <SortableSelect
+          id={id}
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
@@ -185,6 +188,7 @@ export const DynamicSelect = ({
           defaultValue={defaultValue}
           value={value}
           onChange={onChange}
+          onBlur={onBlur}
           components={{
             MultiValue: SortableMultiValue,
             MultiValueLabel: SortableMultiValueLabel
@@ -204,6 +208,7 @@ export const DynamicSelect = ({
         />
         :
         <Select
+          id={id}
           name="basic"
           // className="basic-single"
           // classNamePrefix="select"
@@ -283,6 +288,7 @@ DynamicSelect.defaultProps = {
   sortableMultiSelect: false,
   hideSelectedOptions: true,
   menuPlacement: 'auto',
+  isMaxContent: false,
   // getOptionValue: () => { option => option.value },
   // getOptionLabel: () => { option => option.label },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imbric-theme",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Components library IMBRIC",
   "private": false,
   "main": "index.js",