phx-react
Version:
PHX REACT
46 lines • 2.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXButtonGroup = PHXButtonGroup;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Button_1 = require("../Button/Button");
const types_1 = require("../types");
function PHXButtonGroup({ className, size, dataGroups, type, label }) {
const [active, setActive] = (0, react_1.useState)('');
const [current, setCurrent] = (0, react_1.useState)(false);
const setIsActive = (item) => {
item.onClick();
if (type === 'active-button') {
setActive(item.buttonText);
if (item.buttonText === active) {
setCurrent(false);
setActive('');
}
else {
setCurrent(true);
}
}
else {
return;
}
};
(0, react_1.useEffect)(() => {
for (const item of dataGroups) {
if (item.defaultActive) {
setActive(item.buttonText);
setCurrent(true);
}
}
}, [dataGroups]);
return (react_1.default.createElement("div", null,
label && react_1.default.createElement("label", { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
react_1.default.createElement("div", { className: `flex w-fit justify-start gap-x-2 rounded-lg ${className}` }, dataGroups.map((item, index) => (react_1.default.createElement(Button_1.PHXButton, { key: item.buttonText, className: (0, types_1.classNames)(index === 0 ? 'rounded-none rounded-tl-lg rounded-bl-lg border-l' : 'rounded-none', index === dataGroups.length - 1 ? 'rounded-none rounded-tr-lg rounded-br-lg' : 'rounded-none', type === 'active-button' && active === item.buttonText && current
? '!bg-gray-200 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset] !border-b-gray-300 hover:cursor-default'
: '', '!ring-0 border-y border-r border-gray-300 leading-4'), secondary: true, size: size, onClick: () => {
if (type === 'active-button' && active === item.buttonText && current) {
return;
}
setIsActive(item);
} }, item.buttonText))))));
}
//# sourceMappingURL=ButtonGroup.js.map