@maherunlocker/custom-react-table/dist/esm/Table/DefaultColumnFilter.js

dynamic table based on react table v7

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import _uniqby from 'lodash.uniqby';
import { findFirstColumn } from './Table';
import { StyledLabel } from '../components/assets/StyledLabel';
import { StyledSelectInput } from '../components/assets/StyledSelectInput';
import NoOptionsMessage from './NoOptionsMessage';
export default function DefaultColumnFilter({ columns, column, setFilter, prepareRow, state: { filters }, }) {
    // const { t } = useTranslation();
    const { filterValue, render, preFilteredRows, id } = column;
    const [, setValue] = React.useState(filterValue || '');
    const listOptions = React.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 = _uniqby(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 = findFirstColumn(columns) === column;
    const [selecteFiltersColumn, setSelectedValueState] = React.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.useEffect(() => {
        setValue(filterValue || '');
        setSelectedValueState((prev) => {
            let newState = [];
            if (filterValue && filterValue.length > 0) {
                newState = filterValue.map((elm) => ({ label: elm, value: elm }));
            }
            return newState;
        });
    }, [filterValue]);
    return (_jsxs(React.Fragment, { children: [_jsx(StyledLabel, Object.assign({ htmlFor: column.id }, { children: render('Header') })), _jsx(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 }, menuShouldBlockScroll: true })] }));
}
//# sourceMappingURL=DefaultColumnFilter.js.map