@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
35 lines • 4.1 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import InternalDateInput from '../../date-input/internal';
import InternalFormField from '../../form-field/internal';
import { useInternalI18n } from '../../i18n/context.js';
import InternalTimeInput from '../../time-input/internal';
import { generateI18NFallbackKey, generateI18NKey, provideI18N } from './utils';
import styles from '../styles.css.js';
import testutilStyles from '../test-classes/styles.css.js';
export default function RangeInputs({ startDate, onChangeStartDate, startTime, onChangeStartTime, endDate, onChangeEndDate, endTime, onChangeEndTime, i18nStrings, dateOnly, timeInputFormat, dateInputFormat, granularity, }) {
const i18n = useInternalI18n('date-range-picker');
const isMonthPicker = granularity === 'month';
const showTimeInput = !dateOnly && !isMonthPicker;
const isIso = dateInputFormat === 'iso';
const separator = isIso ? '-' : '/';
const dateInputPlaceholder = `YYYY${separator}MM${isMonthPicker ? '' : `${separator}DD`}`;
const i18nProvided = provideI18N(i18nStrings, isMonthPicker, dateOnly, isIso);
const i18nKey = generateI18NKey(isMonthPicker, dateOnly, isIso);
const i18nFallbackKey = generateI18NFallbackKey(isMonthPicker, dateOnly);
return (React.createElement(InternalFormField, { constraintText: i18n(i18nKey, i18nProvided) || i18n(i18nFallbackKey, i18nProvided) },
React.createElement("div", { className: styles['date-and-time-container'] },
React.createElement("div", { className: styles['date-and-time-wrapper'] },
React.createElement(InternalFormField, { stretch: true, label: i18n(isMonthPicker ? 'i18nStrings.startMonthLabel' : 'i18nStrings.startDateLabel', isMonthPicker ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startMonthLabel : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startDateLabel) },
React.createElement(InternalDateInput, { value: startDate, className: clsx(testutilStyles['start-date-input'], isMonthPicker && testutilStyles['start-month-input']), onChange: event => onChangeStartDate(event.detail.value), format: dateInputFormat, placeholder: dateInputPlaceholder, granularity: granularity })),
showTimeInput && (React.createElement(InternalFormField, { stretch: true, label: i18n('i18nStrings.startTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.startTimeLabel) },
React.createElement(InternalTimeInput, { value: startTime, onChange: event => onChangeStartTime(event.detail.value), format: timeInputFormat, placeholder: timeInputFormat, className: testutilStyles['start-time-input'] })))),
React.createElement("div", { className: styles['date-and-time-wrapper'] },
React.createElement(InternalFormField, { stretch: true, label: i18n(isMonthPicker ? 'i18nStrings.endMonthLabel' : 'i18nStrings.endDateLabel', isMonthPicker ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endMonthLabel : i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endDateLabel) },
React.createElement(InternalDateInput, { value: endDate, className: clsx(testutilStyles['end-date-input'], isMonthPicker && testutilStyles['end-month-picker']), onChange: event => onChangeEndDate(event.detail.value), format: dateInputFormat, placeholder: dateInputPlaceholder, granularity: granularity })),
showTimeInput && (React.createElement(InternalFormField, { label: i18n('i18nStrings.endTimeLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.endTimeLabel), stretch: true },
React.createElement(InternalTimeInput, { value: endTime, onChange: event => onChangeEndTime(event.detail.value), format: timeInputFormat, placeholder: timeInputFormat, className: testutilStyles['end-time-input'] })))))));
}
//# sourceMappingURL=range-inputs.js.map