@visx/responsive
Version:
visx responsive svg
61 lines (60 loc) • 3.33 kB
JavaScript
;
exports.__esModule = true;
exports.default = withScreenSize;
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function withScreenSize(BaseComponent) {
return /*#__PURE__*/function (_React$Component) {
_inheritsLoose(WrappedComponent, _React$Component);
function WrappedComponent() {
var _ref, _BaseComponent$displa, _ref2, _this$props$debounceT, _this$props$enableDeb;
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.displayName = "withScreenSize(" + ((_ref = (_BaseComponent$displa = BaseComponent.displayName) != null ? _BaseComponent$displa : BaseComponent.name) != null ? _ref : 'Component') + ")";
_this.state = {
screenWidth: undefined,
screenHeight: undefined
};
_this.resize = (0, _debounce.default)(
// eslint-disable-next-line unicorn/consistent-function-scoping
function () {
_this.setState(function /** prevState, props */
() {
return {
screenWidth: window.innerWidth,
screenHeight: window.innerHeight
};
});
}, (_ref2 = (_this$props$debounceT = _this.props.debounceTime) != null ? _this$props$debounceT : _this.props.windowResizeDebounceTime) != null ? _ref2 : 300, {
leading: (_this$props$enableDeb = _this.props.enableDebounceLeadingCall) != null ? _this$props$enableDeb : true
});
return _this;
}
var _proto = WrappedComponent.prototype;
_proto.componentDidMount = function componentDidMount() {
window.addEventListener('resize', this.resize, false);
this.resize();
};
_proto.componentWillUnmount = function componentWillUnmount() {
window.removeEventListener('resize', this.resize, false);
this.resize.cancel();
};
_proto.render = function render() {
var _this$state = this.state,
screenWidth = _this$state.screenWidth,
screenHeight = _this$state.screenHeight;
return screenWidth == null || screenHeight == null ? null : /*#__PURE__*/_react.default.createElement(BaseComponent, _extends({
screenWidth: screenWidth,
screenHeight: screenHeight
}, this.props));
};
return WrappedComponent;
}(_react.default.Component);
}