@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
268 lines (265 loc) • 9.99 kB
JavaScript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import _transformOn from '@vue/babel-helper-vue-transform-on';
import { a as _extends, b as _objectWithoutPropertiesLoose, c as _toPropertyKey } from './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, mergeProps, isVNode } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/vue-emotion';
import 'polished';
import { t as types } from './vueTypes-5d575822.js';
import '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { n as parseValueArray, j as updateCustomQuery, i as isQueryIdentical, c as connect } from './index-3af85a74.js';
import { C as ComponentWrapper } from './ComponentWrapper-90d42a29.js';
import { P as PreferencesConsumer } from './PreferencesConsumer-a2bd59db.js';
import { T as Title } from './Title-100fe896.js';
import { C as Container } from './Container-e2261542.js';
import { U as UL, C as Checkbox } from './FormControlList-968ff972.js';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var updateQuery = Actions.updateQuery,
setQueryOptions = Actions.setQueryOptions,
setCustomQuery = Actions.setCustomQuery;
var isEqual = helper.isEqual,
checkValueChange = helper.checkValueChange,
getClassName = helper.getClassName,
getOptionsFromQuery = helper.getOptionsFromQuery;
var MultiRange = {
name: 'MultiRange',
data: function data() {
this.state = {
currentValue: [],
showModal: false,
selectedValues: {}
};
this.type = 'range';
return this.state;
},
props: {
beforeValueChange: types.func,
className: VueTypes.string.def(''),
componentId: types.stringRequired,
compoundClause: types.compoundClause,
customQuery: types.func,
data: types.data,
dataField: types.stringRequired,
defaultValue: types.stringArray,
value: types.stringArray,
filterLabel: types.string,
innerClass: types.style,
react: types.react,
showFilter: VueTypes.bool.def(true),
showCheckbox: VueTypes.bool.def(true),
title: types.title,
URLParams: VueTypes.bool.def(false),
nestedField: types.string,
index: VueTypes.string,
endpoint: types.endpointConfig
},
methods: {
handleClick: function handleClick(e) {
var value = this.$props.value;
if (value === undefined) {
this.selectItem(e.target.value);
} else {
var values = parseValueArray(this.selectedValues, e.target.value);
this.$emit('change', values);
}
},
selectItem: function selectItem(item, isDefaultValue, props, reset) {
var _this = this;
if (isDefaultValue === void 0) {
isDefaultValue = false;
}
if (props === void 0) {
props = this.$props;
}
if (reset === void 0) {
reset = false;
}
var currentValue = this.currentValue,
selectedValues = this.selectedValues;
if (!item) {
currentValue = [];
selectedValues = {};
} else if (isDefaultValue) {
currentValue = MultiRange.parseValue(item, props);
var values = {};
currentValue.forEach(function (value) {
values[[value.label]] = true;
});
if (reset) {
selectedValues = values;
} else {
selectedValues = _extends({}, selectedValues, values);
}
} else if (selectedValues[item]) {
currentValue = currentValue.filter(function (value) {
return value.label !== item;
});
var _selectedValues = selectedValues,
del = _selectedValues[item],
selected = _objectWithoutPropertiesLoose(_selectedValues, [item].map(_toPropertyKey));
selectedValues = selected;
} else {
var _extends2;
var currentItems = props.data.filter(function (value) {
return item.indexOf(value.label) !== -1;
});
currentValue = [].concat(currentValue, currentItems);
selectedValues = _extends({}, selectedValues, (_extends2 = {}, _extends2[typeof item === 'object' ? item.label : item] = true, _extends2));
}
var performUpdate = function performUpdate() {
_this.currentValue = currentValue;
_this.selectedValues = selectedValues;
_this.updateQueryHandler(currentValue, props);
_this.$emit('valueChange', Object.keys(selectedValues));
_this.$emit('value-change', Object.keys(selectedValues));
};
checkValueChange(props.componentId, currentValue, props.beforeValueChange, performUpdate);
},
updateQueryHandler: function updateQueryHandler(value, props) {
var customQuery = props.customQuery;
var query = MultiRange.defaultQuery(value, props);
if (customQuery) {
var _ref = customQuery(value, props) || {};
query = _ref.query;
var customQueryOptions = getOptionsFromQuery(customQuery(value, props));
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
this.setQueryOptions(props.componentId, customQueryOptions, false);
}
this.updateQuery({
componentId: props.componentId,
query: query,
value: value,
label: props.filterLabel,
showFilter: props.showFilter,
URLParams: props.URLParams,
componentType: componentTypes.multiRange
});
}
},
watch: {
dataField: function dataField() {
this.updateQueryHandler(this.$data.currentValue, this.$props);
},
defaultValue: function defaultValue(newVal) {
this.selectItem(newVal, true, undefined, true);
},
value: function value(newVal, oldVal) {
if (!isEqual(newVal, oldVal)) {
this.selectItem(newVal, true, undefined, true);
}
},
selectedValue: function selectedValue(newVal) {
if (!isEqual(this.$data.currentValue, newVal)) {
var processSelectedValues = newVal ? newVal.map(function (item) {
if (typeof item === 'object' && 'label' in item) {
return item.label;
}
return item;
}) : null;
this.selectItem(processSelectedValues, true, undefined, true);
}
},
customQuery: function customQuery(newVal, oldVal) {
if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
this.updateQueryHandler(this.$data.currentValue, this.$props);
}
}
},
created: function created() {
// Set custom query in store
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
if (this.selectedValue) {
this.selectItem(this.selectedValue, true);
} else if (this.$props.value) {
this.selectItem(this.$props.value, true);
} else if (this.$props.defaultValue) {
this.selectItem(this.$props.defaultValue, true);
}
},
render: function render() {
var _slot;
var _this2 = this;
return createVNode(Container, {
"class": this.$props.className
}, {
"default": function _default() {
return [_this2.$props.title && createVNode(Title, {
"class": getClassName(_this2.$props.innerClass, 'title')
}, {
"default": function _default() {
return [_this2.$props.title];
}
}), createVNode(UL, {
"class": getClassName(_this2.$props.innerClass, 'list')
}, _isSlot(_slot = _this2.$props.data.map(function (item) {
var selected = !!_this2.$data.currentValue && _this2.$data.currentValue.label === item.label;
return createVNode("li", {
"key": item.label,
"class": "" + (selected ? 'active' : '')
}, [createVNode(Checkbox, mergeProps(_transformOn({
click: _this2.handleClick
}), {
"class": getClassName(_this2.$props.innerClass, 'checkbox'),
"id": _this2.$props.componentId + "-" + item.label,
"name": _this2.$props.componentId,
"value": item.label,
"type": "Checkbox",
"show": _this2.$props.showCheckbox,
"checked": _this2.selectedValues[item.label]
}), null), createVNode("label", {
"class": getClassName(_this2.$props.innerClass, 'label'),
"for": _this2.$props.componentId + "-" + item.label
}, [item.label])]);
})) ? _slot : {
"default": function _default() {
return [_slot];
}
})];
}
});
}
};
MultiRange.parseValue = function (value, props) {
return value ? props.data.filter(function (item) {
return value.includes(item.label);
}) : null;
};
MultiRange.defaultQuery = function (value, props) {
return {
query: {
queryFormat: props.queryFormat,
dataField: props.dataField,
value: value,
showMissing: props.showMissing
}
};
};
var mapStateToProps = function mapStateToProps(state, props) {
return {
selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
componentProps: state.props[props.componentId]
};
};
var mapDispatchtoProps = {
updateQuery: updateQuery,
setQueryOptions: setQueryOptions,
setCustomQuery: setCustomQuery
};
var RangeConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(MultiRange), {
componentType: componentTypes.multiRange
}));
RangeConnected.name = MultiRange.name;
RangeConnected.defaultQuery = MultiRange.defaultQuery;
RangeConnected.parseValue = MultiRange.parseValue;
RangeConnected.hasInternalComponent = MultiRange.hasInternalComponent;
RangeConnected.install = function (Vue) {
Vue.component(RangeConnected.name, RangeConnected);
};
// Add componentType for SSR
RangeConnected.componentType = componentTypes.multiRange;
export default RangeConnected;
export { RangeConnected };