@appbaseio/reactivesearch-vue/dist/cjs/ToggleButton.js

A Vue UI components library for building search experiences

'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');
require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
require('@appbaseio/reactivecore/lib/utils/helper');
require('@appbaseio/vue-emotion');
require('@emotion/css');
require('polished');
var Button = require('./Button-7aee17e3.js');
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 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,
  handleA11yAction = reactivecore.helper.handleA11yAction;
var ToggleButton = {
  name: 'ToggleButton',
  props: {
    componentId: vueTypes.types.stringRequired,
    compoundClause: vueTypes.types.compoundClause,
    customQuery: vueTypes.types.func,
    data: vueTypes.types.data,
    dataField: vueTypes.types.stringRequired,
    defaultValue: vueTypes.types.any,
    value: vueTypes.types.stringOrArray,
    filterLabel: vueTypes.types.string,
    nestedField: vueTypes.types.string,
    innerClass: vueTypes.types.style,
    multiSelect: VueTypes.bool,
    react: vueTypes.types.react,
    showFilter: VueTypes.bool,
    title: vueTypes.types.title,
    URLParams: VueTypes.bool,
    renderItem: vueTypes.types.func,
    index: VueTypes.string,
    enableStrictSelection: VueTypes.bool,
    endpoint: vueTypes.types.endpointConfig
  },
  data: function data() {
    this.__state = {
      currentValue: []
    };
    return this.__state;
  },
  created: function created() {
    // Set custom query in store
    index.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 (!index.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);
        index.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: constants.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);
        }
      }) : vue.createVNode(Button.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 vue.createVNode(Container.Container, {
      "class": Button.toggleButtons
    }, {
      "default": function _default() {
        return [_this3.$props.title && vue.createVNode(Title.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.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, mapDispatchtoProps)(ToggleButton), {
  componentType: constants.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 = constants.componentTypes.toggleButton;

exports.TBConnected = TBConnected;
exports.default = TBConnected;