calcite-react/List/List.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ListContext = exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _helpers = require("../utils/helpers");

var _ListStyled = require("./List-styled");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var ListContext = (0, _react.createContext)({
  nested: undefined,
  open: undefined,
  minmal: undefined,
  multiSelect: undefined,
  selectable: undefined
});
exports.ListContext = ListContext;
ListContext.displayName = 'ListContext';

var List = function List(_ref) {
  var children = _ref.children,
      nested = _ref.nested,
      open = _ref.open,
      minimal = _ref.minimal,
      multiSelect = _ref.multiSelect,
      selectable = _ref.selectable,
      other = _objectWithoutProperties(_ref, ["children", "nested", "open", "minimal", "multiSelect", "selectable"]);

  var listContext = (0, _helpers.useContextState)({
    nested: nested,
    open: open,
    minimal: minimal,
    multiSelect: multiSelect,
    selectable: selectable
  });
  var listEl = (0, _react.useRef)(null);
  var listMaxHeight = 'none';

  if (open === false) {
    listMaxHeight = '0px';
  } else if (listEl.current && nested) {
    listMaxHeight = 0;
    listEl.current.childNodes.forEach(function (child) {
      listMaxHeight = listMaxHeight + child.getBoundingClientRect().height;
    });
    listMaxHeight = Math.ceil(listMaxHeight) + 'px';
  }

  return _react.default.createElement(ListContext.Provider, {
    value: listContext
  }, _react.default.createElement(_ListStyled.StyledList, _extends({
    ref: listEl,
    maxHeight: listMaxHeight,
    nested: nested,
    open: open,
    minimal: minimal,
    selectable: selectable,
    role: "list",
    "aria-expanded": open
  }, other), children));
};

exports.default = List;
List.propTypes = {
  /** The content of the component; can contain ListHeader, ListItem, and even another List. */
  children: _propTypes.default.node,

  /** Applied when the List is imbedded inside another List. */
  nested: _propTypes.default.bool,

  /** Whether the List should be collapsed or expanded. */
  open: _propTypes.default.bool,

  /** Minimal styling for the List */
  minimal: _propTypes.default.bool,

  /** Display check marks for selected ListItems, used with the `minimal` and `nested` properties */
  multiSelect: _propTypes.default.bool,

  /** Selectable styling for the List */
  selectable: _propTypes.default.bool
};
List.defaultProps = {};
List.displayName = 'List';