@carbon/react
Version:
React components for the Carbon Design System
162 lines (160 loc) • 6.03 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_deprecate = require("../../prop-types/deprecate.js");
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("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 = (0, react.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 = require_usePrefix.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 = require_useNormalizedInputProps.useNormalizedInputProps({
id,
readOnly,
disabled,
invalid,
invalidText,
warn: warning,
warnText: warningText
});
const timePickerInputClasses = (0, classnames.default)(`${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 = (0, classnames.default)({
[`${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 = (0, classnames.default)(`${prefix}--label`, {
[`${prefix}--visually-hidden`]: hideLabel,
[`${prefix}--label--disabled`]: disabled
});
const label = typeof labelText !== "undefined" && labelText !== null && /* @__PURE__ */ (0, react_jsx_runtime.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.default.Children.map(children, (pickerSelect) => {
const item = pickerSelect;
if (item) return react.default.cloneElement(item, {
...item.props,
disabled: item.props.disabled ?? disabled,
readOnly,
...readOnlyEventHandlers
});
});
}
const readOnlyProps = { readOnly };
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: (0, classnames.default)(`${prefix}--form-item`, className),
children: [
label,
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: timePickerClasses,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--time-picker__input`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--time-picker__error__icon`,
children: react.default.createElement(normalizedProps.icon, {
className: normalizedProps.invalid ? `${prefix}--checkbox__invalid-icon` : `${prefix}--text-input__invalid-icon--warning`,
size: 16
})
})]
}), getInternalPickerSelects()]
}),
normalizedProps.validation
]
});
});
TimePicker.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
disabled: prop_types.default.bool,
hideLabel: prop_types.default.bool,
id: prop_types.default.string.isRequired,
invalid: prop_types.default.bool,
invalidText: prop_types.default.node,
labelText: prop_types.default.node,
light: require_deprecate.deprecate(prop_types.default.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: prop_types.default.number,
onBlur: prop_types.default.func,
onChange: prop_types.default.func,
onClick: prop_types.default.func,
pattern: prop_types.default.string,
placeholder: prop_types.default.string,
readOnly: prop_types.default.bool,
size: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
type: prop_types.default.string,
value: prop_types.default.string,
warning: prop_types.default.bool,
warningText: prop_types.default.node
};
//#endregion
exports.default = TimePicker;