phx-react
Version:
PHX REACT
46 lines • 2.37 kB
JavaScript
;
exports.__esModule = true;
exports.PHXButtonGroup = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var Button_1 = require("../Button/Button");
var types_1 = require("../types");
function PHXButtonGroup(_a) {
var className = _a.className, size = _a.size, dataGroups = _a.dataGroups, type = _a.type, label = _a.label;
var _b = (0, react_1.useState)(''), active = _b[0], setActive = _b[1];
var _c = (0, react_1.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;
}
};
(0, react_1.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_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 justify-start w-fit rounded-lg ".concat(className) }, dataGroups.map(function (item, index) { return (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'
: '', '!ring-0 border-y border-r border-gray-300 leading-4'), secondary: true, size: size, onClick: function () {
setIsActive(item);
} }, item.buttonText)); }))));
}
exports.PHXButtonGroup = PHXButtonGroup;
//# sourceMappingURL=ButtonGroup.js.map