@carbon/react
Version:
React components for the Carbon Design System
158 lines (156 loc) • 5.31 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { usePrefix } from "../../internal/usePrefix.js";
import { deprecate } from "../../prop-types/deprecate.js";
import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
import classNames from "classnames";
import React, { forwardRef } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/TimePicker/TimePicker.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const TimePicker = forwardRef((props, ref) => {
const { children, className, inputClassName, pickerClassName, disabled = false, hideLabel, id, invalidText = "Error message goes here", invalid = false, warningText = "Warning message goes here", warning = false, labelText, light = false, maxLength = 5, onChange = () => {}, onClick = () => {}, onBlur = () => {}, pattern = "(1[012]|[1-9]):[0-5][0-9](\\s)?", placeholder = "hh:mm", readOnly, size = "md", type = "text", value, ...rest } = props;
const prefix = usePrefix();
function handleOnClick(evt) {
if (!disabled) onClick(evt);
}
function handleOnChange(evt) {
if (!disabled && !readOnly) onChange(evt);
}
function handleOnBlur(evt) {
if (!disabled) onBlur(evt);
}
const normalizedProps = useNormalizedInputProps({
id,
readOnly,
disabled,
invalid,
invalidText,
warn: warning,
warnText: warningText
});
const timePickerInputClasses = classNames(`${prefix}--time-picker__input-field`, `${prefix}--text-input`, [inputClassName], {
[`${prefix}--text-input--light`]: light,
[`${prefix}--time-picker__input-field-error`]: normalizedProps.invalid || normalizedProps.warn
});
const timePickerClasses = classNames({
[`${prefix}--time-picker`]: true,
[`${prefix}--time-picker--light`]: light,
[`${prefix}--time-picker--invalid`]: normalizedProps.invalid,
[`${prefix}--time-picker--warning`]: normalizedProps.warn,
[`${prefix}--time-picker--readonly`]: readOnly,
[`${prefix}--time-picker--${size}`]: size,
...pickerClassName && { [pickerClassName]: true }
});
const labelClasses = classNames(`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
[`${prefix}--label--disabled`]: disabled
});
const label = typeof labelText !== "undefined" && labelText !== null && /* @__PURE__ */ jsx("label", {
htmlFor: id,
className: labelClasses,
children: labelText
});
function getInternalPickerSelects() {
const readOnlyEventHandlers = {
onMouseDown: (evt) => {
if (readOnly) {
evt.preventDefault();
evt.target.focus();
}
},
onKeyDown: (evt) => {
if (readOnly && [
"ArrowDown",
"ArrowUp",
" "
].includes(evt.key)) evt.preventDefault();
}
};
return React.Children.map(children, (pickerSelect) => {
const item = pickerSelect;
if (item) return React.cloneElement(item, {
...item.props,
disabled: item.props.disabled ?? disabled,
readOnly,
...readOnlyEventHandlers
});
});
}
const readOnlyProps = { readOnly };
return /* @__PURE__ */ jsxs("div", {
className: classNames(`${prefix}--form-item`, className),
children: [
label,
/* @__PURE__ */ jsxs("div", {
className: timePickerClasses,
children: [/* @__PURE__ */ jsxs("div", {
className: `${prefix}--time-picker__input`,
children: [/* @__PURE__ */ jsx("input", {
className: timePickerInputClasses,
"data-invalid": normalizedProps.invalid ? true : void 0,
disabled: normalizedProps.disabled,
id,
maxLength,
onClick: handleOnClick,
onChange: handleOnChange,
onBlur: handleOnBlur,
placeholder,
pattern,
ref,
type,
value,
...rest,
...readOnlyProps
}), (normalizedProps.invalid || normalizedProps.warn) && normalizedProps.icon && /* @__PURE__ */ jsx("div", {
className: `${prefix}--time-picker__error__icon`,
children: React.createElement(normalizedProps.icon, {
className: normalizedProps.invalid ? `${prefix}--checkbox__invalid-icon` : `${prefix}--text-input__invalid-icon--warning`,
size: 16
})
})]
}), getInternalPickerSelects()]
}),
normalizedProps.validation
]
});
});
TimePicker.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
hideLabel: PropTypes.bool,
id: PropTypes.string.isRequired,
invalid: PropTypes.bool,
invalidText: PropTypes.node,
labelText: PropTypes.node,
light: deprecate(PropTypes.bool, "The `light` prop for `TimePicker` is no longer needed and has been deprecated. It will be removed in the next major release. Use the `Layer` component instead."),
maxLength: PropTypes.number,
onBlur: PropTypes.func,
onChange: PropTypes.func,
onClick: PropTypes.func,
pattern: PropTypes.string,
placeholder: PropTypes.string,
readOnly: PropTypes.bool,
size: PropTypes.oneOf([
"sm",
"md",
"lg"
]),
type: PropTypes.string,
value: PropTypes.string,
warning: PropTypes.bool,
warningText: PropTypes.node
};
//#endregion
export { TimePicker as default };