@enact/limestone 1.3.0

package/DatePicker/DatePicker.d.ts

@@ -0,0 +1,173 @@
+// Type definitions for limestone/DatePicker
+
+import * as React from "react";
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface DatePickerBaseProps {
+  /**
+   * The  `day`  component of the Date.
+   *
+   * The value should be a number between 1 and  `maxDays` .
+   */
+  day: number;
+  /**
+   * The number of days in the month.
+   */
+  maxDays: number;
+  /**
+   * The number of months in the year.
+   */
+  maxMonths: number;
+  /**
+   * The  `month`  component of the Date.
+   *
+   * The value should be a number between 1 and  `maxMonths` .
+   */
+  month: number;
+  /**
+   * The order in which the component pickers are displayed.
+   *
+   * The value should be an array of 3 strings containing one of  `'m'` ,  `'d'` , and  `'y'` .
+   */
+  order: string[];
+  /**
+   * The  `year`  component of the Date.
+   */
+  year: number;
+  /**
+   * Disables voice control.
+   */
+  "data-webos-voice-disabled"?: boolean;
+  /**
+ * The "aria-label" for the day picker.
+ * 
+ * If not specified, the "aria-label" for the day picker will be
+a combination of the current value and 'day change a value with up down button'.
+ */
+  dayAriaLabel?: string;
+  /**
+   * Disables the  `DatePicker` .
+   */
+  disabled?: boolean;
+  /**
+   * The primary text of the  `DatePicker` .
+   */
+  label?: string;
+  /**
+   * The maximum selectable  `year`  value.
+   */
+  maxYear?: number;
+  /**
+   * The minimum selectable  `year`  value.
+   */
+  minYear?: number;
+  /**
+ * The "aria-label" for the month picker.
+ * 
+ * If not specified, the "aria-label" for the month picker will be
+a combination of the current value and 'month change a value with up down button'.
+ */
+  monthAriaLabel?: string;
+  /**
+   * Hides the label that displays the date.
+   */
+  noLabel?: boolean;
+  /**
+   * Called when the  `date`  component of the Date changes.
+   */
+  onChangeDate?: Function;
+  /**
+   * Called when the  `month`  component of the Date changes.
+   */
+  onChangeMonth?: Function;
+  /**
+   * Called when the  `year`  component of the Date changes.
+   */
+  onChangeYear?: Function;
+  /**
+   * Called when the component is removed when it had focus.
+   */
+  onSpotlightDisappear?: Function;
+  /**
+   * Called prior to focus leaving the picker when the 5-way left key is pressed.
+   */
+  onSpotlightLeft?: Function;
+  /**
+   * Called prior to focus leaving the picker when the 5-way right key is pressed.
+   */
+  onSpotlightRight?: Function;
+  /**
+   * Disables 5-way spotlight from navigating into the component.
+   */
+  spotlightDisabled?: boolean;
+  /**
+ * The "aria-label" for the year picker.
+ * 
+ * If not specified, the "aria-label" for the year picker will be
+a combination of the current value and 'year change a value with up down button'.
+ */
+  yearAriaLabel?: string;
+  /**
+   * Called when  `Enter`  key down on the last picker
+   */
+  onComplete?: Function;
+}
+/**
+ * A date selection component.
+ * 
+ * This component is most often not used directly but may be composed within another component as it
+is within   .
+ */
+
+export class DatePickerBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, DatePickerBaseProps>
+> {}
+
+export interface DatePickerProps
+  extends Omit<
+    Merge<DatePickerBaseProps, ui_Changeable_ChangeableProps>,
+    "day" | "maxDays" | "maxMonths" | "month" | "order" | "year"
+  > {
+  /**
+   * The initial value used when  `value`  is not set.
+   */
+  defaultValue?: Date;
+  /**
+   * The selected date
+   */
+  value?: Date;
+}
+/**
+ * A date selection component, ready to use in Limestone 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
+   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}
+/>
+```
+ */
+
+export class DatePicker extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, DatePickerProps>
+> {}
+
+/**
+ * Converts a standard  `Date`  object into a locale-specific string.
+ */
+export function dateToLocaleString(date: Date): string | any;
+
+export default DatePicker;

package/DatePicker/DatePicker.js

@@ -0,0 +1,175 @@
+"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(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Date selection components and behaviors.
+ *
+ * @example
+ * <DatePicker onChange={console.log} />
+ *
+ * @module limestone/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 Limestone 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 limestone/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 limestone/DatePicker
+ * @extends limestone/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 limestone/DatePicker.DatePicker.prototype
+ * @public
+ */
+
+/**
+ * The selected date
+ *
+ * @name value
+ * @type {Date}
+ * @memberof limestone/DatePicker.DatePicker.prototype
+ * @public
+ */
+
+/**
+ * Converts a standard `Date` object into a locale-specific string.
+ *
+ * @function
+ * @memberof limestone/DatePicker
+ * @param {Date} date `Date` to convert
+ * @returns {String|null} 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;

package/DatePicker/DatePicker.module.css

@@ -0,0 +1,5 @@
+.datePicker .day,
+.datePicker .month,
+.datePicker .year {
+  /* These should be available to the JS but have no associated rules at this time. */
+}

