@instructure/ui-date-time-input 8.23.1-snapshot.26 → 8.23.1-snapshot.31

package/es/DateTimeInput/index.js

@@ -254,6 +254,29 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         }
 
         const newTimeSelectValue = (_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue ? this.state.timeSelectValue : (_this$_timeInput = this._timeInput) === null || _this$_timeInput === void 0 ? void 0 : _this$_timeInput.getBaseDate().minute(parsed.minute()).hour(parsed.hour()).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'
+          } : void 0;
+          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(),
@@ -309,6 +332,26 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
 
   get dateFormat() {
     return this.props.dateFormat;
+  }
+
+  isDisabledDate(date) {
+    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
 
 
@@ -369,7 +412,8 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
         isOutsideMonth: !date.isSame(renderedDate, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
-        onClick: this.handleDayClick
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
       }, date.format('DD'));
     });
   } // The default weekdays rendered in the calendar

package/es/DateTimeInput/props.js

@@ -51,7 +51,9 @@ const propTypes = {
   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 = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage'];
 export { propTypes, allowedProps };

package/lib/DateTimeInput/index.js

@@ -260,6 +260,29 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         }
 
         const newTimeSelectValue = (_this$state = this.state) !== null && _this$state !== void 0 && _this$state.timeSelectValue ? this.state.timeSelectValue : (_this$_timeInput = this._timeInput) === null || _this$_timeInput === void 0 ? void 0 : _this$_timeInput.getBaseDate().minute(parsed.minute()).hour(parsed.hour()).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'
+          } : void 0;
+          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(),
@@ -315,6 +338,26 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
 
   get dateFormat() {
     return this.props.dateFormat;
+  }
+
+  isDisabledDate(date) {
+    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
 
 
@@ -378,7 +421,8 @@ let DateTimeInput = (_dec = (0, _testable.testable)(), _dec(_class = (_class2 =
         isOutsideMonth: !date.isSame(renderedDate, 'month'),
         label: date.format('D MMMM YYYY') // used by screen readers
         ,
-        onClick: this.handleDayClick
+        onClick: this.handleDayClick,
+        interaction: this.isDisabledDate(date) ? 'disabled' : 'enabled'
       }, date.format('DD'));
     });
   } // The default weekdays rendered in the calendar

package/lib/DateTimeInput/props.js

