@shopgate/pwa-common/components/Drawer/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 classNames from 'classnames';
import styles from "./style";

/**
 * Drawer component.
 */
import { jsx as _jsx } from "react/jsx-runtime";
let Drawer = /*#__PURE__*/function (_Component) {
  /**
   * Initializes the Drawer component.
   * @param {Object} props The components props.
   */
  function Drawer(props) {
    var _this;
    _this = _Component.call(this, props) || this;
    /**
     * Syncs the internal active state when an animation ends.
     */
    _this.handleAnimationEnd = () => {
      _this.setState({
        active: _this.props.isOpen
      });
      if (!_this.props.isOpen) {
        _this.props.onDidClose();
      } else {
        _this.props.onDidOpen();
      }
    };
    _this.sheetRef = /*#__PURE__*/React.createRef();
    _this.state = {
      active: props.isOpen
    };
    return _this;
  }

  /** inheritdoc */
  _inheritsLoose(Drawer, _Component);
  var _proto = Drawer.prototype;
  _proto.componentDidMount = function componentDidMount() {
    if (this.props.isOpen) {
      if (this.sheetRef.current) {
        this.sheetRef.current.focus();
      }
    }
  }

  /**
   * Update state when isOpen changes.
   * @param {Object} nextProps The next component props.
   */;
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.isOpen !== nextProps.isOpen) {
      if (nextProps.isOpen) {
        if (typeof nextProps.onOpen === 'function') {
          nextProps.onOpen();
        }
        this.setState({
          active: true
        });
      } else if (typeof nextProps.onClose === 'function') {
        nextProps.onClose();
      }
    }
  }

  /**
   * Set focus for a11y when sheet opens
   * @param {Object} prevProps The previous component props.
   */;
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (!prevProps.isOpen && this.props.isOpen) {
      if (this.sheetRef.current) {
        this.sheetRef.current.focus();
      }
    }
  };
  /**
   * Renders the component.
   * @returns {JSX}
   */
  _proto.render = function render() {
    const {
      className,
      children,
      isOpen,
      animation
    } = this.props;
    const {
      active
    } = this.state;
    const animationIn = animation.in || styles.animation.in;
    const animationOut = animation.out || styles.animation.out;
    const combinedClassName = classNames(className, styles.container, {
      [animationIn]: isOpen
    }, {
      [animationOut]: !isOpen
    }, 'common__drawer');
    const style = {};
    if (typeof animation.duration === 'number') {
      style.animationDuration = `${animation.duration}ms`;
    }
    return active ? /*#__PURE__*/_jsx("div", {
      ref: this.sheetRef,
      className: combinedClassName,
      style: style,
      onAnimationEnd: () => {
        this.handleAnimationEnd();
        // clear any residual animation style to fix a11y issue on Android
        // (focus ring is misaligned)
        if (this.sheetRef?.style) {
          this.sheetRef.style.animation = '';
          this.sheetRef.style.transform = 'none';
        }
      },
      role: "dialog",
      "aria-modal": true,
      tabIndex: -1,
      children: children
    }) : null;
  };
  return Drawer;
}(Component);
/**
 * The component prop types.
 * @type {Object}
 */
/**
 * The component default props.
 * @type {Object}
 */
Drawer.defaultProps = {
  className: '',
  children: null,
  isOpen: false,
  onOpen: () => {},
  onClose: () => {},
  onDidClose: () => {},
  onDidOpen: () => {},
  animation: {
    duration: null,
    in: '',
    out: ''
  }
};
export default Drawer;