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

UI components for GeChiUI.

import { createElement, Fragment } from "@gechiui/element";

/**
 * External dependencies
 */
// Needed to initialise the default datepicker styles.
// See: https://github.com/airbnb/react-dates#initialize
import 'react-dates/initialize';
import { noop } from 'lodash';
/**
 * GeChiUI dependencies
 */

import { useState, forwardRef } from '@gechiui/element';
import { __, _x } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import Button from '../button';
import { default as DatePicker } from './date';
import { default as TimePicker } from './time';
export { DatePicker, TimePicker };

function DateTimePicker(_ref, ref) {
  let {
    currentDate,
    is12Hour,
    isInvalidDate,
    onMonthPreviewed = noop,
    onChange,
    events
  } = _ref;
  const [calendarHelpIsVisible, setCalendarHelpIsVisible] = useState(false);

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

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

export default forwardRef(DateTimePicker);
//# sourceMappingURL=index.js.map