lucid-ui/lib/components/Accordion/Accordion.js

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _map from "lodash/map";
import _noop from "lodash/noop";

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; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { buildModernHybridComponent } from '../../util/state-management';
import { ExpanderPanelDumb as ExpanderPanel } from '../ExpanderPanel/ExpanderPanel';
import { findTypes, omitProps } from '../../util/component-types';
import * as reducers from '../Accordion/Accordion.reducers';
var cx = lucidClassNames.bind('&-Accordion');
var func = PropTypes.func,
    object = PropTypes.object,
    number = PropTypes.number,
    string = PropTypes.string;
var defaultProps = {
  onSelect: _noop
};

var Accordion = function Accordion(props) {
  var style = props.style,
      className = props.className,
      selectedIndex = props.selectedIndex,
      passThroughs = _objectWithoutProperties(props, ["style", "className", "selectedIndex"]);

  var itemChildProps = _map(findTypes(props, Accordion.Item), 'props');

  var handleToggle = function handleToggle(isExpanded, index, event) {
    var selectedIndex = isExpanded ? index : null;
    props.onSelect(selectedIndex, {
      event: event,
      props: props
    });
  };

  return /*#__PURE__*/React.createElement("div", _extends({}, omitProps(passThroughs, undefined, _keys(Accordion.propTypes)), {
    className: cx('&', className),
    style: style
  }), _map(itemChildProps, function (itemChildProp, index) {
    return /*#__PURE__*/React.createElement(ExpanderPanel, _extends({
      key: index
    }, itemChildProp, {
      className: cx('&-Item', itemChildProp.className),
      onToggle: function onToggle(isExpanded, _ref) {
        var event = _ref.event;
        return handleToggle(isExpanded, index, event);
      },
      isExpanded: !itemChildProp.isDisabled && selectedIndex === index
    }));
  }));
};

Accordion.displayName = 'Accordion';
Accordion.propTypes = {
  className: string,
  selectedIndex: number,
  onSelect: func,
  style: object
};
Accordion.peek = {
  description: "\n\t\tAccordion is a container that renders panels and controls their\n\t\texpansion or collapse.\n\t",
  categories: ['layout'],
  madeFrom: ['ExpanderPanel']
};
Accordion.defaultProps = defaultProps;
Accordion.reducers = reducers;
Accordion.Item = ExpanderPanel;
Accordion.Header = ExpanderPanel.Header;
export default buildModernHybridComponent(Accordion, {
  reducers: reducers
});
export { Accordion as AccordionDumb };