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 71 72 73 74 75 76 77 78 79 80 81 | 10x 75x 75x 75x 75x 10x | 'use client';
import {Popup, TextInput, useMobile} from '@gravity-ui/uikit';
import {block} from '../../utils/cn';
import {Calendar} from '../Calendar';
import {DateField} from '../DateField';
import {HiddenInput} from '../HiddenInput/HiddenInput';
import type {
AccessibilityProps,
DomProps,
FocusableProps,
InputDOMProps,
KeyboardEvents,
PopupStyleProps,
StyleProps,
TextInputExtendProps,
TextInputProps,
} from '../types';
import {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';
import {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';
import type {RelativeDateFieldOptions} from './hooks/useRelativeDateFieldState';
import './RelativeDateField.scss';
const b = block('relative-date-field');
export interface RelativeDateFieldProps
extends
RelativeDateFieldOptions,
TextInputProps,
TextInputExtendProps,
DomProps,
InputDOMProps,
StyleProps,
AccessibilityProps,
FocusableProps,
KeyboardEvents,
PopupStyleProps {
/**
* Show time field in popup
* @default false
*/
hasTime?: boolean;
}
export function RelativeDateField(props: RelativeDateFieldProps) {
const state = useRelativeDateFieldState(props);
const {groupProps, inputProps, popupProps, calendarProps, timeInputProps} =
useRelativeDateFieldProps(state, props);
const isMobile = useMobile();
return (
<div {...groupProps} role="group" className={b(null, props.className)} style={props.style}>
<TextInput {...inputProps} className={b('field')} />
<HiddenInput
name={props.name}
value={state.value}
onReset={(value) => {
state.setValue(value);
}}
disabled={state.disabled}
form={props.form}
/>
{!isMobile && (
<Popup {...popupProps} className={props.popupClassName} style={props.popupStyle}>
<div className={b('popup-content')}>
<Calendar {...calendarProps} />
{props.hasTime ? (
<div className={b('time-field-wrapper')}>
<DateField className={b('time-field')} {...timeInputProps} />
</div>
) : null}
</div>
</Popup>
)}
</div>
);
}
|