lm-mask
Version:
* 作者：niuguimin * 邮箱：15275151030@163.com * 版本：**`1.0.0`**
180 lines (148 loc) • 9.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require('react'));
var _propTypes = _interopRequireDefault(require('prop-types'));
var _classnames = _interopRequireDefault(require('classnames'));
var _lmPortal = _interopRequireDefault(require('lm-portal'));
var _helper = require('./helper.js');
require('./index.scss');
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _jsxFileName = 'src/index.js';
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; }; }();
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; } /**
* Created by quying<qy9404@163.com>.
* ComponentName Mask
* Desc Mask
* GroupName lm-component
*/
var Mask = function (_React$Component) {
_inherits(Mask, _React$Component);
function Mask(props) {
_classCallCheck(this, Mask);
var _this = _possibleConstructorReturn(this, (Mask.__proto__ || Object.getPrototypeOf(Mask)).call(this, props));
_this.timer = null;
_this.state = {};
return _this;
}
_createClass(Mask, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
var _this2 = this;
//隐藏的时候执行动画
if (this.props.visible === true && nextProps.visible === false) {
this.setState({
inOutAnimation: true
});
this.outAnimationTime = setTimeout(function () {
_this2.setState({
inOutAnimation: false
});
}, 250);
}
// 标识visible变化：处理遮罩下面可滑动bug, 多个遮罩层叠出现时，只处理最底层遮罩
if (this.props.visible !== nextProps.visible) {
try {
if (nextProps.visible) {
_helper.helper.afterOpen();
} else {
_helper.helper.beforeClose();
}
} catch (error) {
console.log(error);
}
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var self = this;
window.addEventListener("hashchange", function () {
if (self.props.visible) {
self.props.onMaskClick();
_helper.helper.beforeClose();
}
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
clearTimeout(this.outAnimationTime);
_helper.helper.cancelAnimation();
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
visible = _props.visible,
opacity = _props.opacity,
zIndex = _props.zIndex,
style = _props.style,
onMaskClick = _props.onMaskClick,
children = _props.children;
var _props2 = this.props,
target = _props2.target,
alwaysAppend = _props2.alwaysAppend,
className = _props2.className;
var inOutAnimation = this.state.inOutAnimation;
var maskClass = (0, _classnames.default)({
'lm-ui-mask': true,
'enter-animation': visible, // 修改成更通用的名字，以便重写样式，默认效果为fade
'leave-animation': !visible && inOutAnimation,
'hide': !visible && !inOutAnimation
});
var maskStyle = Object.assign({}, style, {
backgroundColor: 'rgba(33, 33, 33, ' + opacity + ')',
zIndex: zIndex
});
return _react.default.createElement(
_lmPortal.default,
_defineProperty({ className: className, target: target, alwaysAppend: alwaysAppend, __source: {
fileName: _jsxFileName,
lineNumber: 122
},
__self: this
}, '__self', this),
_react.default.createElement(
'div',
_defineProperty({ key: 'mask', onClick: onMaskClick, className: maskClass, style: maskStyle, __source: {
fileName: _jsxFileName,
lineNumber: 123
},
__self: this
}, '__self', this),
children
)
);
}
}]);
return Mask;
}(_react.default.Component);
Mask.propTypes = {
visible: _propTypes.default.bool.isRequired, //是否可见
opacity: _propTypes.default.number, //透明度 0-1
zIndex: _propTypes.default.oneOfType([//z-index
_propTypes.default.number, _propTypes.default.string]),
target: _propTypes.default.any, //Protal组件 目标插入参数
alwaysAppend: _propTypes.default.bool, //Protal组件 是否每次更新都始终执行 append
className: _propTypes.default.string, //Protal组件 class 名
style: _propTypes.default.object,
onMaskClick: _propTypes.default.func
};
Mask.defaultProps = {
visible: false,
opacity: 0.7,
zIndex: 999,
className: '',
style: {},
onMaskClick: function onMaskClick() {}
};
var _default = Mask;
exports.default = _default;
module.exports = exports['default'];