weex-nuke/lib/Dialog/view/dialog.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _nukeView = require('../../View/index.js');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _nukeEnv = require('../../Env/index.js');

var _nukeText = require('../../Text/index.js');

var _nukeText2 = _interopRequireDefault(_nukeText);

var _nukeMask = require('../../Mask/index.js');

var _nukeMask2 = _interopRequireDefault(_nukeMask);

var _nukeButton = require('../../Button/index.js');

var _nukeButton2 = _interopRequireDefault(_nukeButton);

var _nukeThemeProvider = require('../../ThemeProvider/index.js');

var _nukeThemeProvider2 = _interopRequireDefault(_nukeThemeProvider);

var _styles = require('../styles/index.js');

var _styles2 = _interopRequireDefault(_styles);

var _locale = require('./locale.js');

var _locale2 = _interopRequireDefault(_locale);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; } /** @jsx createElement */


var connectStyle = _nukeThemeProvider2.default.connectStyle;

var Dialog = function (_Component) {
  _inherits(Dialog, _Component);

  function Dialog(props) {
    _classCallCheck(this, Dialog);

    var _this = _possibleConstructorReturn(this, (Dialog.__proto__ || Object.getPrototypeOf(Dialog)).call(this, props));

    _this.show = _this.show.bind(_this);
    _this.hide = _this.hide.bind(_this);
    _this.onShow = _this.onShow.bind(_this);
    _this.onHide = _this.onHide.bind(_this);
    _this.wrapPress = _this.wrapPress.bind(_this);
    _this.maskTouchMove = _this.maskTouchMove.bind(_this);
    _this.contentTouchMove = _this.contentTouchMove.bind(_this);
    _this.isIOS = _nukeEnv.appInfo.platform.toLowerCase() === 'ios';
    if (props.type) {
      _this.isIOS = props.type.toLowerCase() === 'iOS';
    }
    return _this;
  }

  _createClass(Dialog, [{
    key: 'onShow',
    value: function onShow() {
      this.props.onShow && this.props.onShow();
    }
  }, {
    key: 'onHide',
    value: function onHide() {
      this.props.onHide && this.props.onHide();
    }
  }, {
    key: 'hide',
    value: function hide() {
      this.refs.modalMask && this.refs.modalMask.hide();
    }
  }, {
    key: 'show',
    value: function show() {
      this.refs.modalMask && this.refs.modalMask.show();
    }
  }, {
    key: 'wrapPress',
    value: function wrapPress(e) {
      if (_nukeEnv.isWeb) {
        e.stopPropagation();
      }
    }
  }, {
    key: 'fixBody',
    value: function fixBody() {
      if (_nukeEnv.isWeb) {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        document.body.style.cssText += 'position:fixed;top:-' + scrollTop + 'px;';
      }
    }
  }, {
    key: 'contentTouchMove',
    value: function contentTouchMove(e) {
      if (_nukeEnv.isWeb) {
        this.fixBody();
        e.stopPropagation();
      }
    }
  }, {
    key: 'maskTouchMove',
    value: function maskTouchMove(e) {
      if (_nukeEnv.isWeb) {
        this.fixBody();
      }
    }
  }, {
    key: 'getHeader',
    value: function getHeader() {
      var _props = this.props,
          title = _props.title,
          styles = _props.themeStyle;

      if (title) {
        if (typeof title === 'string') {
          return (0, _rax.createElement)(
            _nukeText2.default,
            {
              fixedFont: true,
              style: [styles.title, this.isIOS ? null : styles['md-title']]
            },
            title
          );
        }
        return title;
      }
      return null;
    }
  }, {
    key: 'cancel',
    value: function cancel(e, btnPressCb) {
      var onCancel = this.props.onCancel;

      if (btnPressCb) {
        btnPressCb.call(this, e);
      } else {
        this.refs.modalMask.hide();

        onCancel && onCancel();
      }
    }
  }, {
    key: 'confirm',
    value: function confirm(e, btnPressCb) {
      var onConfirm = this.props.onConfirm;

      if (btnPressCb) {
        btnPressCb.call(this, e);
      } else {
        this.refs.modalMask.hide();

        onConfirm && onConfirm();
      }
    }
  }, {
    key: 'getFooter',
    value: function getFooter() {
      var _this2 = this;

      var _props2 = this.props,
          showCancelButton = _props2.showCancelButton,
          showConfirmButton = _props2.showConfirmButton,
          confirmButtonStyle = _props2.confirmButtonStyle,
          cancelButtonStyle = _props2.cancelButtonStyle,
          footerStyle = _props2.footerStyle,
          styles = _props2.themeStyle;

      var footerDom = [];
      var locale = this.getLocale();
      var btnStyles = this.isIOS ? styles.btn : styles['md-btn'];
      var footerStyles = Object.assign({}, styles.footer, this.isIOS ? null : styles['md-footer'], footerStyle);
      var cancelDom = void 0;
      var confirmDom = void 0;
      if (!showConfirmButton && !showCancelButton) return null;
      if (showCancelButton) {
        cancelDom = (0, _rax.createElement)(
          _nukeButton2.default,
          {
            rect: true,
            fixedFont: true,
            style: Object.assign({}, btnStyles, this.isIOS ? null : styles['md-btn-weak'], showConfirmButton ? styles['btn-left'] : null, this.isIOS && showConfirmButton ? null : styles['md-btn-left'], cancelButtonStyle),
            type: 'normal',
            onPress: function onPress(e) {
              _this2.cancel(e, null);
            }
          },
          locale.cancel
        );
      }
      if (showConfirmButton) {
        confirmDom = (0, _rax.createElement)(
          _nukeButton2.default,
          {
            rect: true,
            style: [btnStyles, showCancelButton ? styles['btn-right'] : null, confirmButtonStyle],
            type: 'normal',
            onPress: function onPress(e) {
              _this2.confirm(e, null);
            }
          },
          locale.confirm
        );
      }

      footerDom = (0, _rax.createElement)(
        _nukeView2.default,
        { role: 'footer', style: footerStyles },
        cancelDom,
        confirmDom
      );
      return footerDom;
    }
  }, {
    key: 'getLocale',
    value: function getLocale() {
      var _props$locale = this.props.locale,
          locale = _props$locale === undefined ? {} : _props$locale;

      var localeName = 'en';
      return Object.assign({}, _locale2.default[localeName] || _locale2.default.en, locale);
    }
  }, {
    key: 'getContent',
    value: function getContent() {
      var _props3 = this.props,
          content = _props3.content,
          styles = _props3.themeStyle,
          children = _props3.children;

      if (children) {
        return children;
      }
      if (content) {
        if (typeof content === 'string') {
          return (0, _rax.createElement)(
            _nukeText2.default,
            {
              fixedFont: true,
              style: [styles.content, this.isIOS ? null : styles['md-content']]
            },
            content
          );
        }
        return content;
      }
      return null;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          _props4$contentStyle = _props4.contentStyle,
          contentStyle = _props4$contentStyle === undefined ? {} : _props4$contentStyle,
          maskClosable = _props4.maskClosable,
          renderMask = _props4.renderMask,
          style = _props4.style;

      var styles = this.props.themeStyle;
      var dialogContent = (0, _rax.createElement)(
        _nukeView2.default,
        {
          'data-role': 'dialogmain',
          style: [styles.main, this.isIOS ? null : styles['md-main'], contentStyle],
          onClick: this.wrapPress,
          onTouchmove: this.contentTouchMove
        },
        this.getHeader(),
        this.getContent(),
        this.getFooter()
      );
      return renderMask ? (0, _rax.createElement)(
        _nukeMask2.default,
        {
          defaultVisible: false,
          onShow: this.onShow,
          onHide: this.onHide,
          ref: 'modalMask',
          animate: false,
          noPress: true,
          style: [styles.mask, _nukeEnv.isWeb ? styles.maskWeb : {}, style],
          maskClosable: maskClosable,
          onTouchmove: this.maskTouchMove
        },
        dialogContent
      ) : dialogContent;
    }
  }]);

  return Dialog;
}(_rax.Component);

Dialog.defaultProps = {
  onHide: function onHide() {},
  onShow: function onShow() {},
  maskClosable: true,
  contentStyle: {},
  children: null,
  showCancelButton: false,
  showConfirmButton: false,
  renderMask: true
};
Dialog.propTypes = {
  onHide: _rax.PropTypes.func,
  onShow: _rax.PropTypes.func,
  renderMask: _rax.PropTypes.boolean,
  children: _rax.PropTypes.any,
  contentStyle: _rax.PropTypes.any
};
Dialog.displayName = 'Dialog';
var StyledDialog = connectStyle(_styles2.default)(Dialog);

exports.default = StyledDialog;
module.exports = exports['default'];