@carbon/react
Version:
React components for the Carbon Design System
82 lines (80 loc) • 3.54 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_index = require("../FluidTextInput/index.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");
let _carbon_icons_react = require("@carbon/icons-react");
//#region src/components/FluidTimePicker/FluidTimePicker.tsx
/**
* Copyright IBM Corp. 2022
*
* 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 FluidTimePicker = react.default.forwardRef(({ className, children, disabled, invalid, invalidText, warn, warnText, readOnly, ...other }, ref) => {
const prefix = require_usePrefix.usePrefix();
const classNames = (0, classnames.default)(className, {
[`${prefix}--time-picker--fluid`]: true,
[`${prefix}--time-picker--equal-width`]: react.default.Children.toArray(children).length !== 2,
[`${prefix}--time-picker--fluid--disabled`]: disabled,
[`${prefix}--time-picker--fluid--invalid`]: invalid,
[`${prefix}--time-picker--fluid--warning`]: warn
});
const errorText = () => {
if (invalid) return invalidText;
if (warn) return warnText;
};
const error = invalid || warn;
const childrenWithProps = () => {
if (disabled) return react.default.Children.toArray(children).map((child) => react.default.cloneElement(child, { disabled: true }));
if (readOnly) return react.default.Children.toArray(children).map((child) => react.default.cloneElement(child, { readOnly: true }));
return children;
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: classNames,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--time-picker--fluid__wrapper`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--time-picker__input`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
ref,
readOnly,
disabled,
...other
})
}), childrenWithProps()]
}),
error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: `${prefix}--time-picker__divider` }),
error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--form-requirement`,
children: errorText()
}),
error && invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningFilled, { className: `${prefix}--time-picker__icon ${prefix}--time-picker__icon--invalid` }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.WarningAltFilled, { className: `${prefix}--time-picker__icon ${prefix}--time-picker__icon--warn` })
]
});
});
FluidTimePicker.propTypes = {
children: prop_types.default.node,
className: prop_types.default.string,
disabled: prop_types.default.bool,
invalid: prop_types.default.bool,
invalidText: prop_types.default.node,
labelText: prop_types.default.node.isRequired,
warn: prop_types.default.bool,
warnText: prop_types.default.node,
readOnly: prop_types.default.bool
};
//#endregion
exports.default = FluidTimePicker;