imbric-theme 0.7.1 → 0.7.3

package/atoms/Modal/Modal.js

@@ -37,6 +37,7 @@ export const Modal = ({
   isPlayground,
   titleModal,
   isFullWidth,
+  isFullWidthSoft,
 }) => {
   const isDesktop = useMedia(['(min-width: 992px)'], [true])
   const [onFadeOut, setOnFadeOut] = useState(false)
@@ -52,13 +53,13 @@ export const Modal = ({
       onClick={handleClose}
     >
       <div
-        className={getStyles(isFullWidth ? 'modal-full' : 'modal', ['type'])}
+        className={getStyles(isFullWidth ? 'modal-full' : isFullWidthSoft ? 'modal-full-soft' : 'modal', ['type'])}
         onClick={createHandlerClick()}
       >
         <div className={getStyles('heading')}>
           {!!onClose && (
             <Icon
-            id='btnColsedModal'
+              id='btnColsedModal'
               color={isDesktop && type === 'secondary' ? 'primary' : 'primary'}
               name={isDesktop ? 'cross' : 'angleLeft'}
               background={isDesktop ? 'transparent' : 'muted'}
@@ -76,13 +77,19 @@ export const Modal = ({
               })}
             />
           )}
-					<Heading color='black' size='lg' weight='light'>
-						{titleModal}
-					</Heading>
+          <Heading color='black' size='lg' weight='light'>
+            {titleModal}
+          </Heading>
         </div>
 
-        {isFullWidth ? <div className={getStyles('container-full')}>{children}</div> : <Container><div className={getStyles('container')}>{children}</div></Container>}
-        
+        {isFullWidth ?
+          <div className={getStyles('container-full')}>{children}</div>
+          :
+          isFullWidthSoft ? <div className={getStyles('container-full-soft')}>{children}</div>
+            :
+            <Container><div className={getStyles('container')}>{children}</div></Container>
+        }
+
       </div>
     </div>
   )
@@ -99,14 +106,16 @@ Modal.propTypes = {
   type: PropTypes.oneOf(options.types),
   isPlayground: PropTypes.bool,
   isFullWidth: PropTypes.bool,
+  isFullWidthSoft: PropTypes.bool,
   titleModal: PropTypes.string,
 }
 
 Modal.defaultProps = {
-  getStyles: () => {},
+  getStyles: () => { },
   type: 'primary',
   titleModal: 'Ejemplo titulo',
-  isFullWidth: false
+  isFullWidth: false,
+  isFullWidthSoft: false
 }
 
 export default withStyles(styles)(Modal)

package/atoms/Modal/Modal.module.css

@@ -32,6 +32,14 @@
   padding: 16px 32px;
 }
 
+.modal-full-soft {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 32px;
+}
+
 :not(.is-playground)>.modal {
   animation: fadeInModal 0.4s ease-in forwards;
   opacity: 0;
@@ -84,6 +92,12 @@
     padding: 16px 32px;
   }
 
+  .modal-full-soft {
+    width: 90%;
+    height: auto;
+    border-radius: var(--border-radius-sm);
+  }
+
   .heading {
     flex-direction: row-reverse;
   }
@@ -98,6 +112,13 @@
     overflow: auto;
     min-width: 100%;
   }
+
+  .container-full-soft {
+    max-height: 600px;
+    overflow: auto;
+    min-width: 100%;
+  }
+
 }
 
 @keyframes fadeInModal {

package/layout/DynamicTable/DynamicTable.js

@@ -101,6 +101,7 @@ export const DynamicTable = ({
                 optionsSelect={addColumsData}
                 placeholder={placeholderDinamicSelect}
                 defaultValue={handleDefaultValue}
+                closeMenuOnSelect={false}
               // defaultValue= { [{value: 'id', label: 'ID'}, {value: 'idService', label: 'ID Reserva'}] }
               /> : null
             }
@@ -108,22 +109,26 @@ export const DynamicTable = ({
           </div>
         ) : null}
 
-        <Horizontal size="md" />
+
 
         {isViewBtn ? (
-          <div className={getStyles('opFunctionBox3')}>
 
-            <Button
-              type={typeBtn}
-              isInline={true}
-              onClick={handleBtn}
-            >
-              {titleBtn}
-            </Button>
+          <>
 
-            <Horizontal size="md" />
+            <div className={getStyles('opFunctionBox3')}>
 
-          </div>
+              <Button
+                type={typeBtn}
+                isInline={true}
+                onClick={handleBtn}
+              >
+                {titleBtn}
+              </Button>
+
+              <Horizontal size="md" />
+
+            </div>
+          </>
         ) : null}
 
 

package/layout/DynamicTable/DynamicTable.module.css

@@ -5,6 +5,10 @@
   width: 100%;
 }
 
+.opFunctionBox3 {
+  margin-left: 16px;
+}
+
 /* .opFunctionBox1 {
   display: inline-flex;
 } */

package/layout/Navbar/Navbar.module.css

@@ -1,4 +1,3 @@
-
 /* .is-playground {
   border: var(--border-width-thick) dashed var(--color-primary);
 } */
@@ -13,6 +12,7 @@
     box-shadow: 0px 1px 4px rgb(100 116 139 / 12%);
     width: calc(100%);
     padding-left: 18px;
+    padding-right: 14px;
     min-height: 51px;
     background-color: #f2fcfc;
 }

