imbric-theme 1.1.5 → 1.1.7

package/molecules/DatePicker/DatePicker.js

@@ -1,17 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { useState } from 'react';
+import { useState } from 'react'
 import styles from './DatePicker.module.css'
 import { options } from './constants'
 import withStyles from '../../hocs/withStyles'
-import { Calendar, DateRangePicker, DateRange, DefinedRange, defaultStaticRanges, defaultInputRanges } from 'react-date-range';
-import Input from '../../atoms/Input';
-import * as locales from 'react-date-range/dist/locale';
+import {
+  Calendar,
+  DateRangePicker,
+  DateRange,
+  DefinedRange,
+  defaultStaticRanges,
+  defaultInputRanges,
+} from 'react-date-range'
+import Input from '../../atoms/Input'
+import * as locales from 'react-date-range/dist/locale'
 import moment from 'moment'
-import Label from '../../atoms/Label';
+import Label from '../../atoms/Label'
 import { Horizontal, Vertical } from '../../layout/Spacer/components'
-import Icon from '../../atoms/Icon';
-import useStateDate from '../../hook/useStateDate';
+import Icon from '../../atoms/Icon'
+import useStateDate from '../../hook/useStateDate'
 // import 'react-date-range/dist/styles.css'; // main css file
 // import 'react-date-range/dist/theme/default.css'; // theme css file
 
