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

UI components for GeChiUI.

/**
 * 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(
	{
		currentDate,
		is12Hour,
		isInvalidDate,
		onMonthPreviewed = noop,
		onChange,
		events,
	},
	ref
) {
	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(
		false
	);

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

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

export default forwardRef( DateTimePicker );