chayns-components/lib/react-chayns-personfinder/component/PersonFinderResults.js

A set of beautiful React components for developing chayns® applications.

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import ResultItemList from './ResultItemList';
import PersonsContext from './data/persons/PersonsContext';
const PersonFinderResults = _ref => {
  let {
    data = [],
    tags = [],
    orm,
    value: inputValue = '',
    hasMore = false,
    onLoadMore,
    showWaitCursor = false,
    onSelect,
    onRemoveTag,
    focusIndex,
    noBackground = false,
    filterSelected = false,
    hideFriendsIcon = false,
    showCheckbox = false,
    hideVerifiedIcon = false
  } = _ref;
  const handleClick = useCallback(value => {
    if (onSelect) {
      onSelect(value.type, value.relation);
    }
  }, [onSelect]);
  const users = new Map();
  let length = 0;
  if (Array.isArray(orm.groups)) {
    return /*#__PURE__*/React.createElement("div", {
      className: 'cc__person-finder__results' + (noBackground ? " no-background" : ""),
      key: "resultList"
    }, /*#__PURE__*/React.createElement("div", {
      className: 'cc__person-finder__results-list' + (focusIndex !== null ? " cc__person-finder__results-list--noTransition" : "")
    }, orm.groups.map(_ref2 => {
      let {
        key: group,
        show,
        roundIcons,
        filter
      } = _ref2;
      if (typeof show === 'function' && !show(inputValue)) {
        return null;
      }

      // Prevent duplicates from knownPersons and persons
      let groupData = [];
      if (orm === PersonsContext.ObjectMapping && ['knownPersons', 'personsRelated', 'personsUnrelated', 'uacPersons'].includes(group)) {
        (data[group] || []).forEach(value => {
          if (users.has(value.id)) return;
          users.set(value.id, true);
          groupData.push(value);
        });
      } else {
        groupData = data[group] || [];
      }
      groupData = typeof (filter || orm.filter) === 'function' ? groupData.filter((filter || orm.filter)(inputValue)) : groupData;
      if (filterSelected) {
        groupData = groupData.filter(_ref3 => {
          let {
            type,
            id
          } = _ref3;
          return tags.every(_ref4 => {
            let {
              value
            } = _ref4;
            return type !== value.type || id !== value.id;
          });
        });
      }
      const groupLength = groupData.length;
      length += groupLength;
      let groupFocusIndex = null;
      if (length - groupLength <= focusIndex && focusIndex < length && focusIndex !== null) {
        groupFocusIndex = focusIndex - (length - groupLength);
      }
      return /*#__PURE__*/React.createElement("div", {
        className: 'cc__person-finder__results' + (noBackground ? " no-background" : ""),
        key: `resultList_${group}`
      }, /*#__PURE__*/React.createElement(ResultItemList, {
        key: group,
        data: groupData,
        orm: orm,
        group: group,
        hasMore: hasMore[group],
        onLoadMore: onLoadMore,
        showWaitCursor: showWaitCursor[group],
        onClick: handleClick,
        onRemoveTag: onRemoveTag,
        focusIndex: groupFocusIndex,
        roundIcons: roundIcons,
        hideFriendsIcon: hideFriendsIcon,
        tags: tags,
        showCheckbox: showCheckbox,
        inputValue: inputValue,
        hideVerifiedIcon: hideVerifiedIcon
      }));
    })));
  }
  return /*#__PURE__*/React.createElement("div", {
    className: 'cc__person-finder__results' + (noBackground ? " no-background" : "")
  }, /*#__PURE__*/React.createElement(ResultItemList, {
    data: typeof orm.filter === 'function' ? data.filter(orm.filter(inputValue)) : data,
    orm: orm,
    hasMore: hasMore,
    onLoadMore: onLoadMore,
    showWaitCursor: showWaitCursor,
    onClick: handleClick,
    focusIndex: focusIndex,
    roundIcons: orm.roundIcons,
    hideVerifiedIcon: hideVerifiedIcon
  }));
};
PersonFinderResults.propTypes = {
  orm: PropTypes.shape({
    identifier: PropTypes.string,
    showName: PropTypes.string,
    imageUrl: PropTypes.string,
    // eslint-disable-next-line react/forbid-prop-types
    groups: PropTypes.array,
    filter: PropTypes.func,
    roundIcons: PropTypes.bool
  }).isRequired,
  data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.objectOf(PropTypes.arrayOf(PropTypes.object))]),
  tags: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.shape({})
  })),
  value: PropTypes.string,
  onSelect: PropTypes.func,
  onLoadMore: PropTypes.func.isRequired,
  hasMore: PropTypes.oneOfType([PropTypes.objectOf(PropTypes.bool), PropTypes.bool]),
  showWaitCursor: PropTypes.oneOfType([PropTypes.objectOf(PropTypes.bool), PropTypes.bool]),
  focusIndex: PropTypes.number,
  noBackground: PropTypes.bool,
  filterSelected: PropTypes.bool,
  hideFriendsIcon: PropTypes.bool,
  showCheckbox: PropTypes.bool,
  onRemoveTag: PropTypes.func.isRequired,
  hideVerifiedIcon: PropTypes.bool
};
PersonFinderResults.displayName = 'PersonFinderResults';
export default PersonFinderResults;
//# sourceMappingURL=PersonFinderResults.js.map