lucid-ui
Version:
A UI component library from AppNexus.
57 lines (56 loc) • 2.35 kB
JavaScript
import _ from 'lodash';
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';
const cx = lucidClassNames.bind('&-Accordion');
const { func, object, number, string } = PropTypes;
const defaultProps = {
onSelect: _.noop,
};
const Accordion = (props) => {
const { style, className, selectedIndex, ...passThroughs } = props;
const itemChildProps = _.map(findTypes(props, Accordion.Item), 'props');
const handleToggle = (isExpanded, index, event) => {
const selectedIndex = isExpanded ? index : null;
props.onSelect(selectedIndex, {
event,
props,
});
};
return (React.createElement("div", Object.assign({}, omitProps(passThroughs, undefined, _.keys(Accordion.propTypes)), { className: cx('&', className), style: style }), _.map(itemChildProps, (itemChildProp, index) => {
return (React.createElement(ExpanderPanel, Object.assign({ key: index }, itemChildProp, { className: cx('&-Item', itemChildProp.className), onToggle: (isExpanded, { event }) => handleToggle(isExpanded, index, event), isExpanded: !itemChildProp.isDisabled && selectedIndex === index })));
})));
};
Accordion.displayName = 'Accordion';
Accordion.propTypes = {
className: string `
Appended to the component-specific class names set on the root element.
`,
selectedIndex: number `
Indicates which item is expanded
`,
onSelect: func `
Called when the user clicks on the component's header of an item.
`,
style: object `
Passed through to the root element.
`,
};
Accordion.peek = {
description: `
Accordion is a container that renders panels and controls their
expansion or collapse.
`,
categories: ['layout'],
madeFrom: ['ExpanderPanel'],
};
Accordion.defaultProps = defaultProps;
Accordion.reducers = reducers;
Accordion.Item = ExpanderPanel;
Accordion.Header = ExpanderPanel.Header;
export default buildModernHybridComponent(Accordion, { reducers });
export { Accordion as AccordionDumb };