phx-react
Version:
PHX REACT
42 lines • 2.06 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { PHXButton } from '../Button/Button';
import { classNames } from '../types';
export function PHXButtonGroup({ className, size, dataGroups, type, label }) {
const [active, setActive] = useState('');
const [current, setCurrent] = 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;
}
};
useEffect(() => {
for (const item of dataGroups) {
if (item.defaultActive) {
setActive(item.buttonText);
setCurrent(true);
}
}
}, [dataGroups]);
return (React.createElement("div", null,
label && React.createElement("label", { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
React.createElement("div", { className: `flex w-fit justify-start gap-x-2 rounded-lg ${className}` }, dataGroups.map((item, index) => (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 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