wix-style-react/src/ModalMobileLayout/ModalMobileLayout.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import X from 'wix-ui-icons-common/X';
import IconButton from '../IconButton';

import { st, classes } from './ModalMobileLayout.st.css';

class ModalMobileLayout extends React.PureComponent {
  static displayName = 'ModalMobileLayout';

  static propTypes = {
    /** Applied as data-hook HTML attribute that can be used in the tests */
    dataHook: PropTypes.string,

    /** A css class to be applied to the component's root element */
    className: PropTypes.string,

    /** title node to be displayed in the header strip */
    title: PropTypes.node,

    /** If true, the title will be sticky to the top of the modal */
    stickyTitle: PropTypes.bool,

    /** content node to be displayed */
    content: PropTypes.node,

    /** footer node to be displayed */
    footer: PropTypes.node,

    /** If true, the footer will be sticky to the bottom of the modal */
    stickyFooter: PropTypes.bool,

    /** callback for when there's a click on the overlay (in case the modal in not fullscreen) */
    onOverlayClick: PropTypes.func,

    /** callback for when the the close button is clicked.  **Note**: if this prop is not provided, then the close button will not be shown. */
    onCloseButtonClick: PropTypes.func,

    /** If true, the modal will take all of the screen */
    fullscreen: PropTypes.bool,
  };

  static defaultProps = {
    stickyTitle: false,
    stickyFooter: false,
    fullscreen: false,
  };

  render() {
    const {
      dataHook,
      className,
      title,
      content,
      footer,
      onOverlayClick,
      onCloseButtonClick,
      fullscreen,
      stickyTitle,
      stickyFooter,
    } = this.props;

    return (
      <div
        id="modalMobileLayout-root"
        data-hook={dataHook}
        className={st(
          classes.root,
          {
            fullscreen,
            stickyTitle,
            stickyFooter,
            noTitle: !title,
            noFooter: !footer,
          },
          className,
        )}
        onClick={({ target: { id } }) => {
          id === 'modalMobileLayout-root' && onOverlayClick && onOverlayClick();
        }}
      >
        <div className={classes.container}>
          {onCloseButtonClick && (
            <div className={classes.close}>
              <IconButton
                dataHook="modalMobileLayout-close-button"
                skin="light"
                onClick={onCloseButtonClick}
              >
                <X />
              </IconButton>
            </div>
          )}
          {title && stickyTitle && this._renderTitle()}
          <div
            className={classes.content}
            data-hook="modalMobileLayout-content"
          >
            <div>
              {title && !stickyTitle && this._renderTitle()}
              {content}
              {footer && !stickyFooter && this._renderFooter()}
            </div>
          </div>
          {footer && stickyFooter && this._renderFooter()}
        </div>
      </div>
    );
  }

  _renderTitle = () => (
    <div
      className={classes.title}
      data-hook="modalMobileLayout-title"
      data-sticky-title={this.props.stickyTitle}
    >
      {this.props.title}
    </div>
  );

  _renderFooter = () => (
    <div
      className={classes.footer}
      data-hook="modalMobileLayout-footer"
      data-sticky-footer={this.props.stickyFooter}
    >
      {this.props.footer}
    </div>
  );
}

export default ModalMobileLayout;