implement props and fix bug back icon

davidtran · Mar 6, 2020 · 05c690d · 05c690d
1 parent ecea63e
commit 05c690d
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 64 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -71,6 +71,7 @@
     "react/destructuring-assignment": 0,
     "linebreak-style": 0,
     "jsx-a11y/click-events-have-key-events": 0,
+    "react/no-array-index-key": 0,
     "no-multiple-empty-lines": [
       "error",
       {

diff --git a/src/lib/assets/svg/back.png b/src/lib/assets/svg/back.png
diff --git a/src/lib/components/DatePicker/DatePicker.examples.md b/src/lib/components/DatePicker/DatePicker.examples.md
@@ -4,14 +4,17 @@ DatePicker examples:
 
 ```js
 import { DatePicker } from 'react-google-flight-datepicker';
-<>
-  <div className="react-google-flight-datepicker">
-    <div className="date-picker-demo">
-      <DatePicker
-        startDatePlaceholder="Start Date"
-        endDatePlaceholder="End Date"
-      />
-    </div>
+
+<div className="react-google-flight-datepicker">
+  <div className="date-picker-demo">
+    <DatePicker 
+      // startDatePlaceholder="My from date"
+      // onChange={(startDate, endDate) => console.log(startDate, endDate)}
+      // onFocus={(inputFocus) => console.log(inputFocus)}
+      // startDate={new Date('2019-05-25')}
+      // endDate={new Date('2020-4-10')}
+      // startWeekDay="sunday"
+    />
   </div>
-</>;
+</div>
 ```
diff --git a/src/lib/components/DatePicker/DatePicker.js b/src/lib/components/DatePicker/DatePicker.js
@@ -8,12 +8,14 @@ import Dialog from './Dialog';
 
 const DatePicker = ({
   startDate,
+  endDate,
   startDatePlaceholder,
   endDatePlaceholder,
   className,
   disabled,
   onChange,
-  onFocus
+  onFocus,
+  startWeekDay,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef(null);
@@ -25,15 +27,30 @@ const DatePicker = ({
 
   function handleDocumentClick(e) {
     if (
-      containerRef.current &&
-      containerRef.current.contains(e.target) === false
+      containerRef.current
+      && containerRef.current.contains(e.target) === false
     ) {
       setIsOpen(false);
     }
   }
 
   useEffect(() => {
     setIsFirstTime(true);
+    if (startDate) {
+      startDate.setHours(0);
+      startDate.setMinutes(0);
+      startDate.setSeconds(0);
+      startDate.setMilliseconds(0);
+      setFromDate(startDate.getTime());
+    }
+    if (endDate) {
+      endDate.setHours(0);
+      endDate.setMinutes(0);
+      endDate.setSeconds(0);
+      endDate.setMilliseconds(0);
+      setToDate(endDate.getTime());
+    }
+
     document.addEventListener('click', handleDocumentClick);
 
     return () => document.removeEventListener('click', handleDocumentClick);
@@ -49,10 +66,9 @@ const DatePicker = ({
 
   useEffect(() => {
     if (isFirstTime) {
-      const input =
-        inputFocus === 'from'
-          ? 'Start Date'
-          : inputFocus === 'to'
+      const input = inputFocus === 'from'
+        ? 'Start Date'
+        : inputFocus === 'to'
           ? 'End Date'
           : '';
       onFocus(input);
@@ -126,7 +142,7 @@ const DatePicker = ({
     <div className="react-google-flight-datepicker">
       <div
         className={cx('date-picker', className, {
-          disabled
+          disabled,
         })}
         ref={containerRef}
       >
@@ -142,7 +158,6 @@ const DatePicker = ({
         <Dialog
           isOpen={isOpen}
           toggleDialog={toggleDialog}
-          startDate={startDate}
           handleClickDateInput={handleClickDateInput}
           inputFocus={inputFocus}
           setInputFocus={setInputFocus}
@@ -155,6 +170,7 @@ const DatePicker = ({
           handleChangeDate={handleChangeDate}
           startDatePlaceholder={startDatePlaceholder}
           endDatePlaceholder={endDatePlaceholder}
+          startWeekDay={startWeekDay}
         />
       </div>
     </div>
@@ -163,22 +179,26 @@ const DatePicker = ({
 
 DatePicker.propTypes = {
   startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
   startDatePlaceholder: PropTypes.string,
   endDatePlaceholder: PropTypes.string,
   className: PropTypes.string,
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  startWeekDay: PropTypes.oneOf(['monday', 'sunday']),
 };
 
 DatePicker.defaultProps = {
   startDate: null,
+  endDate: null,
   className: '',
   disabled: false,
   startDatePlaceholder: 'Start date',
   endDatePlaceholder: 'End date',
   onChange: () => {},
-  onFocus: () => {}
+  onFocus: () => {},
+  startWeekDay: 'monday',
 };
 
 export default DatePicker;
diff --git a/src/lib/components/DatePicker/Dialog.js b/src/lib/components/DatePicker/Dialog.js
@@ -2,15 +2,14 @@ import React, { useEffect, useState, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import BackIcon from '../../assets/svg/back.png';
+import BackIcon from '../../assets/svg/back.svg';
 import DateInputGroup from './DateInputGroup';
 import DialogContentMobile from './DialogContentMobile';
 import DialogContentDesktop from './DialogContentDesktop';
 
 const Dialog = ({
   toggleDialog,
   isOpen,
-  startDate,
   fromDate,
   toDate,
   hoverDate,
@@ -22,6 +21,7 @@ const Dialog = ({
   handleChangeDate,
   startDatePlaceholder,
   endDatePlaceholder,
+  startWeekDay,
 }) => {
   const [hideAnimation, setHideAnimation] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
@@ -57,7 +57,7 @@ const Dialog = ({
     >
       <div className="dialog-header">
         <button type="button" className="btn-outline back-button" onClick={toggleDialog}>
-          <img src={BackIcon} alt="back-icon" className="back-icon" />
+          <BackIcon viewBox="0 0 492 492" />
         </button>
         <DateInputGroup
           inputFocus={inputFocus}
@@ -85,16 +85,17 @@ const Dialog = ({
               hoverDate={hoverDate}
               onSelectDate={onSelectDate}
               onHoverDate={onHoverDate}
+              startWeekDay={startWeekDay}
             />
           )
           : (
             <DialogContentDesktop
-              startDate={startDate}
               fromDate={fromDate}
               toDate={toDate}
               hoverDate={hoverDate}
               onSelectDate={onSelectDate}
               onHoverDate={onHoverDate}
+              startWeekDay={startWeekDay}
             />
           )}
       </div>
@@ -115,7 +116,6 @@ const Dialog = ({
 Dialog.propTypes = {
   isOpen: PropTypes.bool,
   inputFocus: PropTypes.string,
-  startDate: PropTypes.instanceOf(Date),
   fromDate: PropTypes.instanceOf(Date),
   toDate: PropTypes.instanceOf(Date),
   hoverDate: PropTypes.instanceOf(Date),
@@ -127,12 +127,12 @@ Dialog.propTypes = {
   handleChangeDate: PropTypes.func,
   startDatePlaceholder: PropTypes.string,
   endDatePlaceholder: PropTypes.string,
+  startWeekDay: PropTypes.string,
 };
 
 Dialog.defaultProps = {
   isOpen: false,
   inputFocus: null,
-  startDate: null,
   fromDate: null,
   toDate: null,
   hoverDate: null,
@@ -144,6 +144,7 @@ Dialog.defaultProps = {
   handleChangeDate: () => {},
   startDatePlaceholder: null,
   endDatePlaceholder: null,
+  startWeekDay: null,
 };
 
 export default Dialog;
diff --git a/src/lib/components/DatePicker/DialogContentDesktop.js b/src/lib/components/DatePicker/DialogContentDesktop.js
@@ -8,12 +8,12 @@ import NextIcon from '../../assets/svg/next.svg';
 import MonthCalendar from './MonthCalendar';
 
 const DialogContentDesktop = ({
-  startDate,
   fromDate,
   toDate,
   hoverDate,
   onSelectDate,
   onHoverDate,
+  startWeekDay,
 }) => {
   const [translateAmount, setTranslateAmount] = useState(0);
   const [monthArray, setMonthArray] = useState([]);
@@ -28,16 +28,14 @@ const DialogContentDesktop = ({
   }
 
   useEffect(() => {
-    const date = startDate
-      ? new Date(startDate.getFullYear(), startDate.getMonth(), 1)
-      : new Date();
+    const date = fromDate ? new Date(fromDate) : new Date();
     date.setDate(1);
     date.setHours(0);
     date.setMinutes(0);
     date.setSeconds(0);
     date.setMilliseconds(0);
     setFocusDate(date);
-  }, [startDate]);
+  }, [fromDate]);
 
   useEffect(() => {
     const arrayMonth = getArrayMonth(focusDate);
@@ -84,6 +82,7 @@ const DialogContentDesktop = ({
         fromDate={fromDate}
         toDate={toDate}
         hoverDate={hoverDate}
+        startWeekDay={startWeekDay}
       />
     ));
   }
@@ -114,21 +113,21 @@ const DialogContentDesktop = ({
 };
 
 DialogContentDesktop.propTypes = {
-  startDate: PropTypes.instanceOf(Date),
   fromDate: PropTypes.instanceOf(Date),
   toDate: PropTypes.instanceOf(Date),
   hoverDate: PropTypes.instanceOf(Date),
   onSelectDate: PropTypes.func,
   onHoverDate: PropTypes.func,
+  startWeekDay: PropTypes.string,
 };
 
 DialogContentDesktop.defaultProps = {
-  startDate: null,
   fromDate: null,
   toDate: null,
   hoverDate: null,
   onSelectDate: () => {},
   onHoverDate: () => {},
+  startWeekDay: null,
 };
 
 export default DialogContentDesktop;
diff --git a/src/lib/components/DatePicker/DialogContentMobile.js b/src/lib/components/DatePicker/DialogContentMobile.js
@@ -3,19 +3,27 @@ import PropTypes from 'prop-types';
 import List from 'react-virtualized/dist/commonjs/List';
 
 import MonthCalendar from './MonthCalendar';
-import { getMonthInfo } from '../../helpers';
+import { getMonthInfo, getWeekDay } from '../../helpers';
 
 const DialogContentMobile = ({
   fromDate,
   toDate,
   hoverDate,
   onSelectDate,
   onHoverDate,
+  startWeekDay,
 }) => {
   const calendarContentRef = useRef(null);
   const [sizeList, setSizeList] = useState({ width: 0, height: 0 });
+  const [scrollToIndex, setScrollToIndex] = useState(0);
 
   useEffect(() => {
+    const date = fromDate ? new Date(fromDate) : new Date();
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const index = parseInt((year - 1900) * 12 + month, 10);
+    setScrollToIndex(index);
+
     if (calendarContentRef.current) {
       setTimeout(() => {
         const calendarRect = calendarContentRef.current.getBoundingClientRect();
@@ -42,6 +50,7 @@ const DialogContentMobile = ({
           fromDate={fromDate}
           toDate={toDate}
           hoverDate={hoverDate}
+          startWeekDay={startWeekDay}
         />
       </div>
     );
@@ -62,23 +71,25 @@ const DialogContentMobile = ({
         height={sizeList.height}
         rowCount={2400}
         rowHeight={getRowHeight}
-        scrollToIndex={1443}
+        scrollToIndex={scrollToIndex}
         rowRenderer={rowRenderer}
       />
     );
   }
 
+  function generateWeekDay() {
+    const arrWeekDay = getWeekDay(startWeekDay);
+
+    return arrWeekDay.map((day, index) => (
+      <div className="weekday" key={index}>{day}</div>
+    ));
+  }
+
   return (
     <div className="calendar-wrapper">
       <div className="calendar-content" ref={calendarContentRef}>
         <div className="weekdays mobile">
-          <div className="weekday">M</div>
-          <div className="weekday">T</div>
-          <div className="weekday">W</div>
-          <div className="weekday">T</div>
-          <div className="weekday">F</div>
-          <div className="weekday">S</div>
-          <div className="weekday">S</div>
+          {generateWeekDay()}
         </div>
         {renderMonthCalendars()}
       </div>
@@ -93,6 +104,7 @@ DialogContentMobile.propTypes = {
   hoverDate: PropTypes.instanceOf(Date),
   onSelectDate: PropTypes.func,
   onHoverDate: PropTypes.func,
+  startWeekDay: PropTypes.string,
 };
 
 DialogContentMobile.defaultProps = {
@@ -101,6 +113,7 @@ DialogContentMobile.defaultProps = {
   hoverDate: null,
   onSelectDate: () => {},
   onHoverDate: () => {},
+  startWeekDay: null,
 };
 
 export default DialogContentMobile;