@@ -64,8 +64,10 @@ const propTypes = {
   onChange: _propTypes.default.func,
   dateInputRef: _propTypes.default.func,
   timeInputRef: _propTypes.default.func,
-  onBlur: _propTypes.default.func
+  onBlur: _propTypes.default.func,
+  disabledDates: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  disabledDateTimeMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur'];
+const allowedProps = ['description', 'dateRenderLabel', 'prevMonthLabel', 'nextMonthLabel', 'datePlaceholder', 'dateFormat', 'interaction', 'timeRenderLabel', 'timeStep', 'timeFormat', 'locale', 'timezone', 'invalidDateTimeMessage', 'messages', 'messageFormat', 'layout', 'rowSpacing', 'colSpacing', 'value', 'defaultValue', 'renderWeekdayLabels', 'isRequired', 'onChange', 'dateInputRef', 'timeInputRef', 'onBlur', 'disabledDates', 'disabledDateTimeMessage'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-date-time-input",
-  "version": "8.23.1-snapshot.26+a5786c908",
+  "version": "8.23.1-snapshot.31+6580c14f5",
   "description": "A UI component that allows to select date and time.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-test-locator": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.26+a5786c908"
+    "@instructure/ui-babel-preset": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-test-locator": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-test-utils": "8.23.1-snapshot.31+6580c14f5"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/debounce": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/emotion": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-a11y-content": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-buttons": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-calendar": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-date-input": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-form-field": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-i18n": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-icons": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-testable": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-time-select": "8.23.1-snapshot.26+a5786c908",
-    "@instructure/ui-utils": "8.23.1-snapshot.26+a5786c908",
+    "@instructure/debounce": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/emotion": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-a11y-content": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-buttons": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-calendar": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-date-input": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-form-field": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-i18n": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-icons": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-prop-types": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-react-utils": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-testable": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-time-select": "8.23.1-snapshot.31+6580c14f5",
+    "@instructure/ui-utils": "8.23.1-snapshot.31+6580c14f5",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "a5786c9083448dc1d7d8b5eecac11788c8b26fec"
+  "gitHead": "6580c14f523ae758258b43f961f558773f7eddfa"
 }

package/src/DateTimeInput/README.md

@@ -5,13 +5,19 @@ describes: DateTimeInput
 A DateTimeInput component is used to enter a date-time value. It is built as a composition
 of the [DateInput](#DateInput) and [TimeSelect](#TimeSelect) components.
 
-#### Localization
+The properties of DateTimeInput prefaced with _date_ are passed to the underlying [DateInput](#DateInput)
+(e.g. _dateLabel_ is DateInput's _label_), while the properties prefaced
+with _time_ are forwarded to the underlying
+[TimeSelect](#TimeSelect). Others are either shared by both sub-components (e.g. locale), or
+are unique to DateTimeInput (e.g. description).
+
+### Localization
 
 The component is localized via its `locale` and `timezone` parameters. Both are read from `props`, `context` and from the browser's locale in this priority order. `locale` determines the language and format dates and time are displayed in (e.g. month names, AM/PM or 24-hour format) and the beginning of the week (e.g. Monday in Germany, Sunday in the U.S.) in the dropdown calendar.
 
-#### Examples
+### Examples
 
-A DateTimeInput with `columns` layout and a default value:
+#### A DateTimeInput with `columns` layout and a default value:
 
 ```js
 ---
@@ -21,7 +27,7 @@ render: false
 class Example extends React.Component {
   render () {
     return (
-      <div style= { {height: 350,width: '40em'}}>
+      <div style= { {height: '10rem',width: '40em'}}>
         <DateTimeInput
           description="Pick a date and time"
           datePlaceholder="Choose a date"
@@ -39,7 +45,7 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-A required DateInput with `stacked` layout that warns if the value in the past:
+#### A required DateInput with `stacked` layout that warns if the value in the past:
 
 ```js
 ---
@@ -69,9 +75,9 @@ class Example extends React.Component {
   render () {
     const text = this.state.value ? new Date(this.state.value).toString() : 'N/A'
     return (
-      <div style={{width: '20em'}}>
+      <div style={{width: '25em'}}>
         <div style={{marginBottom: '1em', fontStyle: 'italic'}}>You entered:<br/>{text}</div>
-        <div style={{height: 350}}>
+        <div style={{height: '14rem'}}>
           <DateTimeInput
             description={<ScreenReaderContent>Pick a date and time</ScreenReaderContent>}
             datePlaceholder="Choose"
@@ -94,7 +100,7 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-A disabled DateTimeInput:
+#### A disabled DateTimeInput:
 
 ```js
 ---
@@ -115,7 +121,7 @@ render: true
 />
 ```
 
-A DateTimeInput in a different locale and timezone where these are set from the React `context`:
+#### A DateTimeInput in a different locale and timezone where these are set from the React `context`:
 
 ```js
 ---
@@ -126,7 +132,7 @@ class Example extends React.Component {
   render() {
     return (
       <ApplyLocale locale="fr" timezone="Africa/Nairobi">
-        <div style={{ height: 350, width: '40em' }}>
+        <div style={{ height: '12rem', width: '40em' }}>
           <DateTimeInput
             description="Pick a date and time"
             datePlaceholder="Choose a date"
@@ -147,8 +153,67 @@ class Example extends React.Component {
 render(<Example />)
 ```
 
-The properties of DateTimeInput prefaced with _date_ are passed to the underlying [DateInput](#DateInput)
-(e.g. _dateLabel_ is DateInput's _label_), while the properties prefaced
-with _time_ are forwarded to the underlying
-[TimeSelect](#TimeSelect). Others are either shared by both sub-components (e.g. locale), or
-are unique to DateTimeInput (e.g. description).
+#### A `DateTimeInput` with some disabled dates that are supplied via a `string` array:
+
+```js
+---
+example: true
+render: true
+---
+<DateTimeInput
+  description="Pick a date and time"
+  datePlaceholder="Choose a date"
+  dateRenderLabel="Date"
+  timeRenderLabel="Time"
+  invalidDateTimeMessage="Invalid date"
+  disabledDateTimeMessage="Disabled date"
+  prevMonthLabel="Previous month"
+  nextMonthLabel="Next month"
+  defaultValue="2022-04-08T13:30"
+  layout="columns"
+  disabledDates={['2022-04-01T13:30', '2022-04-03T13:30', '2022-04-04T13:30']}
+  locale="en-us"
+  timezone="America/Denver"
+/>
+```
+
+#### A `DateTimeInput` with some disabled dates that are supplied via a `function`:
+
+```js
+---
+example: true
+render: false
+---
+const locale = 'en-us'
+const timezone = 'America/Denver'
+
+class Example extends React.Component {
+  getDisabledDates(isoDateToCheck) {
+    const parsed = moment.tz(isoDateToCheck, [moment.ISO_8601], locale, timezone)
+    const now = moment().locale(locale).tz(timezone)
+    return parsed.isBefore(now)
+  }
+  render() {
+    return (
+      <div style= { {height: '12rem', width: '40em'}}>
+        <DateTimeInput
+          description="Pick a date and time"
+          datePlaceholder="Choose a date"
+          dateRenderLabel="Date"
+          timeRenderLabel="Time"
+          invalidDateTimeMessage={(rawDateValue) => 'Invalid date: ' + rawDateValue}
+          disabledDateTimeMessage={(rawDateValue) => 'Disabled date: ' + rawDateValue}
+          prevMonthLabel="Previous month"
+          nextMonthLabel="Next month"
+          defaultValue="2022-04-08T13:30"
+          layout="columns"
+          disabledDates={this.getDisabledDates}
+          locale={locale}
+          timezone={timezone}
+        />
+    </div>)
+  }
+}
+
+render(<Example />)
+```

package/src/DateTimeInput/index.tsx

@@ -143,6 +143,28 @@ class DateTimeInput extends Component<DateTimeInputProps, DateTimeInputState> {
               .minute(parsed.minute())
               .hour(parsed.hour())
               .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(),
@@ -196,6 +218,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)
@@ -408,6 +446,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>

package/src/DateTimeInput/props.ts

@@ -205,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
@@ -223,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 = {
@@ -283,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 = [
@@ -312,7 +331,9 @@ const allowedProps: AllowedPropKeys = [
   'onChange',
   'dateInputRef',
   'timeInputRef',
-  'onBlur'
+  'onBlur',
+  'disabledDates',
+  'disabledDateTimeMessage'
 ]
 
 export type { DateTimeInputProps, DateTimeInputState }