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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 3x 26x 3x 26x 2x 2x | 'use client';
import {Popup, Sheet} from '@gravity-ui/uikit';
import type {PopupProps} from '@gravity-ui/uikit';
import {block} from '../../../../utils/cn';
import type {PopupStyleProps} from '../../../types';
import {PickerForm} from './PickerForm';
import type {PickerFormProps} from './PickerForm';
import './PickerDialog.scss';
const b = block('relative-range-date-picker-dialog');
export interface PickerDialogProps extends PickerFormProps, PopupStyleProps {
/** Popup anchor */
anchor: HTMLElement | null;
/** Manages `Popup` visibility */
open: boolean;
/** Handles popup close event */
onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] | 'apply') => void;
/** Handles popup remove from DOM event */
onRemove?: () => void;
/** If true `Popup` act like a modal dialog */
modal?: boolean;
/** Element which focus should be returned to */
returnFocus?: PopupProps['returnFocus'];
/** If true `Sheet` is used instead of `Popup` */
isMobile?: boolean;
}
export function PickerDialog({
open,
onClose,
isMobile,
anchor,
popupClassName,
popupStyle,
popupPlacement,
popupOffset,
modal,
returnFocus = false,
onRemove,
...props
}: PickerDialogProps) {
Iif (isMobile) {
return (
<Sheet
visible={open}
onClose={() => {
onClose('outside-press');
setTimeout(() => {
onRemove?.();
});
}}
contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}
>
<PickerForm
{...props}
size="xl"
onApply={() => {
onClose('apply');
}}
/>
</Sheet>
);
}
return (
<Popup
open={open}
onOpenChange={(isOpen, _event, reason) => {
Eif (!isOpen) {
onClose(reason);
}
}}
placement={popupPlacement}
offset={popupOffset}
role="dialog"
anchorElement={anchor}
className={b('content', {size: props.size}, popupClassName)}
style={popupStyle}
modal={modal}
returnFocus={returnFocus}
onTransitionOutComplete={onRemove}
>
<PickerForm
{...props}
onApply={() => {
onClose('apply');
}}
/>
</Popup>
);
}
|