@adaptabletools/adaptable/src/View/Components/AdaptableInput/AdaptableDateInlineInput.js

Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import * as React from 'react';
import { isValid, parse } from 'date-fns';
import { useState } from 'react';
import Input from '../../../components/Input';
import { useAdaptable } from '../../AdaptableContext';
export const AdaptableDateInlineInput = React.forwardRef((props, ref) => {
    const [hasFocus, setHasFocus] = useState(false);
    const dateInputOptions = useAdaptable().adaptableOptions.userInterfaceOptions.dateInputOptions;
    const dateProps = {
        format: dateInputOptions.dateFormat,
        locale: dateInputOptions.locale,
    };
    const [inputValue, setInputValue] = useState(() => {
        return props.value;
    });
    React.useEffect(() => {
        if (hasFocus) {
            return;
        }
        setInputValue(props.value);
    }, [props.value]);
    const handleInputChange = (e) => {
        setInputValue(e.currentTarget.value);
        const date = parse(e.currentTarget.value, dateProps.format, new Date());
        if (isValid(date)) {
            props.onChange(e.currentTarget.value);
        }
        else {
            props.onChange(undefined);
        }
    };
    return (React.createElement(Input, { ...props, onFocus: (event) => {
            props.onFocus?.(event);
            setHasFocus(true);
        }, onBlur: (event) => {
            props.onBlur?.(event);
            setHasFocus(false);
        }, ref: ref, value: inputValue, onChange: (e) => handleInputChange(e), placeholder: props.placeholder ?? dateProps.format, style: props.style, disabled: props.disabled }));
});