@appbaseio/reactivesearch-vue/dist/cjs/RangeSlider.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/vue-emotion');
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 VueSlider = _interopDefault(require('vue-slider-component/dist-css/vue-slider-component.umd.min.js'));
require('vue-slider-component/dist-css/vue-slider-component.css');
require('vue-slider-component/theme/default.css');
var ssr = require('./ssr-15d936a0.js');

var updateQuery = reactivecore.Actions.updateQuery,
  setQueryOptions = reactivecore.Actions.setQueryOptions,
  setCustomQuery = reactivecore.Actions.setCustomQuery;
var checkValueChange = reactivecore.helper.checkValueChange,
  getClassName = reactivecore.helper.getClassName,
  getOptionsFromQuery = reactivecore.helper.getOptionsFromQuery,
  isEqual = reactivecore.helper.isEqual;
var RangeSlider = {
  name: 'RangeSlider',
  components: ssr.getComponents(),
  inject: {
    theme: {
      from: 'theme_reactivesearch'
    }
  },
  data: function data() {
    var state = {
      currentValue: this.$props.range ? [this.$props.range.start, this.$props.range.end] : [],
      stats: []
    };
    return state;
  },
  props: {
    beforeValueChange: vueTypes.types.func,
    className: VueTypes.string.def(''),
    range: VueTypes.shape({
      start: VueTypes.integer.def(0),
      end: VueTypes.integer.def(10)
    }),
    rangeLabels: vueTypes.types.rangeLabels,
    componentId: vueTypes.types.stringRequired,
    compoundClause: vueTypes.types.compoundClause,
    customQuery: vueTypes.types.func,
    data: vueTypes.types.data,
    dataField: vueTypes.types.stringRequired,
    defaultValue: vueTypes.types.range,
    value: vueTypes.types.range,
    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),
    sliderOptions: VueTypes.object.def({}),
    nestedField: vueTypes.types.string,
    index: VueTypes.string,
    endpoint: vueTypes.types.endpointConfig
  },
  methods: {
    handleSliderChange: function handleSliderChange(values) {
      var value = this.$props.value;
      if (value === undefined) {
        this.handleChange(values);
      } else {
        this.$emit('change', {
          start: values[0],
          end: values[1]
        });
      }
    },
    handleSlider: function handleSlider() {
      var sliderValues = this.$refs.slider.getValue();
      this.handleSliderChange(sliderValues);
    },
    handleChange: function handleChange(currentValue, props) {
      var _this = this;
      if (props === void 0) {
        props = this.$props;
      }
      var performUpdate = function performUpdate() {
        _this.currentValue = currentValue;
        _this.updateQueryHandler([currentValue[0], currentValue[1]], props);
        _this.$emit('valueChange', {
          start: currentValue[0],
          end: currentValue[1]
        });
        _this.$emit('value-change', {
          start: currentValue[0],
          end: currentValue[1]
        });
      };
      checkValueChange(props.componentId, {
        start: currentValue[0],
        end: currentValue[1]
      }, props.beforeValueChange, performUpdate);
    },
    updateQueryHandler: function updateQueryHandler(value, props) {
      var customQuery = props.customQuery;
      var query = RangeSlider.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);
      }
      var showFilter = props.showFilter,
        _props$range = props.range,
        start = _props$range.start,
        end = _props$range.end;
      var currentStart = value[0],
        currentEnd = value[1];
      // check if the slider is at its initial position
      var isInitialValue = currentStart === start && currentEnd === end;
      this.updateQuery({
        componentId: props.componentId,
        query: query,
        value: value,
        label: props.filterLabel,
        showFilter: showFilter && !isInitialValue,
        URLParams: props.URLParams,
        componentType: constants.componentTypes.rangeSlider
      });
    }
  },
  watch: {
    defaultValue: function defaultValue(newVal) {
      this.handleChange(RangeSlider.parseValue(newVal, this.$props));
    },
    value: function value(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
      }
    },
    selectedValue: function selectedValue(newVal) {
      if (!isEqual(this.$data.currentValue, newVal)) {
        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
        this.$emit('change', newVal);
      }
    },
    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() {
    if (!this.$props.range) {
      console.error('%crange is not defined. Read more about this at https://opensource.appbase.io/reactive-manual/vue/range-components/rangeslider.html#props', 'font-size: 12.5px;');
    }

    // Set custom query in store
    index.updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
    var _this$$props = this.$props,
      value = _this$$props.value,
      defaultValue = _this$$props.defaultValue;
    var selectedValue = this.selectedValue;
    if (this.$props.range) {
      if (Array.isArray(selectedValue)) {
        this.handleChange(selectedValue);
      } else if (selectedValue) {
        this.handleChange(RangeSlider.parseValue(selectedValue, this.$props));
      } else if (value) {
        this.handleChange(RangeSlider.parseValue(value, this.$props));
      } else if (defaultValue) {
        this.handleChange(RangeSlider.parseValue(defaultValue, this.$props));
      }
    }
  },
  render: function render() {
    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];
          }
        }), _this2.$props.range ? vue.createVNode(ssr.NoSSR, null, {
          "default": function _default() {
            return [vue.createVNode(ssr.Slider, {
              "class": getClassName(_this2.$props.innerClass, 'slider')
            }, {
              "default": function _default() {
                return [vue.createVNode(VueSlider, vue.mergeProps({
                  "ref": "slider",
                  "modelValue": _this2.currentValue,
                  "min": _this2.$props.range.start,
                  "max": _this2.$props.range.end,
                  "dotSize": 20,
                  "height": 4,
                  "enable-cross": false,
                  "onDrag-end": _this2.handleSlider,
                  "tooltip": "always"
                }, _this2.$props.sliderOptions), null), _this2.$props.rangeLabels && vue.createVNode("div", {
                  "class": "label-container"
                }, [vue.createVNode("label", {
                  "class": getClassName(_this2.$props.innerClass, 'label') || 'range-label-left'
                }, [_this2.$props.rangeLabels.start]), vue.createVNode("label", {
                  "class": getClassName(_this2.$props.innerClass, 'label') || 'range-label-right'
                }, [_this2.$props.rangeLabels.end])])];
              }
            })];
          }
        }) : null];
      }
    });
  }
};
RangeSlider.defaultQuery = function (value, props) {
  return {
    query: {
      queryFormat: props.queryFormat,
      dataField: props.dataField,
      value: value,
      showMissing: props.showMissing
    }
  };
};
RangeSlider.parseValue = function (value, props) {
  if (value) {
    return Array.isArray(value) ? value : [value.start, value.end];
  }
  if (props.range) {
    return [props.range.start, props.range.end];
  }
  return [];
};
var mapStateToProps = function mapStateToProps(state, props) {
  return {
    options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
    : [],
    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)(RangeSlider), {
  componentType: constants.componentTypes.rangeSlider
}));
RangeConnected.name = RangeSlider.name;
RangeConnected.defaultQuery = RangeSlider.defaultQuery;
RangeConnected.parseValue = RangeSlider.parseValue;
RangeConnected.hasInternalComponent = RangeSlider.hasInternalComponent;
RangeConnected.install = function (Vue) {
  Vue.component(RangeConnected.name, RangeConnected);
};

// Add componentType for SSR
RangeConnected.componentType = constants.componentTypes.rangeSlider;

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