@appbaseio/reactivesearch-vue/dist/cjs/SingleRange.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');
var _transformOn = _interopDefault(require('@vue/babel-helper-vue-transform-on'));
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 SingleRange = {
  name: 'SingleRange',
  data: function data() {
    this.__state = {
      currentValue: null
    };
    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.string,
    value: vueTypes.types.value,
    filterLabel: vueTypes.types.string,
    innerClass: vueTypes.types.style,
    react: vueTypes.types.react,
    showFilter: VueTypes.bool.def(true),
    showRadio: VueTypes.bool.def(true),
    title: vueTypes.types.title,
    URLParams: VueTypes.bool.def(false),
    nestedField: vueTypes.types.string,
    index: VueTypes.string,
    endpoint: vueTypes.types.endpointConfig
  },
  created: function created() {
    // Set custom query in store
    index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
    if (this.selectedValue) {
      this.setValue(this.selectedValue);
    } else if (this.$props.value) {
      this.setValue(this.$props.value);
    } else if (this.$props.defaultValue) {
      this.setValue(this.$props.defaultValue);
    }
  },
  watch: {
    dataField: function dataField() {
      this.updateQueryHandler(this.$data.currentValue, this.$props);
    },
    defaultValue: function defaultValue(newVal) {
      this.setValue(newVal);
    },
    value: function value(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.setValue(newVal);
      }
    },
    selectedValue: function selectedValue(newVal) {
      if (!isEqual(this.$data.currentValue, newVal)) {
        this.setValue(newVal);
      }
    },
    customQuery: function customQuery(newVal, oldVal) {
      if (!index.isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
        this.updateQueryHandler(this.$data.currentValue, this.$props);
      }
    }
  },
  render: function render() {
    var _slot;
    var _this = this;
    return vue.createVNode(Container.Container, {
      "class": this.$props.className
    }, {
      "default": function _default() {
        return [_this.$props.title && vue.createVNode(Title.Title, {
          "class": getClassName(_this.$props.innerClass, 'title')
        }, {
          "default": function _default() {
            return [_this.$props.title];
          }
        }), vue.createVNode(FormControlList.UL, {
          "class": getClassName(_this.$props.innerClass, 'list')
        }, _isSlot(_slot = _this.$props.data.map(function (item) {
          var selected = !!_this.$data.currentValue && _this.$data.currentValue.label === item.label;
          return vue.createVNode("li", {
            "key": item.label,
            "class": "" + (selected ? 'active' : '')
          }, [vue.createVNode(FormControlList.Radio, vue.mergeProps(_transformOn({
            change: _this.handleChange
          }), {
            "class": getClassName(_this.$props.innerClass, 'radio'),
            "id": _this.$props.componentId + "-" + item.label,
            "name": _this.$props.componentId,
            "value": item.label,
            "type": "radio",
            "checked": selected,
            "show": _this.$props.showRadio
          }), null), vue.createVNode("label", {
            "class": getClassName(_this.$props.innerClass, 'label'),
            "for": _this.$props.componentId + "-" + item.label
          }, [item.label])]);
        })) ? _slot : {
          "default": function _default() {
            return [_slot];
          }
        })];
      }
    });
  },
  methods: {
    setValue: function setValue(value, props) {
      var _this2 = this;
      if (props === void 0) {
        props = this.$props;
      }
      var currentValue = typeof value === 'string' ? SingleRange.parseValue(value, props) : value;
      var performUpdate = function performUpdate() {
        _this2.currentValue = currentValue;
        _this2.updateQueryHandler(currentValue, props);
        _this2.$emit('valueChange', currentValue);
        _this2.$emit('value-change', currentValue);
      };
      checkValueChange(props.componentId, currentValue, props.beforeValueChange, performUpdate);
    },
    updateQueryHandler: function updateQueryHandler(value, props) {
      var customQuery = props.customQuery;
      var query = SingleRange.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.singleRange
      });
    },
    handleChange: function handleChange(e) {
      var value = this.$props.value;
      if (value === undefined) {
        this.setValue(e.target.value);
      } else {
        this.$emit('change', e.target.value);
      }
    }
  }
};
SingleRange.parseValue = function (value, props) {
  return props.data.find(function (item) {
    return item.label === value;
  }) || null;
};
SingleRange.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)(SingleRange), {
  componentType: constants.componentTypes.singleRange
}));
RangeConnected.name = SingleRange.name;
RangeConnected.defaultQuery = SingleRange.defaultQuery;
RangeConnected.parseValue = SingleRange.parseValue;
RangeConnected.hasInternalComponent = SingleRange.hasInternalComponent;
RangeConnected.install = function (Vue) {
  Vue.component(RangeConnected.name, RangeConnected);
};
// Add componentType for SSR
RangeConnected.componentType = constants.componentTypes.singleRange;

exports.RangeConnected = RangeConnected;
exports.default = RangeConnected;