@aures/custom-react-table
Version:
dynamic table based on react table v7
114 lines • 5.66 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const lodash_uniqby_1 = __importDefault(require("lodash.uniqby"));
const react_i18next_1 = require("react-i18next");
const Table_1 = require("./Table");
const StyledLabel_1 = require("../components/assets/StyledLabel");
const StyledSelectInput_1 = require("../components/assets/StyledSelectInput");
const NoOptionsMessage_1 = __importDefault(require("./NoOptionsMessage"));
function DefaultColumnFilter({ columns, column, setFilter, state, }) {
const { t } = (0, react_i18next_1.useTranslation)();
const { filterValue, render, preFilteredRows, id } = column;
const ColElm = column;
// // console.log((ColElm));
const [, setValue] = react_1.default.useState(filterValue || '');
const items = ColElm === null || ColElm === void 0 ? void 0 : ColElm.colsSetting;
let canSplit;
if (items) {
const foundItem = items.find((x) => x.item === id);
if (foundItem) {
if (foundItem.filterContentSeparation === true) {
canSplit = ',';
}
else if (typeof foundItem.filterContentSeparation === 'string' &&
foundItem.filterContentSeparation.length > 0) {
canSplit = foundItem.filterContentSeparation;
}
else {
canSplit = false;
}
}
else {
canSplit = false;
}
}
else {
canSplit = false;
}
function findAllNamesRecursively(data, item, canSplit) {
const names = [];
function findNames(obj) {
if (obj[`${item}`]) {
if (obj[`${item}`] !== undefined &&
obj[`${item}`] !== '' &&
obj[`${item}`] !== null) {
if (canSplit === false) {
names.push({ value: obj[`${item}`], label: obj[`${item}`] });
}
else {
let dev = obj[`${item}`].split(canSplit);
for (let index = 0; index < dev.length; index++) {
const elo = dev[index];
names.push({ value: elo, label: elo });
}
}
}
}
if (obj.subRows && obj.subRows.length > 0) {
obj.subRows.forEach((subRow) => {
findNames(subRow);
});
}
}
findNames(data);
return names;
}
const listOptions = react_1.default.useMemo(() => {
let ops = [];
for (let index = 0; index < preFilteredRows.length; index++) {
const el = preFilteredRows[index].original;
const items = findAllNamesRecursively(el, id, canSplit);
ops = [...ops, ...items];
if (index === preFilteredRows.length - 1) {
return ops;
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id, preFilteredRows]);
// his uniquby from lodash for get unique array of object
const unique = (0, lodash_uniqby_1.default)(listOptions, 'label'); //using lodash function to filter and get unique opjects
// // console.log(unique,id,canSplit)
// this uniquby from lodash for get unique array of object
// FilterArray = _uniqby(FilterArray, 'label'); //using lodash function to filter and get unique opjects
// let unique: any = [...new Set(_without(FilterArray, undefined, null, 'null', 'undefined'))]; // FilterArray.filter((v, i, a) => a.indexOf(v) === i);
const isFirstColumn = (0, Table_1.findFirstColumn)(columns) === column;
const [selectFiltersColumn, setSelectedValueState] = react_1.default.useState([]);
function handleSelectOnChangeEvent(selectedOption, action) {
//setFilter((prevState: any) => selectedOption.map((elm: any) => elm.value));
setFilter(id, selectedOption.length > 0
? selectedOption.map((elm) => elm.value)
: []);
setSelectedValueState(selectedOption);
}
// ensure that reset loads the new value
react_1.default.useEffect(() => {
setValue(filterValue || '');
setSelectedValueState((prev) => {
let newState = [];
if (filterValue && filterValue.length > 0) {
newState = filterValue.map((elm) => ({ label: elm, value: elm }));
}
return newState;
});
}, [filterValue]);
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledLabel_1.StyledLabel, Object.assign({ htmlFor: column.id }, { children: render('Header') })), (0, jsx_runtime_1.jsx)(StyledSelectInput_1.StyledSelectInput, { menuPlacement: "auto", menuPosition: "fixed", isMulti: true, closeMenuOnSelect: false, value: selectFiltersColumn, id: column.id, name: column.id, options: unique, placeholder: t('Select...'), onChange: handleSelectOnChangeEvent,
// onInputChange={handleSelectOnChangeEvent}
autoFocus: isFirstColumn, components: { NoOptionsMessage: NoOptionsMessage_1.default }, menuShouldBlockScroll: true })] }));
}
exports.default = DefaultColumnFilter;
//# sourceMappingURL=DefaultColumnFilter.js.map