@zohodesk/components/es/Accordion/Accordion.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

import React from 'react';
import { Accordion_defaultProps } from "./props/defaultProps";
import { Accordion_propTypes } from "./props/propTypes";
export default class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: this.props.selectedItem
    };
    this.selectMenu = this.selectMenu.bind(this);
  }

  selectMenu(selectedItem) {
    let {
      onSelect,
      disableInternalState
    } = this.props;

    if (onSelect) {
      onSelect(selectedItem);
    }

    !disableInternalState && this.setState({
      selectedItem
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
      this.setState({
        selectedItem: nextProps.selectedItem
      });
    }
  }

  render() {
    let {
      className,
      height,
      unMount,
      disableInternalState,
      selectedItem: propSelectedItem,
      a11y,
      dataId,
      dataSelectorId
    } = this.props;
    let {
      selectedItem
    } = this.state;
    let children = React.Children.map(this.props.children, child => {
      if (child) {
        return /*#__PURE__*/React.cloneElement(child, {
          selectedItem: disableInternalState ? propSelectedItem : selectedItem,
          selectMenu: this.selectMenu,
          unMount: unMount
        });
      }
    });
    let {
      role,
      ariaExpanded,
      ariaHaspopup
    } = a11y;
    return /*#__PURE__*/React.createElement("div", {
      className: className ? className : '',
      style: {
        height
      },
      role: role,
      "aria-expanded": ariaExpanded,
      "aria-haspopup": ariaHaspopup,
      "data-id": dataId,
      "data-test-id": dataId,
      "data-selector-id": dataSelectorId
    }, children);
  }

}
Accordion.propTypes = Accordion_propTypes;
Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
//   Accordion.docs = {
//     componentGroup: 'Animation',
//     folderName: 'Style Guide'
//   };
// }