amis
Version:
一种MIS页面生成工具
80 lines (79 loc) • 3.61 kB
JavaScript
;
/**
* @file LazyComponent
* @description
* @author fex
*/
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var VisibilitySensor = require("react-visibility-sensor");
var LazyComponent = /** @class */ (function (_super) {
tslib_1.__extends(LazyComponent, _super);
function LazyComponent(props) {
var _this = _super.call(this, props) || this;
_this.mounted = false;
_this.handleVisibleChange = _this.handleVisibleChange.bind(_this);
_this.state = {
visible: false,
component: props.component
};
return _this;
}
LazyComponent.prototype.componentWillMount = function () {
this.mounted = true;
};
LazyComponent.prototype.componentWillUnmount = function () {
this.mounted = false;
};
LazyComponent.prototype.handleVisibleChange = function (visible) {
var _this = this;
this.setState({
visible: visible
});
if (!visible || this.state.component || !this.props.getComponent) {
return;
}
this.props
.getComponent()
.then(function (component) {
return _this.mounted &&
typeof component === 'function' &&
_this.setState({
component: component
});
})
.catch(function (reason) {
return _this.mounted &&
_this.setState({
component: function () { return react_1.default.createElement("div", { className: "alert alert-danger" }, String(reason)); }
});
});
};
LazyComponent.prototype.render = function () {
var _a = this.props, placeholder = _a.placeholder, unMountOnHidden = _a.unMountOnHidden, childProps = _a.childProps, visiblilityProps = _a.visiblilityProps, partialVisibility = _a.partialVisibility, rest = tslib_1.__rest(_a, ["placeholder", "unMountOnHidden", "childProps", "visiblilityProps", "partialVisibility"]);
var _b = this.state, visible = _b.visible, Component = _b.component;
// 需要监听从可见到不可见。
if (unMountOnHidden) {
return (react_1.default.createElement(VisibilitySensor, tslib_1.__assign({}, visiblilityProps, { partialVisibility: partialVisibility, onChange: this.handleVisibleChange }),
react_1.default.createElement("div", { className: "visibility-sensor" }, Component && visible ? react_1.default.createElement(Component, tslib_1.__assign({}, rest, childProps)) : placeholder)));
}
if (!visible) {
return (react_1.default.createElement(VisibilitySensor, tslib_1.__assign({}, visiblilityProps, { partialVisibility: partialVisibility, onChange: this.handleVisibleChange }),
react_1.default.createElement("div", { className: "visibility-sensor" }, placeholder)));
}
else if (Component) {
// 只监听不可见到可见，一旦可见了，就销毁检查。
return react_1.default.createElement(Component, tslib_1.__assign({}, rest, childProps));
}
return react_1.default.createElement("div", null, placeholder);
};
LazyComponent.defaultProps = {
placeholder: '加载中...',
unMountOnHidden: false,
partialVisibility: true
};
return LazyComponent;
}(react_1.default.Component));
exports.default = LazyComponent;
//# sourceMappingURL=./components/LazyComponent.js.map