@elastic/react-search-ui
Version:
A React library for building search experiences
100 lines (80 loc) • 11 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _defineProperty(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; }
import React from "react";
import SearchContext from "./SearchContext";
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
*/
export default 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) {
_inherits(WithSearch, _React$PureComponent);
function WithSearch(props, context) {
var _this;
_classCallCheck(this, WithSearch);
_this = _possibleConstructorReturn(this, _getPrototypeOf(WithSearch).call(this));
_defineProperty(_assertThisInitialized(_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;
}
_createClass(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 = _extends({}, this.props);
return React.createElement(Component, _extends({}, this.state, rest));
}
}]);
return WithSearch;
}(React.PureComponent);
WithSearch.contextType = SearchContext;
return WithSearch;
};
}
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy93aXRoU2VhcmNoLmpzIl0sIm5hbWVzIjpbIlJlYWN0IiwiU2VhcmNoQ29udGV4dCIsImJ1aWxkQ29udGV4dEZvclByb3BzIiwiY29udGV4dCIsImRyaXZlciIsImdldFN0YXRlIiwiZ2V0QWN0aW9ucyIsImdpdmVNZUp1c3RXaGF0SU5lZWRlZCIsInN0YXRlT3JDb250ZXh0IiwibWFwQ29udGV4dFRvUHJvcHMiLCJwcm9wcyIsIm1hcENvbnRleHRUb1Byb3BzVG9Vc2UiLCJ3aXRoU2VhcmNoIiwiQ29tcG9uZW50IiwiV2l0aFNlYXJjaCIsInN0YXRlIiwidW5tb3VudGVkIiwic2V0U3RhdGUiLCJwcmV2U3RhdGUiLCJzdWJzY3JpYmVUb1N0YXRlQ2hhbmdlcyIsInN1YnNjcmlwdGlvbiIsInVuc3Vic2NyaWJlVG9TdGF0ZUNoYW5nZXMiLCJyZXN0IiwiUHVyZUNvbXBvbmVudCIsImNvbnRleHRUeXBlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7O0FBQUEsT0FBT0EsS0FBUCxNQUFrQixPQUFsQjtBQUVBLE9BQU9DLGFBQVAsTUFBMEIsaUJBQTFCOztBQUVBLFNBQVNDLG9CQUFULENBQThCQyxPQUE5QixFQUF1QztBQUNyQywyQkFDS0EsT0FBTyxDQUFDQyxNQUFSLENBQWVDLFFBQWYsRUFETCxNQUVLRixPQUFPLENBQUNDLE1BQVIsQ0FBZUUsVUFBZixFQUZMO0FBSUQ7QUFFRDs7OztBQUVBLFNBQVNDLHFCQUFULENBQStCQyxjQUEvQixFQUErQ0MsaUJBQS9DLEVBQWtFQyxLQUFsRSxFQUF5RTtBQUN2RSxNQUFNQyxzQkFBc0IsR0FBR0QsS0FBSyxDQUFDRCxpQkFBTixJQUEyQkEsaUJBQTFEO0FBQ0EsU0FBT0Usc0JBQXNCLENBQUNILGNBQUQsRUFBaUJFLEtBQWpCLENBQXRCLElBQWlELEVBQXhEO0FBQ0Q7QUFFRDs7Ozs7Ozs7Ozs7Ozs7QUFZQSxlQUFlLFNBQVNFLFVBQVQsQ0FBb0JILGlCQUFwQixFQUF1QztBQUNwRCxNQUFJLENBQUNBLGlCQUFMLEVBQXdCO0FBQ3RCLFVBQU0sZ0dBQU47QUFDRDs7QUFFRCxTQUFPLFVBQVNJLFNBQVQsRUFBb0I7QUFBQSxRQUNuQkMsVUFEbUI7QUFBQTtBQUFBO0FBQUE7O0FBRXZCLDBCQUFZSixLQUFaLEVBQW1CUCxPQUFuQixFQUE0QjtBQUFBOztBQUFBOztBQUMxQjs7QUFEMEIsdUVBc0JiLFVBQUFZLEtBQUssRUFBSTtBQUN0QixjQUFJLE1BQUtDLFNBQVQsRUFBb0I7O0FBQ3BCLGdCQUFLQyxRQUFMLENBQWMsVUFBQUMsU0FBUztBQUFBLG1CQUNyQlgscUJBQXFCLG1CQUlkVyxTQUpjLE1BS2RILEtBTGMsR0FPbkJOLGlCQVBtQixFQVFuQixNQUFLQyxLQVJjLENBREE7QUFBQSxXQUF2QjtBQVlELFNBcEMyQjs7QUFFMUIsY0FBS0ssS0FBTCxxQkFDS1IscUJBQXFCLENBQ3RCTCxvQkFBb0IsQ0FBQ0MsT0FBRCxDQURFLEVBRXRCO0FBQ0FNLFFBQUFBLGlCQUhzQixFQUl0QkMsS0FKc0IsQ0FEMUIsRUFGMEIsQ0FXMUI7QUFDQTtBQUNBOztBQUNBUCxRQUFBQSxPQUFPLENBQUNDLE1BQVIsQ0FBZWUsdUJBQWYsQ0FBdUMsTUFBS0MsWUFBNUM7QUFkMEI7QUFlM0I7O0FBakJzQjtBQUFBO0FBQUEsK0NBbUJBO0FBQ3JCLGVBQUtKLFNBQUwsR0FBaUIsSUFBakI7QUFDQSxlQUFLYixPQUFMLENBQWFDLE1BQWIsQ0FBb0JpQix5QkFBcEIsQ0FBOEMsS0FBS0QsWUFBbkQ7QUFDRDtBQXRCc0I7QUFBQTtBQUFBLGlDQXdDZDtBQUNQO0FBRE8sY0FFSUUsSUFGSixnQkFFYSxLQUFLWixLQUZsQjs7QUFJUCxpQkFBTyxvQkFBQyxTQUFELGVBQWUsS0FBS0ssS0FBcEIsRUFBK0JPLElBQS9CLEVBQVA7QUFDRDtBQTdDc0I7O0FBQUE7QUFBQSxNQUNBdEIsS0FBSyxDQUFDdUIsYUFETjs7QUFnRHpCVCxJQUFBQSxVQUFVLENBQUNVLFdBQVgsR0FBeUJ2QixhQUF6QjtBQUNBLFdBQU9hLFVBQVA7QUFDRCxHQWxERDtBQW1ERCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IFNlYXJjaENvbnRleHQgZnJvbSBcIi4vU2VhcmNoQ29udGV4dFwiO1xuXG5mdW5jdGlvbiBidWlsZENvbnRleHRGb3JQcm9wcyhjb250ZXh0KSB7XG4gIHJldHVybiB7XG4gICAgLi4uY29udGV4dC5kcml2ZXIuZ2V0U3RhdGUoKSxcbiAgICAuLi5jb250ZXh0LmRyaXZlci5nZXRBY3Rpb25zKClcbiAgfTtcbn1cblxuLyogRm9yIGEgZ2l2ZW4gb2JqZWN0IGV4ZWN1dGUgbWFwQ29udGV4dFRvUHJvcHMgdG8gcGx1Y2sgb3V0IHRoZSByZWxldmFudFxucHJvcGVydGllcyAqL1xuZnVuY3Rpb24gZ2l2ZU1lSnVzdFdoYXRJTmVlZGVkKHN0YXRlT3JDb250ZXh0LCBtYXBDb250ZXh0VG9Qcm9wcywgcHJvcHMpIHtcbiAgY29uc3QgbWFwQ29udGV4dFRvUHJvcHNUb1VzZSA9IHByb3BzLm1hcENvbnRleHRUb1Byb3BzIHx8IG1hcENvbnRleHRUb1Byb3BzO1xuICByZXR1cm4gbWFwQ29udGV4dFRvUHJvcHNUb1VzZShzdGF0ZU9yQ29udGV4dCwgcHJvcHMpIHx8IHt9O1xufVxuXG4vKipcbiAqIFRoaXMgaXMgYSBIaWdoZXIgT3JkZXIgQ29tcG9uZW50IHRoYXQgd3JhcHMgYSBjb21wb25lbnQgYW5kIGluamVjdHMgc3RhdGUgYW5kIGFjdGlvbnMgZnJvbSBTZWFyY2ggVUksIGVmZmVjdGl2ZWx5XG4gKiBcImNvbm5lY3RpbmdcIiBpdCB0byBTZWFyY2ggVUkuXG4gKlxuICogQ29tcG9uZW50cyB1c2luZyBgd2l0aFNlYXJjaGAgd2lsbCBiZSBcIlB1cmVcIiBjb21wb25lbnRzLlxuICogSXQgaXMgaW1wb3J0YW50IHRvIHVuZGVyc3RhbmQgdGhlIGltcGxpY2F0aW9ucyBvZiB1c2luZyBhIFB1cmVDb21wb25lbnQsIGFzIGRlc2NyaWJlZCBoZXJlOlxuICogaHR0cHM6Ly9yZWFjdGpzLm9yZy9kb2NzL29wdGltaXppbmctcGVyZm9ybWFuY2UuaHRtbCNleGFtcGxlc1xuICpcbiAqIEBwYXJhbSBGdW5jdGlvbiBtYXBDb250ZXh0VG9Qcm9wcyBBIGZ1bmN0aW9uIHRoYXQgYWNjZXB0cyB0aGUgY29udGV4dCBhbmQgYWxsb3dzIHlvdSB0byBwaWNrIHRoZSB2YWx1ZXMgdG8gYmUgcGFzc2VkIGFzIHByb3BzXG4gKiBpbnRvIHRoZSBjb21wb25lbnQuIFRoaXMgYWxsb3dzIHlvdSB0byBcInNlbGVjdFwiIHdoaWNoIHZhbHVlcyBmcm9tIHRoZSBjb250ZXh0IHRvIHVzZS5cbiAqIEBwYXJhbSBGdW5jdGlvbiBDb21wb25lbnRcbiAqL1xuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gd2l0aFNlYXJjaChtYXBDb250ZXh0VG9Qcm9wcykge1xuICBpZiAoIW1hcENvbnRleHRUb1Byb3BzKSB7XG4gICAgdGhyb3cgXCJ3aXRoU2VhcmNoIHJlcXVpcmVzIGEgZnVuY3Rpb24gdG8gYmUgcHJvdmlkZWQgd2hpY2ggcmV0dXJucyBhbiBvYmplY3Qgd2l0aCBhdCBsZWFzdCBvbmUgdmFsdWUuXCI7XG4gIH1cblxuICByZXR1cm4gZnVuY3Rpb24oQ29tcG9uZW50KSB7XG4gICAgY2xhc3MgV2l0aFNlYXJjaCBleHRlbmRzIFJlYWN0LlB1cmVDb21wb25lbnQge1xuICAgICAgY29uc3RydWN0b3IocHJvcHMsIGNvbnRleHQpIHtcbiAgICAgICAgc3VwZXIoKTtcbiAgICAgICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgICAgICAuLi5naXZlTWVKdXN0V2hhdElOZWVkZWQoXG4gICAgICAgICAgICBidWlsZENvbnRleHRGb3JQcm9wcyhjb250ZXh0KSxcbiAgICAgICAgICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSByZWFjdC9wcm9wLXR5cGVzXG4gICAgICAgICAgICBtYXBDb250ZXh0VG9Qcm9wcyxcbiAgICAgICAgICAgIHByb3BzXG4gICAgICAgICAgKVxuICAgICAgICB9O1xuXG4gICAgICAgIC8vIE5vdGUgdGhhdCB3ZSBzdWJzY3JpYmUgdG8gY2hhbmdlcyBhdCB0aGUgY29tcG9uZW50IGxldmVsLCByYXRoZXIgdGhhblxuICAgICAgICAvLyBhdCB0aGUgdG9wIGxldmVsIFByb3ZpZGVyLCBzbyB0aGF0IHdlIGFyZSByZS1yZW5kZXJpbmcgdGhlIGVudGlyZVxuICAgICAgICAvLyBzdWJ0cmVlIHdoZW4gc3RhdGUgY2hhbmdlcyBpbiB0aGUgUHJvdmlkZXIuXG4gICAgICAgIGNvbnRleHQuZHJpdmVyLnN1YnNjcmliZVRvU3RhdGVDaGFuZ2VzKHRoaXMuc3Vic2NyaXB0aW9uKTtcbiAgICAgIH1cblxuICAgICAgY29tcG9uZW50V2lsbFVubW91bnQoKSB7XG4gICAgICAgIHRoaXMudW5tb3VudGVkID0gdHJ1ZTtcbiAgICAgICAgdGhpcy5jb250ZXh0LmRyaXZlci51bnN1YnNjcmliZVRvU3RhdGVDaGFuZ2VzKHRoaXMuc3Vic2NyaXB0aW9uKTtcbiAgICAgIH1cblxuICAgICAgc3Vic2NyaXB0aW9uID0gc3RhdGUgPT4ge1xuICAgICAgICBpZiAodGhpcy51bm1vdW50ZWQpIHJldHVybjtcbiAgICAgICAgdGhpcy5zZXRTdGF0ZShwcmV2U3RhdGUgPT5cbiAgICAgICAgICBnaXZlTWVKdXN0V2hhdElOZWVkZWQoXG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgIC8vIFdlIHBhc3MgcHJldlN0YXRlIGhlcmUgaW5zdGVhZCBvZiBqdXN0IHN0YXRlIHNvIHRoYXQgYWN0aW9ucyBhcmVcbiAgICAgICAgICAgICAgLy8gcGVyc2lzdGVkIGFzIHdlbGwsIHdoaWNoIGFyZSBub3QgcGFzc2VkIGluIHRoZSBzdWJzY3JpcHRpb24gcGFyYW1cbiAgICAgICAgICAgICAgLi4ucHJldlN0YXRlLFxuICAgICAgICAgICAgICAuLi5zdGF0ZVxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIG1hcENvbnRleHRUb1Byb3BzLFxuICAgICAgICAgICAgdGhpcy5wcm9wc1xuICAgICAgICAgIClcbiAgICAgICAgKTtcbiAgICAgIH07XG5cbiAgICAgIHJlbmRlcigpIHtcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0L3Byb3AtdHlwZXNcbiAgICAgICAgY29uc3QgeyAuLi5yZXN0IH0gPSB0aGlzLnByb3BzO1xuXG4gICAgICAgIHJldHVybiA8Q29tcG9uZW50IHsuLi50aGlzLnN0YXRlfSB7Li4ucmVzdH0gLz47XG4gICAgICB9XG4gICAgfVxuXG4gICAgV2l0aFNlYXJjaC5jb250ZXh0VHlwZSA9IFNlYXJjaENvbnRleHQ7XG4gICAgcmV0dXJuIFdpdGhTZWFyY2g7XG4gIH07XG59XG4iXX0=