@instructure/ui-date-input 8.52.1-snapshot-7 → 8.53.0

package/src/DateInput/index.tsx

@@ -45,12 +45,15 @@ import {
 } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 
+import { DateTime, ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
+
 import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 
 import { propTypes, allowedProps } from './props'
-import type { DateInputProps } from './props'
+import type { DateInputProps, DateInputState } from './props'
+import type { FormMessage } from '@instructure/ui-form-field'
 
 /**
 ---
@@ -61,9 +64,10 @@ See <https://instructure.design/#DateInput/>
 **/
 @withStyle(generateStyle, null)
 @testable()
-class DateInput extends Component<DateInputProps> {
+class DateInput extends Component<DateInputProps, DateInputState> {
   static readonly componentId = 'DateInput'
   static Day = Calendar.Day
+  declare context: React.ContextType<typeof ApplyLocaleContext>
   static propTypes = propTypes
   static allowedProps = allowedProps
   static defaultProps = {
@@ -78,10 +82,33 @@ class DateInput extends Component<DateInputProps> {
     isShowingCalendar: false
   }
 
-  state = { hasInputRef: false }
+  state = {
+    hasInputRef: false,
+    isShowingCalendar: false,
+    validatedDate: undefined,
+    messages: []
+  }
   _input?: HTMLInputElement | null = undefined
   ref: Element | null = null
 
+  locale(): string {
+    if (this.props.locale) {
+      return this.props.locale
+    } else if (this.context && this.context.locale) {
+      return this.context.locale
+    }
+    return Locale.browserLocale()
+  }
+
+  timezone() {
+    if (this.props.timezone) {
+      return this.props.timezone
+    } else if (this.context && this.context.timezone) {
+      return this.context.timezone
+    }
+    return DateTime.browserTimeZone()
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
@@ -127,23 +154,139 @@ class DateInput extends Component<DateInputProps> {
   }
 
   handleShowCalendar = (event: React.SyntheticEvent) => {
-    if (this.interaction === 'enabled') {
+    if (!this.props.children) {
+      this.setState({ isShowingCalendar: true })
+    } else if (this.interaction === 'enabled' && this.props.children) {
       this.props.onRequestShowCalendar?.(event)
     }
   }
 
-  handleHideCalendar = (event: React.SyntheticEvent) => {
-    this.props.onRequestValidateDate?.(event)
-    this.props.onRequestHideCalendar?.(event)
+  validateDate = (date: string) => {
+    const { invalidDateErrorMessage } = this.props
+    const disabledDateErrorMessage =
+      this.props.disabledDateErrorMessage || invalidDateErrorMessage
+    const messages: FormMessage[] = []
+    // check if date is enabled
+    const { disabledDates } = this.props
+    if (
+      (typeof disabledDates === 'function' && disabledDates(date)) ||
+      (Array.isArray(disabledDates) &&
+        disabledDates.find((dateString) =>
+          DateTime.parse(dateString, this.locale(), this.timezone()).isSame(
+            DateTime.parse(date, this.locale(), this.timezone()),
+            'day'
+          )
+        ))
+    ) {
+      messages.push(
+        typeof disabledDateErrorMessage === 'function'
+          ? disabledDateErrorMessage(date)
+          : { type: 'error', text: disabledDateErrorMessage }
+      )
+    }
+
+    // check if date is valid
+    if (
+      !DateTime.parse(
+        date,
+        this.locale(),
+        this.timezone(),
+        [
+          DateTime.momentISOFormat,
+          'llll',
+          'LLLL',
+          'lll',
+          'LLL',
+          'll',
+          'LL',
+          'l',
+          'L'
+        ],
+        true
+      ).isValid()
+    ) {
+      messages.push(
+        typeof invalidDateErrorMessage === 'function'
+          ? invalidDateErrorMessage(date)
+          : { type: 'error', text: invalidDateErrorMessage }
+      )
+    }
+
+    return messages
+  }
+
+  handleHideCalendar = (event: React.SyntheticEvent, setectedDate?: string) => {
+    if (!this.props.children) {
+      const dateString = setectedDate || this.props.value
+      const messages: FormMessage[] = []
+      if (this.props.onRequestValidateDate) {
+        const userValidatedDate = this.props.onRequestValidateDate?.(
+          event,
+          dateString || '',
+          this.validateDate(dateString || '')
+        )
+        messages.push(...(userValidatedDate || []))
+      } else {
+        if (dateString) {
+          messages.push(...this.validateDate(dateString))
+        }
+      }
+      this.setState({ messages, isShowingCalendar: false })
+    } else {
+      this.props.onRequestValidateDate?.(event)
+      this.props.onRequestHideCalendar?.(event)
+    }
   }
 
   handleHighlightOption: SelectableProps['onRequestHighlightOption'] = (
     event,
     { direction }
   ) => {
-    const { onRequestSelectNextDay, onRequestSelectPrevDay } = this.props
-    if (direction === -1) onRequestSelectPrevDay?.(event)
-    if (direction === 1) onRequestSelectNextDay?.(event)
+    const {
+      onRequestSelectNextDay,
+      onRequestSelectPrevDay,
+      onChange,
+      value,
+      currentDate
+    } = this.props
+
+    const isValueValid =
+      value && DateTime.parse(value, this.locale(), this.timezone()).isValid()
+
+    if (direction === -1) {
+      if (onRequestSelectPrevDay) {
+        onRequestSelectPrevDay?.(event)
+      } else {
+        // @ts-expect-error TODO
+        onChange(event, {
+          value: DateTime.parse(
+            isValueValid ? value : currentDate!,
+            this.locale(),
+            this.timezone()
+          )
+            .subtract(1, 'day')
+            .format('MMMM D, YYYY')
+        })
+        this.setState({ messages: [] })
+      }
+    }
+    if (direction === 1) {
+      if (onRequestSelectNextDay) {
+        onRequestSelectNextDay?.(event)
+      } else {
+        // @ts-expect-error TODO
+        onChange(event, {
+          value: DateTime.parse(
+            isValueValid ? value : currentDate!,
+            this.locale(),
+            this.timezone()
+          )
+            .add(1, 'day')
+            .format('MMMM D, YYYY')
+        })
+        this.setState({ messages: [] })
+      }
+    }
   }
 
   renderMonthNavigationButton(type = 'prev') {
@@ -155,7 +298,7 @@ class DateInput extends Component<DateInputProps> {
 
   renderDays(getOptionProps: SelectableRender['getOptionProps']) {
     const children = this.props.children as ReactElement<CalendarDayProps>[]
-
+    if (!children) return
     return Children.map(children, (day) => {
       const { date, isOutsideMonth } = day.props
       const props = { tabIndex: -1, id: this.formatDateId(date) }
@@ -184,8 +327,39 @@ class DateInput extends Component<DateInputProps> {
       onRequestRenderNextMonth,
       onRequestRenderPrevMonth,
       renderNavigationLabel,
-      renderWeekdayLabels
+      renderWeekdayLabels,
+      value,
+      onChange,
+      disabledDates,
+      currentDate
     } = this.props
+
+    const isValidDate = value
+      ? DateTime.parse(value, this.locale(), this.timezone()).isValid()
+      : false
+
+    const noChildrenProps = this.props.children
+      ? {}
+      : {
+          disabledDates,
+          currentDate,
+          selectedDate: isValidDate ? value : undefined,
+          visibleMonth: isValidDate ? value : undefined,
+          onDateSelected: (
+            dateString: string,
+            momentDate: any,
+            e: React.MouseEvent
+          ) => {
+            // @ts-expect-error TODO
+            onChange?.(e, {
+              value: `${momentDate.format('MMMM')} ${momentDate.format(
+                'D'
+              )}, ${momentDate.format('YYYY')}`
+            })
+            this.handleHideCalendar(e, dateString)
+          }
+        }
+
     return (
       <Calendar
         {...(getListProps({
@@ -196,6 +370,7 @@ class DateInput extends Component<DateInputProps> {
           renderNextMonthButton: this.renderMonthNavigationButton('next'),
           renderPrevMonthButton: this.renderMonthNavigationButton('prev')
         }) as CalendarProps)}
+        {...noChildrenProps}
       >
         {this.renderDays(getOptionProps)}
       </Calendar>
@@ -219,7 +394,6 @@ class DateInput extends Component<DateInputProps> {
       isInline,
       layout,
       width,
-      messages,
       onRequestValidateDate,
       onRequestShowCalendar,
       onRequestHideCalendar,
@@ -236,7 +410,7 @@ class DateInput extends Component<DateInputProps> {
       ref, // Apply this to the actual inputRef
       ...triggerProps
     } = getTriggerProps()
-
+    const messages = this.props.messages || this.state.messages
     return (
       <TextInput
         {...triggerProps}
@@ -257,20 +431,34 @@ class DateInput extends Component<DateInputProps> {
           display: isInline ? 'inline-block' : 'block',
           renderAfterInput: <IconCalendarMonthLine inline={false} />
         })}
+        onKeyDown={(e) => {
+          if (!this.props.children) {
+            if (e.key === 'Enter') {
+              // @ts-expect-error TODO
+              this.handleHideCalendar(e)
+            }
+          }
+          triggerProps.onKeyDown?.(e)
+        }}
       />
     )
   }
 
-  render() {
-    const { placement, isShowingCalendar, assistiveText, styles } = this.props
+  shouldShowCalendar = () =>
+    this.props.children
+      ? this.props.isShowingCalendar
+      : this.state.isShowingCalendar
 
+  render() {
+    const { placement, assistiveText, styles } = this.props
+    const isShowingCalendar = this.shouldShowCalendar()
     return (
       <Selectable
         isShowingOptions={isShowingCalendar}
         onRequestShowOptions={this.handleShowCalendar}
         onRequestHideOptions={this.handleHideCalendar}
         onRequestHighlightOption={this.handleHighlightOption}
-        onRequestSelectOption={this.handleHideCalendar}
+        onRequestSelectOption={(e) => this.handleHideCalendar(e)}
         selectedOptionId={this.selectedDateId}
         highlightedOptionId={this.selectedDateId}
       >

package/src/DateInput/props.ts

@@ -132,9 +132,14 @@ type DateInputOwnProps = {
   /**
    * Callback fired when the input is blurred. Feedback should be provided
    * to the user when this function is called if the selected date or input
-   * value is not valid.
+   * value is not valid. The component calculates date validity and if it's
+   * disabled or nor and passes that information to this callback.
    */
-  onRequestValidateDate?: (event: SyntheticEvent) => void
+  onRequestValidateDate?: (
+    event: SyntheticEvent,
+    dateString?: string,
+    validation?: FormMessage[]
+  ) => void | FormMessage[]
   /**
    * Callback fired requesting the calendar be shown.
    */
@@ -175,7 +180,7 @@ type DateInputOwnProps = {
    * full day name for assistive technologies and the children containing the
    * abbreviation. ex. `[<AccessibleContent alt="Sunday">Sun</AccessibleContent>, ...]`
    */
-  renderWeekdayLabels: (React.ReactNode | (() => React.ReactNode))[]
+  renderWeekdayLabels?: (React.ReactNode | (() => React.ReactNode))[]
   /**
    * A button to render in the calendar navigation header. The recommendation is
    * to compose it with the [Button](#Button) component, setting the `variant`
@@ -195,6 +200,56 @@ type DateInputOwnProps = {
    * weeks).
    */
   children?: ReactElement<CalendarDayProps>[] // TODO: oneOf([Calendar.Day])
+  /*
+   * Specify which date(s) will be shown as disabled in the calendar.
+   * You can either supply an array of ISO8601 timeDate strings or
+   * a function that will be called for each date shown in the calendar.
+   */
+  disabledDates?: string[] | ((isoDateToCheck: string) => boolean)
+  /**
+   * ISO date string for the current date if necessary. Defaults to the current
+   * date in the user's timezone.
+   */
+  currentDate?: string
+  /**
+   * The message shown to the user when the data is invalid.
+   * If a string, shown to the user anytime the input is invalid.
+   *
+   * If a function, receives a single parameter:
+   * - *rawDateValue*: the string entered as a date by the user.
+   **/
+  invalidDateErrorMessage?: string | ((rawDateValue: string) => FormMessage)
+  /**
+   * Error message shown to the user if they enter a date that is disabled.
+   * If not specified the component will show the `invalidDateTimeMessage`.
+   */
+  disabledDateErrorMessage?: string | ((rawDateValue: string) => FormMessage)
+  /**
+   * A standard language identifier.
+   *
+   * See [Moment.js](https://momentjs.com/timezone/docs/#/using-timezones/parsing-in-zone/) for
+   * more details.
+   *
+   * This property can also be set via a context property and if both are set
+   * then the component property takes precedence over the context property.
+   *
+   * The web browser's locale will be used if no value is set via a component
+   * property or a context property.
+   **/
+  locale?: string
+  /**
+   * A timezone identifier in the format: *Area/Location*
+   *
+   * See [List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) for the list
+   * of possible options.
+   *
+   * This property can also be set via a context property and if both are set
+   * then the component property takes precedence over the context property.
+   *
+   * The web browser's timezone will be used if no value is set via a component
+   * property or a context property.
+   **/
+  timezone?: string
 }
 
 type PropKeys = keyof DateInputOwnProps
@@ -238,10 +293,22 @@ const propTypes: PropValidators<PropKeys> = {
   renderNavigationLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   renderWeekdayLabels: PropTypes.arrayOf(
     PropTypes.oneOfType([PropTypes.func, PropTypes.node])
-  ).isRequired,
+  ),
   renderNextMonthButton: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   renderPrevMonthButton: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  children: ChildrenPropTypes.oneOf([Calendar.Day])
+  children: ChildrenPropTypes.oneOf([Calendar.Day]),
+  disabledDates: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+  currentDate: PropTypes.string,
+  disabledDateErrorMessage: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string
+  ]),
+  invalidDateErrorMessage: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string
+  ]),
+  locale: PropTypes.string,
+  timezone: PropTypes.string
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -273,8 +340,21 @@ const allowedProps: AllowedPropKeys = [
   'renderWeekdayLabels',
   'renderNextMonthButton',
   'renderPrevMonthButton',
-  'children'
+  'children',
+  'disabledDates',
+  'currentDate',
+  'disabledDateErrorMessage',
+  'invalidDateErrorMessage',
+  'locale',
+  'timezone'
 ]
 
-export type { DateInputProps, DateInputStyle }
+type DateInputState = {
+  hasInputRef: boolean
+  isShowingCalendar: boolean
+  validatedDate?: string
+  messages: FormMessage[]
+}
+
+export type { DateInputProps, DateInputStyle, DateInputState }
 export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -7,20 +7,53 @@
   },
   "include": ["src"],
   "references": [
-    { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
-    { "path": "../ui-test-utils/tsconfig.build.json" },
-    { "path": "../emotion/tsconfig.build.json" },
-    { "path": "../ui-calendar/tsconfig.build.json" },
-    { "path": "../ui-form-field/tsconfig.build.json" },
-    { "path": "../ui-icons/tsconfig.build.json" },
-    { "path": "../ui-popover/tsconfig.build.json" },
-    { "path": "../ui-position/tsconfig.build.json" },
-    { "path": "../ui-prop-types/tsconfig.build.json" },
-    { "path": "../ui-react-utils/tsconfig.build.json" },
-    { "path": "../ui-selectable/tsconfig.build.json" },
-    { "path": "../ui-testable/tsconfig.build.json" },
-    { "path": "../ui-text-input/tsconfig.build.json" },
-    { "path": "../ui-utils/tsconfig.build.json" }
+    {
+      "path": "../ui-babel-preset/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-test-locator/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-test-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../emotion/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-calendar/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-form-field/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-icons/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-popover/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-position/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-prop-types/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-react-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-selectable/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-testable/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-text-input/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-utils/tsconfig.build.json"
+    },
+    {
+      "path": "../ui-i18n/tsconfig.build.json"
+    }
   ]
 }