var _extends = Object.assign || 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; };

var _class, _temp, _initialiseProps;

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { createPortal } from 'react-dom';

var Actionsheet = (_temp = _class = function (_Component) {
  _inherits(Actionsheet, _Component);

  // 全局配置
  function Actionsheet(props, context) {
    _classCallCheck(this, Actionsheet);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));

    _initialiseProps.call(_this);

    return _this;
  }
  // 过滤已经回调的属性


  Actionsheet.prototype.render = function render() {
    var _this2 = this;

    // 全局配置
    var _context$locale = this.context.locale,
        locale = _context$locale === undefined ? {} : _context$locale;

    var _props = this.props,
        portal = _props.portal,
        show = _props.show,
        animation = _props.animation,
        duration = _props.duration,
        list = _props.list,
        _props$maskAttribute = _props.maskAttribute,
        maskAttribute = _props$maskAttribute === undefined ? {} : _props$maskAttribute,
        _props$groupAttribute = _props.groupAttribute,
        groupAttribute = _props$groupAttribute === undefined ? {} : _props$groupAttribute,
        _props$optionAttribut = _props.optionAttribute,
        optionAttribute = _props$optionAttribut === undefined ? {} : _props$optionAttribut,
        _props$cancelCaption = _props.cancelCaption,
        cancelCaption = _props$cancelCaption === undefined ? locale['cancel'] || '取消' : _props$cancelCaption,
        _props$cancelAttribut = _props.cancelAttribute,
        cancelAttribute = _props$cancelAttribut === undefined ? {} : _props$cancelAttribut,
        onClick = _props.onClick,
        others = _objectWithoutProperties(_props, ['portal', 'show', 'animation', 'duration', 'list', 'maskAttribute', 'groupAttribute', 'optionAttribute', 'cancelCaption', 'cancelAttribute', 'onClick']);

    // 剔除掉onClick事件, 因为在容器onClick已经回调了


    var showCancel = cancelAttribute.onClick;
    maskAttribute = this.filterProps(maskAttribute);
    groupAttribute = this.filterProps(groupAttribute);
    optionAttribute = this.filterProps(optionAttribute);
    cancelAttribute = this.filterProps(cancelAttribute);

    // 构建动画
    var animationClassName = '';
    switch (animation) {
      case 'slideLeft':
        animationClassName = 'popup-animation right-middle';
        break;
      case 'slideRight':
        animationClassName = 'popup-animation left-middle';
        break;
      case 'slideUp':
        animationClassName = 'popup-animation bottom-center';
        break;
      case 'slideDown':
        animationClassName = 'popup-animation top-center';
        break;
      case 'zoom':
        animationClassName = 'popup-animation middle';
        break;
      case 'fade':
        animationClassName = 'popup-animation middle';
        break;
      case 'none':
        animationClassName = '';
        break;
      default:
        animationClassName = 'popup-animation middle';
    }

    // 动画时长
    var durationStyle = {};
    if (typeof duration === 'number') {
      durationStyle = {
        WebkitTransitionDuration: duration + 'ms'
      };
    }

    return createPortal(React.createElement(
      'div',
      _extends({
        ref: function ref(el) {
          _this2.$el = el;
        }
      }, maskAttribute, {
        className: 'mask actionsheet-mask' + (maskAttribute.className ? ' ' + maskAttribute.className : '') + (show ? ' active' : ''),
        style: Object.assign({}, durationStyle, maskAttribute.style || {}),
        onClick: this.onClick
      }),
      React.createElement(
        'div',
        _extends({
          'data-animation': animation
        }, others, {
          className: 'actionsheet' + (animationClassName ? ' ' + animationClassName : '') + (others.className ? ' ' + others.className : '') + (show ? ' active' : ''),
          style: Object.assign({}, durationStyle, others.style || {})
        }),
        React.createElement(
          'div',
          _extends({}, groupAttribute, { className: 'actionsheet-group' + (groupAttribute.className ? ' ' + groupAttribute.className : '') }),
          list && list.map(function (item, index) {
            return React.createElement(
              'a',
              _extends({}, optionAttribute, { className: 'actionsheet-option' + (optionAttribute.className ? ' ' + optionAttribute.className : ' border-b'), key: index, 'data-index': index }),
              item.caption
            );
          })
        ),
        showCancel && React.createElement(
          'a',
          _extends({}, cancelAttribute, { className: 'actionsheet-cancel' + (cancelAttribute.className ? ' ' + cancelAttribute.className : '') }),
          cancelCaption
        )
      )
    ), portal || this.context.portal || document.getElementById('root') || document.body);
  };

  return Actionsheet;
}(Component), _class.contextTypes = {
  locale: PropTypes.object,
  portal: PropTypes.object
}, _class.defaultProps = {
  animation: 'slideUp'
}, _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.componentDidMount = function () {};

  this.onClick = function (e) {
    var _props2 = _this3.props,
        _props2$onClick = _props2.onClick,
        onClick = _props2$onClick === undefined ? {} : _props2$onClick,
        _props2$maskAttribute = _props2.maskAttribute,
        maskAttribute = _props2$maskAttribute === undefined ? {} : _props2$maskAttribute,
        _props2$groupAttribut = _props2.groupAttribute,
        groupAttribute = _props2$groupAttribut === undefined ? {} : _props2$groupAttribut,
        _props2$optionAttribu = _props2.optionAttribute,
        optionAttribute = _props2$optionAttribu === undefined ? {} : _props2$optionAttribu,
        _props2$cancelAttribu = _props2.cancelAttribute,
        cancelAttribute = _props2$cancelAttribu === undefined ? {} : _props2$cancelAttribu;

    var target = e.target;
    // 获取值
    var item = null;
    var index = null;
    if (target.classList.contains('actionsheet-option')) {
      index = target.getAttribute('data-index');
      index = Number(index);
      item = _this3.props.list[index] || null;
    }
    // 区分点击事件
    e.stopPropagation();
    if (target.classList.contains('actionsheet-option') && optionAttribute.onClick) {
      optionAttribute.onClick(e, item, index);
      return;
    }
    if (target.classList.contains('actionsheet-group') && groupAttribute.onClick) {
      groupAttribute.onClick(e, item, index);
      return;
    }
    if (target.classList.contains('actionsheet-mask') && maskAttribute.onClick) {
      maskAttribute.onClick(e, item, index);
      return;
    }
    if (target.classList.contains('actionsheet-cancel') && cancelAttribute.onClick) {
      cancelAttribute.onClick(e, item, index);
      return;
    }
    if (onClick) onClick(e, item, index);
  };

  this.filterProps = function (props) {
    if (!props) return props;
    var propsed = {};
    for (var n in props) {
      if (n !== 'onClick') {
        propsed[n] = props[n];
      }
    }
    return propsed;
  };
}, _temp);
export { Actionsheet as default };
Actionsheet.propTypes = process.env.NODE_ENV !== "production" ? {
  portal: PropTypes.object,
  show: PropTypes.bool,
  animation: PropTypes.string, // slideLeft | slideRight | slideUp | slideDown | zoom | fade
  duration: PropTypes.number,

  list: PropTypes.array, // [{caption: string, onClick: func}]

  maskAttribute: PropTypes.object,
  groupAttribute: PropTypes.object,
  optionAttribute: PropTypes.object,

  cancelCaption: PropTypes.node,
  cancelAttribute: PropTypes.object,

  onClick: PropTypes.func
} : {};