@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
250 lines (247 loc) • 8.79 kB
JavaScript
import { Actions, helper } from '@appbaseio/reactivecore';
import '@appbaseio/reactivecore/lib/utils/constants';
import { a as _extends } from './_rollupPluginBabelHelpers-5e8399d7.js';
import VueTypes from 'vue-types';
import { isInternalComponent } from '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { c as connect } from './index-3af85a74.js';
var setSearchState = Actions.setSearchState;
var getSearchState = helper.getSearchState;
var defaultKeys = ['hits', 'value', 'aggregations', 'error'];
var filterProps = function filterProps(props) {
if (props === void 0) {
props = {};
}
return _extends({}, props, {
props: props.componentProps
});
};
var convertArrayLike = function convertArrayLike(arrayLike) {
var arr = [];
var i = 0;
while (arrayLike[i]) {
arr[i] = arrayLike[i];
i += 1;
}
return arr;
};
var filterByComponentIds = function filterByComponentIds(state, props) {
if (props === void 0) {
props = {};
}
var _props = props,
componentIds = _props.componentIds,
excludeComponentIds = _props.excludeComponentIds;
if (componentIds) {
if (typeof componentIds === 'string') {
var _ref;
return _ref = {}, _ref[componentIds] = state[componentIds], _ref;
}
if (Array.isArray(componentIds) && componentIds.length) {
var _filteredState = {};
componentIds.forEach(function (componentId) {
_filteredState[componentId] = state[componentId];
});
return _filteredState;
}
}
var filteredState = {};
if (!props.includeInternalComponents) {
Object.keys(state).forEach(function (componentId) {
if (componentId.endsWith('internal') || componentId.endsWith('active') || componentId.endsWith('timestamp')) {
return;
}
filteredState[componentId] = state[componentId];
});
} else {
filteredState = state;
}
// Apply exclude component ids
if (excludeComponentIds) {
if (typeof excludeComponentIds === 'string') {
Object.keys(state).forEach(function (componentId) {
if (componentId === excludeComponentIds) {
// Delete state
delete filteredState[componentId];
}
});
}
if (Array.isArray(excludeComponentIds) && excludeComponentIds.length) {
Object.keys(state).forEach(function (componentId) {
if (excludeComponentIds.includes(componentId)) {
// Delete state
delete filteredState[componentId];
}
});
}
}
return filteredState;
};
var filterByKeys = function filterByKeys(state, allowedKeys) {
return Object.keys(state).reduce(function (components, componentId) {
var _extends2;
return _extends({}, components, (_extends2 = {}, _extends2[componentId] = Object.keys(state[componentId]).filter(function (key) {
return allowedKeys.includes(key);
}).reduce(function (obj, key) {
// eslint-disable-next-line
obj[key] = state[componentId][key];
return obj;
}, {}), _extends2));
}, {});
};
var StateProvider = {
name: 'StateProvider',
props: {
onChange: VueTypes.func,
componentIds: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
includeKeys: VueTypes.arrayOf(VueTypes.string).def(defaultKeys),
strict: VueTypes.bool.def(true),
includeInternalComponents: VueTypes.bool.def(false),
excludeComponentIds: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)])
},
data: function data() {
this.__state = {
searchState: null
};
return this.__state;
},
created: function created() {
this.searchState = filterByKeys(getSearchState(filterProps(this.searchStateProps)), this.includeKeys);
},
computed: {
searchStateProps: function searchStateProps() {
return {
selectedValues: this.selectedValues || {},
queryLog: this.queryLog || {},
dependencyTree: this.dependencyTree || {},
componentProps: this.componentProps || {},
hits: this.hits || {},
aggregations: this.aggregations || {},
isLoading: this.isLoading || {},
error: this.error || {},
promotedResults: this.promotedResults || {},
rawData: this.rawData || {}
};
}
},
watch: {
searchState: function searchState(newVal, oldVal) {
if (oldVal != null && this.isStateChanged(newVal, oldVal)) {
this.$emit('change', oldVal, newVal);
}
},
selectedValues: function selectedValues(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
queryLog: function queryLog(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
dependencyTree: function dependencyTree(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
componentProps: function componentProps(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
hits: function hits(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
aggregations: function aggregations(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
isLoading: function isLoading(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
error: function error(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
componentIds: function componentIds(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
excludeComponentIds: function excludeComponentIds(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
includeKeys: function includeKeys(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
promotedResults: function promotedResults(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
rawData: function rawData(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
customData: function customData(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
},
settings: function settings(newVal, oldVal) {
this.calculateSearchState(newVal, oldVal);
}
},
methods: {
isStateChanged: function isStateChanged(prevState, nextState) {
return JSON.stringify(nextState) !== JSON.stringify(prevState);
},
calculateSearchState: function calculateSearchState(newVal, oldVal) {
if (this.isStateChanged(newVal, oldVal)) {
this.searchState = filterByKeys(getSearchState(filterProps(this.searchStateProps)), this.includeKeys);
}
},
setSearchState: function setSearchState(valuesMap) {
var _this = this;
if (valuesMap === void 0) {
valuesMap = {};
}
var components = this.components;
var computedValuesMap = {};
convertArrayLike(components).filter(function (component) {
return !isInternalComponent(component);
}).forEach(function (component) {
if (component in valuesMap) {
computedValuesMap[component] = {
value: valuesMap[component],
componentProps: _this.componentProps[component]
};
} else {
computedValuesMap[component] = {
value: null,
componentProps: _this.componentProps[component]
};
}
});
this.setSearchStateFn(computedValuesMap);
}
},
render: function render() {
var searchState = this.searchState;
var dom = this.$slots["default"];
return dom ? dom({
searchState: searchState,
setSearchState: this.setSearchState
}) : null;
}
};
var mapStateToProps = function mapStateToProps(state, props) {
return {
selectedValues: filterByComponentIds(state.selectedValues, props),
queryLog: filterByComponentIds(state.queryLog, props),
dependencyTree: filterByComponentIds(state.dependencyTree, props),
componentProps: filterByComponentIds(state.props, props),
hits: filterByComponentIds(state.hits, props),
aggregations: filterByComponentIds(state.aggregations, props),
isLoading: filterByComponentIds(state.isLoading, props),
error: filterByComponentIds(state.error, props),
promotedResults: filterByComponentIds(state.promotedResults, props),
customData: filterByComponentIds(state.customData, props),
settings: filterByComponentIds(state.settings, props),
rawData: filterByComponentIds(state.rawData, props),
components: state.components
};
};
var mapDispatchtoProps = {
setSearchStateFn: setSearchState
};
var StateProviderConnected = connect(mapStateToProps, mapDispatchtoProps)(StateProvider);
StateProviderConnected.name = StateProvider.name;
StateProviderConnected.install = function (Vue) {
Vue.component(StateProviderConnected.name, StateProviderConnected);
};
export default StateProviderConnected;