@carbon/ibm-products
Version:
Carbon for IBM Products
66 lines (64 loc) • 2.94 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 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 { pkg } from "../../settings.js";
import { UserProfileImage } from "../UserProfileImage/UserProfileImage.js";
import React from "react";
import PropTypes from "prop-types";
import { Checkbox, CheckboxCheckedFilled, RadioButton, RadioButtonChecked } from "@carbon/react/icons";
//#region src/components/AddSelect/AddSelectFormControl.jsx
/**
* Copyright IBM Corp. 2024
*
* 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 componentName = "AddSelectFormControl";
const blockClass = `${pkg.prefix}--add-select__selections`;
let AddSelectFormControl = ({ item, onClick, selected, type }) => {
const controlProps = {
onClick,
className: `${blockClass}-form-control-wrapper ${blockClass}-form-control-wrapper--${type}`,
size: 20,
[`aria-labelledby`]: `control-label-${item.id}`
};
const getCheckbox = () => {
if (selected) return /* @__PURE__ */ React.createElement(CheckboxCheckedFilled, controlProps);
return /* @__PURE__ */ React.createElement(Checkbox, controlProps);
};
const getRadio = () => {
if (selected) return /* @__PURE__ */ React.createElement(RadioButtonChecked, controlProps);
return /* @__PURE__ */ React.createElement(RadioButton, controlProps);
};
const getFormControl = () => {
if (!item) return;
if (type === "checkbox") return getCheckbox();
else return getRadio();
};
const getAvatarProps = ({ src, alt, icon, backgroundColor, theme }) => ({
className: `${blockClass}-cell-avatar`,
size: "lg",
theme,
image: src,
imageDescription: alt,
icon,
backgroundColor
});
const getItemIcon = ({ icon: Icon }) => /* @__PURE__ */ React.createElement(Icon, null);
return /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-form-control` }, getFormControl(), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-form-control-label-wrapper` }, item.avatar && /* @__PURE__ */ React.createElement(UserProfileImage, getAvatarProps(item.avatar)), item.icon && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-cell-icon` }, getItemIcon(item)), /* @__PURE__ */ React.createElement("div", { className: `${blockClass}-form-control-label-text` }, /* @__PURE__ */ React.createElement("span", {
className: `${blockClass}-cell-title`,
id: `control-label-${item.id}`
}, item.title), item.subtitle && /* @__PURE__ */ React.createElement("span", { className: `${blockClass}-cell-subtitle` }, item.subtitle))));
};
AddSelectFormControl.propTypes = {
item: PropTypes.object,
onClick: PropTypes.func,
selected: PropTypes.bool,
type: PropTypes.oneOf(["checkbox", "radio"])
};
AddSelectFormControl.displayName = componentName;
//#endregion
export { AddSelectFormControl };