@chayns-components/core/lib/cjs/components/mention-finder/MentionFinder.js

A set of beautiful React components for developing your own applications with chayns.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("motion/react");
var _react2 = _interopRequireWildcard(require("react"));
var _MentionFinderItem = _interopRequireDefault(require("./mention-finder-item/MentionFinderItem"));
var _MentionFinder = require("./MentionFinder.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const MentionFinder = ({
  inputValue,
  members,
  onSelect,
  popupAlignment
}) => {
  const [activeMember, setActiveMember] = (0, _react2.useState)(members[0]);
  const [focusedIndex, setFocusedIndex] = (0, _react2.useState)(0);
  const ref = (0, _react2.useRef)(null);
  const [fullMatch, searchString] = (0, _react2.useMemo)(() => {
    var _regExpMatchArray$;
    // eslint-disable-next-line no-irregular-whitespace
    const regExpMatchArray = inputValue.match(/@([^\s​]*)/);
    return [regExpMatchArray === null || regExpMatchArray === void 0 ? void 0 : regExpMatchArray[0], (regExpMatchArray === null || regExpMatchArray === void 0 || (_regExpMatchArray$ = regExpMatchArray[1]) === null || _regExpMatchArray$ === void 0 ? void 0 : _regExpMatchArray$.toLowerCase()) ?? ''];
  }, [inputValue]);
  const filteredMembers = (0, _react2.useMemo)(() => searchString !== '' ? members.filter(({
    id,
    info,
    name
  }) => id.toLowerCase().includes(searchString) || (info === null || info === void 0 ? void 0 : info.replace('chayns', '').toLowerCase().includes(searchString)) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
  const handleKeyDown = (0, _react2.useCallback)(event => {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
      var _ref$current;
      event.preventDefault();
      const children = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.children;
      if (children && children.length > 0) {
        const newIndex = focusedIndex !== null ? (focusedIndex + (event.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
        if (focusedIndex !== null) {
          const prevElement = children[focusedIndex];
          prevElement.tabIndex = -1;
        }
        setFocusedIndex(newIndex);
        const member = filteredMembers[newIndex];
        setActiveMember(member);
        const newElement = children[newIndex];
        newElement.tabIndex = 0;
        newElement.focus();
      }
    } else if (event.key === 'Enter') {
      event.preventDefault();
      event.stopPropagation();
      if (fullMatch && activeMember) {
        onSelect({
          fullMatch,
          member: activeMember
        });
      }
    }
  }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect]);
  const handleMemberClick = (0, _react2.useCallback)(member => {
    if (fullMatch) {
      onSelect({
        fullMatch,
        member
      });
    }
  }, [fullMatch, onSelect]);
  const handleMemberHover = (0, _react2.useCallback)(member => {
    setActiveMember(member);
  }, []);
  (0, _react2.useEffect)(() => {
    if (filteredMembers.length > 0) {
      const isActiveMemberShown = filteredMembers.some(({
        id
      }) => id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id));
      if (!isActiveMemberShown) {
        setActiveMember(filteredMembers[0]);
      }
    }
  }, [activeMember === null || activeMember === void 0 ? void 0 : activeMember.id, filteredMembers]);
  const items = (0, _react2.useMemo)(() => filteredMembers.map(member => /*#__PURE__*/_react2.default.createElement(_MentionFinderItem.default, {
    isActive: member.id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id),
    key: member.id,
    member: member,
    onClick: handleMemberClick,
    onHover: handleMemberHover
  })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
  const shouldShowPopup = (0, _react2.useMemo)(() => fullMatch && items.length > 0, [fullMatch, items.length]);
  (0, _react2.useEffect)(() => {
    if (shouldShowPopup) {
      window.addEventListener('keydown', handleKeyDown, true);
    }
    return () => {
      window.removeEventListener('keydown', handleKeyDown, true);
    };
  }, [handleKeyDown, shouldShowPopup]);
  return /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMentionFinder, {
    className: "beta-chayns-mention-finder"
  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
    initial: false
  }, shouldShowPopup && /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMotionMentionFinderPopup, {
    ref: ref,
    animate: {
      height: 'auto',
      opacity: 1
    },
    className: "prevent-lose-focus",
    exit: {
      height: 0,
      opacity: 0
    },
    initial: {
      height: 0,
      opacity: 0
    },
    $popupAlignment: popupAlignment,
    transition: {
      duration: 0.15
    },
    tabIndex: 0
  }, items)));
};
MentionFinder.displayName = 'MentionFinder';
var _default = exports.default = MentionFinder;
//# sourceMappingURL=MentionFinder.js.map