@tableus/ui-bootstrap5
Version:
A Bootstrap 5 UI for tableus.
109 lines • 6.17 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckFilter = exports.SearchFilter = exports.SelectFilter = void 0;
const react_1 = __importStar(require("react"));
const react_bootstrap_1 = require("react-bootstrap");
const bootstrap_1 = require("bootstrap");
const helpers_1 = require("@tableus/core/dist/helpers");
function initBootstrapDropdown(id) {
const element = document.getElementById(id);
if (!element) {
return;
}
const dropdown = new bootstrap_1.Dropdown(element);
return dropdown;
}
const SelectFilter = ({ filterDefinition, filter, setFilter, props, }) => {
const isMulti = filterDefinition.isMulti;
const currentValue = (filter === null || filter === void 0 ? void 0 : filter.value) instanceof Array ? filter === null || filter === void 0 ? void 0 : filter.value : [filter === null || filter === void 0 ? void 0 : filter.value];
const activeOptions = filterDefinition.options.filter((option) => currentValue.includes(option.value));
const id = `tableus-filter-${filterDefinition.key}`;
const elementRef = (0, react_1.useRef)(initBootstrapDropdown(id));
(0, react_1.useEffect)(() => {
elementRef.current = initBootstrapDropdown(id);
}, [id]);
const closeDropdown = () => {
if (!elementRef.current) {
return;
}
elementRef.current.hide();
};
return (react_1.default.createElement("div", { className: "btn-group", role: "group" },
react_1.default.createElement("button", { className: "btn btn-secondary dropdown-toggle" +
(activeOptions.length > 0 ? " active" : ""), type: "button", id: id, "data-bs-toggle": "dropdown", "aria-expanded": "false" }, filterDefinition.label),
react_1.default.createElement("ul", { className: "dropdown-menu", "aria-labelledby": id },
filterDefinition.options.map((option) => {
const isActive = activeOptions.includes(option);
const toggleFilter = () => {
if (isMulti) {
setFilter((prev) => {
if (isActive) {
if (!(prev instanceof Array)) {
throw new Error("Expected array");
}
return prev.filter((o) => o !== option.value);
}
return [...(prev ? prev : []), option.value];
});
}
else {
setFilter(option.value);
}
};
const handleClick = () => {
toggleFilter();
closeDropdown();
};
return (react_1.default.createElement(react_bootstrap_1.Dropdown.Item, { active: isActive, key: option.value, onClick: handleClick }, option.label));
}),
react_1.default.createElement("li", null,
react_1.default.createElement("hr", { className: "dropdown-divider" })),
react_1.default.createElement("li", null,
react_1.default.createElement("a", { className: "dropdown-item" + (activeOptions.length === 0 ? " active" : ""), href: "#", onClick: () => {
setFilter(isMulti ? [] : "");
closeDropdown();
} }, "Keine Filterung")))));
};
exports.SelectFilter = SelectFilter;
const SearchFilter = ({ filterDefinition, filter, setFilter, props, }) => {
var _a, _b;
const [value, setValue] = (0, react_1.useState)((_b = (_a = filter === null || filter === void 0 ? void 0 : filter.value) !== null && _a !== void 0 ? _a : filterDefinition.defaultValue) !== null && _b !== void 0 ? _b : "");
const debouncedSetFilter = (0, helpers_1.useDebouncedCallback)(setFilter, 500);
(0, react_1.useEffect)(() => {
debouncedSetFilter(value);
}, [value]);
return (react_1.default.createElement(react_bootstrap_1.InputGroup, Object.assign({}, props),
react_1.default.createElement(react_bootstrap_1.InputGroup.Text, null, filterDefinition.label),
react_1.default.createElement(react_bootstrap_1.FormControl, { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: filterDefinition.placeholder })));
};
exports.SearchFilter = SearchFilter;
const CheckFilter = ({ filterDefinition, filter, setFilter, props, }) => {
var _a, _b;
return (react_1.default.createElement(react_bootstrap_1.Form.Group, Object.assign({ controlId: filterDefinition.key }, props),
react_1.default.createElement(react_bootstrap_1.Form.Check, { type: "checkbox", label: filterDefinition.label, onChange: () => setFilter(!(filter === null || filter === void 0 ? void 0 : filter.value)), checked: (_b = (_a = filter === null || filter === void 0 ? void 0 : filter.value) !== null && _a !== void 0 ? _a : filterDefinition.defaultValue) !== null && _b !== void 0 ? _b : false })));
};
exports.CheckFilter = CheckFilter;
//# sourceMappingURL=filtering.js.map