@appbaseio/reactivesearch-vue
Version:
A Vue UI components library for building search experiences
305 lines (302 loc) • 10.6 kB
JavaScript
import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/reactivecore/lib/utils/helper';
import '@appbaseio/vue-emotion';
import '@emotion/css';
import 'polished';
import { B as Button, t as toggleButtons } from './Button-8178e39a.js';
import { t as types } from './vueTypes-5d575822.js';
import '@appbaseio/reactivecore/lib/utils/transform';
import 'redux';
import { 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';
var updateQuery = Actions.updateQuery,
setQueryOptions = Actions.setQueryOptions,
setCustomQuery = Actions.setCustomQuery;
var isEqual = helper.isEqual,
checkValueChange = helper.checkValueChange,
getClassName = helper.getClassName,
getOptionsFromQuery = helper.getOptionsFromQuery,
handleA11yAction = helper.handleA11yAction;
var ToggleButton = {
name: 'ToggleButton',
props: {
componentId: types.stringRequired,
compoundClause: types.compoundClause,
customQuery: types.func,
data: types.data,
dataField: types.stringRequired,
defaultValue: types.any,
value: types.stringOrArray,
filterLabel: types.string,
nestedField: types.string,
innerClass: types.style,
multiSelect: VueTypes.bool,
react: types.react,
showFilter: VueTypes.bool,
title: types.title,
URLParams: VueTypes.bool,
renderItem: types.func,
index: VueTypes.string,
enableStrictSelection: VueTypes.bool,
endpoint: types.endpointConfig
},
data: function data() {
this.__state = {
currentValue: []
};
return this.__state;
},
created: function created() {
// Set custom query in store
updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
var props = this.$props;
var hasMounted = false;
var value = this.selectedValue || props.value || props.defaultValue || [];
var currentValue = ToggleButton.parseValue(value, props);
this.setValue(currentValue);
if (this.$data.currentValue.length) {
this.handleToggle(this.$data.currentValue, true, props, hasMounted);
}
},
watch: {
defaultValue: function defaultValue(newVal) {
this.setValue(ToggleButton.parseValue(newVal, this.$props));
},
dataField: function dataField() {
this.updateQuery(this.$data.currentValue, this.$props);
},
nestedField: function nestedField() {
this.updateQuery(this.$data.currentValue, this.$props);
},
value: function value(newVal, oldVal) {
if (!isEqual(newVal, oldVal)) {
this.handleToggle(newVal, true, this.$props);
}
},
selectedValue: function selectedValue(newVal, oldVal) {
if (this.$props.multiSelect) {
// for multiselect selectedValue will be an array
if (!isEqual(this.$data.currentValue, newVal) && !isEqual(oldVal, newVal)) {
this.handleToggle(newVal || [], true, this.$props);
}
} else {
// else selectedValue will be a string
var currentValue = this.$data.currentValue[0] ? this.$data.currentValue[0].value : null;
if (!isEqual(currentValue, this.selectedValue) && !isEqual(oldVal, this.selectedValue)) {
this.handleToggle(this.selectedValue || [], true, this.$props);
}
}
},
customQuery: function customQuery(newVal, oldVal) {
if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
this.updateQuery(this.$data.currentValue, this.$props);
}
}
},
methods: {
handleToggle: function handleToggle(value, isDefaultValue, props, hasMounted) {
if (isDefaultValue === void 0) {
isDefaultValue = false;
}
if (props === void 0) {
props = this.$props;
}
if (hasMounted === void 0) {
hasMounted = true;
}
var currentValue = this.$data.currentValue;
var toggleValue = value;
var finalValue = [];
if (isDefaultValue) {
finalValue = ToggleButton.parseValue(toggleValue, props);
} else if (this.$props.multiSelect) {
finalValue = currentValue.some(function (item) {
return item.value === toggleValue.value;
}) ? currentValue.filter(function (item) {
return item.value !== toggleValue.value;
}) : currentValue.concat(toggleValue);
} else {
finalValue = currentValue.some(function (item) {
return item.value === toggleValue.value;
}) ? [] : [toggleValue];
}
this.setValue(finalValue, props, hasMounted);
},
setReact: function setReact(props) {
if (props.react) {
this.watchComponent(props.componentId, props.react);
}
},
setValue: function setValue(value, props, hasMounted) {
var _this = this;
if (props === void 0) {
props = this.$props;
}
if (hasMounted === void 0) {
hasMounted = true;
}
var performUpdate = function performUpdate() {
var handleUpdates = function handleUpdates() {
_this.updateQuery(value, props);
_this.$emit('valueChange', value);
_this.$emit('value-change', value);
};
if (hasMounted) {
_this.currentValue = value;
handleUpdates();
} else {
handleUpdates();
}
};
checkValueChange(props.componentId, props.multiSelect ? value : value[0], props.beforeValueChange, performUpdate);
},
updateQuery: function updateQuery(value, props) {
var filterValue = value;
if (!props.multiSelect) {
filterValue = value[0] ? value[0].value : null;
}
var customQuery = props.customQuery;
var query = ToggleButton.defaultQuery(value, props);
if (customQuery) {
var _ref = customQuery(value, props) || {};
query = _ref.query;
this.setQueryOptions(props.componentId, getOptionsFromQuery(customQuery(value, props)), false);
updateCustomQuery(props.componentId, this.setCustomQuery, props, value);
}
this.updateQueryHandler({
componentId: props.componentId,
query: query,
value: filterValue,
// sets a string in URL not array
label: props.filterLabel,
showFilter: props.showFilter,
URLParams: props.URLParams,
componentType: componentTypes.toggleButton
});
},
handleClick: function handleClick(item) {
var _this$$props = this.$props,
enableStrictSelection = _this$$props.enableStrictSelection,
multiSelect = _this$$props.multiSelect;
if (enableStrictSelection && !multiSelect && this.$data.currentValue.find(function (stateItem) {
return isEqual(item, stateItem);
})) {
return false;
}
var value = this.$props.value;
if (value === undefined) {
this.handleToggle(item);
} else {
this.$emit('change', item.value);
}
return true;
},
renderButton: function renderButton(item) {
var _this2 = this;
var renderItem = this.$slots.renderItem || this.renderItem;
var isSelected = this.$data.currentValue.some(function (value) {
return value.value === item.value;
});
return renderItem ? renderItem({
item: item,
isSelected: isSelected,
handleClick: function handleClick() {
return _this2.handleClick(item);
}
}) : createVNode(Button, {
"class": getClassName(this.$props.innerClass, 'button') + " " + (isSelected ? 'active' : ''),
"onClick": function onClick() {
return _this2.handleClick(item);
},
"key": item.value,
"primary": isSelected,
"large": true,
"tabIndex": isSelected ? '-1' : '0',
"onKeypress": function onKeypress(e) {
return handleA11yAction(e, function () {
return _this2.handleClick(item);
});
}
}, {
"default": function _default() {
return [item.label];
}
});
}
},
render: function render() {
var _this3 = this;
return createVNode(Container, {
"class": toggleButtons
}, {
"default": function _default() {
return [_this3.$props.title && createVNode(Title, {
"class": getClassName(_this3.$props.innerClass, 'title')
}, {
"default": function _default() {
return [_this3.$props.title];
}
}), _this3.$props.data.map(function (item) {
return _this3.renderButton(item);
})];
}
});
}
};
ToggleButton.parseValue = function (value, props) {
if (Array.isArray(value)) {
if (typeof value[0] === 'string') {
return props.data.filter(function (item) {
return value.includes(item.value);
});
}
return value;
}
return props.data.filter(function (item) {
return item.value === value;
});
};
ToggleButton.defaultQuery = function (value, props) {
return {
query: {
queryFormat: props.queryFormat,
dataField: props.dataField,
value: value,
nestedField: props.nestedField,
selectAllLabel: props.selectAllLabel,
showMissing: props.showMissing,
multiSelect: props.multiSelect
}
};
};
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 = {
updateQueryHandler: updateQuery,
setQueryOptions: setQueryOptions,
setCustomQuery: setCustomQuery
};
var TBConnected = PreferencesConsumer(ComponentWrapper(connect(mapStateToProps, mapDispatchtoProps)(ToggleButton), {
componentType: componentTypes.toggleButton
}));
TBConnected.parseValue = ToggleButton.parseValue;
TBConnected.defaultQuery = ToggleButton.defaultQuery;
TBConnected.name = ToggleButton.name;
TBConnected.install = function (Vue) {
Vue.component(TBConnected.name, TBConnected);
};
// Add componentType for SSR
TBConnected.componentType = componentTypes.toggleButton;
export default TBConnected;
export { TBConnected };