Time picker

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

TimePicker

TimePickerTrigger

TimePickerAnchor

TimePickerContent

TimePanel

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

TimePicker

TimePicker 속성
Prop	Type	필수 여부
`children`	`ReactNode`	선택
`open`	`boolean`	선택
`defaultOpen`	`boolean`	선택
`onOpenChange`	`((open: boolean) => void)`	선택

TimePickerTrigger

TimePickerTrigger 속성
Prop	Type	필수 여부
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	필수
`standalone` Bind to the enclosing official Popover, not a surrounding TimePicker.	`boolean`	선택

TimePickerContent

TimePickerContent 속성
Prop	Type	필수 여부
`aria-label` Defines a string value that labels the current element.	`string`	조건부
`aria-labelledby` Identifies the element (or elements) that labels the current element.	`string`	조건부

TimePanel

TimePanel 속성
Prop	Type	필수 여부
`value`	`TimeValue \| null`	선택
`defaultValue`	`TimeValue \| null`	선택
`minTime`	`TimeValue`	선택
`maxTime`	`TimeValue`	선택
`onValueChange`	`((value: TimeValue \| null) => void)`	선택
`labels`	`Partial<TimePanelLabels>`	선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode, type ComponentPropsWithRef } from 'react';

import { Popover as PopoverPrimitive } from 'radix-ui';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type TimePickerProps = {
    children?: ReactNode;
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
};

export type TimePickerTriggerProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>, 'asChild' | 'children'> & DataAttributes & {
    children: ReactElement;
    /** Bind to the enclosing official Popover, not a surrounding TimePicker. */
    standalone?: boolean;
};

export type TimePickerAnchorProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor> & DataAttributes;

export type TimePickerContentProps = Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'asChild' | 'deferPointerDownOutside' | 'forceMount' | 'role'> & DataAttributes & ({
    'aria-label': string;
    'aria-labelledby'?: string;
} | {
    'aria-label'?: string;
    'aria-labelledby': string;
});

export declare function TimePicker({ children, defaultOpen, open, onOpenChange, }: TimePickerProps): import("react").JSX.Element;

export declare const TimePickerTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "children" | "asChild"> & DataAttributes & {
    children: ReactElement;
    /** Bind to the enclosing official Popover, not a surrounding TimePicker. */
    standalone?: boolean;
} & import("react").RefAttributes<HTMLElement>>;

export declare const TimePickerAnchor: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & DataAttributes & import("react").RefAttributes<HTMLDivElement>>;

export declare const TimePickerContent: import("react").ForwardRefExoticComponent<TimePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;

export type TimeValue = {
    hour: number;
    minute: number;
};

type TimeConstraints = {
    minTime?: TimeValue;
    maxTime?: TimeValue;
};

export type TimePanelLabels = {
    period: string;
    hour: string;
    minute: string;
    am: string;
    pm: string;
};

export type TimePanelProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'children'> & TimeConstraints & {
    value?: TimeValue | null;
    defaultValue?: TimeValue | null;
    onValueChange?: (value: TimeValue | null) => void;
    labels?: Partial<TimePanelLabels>;
};

export declare const TimePanel: import("react").ForwardRefExoticComponent<Omit<TimePanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;