@carbon/react
Version:
React components for the Carbon Design System
78 lines (76 loc) • 2.94 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 FluidTextInput_default from "../FluidTextInput/index.js";
import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
import { WarningAltFilled, WarningFilled } from "@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.forwardRef(({ className, children, disabled, invalid, invalidText, warn, warnText, readOnly, ...other }, ref) => {
const prefix = usePrefix();
const classNames$1 = classNames(className, {
[`${prefix}--time-picker--fluid`]: true,
[`${prefix}--time-picker--equal-width`]: React.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.Children.toArray(children).map((child) => React.cloneElement(child, { disabled: true }));
if (readOnly) return React.Children.toArray(children).map((child) => React.cloneElement(child, { readOnly: true }));
return children;
};
return /* @__PURE__ */ jsxs("div", {
className: classNames$1,
children: [
/* @__PURE__ */ jsxs("div", {
className: `${prefix}--time-picker--fluid__wrapper`,
children: [/* @__PURE__ */ jsx("div", {
className: `${prefix}--time-picker__input`,
children: /* @__PURE__ */ jsx(FluidTextInput_default, {
ref,
readOnly,
disabled,
...other
})
}), childrenWithProps()]
}),
error && /* @__PURE__ */ jsx("hr", { className: `${prefix}--time-picker__divider` }),
error && /* @__PURE__ */ jsx("div", {
className: `${prefix}--form-requirement`,
children: errorText()
}),
error && invalid ? /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--time-picker__icon ${prefix}--time-picker__icon--invalid` }) : /* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--time-picker__icon ${prefix}--time-picker__icon--warn` })
]
});
});
FluidTimePicker.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
invalid: PropTypes.bool,
invalidText: PropTypes.node,
labelText: PropTypes.node.isRequired,
warn: PropTypes.bool,
warnText: PropTypes.node,
readOnly: PropTypes.bool
};
//#endregion
export { FluidTimePicker as default };