@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
274 lines (268 loc) • 10.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
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 _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
require('@appbaseio/vue-emotion');
require('polished');
var vueTypes = require('./vueTypes-adf43075.js');
require('@appbaseio/reactivecore/lib/utils/transform');
require('redux');
var index = require('./index-7ca9570e.js');
var ComponentWrapper = require('./ComponentWrapper-3bedbe57.js');
var PreferencesConsumer = require('./PreferencesConsumer-37cab7a0.js');
var Title = require('./Title-d513ac26.js');
var Container = require('./Container-1c05785a.js');
var FormControlList = require('./FormControlList-2c10e01a.js');
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var updateQuery = reactivecore.Actions.updateQuery,
setQueryOptions = reactivecore.Actions.setQueryOptions,
setCustomQuery = reactivecore.Actions.setCustomQuery;
var isEqual = reactivecore.helper.isEqual,
checkValueChange = reactivecore.helper.checkValueChange,
getClassName = reactivecore.helper.getClassName,
getOptionsFromQuery = reactivecore.helper.getOptionsFromQuery;
var MultiRange = {
name: 'MultiRange',
data: function data() {
this.state = {
currentValue: [],
showModal: false,
selectedValues: {}
};
this.type = 'range';
return this.state;
},
props: {
beforeValueChange: vueTypes.types.func,
className: VueTypes.string.def(''),
componentId: vueTypes.types.stringRequired,
compoundClause: vueTypes.types.compoundClause,
customQuery: vueTypes.types.func,
data: vueTypes.types.data,
dataField: vueTypes.types.stringRequired,
defaultValue: vueTypes.types.stringArray,
value: vueTypes.types.stringArray,
filterLabel: vueTypes.types.string,
innerClass: vueTypes.types.style,
react: vueTypes.types.react,
showFilter: VueTypes.bool.def(true),
showCheckbox: VueTypes.bool.def(true),
title: vueTypes.types.title,
URLParams: VueTypes.bool.def(false),
nestedField: vueTypes.types.string,
index: VueTypes.string,
endpoint: vueTypes.types.endpointConfig
},
methods: {
handleClick: function handleClick(e) {
var value = this.$props.value;
if (value === undefined) {
this.selectItem(e.target.value);
} else {
var values = index.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 = _rollupPluginBabelHelpers._extends({}, selectedValues, values);
}
} else if (selectedValues[item]) {
currentValue = currentValue.filter(function (value) {
return value.label !== item;
});
var _selectedValues = selectedValues,
del = _selectedValues[item],
selected = _rollupPluginBabelHelpers._objectWithoutPropertiesLoose(_selectedValues, [item].map(_rollupPluginBabelHelpers._toPropertyKey));
selectedValues = selected;
} else {
var _extends2;
var currentItems = props.data.filter(function (value) {
return item.indexOf(value.label) !== -1;
});
currentValue = [].concat(currentValue, currentItems);
selectedValues = _rollupPluginBabelHelpers._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));
index.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: constants.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 (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
this.updateQueryHandler(this.$data.currentValue, this.$props);
}
}
},
created: function created() {
// Set custom query in store
index.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 vue.createVNode(Container.Container, {
"class": this.$props.className
}, {
"default": function _default() {
return [_this2.$props.title && vue.createVNode(Title.Title, {
"class": getClassName(_this2.$props.innerClass, 'title')
}, {
"default": function _default() {
return [_this2.$props.title];
}
}), vue.createVNode(FormControlList.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 vue.createVNode("li", {
"key": item.label,
"class": "" + (selected ? 'active' : '')
}, [vue.createVNode(FormControlList.Checkbox, vue.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), vue.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.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(MultiRange), {
componentType: constants.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 = constants.componentTypes.multiRange;
exports.RangeConnected = RangeConnected;
exports.default = RangeConnected;