@aures/custom-react-table/dist/esm/Table/SelectComponent.js

dynamic table based on react table v7

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useTranslation } from 'react-i18next';
import Select from 'react-select';
import NoOptionsMessage from './NoOptionsMessage';
import { Input } from 'reactstrap';
import classnames from 'classnames';
export function SelectComponent({ options, setDesignationFilter, handleSavedFiltersSelect, designationFilter, setAllFilters, filterNameIsUpdated, setNameIsUpdated, nameIsUpdated, savedFilters, canSaveUpdated, setCanSaveUpdated, placeholder, }) {
    const { t } = useTranslation();
    const [selectInputRef, setSelectInputRef] = React.useState(null);
    const onInputChange = (inputValue, { action, prevInputValue }) => {
        switch (action) {
            case 'input-change':
                setDesignationFilter(inputValue);
                return inputValue;
            case 'menu-close':
                return !designationFilter ? designationFilter : inputValue;
            case 'set-value':
                return inputValue;
            case 'input-blur':
                return !designationFilter ? designationFilter : inputValue;
            default:
                return prevInputValue;
        }
    };
    const onChange = (option, { action }) => {
        setDesignationFilter(option ? option.label : '');
        handleSavedFiltersSelect(option);
        if (action === 'clear') {
            setAllFilters([]);
            setDesignationFilter('');
        }
    };
    React.useEffect(() => {
        if (designationFilter === '') {
            selectInputRef === null || selectInputRef === void 0 ? void 0 : selectInputRef.clearValue();
        }
    }, [designationFilter, selectInputRef]);
    return (_jsx(React.Fragment, { children: !filterNameIsUpdated ? (_jsx(Select, { ref: (ref) => {
                setSelectInputRef(ref);
            }, menuPlacement: "auto", menuPosition: "fixed", isClearable: true, isSearchable: true, onInputChange: onInputChange, name: "savefilterinput", options: options, placeholder: placeholder.toString(), onChange: onChange, components: { NoOptionsMessage } })) : (_jsxs("div", { children: [_jsx(Input, { type: "text", value: nameIsUpdated, onChange: (e) => {
                        setCanSaveUpdated(!(savedFilters.filter((x) => e.target.value.toUpperCase() === x.label.toUpperCase() &&
                            e.target.value.toUpperCase() !==
                                designationFilter.toUpperCase()).length > 0));
                        setNameIsUpdated(e.target.value);
                    }, placeholder: designationFilter, className: classnames({
                        input__clz: canSaveUpdated === false,
                    }) }), canSaveUpdated === false ? (_jsx("div", Object.assign({ style: {
                        width: 'auto',
                        marginTop: '0.10rem',
                        fontSize: '80%',
                        color: '#f46a6a',
                        position: 'absolute',
                    } }, { children: t('The filter name is already exists') }))) : null] })) }));
}
//# sourceMappingURL=SelectComponent.js.map