@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
57 lines • 3.63 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 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, prepareRow, state: { filters }, }) {
// const { t } = useTranslation();
const { filterValue, render, preFilteredRows, id } = column;
const [, setValue] = react_1.default.useState(filterValue || '');
const listOptions = react_1.default.useMemo(() => {
const options = new Set();
preFilteredRows.forEach((row) => {
row.values[id] !== undefined &&
row.values[id] !== '' &&
row.values[id] !== null &&
options.add({ value: row.values[id], label: row.values[id] });
});
return [...options.values()];
}, [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
// 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 [selecteFiltersColumn, 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: selecteFiltersColumn, id: column.id, name: column.id, options: unique, placeholder: listOptions.length > 0 ? 'Sélectionner...' : 'Aucune', onChange: handleSelectOnChangeEvent,
// onInputChange={handleSelectOnChangeEvent}
autoFocus: isFirstColumn, components: { NoOptionsMessage: NoOptionsMessage_1.default }, menuShouldBlockScroll: true })] }));
}
exports.default = DefaultColumnFilter;
//# sourceMappingURL=DefaultColumnFilter.js.map