rodal/lib/rodal.js

A React modal with animations.

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
// env
var IN_BROWSER = typeof window !== 'undefined';
var UA = IN_BROWSER && window.navigator.userAgent.toLowerCase();
var IS_IE_9 = UA && UA.indexOf('msie 9.0') > 0;
var Dialog = function Dialog(props) {
  var animation = (props.animationType === 'enter' ? props.enterAnimation : props.leaveAnimation) || props.animation;
  var className = "rodal-dialog rodal-" + animation + "-" + props.animationType;
  var CloseButton = props.showCloseButton ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "rodal-close",
    onClick: props.onClose,
    onKeyPress: function onKeyPress(event) {
      if (props.onClose && event.which === 13) {
        props.onClose(event);
      }
    },
    tabIndex: 0
  }) : null;
  var width = props.width,
    height = props.height,
    measure = props.measure,
    duration = props.duration,
    customStyles = props.customStyles,
    id = props.id;
  var style = {
    width: width + measure,
    height: height + measure,
    animationDuration: duration + 'ms',
    WebkitAnimationDuration: duration + 'ms'
  };
  var mergedStyles = _extends({}, style, customStyles);
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: mergedStyles,
    className: className,
    id: id
  }, props.children, CloseButton);
};
var Rodal = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Rodal, _React$Component);
  function Rodal() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      isShow: false,
      animationType: 'leave'
    };
    _this.onKeyUp = function (event) {
      if (!_this.props.closeOnEsc || event.keyCode !== 27) {
        return;
      }
      _this.props.onClose(event);
    };
    _this.animationEnd = function (event) {
      var animationType = _this.state.animationType;
      var _this$props = _this.props,
        closeOnEsc = _this$props.closeOnEsc,
        onAnimationEnd = _this$props.onAnimationEnd;
      if (animationType === 'leave') {
        _this.setState({
          isShow: false
        });
      } else if (closeOnEsc) {
        _this.el.focus();
      }
      if (event.target === _this.el && onAnimationEnd) {
        onAnimationEnd();
      }
    };
    return _this;
  }
  var _proto = Rodal.prototype;
  _proto.componentDidMount = function componentDidMount() {
    if (this.props.visible) {
      this.enter();
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.props.visible && !prevProps.visible) {
      this.enter();
    }
    if (!this.props.visible && prevProps.visible) {
      this.leave();
    }
  };
  _proto.enter = function enter() {
    this.setState({
      isShow: true,
      animationType: 'enter'
    });
  };
  _proto.leave = function leave() {
    this.setState(IS_IE_9 ? {
      isShow: false
    } : {
      animationType: 'leave'
    });
  };
  _proto.render = function render() {
    var _this2 = this;
    var _this$props2 = this.props,
      closeMaskOnClick = _this$props2.closeMaskOnClick,
      onClose = _this$props2.onClose,
      customMaskStyles = _this$props2.customMaskStyles,
      showMask = _this$props2.showMask,
      duration = _this$props2.duration,
      className = _this$props2.className,
      children = _this$props2.children;
    var _this$state = this.state,
      isShow = _this$state.isShow,
      animationType = _this$state.animationType;
    var Mask = showMask ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "rodal-mask",
      style: customMaskStyles,
      onClick: closeMaskOnClick ? onClose : void 0
    }) : null;
    var style = {
      display: isShow ? '' : 'none',
      animationDuration: duration + 'ms',
      WebkitAnimationDuration: duration + 'ms'
    };
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: style,
      className: (0, _classnames["default"])('rodal', "rodal-fade-" + animationType, className),
      onAnimationEnd: this.animationEnd,
      tabIndex: "-1",
      ref: function ref(el) {
        _this2.el = el;
      },
      onKeyUp: this.onKeyUp
    }, Mask, /*#__PURE__*/_react["default"].createElement(Dialog, _extends({}, this.props, {
      animationType: animationType
    }), children));
  };
  return Rodal;
}(_react["default"].Component);
Rodal.propTypes = {
  width: _propTypes["default"].number,
  height: _propTypes["default"].number,
  measure: _propTypes["default"].string,
  visible: _propTypes["default"].bool,
  showMask: _propTypes["default"].bool,
  closeOnEsc: _propTypes["default"].bool,
  closeMaskOnClick: _propTypes["default"].bool,
  showCloseButton: _propTypes["default"].bool,
  animation: _propTypes["default"].string,
  enterAnimation: _propTypes["default"].string,
  leaveAnimation: _propTypes["default"].string,
  duration: _propTypes["default"].number,
  className: _propTypes["default"].string,
  customStyles: _propTypes["default"].object,
  customMaskStyles: _propTypes["default"].object,
  onClose: _propTypes["default"].func.isRequired,
  onAnimationEnd: _propTypes["default"].func,
  id: _propTypes["default"].string
};
Rodal.defaultProps = {
  width: 400,
  height: 240,
  measure: 'px',
  visible: false,
  showMask: true,
  closeOnEsc: false,
  closeMaskOnClick: true,
  showCloseButton: true,
  animation: 'zoom',
  enterAnimation: '',
  leaveAnimation: '',
  duration: 300,
  className: '',
  customStyles: {},
  customMaskStyles: {}
};
var _default = Rodal;
exports["default"] = _default;