@cision/react-container-query
Version:
Container Query for React Component
104 lines • 4.25 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("react");
var ReactDOM = require("react-dom");
var matchQueries_1 = require("container-query-toolkit/lib/matchQueries");
var ContainerQueryCore_1 = require("./ContainerQueryCore");
/**
* <ContainerQuery query={query} initialSize={{width: 123, height: 456}}>
* {(params) => {
* <div className={classname(params)}></div>
* }}
* </ContainerQuery>
*/
exports.ContainerQuery = function (_a) {
var renderContents = _a.children, query = _a.query, initialSize = _a.initialSize;
var _b = react_1.useState(initialSize ? matchQueries_1.default(query)(initialSize) : {}), params = _b[0], setParams = _b[1];
var _c = react_1.useState(null), prevQuery = _c[0], setPrevQuery = _c[1];
var elementRef = react_1.useRef(null);
var cqCoreRef = react_1.useRef(null);
react_1.useEffect(function () {
cqCoreRef.current = new ContainerQueryCore_1.default(query, function (params) {
if (elementRef.current) {
setParams(params);
}
});
return function () {
cqCoreRef.current = null;
};
}, [elementRef, query]);
react_1.useEffect(function () {
if (elementRef.current && query !== prevQuery) {
cqCoreRef.current.observe(elementRef.current);
setPrevQuery(query);
}
return function () { };
}, [elementRef, prevQuery, query]);
return renderContents(params, elementRef);
};
;
function applyContainerQuery(Component, query, initialSize) {
var _a;
return _a = /** @class */ (function (_super) {
__extends(ContainerQuery, _super);
function ContainerQuery(props) {
var _this = _super.call(this, props) || this;
_this.cqCore = null;
_this.state = {
params: initialSize
? matchQueries_1.default(query)(initialSize)
: {},
};
return _this;
}
ContainerQuery.prototype.componentDidMount = function () {
var _this = this;
this.cqCore = new ContainerQueryCore_1.default(query, function (params) {
_this.setState({ params: params });
});
this.cqCore.observe(ReactDOM.findDOMNode(this));
};
ContainerQuery.prototype.componentDidUpdate = function () {
this.cqCore.observe(ReactDOM.findDOMNode(this));
};
ContainerQuery.prototype.componentWillUnmount = function () {
this.cqCore.disconnect();
this.cqCore = null;
};
ContainerQuery.prototype.render = function () {
return (React.createElement(Component, __assign({}, this.props, { containerQuery: this.state.params })));
};
return ContainerQuery;
}(React.Component)),
_a.displayName = Component.displayName
? "ContainerQuery(" + Component.displayName + ")"
: 'ContainerQuery',
_a;
}
exports.applyContainerQuery = applyContainerQuery;
//# sourceMappingURL=index.js.map