@enact/sandstone/DatePicker/DatePicker.js

Large-screen/TV support library for Enact, containing a variety of UI components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DatePicker = void 0;
Object.defineProperty(exports, "DatePickerBase", {
  enumerable: true,
  get: function get() {
    return _DatePickerBase["default"];
  }
});
exports["default"] = exports.dateToLocaleString = void 0;
var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
var _DateFactory = _interopRequireDefault(require("ilib/lib/DateFactory"));
var _DateFmt = _interopRequireDefault(require("ilib/lib/DateFmt"));
var _DateTime = require("../internal/DateTime");
var _Skinnable = _interopRequireDefault(require("../Skinnable"));
var _DatePickerBase = _interopRequireDefault(require("./DatePickerBase"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/**
 * Date selection components and behaviors.
 *
 * @example
 * <DatePicker onChange={console.log} />
 *
 * @module sandstone/DatePicker
 * @exports DatePicker
 * @exports DatePickerBase
 * @exports dateToLocaleString
 */

var getLabelFormatter = function getLabelFormatter() {
  return new _DateFmt["default"]({
    date: 'dmwy',
    length: 'full',
    timezone: 'local',
    useNative: false
  });
};
var dateTimeConfig = {
  customProps: function customProps(i18n, value, props) {
    var values = {
      maxMonths: 12,
      maxDays: 31,
      year: 1900,
      month: 1,
      day: 1
    };
    if (value && i18n) {
      values.year = value.getYears();
      values.month = value.getMonths();
      values.day = value.getDays();
      values.maxMonths = i18n.formatter.cal.getNumMonths(values.year);
      values.maxDays = i18n.formatter.cal.getMonLength(values.month, values.year);
      values.maxYear = i18n.toLocalYear(props.maxYear || _DatePickerBase["default"].defaultProps.maxYear);
      values.minYear = i18n.toLocalYear(props.minYear || _DatePickerBase["default"].defaultProps.minYear);
    }
    return values;
  },
  defaultOrder: ['d', 'm', 'y'],
  handlers: {
    onChangeDate: function onChangeDate(ev, value) {
      value.day = ev.value;
      return value;
    },
    onChangeMonth: function onChangeMonth(ev, value) {
      value.month = ev.value;
      return value;
    },
    onChangeYear: function onChangeYear(ev, value) {
      value.year = ev.value;
      return value;
    }
  },
  i18n: function i18n() {
    var order = getLabelFormatter().getTemplate().replace(/'.*?'/g, '').match(/([mdy]+)/ig).map(function (s) {
      return s[0].toLowerCase();
    });

    /*
     * Converts a gregorian year to local year
     *
     * @param	{Number}	year	gregorian year
     *
     * @returns	{Number}		local year
     */
    var toLocalYear = function toLocalYear(year) {
      return (0, _DateFactory["default"])({
        julianday: (0, _DateFactory["default"])({
          year: year,
          type: 'gregorian',
          month: 1,
          day: 1,
          timezone: 'local'
        }).getJulianDay(),
        timezone: 'local'
      }).getYears();
    };
    return {
      formatter: getLabelFormatter(),
      order: order,
      toLocalYear: toLocalYear
    };
  }
};

/**
 * A date selection component, ready to use in Sandstone applications.
 *
 * `DatePicker` may be used to select the year, month, and day. It uses a standard `Date` object for
 * its `value` which can be shared as the `value` for a
 * {@link sandstone/TimePicker.TimePicker|TimePicker} to select both a date and time.
 *
 * By default, `DatePicker` maintains the state of its `value` property. Supply the
 * `defaultValue` property to control its initial value. If you wish to directly control updates
 * to the component, supply a value to `value` at creation time and update it in response to
 * `onChange` events.
 *
 * Usage:
 * ```
 * <DatePicker
 *  defaultValue={selectedDate}
 *  onChange={handleChange}
 * />
 * ```
 *
 * @class DatePicker
 * @memberof sandstone/DatePicker
 * @extends sandstone/DatePicker.DatePickerBase
 * @mixes ui/Changeable.Changeable
 * @omit day
 * @omit maxDays
 * @omit maxMonths
 * @omit month
 * @omit order
 * @omit year
 * @ui
 * @public
 */
var DatePicker = exports.DatePicker = (0, _Pure["default"])((0, _Skinnable["default"])((0, _DateTime.DateTimeDecorator)(dateTimeConfig, _DatePickerBase["default"])));

/**
 * The initial value used when `value` is not set.
 *
 * @name defaultValue
 * @type {Date}
 * @memberof sandstone/DatePicker.DatePicker.prototype
 * @public
 */

/**
 * The selected date
 *
 * @name value
 * @type {Date}
 * @memberof sandstone/DatePicker.DatePicker.prototype
 * @public
 */

/**
 * Converts a standard `Date` object into a locale-specific string.
 *
 * @function
 * @memberof sandstone/DatePicker
 * @param {Date} date `Date` to convert
 * @returns {String?} Converted date or `null` if `date` is invalid
 */
var dateToLocaleString = exports.dateToLocaleString = function dateToLocaleString(date) {
  if (!date) {
    return null;
  }
  return getLabelFormatter().format(date);
};
var _default = exports["default"] = DatePicker;