@aures/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 { useTranslation } from 'react-i18next';
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, state, }) {
    const { t } = useTranslation();
    const { filterValue, render, preFilteredRows, id } = column;
    const ColElm = column;
    // // console.log((ColElm));
    const [, setValue] = React.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.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 = _uniqby(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 = findFirstColumn(columns) === column;
    const [selectFiltersColumn, 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: selectFiltersColumn, id: column.id, name: column.id, options: unique, placeholder: t('Select...'), onChange: handleSelectOnChangeEvent, 
                // onInputChange={handleSelectOnChangeEvent}
                autoFocus: isFirstColumn, components: { NoOptionsMessage }, menuShouldBlockScroll: true })] }));
}
//# sourceMappingURL=DefaultColumnFilter.js.map