@@ -28,19 +35,22 @@ import {
   startOfWeek,
   endOfWeek,
   isSameDay,
-  differenceInCalendarDays
-} from "date-fns";
-
-
-
-export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRange, tillDateRange, disabledInputRange, rangeDefault }) => {
-
+  differenceInCalendarDays,
+} from 'date-fns'
+
+export const DatePicker = ({
+  getStyles,
+  isLayoutDate,
+  onChangeRange,
+  sinceDateRange,
+  tillDateRange,
+  disabledInputRange,
+  rangeDefault,
+}) => {
   const [isShowCalendar, setShowCalendar] = useState(false)
 
-
   const { state, setState } = useStateDate(rangeDefault)
 
-
   // const [state, setState] = useState([
   //   {
   //     startDate: addDays(new Date(), -59),
@@ -51,15 +61,14 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
   // ]);
 
   moment.locale('es')
-  const format = "DD/MM/YYYY";
-
+  const format = 'DD/MM/YYYY'
 
   const handleSelectRange = (item) => {
     setState([item.selection])
   }
 
   const handleSelect = (date) => {
-    console.log(date); // native Date object
+    console.log(date) // native Date object
     console.log(state)
   }
 
@@ -71,158 +80,153 @@ export const DatePicker = ({ getStyles, isLayoutDate, onChangeRange, sinceDateRa
   const handleClickCloseCalendar = () => {
     setShowCalendar(false)
     console.log(state)
-  };
-
+  }
 
   return (
     <div className={getStyles('date-picker')}>
-
-      {isLayoutDate === 'Calendar' ?
-
-        (<Calendar
-          date={new Date()}
-          onChange={handleSelect}
-          color={'#3d91ff'}
-        />)
-        : isLayoutDate === 'DateRange' ?
-
-          (<DateRange
-            editableDateInputs={true}
-            onChange={item => useStateDate([item.selection])}
+      {isLayoutDate === 'Calendar' ? (
+        <Calendar date={new Date()} onChange={handleSelect} color={'#3d91ff'} />
+      ) : isLayoutDate === 'DateRange' ? (
+        <DateRange
+          editableDateInputs={true}
+          onChange={(item) => useStateDate([item.selection])}
+          moveRangeOnFirstSelection={false}
+          ranges={state}
+        />
+      ) : !isShowCalendar ? (
+        <div className={getStyles('date-picker-input')}>
+          <div>
+            <Label>{sinceDateRange}</Label>
+            <Input
+              isInline
+              isDate
+              id="startDate"
+              onClick={handleClickOpenCalendar}
+              placeholder="Et harum quidem"
+              value={moment(state[0].startDate).format(format).toString()}
+              disabled={disabledInputRange}
+            />
+            {/* <Vertical size="xs" /> */}
+          </div>
+          <Horizontal size="xs" />
+          <div>
+            <Label>{tillDateRange}</Label>
+            <Input
+              isInline
+              isDate
+              id="endDate"
+              onClick={handleClickOpenCalendar}
+              placeholder="Et harum quidem"
+              value={moment(state[0].endDate).format(format).toString()}
+              disabled={disabledInputRange}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className={getStyles('modalDatePickerRange')}>
+          <DateRangePicker
+            locale={locales.es}
+            dateDisplayFormat="d MMMM yyyy"
+            onChange={(item) => {
+              handleSelectRange(item)
+              onChangeRange(item)
+            }}
+            showSelectionPreview={false}
             moveRangeOnFirstSelection={false}
+            months={2}
             ranges={state}
-          />)
-          :
-
-          !isShowCalendar ?
-            <div className={getStyles('date-picker-input')}>
-              <div>
-                <Label>{sinceDateRange}</Label>
-                <Input
-                  isInline
-                  isDate
-                  id="startDate"
-                  onClick={handleClickOpenCalendar}
-                  placeholder="Et harum quidem"
-                  value={moment(state[0].startDate).format(format).toString()}
-                  disabled={disabledInputRange}
-                />
-                {/* <Vertical size="xs" /> */}
-              </div>
-              <Horizontal size="xs" />
-              <div>
-                <Label>{tillDateRange}</Label>
-                <Input
-                  isInline
-                  isDate
-                  id="endDate"
-                  onClick={handleClickOpenCalendar}
-                  placeholder="Et harum quidem"
-                  value={moment(state[0].endDate).format(format).toString()}
-                  disabled={disabledInputRange}
-                />
-              </div>
-            </div>
-            :
-            <div className={getStyles('modalDatePickerRange')}>
-
-              <DateRangePicker
-                locale={locales.es}
-                dateDisplayFormat='d MMMM yyyy'
-                onChange={item => { handleSelectRange(item); onChangeRange(item); }}
-                showSelectionPreview={false}
-                moveRangeOnFirstSelection={false}
-                months={2}
-                ranges={state}
-                direction="horizontal"
-                inputRanges={[
-                  {
-                    ...defaultInputRanges[0],
-                    label: 'Dias hasta hoy'
-                  },
-                  {
-                    ...defaultInputRanges[1],
-                    label: 'Dias desde hoy'
-                  }
-                ]}
-                staticRanges={[
-                  // ...defaultStaticRanges,
-                  {
-                    label: "Mes pasado",
-                    range: () => ({
-                      startDate: startOfMonth(addMonths(new Date(), -1)),
-                      endDate: endOfMonth(addMonths(new Date(), -1))
-                    }),
-                    isSelected(range) {
-                      const definedRange = this.range();
-                      return (
-                        isSameDay(range.startDate, definedRange.startDate) &&
-                        isSameDay(range.endDate, definedRange.endDate)
-                      );
-                    }
-                  },
-                  {
-                    label: "Mes actual",
-                    range: () => ({
-                      startDate: startOfMonth(new Date()),
-                      endDate: endOfDay(new Date())
-                    }),
-                    isSelected(range) {
-                      const definedRange = this.range();
-                      return (
-                        isSameDay(range.startDate, definedRange.startDate) &&
-                        isSameDay(range.endDate, definedRange.endDate)
-                      );
-                    }
-                  },
-                  {
-                    label: "Año pasado",
-                    range: () => ({
-                      startDate: startOfYear(addYears(new Date(), -1)),
-                      endDate: endOfYear(addYears(new Date(), -1))
-                    }),
-                    isSelected(range) {
-                      const definedRange = this.range();
-                      return (
-                        isSameDay(range.startDate, definedRange.startDate) &&
-                        isSameDay(range.endDate, definedRange.endDate)
-                      );
-                    }
-                  },
-                  {
-                    label: "Año actual",
-                    range: () => ({
-                      startDate: startOfYear(new Date()),
-                      endDate: endOfDay(new Date())
-                    }),
-                    isSelected(range) {
-                      const definedRange = this.range();
-                      return (
-                        isSameDay(range.startDate, definedRange.startDate) &&
-                        isSameDay(range.endDate, definedRange.endDate)
-                      );
-                    }
-                  }
-                ]}
-              />
-
-              <div className={getStyles('btnSave')} onClick={handleClickCloseCalendar}>
-                <Icon
-                  id='iconClosedDatePicker'
-                  name="checkCircle"
-                  color="inverted"
-                  onClick={function noRefCheck() { }}
-                />
-              </div>
-
-              {/* <DefinedRange
+            direction="horizontal"
+            inputRanges={[
+              {
+                ...defaultInputRanges[0],
+                label: 'Dias hasta hoy',
+              },
+              {
+                ...defaultInputRanges[1],
+                label: 'Dias desde hoy',
+              },
+            ]}
+            staticRanges={[
+              // ...defaultStaticRanges,
+              {
+                label: 'Mes pasado',
+                range: () => ({
+                  startDate: startOfMonth(addMonths(new Date(), -1)),
+                  endDate: endOfMonth(addMonths(new Date(), -1)),
+                }),
+                isSelected(range) {
+                  const definedRange = this.range()
+                  return (
+                    isSameDay(range.startDate, definedRange.startDate) &&
+                    isSameDay(range.endDate, definedRange.endDate)
+                  )
+                },
+              },
+              {
+                label: 'Mes actual',
+                range: () => ({
+                  startDate: startOfMonth(new Date()),
+                  endDate: endOfDay(new Date()),
+                }),
+                isSelected(range) {
+                  const definedRange = this.range()
+                  return (
+                    isSameDay(range.startDate, definedRange.startDate) &&
+                    isSameDay(range.endDate, definedRange.endDate)
+                  )
+                },
+              },
+              {
+                label: 'Año pasado',
+                range: () => ({
+                  startDate: startOfYear(addYears(new Date(), -1)),
+                  endDate: endOfYear(addYears(new Date(), -1)),
+                }),
+                isSelected(range) {
+                  const definedRange = this.range()
+                  return (
+                    isSameDay(range.startDate, definedRange.startDate) &&
+                    isSameDay(range.endDate, definedRange.endDate)
+                  )
+                },
+              },
+              {
+                label: 'Año actual',
+                range: () => ({
+                  startDate: startOfYear(new Date()),
+                  endDate: endOfDay(new Date()),
+                }),
+                isSelected(range) {
+                  const definedRange = this.range()
+                  return (
+                    isSameDay(range.startDate, definedRange.startDate) &&
+                    isSameDay(range.endDate, definedRange.endDate)
+                  )
+                },
+              },
+            ]}
+          />
+
+          <div
+            className={getStyles('btnSave')}
+            onClick={handleClickCloseCalendar}
+          >
+            <Icon
+              size="sm"
+              id="iconClosedDatePicker"
+              name="checkCircle"
+              color="inverted"
+              onClick={function noRefCheck() {}}
+            />
+          </div>
+
+          {/* <DefinedRange
                 locale={locales.es}
                 onChange={item => useStateDate([item.selection])}
                 ranges={state}
               /> */}
-            </div>
-
-      }
+        </div>
+      )}
     </div>
   )
 }
@@ -238,13 +242,13 @@ DatePicker.propTypes = {
 }
 
 DatePicker.defaultProps = {
-  getStyles: () => { },
+  getStyles: () => {},
   isLayoutDate: 'Calendar',
-  onChangeRange: () => { },
+  onChangeRange: () => {},
   sinceDateRange: 'Desde',
   tillDateRange: 'Hasta',
   disabledInputRange: false,
-  rangeDefault: 'quarter'
+  rangeDefault: 'quarter',
 }
 
 export default withStyles(styles)(DatePicker)

package/molecules/DatePickerTime/DatePickerTime.js

@@ -7,12 +7,11 @@ import withStyles from '../../hocs/withStyles'
 import DatePicker, { CalendarContainer } from 'react-datepicker'
 // import "react-datepicker/dist/react-datepicker.css"
 
-import { registerLocale, setDefaultLocale } from "react-datepicker";
+import { registerLocale, setDefaultLocale } from 'react-datepicker'
 import es from 'date-fns/locale/es'
 import moment from 'moment'
 import Input from '../../atoms/Input/Input'
 
-
 export const DatePickerTime = ({
   getStyles,
   showIcon,
@@ -26,7 +25,6 @@ export const DatePickerTime = ({
   timeIntervals,
   idPicker,
 }) => {
-
   registerLocale('es', es)
   setDefaultLocale('es')
 
@@ -46,7 +44,6 @@ export const DatePickerTime = ({
   //   return currentDate.getTime() < selectedDate.getTime()
   // }
 
-
   // const MyContainer = ({ className, children }) => {
   //   return (
   //     // <div style={{ padding: "0px", background: "#216ba5", color: "#fff" }}>
@@ -65,7 +62,6 @@ export const DatePickerTime = ({
   // }
 
   return (
-
     <div className={getStyles('date-picker-time')}>
       <DatePicker
         showIcon={showIcon}
@@ -84,22 +80,21 @@ export const DatePickerTime = ({
         timeIntervals={timeIntervals}
         id={idPicker}
         customInput={<Input isInputSecondary> </Input>}
-      // calendarContainer={MyContainer}
-
-      // minTime={(new Date(), 0)}
-      // maxTime={(new Date(), 30)}
-      // maxTime={setHours(setMinutes(new Date(), 30), 20)}
-      // includeTimes={[
-      //   setHours(setMinutes(new Date(), 0), 17),
-      //   setHours(setMinutes(new Date(), 30), 18),
-      //   setHours(setMinutes(new Date(), 30), 19),
-      //   setHours(setMinutes(new Date(), 30), 17),
-      // ]}
-      // dateFormat="d MMMM yyyy, HH:mm aa"
+        // calendarContainer={MyContainer}
+
+        // minTime={(new Date(), 0)}
+        // maxTime={(new Date(), 30)}
+        // maxTime={setHours(setMinutes(new Date(), 30), 20)}
+        // includeTimes={[
+        //   setHours(setMinutes(new Date(), 0), 17),
+        //   setHours(setMinutes(new Date(), 30), 18),
+        //   setHours(setMinutes(new Date(), 30), 19),
+        //   setHours(setMinutes(new Date(), 30), 17),
+        // ]}
+        // dateFormat="d MMMM yyyy, HH:mm aa"
       />
     </div>
   )
-
 }
 
 DatePickerTime.propTypes = {
@@ -117,17 +112,17 @@ DatePickerTime.propTypes = {
 }
 
 DatePickerTime.defaultProps = {
-  getStyles: () => { },
+  getStyles: () => {},
   showIcon: true,
   // selected: { startDate },
-  onChange: () => { },
-  timeCaption: "Hora",
+  onChange: () => {},
+  timeCaption: 'Hora',
   // minDate: { now },
   showTimeSelect: true,
   // filterTime: { filterPassedTime },
-  dateFormat: "dd-MM-yyyy HH:mm aa",
+  dateFormat: 'dd-MM-yyyy HH:mm aa',
   timeIntervals: 1,
-  idPicker: 'hola'
+  idPicker: 'hola',
 }
 
 export default withStyles(styles)(DatePickerTime)