Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 17x 17x 14x 14x 14x 14x 2x 14x 14x 14x 17x 14x 1x | 'use client';
import React from 'react';
import {TextInput, useFocusWithin} from '@gravity-ui/uikit';
import {block} from '../../utils/cn';
import {HiddenInput} from '../HiddenInput/HiddenInput';
import {filterDOMProps} from '../utils/filterDOMProps';
import {useDateFieldProps} from './hooks/useDateFieldProps';
import type {DateFieldProps} from './hooks/useDateFieldProps';
import {useDateFieldState} from './hooks/useDateFieldState';
import './DateField.scss';
const b = block('date-field');
export function DateField({className, ...props}: DateFieldProps) {
const state = useDateFieldState(props);
const {inputProps} = useDateFieldProps(state, props);
const [isActive, setActive] = React.useState(false);
const {focusWithinProps} = useFocusWithin({
onFocusWithinChange(isFocusWithin) {
setActive(isFocusWithin);
},
});
const DOMProps = filterDOMProps(props);
delete DOMProps.id;
return (
<div {...DOMProps} className={b(null, className)} style={props.style} {...focusWithinProps}>
<TextInput
{...inputProps}
value={state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value}
/>
<HiddenInput
name={props.name}
value={state.value}
toStringValue={(value) => value?.toISOString() ?? ''}
onReset={(value) => {
state.setDate(value);
}}
disabled={state.disabled}
form={props.form}
/>
</div>
);
}
|