@instructure/ui-date-input 9.5.2-snapshot-7 → 9.6.0

package/src/DateInput2/index.tsx

@@ -25,7 +25,6 @@
 /** @jsx jsx */
 import { useState, useEffect, useContext } from 'react'
 import type { SyntheticEvent } from 'react'
-import moment from 'moment-timezone'
 import { Calendar } from '@instructure/ui-calendar'
 import { IconButton } from '@instructure/ui-buttons'
 import {
@@ -43,25 +42,24 @@ import { jsx } from '@instructure/emotion'
 import { propTypes } from './props'
 import type { DateInput2Props } from './props'
 import type { FormMessage } from '@instructure/ui-form-field'
+import type { Moment } from '@instructure/ui-i18n'
 
-function isValidDate(dateString: string): boolean {
-  return !isNaN(new Date(dateString).getTime())
+function parseDate(dateString: string): string {
+  const date = new Date(dateString)
+  return isNaN(date.getTime()) ? '' : date.toISOString()
 }
 
-function isValidMomentDate(
+function defaultDateFormatter(
   dateString: string,
   locale: string,
   timezone: string
-): boolean {
-  return moment
-    .tz(
-      dateString,
-      [moment.ISO_8601, 'llll', 'LLLL', 'lll', 'LLL', 'll', 'LL', 'l', 'L'],
-      locale,
-      true,
-      timezone
-    )
-    .isValid()
+) {
+  return new Date(dateString).toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric',
+    day: 'numeric',
+    timeZone: timezone
+  })
 }
 
 /**
@@ -87,6 +85,8 @@ const DateInput2 = ({
   locale,
   timezone,
   placeholder,
+  formatDate = defaultDateFormatter,
+  // margin, TODO enable this prop
   ...rest
 }: DateInput2Props) => {
   const [selectedDate, setSelectedDate] = useState<string>('')
@@ -97,6 +97,8 @@ const DateInput2 = ({
   const localeContext = useContext(ApplyLocaleContext)
 
   useEffect(() => {
+    // when `value` is changed, validation removes the error message if passes
+    // but it's NOT adding error message if validation fails for better UX
     validateInput(true)
   }, [value])
 
@@ -104,46 +106,53 @@ const DateInput2 = ({
     setInputMessages(messages || [])
   }, [messages])
 
-  const handleInputChange = (e: SyntheticEvent, value: string) => {
-    onChange?.(e, value)
+  useEffect(() => {
+    setSelectedDate(parseDate(value || ''))
+  }, [])
+
+  const handleInputChange = (
+    e: SyntheticEvent,
+    newValue: string,
+    parsedDate: string = ''
+  ) => {
+    // blur event formats the input which shouldn't trigger parsing
+    if (e.type !== 'blur') {
+      setSelectedDate(parseDate(newValue))
+    }
+    onChange?.(e, newValue, parsedDate)
   }
 
   const handleDateSelected = (
     dateString: string,
-    _momentDate: any, // real type is Moment but used `any` to avoid importing the moment lib
+    _momentDate: Moment,
     e: SyntheticEvent
   ) => {
-    const formattedDate = new Date(dateString).toLocaleDateString(getLocale(), {
-      month: 'long',
-      year: 'numeric',
-      day: 'numeric',
-      timeZone: getTimezone()
-    })
-    handleInputChange(e, formattedDate)
+    const formattedDate = formatDate(dateString, getLocale(), getTimezone())
+    const parsedDate = parseDate(dateString)
+    setSelectedDate(parsedDate)
+    handleInputChange(e, formattedDate, parsedDate)
     setShowPopover(false)
-    onRequestValidateDate?.(formattedDate, true)
+    onRequestValidateDate?.(dateString, true)
   }
 
+  // onlyRemoveError is used to remove the error msg immediately when the user inputs a valid date (and don't wait for blur event)
   const validateInput = (onlyRemoveError = false): boolean => {
-    // TODO `isValidDate` and `isValidMomentDate` basically have the same functionality but the latter is a bit more strict (e.g.: `33` is only valid in `isValidMomentDate`)
-    // in the future we should get rid of moment but currently Calendar is using it for validation too so we can only remove it simultaneously
-    // otherwise DateInput could pass invalid dates to Calendar and break it
-    if (
-      (isValidDate(value || '') &&
-        isValidMomentDate(value || '', getLocale(), getTimezone())) ||
-      value === ''
-    ) {
-      setSelectedDate(value || '')
+    // don't validate empty input
+    if (!value || parseDate(value) || selectedDate) {
       setInputMessages(messages || [])
       return true
     }
-    if (!onlyRemoveError && typeof invalidDateErrorMessage === 'string') {
-      setInputMessages((messages) => [
+    // only show error if there is no user provided validation callback
+    if (
+      !onlyRemoveError &&
+      typeof invalidDateErrorMessage === 'string' &&
+      !onRequestValidateDate
+    ) {
+      setInputMessages([
         {
           type: 'error',
           text: invalidDateErrorMessage
-        },
-        ...messages
+        }
       ])
     }
 
@@ -171,14 +180,9 @@ const DateInput2 = ({
 
   const handleBlur = (e: SyntheticEvent) => {
     const isInputValid = validateInput(false)
-    if (isInputValid && value) {
-      const formattedDate = new Date(value).toLocaleDateString(getLocale(), {
-        month: 'long',
-        year: 'numeric',
-        day: 'numeric',
-        timeZone: getTimezone()
-      })
-      handleInputChange(e, formattedDate)
+    if (isInputValid && selectedDate) {
+      const formattedDate = formatDate(selectedDate, getLocale(), getTimezone())
+      handleInputChange(e, formattedDate, selectedDate)
     }
     onRequestValidateDate?.(value, isInputValid)
     onBlur?.(e)
@@ -187,6 +191,7 @@ const DateInput2 = ({
   return (
     <TextInput
       {...passthroughProps(rest)}
+      // margin={'large'} TODO add this prop to TextInput
       renderLabel={renderLabel}
       onChange={handleInputChange}
       onBlur={handleBlur}
@@ -225,8 +230,8 @@ const DateInput2 = ({
             onDateSelected={handleDateSelected}
             selectedDate={selectedDate}
             visibleMonth={selectedDate}
-            locale={locale}
-            timezone={timezone}
+            locale={getLocale()}
+            timezone={getTimezone()}
             role="listbox"
             renderNextMonthButton={
               <IconButton

package/src/DateInput2/props.ts

@@ -23,14 +23,18 @@
  */
 
 import PropTypes from 'prop-types'
-import type { SyntheticEvent } from 'react'
+import type { SyntheticEvent, InputHTMLAttributes } from 'react'
 
 import { controllable } from '@instructure/ui-prop-types'
 import { FormPropTypes } from '@instructure/ui-form-field'
 import type { FormMessage } from '@instructure/ui-form-field'
-import type { Renderable, PropValidators } from '@instructure/shared-types'
+import type {
+  OtherHTMLAttributes,
+  Renderable,
+  PropValidators
+} from '@instructure/shared-types'
 
-type DateInput2Props = {
+type DateInput2OwnProps = {
   /**
    * Specifies the input label.
    */
@@ -56,7 +60,11 @@ type DateInput2Props = {
   /**
    * Callback fired when the input changes.
    */
-  onChange?: (event: React.SyntheticEvent, value: string) => void
+  onChange?: (
+    event: React.SyntheticEvent,
+    inputValue: string,
+    dateString: string
+  ) => void
   /**
    * Callback executed when the input fires a blur event.
    */
@@ -157,9 +165,27 @@ type DateInput2Props = {
     startYear: number
     endYear: number
   }
+
+  /**
+   * Formatting function for how the date should be displayed inside the input field. It will be applied if the user clicks on a date in the date picker of after blur event from the input field.
+   */
+  formatDate?: (isoDate: string, locale: string, timezone: string) => string
+
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  // margin?: Spacing TODO enable this prop
 }
 
-type PropKeys = keyof DateInput2Props
+type PropKeys = keyof DateInput2OwnProps
+
+type DateInput2Props = DateInput2OwnProps &
+  OtherHTMLAttributes<
+    DateInput2OwnProps,
+    InputHTMLAttributes<DateInput2OwnProps & Element>
+  >
 
 const propTypes: PropValidators<PropKeys> = {
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
@@ -183,7 +209,8 @@ const propTypes: PropValidators<PropKeys> = {
   ]),
   locale: PropTypes.string,
   timezone: PropTypes.string,
-  withYearPicker: PropTypes.object
+  withYearPicker: PropTypes.object,
+  formatDate: PropTypes.func
 }
 
 export type { DateInput2Props }

package/src/index.ts

@@ -25,3 +25,4 @@
 export { DateInput } from './DateInput'
 export { DateInput2 } from './DateInput2'
 export type { DateInputProps } from './DateInput/props'
+export type { DateInput2Props } from './DateInput2/props'