@elastic/react-search-ui
Version:
A React library for building search experiences
112 lines (86 loc) • 11.6 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = withSearch;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _SearchContext = _interopRequireDefault(require("./SearchContext"));
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function buildContextForProps(context) {
return _objectSpread({}, context.driver.getState(), {}, context.driver.getActions());
}
/* For a given object execute mapContextToProps to pluck out the relevant
properties */
function giveMeJustWhatINeeded(stateOrContext, mapContextToProps, props) {
var mapContextToPropsToUse = props.mapContextToProps || mapContextToProps;
return mapContextToPropsToUse(stateOrContext, props) || {};
}
/**
* This is a Higher Order Component that wraps a component and injects state and actions from Search UI, effectively
* "connecting" it to Search UI.
*
* Components using `withSearch` will be "Pure" components.
* It is important to understand the implications of using a PureComponent, as described here:
* https://reactjs.org/docs/optimizing-performance.html#examples
*
* @param Function mapContextToProps A function that accepts the context and allows you to pick the values to be passed as props
* into the component. This allows you to "select" which values from the context to use.
* @param Function Component
*/
function withSearch(mapContextToProps) {
if (!mapContextToProps) {
throw "withSearch requires a function to be provided which returns an object with at least one value.";
}
return function (Component) {
var WithSearch =
/*#__PURE__*/
function (_React$PureComponent) {
(0, _inherits2.default)(WithSearch, _React$PureComponent);
function WithSearch(props, context) {
var _this;
(0, _classCallCheck2.default)(this, WithSearch);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(WithSearch).call(this));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "subscription", function (state) {
if (_this.unmounted) return;
_this.setState(function (prevState) {
return giveMeJustWhatINeeded(_objectSpread({}, prevState, {}, state), mapContextToProps, _this.props);
});
});
_this.state = _objectSpread({}, giveMeJustWhatINeeded(buildContextForProps(context), // eslint-disable-next-line react/prop-types
mapContextToProps, props)); // Note that we subscribe to changes at the component level, rather than
// at the top level Provider, so that we are re-rendering the entire
// subtree when state changes in the Provider.
context.driver.subscribeToStateChanges(_this.subscription);
return _this;
}
(0, _createClass2.default)(WithSearch, [{
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.unmounted = true;
this.context.driver.unsubscribeToStateChanges(this.subscription);
}
}, {
key: "render",
value: function render() {
// eslint-disable-next-line react/prop-types
var rest = (0, _extends2.default)({}, this.props);
return _react.default.createElement(Component, (0, _extends2.default)({}, this.state, rest));
}
}]);
return WithSearch;
}(_react.default.PureComponent);
WithSearch.contextType = _SearchContext.default;
return WithSearch;
};
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy93aXRoU2VhcmNoLmpzIl0sIm5hbWVzIjpbImJ1aWxkQ29udGV4dEZvclByb3BzIiwiY29udGV4dCIsImRyaXZlciIsImdldFN0YXRlIiwiZ2V0QWN0aW9ucyIsImdpdmVNZUp1c3RXaGF0SU5lZWRlZCIsInN0YXRlT3JDb250ZXh0IiwibWFwQ29udGV4dFRvUHJvcHMiLCJwcm9wcyIsIm1hcENvbnRleHRUb1Byb3BzVG9Vc2UiLCJ3aXRoU2VhcmNoIiwiQ29tcG9uZW50IiwiV2l0aFNlYXJjaCIsInN0YXRlIiwidW5tb3VudGVkIiwic2V0U3RhdGUiLCJwcmV2U3RhdGUiLCJzdWJzY3JpYmVUb1N0YXRlQ2hhbmdlcyIsInN1YnNjcmlwdGlvbiIsInVuc3Vic2NyaWJlVG9TdGF0ZUNoYW5nZXMiLCJyZXN0IiwiUmVhY3QiLCJQdXJlQ29tcG9uZW50IiwiY29udGV4dFR5cGUiLCJTZWFyY2hDb250ZXh0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBRUE7Ozs7OztBQUVBLFNBQVNBLG9CQUFULENBQThCQyxPQUE5QixFQUF1QztBQUNyQywyQkFDS0EsT0FBTyxDQUFDQyxNQUFSLENBQWVDLFFBQWYsRUFETCxNQUVLRixPQUFPLENBQUNDLE1BQVIsQ0FBZUUsVUFBZixFQUZMO0FBSUQ7QUFFRDs7OztBQUVBLFNBQVNDLHFCQUFULENBQStCQyxjQUEvQixFQUErQ0MsaUJBQS9DLEVBQWtFQyxLQUFsRSxFQUF5RTtBQUN2RSxNQUFNQyxzQkFBc0IsR0FBR0QsS0FBSyxDQUFDRCxpQkFBTixJQUEyQkEsaUJBQTFEO0FBQ0EsU0FBT0Usc0JBQXNCLENBQUNILGNBQUQsRUFBaUJFLEtBQWpCLENBQXRCLElBQWlELEVBQXhEO0FBQ0Q7QUFFRDs7Ozs7Ozs7Ozs7Ozs7QUFZZSxTQUFTRSxVQUFULENBQW9CSCxpQkFBcEIsRUFBdUM7QUFDcEQsTUFBSSxDQUFDQSxpQkFBTCxFQUF3QjtBQUN0QixVQUFNLGdHQUFOO0FBQ0Q7O0FBRUQsU0FBTyxVQUFTSSxTQUFULEVBQW9CO0FBQUEsUUFDbkJDLFVBRG1CO0FBQUE7QUFBQTtBQUFBOztBQUV2QiwwQkFBWUosS0FBWixFQUFtQlAsT0FBbkIsRUFBNEI7QUFBQTs7QUFBQTtBQUMxQjtBQUQwQixtR0FzQmIsVUFBQVksS0FBSyxFQUFJO0FBQ3RCLGNBQUksTUFBS0MsU0FBVCxFQUFvQjs7QUFDcEIsZ0JBQUtDLFFBQUwsQ0FBYyxVQUFBQyxTQUFTO0FBQUEsbUJBQ3JCWCxxQkFBcUIsbUJBSWRXLFNBSmMsTUFLZEgsS0FMYyxHQU9uQk4saUJBUG1CLEVBUW5CLE1BQUtDLEtBUmMsQ0FEQTtBQUFBLFdBQXZCO0FBWUQsU0FwQzJCO0FBRTFCLGNBQUtLLEtBQUwscUJBQ0tSLHFCQUFxQixDQUN0Qkwsb0JBQW9CLENBQUNDLE9BQUQsQ0FERSxFQUV0QjtBQUNBTSxRQUFBQSxpQkFIc0IsRUFJdEJDLEtBSnNCLENBRDFCLEVBRjBCLENBVzFCO0FBQ0E7QUFDQTs7QUFDQVAsUUFBQUEsT0FBTyxDQUFDQyxNQUFSLENBQWVlLHVCQUFmLENBQXVDLE1BQUtDLFlBQTVDO0FBZDBCO0FBZTNCOztBQWpCc0I7QUFBQTtBQUFBLCtDQW1CQTtBQUNyQixlQUFLSixTQUFMLEdBQWlCLElBQWpCO0FBQ0EsZUFBS2IsT0FBTCxDQUFhQyxNQUFiLENBQW9CaUIseUJBQXBCLENBQThDLEtBQUtELFlBQW5EO0FBQ0Q7QUF0QnNCO0FBQUE7QUFBQSxpQ0F3Q2Q7QUFDUDtBQURPLGNBRUlFLElBRkosOEJBRWEsS0FBS1osS0FGbEI7QUFJUCxpQkFBTyw2QkFBQyxTQUFELDZCQUFlLEtBQUtLLEtBQXBCLEVBQStCTyxJQUEvQixFQUFQO0FBQ0Q7QUE3Q3NCO0FBQUE7QUFBQSxNQUNBQyxlQUFNQyxhQUROOztBQWdEekJWLElBQUFBLFVBQVUsQ0FBQ1csV0FBWCxHQUF5QkMsc0JBQXpCO0FBQ0EsV0FBT1osVUFBUDtBQUNELEdBbEREO0FBbUREIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgU2VhcmNoQ29udGV4dCBmcm9tIFwiLi9TZWFyY2hDb250ZXh0XCI7XG5cbmZ1bmN0aW9uIGJ1aWxkQ29udGV4dEZvclByb3BzKGNvbnRleHQpIHtcbiAgcmV0dXJuIHtcbiAgICAuLi5jb250ZXh0LmRyaXZlci5nZXRTdGF0ZSgpLFxuICAgIC4uLmNvbnRleHQuZHJpdmVyLmdldEFjdGlvbnMoKVxuICB9O1xufVxuXG4vKiBGb3IgYSBnaXZlbiBvYmplY3QgZXhlY3V0ZSBtYXBDb250ZXh0VG9Qcm9wcyB0byBwbHVjayBvdXQgdGhlIHJlbGV2YW50XG5wcm9wZXJ0aWVzICovXG5mdW5jdGlvbiBnaXZlTWVKdXN0V2hhdElOZWVkZWQoc3RhdGVPckNvbnRleHQsIG1hcENvbnRleHRUb1Byb3BzLCBwcm9wcykge1xuICBjb25zdCBtYXBDb250ZXh0VG9Qcm9wc1RvVXNlID0gcHJvcHMubWFwQ29udGV4dFRvUHJvcHMgfHwgbWFwQ29udGV4dFRvUHJvcHM7XG4gIHJldHVybiBtYXBDb250ZXh0VG9Qcm9wc1RvVXNlKHN0YXRlT3JDb250ZXh0LCBwcm9wcykgfHwge307XG59XG5cbi8qKlxuICogVGhpcyBpcyBhIEhpZ2hlciBPcmRlciBDb21wb25lbnQgdGhhdCB3cmFwcyBhIGNvbXBvbmVudCBhbmQgaW5qZWN0cyBzdGF0ZSBhbmQgYWN0aW9ucyBmcm9tIFNlYXJjaCBVSSwgZWZmZWN0aXZlbHlcbiAqIFwiY29ubmVjdGluZ1wiIGl0IHRvIFNlYXJjaCBVSS5cbiAqXG4gKiBDb21wb25lbnRzIHVzaW5nIGB3aXRoU2VhcmNoYCB3aWxsIGJlIFwiUHVyZVwiIGNvbXBvbmVudHMuXG4gKiBJdCBpcyBpbXBvcnRhbnQgdG8gdW5kZXJzdGFuZCB0aGUgaW1wbGljYXRpb25zIG9mIHVzaW5nIGEgUHVyZUNvbXBvbmVudCwgYXMgZGVzY3JpYmVkIGhlcmU6XG4gKiBodHRwczovL3JlYWN0anMub3JnL2RvY3Mvb3B0aW1pemluZy1wZXJmb3JtYW5jZS5odG1sI2V4YW1wbGVzXG4gKlxuICogQHBhcmFtIEZ1bmN0aW9uIG1hcENvbnRleHRUb1Byb3BzIEEgZnVuY3Rpb24gdGhhdCBhY2NlcHRzIHRoZSBjb250ZXh0IGFuZCBhbGxvd3MgeW91IHRvIHBpY2sgdGhlIHZhbHVlcyB0byBiZSBwYXNzZWQgYXMgcHJvcHNcbiAqIGludG8gdGhlIGNvbXBvbmVudC4gVGhpcyBhbGxvd3MgeW91IHRvIFwic2VsZWN0XCIgd2hpY2ggdmFsdWVzIGZyb20gdGhlIGNvbnRleHQgdG8gdXNlLlxuICogQHBhcmFtIEZ1bmN0aW9uIENvbXBvbmVudFxuICovXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiB3aXRoU2VhcmNoKG1hcENvbnRleHRUb1Byb3BzKSB7XG4gIGlmICghbWFwQ29udGV4dFRvUHJvcHMpIHtcbiAgICB0aHJvdyBcIndpdGhTZWFyY2ggcmVxdWlyZXMgYSBmdW5jdGlvbiB0byBiZSBwcm92aWRlZCB3aGljaCByZXR1cm5zIGFuIG9iamVjdCB3aXRoIGF0IGxlYXN0IG9uZSB2YWx1ZS5cIjtcbiAgfVxuXG4gIHJldHVybiBmdW5jdGlvbihDb21wb25lbnQpIHtcbiAgICBjbGFzcyBXaXRoU2VhcmNoIGV4dGVuZHMgUmVhY3QuUHVyZUNvbXBvbmVudCB7XG4gICAgICBjb25zdHJ1Y3Rvcihwcm9wcywgY29udGV4dCkge1xuICAgICAgICBzdXBlcigpO1xuICAgICAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgICAgIC4uLmdpdmVNZUp1c3RXaGF0SU5lZWRlZChcbiAgICAgICAgICAgIGJ1aWxkQ29udGV4dEZvclByb3BzKGNvbnRleHQpLFxuICAgICAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0L3Byb3AtdHlwZXNcbiAgICAgICAgICAgIG1hcENvbnRleHRUb1Byb3BzLFxuICAgICAgICAgICAgcHJvcHNcbiAgICAgICAgICApXG4gICAgICAgIH07XG5cbiAgICAgICAgLy8gTm90ZSB0aGF0IHdlIHN1YnNjcmliZSB0byBjaGFuZ2VzIGF0IHRoZSBjb21wb25lbnQgbGV2ZWwsIHJhdGhlciB0aGFuXG4gICAgICAgIC8vIGF0IHRoZSB0b3AgbGV2ZWwgUHJvdmlkZXIsIHNvIHRoYXQgd2UgYXJlIHJlLXJlbmRlcmluZyB0aGUgZW50aXJlXG4gICAgICAgIC8vIHN1YnRyZWUgd2hlbiBzdGF0ZSBjaGFuZ2VzIGluIHRoZSBQcm92aWRlci5cbiAgICAgICAgY29udGV4dC5kcml2ZXIuc3Vic2NyaWJlVG9TdGF0ZUNoYW5nZXModGhpcy5zdWJzY3JpcHRpb24pO1xuICAgICAgfVxuXG4gICAgICBjb21wb25lbnRXaWxsVW5tb3VudCgpIHtcbiAgICAgICAgdGhpcy51bm1vdW50ZWQgPSB0cnVlO1xuICAgICAgICB0aGlzLmNvbnRleHQuZHJpdmVyLnVuc3Vic2NyaWJlVG9TdGF0ZUNoYW5nZXModGhpcy5zdWJzY3JpcHRpb24pO1xuICAgICAgfVxuXG4gICAgICBzdWJzY3JpcHRpb24gPSBzdGF0ZSA9PiB7XG4gICAgICAgIGlmICh0aGlzLnVubW91bnRlZCkgcmV0dXJuO1xuICAgICAgICB0aGlzLnNldFN0YXRlKHByZXZTdGF0ZSA9PlxuICAgICAgICAgIGdpdmVNZUp1c3RXaGF0SU5lZWRlZChcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgLy8gV2UgcGFzcyBwcmV2U3RhdGUgaGVyZSBpbnN0ZWFkIG9mIGp1c3Qgc3RhdGUgc28gdGhhdCBhY3Rpb25zIGFyZVxuICAgICAgICAgICAgICAvLyBwZXJzaXN0ZWQgYXMgd2VsbCwgd2hpY2ggYXJlIG5vdCBwYXNzZWQgaW4gdGhlIHN1YnNjcmlwdGlvbiBwYXJhbVxuICAgICAgICAgICAgICAuLi5wcmV2U3RhdGUsXG4gICAgICAgICAgICAgIC4uLnN0YXRlXG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgbWFwQ29udGV4dFRvUHJvcHMsXG4gICAgICAgICAgICB0aGlzLnByb3BzXG4gICAgICAgICAgKVxuICAgICAgICApO1xuICAgICAgfTtcblxuICAgICAgcmVuZGVyKCkge1xuICAgICAgICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgcmVhY3QvcHJvcC10eXBlc1xuICAgICAgICBjb25zdCB7IC4uLnJlc3QgfSA9IHRoaXMucHJvcHM7XG5cbiAgICAgICAgcmV0dXJuIDxDb21wb25lbnQgey4uLnRoaXMuc3RhdGV9IHsuLi5yZXN0fSAvPjtcbiAgICAgIH1cbiAgICB9XG5cbiAgICBXaXRoU2VhcmNoLmNvbnRleHRUeXBlID0gU2VhcmNoQ29udGV4dDtcbiAgICByZXR1cm4gV2l0aFNlYXJjaDtcbiAgfTtcbn1cbiJdfQ==
;