phx-react
Version:
PHX REACT
39 lines • 1.97 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { PHXButton } from '../Button/Button';
import { classNames } from '../types';
export function PHXButtonGroup(_a) {
var className = _a.className, size = _a.size, dataGroups = _a.dataGroups, type = _a.type;
var _b = useState(''), active = _b[0], setActive = _b[1];
var _c = useState(false), current = _c[0], setCurrent = _c[1];
var setIsActive = function (item) {
item.onClick();
if (type === 'active-button') {
setActive(item.buttonText);
if (item.buttonText === active) {
setCurrent(false);
setActive('');
}
else {
setCurrent(true);
}
}
else {
return;
}
};
useEffect(function () {
for (var _i = 0, dataGroups_1 = dataGroups; _i < dataGroups_1.length; _i++) {
var item = dataGroups_1[_i];
if (item.defaultActive) {
setActive(item.buttonText);
setCurrent(true);
}
}
}, [dataGroups]);
return (React.createElement("div", { className: "flex justify-start w-fit rounded-lg ".concat(className) }, dataGroups.map(function (item, index) { return (React.createElement(PHXButton, { key: item.buttonText, className: 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'
: '', '!ring-0 border-y border-r border-gray-300 leading-4 border-b-gray-400 hover:border-b-gray-300'), secondary: true, size: size, onClick: function () {
setIsActive(item);
} }, item.buttonText)); })));
}
//# sourceMappingURL=ButtonGroup.js.map