All files / src/px-overlay index.js

100% Statements 3/3
100% Branches 1/1
100% Functions 1/1
100% Lines 3/3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43                              1x 1x       1x                                            
import React from 'react';
import classnames from 'classnames';
 
import style from './style.scss';
 
/**
 * px-overlay component
 */
export default (props) => {
  const {
    visible,
    style,
    onOverlayClick,
    zIndex = 900,
    children
  } = props;
  const baseClasses = classnames('px-overlay', {
    'px-overlay--invisible': !visible
  });
 
  return (
    <div className={baseClasses} onClick={onOverlayClick}>
      {children}
      <style jsx>{`
        .px-overlay{
          position        : fixed;
          top             : 0;
          right           : 0;
          bottom          : 0;
          left            : 0;
          z-index         : 900;
          background-color: var(--px-modal-overlay-color, rgba(0, 0, 0, 0.5));
          transition      : background-color 0.2s cubic-bezier(.78,.13,.16,.87);
        }
        .px-overlay--invisible{
          visibility      : hidden;
          background-color: transparent;
        }
      `}</style>
    </div>
  );
}