@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
183 lines (178 loc) • 7.29 kB
JavaScript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import { a as _extends } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { h } from 'vue';
import VueTypes from 'vue-types';
import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
import { c as connect, b as getCamelCase, d as getValidPropsKeys } from './index-3af85a74.js';
var addComponent = Actions.addComponent,
removeComponent = Actions.removeComponent,
watchComponent = Actions.watchComponent,
setQueryListener = Actions.setQueryListener,
setComponentProps = Actions.setComponentProps,
updateComponentProps = Actions.updateComponentProps;
var pushToAndClause = helper.pushToAndClause,
checkPropChange = helper.checkPropChange,
checkSomePropChange = helper.checkSomePropChange;
/**
* ComponentWrapper component is a wrapper component for each ReactiveSearch component
* which is responsible for following tasks:
* 1. Register a component on mount
* 2. Set query listener
* 3. Set react prop
* 4. Follow the [1-3] for the internal component if needed
* 5. Update component props in redux store
* 6. Unregister the component on un-mount
* Note: All components are using that except the DynamicRangeSlider
*/
var ComponentWrapper = function ComponentWrapper(component, options) {
if (options === void 0) {
options = {
componentType: null,
internalComponent: false
};
}
return {
name: 'ComponentWrapper',
$timestamp: null,
props: {
destroyOnUnmount: VueTypes.bool.def(true)
},
created: function created() {
var _this = this;
// clone the props for component it is needed because attrs gets changed on time
var componentProps = _extends({}, this.$attrs);
// handle kebab case for props
var parsedProps = {};
Object.keys(componentProps).forEach(function (key) {
parsedProps[getCamelCase(key)] = componentProps[key];
});
if (options.componentType === componentTypes.AIAnswer) {
parsedProps.enableAI = true;
}
this.componentProps = parsedProps;
this.componentId = this.componentProps.componentId;
this.react = this.componentProps.react;
this.$timestamp = new Date().getTime();
var components = [];
if (this.$$store) {
var _this$$$store$getStat = this.$$store.getState();
components = _this$$$store$getStat.components;
}
// Register a component only when `destroyOnUnmount` is `true`
// or component is not present in store
if (this.destroyOnUnmount || components.indexOf(this.componentProps.componentId) === -1) {
// Register component
this.addComponent(this.componentId, this.$timestamp);
var onQueryChange = function onQueryChange() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this.$emit.apply(_this, ['queryChange'].concat(args));
_this.$emit.apply(_this, ['query-change'].concat(args));
};
var onError = function onError(e) {
_this.$emit('error', e);
};
this.setQueryListener(this.componentId, onQueryChange, onError);
// Update props in store
this.setComponentProps(this.componentId, this.componentProps, options.componentType);
}
// if default query prop is defined and component is reactive component then register the internal component
if (options.internalComponent || this.componentProps.defaultQuery && options.componentType === componentTypes.reactiveComponent) {
this.internalComponent = getInternalComponentID(this.componentId);
}
// Register internal component
if (this.internalComponent && (this.destroyOnUnmount || components.indexOf(this.internalComponent) === -1)) {
this.addComponent(this.internalComponent, this.$timestamp);
this.setComponentProps(this.internalComponent, this.componentProps, options.componentType);
}
if (this.internalComponent) {
// Watch component after rendering the component to avoid the un-necessary calls
this.setReact(this.componentProps, false);
}
},
mounted: function mounted() {
if (this.internalComponent) {
// Watch component after rendering the component to avoid the un-necessary calls
this.setReact(this.componentProps, true);
}
},
beforeDestroy: function beforeDestroy() {
if (this.destroyOnUnmount) {
var registeredComponentsTimestamps = {};
if (this.$$store) {
var _this$$$store$getStat2 = this.$$store.getState();
registeredComponentsTimestamps = _this$$$store$getStat2.registeredComponentsTimestamps;
}
// Unregister components
if (registeredComponentsTimestamps[this.componentId] === this.$timestamp) {
this.removeComponent(this.componentId);
if (this.internalComponent) {
this.removeComponent(this.internalComponent);
}
}
}
},
watch: {
$attrs: {
deep: true,
handler: function handler(newVal) {
var _this2 = this;
var propsKeys = getValidPropsKeys(newVal);
checkSomePropChange(newVal, this.savedComponentProps, propsKeys, function () {
_this2.updateComponentProps(_this2.componentId, newVal, options.componentType);
_this2.updateComponentProps(_this2.internalComponent, newVal, options.componentType);
});
}
},
react: function react(newVal, oldVal) {
var _this3 = this;
checkPropChange(newVal, oldVal, function () {
return _this3.setReact(_this3.componentProps);
});
}
},
methods: {
setReact: function setReact(props, shouldExecute) {
var react = props.react,
executeInitialQuery = props.executeInitialQuery;
if (this.internalComponent) {
if (react) {
var newReact = pushToAndClause(react, this.internalComponent);
this.watchComponent(props.componentId, newReact, executeInitialQuery);
} else {
this.watchComponent(props.componentId, {
and: this.internalComponent
}, shouldExecute || executeInitialQuery);
}
} else {
this.watchComponent(props.componentId, react, shouldExecute || executeInitialQuery);
}
}
},
render: function render() {
return h(component, null, this.$slots);
}
};
};
var mapStateToProps = function mapStateToProps(state, props) {
return {
savedComponentProps: state.props[props.componentId]
};
};
var mapDispatchToProps = {
addComponent: addComponent,
removeComponent: removeComponent,
setQueryListener: setQueryListener,
watchComponent: watchComponent,
setComponentProps: setComponentProps,
updateComponentProps: updateComponentProps
};
var ComponentWrapper$1 = (function (component, options) {
if (options === void 0) {
options = {};
}
return connect(mapStateToProps, mapDispatchToProps)(ComponentWrapper(component, options));
});
export { ComponentWrapper$1 as C };