package/DatePicker/DatePickerBase.js

@@ -0,0 +1,348 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.DatePickerBase = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _DateComponentPicker = require("../internal/DateComponentPicker");
+var _DateTime = _interopRequireDefault(require("../internal/DateTime"));
+var _DatePickerModule = _interopRequireDefault(require("./DatePicker.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["data-webos-voice-disabled", "disabled", "day", "dayAriaLabel", "maxDays", "maxMonths", "maxYear", "minYear", "month", "monthAriaLabel", "noLabel", "onChangeDate", "onChangeMonth", "onChangeYear", "onSpotlightDisappear", "onSpotlightLeft", "onSpotlightRight", "order", "rtl", "spotlightDisabled", "year", "yearAriaLabel"];
+/**
+ * A date selection component.
+ *
+ * This component is most often not used directly but may be composed within another component as it
+ * is within {@link limestone/DatePicker.DatePicker|DatePicker}.
+ *
+ * @class DatePickerBase
+ * @memberof limestone/DatePicker
+ * @ui
+ * @public
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var DatePickerBase = exports.DatePickerBase = (0, _kind["default"])({
+  name: 'DatePickerBase',
+  propTypes: /** @lends limestone/DatePicker.DatePickerBase.prototype */{
+    /**
+     * The `day` component of the Date.
+     *
+     * The value should be a number between 1 and `maxDays`.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    day: _propTypes["default"].number.isRequired,
+    /**
+     * The number of days in the month.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    maxDays: _propTypes["default"].number.isRequired,
+    /**
+     * The number of months in the year.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    maxMonths: _propTypes["default"].number.isRequired,
+    /**
+     * The `month` component of the Date.
+     *
+     * The value should be a number between 1 and `maxMonths`.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    month: _propTypes["default"].number.isRequired,
+    /**
+     * The order in which the component pickers are displayed.
+     *
+     * The value should be an array of 3 strings containing one of `'m'`, `'d'`, and `'y'`.
+     *
+     * @type {String[]}
+     * @required
+     * @public
+     */
+    order: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['m', 'd', 'y'])).isRequired,
+    /**
+     * The `year` component of the Date.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    year: _propTypes["default"].number.isRequired,
+    /**
+     * Disables voice control.
+     *
+     * @type {Boolean}
+     * @memberof limestone/DatePicker.DatePickerBase.prototype
+     * @public
+     */
+    'data-webos-voice-disabled': _propTypes["default"].bool,
+    /**
+     * The "aria-label" for the day picker.
+     *
+     * If not specified, the "aria-label" for the day picker will be
+     * a combination of the current value and 'day change a value with up down button'.
+     *
+     * @type {String}
+     * @public
+     */
+    dayAriaLabel: _propTypes["default"].string,
+    /**
+     * Disables the `DatePicker`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * The primary text of the `DatePicker`.
+     *
+     * @type {String}
+     * @public
+     */
+    label: _propTypes["default"].string,
+    /**
+     * The maximum selectable `year` value.
+     *
+     * @type {Number}
+     * @default 2099
+     * @public
+     */
+    maxYear: _propTypes["default"].number,
+    /**
+     * The minimum selectable `year` value.
+     *
+     * @type {Number}
+     * @default 1900
+     * @public
+     */
+    minYear: _propTypes["default"].number,
+    /**
+     * The "aria-label" for the month picker.
+     *
+     * If not specified, the "aria-label" for the month picker will be
+     * a combination of the current value and 'month change a value with up down button'.
+     *
+     * @type {String}
+     * @public
+     */
+    monthAriaLabel: _propTypes["default"].string,
+    /**
+     * Hides the label that displays the date.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noLabel: _propTypes["default"].bool,
+    /**
+     * Called when the `date` component of the Date changes.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChangeDate: _propTypes["default"].func,
+    /**
+     * Called when the `month` component of the Date changes.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChangeMonth: _propTypes["default"].func,
+    /**
+     * Called when the `year` component of the Date changes.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChangeYear: _propTypes["default"].func,
+    /**
+     * Called when the component is removed when it had focus.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onSpotlightDisappear: _propTypes["default"].func,
+    /**
+     * Called prior to focus leaving the picker when the 5-way left key is pressed.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onSpotlightLeft: _propTypes["default"].func,
+    /**
+     * Called prior to focus leaving the picker when the 5-way right key is pressed.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onSpotlightRight: _propTypes["default"].func,
+    /**
+     * Indicates the content's text direction is right-to-left.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes["default"].bool,
+    /**
+     * Disables 5-way spotlight from navigating into the component.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    spotlightDisabled: _propTypes["default"].bool,
+    /**
+     * The "aria-label" for the year picker.
+     *
+     * If not specified, the "aria-label" for the year picker will be
+     * a combination of the current value and 'year change a value with up down button'.
+     *
+     * @type {String}
+     * @public
+     */
+    yearAriaLabel: _propTypes["default"].string
+  },
+  defaultProps: {
+    maxYear: 2099,
+    minYear: 1900,
+    disabled: false,
+    spotlightDisabled: false
+  },
+  styles: {
+    css: _DatePickerModule["default"],
+    className: 'datePicker'
+  },
+  render: function render(_ref) {
+    var voiceDisabled = _ref['data-webos-voice-disabled'],
+      disabled = _ref.disabled,
+      day = _ref.day,
+      dayAriaLabel = _ref.dayAriaLabel,
+      maxDays = _ref.maxDays,
+      maxMonths = _ref.maxMonths,
+      maxYear = _ref.maxYear,
+      minYear = _ref.minYear,
+      month = _ref.month,
+      monthAriaLabel = _ref.monthAriaLabel,
+      noLabel = _ref.noLabel,
+      onChangeDate = _ref.onChangeDate,
+      onChangeMonth = _ref.onChangeMonth,
+      onChangeYear = _ref.onChangeYear,
+      onSpotlightDisappear = _ref.onSpotlightDisappear,
+      onSpotlightLeft = _ref.onSpotlightLeft,
+      onSpotlightRight = _ref.onSpotlightRight,
+      order = _ref.order,
+      rtl = _ref.rtl,
+      spotlightDisabled = _ref.spotlightDisabled,
+      year = _ref.year,
+      yearAriaLabel = _ref.yearAriaLabel,
+      rest = _objectWithoutProperties(_ref, _excluded);
+    var dayAccessibilityHint = (0, _$L["default"])('day'),
+      monthAccessibilityHint = (0, _$L["default"])('month'),
+      yearAccessibilityHint = (0, _$L["default"])('year');
+    if (noLabel) {
+      delete rest.label;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTime["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      children: order.map(function (picker, index) {
+        var isFirst = index === 0;
+        var isLast = index === order.length - 1;
+        var isLeft = isFirst && !rtl || isLast && rtl;
+        var isRight = isFirst && rtl || isLast && !rtl;
+        switch (picker) {
+          case 'd':
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentRangePicker, {
+              accessibilityHint: dayAccessibilityHint,
+              "aria-label": dayAriaLabel,
+              className: _DatePickerModule["default"].day,
+              "data-last-element": isLast,
+              "data-webos-voice-disabled": voiceDisabled,
+              "data-webos-voice-group-label": dayAccessibilityHint,
+              disabled: disabled,
+              max: maxDays,
+              min: 1,
+              onChange: onChangeDate,
+              onSpotlightDisappear: onSpotlightDisappear,
+              onSpotlightLeft: isLeft ? onSpotlightLeft : null,
+              onSpotlightRight: isRight ? onSpotlightRight : null,
+              spotlightDisabled: spotlightDisabled,
+              value: day,
+              width: 4,
+              wrap: true
+            }, "day-picker");
+          case 'm':
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentRangePicker, {
+              accessibilityHint: monthAccessibilityHint,
+              "aria-label": monthAriaLabel,
+              className: _DatePickerModule["default"].month,
+              "data-last-element": isLast,
+              "data-webos-voice-disabled": voiceDisabled,
+              "data-webos-voice-group-label": monthAccessibilityHint,
+              disabled: disabled,
+              max: maxMonths,
+              min: 1,
+              onChange: onChangeMonth,
+              onSpotlightDisappear: onSpotlightDisappear,
+              onSpotlightLeft: isLeft ? onSpotlightLeft : null,
+              onSpotlightRight: isRight ? onSpotlightRight : null,
+              spotlightDisabled: spotlightDisabled,
+              value: month,
+              width: 4,
+              wrap: true
+            }, "month-picker");
+          case 'y':
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentRangePicker, {
+              accessibilityHint: yearAccessibilityHint,
+              "aria-label": yearAriaLabel,
+              className: _DatePickerModule["default"].year,
+              "data-last-element": isLast,
+              "data-webos-voice-disabled": voiceDisabled,
+              "data-webos-voice-group-label": yearAccessibilityHint,
+              disabled: disabled,
+              max: maxYear,
+              min: minYear,
+              onChange: onChangeYear,
+              onSpotlightDisappear: onSpotlightDisappear,
+              onSpotlightLeft: isLeft ? onSpotlightLeft : null,
+              onSpotlightRight: isRight ? onSpotlightRight : null,
+              spotlightDisabled: spotlightDisabled,
+              value: year,
+              width: 4
+            }, "year-picker");
+        }
+        return null;
+      })
+    }));
+  }
+});
+
+/**
+ * Called when `Enter` key down on the last picker
+ *
+ * @name onComplete
+ * @memberof limestone/DatePicker.DatePickerBase.prototype
+ * @type {Function}
+ * @public
+ */
+var _default = exports["default"] = DatePickerBase;

package/DatePicker/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "DatePicker.js"
+}