baseui 10.10.0 → 10.12.0

package/datepicker/datepicker.js.flow

@@ -7,36 +7,30 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {MaskedInput} from '../input/index.js';
-import {Popover, PLACEMENT} from '../popover/index.js';
+import { MaskedInput } from '../input/index.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
 import Calendar from './calendar.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import getInterpolatedString from '../helpers/i18n-interpolation.js';
-import {LocaleContext} from '../locale/index.js';
+import { LocaleContext } from '../locale/index.js';
 import {
   StyledInputWrapper,
   StyledInputLabel,
   StyledStartDate,
   StyledEndDate,
 } from './styled-components.js';
-import type {DatepickerPropsT} from './types.js';
+import type { DatepickerPropsT } from './types.js';
 import DateHelpers from './utils/date-helpers.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
-import type {LocaleT} from '../locale/types.js';
+import type { LocaleT } from '../locale/types.js';
 
 export const DEFAULT_DATE_FORMAT = 'yyyy/MM/dd';
 
 const INPUT_DELIMITER = ' – ';
 
-const combineSeparatedInputs = (
-  newInputValue,
-  prevCombinedInputValue = '',
-  separatedInput,
-) => {
+const combineSeparatedInputs = (newInputValue, prevCombinedInputValue = '', separatedInput) => {
   let inputValue = newInputValue;
-  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(
-    INPUT_DELIMITER,
-  );
+  const [prevStartDate = '', prevEndDate = ''] = prevCombinedInputValue.split(INPUT_DELIMITER);
   if (separatedInput === 'startDate' && prevEndDate) {
     inputValue = `${inputValue} – ${prevEndDate}`;
   }
@@ -54,10 +48,7 @@ type StateT = {|
   inputValue?: string,
 |};
 
-export default class Datepicker<T = Date> extends React.Component<
-  DatepickerPropsT<T>,
-  StateT,
-> {
+export default class Datepicker<T = Date> extends React.Component<DatepickerPropsT<T>, StateT> {
   static defaultProps = {
     'aria-describedby': 'datepicker--screenreader--message--input',
     value: null,
@@ -71,6 +62,7 @@ export default class Datepicker<T = Date> extends React.Component<
 
   constructor(props: DatepickerPropsT<T>) {
     super(props);
+    //$FlowFixMe
     this.dateHelpers = new DateHelpers(props.adapter);
     this.state = {
       calendarFocused: false,
@@ -81,7 +73,7 @@ export default class Datepicker<T = Date> extends React.Component<
     };
   }
 
-  onChange: ({date: ?T | Array<T>}) => void = data => {
+  onChange: ({ date: ?T | Array<T> }) => void = (data) => {
     let isOpen = false;
     let isPseudoFocused = false;
     let calendarFocused = false;
@@ -115,8 +107,7 @@ export default class Datepicker<T = Date> extends React.Component<
       if (p === n) {
         return (
           this.dateHelpers.getHours(prev) !== this.dateHelpers.getHours(next) ||
-          this.dateHelpers.getMinutes(prev) !==
-            this.dateHelpers.getMinutes(next)
+          this.dateHelpers.getMinutes(prev) !== this.dateHelpers.getMinutes(next)
         );
       }
       return false;
@@ -136,15 +127,15 @@ export default class Datepicker<T = Date> extends React.Component<
     this.setState({
       isOpen,
       isPseudoFocused,
-      ...(calendarFocused === null ? {} : {calendarFocused}),
+      ...(calendarFocused === null ? {} : { calendarFocused }),
       inputValue: this.formatDisplayValue(nextDate),
     });
 
-    this.props.onChange && this.props.onChange({date: nextDate});
+    this.props.onChange && this.props.onChange({ date: nextDate });
   };
 
   formatDate(date: ?T | Array<T>, formatString: string) {
-    const format = date => {
+    const format = (date) => {
       if (formatString === DEFAULT_DATE_FORMAT) {
         return this.dateHelpers.format(date, 'slashDate', this.props.locale);
       }
@@ -155,14 +146,14 @@ export default class Datepicker<T = Date> extends React.Component<
     } else if (Array.isArray(date) && !date[0] && !date[1]) {
       return '';
     } else if (Array.isArray(date)) {
-      return date.map(day => format(day)).join(INPUT_DELIMITER);
+      return date.map((day) => format(day)).join(INPUT_DELIMITER);
     } else {
       return format(date);
     }
   }
 
   formatDisplayValue: (?T | Array<T>) => string = (date: ?T | Array<T>) => {
-    const {displayValueAtRangeIndex, formatDisplayValue, range} = this.props;
+    const { displayValueAtRangeIndex, formatDisplayValue, range } = this.props;
     const formatString = this.normalizeDashes(this.props.formatString);
 
     if (typeof displayValueAtRangeIndex === 'number') {
@@ -197,7 +188,7 @@ export default class Datepicker<T = Date> extends React.Component<
         isPseudoFocused: true,
         calendarFocused: false,
       },
-      this.props.onOpen,
+      this.props.onOpen
     );
   };
 
@@ -209,7 +200,7 @@ export default class Datepicker<T = Date> extends React.Component<
         isPseudoFocused,
         calendarFocused: false,
       },
-      this.props.onClose,
+      this.props.onClose
     );
   };
 
@@ -227,12 +218,9 @@ export default class Datepicker<T = Date> extends React.Component<
   };
 
   getMask = () => {
-    const {formatString, mask, range, separateRangeInputs} = this.props;
+    const { formatString, mask, range, separateRangeInputs } = this.props;
 
-    if (
-      mask === null ||
-      (mask === undefined && formatString !== DEFAULT_DATE_FORMAT)
-    ) {
+    if (mask === null || (mask === undefined && formatString !== DEFAULT_DATE_FORMAT)) {
       return null;
     }
 
@@ -249,15 +237,11 @@ export default class Datepicker<T = Date> extends React.Component<
 
   handleInputChange = (
     event: SyntheticInputEvent<HTMLInputElement>,
-    separatedInput?: 'startDate' | 'endDate',
+    separatedInput?: 'startDate' | 'endDate'
   ) => {
     const inputValue =
       this.props.range && this.props.separateRangeInputs
-        ? combineSeparatedInputs(
-            event.currentTarget.value,
-            this.state.inputValue,
-            separatedInput,
-          )
+        ? combineSeparatedInputs(event.currentTarget.value, this.state.inputValue, separatedInput)
         : event.currentTarget.value;
 
     const mask = this.getMask();
@@ -269,37 +253,24 @@ export default class Datepicker<T = Date> extends React.Component<
     ) {
       if (this.props.onChange) {
         if (this.props.range) {
-          this.props.onChange({date: []});
+          this.props.onChange({ date: [] });
         } else {
-          this.props.onChange({date: null});
+          this.props.onChange({ date: null });
         }
       }
     }
 
-    this.setState({inputValue});
+    this.setState({ inputValue });
 
-    const parseDateString = dateString => {
+    const parseDateString = (dateString) => {
       if (formatString === DEFAULT_DATE_FORMAT) {
-        return this.dateHelpers.parse(
-          dateString,
-          'slashDate',
-          this.props.locale,
-        );
+        return this.dateHelpers.parse(dateString, 'slashDate', this.props.locale);
       }
-      return this.dateHelpers.parseString(
-        dateString,
-        formatString,
-        this.props.locale,
-      );
+      return this.dateHelpers.parseString(dateString, formatString, this.props.locale);
     };
 
-    if (
-      this.props.range &&
-      typeof this.props.displayValueAtRangeIndex !== 'number'
-    ) {
-      const [left, right] = this.normalizeDashes(inputValue).split(
-        INPUT_DELIMITER,
-      );
+    if (this.props.range && typeof this.props.displayValueAtRangeIndex !== 'number') {
+      const [left, right] = this.normalizeDashes(inputValue).split(INPUT_DELIMITER);
 
       let startDate = this.dateHelpers.date(left);
       let endDate = this.dateHelpers.date(right);
@@ -311,9 +282,7 @@ export default class Datepicker<T = Date> extends React.Component<
 
       const onChange = this.props.onChange;
       if (onChange) {
-        const datesValid =
-          this.dateHelpers.isValid(startDate) &&
-          this.dateHelpers.isValid(endDate);
+        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate);
 
         // added equal case so that times within the same day can be expressed
         const rangeValid =
@@ -321,7 +290,7 @@ export default class Datepicker<T = Date> extends React.Component<
           this.dateHelpers.isEqual(startDate, endDate);
 
         if (datesValid && rangeValid) {
-          onChange({date: [startDate, endDate]});
+          onChange({ date: [startDate, endDate] });
         }
       }
     } else {
@@ -331,60 +300,47 @@ export default class Datepicker<T = Date> extends React.Component<
 
       // Prevent early parsing of value.
       // Eg 25.12.2 will be transformed to 25.12.0002 formatted from date to string
-      if (
-        dateString.replace(/(\s)*/g, '').length <
-        formatString.replace(/(\s)*/g, '').length
-      ) {
+      if (dateString.replace(/(\s)*/g, '').length < formatString.replace(/(\s)*/g, '').length) {
         date = null;
       } else {
         date = parseDateString(dateString);
       }
 
-      const {displayValueAtRangeIndex, onChange, range, value} = this.props;
+      const { displayValueAtRangeIndex, onChange, range, value } = this.props;
       if (date && this.dateHelpers.isValid(date) && onChange) {
-        if (
-          range &&
-          Array.isArray(value) &&
-          typeof displayValueAtRangeIndex === 'number'
-        ) {
+        if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
           let [left, right] = value;
           if (displayValueAtRangeIndex === 0) {
             left = date;
             if (!right) {
-              onChange({date: [left]});
+              onChange({ date: [left] });
             } else {
-              if (
-                this.dateHelpers.isAfter(right, left) ||
-                this.dateHelpers.isEqual(left, right)
-              ) {
-                onChange({date: [left, right]});
+              if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
+                onChange({ date: [left, right] });
               } else {
                 // Is resetting back to previous value appropriate? Invalid range is not
                 // communicated to the user, but if it was not reset the text value would
                 // show one value and date value another. This seems a bit better but clearly
                 // has a downside.
-                onChange({date: [...value]});
+                onChange({ date: [...value] });
               }
             }
           } else if (displayValueAtRangeIndex === 1) {
             right = date;
             if (!left) {
               // If start value is not defined, set start/end to the same day.
-              onChange({date: [right, right]});
+              onChange({ date: [right, right] });
             } else {
-              if (
-                this.dateHelpers.isAfter(right, left) ||
-                this.dateHelpers.isEqual(left, right)
-              ) {
-                onChange({date: [left, right]});
+              if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
+                onChange({ date: [left, right] });
               } else {
                 // See comment above about resetting dates on invalid range
-                onChange({date: [...value]});
+                onChange({ date: [...value] });
               }
             }
           }
         } else {
-          onChange({date});
+          onChange({ date });
         }
       }
     }
@@ -425,16 +381,10 @@ export default class Datepicker<T = Date> extends React.Component<
     }
   }
 
-  renderInputComponent(
-    locale: LocaleT,
-    separatedInput?: 'startDate' | 'endDate',
-  ) {
-    const {overrides = {}} = this.props;
+  renderInputComponent(locale: LocaleT, separatedInput?: 'startDate' | 'endDate') {
+    const { overrides = {} } = this.props;
 
-    const [InputComponent, inputProps] = getOverrides(
-      overrides.Input,
-      MaskedInput,
-    );
+    const [InputComponent, inputProps] = getOverrides(overrides.Input, MaskedInput);
 
     const placeholder =
       this.props.placeholder || this.props.placeholder === ''
@@ -443,9 +393,7 @@ export default class Datepicker<T = Date> extends React.Component<
         ? 'YYYY/MM/DD – YYYY/MM/DD'
         : 'YYYY/MM/DD';
 
-    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(
-      INPUT_DELIMITER,
-    );
+    const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(INPUT_DELIMITER);
 
     const value =
       separatedInput === 'startDate'
@@ -454,16 +402,14 @@ export default class Datepicker<T = Date> extends React.Component<
         ? endDate
         : this.state.inputValue;
 
-    const onChange = event => this.handleInputChange(event, separatedInput);
+    const onChange = (event) => this.handleInputChange(event, separatedInput);
 
     return (
       <InputComponent
         aria-disabled={this.props.disabled}
         aria-label={
           this.props['aria-label'] ||
-          (this.props.range
-            ? locale.datepicker.ariaLabelRange
-            : locale.datepicker.ariaLabel)
+          (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel)
         }
         error={this.props.error}
         positive={this.props.positive}
@@ -487,35 +433,19 @@ export default class Datepicker<T = Date> extends React.Component<
   }
 
   render() {
-    const {
-      overrides = {},
-      startDateLabel = 'Start Date',
-      endDateLabel = 'End Date',
-    } = this.props;
-    const [PopoverComponent, popoverProps] = getOverrides(
-      overrides.Popover,
-      Popover,
-    );
+    const { overrides = {}, startDateLabel = 'Start Date', endDateLabel = 'End Date' } = this.props;
+    const [PopoverComponent, popoverProps] = getOverrides(overrides.Popover, Popover);
     const [InputWrapper, inputWrapperProps] = getOverrides(
       overrides.InputWrapper,
-      StyledInputWrapper,
-    );
-    const [StartDate, startDateProps] = getOverrides(
-      overrides.StartDate,
-      StyledStartDate,
-    );
-    const [EndDate, endDateProps] = getOverrides(
-      overrides.EndDate,
-      StyledEndDate,
-    );
-    const [InputLabel, inputLabelProps] = getOverrides(
-      overrides.InputLabel,
-      StyledInputLabel,
+      StyledInputWrapper
     );
+    const [StartDate, startDateProps] = getOverrides(overrides.StartDate, StyledStartDate);
+    const [EndDate, endDateProps] = getOverrides(overrides.EndDate, StyledEndDate);
+    const [InputLabel, inputLabelProps] = getOverrides(overrides.InputLabel, StyledInputLabel);
 
     return (
       <LocaleContext.Consumer>
-        {locale => (
+        {(locale) => (
           <React.Fragment>
             <PopoverComponent
               focusLock={false}
@@ -540,22 +470,16 @@ export default class Datepicker<T = Date> extends React.Component<
               {}
               <InputWrapper
                 {...inputWrapperProps}
-                $separateRangeInputs={
-                  this.props.range && this.props.separateRangeInputs
-                }
+                $separateRangeInputs={this.props.range && this.props.separateRangeInputs}
               >
                 {this.props.range && this.props.separateRangeInputs ? (
                   <>
                     <StartDate {...startDateProps}>
-                      <InputLabel {...inputLabelProps}>
-                        {startDateLabel}
-                      </InputLabel>
+                      <InputLabel {...inputLabelProps}>{startDateLabel}</InputLabel>
                       {this.renderInputComponent(locale, 'startDate')}
                     </StartDate>
                     <EndDate {...endDateProps}>
-                      <InputLabel {...inputLabelProps}>
-                        {endDateLabel}
-                      </InputLabel>
+                      <InputLabel {...inputLabelProps}>{endDateLabel}</InputLabel>
                       {this.renderInputComponent(locale, 'endDate')}
                     </EndDate>
                   </>
@@ -598,28 +522,29 @@ export default class Datepicker<T = Date> extends React.Component<
                 clipPath: 'inset(100%)',
               }}
             >
-              {// No date selected
-              !this.props.value ||
-              (Array.isArray(this.props.value) && !this.props.value.length)
-                ? ''
-                : // Date selected in a non-range picker
-                !Array.isArray(this.props.value)
-                ? getInterpolatedString(locale.datepicker.selectedDate, {
-                    date: this.state.inputValue || '',
-                  })
-                : // Start and end dates are selected in a range picker
-                this.props.value.length > 1
-                ? getInterpolatedString(locale.datepicker.selectedDateRange, {
-                    startDate: this.formatDisplayValue(this.props.value[0]),
-                    endDate: this.formatDisplayValue(
-                      // $FlowFixMe
-                      this.props.value[1],
-                    ),
-                  })
-                : // A single date selected in a range picker
-                  `${getInterpolatedString(locale.datepicker.selectedDate, {
-                    date: this.formatDisplayValue(this.props.value[0]),
-                  })} ${locale.datepicker.selectSecondDatePrompt}`}
+              {
+                // No date selected
+                !this.props.value || (Array.isArray(this.props.value) && !this.props.value.length)
+                  ? ''
+                  : // Date selected in a non-range picker
+                  !Array.isArray(this.props.value)
+                  ? getInterpolatedString(locale.datepicker.selectedDate, {
+                      date: this.state.inputValue || '',
+                    })
+                  : // Start and end dates are selected in a range picker
+                  this.props.value.length > 1
+                  ? getInterpolatedString(locale.datepicker.selectedDateRange, {
+                      startDate: this.formatDisplayValue(this.props.value[0]),
+                      endDate: this.formatDisplayValue(
+                        // $FlowFixMe
+                        this.props.value[1]
+                      ),
+                    })
+                  : // A single date selected in a range picker
+                    `${getInterpolatedString(locale.datepicker.selectedDate, {
+                      date: this.formatDisplayValue(this.props.value[0]),
+                    })} ${locale.datepicker.selectSecondDatePrompt}`
+              }
             </p>
           </React.Fragment>
         )}