@shopgate/pwa-common/components/Dropdown/index.js

Common library for the Shopgate Connect PWA.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Transition from "../Transition";
import styles from "./style";
import transitions from "./transitions";

/**
 * This component slides it's child content up or down based on it's isOpen property.
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
let Dropdown = /*#__PURE__*/function (_Component) {
  /**
   * Constructor
   * @param {Object} props Props of the Component
   */
  function Dropdown(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    _this.state = {
      initialRender: true
    };
    return _this;
  }

  /**
   * Update the initialRender state if the isOpen state changes from false to true
   * @param {Object} nextProps The new props
   */
  _inheritsLoose(Dropdown, _Component);
  var _proto = Dropdown.prototype;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.isOpen === false && nextProps.isOpen === true) {
      this.setState({
        initialRender: false
      });
    }
  }

  /**
   * Only update the component if isOpen changed
   * @param {Object} nextProps The new props
   * @returns {boolean}
   */;
  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
    return this.props.isOpen !== nextProps.isOpen;
  }

  /**
   * Renders the component.
   * @returns {JSX}
   */;
  _proto.render = function render() {
    let transitionProps;
    if (this.props.isOpen) {
      transitionProps = this.state.initialRender ? transitions.initialOpen : transitions.open;
    } else {
      transitionProps = this.state.initialRender ? transitions.initialClose : transitions.close;
    }
    return /*#__PURE__*/_jsx(Transition, {
      ...transitionProps,
      onComplete: this.props.onComplete,
      onStart: this.props.onStart,
      duration: this.props.duration,
      easing: this.props.easing,
      children: /*#__PURE__*/_jsx("div", {
        className: `${styles} ${this.props.className} common__dropdown`,
        "aria-hidden": !this.props.isOpen,
        children: this.props.children
      })
    });
  };
  return Dropdown;
}(Component);
Dropdown.defaultProps = {
  className: '',
  children: null,
  duration: 150,
  easing: null,
  isOpen: false,
  onComplete: () => {},
  onStart: () => {}
};
export default Dropdown;