@meshify/form-elements
Version:
Formik form elements for use through our forms
68 lines (67 loc) • 3.58 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const formik_1 = require("formik");
// import { isEqual } from 'lodash'
const react_1 = __importStar(require("react"));
const images_1 = require("@meshify/images");
require("./search-single-select.scss");
const single_select_radio_button_1 = __importDefault(require("./single-select-radio-button"));
exports.search = (searchText, itemsArray) => {
const searchedArray = [];
itemsArray.forEach((item) => {
if (item.name && item.name.includes(searchText)) {
searchedArray.push(item);
}
});
return searchedArray;
};
const SingleSelectBody = (props) => {
const [isSearching, setIsSearching] = react_1.useState(false);
const [searchedItems, setSearchedItems] = react_1.useState([]); // items that satisfy search
const [currentlyCheckedValueId, setCurrentlyCheckedValueId] = react_1.useState(null);
const { items, form, name } = props;
react_1.useEffect(() => {
// we will check item by id
if (form.values && form.values[name] && form.values[name].id) {
setCurrentlyCheckedValueId(form.values[name].id);
}
}, [form.values, name]);
const getSearchedItems = (e) => {
const searchText = e.target.value;
if (searchText !== "") {
setIsSearching(true);
}
const itemsFromSearch = exports.search(searchText, items);
setSearchedItems(itemsFromSearch);
};
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: "search-wrapper" },
react_1.default.createElement("img", { src: images_1.SearchIcon, alt: "Search" }),
react_1.default.createElement("input", { type: "text", className: "search", placeholder: "Search", onChange: event => getSearchedItems(event), "data-testid": "search-field" })),
react_1.default.createElement("ul", { className: "items-list-wrapper" },
!isSearching &&
items.map((item) => (react_1.default.createElement("li", { key: item.id },
react_1.default.createElement(single_select_radio_button_1.default, { itemValue: item, form: form, fieldName: name, selectedValueId: currentlyCheckedValueId })))),
isSearching &&
searchedItems.length > 0 &&
searchedItems.map((searchedItem) => (react_1.default.createElement("li", { key: searchedItem.id },
react_1.default.createElement(single_select_radio_button_1.default, { itemValue: searchedItem, form: form, fieldName: name, selectedValueId: currentlyCheckedValueId })))),
isSearching && searchedItems.length === 0 && (react_1.default.createElement("li", { className: "not-found" }, "No items found")))));
};
const SearchSingleSelect = (props) => {
const { name, items } = props;
return (react_1.default.createElement(formik_1.Field, { name: name }, ({ field, form }) => {
return react_1.default.createElement(SingleSelectBody, { items: items, form: form, name: name });
}));
};
exports.default = SearchSingleSelect;