@aures/custom-react-table
Version:
dynamic table based on react table v7
63 lines • 3.8 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectComponent = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const react_i18next_1 = require("react-i18next");
const react_select_1 = __importDefault(require("react-select"));
const NoOptionsMessage_1 = __importDefault(require("./NoOptionsMessage"));
const reactstrap_1 = require("reactstrap");
const classnames_1 = __importDefault(require("classnames"));
function SelectComponent({ options, setDesignationFilter, handleSavedFiltersSelect, designationFilter, setAllFilters, filterNameIsUpdated, setNameIsUpdated, nameIsUpdated, savedFilters, canSaveUpdated, setCanSaveUpdated, placeholder, }) {
const { t } = (0, react_i18next_1.useTranslation)();
const [selectInputRef, setSelectInputRef] = react_1.default.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_1.default.useEffect(() => {
if (designationFilter === '') {
selectInputRef === null || selectInputRef === void 0 ? void 0 : selectInputRef.clearValue();
}
}, [designationFilter, selectInputRef]);
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: !filterNameIsUpdated ? ((0, jsx_runtime_1.jsx)(react_select_1.default, { 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: NoOptionsMessage_1.default } })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(reactstrap_1.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: (0, classnames_1.default)({
input__clz: canSaveUpdated === false,
}) }), canSaveUpdated === false ? ((0, jsx_runtime_1.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] })) }));
}
exports.SelectComponent = SelectComponent;
//# sourceMappingURL=SelectComponent.js.map