You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
8.4 KiB
230 lines
8.4 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
|
|
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
|
|
var _createClass2 = require('babel-runtime/helpers/createClass');
|
|
|
|
var _createClass3 = _interopRequireDefault(_createClass2);
|
|
|
|
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
|
|
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
|
|
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
|
|
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _reactNative = require('react-native');
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
var styles = _reactNative.StyleSheet.create({
|
|
wrap: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0,0,0,0)'
|
|
},
|
|
mask: {
|
|
backgroundColor: 'black',
|
|
opacity: .5
|
|
},
|
|
content: {
|
|
backgroundColor: 'white'
|
|
},
|
|
absolute: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
});
|
|
var screen = _reactNative.Dimensions.get('window');
|
|
|
|
var RCModal = function (_React$Component) {
|
|
(0, _inherits3['default'])(RCModal, _React$Component);
|
|
|
|
function RCModal(props) {
|
|
(0, _classCallCheck3['default'])(this, RCModal);
|
|
|
|
var _this = (0, _possibleConstructorReturn3['default'])(this, (RCModal.__proto__ || Object.getPrototypeOf(RCModal)).call(this, props));
|
|
|
|
_this.animateMask = function (visible) {
|
|
_this.stopMaskAnim();
|
|
_this.state.opacity.setValue(_this.getOpacity(!visible));
|
|
_this.animMask = _reactNative.Animated.timing(_this.state.opacity, {
|
|
toValue: _this.getOpacity(visible),
|
|
duration: _this.props.animationDuration
|
|
});
|
|
_this.animMask.start(function () {
|
|
_this.animMask = null;
|
|
});
|
|
};
|
|
_this.stopMaskAnim = function () {
|
|
if (_this.animMask) {
|
|
_this.animMask.stop();
|
|
_this.animMask = null;
|
|
}
|
|
};
|
|
_this.stopDialogAnim = function () {
|
|
if (_this.animDialog) {
|
|
_this.animDialog.stop();
|
|
_this.animDialog = null;
|
|
}
|
|
};
|
|
_this.animateDialog = function (visible) {
|
|
_this.stopDialogAnim();
|
|
_this.animateMask(visible);
|
|
var _this$props = _this.props,
|
|
animationType = _this$props.animationType,
|
|
animationDuration = _this$props.animationDuration;
|
|
|
|
animationDuration = animationDuration;
|
|
if (animationType !== 'none') {
|
|
if (animationType === 'slide-up' || animationType === 'slide-down') {
|
|
_this.state.position.setValue(_this.getPosition(!visible));
|
|
_this.animDialog = _reactNative.Animated.timing(_this.state.position, {
|
|
toValue: _this.getPosition(visible),
|
|
duration: animationDuration,
|
|
easing: visible ? _reactNative.Easing.elastic(0.8) : undefined
|
|
});
|
|
} else if (animationType === 'fade') {
|
|
_this.animDialog = _reactNative.Animated.parallel([_reactNative.Animated.timing(_this.state.opacity, {
|
|
toValue: _this.getOpacity(visible),
|
|
duration: animationDuration,
|
|
easing: visible ? _reactNative.Easing.elastic(0.8) : undefined
|
|
}), _reactNative.Animated.spring(_this.state.scale, {
|
|
toValue: _this.getScale(visible)
|
|
})]);
|
|
}
|
|
_this.animDialog.start(function () {
|
|
_this.animDialog = null;
|
|
if (!visible) {
|
|
_this.setState({
|
|
modalVisible: false
|
|
});
|
|
}
|
|
if (_this.props.onAnimationEnd) {
|
|
_this.props.onAnimationEnd(visible);
|
|
}
|
|
});
|
|
} else {
|
|
if (!visible) {
|
|
_this.setState({
|
|
modalVisible: false
|
|
});
|
|
}
|
|
}
|
|
};
|
|
_this.close = function () {
|
|
_this.animateDialog(false);
|
|
};
|
|
_this.onMaskClose = function () {
|
|
if (_this.props.maskClosable && _this.props.onClose) {
|
|
_this.props.onClose();
|
|
}
|
|
};
|
|
_this.getPosition = function (visible) {
|
|
if (visible) {
|
|
return 0;
|
|
}
|
|
return _this.props.animationType === 'slide-down' ? -screen.height : screen.height;
|
|
};
|
|
_this.getScale = function (visible) {
|
|
return visible ? 1 : 1.05;
|
|
};
|
|
_this.getOpacity = function (visible) {
|
|
return visible ? 1 : 0;
|
|
};
|
|
var visible = props.visible;
|
|
|
|
_this.state = {
|
|
position: new _reactNative.Animated.Value(_this.getPosition(visible)),
|
|
scale: new _reactNative.Animated.Value(_this.getScale(visible)),
|
|
opacity: new _reactNative.Animated.Value(_this.getOpacity(visible)),
|
|
modalVisible: visible
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
(0, _createClass3['default'])(RCModal, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(nextProps) {
|
|
if (this.shouldComponentUpdate(nextProps, null)) {
|
|
this.setState({
|
|
modalVisible: true
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'shouldComponentUpdate',
|
|
value: function shouldComponentUpdate(nextProps, nextState) {
|
|
if (this.props.visible || this.props.visible !== nextProps.visible) {
|
|
return true;
|
|
}
|
|
if (nextState) {
|
|
if (nextState.modalVisible !== this.state.modalVisible) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
}, {
|
|
key: 'componentDidMount',
|
|
value: function componentDidMount() {
|
|
if (this.props.animateAppear && this.props.animationType !== 'none') {
|
|
this.componentDidUpdate({});
|
|
}
|
|
}
|
|
}, {
|
|
key: 'componentDidUpdate',
|
|
value: function componentDidUpdate(prevProps) {
|
|
var props = this.props;
|
|
|
|
if (prevProps.visible !== props.visible) {
|
|
this.animateDialog(props.visible);
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
var props = this.props;
|
|
|
|
if (!this.state.modalVisible) {
|
|
return null;
|
|
}
|
|
var animationStyleMap = {
|
|
none: {},
|
|
'slide-up': { transform: [{ translateY: this.state.position }] },
|
|
'slide-down': { transform: [{ translateY: this.state.position }] },
|
|
fade: { transform: [{ scale: this.state.scale }], opacity: this.state.opacity }
|
|
};
|
|
return _react2['default'].createElement(_reactNative.Modal, { visible: true, transparent: true, onRequestClose: this.props.onClose, supportedOrientations: ['portrait', 'landscape'] }, _react2['default'].createElement(_reactNative.View, { style: [styles.wrap, props.wrapStyle] }, _react2['default'].createElement(_reactNative.TouchableWithoutFeedback, { onPress: this.onMaskClose }, _react2['default'].createElement(_reactNative.Animated.View, { style: [styles.absolute, { opacity: this.state.opacity }] }, _react2['default'].createElement(_reactNative.View, { style: [styles.absolute, props.maskStyle] }))), _react2['default'].createElement(_reactNative.Animated.View, { style: [styles.content, props.style, animationStyleMap[props.animationType]] }, this.props.children)));
|
|
}
|
|
}]);
|
|
return RCModal;
|
|
}(_react2['default'].Component);
|
|
|
|
exports['default'] = RCModal;
|
|
|
|
RCModal.defaultProps = {
|
|
wrapStyle: styles.wrap,
|
|
maskStyle: styles.mask,
|
|
animationType: 'slide-up',
|
|
animateAppear: false,
|
|
animationDuration: 300,
|
|
visible: false,
|
|
maskClosable: true,
|
|
onClose: function onClose() {},
|
|
onAnimationEnd: function onAnimationEnd(_visible) {}
|
|
};
|
|
module.exports = exports['default']; |