@gechiui/components/build/date-time/index.js

UI components for GeChiUI.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "DatePicker", {
  enumerable: true,
  get: function () {
    return _date.default;
  }
});
Object.defineProperty(exports, "TimePicker", {
  enumerable: true,
  get: function () {
    return _time.default;
  }
});
exports.default = void 0;

var _element = require("@gechiui/element");

require("react-dates/initialize");

var _lodash = require("lodash");

var _i18n = require("@gechiui/i18n");

var _button = _interopRequireDefault(require("../button"));

var _date = _interopRequireDefault(require("./date"));

var _time = _interopRequireDefault(require("./time"));

/**
 * External dependencies
 */
// Needed to initialise the default datepicker styles.
// See: https://github.com/airbnb/react-dates#initialize

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function DateTimePicker(_ref, ref) {
  let {
    currentDate,
    is12Hour,
    isInvalidDate,
    onMonthPreviewed = _lodash.noop,
    onChange,
    events
  } = _ref;
  const [calendarHelpIsVisible, setCalendarHelpIsVisible] = (0, _element.useState)(false);

  function onClickDescriptionToggle() {
    setCalendarHelpIsVisible(!calendarHelpIsVisible);
  }

  return (0, _element.createElement)("div", {
    ref: ref,
    className: "components-datetime"
  }, !calendarHelpIsVisible && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_time.default, {
    currentTime: currentDate,
    onChange: onChange,
    is12Hour: is12Hour
  }), (0, _element.createElement)(_date.default, {
    currentDate: currentDate,
    onChange: onChange,
    isInvalidDate: isInvalidDate,
    events: events,
    onMonthPreviewed: onMonthPreviewed
  })), calendarHelpIsVisible && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
    className: "components-datetime__calendar-help"
  }, (0, _element.createElement)("h4", null, (0, _i18n.__)('点击以选择')), (0, _element.createElement)("ul", null, (0, _element.createElement)("li", null, (0, _i18n.__)('点击左右箭头来选择过去或将来的月份。')), (0, _element.createElement)("li", null, (0, _i18n.__)('点击您期望的日期来选择。'))), (0, _element.createElement)("h4", null, (0, _i18n.__)('用键盘导航')), (0, _element.createElement)("ul", null, (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
    "aria-label": (0, _i18n._x)('Enter', 'keyboard button')
  }, "\u21B5"), ' '
  /* JSX removes whitespace, but a space is required for screen readers. */
  , (0, _element.createElement)("span", null, (0, _i18n.__)('选择当前高亮的日期。'))), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
    "aria-label": (0, _i18n.__)('左右方向键')
  }, "\u2190/\u2192"), ' '
  /* JSX removes whitespace, but a space is required for screen readers. */
  , (0, _i18n.__)('向前（左）或向后（右）移动一天。')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
    "aria-label": (0, _i18n.__)('上下方向键')
  }, "\u2191/\u2193"), ' '
  /* JSX removes whitespace, but a space is required for screen readers. */
  , (0, _i18n.__)('向前（上）或向后（下）移动一周。')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
    "aria-label": (0, _i18n.__)('Page Up和Page Down')
  }, (0, _i18n.__)('PgUp/PgDn')), ' '
  /* JSX removes whitespace, but a space is required for screen readers. */
  , (0, _i18n.__)('向前（PgUp）或向后（PgDn）移动一个月。')), (0, _element.createElement)("li", null, (0, _element.createElement)("abbr", {
    "aria-label": (0, _i18n.__)('Home和End')
  }, (0, _i18n.__)('Home/End')), ' '
  /* JSX removes whitespace, but a space is required for screen readers. */
  , (0, _i18n.__)('转到一周的第一天（Home）或最后一天（End）。'))))), (0, _element.createElement)("div", {
    className: "components-datetime__buttons"
  }, !calendarHelpIsVisible && currentDate && (0, _element.createElement)(_button.default, {
    className: "components-datetime__date-reset-button",
    variant: "link",
    onClick: () => onChange(null)
  }, (0, _i18n.__)('重置')), (0, _element.createElement)(_button.default, {
    className: "components-datetime__date-help-toggle",
    variant: "link",
    onClick: onClickDescriptionToggle
  }, calendarHelpIsVisible ? (0, _i18n.__)('关闭') : (0, _i18n.__)('日历帮助'))));
}

var _default = (0, _element.forwardRef)(DateTimePicker);

exports.default = _default;
//# sourceMappingURL=index.js.map