reactjs-tokenfield
Version:
TokenField is a highly customizable and generic input component for handling tokenized selections.
340 lines (339 loc) • 19.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.UserSearch = UserSearch;
var _react = _interopRequireWildcard(require("react"));
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function UserSearch(props) {
var _useState = (0, _react.useState)([]),
_useState2 = _slicedToArray(_useState, 2),
selectedUser = _useState2[0],
setSelectedUser = _useState2[1];
var errorRef = (0, _react.useRef)();
var _useState3 = (0, _react.useState)(),
_useState4 = _slicedToArray(_useState3, 2),
searchedUserData = _useState4[0],
setSearchedUserData = _useState4[1];
//import "my-react-package/dist/styles.css";
function isEmpty() {}
var data = props.data,
config = props.config,
_props$tokenCircle = props.tokenCircle,
tokenCircle = _props$tokenCircle === void 0 ? true : _props$tokenCircle,
_props$afterInputCall = props.afterInputCallback,
afterInputCallback = _props$afterInputCall === void 0 ? function () {} : _props$afterInputCall,
_props$showSelected = props.showSelected,
showSelected = _props$showSelected === void 0 ? true : _props$showSelected,
_props$dataKey = props.dataKey,
dataKey = _props$dataKey === void 0 ? "results" : _props$dataKey,
_props$tokenCircleKey = props.tokenCircleKey,
tokenCircleKey = _props$tokenCircleKey === void 0 ? "name" : _props$tokenCircleKey,
_props$letterLimit = props.letterLimit,
letterLimit = _props$letterLimit === void 0 ? 3 : _props$letterLimit;
var _useState5 = (0, _react.useState)(false),
_useState6 = _slicedToArray(_useState5, 2),
isSearching = _useState6[0],
setIsSearching = _useState6[1];
var TokenFieldRef = (0, _react.useRef)();
var _useState7 = (0, _react.useState)(false),
_useState8 = _slicedToArray(_useState7, 2),
sameUserError = _useState8[0],
setSameUserError = _useState8[1];
var _useState9 = (0, _react.useState)(0),
_useState10 = _slicedToArray(_useState9, 2),
currentIndex = _useState10[0],
setCurrentIndex = _useState10[1];
var myRef = (0, _react.useRef)(null);
var ref = (0, _react.useRef)(null);
var _useState11 = (0, _react.useState)(false),
_useState12 = _slicedToArray(_useState11, 2),
apiInProgress = _useState12[0],
setApiInProgress = _useState12[1];
var _useState13 = (0, _react.useState)(""),
_useState14 = _slicedToArray(_useState13, 2),
userEnteredValue = _useState14[0],
setUserEnteredValue = _useState14[1];
(0, _react.useEffect)(function () {
var timeOut = setTimeout(function () {
handleChange();
}, 500);
return function () {
clearTimeout(timeOut);
};
}, [userEnteredValue]);
function handleKey(key, elem) {
if (!elem) return;
var flag = false;
setIsSearching(false);
selectedUser.map(function (user) {
if (data !== null && data !== void 0 && data.hasOwnProperty('maxLimit') && (data === null || data === void 0 ? void 0 : data.maxLimit) <= (selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.length)) {
alert("You cannot Select more");
flag = true;
}
});
if (flag === true) {
setUserEnteredValue("");
setSearchedUserData();
setCurrentIndex(0);
return;
}
setSelectedUser([].concat(_toConsumableArray(selectedUser), [elem]));
data.setDataList([].concat(_toConsumableArray(data.dataList), [elem]));
setUserEnteredValue("");
setSearchedUserData();
setCurrentIndex(0);
}
(0, _react.useEffect)(function () {
if (data.dataList.length == 0) setSelectedUser([]);
}, [data.dataList]);
(0, _react.useEffect)(function () {
if ((data === null || data === void 0 ? void 0 : data.dataList.length) == 0) {
setSelectedUser([]);
}
}, [data]);
function handleRemove(index) {
var newState = selectedUser;
newState.splice(index, 1);
setSelectedUser(_toConsumableArray(newState));
data.dataList.splice(index, 1);
data.setDataList(_toConsumableArray(data.dataList));
}
function getDefaultConfig(data) {
var default_config = {};
if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
var _Object$keys;
(_Object$keys = Object.keys(data === null || data === void 0 ? void 0 : data[0])) === null || _Object$keys === void 0 || _Object$keys.map(function (key) {
default_config[key] = {
display: ""
};
});
}
return default_config;
}
function handleDataObject(response) {
var new_response = response[dataKey];
var new_result = [];
var default_config = getDefaultConfig(response[dataKey]);
new_result = new_response === null || new_response === void 0 ? void 0 : new_response.map(function (data) {
var _Object$keys2;
var each_obj = {};
var entries = response !== null && response !== void 0 && response.config && ((_Object$keys2 = Object.keys(response === null || response === void 0 ? void 0 : response.config)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) > 0 ? Object.entries(response === null || response === void 0 ? void 0 : response.config) : Object.entries(default_config);
entries.sort(function (a, b) {
return b[1].weightage - a[1].weightage;
});
var sortedData = Object.fromEntries(entries);
Object.keys(sortedData).map(function (config_key) {
var _Object$keys3, _response$config$conf;
each_obj[config_key] = {
value: data[config_key],
label: response !== null && response !== void 0 && response.config && ((_Object$keys3 = Object.keys(response === null || response === void 0 ? void 0 : response.config)) === null || _Object$keys3 === void 0 ? void 0 : _Object$keys3.length) > 0 ? response === null || response === void 0 || (_response$config$conf = response.config[config_key]) === null || _response$config$conf === void 0 ? void 0 : _response$config$conf.display : default_config[config_key].display
};
});
return {
data: data,
dropdownMenu: each_obj
};
});
return new_result;
}
function handleChange() {
setIsSearching(true);
if (userEnteredValue === "") {
setSearchedUserData();
return;
}
if (userEnteredValue.length >= letterLimit) {
setApiInProgress(true);
afterInputCallback(userEnteredValue, function (response) {
var result = [];
if (!Array.isArray(response[dataKey])) {
console.log("Not an array!");
return;
}
if (response[dataKey].every(function (item) {
return _typeof(item) === "object" && item !== null;
})) {
console.log("It's an Array of Objects!");
result = handleDataObject(response);
} else if (response[dataKey].every(function (item) {
return typeof item === "string";
})) {
console.log("It's an Array of Strings!");
} else {
console.log("It's a Mixed Array!");
}
setSearchedUserData(_toConsumableArray(result));
});
}
}
(0, _react.useEffect)(function () {
setCurrentIndex(0);
var handleClickOutside = function handleClickOutside(event) {
if (TokenFieldRef.current && !TokenFieldRef.current.contains(event.target)) {
setIsSearching(false);
setUserEnteredValue("");
}
if (errorRef.current && !errorRef.current.contains(event.target)) setSameUserError(false);
};
document.addEventListener("mousedown", handleClickOutside);
return function () {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
(0, _react.useEffect)(function () {
var _TokenFieldRef$curren;
TokenFieldRef === null || TokenFieldRef === void 0 || (_TokenFieldRef$curren = TokenFieldRef.current) === null || _TokenFieldRef$curren === void 0 || _TokenFieldRef$curren.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start"
});
}, [searchedUserData]);
function handleToggleList(event) {
if (!searchedUserData || searchedUserData.length === 0) return;
if (event.keyCode === 13) {
var _searchedUserData$cur;
// Enter key
handleKey(null, (_searchedUserData$cur = searchedUserData[currentIndex]) === null || _searchedUserData$cur === void 0 ? void 0 : _searchedUserData$cur.data);
return;
}
if (event.keyCode === 38) {
// Up Arrow (Stops at index 0)
setCurrentIndex(function (prevIndex) {
var newIndex = prevIndex > 0 ? prevIndex - 1 : prevIndex;
setTimeout(function () {
return executeScroll(newIndex);
}, 0); // Ensure scroll executes after state update
return newIndex;
});
}
if (event.keyCode === 40) {
// Down Arrow (Stops at last index)
setCurrentIndex(function (prevIndex) {
var newIndex = prevIndex < searchedUserData.length - 1 ? prevIndex + 1 : prevIndex;
setTimeout(function () {
return executeScroll(newIndex);
}, 0);
return newIndex;
});
}
}
var executeScroll = function executeScroll() {
if (myRef.current) {
myRef.current.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "start"
});
}
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _stylesModule["default"] === null || _stylesModule["default"] === void 0 ? void 0 : _stylesModule["default"].tokenField,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule["default"] === null || _stylesModule["default"] === void 0 ? void 0 : _stylesModule["default"].tokenFieldContainerFull,
children: [(config === null || config === void 0 ? void 0 : config.displayName) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(_stylesModule["default"].title),
children: config === null || config === void 0 ? void 0 : config.displayName
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: TokenFieldRef,
className: _stylesModule["default"].userSearchWrapper,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule["default"].fullContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
onChange: function onChange(e) {
setUserEnteredValue(e.target.value);
},
type: "text",
placeholder: config.placeholder,
className: "".concat(_stylesModule["default"].input),
value: userEnteredValue,
onKeyDown: function onKeyDown(e) {
return handleToggleList(e);
}
}), userEnteredValue.length >= 3 ? searchedUserData && (searchedUserData === null || searchedUserData === void 0 ? void 0 : searchedUserData.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: TokenFieldRef,
id: _stylesModule["default"].customScroll,
className: "".concat(_stylesModule["default"].UserListDropDown),
children: searchedUserData.length > 0 && (searchedUserData === null || searchedUserData === void 0 ? void 0 : searchedUserData.map(function (elem, index) {
var _elem$data$tokenCircl, _Object$keys4;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
onClick: function onClick(e) {
return handleKey(e, elem.data);
},
ref: currentIndex === index ? myRef : ref,
className: "\n ".concat(currentIndex === index ? _stylesModule["default"].optionListHovered : _stylesModule["default"].optionList, " "),
children: [tokenCircle && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "".concat(_stylesModule["default"].capitalLetter, " "),
children: [" ", (_elem$data$tokenCircl = elem.data[tokenCircleKey]) === null || _elem$data$tokenCircl === void 0 ? void 0 : _elem$data$tokenCircl.split("")[0].toUpperCase()]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "",
children: Object.keys(elem === null || elem === void 0 ? void 0 : elem.dropdownMenu).length > 0 && ((_Object$keys4 = Object.keys(elem === null || elem === void 0 ? void 0 : elem.dropdownMenu)) === null || _Object$keys4 === void 0 ? void 0 : _Object$keys4.map(function (dropdown_key) {
var _elem$dropdownMenu$dr, _elem$dropdownMenu$dr2, _elem$dropdownMenu$dr3;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "",
children: !!(elem !== null && elem !== void 0 && elem.dropdownMenu[dropdown_key]) && (elem === null || elem === void 0 || (_elem$dropdownMenu$dr = elem.dropdownMenu[dropdown_key]) === null || _elem$dropdownMenu$dr === void 0 ? void 0 : _elem$dropdownMenu$dr.value) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "",
children: [elem === null || elem === void 0 || (_elem$dropdownMenu$dr2 = elem.dropdownMenu[dropdown_key]) === null || _elem$dropdownMenu$dr2 === void 0 ? void 0 : _elem$dropdownMenu$dr2.label, " ", elem === null || elem === void 0 || (_elem$dropdownMenu$dr3 = elem.dropdownMenu[dropdown_key]) === null || _elem$dropdownMenu$dr3 === void 0 ? void 0 : _elem$dropdownMenu$dr3.value, " "]
})
});
}))
})]
}, index);
}))
}) : !apiInProgress && (searchedUserData === null || searchedUserData === void 0 ? void 0 : searchedUserData.length) < 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: TokenFieldRef,
id: _stylesModule["default"].customScroll,
className: "".concat(_stylesModule["default"].UserListDropDown),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(_stylesModule["default"].noResultInDropdown),
children: "No Result Found"
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {})]
})
}), showSelected && selectedUser.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(_stylesModule["default"].innerContainer),
children: selectedUser.map(function (elem, index) {
var _elem$tokenCircleKey;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _stylesModule["default"].mailContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(_stylesModule["default"].capitalLetter, " p1"),
children: elem === null || elem === void 0 || (_elem$tokenCircleKey = elem[tokenCircleKey]) === null || _elem$tokenCircleKey === void 0 ? void 0 : _elem$tokenCircleKey.split("")[0].toUpperCase()
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "p1",
children: elem === null || elem === void 0 ? void 0 : elem[tokenCircleKey]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
src: "",
onClick: function onClick() {
return handleRemove(index);
},
style: {
cursor: "pointer"
},
className: "".concat(_stylesModule["default"].cross, " p1")
})]
});
})
})]
})]
})
})
});
}