@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
48 lines • 4.17 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChipStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const chip_styled_1 = require("./chip.styled");
const state_1 = require("./types/state");
const ChipStandAloneComponent = ({ styles, dataTestId = 'chip', range, rangeIcon, state, closeIcon, leftIcon, errorIcon, errorMessage = { content: 'Error message' }, rangeSeparator = { content: 'to' }, deleteText = 'Delete', ...props }, ref) => {
const buildLabel = () => {
if (closeIcon?.altText) {
return closeIcon.altText;
}
if (!range) {
return `${deleteText} ${props.label?.content}`;
}
return `${deleteText} ${range.map(item => item.label).join(` ${rangeSeparator} `)}`;
};
const controlCapitalLetters = (label) => {
return label.charAt(0) + label.slice(1).toLowerCase();
};
const buildRangeOrLabel = () => {
if (!range) {
return ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: styles?.label, ...props.label, children: props.label?.content && controlCapitalLetters(props.label.content) }));
}
return ((0, jsx_runtime_1.jsx)(chip_styled_1.RangeContainerStyled, { children: range.map((rangeItem, index) => {
const isNotLastElement = index !== range.length - 1;
return ((0, jsx_runtime_1.jsxs)(chip_styled_1.RangeItemWrapperStyled, { styles: styles, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: styles?.rangeItemText, children: controlCapitalLetters(rangeItem.label) }), isNotLastElement &&
(rangeIcon?.icon ? ((0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { altText: rangeSeparator.content, customIconStyles: styles?.rangeIcon, ...rangeIcon })) : ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: styles?.rangeItemSeparator, ...rangeSeparator, children: rangeSeparator.content })))] }, `option-${rangeItem.key ? rangeItem.key : rangeItem.label}`));
}) }));
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(chip_styled_1.ChipStyled, { ref: ref, "aria-disabled": state === state_1.ChipStateType.DISABLED, "aria-hidden": state === state_1.ChipStateType.DISABLED, "data-testid": dataTestId, styles: styles, children: [!range && leftIcon && (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: styles?.leftIcon, ...leftIcon }), buildRangeOrLabel(), closeIcon && ((0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: styles?.closeIcon, disabled: state === state_1.ChipStateType.DISABLED, ...closeIcon, altText: `${buildLabel()}` }))] }), (0, jsx_runtime_1.jsx)(chip_styled_1.ErrorStyled, { "aria-live": ariaLiveOption_1.AriaLiveOptionType.POLITE, styles: styles, children: state === state_1.ChipStateType.ERROR && !!errorIcon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: styles?.errorIcon, ...errorIcon }), (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: styles?.errorMessage, ...errorMessage, children: errorMessage.content })] })) })] }));
};
/**
* @description
* Chip component is a selector.
* @param {React.PropsWithChildren<IChipControlled<V>>} props
* @returns {JSX.Element}
* @constructor
*/
exports.ChipStandAlone = react_1.default.forwardRef(ChipStandAloneComponent);
//# sourceMappingURL=chipStandAlone.js.map