React | Time Picker | Made with Supernova

React

Is new design vision part implemented using new tokens?

Update required

Storybook

React guidance

Source

GitHub code

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { TimePicker, TimeService } from '@optimus-web/core';
                                                        
                                                        const MyTimePickerComponent = () => {
                                                            const [value, setValue] = useState('');
                                                        
                                                            return (
                                                                <TimePicker
                                                                    name="time-picker"
                                                                    getTimeService={() => TimeService}
                                                                    onChange={setValue}
                                                                    value={value}
                                                                />
                                                            );
                                                        }

Name	Type	Description
disabled?	boolean	An optional boolean that, if true, disables the time picker component
label?	ReactNode	This optional property represents the label of the field. It can be any valid React node
required?	boolean	This optional boolean property indicates whether the field is required or not
size?	SizeType	An optional SizeType (not defined in the provided code) that could be used to control the size of the time picker component
helper?	ReactNode	This optional property represents a helper element for the field. It can be any valid React node
className?	string	This optional property is a string that specifies the class name
forText?	string	This optional property is a string that can be used for additional text related to the field
forwardedRef?	Ref<HTMLElement>	This optional property is a ref that can be forwarded to the field. It is a Ref for an HTMLElement
htmlFor?	string	This optional property is a string that specifies which form element a label is bound to
onBlur?	(event?: FocusEvent<HTMLInputElement>) => void	An optional function that handles the blur event
onChange?	(value: string) => void	The callback function that is called when the value of the time picker changes
onFocus?	(event?: FocusEvent<HTMLInputElement>) => void	An optional function that handles the focus event
name	string	The name of the time picker
captionIconWithTooltip?	ReactNode	This optional property represents a caption icon with a tooltip. It can be any valid React node
captionIconHandler?	MouseEventHandler<HTMLButtonElement>	This optional property is a function that handles mouse events on a caption icon in the field. It receives a MouseEventHandler for an HTMLButtonElement
value?	number	The current value of the time picker
error?	ReactNode	This optional property represents an error message for the field. It can be any valid React node
placeholder?	ReactNode	An optional node that displays a placeholder when the time picker component is empty
showSeconds?	boolean	Determines whether to show seconds in the time picker field
onTimeChange?	(time: T) => void	A callback function that is called when the time value changes
time?		This is an optional property that represents the time
showAsDialog?	boolean	Determines whether to show the TimePickerField as a dialog
shouldNormalizeMeridiem?	boolean	Determines whether to normalize the meridiem (AM/PM) value
readOnly?	boolean	This optional boolean property indicates whether the field is read-only or not
getTimeService	() => TimeService	A function that returns the time service
alignRight?	boolean	If true, aligns the text input to the right
clearable?	boolean	If true, the time picker field can be cleared by the user
getValue?	(value: string) => void	A function that gets the current value of the time picker field
id?	string	The ID of the time picker field
indicativeIcon?	IconName	The name of an icon to display in the time input field
inline?	boolean	An optional boolean that, if true, makes the time picker component inline
interactiveIcon?	() => void	The name of an interactive icon to display in the time picker field
leadingImage?	ReactNode	A React node to display as a leading image in the time picker field
loading?	boolean	An optional boolean that, if true, makes the time picker component have a loading state
maxCharacterCount?	number	The maximum number of characters that can be entered in the time picker field
onClear?	() => void	An optional function that handles the clear event
prefix?	ReactNode	A React node to display as a prefix in the input field

Time Picker

Resources

Example

API