weex-nuke/lib/Slip/index.js

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

'use strict';

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

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 _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 _nukeEnv = require('../Env/index.js');

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

var _nukeMask2 = _interopRequireDefault(_nukeMask);

var _nukeTouchable = require('../Touchable/index.js');

var _nukeTouchable2 = _interopRequireDefault(_nukeTouchable);

var _nukeTransition = require('../Transition/index.js');

var _nukeTransition2 = _interopRequireDefault(_nukeTransition);

var _nukeDimensions = require('../Dimensions/index.js');

var _nukeDimensions2 = _interopRequireDefault(_nukeDimensions);

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

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

var _styles2 = _interopRequireDefault(_styles);

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 deviceInfo = _nukeEnv.isWeb ? _nukeDimensions2.default.get('window') : _nukeDimensions2.default.get('screen');

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

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

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

    _this.onVisibleChanged = _this.onVisibleChanged.bind(_this);
    _this.transition = _this.transition.bind(_this);
    _this.show = _this.show.bind(_this);
    _this.hide = _this.hide.bind(_this);
    _this.onMaskShow = _this.onMaskShow.bind(_this);
    _this.onMaskHide = _this.onMaskHide.bind(_this);
    _this.onMaskPress = _this.onMaskPress.bind(_this);
    _this.onPanePress = _this.onPanePress.bind(_this);
    _this.state = {
      visible: props.defaultVisible || false,
      defaultVisible: props.defaultVisible || false,
      scrollPosition: 0
    };
    return _this;
  }

  _createClass(Slip, [{
    key: 'onVisibleChanged',
    value: function onVisibleChanged(e) {
      this.setState({
        visible: e.visible
      });
    }
  }, {
    key: 'onMaskHide',
    value: function onMaskHide() {
      this.setState({
        visible: false
      });
      var onHide = this.props.onHide;

      onHide && onHide();
    }
  }, {
    key: 'onPanePress',
    value: function onPanePress(e) {
      if (_nukeEnv.isWeb) {
        e.stopPropagation();
      }
    }
  }, {
    key: 'onMaskShow',
    value: function onMaskShow() {
      var _this2 = this;

      var styles = this.calcTransitionStyle(false);
      var box = (0, _rax.findDOMNode)(this.refs.slipPane);
      setTimeout(function () {
        _this2.transition(box, styles, function () {
          _this2.setState({ visible: true });
          var onShow = _this2.props.onShow;

          onShow && onShow();
        });
      }, 10);
    }
  }, {
    key: 'onMaskPress',
    value: function onMaskPress() {
      var maskClosable = this.props.maskClosable;

      if (!maskClosable) {
        return;
      }
      this.hide();
    }
  }, {
    key: 'getWidthAndHeight',
    value: function getWidthAndHeight() {
      var direction = this.props.direction;
      var _props = this.props,
          width = _props.width,
          height = _props.height;


      if (!height && (direction === 'left' || direction === 'right')) {
        height = parseInt(deviceInfo.height, 10);
      }
      if (!width && (direction === 'top' || direction === 'bottom')) {
        width = 750;
      }
      return {
        width: width,
        height: height
      };
    }
  }, {
    key: 'calcTransitionStyle',
    value: function calcTransitionStyle(contentDialogVisualState) {
      var visible = typeof contentDialogVisualState === 'undefined' ? this.state.visible : contentDialogVisualState;
      var direction = this.props.direction;

      var _getWidthAndHeight = this.getWidthAndHeight(),
          width = _getWidthAndHeight.width,
          height = _getWidthAndHeight.height;

      var transitionStyle = {};
      switch (direction) {
        case 'left':
          transitionStyle = {
            transform: !visible ? 'translateX(' + width + ')' : 'translateX(0)',
            webkitTransform: !visible ? 'translateX(' + width + ')' : 'translateX(0)'
          };
          break;
        case 'right':
          transitionStyle = {
            transform: !visible ? 'translateX(' + -width + ')' : 'translateX(0)',
            webkitTransform: !visible ? 'translateX(' + -width + ')' : 'translateX(0)'
          };
          // right
          break;
        case 'top':
          transitionStyle = {
            transform: !visible ? 'translateY(' + height + ')' : 'translateX(0)',
            webkitTransform: !visible ? 'translateY(' + height + ')' : 'translateX(0)'
          };
          break;
        default:
          transitionStyle = {
            transform: !visible ? 'translateY(' + -height + ')' : 'translateX(0)',
            webkitTransform: !visible ? 'translateY(' + -height + ')' : 'translateX(0)'
          };
          break;
      }
      return transitionStyle;
    }
  }, {
    key: 'calcInitStyle',
    value: function calcInitStyle() {
      var direction = this.props.direction;

      var _getWidthAndHeight2 = this.getWidthAndHeight(),
          width = _getWidthAndHeight2.width,
          height = _getWidthAndHeight2.height;

      var positionObj = {
        position: 'absolute',
        width: width + 'rem',
        height: height + 'rem'
      };
      switch (direction) {
        case 'left':
          positionObj = _extends({}, positionObj, {
            left: -width + 'rem',
            top: 0
          });
          break;

        case 'right':
          positionObj = _extends({}, positionObj, {
            right: -width + 'rem'
          });
          // right
          break;
        case 'top':
          positionObj = _extends({}, positionObj, {
            top: -height + 'rem'
          });
          break;
        default:
          positionObj = _extends({}, positionObj, {
            bottom: -height + 'rem'
          });
          break;
      }
      return positionObj;
    }
  }, {
    key: 'transition',
    value: function transition(box, styles, cb) {
      var _props2 = this.props,
          effect = _props2.effect,
          duration = _props2.duration;

      (0, _nukeTransition2.default)(box, styles, {
        timingFunction: effect,
        delay: 0,
        duration: duration
      }, function () {
        cb && cb.call(this);
      });
    }
  }, {
    key: 'show',
    value: function show() {
      // first show mask,
      // then in mask onShow callback, show dialogContent;
      this.refs.BaseSlipMask.show();
      if (_nukeEnv.isWeb) {
        this.setState({ scrollPosition: window.scrollY });
        document.body.style.position = 'fixed';
        document.body.style.overflow = 'hidden';
      }
    }
  }, {
    key: 'hide',
    value: function hide() {
      var _this3 = this;

      // first hide dialogContent, then hideMask
      var styles = this.calcTransitionStyle(true);
      var box = (0, _rax.findDOMNode)(this.refs.slipPane);
      setTimeout(function () {
        _this3.transition(box, styles, function () {
          _this3.setState({ visible: !_this3.state.visible });
          _this3.refs.BaseSlipMask.hide();
        });
      }, 10);
      if (_nukeEnv.isWeb) {
        document.body.style.position = 'initial';
        document.body.style.overflow = 'initial';
        window.scrollTo(0, this.state.scrollPosition);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _props3 = this.props,
          children = _props3.children,
          contentStyle = _props3.contentStyle;

      var styles = this.props.themeStyle;
      return (0, _rax.createElement)(
        _nukeMask2.default,
        {
          defaultVisible: this.state.defaultVisible,
          animate: false,
          maskClosable: false,
          ref: 'BaseSlipMask',
          onVisibleChanged: this.onVisibleChanged,
          onShow: this.onMaskShow,
          onHide: this.onMaskHide,
          style: styles.mask
        },
        (0, _rax.createElement)(
          _nukeTouchable2.default,
          { style: styles['fullscreen-body'], onPress: this.onMaskPress },
          (0, _rax.createElement)(
            _nukeTouchable2.default,
            {
              ref: 'slipPane',
              style: [styles.pane, this.calcInitStyle(), contentStyle],
              onPress: this.onPanePress
            },
            children
          )
        )
      );
    }
  }]);

  return Slip;
}(_rax.Component);

Slip.propTypes = {
  direction: _rax.PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
  maskClosable: _rax.PropTypes.boolean,
  effect: _rax.PropTypes.oneOf(['ease-in', 'ease-in-out', 'ease-out', 'linear', 'cubic-bezier']),
  width: _rax.PropTypes.number,
  height: _rax.PropTypes.number,

  contentStyle: _rax.PropTypes.any,
  duration: _rax.PropTypes.number
};
Slip.defaultProps = {
  direction: 'bottom',
  maskClosable: false,
  effect: 'ease-in-out',
  duration: 200,
  width: 750,
  contentStyle: {}
};
Slip.displayName = 'Slip';

var StyledSlip = (0, _nukeThemeProvider.connectStyle)(_styles2.default)(Slip);

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