@atlaskit/datetime-picker 14.0.2 → 14.0.4

package/dist/cjs/internal/date-picker-migration.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseDate = exports.isDateDisabled = exports.getPlaceholder = exports.getParsedISO = exports.formatDate = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _dateFns = require("date-fns");
+var _parseTokens = require("./parse-tokens");
+var _index = require("./index");
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+var isDateDisabled = exports.isDateDisabled = function isDateDisabled(date, di) {
+  var disabled = di.disabled;
+  return disabled.indexOf(date) > -1;
+};
+var getParsedISO = exports.getParsedISO = function getParsedISO(di) {
+  var iso = di.iso;
+  var _iso$split = iso.split('-'),
+    _iso$split2 = (0, _slicedToArray2.default)(_iso$split, 3),
+    year = _iso$split2[0],
+    month = _iso$split2[1],
+    date = _iso$split2[2];
+  var newIso = iso;
+  var parsedDate = parseInt(date, 10);
+  var parsedMonth = parseInt(month, 10);
+  var parsedYear = parseInt(year, 10);
+  var lastDayInMonth = (0, _dateFns.lastDayOfMonth)(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
+  ).getDate();
+  if (lastDayInMonth < parsedDate) {
+    newIso = "".concat(year, "-").concat((0, _index.padToTwo)(parsedMonth), "-").concat((0, _index.padToTwo)(lastDayInMonth));
+  } else {
+    newIso = "".concat(year, "-").concat((0, _index.padToTwo)(parsedMonth), "-").concat((0, _index.padToTwo)(parsedDate));
+  }
+  return newIso;
+};
+
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+var parseDate = exports.parseDate = function parseDate(date, di) {
+  var parseInputValue = di.parseInputValue,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (parseInputValue) {
+    return parseInputValue(date, dateFormat || _index.defaultDateFormat);
+  }
+  return l10n.parseDate(date);
+};
+
+/**
+ * There are multiple props that can change how the date is formatted.
+ * The priority of props used is:
+ *   1. `formatDisplayLabel`
+ *   2. `dateFormat`
+ *   3. `locale`
+ */
+var formatDate = exports.formatDate = function formatDate(value, di) {
+  var formatDisplayLabel = di.formatDisplayLabel,
+    dateFormat = di.dateFormat,
+    l10n = di.l10n;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || _index.defaultDateFormat);
+  }
+  var date = (0, _dateFns.parseISO)(value);
+  return dateFormat ? (0, _dateFns.format)(date, (0, _parseTokens.convertTokens)(dateFormat)) : l10n.formatDate(date);
+};
+var getPlaceholder = exports.getPlaceholder = function getPlaceholder(di) {
+  var placeholder = di.placeholder,
+    l10n = di.l10n;
+  return placeholder || l10n.formatDate(_index.placeholderDatetime);
+};

package/dist/es2019/components/date-picker.js

@@ -8,18 +8,18 @@ import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
+import { isValid, parseISO } from 'date-fns';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { mergeStyles } from '@atlaskit/select';
-import { defaultDateFormat, EmptyComponent, padToTwo, placeholderDatetime } from '../internal';
+import { EmptyComponent } from '../internal';
+import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
 import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
-import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.0.2";
+const packageVersion = "14.0.4";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -62,26 +62,13 @@ class DatePickerComponent extends Component {
       var _this$props$isOpen;
       return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
     });
