@findify/react-components/lib/components/Dropdown/view.js

Findify react UI components

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * @module components/Dropdown
 */
import cx from 'classnames';
import Downshift from 'downshift';
import MapArray from "../common/MapArray";
import Icon from "../Icon";
import Button from "../Button";
import Text from "../Text";
import { fromJS, isImmutable } from 'immutable';
var styles = {
  "root": "findify-components--dropdown",
  "select": "findify-components--dropdown__select",
  "arrow": "findify-components--dropdown__arrow",
  "dropdown": "findify-components--dropdown__dropdown",
  "open": "findify-components--dropdown__open",
  "option": "findify-components--dropdown__option",
  "label": "findify-components--dropdown__label",
  "highlighted": "findify-components--dropdown__highlighted"
};
import { useMemo, useRef } from 'react';
/** Props that Dropdown Item accepts */

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";

var Item = function Item(_ref) {
  var item = _ref.item,
      index = _ref.index,
      getItemProps = _ref.getItemProps,
      highlighted = _ref.highlighted,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? styles : _ref$theme;
  return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({
    className: cx(theme.option, highlighted === index && theme.highlighted)
  }, getItemProps({
    item: item
  })), {}, {
    children: /*#__PURE__*/_jsx(Text, {
      primary: true,
      lowercase: true,
      children: item.get('label')
    })
  }));
};
/** Props that Dropdown accepts */


export default (function (_ref2) {
  var onChange = _ref2.onChange,
      selectedItem = _ref2.selectedItem,
      className = _ref2.className,
      _items = _ref2.items,
      _ref2$theme = _ref2.theme,
      theme = _ref2$theme === void 0 ? styles : _ref2$theme,
      _ref2$itemToString = _ref2.itemToString,
      itemToString = _ref2$itemToString === void 0 ? function (i) {
    return i.get('label');
  } : _ref2$itemToString;
  var items = useMemo(function () {
    return isImmutable(_items) ? _items : fromJS(_items);
  }, [_items]);
  var id = useRef("dropdown-".concat(items.hashCode()));
  return /*#__PURE__*/_jsx(Downshift, {
    onChange: onChange,
    selectedItem: selectedItem || items.get(0),
    itemToString: itemToString,
    children: function children(_ref3) {
      var isOpen = _ref3.isOpen,
          selectedItem = _ref3.selectedItem,
          getToggleButtonProps = _ref3.getToggleButtonProps,
          getRootProps = _ref3.getRootProps,
          getItemProps = _ref3.getItemProps,
          getMenuProps = _ref3.getMenuProps,
          getLabelProps = _ref3.getLabelProps,
          highlightedIndex = _ref3.highlightedIndex;
      return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({}, getRootProps({}, {
        suppressRefError: true
      })), {}, {
        role: "group",
        className: cx(theme.root, className),
        children: [/*#__PURE__*/_jsx("label", _objectSpread(_objectSpread({}, getLabelProps()), {}, {
          className: theme.label,
          children: selectedItem.get('label')
        })), /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({}, getToggleButtonProps()), {}, {
          className: theme.select,
          children: [/*#__PURE__*/_jsx(Text, {
            primary: true,
            lowercase: true,
            children: selectedItem.get('label')
          }), /*#__PURE__*/_jsx(Icon, {
            name: isOpen ? 'ArrowUp' : 'ArrowDown',
            className: theme.arrow,
            title: "Expand list",
            "aria-hidden": "true",
            focusable: "false",
            role: "presentation"
          })]
        })), /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, getMenuProps()), {}, {
          className: cx(theme.dropdown, _defineProperty({}, theme.open, isOpen)),
          children: /*#__PURE__*/_jsx(MapArray, {
            theme: theme,
            parentId: id,
            highlighted: highlightedIndex,
            getItemProps: getItemProps,
            array: items.filter(function (i) {
              return !i.equals(selectedItem);
            }),
            factory: Item
          })
        }))]
      }));
    }
  });
});