react-fatless-form
Version:
A lightweight React form package designed for simplicity that simplifies form handling and validation without unnecessary complexity or bloat.
52 lines (51 loc) • 1.94 kB
TypeScript
import React from "react";
export type TimeInputType = {
name: string;
value: string | null;
onChange: (time: string | null) => void;
label: string;
minTime?: string;
maxTime?: string;
style?: React.CSSProperties;
className?: string;
error?: string;
placeholder?: string;
rightIcon?: React.JSX.Element;
disabled?: boolean;
};
/**
* TimeInput component allows users to select a time from a dropdown list.
*
* @component
*
* @example
*
* ```tsx
* <TimeInput
* value="10:00 AM"
* onChange={(time) => console.log(time)}
* label="Select Time"
* minTime="09:00 AM"
* maxTime="05:00 PM"
* placeholder="Select time"
* rightIcon={<SomeIcon />}
* />
* ```
*
* @typedef {Object} TimeInputType
* @property {string | null} value - The selected time value in "hh:mm AM/PM" format.
* @property {(time: string | null) => void} onChange - Callback function to handle time change.
* @property {string} label - The label for the time input.
* @property {string} [minTime] - The minimum selectable time in "hh:mm AM/PM" format.
* @property {string} [maxTime] - The maximum selectable time in "hh:mm AM/PM" format.
* @property {React.CSSProperties} [style] - Custom styles for the component.
* @property {string} [className] - Additional class names for the component.
* @property {string} [error] - Error message to display.
* @property {string} [placeholder] - Placeholder text for the input.
* @property {boolean} [disabled] - Disables the input if `true`.
* @property {React.JSX.Element} [rightIcon] - Icon to display on the right side of the input.
*
* @param {TimeInputType} props - Props for the TimeInput component.
* @returns {JSX.Element} The rendered TimeInput component.
*/
export declare function TimeInput({ value, onChange, error, minTime, maxTime, label, style, placeholder, className, rightIcon, disabled, }: TimeInputType): React.JSX.Element;