@awsui/components-react/date-input/internal.js

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

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useMemo, useRef, useState } from 'react';
import clsx from 'clsx';
import { getAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import MaskedInput from '../internal/components/masked-input';
import { fireNonCancelableEvent } from '../internal/events';
import useForwardFocus from '../internal/hooks/forward-focus';
import { displayToIso, isoToDisplay } from '../internal/utils/date-time';
import formatDateIso from '../internal/utils/date-time/format-date-iso';
import formatDateLocalized from '../internal/utils/date-time/format-date-localized';
import { generateMaskArgs, normalizeIsoDateString } from './utils';
import styles from './styles.css.js';
const InternalDateInput = React.forwardRef(({ value, onChange, onBlur, onFocus, granularity = 'day', locale, format = 'slashed', inputFormat = 'slashed', __internalRootRef, __injectAnalyticsComponentMetadata = false, ...props }, ref) => {
    const [isFocused, setIsFocused] = useState(false);
    const inputRef = useRef(null);
    const isIso = format === 'iso' || (format === 'long-localized' && inputFormat === 'iso');
    useForwardFocus(ref, inputRef);
    const onInputFocus = (event) => {
        setIsFocused(true);
        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
    };
    const onInputBlur = (event) => {
        setIsFocused(false);
        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
    };
    const onInputChange = (event) => {
        const isNonFocusedLongLocalized = format === 'long-localized' && !(isFocused || props.readOnly);
        if (!isNonFocusedLongLocalized) {
            fireNonCancelableEvent(onChange, { value: displayToIso(event.detail.value) });
        }
    };
    const usesLongLocalizedValue = format === 'long-localized' && !(isFocused && !props.readOnly);
    const displayedValue = useMemo(() => {
        if (!value) {
            return '';
        }
        const isoValue = displayToIso(value);
        const formatProps = { hideTimeOffset: true, isDateOnly: true, isMonthOnly: granularity === 'month', locale };
        const normalizedValue = normalizeIsoDateString(isoValue, granularity);
        return usesLongLocalizedValue && normalizedValue
            ? formatDateLocalized({ date: normalizedValue, ...formatProps })
            : isIso
                ? formatDateIso({ date: isoValue, ...formatProps })
                : isoToDisplay(isoValue);
    }, [value, isIso, granularity, locale, usesLongLocalizedValue]);
    const componentAnalyticsMetadata = {
        name: 'awsui.DateInput',
        label: 'input',
        properties: {
            value: value || '',
        },
    };
    return (React.createElement(MaskedInput, { ref: inputRef, ...props, value: displayedValue, onChange: onInputChange, onFocus: onInputFocus, onBlur: onInputBlur, className: clsx(styles.root, props.className), mask: generateMaskArgs({ granularity, isIso }), autofix: !usesLongLocalizedValue, disableAutocompleteOnBlur: false, disableBrowserAutocorrect: true, showUnmaskedValue: usesLongLocalizedValue, autoComplete: false, __internalRootRef: __internalRootRef, ...(__injectAnalyticsComponentMetadata
            ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })
            : {}) }));
});
export default InternalDateInput;
//# sourceMappingURL=internal.js.map