@instructure/ui-date-time-input 8.23.1-snapshot.9 → 8.24.1-snapshot.17

package/src/DateTimeInput/index.tsx

@@ -56,6 +56,8 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
   static allowedProps = allowedProps
   static defaultProps = {
     layout: 'inline',
+    colSpacing: 'medium',
+    rowSpacing: 'small',
     timeStep: 30,
     messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
     isRequired: false,
@@ -66,7 +68,6 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
 
   static contextType = ApplyLocaleContext
 
-  private _timeInput?: TimeSelect
   ref: Element | null = null // This is used by Tooltip for positioning
 
   handleRef = (el: Element | null) => {
@@ -134,13 +135,29 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
             .month(this.state.iso.month())
             .year(this.state.iso.year())
         }
-        const newTimeSelectValue = this.state?.timeSelectValue
-          ? this.state.timeSelectValue
-          : this._timeInput
-              ?.getBaseDate()
-              .minute(parsed.minute())
-              .hour(parsed.hour())
-              .toISOString()
+        const newTimeSelectValue = parsed.toISOString()
+        if (this.isDisabledDate(parsed)) {
+          let text =
+            typeof this.props.disabledDateTimeMessage === 'function'
+              ? this.props.disabledDateTimeMessage(parsed.toISOString(true))
+              : this.props.disabledDateTimeMessage
+          if (!text) {
+            text =
+              typeof this.props.invalidDateTimeMessage === 'function'
+                ? this.props.invalidDateTimeMessage(parsed.toISOString(true))
+                : this.props.invalidDateTimeMessage
+          }
+          errorMsg = text ? { text, type: 'error' } : undefined
+          return {
+            iso: parsed.clone(),
+            calendarSelectedDate: parsed.clone(),
+            dateInputTextChanged: false,
+            dateInputText: parsed.format(this.dateFormat),
+            message: errorMsg,
+            timeSelectValue: newTimeSelectValue,
+            renderedDate: parsed.clone()
+          }
+        }
         return {
           iso: parsed.clone(),
           calendarSelectedDate: parsed.clone(),
@@ -194,6 +211,22 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     return this.props.dateFormat
   }
 
+  isDisabledDate(date: Moment) {
+    const disabledDates = this.props.disabledDates
+    if (!disabledDates) {
+      return false
+    }
+    if (Array.isArray(disabledDates)) {
+      for (const aDisabledDate of disabledDates) {
+        if (date.isSame(aDisabledDate, 'day')) {
+          return true
+        }
+      }
+      return false
+    }
+    return disabledDates(date.toISOString())
+  }
+
   // Called when the user enters text into dateInput
   handleDateTextChange = (_event: SyntheticEvent, date: { value: string }) => {
     const dateParsed = this.tryParseDate(date.value)
@@ -319,10 +352,6 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
     }
   }
 
-  timeInputComponentRef = (node: TimeSelect) => {
-    this._timeInput = node
-  }
-
   handleShowCalendar = (_event: SyntheticEvent) => {
     this.setState({ isShowingCalendar: true })
   }
@@ -406,6 +435,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           isOutsideMonth={!date.isSame(renderedDate, 'month')}
           label={date.format('D MMMM YYYY')} // used by screen readers
           onClick={this.handleDayClick}
+          interaction={this.isDisabledDate(date) ? 'disabled' : 'enabled'}
         >
           {date.format('DD')}
         </DateInput.Day>
@@ -491,16 +521,19 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
       timezone,
       messages,
       layout,
+      rowSpacing,
+      colSpacing,
       isRequired,
       interaction,
       renderWeekdayLabels
     } = this.props
+
     return (
       <FormFieldGroup
         description={description}
-        colSpacing="medium"
-        rowSpacing="small"
         layout={layout}
+        rowSpacing={rowSpacing}
+        colSpacing={colSpacing}
         vAlign="top"
         elementRef={this.handleRef}
         messages={[
@@ -509,6 +542,7 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
         ]}
       >
         <DateInput
+          display="block"
           value={this.state.dateInputText}
           onChange={this.handleDateTextChange}
           onBlur={this.handleBlur}
@@ -544,7 +578,6 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
           value={this.state.timeSelectValue}
           onChange={this.handleTimeChange}
           onBlur={this.handleBlur}
-          ref={this.timeInputComponentRef}
           renderLabel={timeRenderLabel}
           locale={locale}
           format={timeFormat}

package/src/DateTimeInput/props.ts

@@ -152,6 +152,14 @@ type DateTimeInputProps = {
    * See [FormFieldGroup](#FormFieldGroup) for details.
    **/
   layout?: 'stacked' | 'columns' | 'inline'
+  /**
+   * Controls the spacing between the inputs when they are in a vertical layout.
+   **/
+  rowSpacing?: 'none' | 'small' | 'medium' | 'large'
+  /**
+   * Controls the spacing between the inputs when they are in a horizontal layout.
+   **/
+  colSpacing?: 'none' | 'small' | 'medium' | 'large'
   /**
    * An ISO 8601 formatted date string representing the current date-time
    * (must be accompanied by an onChange prop).
@@ -197,7 +205,7 @@ type DateTimeInputProps = {
    * Called when the date-time value has changed.
    * The passed in parameters are:
    * - *event*: The triggering event (which may be from the underlying
-   * `          DateInput` or `TimeSelect`)
+   *   `DateInput` or `TimeSelect`)
    * - *isoValue*: The new date value in ISO8601 format, undefined if its invalid
    **/
   onChange?: (event: SyntheticEvent, isoValue?: string) => void
@@ -215,6 +223,17 @@ type DateTimeInputProps = {
    * component
    */
   onBlur?: (e: SyntheticEvent) => void
+  /*
+   * 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)
+  /**
+   * Error message shown to the user if they enter a date that is disabled.
+   * If not specified the component will show the `invalidDateTimeMessage`.
+   */
+  disabledDateTimeMessage?: string | ((rawDateValue: string) => string)
 }
 
 type DateTimeInputState = {
@@ -264,6 +283,8 @@ const propTypes: PropValidators<PropKeys> = {
   messages: PropTypes.arrayOf(FormPropTypes.message),
   messageFormat: PropTypes.string,
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  rowSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
+  colSpacing: PropTypes.oneOf(['none', 'small', 'medium', 'large']),
   value: controllable(I18nPropTypes.iso8601, 'onChange'),
   defaultValue: I18nPropTypes.iso8601,
   renderWeekdayLabels: PropTypes.arrayOf(
@@ -273,7 +294,15 @@ const propTypes: PropValidators<PropKeys> = {
   onChange: PropTypes.func,
   dateInputRef: PropTypes.func,
   timeInputRef: PropTypes.func,
-  onBlur: PropTypes.func
+  onBlur: PropTypes.func,
+  disabledDates: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.arrayOf(PropTypes.string)
+  ]),
+  disabledDateTimeMessage: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func
+  ])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -293,6 +322,8 @@ const allowedProps: AllowedPropKeys = [
   'messages',
   'messageFormat',
   'layout',
+  'rowSpacing',
+  'colSpacing',
   'value',
   'defaultValue',
   'renderWeekdayLabels',
@@ -300,7 +331,9 @@ const allowedProps: AllowedPropKeys = [
   'onChange',
   'dateInputRef',
   'timeInputRef',
-  'onBlur'
+  'onBlur',
+  'disabledDates',
+  'disabledDateTimeMessage'
 ]
 
 export type { DateTimeInputProps, DateTimeInputState }