package/molecules/ColumnTable/ColumnTable.js

@@ -105,6 +105,7 @@ export const ColumnTable = ({ getStyles, handleSorting, columnUppercase, onChang
                       onChange={onChangeSelect}
                       optionsSelect={opSelect}
                       placeholder={props.placeholder}
+                      maxMenuHeight={110}
                     />
                     :
                     <Input

package/molecules/ColumnTable/ColumnTable.module.css

@@ -9,6 +9,9 @@
   border-bottom-color: rgba(0, 0, 0, 0.12);
   border-bottom-width: 1px;
   border-bottom-style: solid;
+  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
 .column-uppercase {

package/molecules/DynamicSelect/DynamicSelect.js

@@ -5,7 +5,25 @@ import styles from './DynamicSelect.module.css'
 import withStyles from '../../hocs/withStyles'
 
 
-export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, placeholder, isMulti, isClearable, isDisabled, isLoading, isRtl, isSearchable, isInline, onChange, onFocus, onBlur, closeMenuOnSelect }) => {
+export const DynamicSelect = ({
+  getStyles,
+  optionsSelect,
+  value,
+  defaultValue,
+  placeholder,
+  isMulti,
+  isClearable,
+  isDisabled,
+  isLoading,
+  isRtl,
+  isSearchable,
+  isInline,
+  onChange,
+  onFocus,
+  onBlur,
+  closeMenuOnSelect,
+  maxMenuHeight
+}) => {
 
 
   const customStyles = {
@@ -13,7 +31,9 @@ export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, p
     option: (base, state) => ({
       ...base,
       cursor: 'pointer',
-      height: '100%',
+      width: "max-content",
+      minWidth: "100%",
+      position: 'relative',
       backgroundColor: state.isSelected ? 'var(--color-primary)' : 'transparent',
       "&:hover": {
         backgroundColor: "var(--color-primary-highlight)",
@@ -52,6 +72,36 @@ export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, p
       textOverflow: 'ellipsis',
     }),
 
+    valueContainer: (base, state) => ({
+      ...base,
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      // display: "inline-grid"
+      maxHeight: "38px",
+    }),
+
+    container: (base) => ({
+      ...base,
+      width: "max-content",
+      minWidth: "100%",
+    }),
+
+    menu: (base) => ({
+      ...base,
+      width: "max-content",
+      minWidth: "100%",
+    }),
+
+    // menu: styles => ({ ...styles,                 
+    //   width: '500px'
+    //  })  
+
+    // indicatorsContainer: (provided, state) => ({
+    //   ...provided,
+    //   height: '50px',
+    // }),
+
   }
 
   // const handleChange = (value) => {
@@ -85,6 +135,8 @@ export const DynamicSelect = ({ getStyles, optionsSelect, value, defaultValue, p
         onFocus={onFocus}
         onBlur={onBlur}
         closeMenuOnSelect={closeMenuOnSelect}
+        maxMenuHeight={maxMenuHeight}
+        autosize={true}
       />
     </div>
 
@@ -106,7 +158,8 @@ DynamicSelect.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  closeMenuOnSelect: PropTypes.bool
+  closeMenuOnSelect: PropTypes.bool,
+  maxMenuHeight: PropTypes.number
 }
 
 DynamicSelect.defaultProps = {
@@ -122,7 +175,8 @@ DynamicSelect.defaultProps = {
   onChange: () => { },
   onFocus: () => { },
   onBlur: () => { },
-  closeMenuOnSelect: true
+  closeMenuOnSelect: true,
+  maxMenuHeight: 300
 }
 
 export default withStyles(styles)(DynamicSelect)

package/molecules/RowTable/RowTable.js

@@ -679,12 +679,22 @@ export const RowTable = ({
 
                             ?
 
-                            <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
-                              <Moment format="DD/MM/YYYY hh:mm:ss">
-                                {item[itemTd.accessor]}
-                              </Moment>
-                            </td>
+                            itemTd.typeFilterSub === 'date_only' ?
 
+                              <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                <Moment format="DD/MM/YYYY">
+                                  {item[itemTd.accessor]}
+                                </Moment>
+                              </td>
+
+                              :
+
+                              <td className={getStyles('td')} key={[itemTd.accessor] + (indexTd + index)}>
+                                {/* <Moment format="DD/MM/YYYY hh:mm:ss"> */}
+                                <Moment format="DD/MM/YYYY HH:mm">
+                                  {item[itemTd.accessor]}
+                                </Moment>
+                              </td>
                             :
 
                             itemTd.typeFilter === 'select'

package/package.json

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