@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
187 lines (180 loc) • 7.58 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var reactivecore = require('@appbaseio/reactivecore');
var constants = require('@appbaseio/reactivecore/lib/utils/constants');
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
var transform = require('@appbaseio/reactivecore/lib/utils/transform');
var index = require('./index-7ca9570e.js');
var addComponent = reactivecore.Actions.addComponent,
removeComponent = reactivecore.Actions.removeComponent,
watchComponent = reactivecore.Actions.watchComponent,
setQueryListener = reactivecore.Actions.setQueryListener,
setComponentProps = reactivecore.Actions.setComponentProps,
updateComponentProps = reactivecore.Actions.updateComponentProps;
var pushToAndClause = reactivecore.helper.pushToAndClause,
checkPropChange = reactivecore.helper.checkPropChange,
checkSomePropChange = reactivecore.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 = _rollupPluginBabelHelpers._extends({}, this.$attrs);
// handle kebab case for props
var parsedProps = {};
Object.keys(componentProps).forEach(function (key) {
parsedProps[index.getCamelCase(key)] = componentProps[key];
});
if (options.componentType === constants.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 === constants.componentTypes.reactiveComponent) {
this.internalComponent = transform.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 = index.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 vue.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 index.connect(mapStateToProps, mapDispatchToProps)(ComponentWrapper(component, options));
});
exports.ComponentWrapper = ComponentWrapper$1;