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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 4x 4x 13x 13x 13x 13x 2x 13x 13x 13x 4x 1x 14x 14x | 'use client';
import React from 'react';
import type {DateTime} from '@gravity-ui/date-utils';
import {TextInput, useFocusWithin} from '@gravity-ui/uikit';
import {block} from '../../utils/cn';
import {useDateFieldProps} from '../DateField/hooks/useDateFieldProps';
import type {DateFieldProps} from '../DateField/hooks/useDateFieldProps';
import {HiddenInput} from '../HiddenInput/HiddenInput';
import type {RangeValue} from '../types';
import {filterDOMProps} from '../utils/filterDOMProps';
import {useRangeDateFieldState} from './hooks/useRangeDateFieldState';
import './RangeDateField.scss';
const b = block('range-date-field');
export type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {
/**
* Delimiter separating the start and end parts of the range.
* @default ' — '
*/
delimiter?: string;
};
export function RangeDateField({className, ...props}: RangeDateFieldProps) {
const state = useRangeDateFieldState(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}
form={props.form}
onReset={(v) => {
state.setDate(v);
}}
value={state.value ?? null}
toStringValue={(v) => (v ? v.start.toISOString() : '')}
disabled={state.disabled}
/>
<HiddenInput
name={props.name}
form={props.form}
value={state.value ?? null}
toStringValue={(v) => (v ? v.end.toISOString() : '')}
disabled={state.disabled}
/>
</div>
);
}
|