imbric-theme 0.9.0 → 1.0.0

package/atoms/AlertModal/AlertModal.js

@@ -58,8 +58,8 @@ AlertModal.defaultProps = {
   getStyles: () => { },
   onConfirm: () => { },
   // onDismiss: () => {}, // Not default for use onConfirm if is undefined
-  titleAlert: 'Felicidades!',
-  subTitleAlert: 'Todo ha ido correctamente',
+  titleAlert: '',
+  subTitleAlert: '',
   txtBtnAlert: 'Ok',
   txtBtnAlertCancel: 'Cancelar',
   iconAlert: 'success',

package/atoms/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import styles from './Checkbox.module.css'
@@ -18,6 +18,12 @@ export const Checkbox = ({
 }) => {
   const [checked, setChecked] = useState(value)
 
+  useEffect(() => {
+    setChecked(value)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+
   return (
     <div className={getStyles('checkbox')}>
       <input

package/atoms/Input/Input.js

@@ -21,6 +21,7 @@ export const Input = ({
   isInlineCode,
   isInputFilter,
   isInputSecondary,
+  isDate,
   onChange,
   onFocus,
   onBlur,
@@ -43,54 +44,51 @@ export const Input = ({
   viewPass,
   min,
   autoFocus,
-}) => (
+  readonly,
+  accept,
+  isOpenModal,
+  onClickModal,
+  formikForm,
+  inputExtra,
+}) => {
 
-  <>
+  const onClickDeleteInput = (results, id) => {
+    console.log('hola')
+    console.log(id)
+    formikForm.values[id] = ''
+    formikForm.handleChange(id, '')
+    formikForm.setFieldValue(id, '')
 
-    {isViewIcon ?
-
-      <div className={getStyles('box-icon-input')}>
-
-        <Icon
-          id={idIcon}
-          name={nameIcon}
-          size={sizeIcon}
-          color={colorIcon}
-          background={backgroundIcon}
-        />
+    if (inputExtra) {
+      inputExtra([])
+    }
 
-        <Horizontal size="xs" />
+  }
 
-        <input
-          className={getStyles('input', {
-            'is-inline': isInline,
-            'is-inline-code': isInlineCode,
-            'is-input-filter': isInputFilter,
-            'is-input-secondary': isInputSecondary,
-          })}
-          type={type}
-          id={id}
-          value={value}
-          placeholder={placeholder}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onClick={onClick}
-          onKeyDown={onKeyDown}
-          onKeyUp={onKeyUp}
-          onInput={onInput}
-          autoComplete={autoComplete}
-          disabled={disabled}
-          min={min}
-        ></input>
+  const pulsar = (e, id) => {
+    console.log('hola2')
+    if (e.keyCode === 13 && !e.shiftKey) {
+      e.preventDefault()
+      onClickModal(e, id)
+    }
+  }
 
-      </div> :
+  return (
+    <>
 
-      type === 'password' ?
+      {isViewIcon ?
 
+        <div className={getStyles('box-icon-input')}>
 
+          <Icon
+            id={idIcon}
+            name={nameIcon}
+            size={sizeIcon}
+            color={colorIcon}
+            background={backgroundIcon}
+          />
 
-        <div className={getStyles('box-icon-input')}>
+          <Horizontal size="xs" />
 
           <input
             className={getStyles('input', {
@@ -98,7 +96,9 @@ export const Input = ({
               'is-inline-code': isInlineCode,
               'is-input-filter': isInputFilter,
               'is-input-secondary': isInputSecondary,
+              'is-date': isDate,
             })}
+            readOnly={readonly}
             type={type}
             id={id}
             value={value}
@@ -108,62 +108,169 @@ export const Input = ({
             onBlur={onBlur}
             onClick={onClick}
             onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+            onInput={onInput}
             autoComplete={autoComplete}
             disabled={disabled}
             min={min}
-            onInput={onInput}
+            accept={accept}
           ></input>
 
-          <Horizontal size="xs" />
+        </div> :
 
-          <Icon
-            background={!viewPass ? "inverted" : "success"}
-            color={!viewPass ? "base" : "inverted"}
-            isClickable
-            name="userView"
-            onClick={onClickViewPass}
-            size="sm"
-          />
+        type === 'password' ?
 
+          <div className={getStyles('box-icon-input')}>
 
-        </div>
-
-
-
-        : <input
-          className={getStyles('input', {
-            'is-inline': isInline,
-            'is-inline-code': isInlineCode,
-            'is-input-filter': isInputFilter,
-            'is-input-secondary': isInputSecondary,
-          })}
-          type={type}
-          id={id}
-          value={value}
-          placeholder={placeholder}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onClick={onClick}
-          onKeyDown={onKeyDown}
-          maxLength={maxLength}
-          autoComplete={autoComplete}
-          disabled={disabled}
-          min={min}
-          autoFocus={autoFocus}
-          onInput={onInput}
-        ></input>
+            <input
+              className={getStyles('input', {
+                'is-inline': isInline,
+                'is-inline-code': isInlineCode,
+                'is-input-filter': isInputFilter,
+                'is-input-secondary': isInputSecondary,
+                'is-date': isDate,
+              })}
+              readOnly={readonly}
+              type={type}
+              id={id}
+              value={value}
+              placeholder={placeholder}
+              onChange={onChange}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onClick={onClick}
+              onKeyDown={onKeyDown}
+              autoComplete={autoComplete}
+              disabled={disabled}
+              min={min}
+              onInput={onInput}
+              accept={accept}
+            ></input>
 
-    }
+            <Horizontal size="xs" />
+
+            <Icon
+              background={!viewPass ? "inverted" : "success"}
+              color={!viewPass ? "base" : "inverted"}
+              isClickable
+              name="userView"
+              onClick={onClickViewPass}
+              size="sm"
+            />
+
+
+          </div>
 
-  </>
-)
+          : isOpenModal
+
+            ?
+            <div class="DynamicSelect_dynamic-select__oduOS">
+              <div class="css-1mfvq3n-container">
+                <div style={{ zIndex: 1 }} class="css-mlo5or-control">
+                  <div onClick={(op) => onClickModal(op, id)} style={{ height: '36px' }} class="css-1huup54-ValueContainer">
+                    <div class=" css-qc6sy-singleValue">{value}</div>
+                  </div>
+                  <div class=" css-1hb7zxy-IndicatorsContainer">
+
+
+                    {value !== '' ? <div onClick={(op) => onClickDeleteInput(op, id)} class=" css-tlfecz-indicatorContainer" aria-hidden="true">
+                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="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>
+                      </svg>
+                    </div> : null}
+                    <span class=" css-1okebmr-indicatorSeparator">
+                    </span>
+                    <div onClick={(op) => onClickModal(op, id)} class="css-tlfecz-indicatorContainer" aria-hidden="true">
+                      <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-tj5bde-Svg">
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M10 20C4.48612 20 0 15.5139 0 10C0 4.48612 4.48612 0 10 0C15.5139 0 20 4.48612 20 10C20 15.5139 15.5139 20 10 20ZM10 1.09864C5.09155 1.09864 1.09864 5.09155 1.09864 10C1.09864 14.9084 5.09155 18.9014 10 18.9014C14.9084 18.9014 18.9014 14.9084 18.9014 10C18.9014 5.09155 14.9084 1.09864 10 1.09864Z"
+                        />
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M4.68396 9.4093H15.316V10.5906H4.68396V9.4093Z"
+                        />
+                        <path
+                          fillRule="evenodd"
+                          clipRule="evenodd"
+                          d="M9.40942 4.68396H10.5908V15.316H9.40942V4.68396Z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                <input
+                  inputmode="none"
+                  style={{ top: '0px', position: 'absolute', zIndex: 0 }}
+                  className={getStyles('input', {
+                    'is-inline': isInline,
+                    'is-inline-code': isInlineCode,
+                    'is-input-filter': isInputFilter,
+                    'is-input-secondary': isInputSecondary,
+                    'is-date': isDate,
+                  })}
+                  readOnly={'true'}
+                  // type={'hidden'}
+                  id={id}
+                  value={value}
+                  placeholder={placeholder}
+                  onChange={onChange}
+                  onFocus={onFocus}
+                  onBlur={onBlur}
+                  onClick={onClick}
+                  // onKeyDown={onKeyDown}
+                  maxLength={maxLength}
+                  autoComplete={autoComplete}
+                  disabled={disabled}
+                  min={min}
+                  autoFocus={autoFocus}
+                  onInput={onInput}
+                  accept={accept}
+                  onKeyDown={(op) => pulsar(op, id)}
+                ></input>
+              </div>
+            </div>
+
+            : <input
+              className={getStyles('input', {
+                'is-inline': isInline,
+                'is-inline-code': isInlineCode,
+                'is-input-filter': isInputFilter,
+                'is-input-secondary': isInputSecondary,
+                'is-date': isDate,
+              })}
+              readOnly={readonly}
+              type={type}
+              id={id}
+              value={value}
+              placeholder={placeholder}
+              onChange={onChange}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onClick={onClick}
+              onKeyDown={onKeyDown}
+              maxLength={maxLength}
+              autoComplete={autoComplete}
+              disabled={disabled}
+              min={min}
+              autoFocus={autoFocus}
+              onInput={onInput}
+              accept={accept}
+            ></input>
+      }
+
+    </>
+  )
+}
 
 Input.propTypes = {
   onChange: PropTypes.func.isRequired,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onClick: PropTypes.func,
+  onClickModal: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyUp: PropTypes.func,
   onInput: PropTypes.func,
@@ -177,6 +284,7 @@ Input.propTypes = {
   isInlineCode: PropTypes.bool,
   isInputFilter: PropTypes.bool,
   isInputSecondary: PropTypes.bool,
+  isDate: PropTypes.bool,
   isViewIcon: PropTypes.bool,
   idIcon: PropTypes.string,
   nameIcon: PropTypes.string,
@@ -185,10 +293,14 @@ Input.propTypes = {
   backgroundIcon: PropTypes.string,
   autoComplete: PropTypes.string,
   disabled: PropTypes.bool,
+  readonly: PropTypes.bool,
   min: PropTypes.any,
   autoFocus: PropTypes.any,
   onClickViewPass: PropTypes.func,
   viewPass: PropTypes.bool,
+  accept: PropTypes.string,
+  isOpenModal: PropTypes.bool,
+  formikForm: PropTypes.any,
 }
 
 Input.defaultProps = {
@@ -200,10 +312,12 @@ Input.defaultProps = {
   isInlineCode: false,
   isInputFilter: false,
   isInputSecondary: false,
+  isDate: false,
   onChange: () => { },
   onFocus: () => { },
   onBlur: () => { },
   onClick: () => { },
+  onClickModal: () => { },
   onKeyDown: () => { },
   onKeyUp: () => { },
   onInput: () => { },
@@ -216,8 +330,11 @@ Input.defaultProps = {
   backgroundIcon: 'base',
   autoComplete: 'on',
   disabled: false,
+  readonly: false,
   onClickViewPass: () => { },
   viewPass: false,
+  accept: '',
+  isOpenModal: false,
 }
 
 export default withStyles(styles)(Input)

package/atoms/Input/Input.module.css

@@ -80,4 +80,9 @@
 .box-icon-input {
   display: flex;
   align-items: center;
+}
+
+.is-date {
+  width: 85px;
+  padding: 10px 6px;
 }

package/atoms/Picture/Picture.js

@@ -13,6 +13,7 @@ export const Picture = ({
   isRounded,
   withBorder,
   isHref,
+  targetLink,
 }) => (
   <picture
     className={getStyles('picture', {
@@ -20,8 +21,11 @@ export const Picture = ({
       'with-border': withBorder,
     })}
   >
-    <Link href={isHref} passHref>
-      <img src={src} style={{ height, maxWidth: width }} />
+    <Link href={isHref} passHref >
+      <a target={targetLink}>
+        <img src={src} style={{ height, maxWidth: width }} />
+      </a>
+
     </Link>
 
   </picture>
@@ -34,14 +38,16 @@ Picture.propTypes = {
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   isRounded: PropTypes.bool,
   withBorder: PropTypes.bool,
-  isHref: PropTypes.any
+  isHref: PropTypes.any,
+  targetLink: PropTypes.string
 }
 
 Picture.defaultProps = {
   height: 'auto',
   withBorder: false,
   getStyles: () => { },
-  isHref: ''
+  isHref: '',
+  targetLink: ''
 }
 
 export default withStyles(styles)(Picture)