-    _defineProperty(this, "isDateDisabled", date => {
-      return this.props.disabled.indexOf(date) > -1;
-    });
     _defineProperty(this, "onCalendarChange", ({
       iso
     }) => {
-      const [year, month, date] = iso.split('-');
-      let newIso = iso;
-      const parsedDate = parseInt(date, 10);
-      const parsedMonth = parseInt(month, 10);
-      const parsedYear = parseInt(year, 10);
-      const lastDayInMonth = lastDayOfMonth(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
-      ).getDate();
-      if (lastDayInMonth < parsedDate) {
-        newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(lastDayInMonth)}`;
-      } else {
-        newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(parsedDate)}`;
-      }
       this.setState({
-        calendarValue: newIso
+        calendarValue: getParsedISO({
+          iso
+        })
       });
     });
     _defineProperty(this, "onCalendarSelect", ({
@@ -169,7 +156,11 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onTextInput", event => {
       const inputValue = event.target.value;
       if (inputValue) {
-        const parsed = this.parseDate(inputValue);
+        const parsed = parseDate(inputValue, {
+          parseInputValue: this.props.parseInputValue,
+          dateFormat: this.props.dateFormat,
+          l10n: this.state.l10n
+        });
         // Only try to set the date if we have month & day
         if (parsed && isValid(parsed)) {
           // We format the parsed date to YYYY-MM-DD here because
@@ -233,7 +224,9 @@ class DatePickerComponent extends Component {
           // using enter. See https://product-fabric.atlassian.net/browse/DSP-2501
           // for more details.
           event.preventDefault();
-          if (!this.isDateDisabled(calendarValue)) {
+          if (!isDateDisabled(calendarValue, {
+            disabled: this.props.disabled
+          })) {
             // Get a safe `calendarValue` in case the value exceeds the maximum
             // allowed by ISO 8601
             const safeCalendarValue = getSafeCalendarValue(calendarValue);
@@ -303,58 +296,6 @@ class DatePickerComponent extends Component {
         this.forceUpdate();
       }
     });
-    /**
-     * There are two props that can change how the date is parsed.
-     * The priority of props used is:
-     *   1. `parseInputValue`
-     *   2. `locale`
-     */
-    _defineProperty(this, "parseDate", date => {
-      const {
-        parseInputValue,
-        dateFormat
-      } = this.props;
-      if (parseInputValue) {
-        return parseInputValue(date, dateFormat || defaultDateFormat);
-      }
-      const {
-        l10n
-      } = this.state;
-      return l10n.parseDate(date);
-    });
-    /**
-     * There are multiple props that can change how the date is formatted.
-     * The priority of props used is:
-     *   1. `formatDisplayLabel`
-     *   2. `dateFormat`
-     *   3. `locale`
-     */
-    _defineProperty(this, "formatDate", value => {
-      const {
-        formatDisplayLabel,
-        dateFormat
-      } = this.props;
-      const {
-        l10n
-      } = this.state;
-      if (formatDisplayLabel) {
-        return formatDisplayLabel(value, dateFormat || defaultDateFormat);
-      }
-      const date = parseISO(value);
-      return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
-    });
-    _defineProperty(this, "getPlaceholder", () => {
-      const {
-        placeholder
-      } = this.props;
-      if (placeholder) {
-        return placeholder;
-      }
-      const {
-        l10n
-      } = this.state;
-      return l10n.formatDate(placeholderDatetime);
-    });
     this.state = {
       isOpen: this.props.defaultIsOpen,
       isFocused: false,
@@ -457,7 +398,11 @@ class DatePickerComponent extends Component {
       })
     });
     const initialValue = value ? {
-      label: this.formatDate(value),
+      label: formatDate(value, {
+        formatDisplayLabel: this.props.formatDisplayLabel,
+        dateFormat: this.props.dateFormat,
+        l10n: this.state.l10n
+      }),
       value
     } : null;
     return (
@@ -493,7 +438,10 @@ class DatePickerComponent extends Component {
         onChange: this.onSelectChange,
         onFocus: this.onSelectFocus,
         onInputChange: this.handleSelectInputChange,
-        placeholder: this.getPlaceholder(),
+        placeholder: getPlaceholder({
+          placeholder: this.props.placeholder,
+          l10n: this.state.l10n
+        }),
         styles: mergedStyles,
         value: initialValue
       }, selectProps, {

package/dist/es2019/components/date-time-picker.js

@@ -18,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.0.2";
+const packageVersion = "14.0.4";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({