@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
45 lines • 2.24 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PillSelectorControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const stylesName_1 = require("../../constants/stylesName/stylesName");
const useStylesV2_1 = require("../../hooks/useStyles/useStylesV2");
const pillSelectorStandAlone_1 = require("./pillSelectorStandAlone");
const pillSelectorType_1 = require("./types/pillSelectorType");
const PillSelectorControlledComponent = ({ variant, size, ctv, type = pillSelectorType_1.PillSelectorType.SELECTOR_MULTIPLE, ...props }, ref) => {
const variantStyles = (0, useStylesV2_1.useStylesV2)({
styleName: stylesName_1.STYLES_NAME.PILL_SELECTOR_V2,
variantName: variant,
customTokens: ctv,
isOptional: true,
});
// Size prop is optional, else select the first size from the variantStyles
const styles = size ? variantStyles?.[size] : variantStyles?.[Object.keys(variantStyles)[0]];
const handlePillChange = (event) => {
if (!props.onChange) {
return;
}
if (type === pillSelectorType_1.PillSelectorType.SELECTOR_SIMPLE) {
props.onChange(event.target.value);
return;
}
// SELECTOR MULTIPLE
if (Array.isArray(props.value)) {
const valueIncluded = props.value.includes(event.target.value);
const newValue = valueIncluded
? props.value.filter(v => v !== event.target.value)
: [...props.value, event.target.value];
props.onChange(newValue);
return;
}
// When value === undefined or value is not array
props.onChange([event.target.value]);
};
return ((0, jsx_runtime_1.jsx)(pillSelectorStandAlone_1.PillSelectorStandAlone, { ref: ref, styles: styles, type: type, onPillChange: handlePillChange, ...props }));
};
exports.PillSelectorControlled = react_1.default.forwardRef(PillSelectorControlledComponent);
//# sourceMappingURL=pillSelectorControlled.js.map