@appbaseio/reactivesearch-vue/dist/es/DynamicRangeSlider.js

A Vue UI components library for building search experiences

import { Actions, helper } from '@appbaseio/reactivecore';
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
import './_rollupPluginBabelHelpers-5e8399d7.js';
import { createVNode, mergeProps } from 'vue';
import VueTypes from 'vue-types';
import '@appbaseio/vue-emotion';
import { t as types } from './vueTypes-5d575822.js';
import 'redux';
import { j as updateCustomQuery, d as getValidPropsKeys, i as isQueryIdentical, c as connect } from './index-3af85a74.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';
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js';
import 'vue-slider-component/dist-css/vue-slider-component.css';
import 'vue-slider-component/theme/default.css';
import { g as getComponents, N as NoSSR, S as Slider } from './ssr-40133887.js';

var addComponent = Actions.addComponent,
  removeComponent = Actions.removeComponent,
  watchComponent = Actions.watchComponent,
  updateQuery = Actions.updateQuery,
  setQueryListener = Actions.setQueryListener,
  setQueryOptions = Actions.setQueryOptions,
  setComponentProps = Actions.setComponentProps,
  setCustomQuery = Actions.setCustomQuery,
  updateComponentProps = Actions.updateComponentProps;
var checkValueChange = helper.checkValueChange,
  getClassName = helper.getClassName,
  isEqual = helper.isEqual,
  checkSomePropChange = helper.checkSomePropChange,
  extractQueryFromCustomQuery = helper.extractQueryFromCustomQuery,
  getOptionsForCustomQuery = helper.getOptionsForCustomQuery;
var DynamicRangeSlider = {
  name: 'DynamicRangeSlider',
  components: getComponents(),
  props: {
    beforeValueChange: types.func,
    className: VueTypes.string.def(''),
    rangeLabels: types.func,
    componentId: types.stringRequired,
    compoundClause: types.compoundClause,
    customQuery: types.func,
    data: types.data,
    dataField: types.stringRequired,
    defaultValue: types.func,
    filterLabel: types.string,
    innerClass: types.style,
    react: types.react,
    showFilter: VueTypes.bool.def(true),
    destroyOnUnmount: VueTypes.bool,
    showCheckbox: VueTypes.bool.def(true),
    title: types.title,
    URLParams: VueTypes.bool.def(false),
    sliderOptions: VueTypes.object.def({}),
    nestedField: types.string,
    index: VueTypes.string,
    value: types.range,
    endpoint: types.endpointConfig
  },
  data: function data() {
    this.internalRangeComponent = this.$props.componentId + "__range__internal";
    return {
      currentValue: null,
      stats: []
    };
  },
  created: function created() {
    var _this = this;
    this.$timestamp = new Date().getTime();
    var components = [];
    if (this.$$store) {
      var _this$$$store$getStat = this.$$store.getState();
      components = _this$$$store$getStat.components;
    }
    var value = this.$props.value;
    if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
      this.addComponent(this.componentId, this.$timestamp);
      this.addComponent(this.internalRangeComponent, this.$timestamp);
      if (Array.isArray(this.selectedValue)) {
        this.handleChange(this.selectedValue);
      } else if (this.selectedValue) {
        this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
      } else if (value) {
        this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
      }

      // get range before executing other queries
      this.updateRangeQueryOptions();
    }
    var onQueryChange = function onQueryChange() {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }
      _this.$emit.apply(_this, ['queryChange'].concat(args));
      _this.$emit.apply(_this, ['query-change'].concat(args));
    };
    this.setQueryListener(this.$props.componentId, onQueryChange, null);
    // Update props in store
    this.setComponentProps(this.componentId, this.$props, componentTypes.dynamicRangeSlider);
    this.setComponentProps(this.internalRangeComponent, this.$props, componentTypes.dynamicRangeSlider);

    // Set custom query in store
    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
    this.setReact(false);
  },
  mounted: function mounted() {
    this.setReact(true);
  },
  beforeUpdate: function beforeUpdate() {
    if (!this.currentValue) {
      this.setDefaultValue(this.range);
    }
  },
  beforeUnmount: function beforeUnmount() {
    if (this.destroyOnUnmount) {
      this.removeComponent(this.$props.componentId);
      this.removeComponent(this.internalRangeComponent);
    }
  },
  methods: {
    isControlled: function isControlled() {
      if (this.$props.value && this.$attrs) {
        return true;
      }
      return false;
    },
    setDefaultValue: function setDefaultValue(_ref) {
      var start = _ref.start,
        end = _ref.end;
      if (this.$props.defaultValue) {
        var _this$$props$defaultV = this.$props.defaultValue(start, end),
          defaultStart = _this$$props$defaultV.start,
          defaultEnd = _this$$props$defaultV.end;
        this.handleChange([defaultStart, defaultEnd]);
      } else if (this.isControlled()) {
        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
      } else {
        this.currentValue = [start, end];
      }
    },
    setReact: function setReact(shouldExecute) {
      if (this.$props.react) {
        this.watchComponent(this.internalRangeComponent, this.$props.react, shouldExecute);
        this.watchComponent(this.$props.componentId, this.$props.react, shouldExecute);
      } else {
        this.watchComponent(this.internalRangeComponent, {}, shouldExecute);
        this.watchComponent(this.$props.componentId, {}, shouldExecute);
      }
    },
    rangeQuery: function rangeQuery() {
      return {
        min: {
          min: {
            field: this.$props.dataField
          }
        },
        max: {
          max: {
            field: this.$props.dataField
          }
        }
      };
    },
    updateRangeQueryOptions: function updateRangeQueryOptions() {
      var aggs = {};
      if (this.$props.nestedField) {
        var _aggs;
        aggs = (_aggs = {}, _aggs[this.$props.nestedField] = {
          nested: {
            path: this.$props.nestedField
          },
          aggs: this.rangeQuery()
        }, _aggs);
      } else {
        aggs = this.rangeQuery();
      }
      this.setQueryOptions(this.internalRangeComponent, {
        aggs: aggs
      });
    },
    handleSlider: function handleSlider() {
      var sliderValues = this.$refs.slider.getValue();
      var value = this.$props.value;
      if (value === undefined) {
        this.handleChange(sliderValues);
      } else {
        this.$emit('change', {
          start: sliderValues[0],
          end: sliderValues[1]
        });
      }
    },
    handleChange: function handleChange(currentValue) {
      var _this2 = this;
      // Always keep the values within range
      var normalizedValue = [this.range ? Math.max(this.range.start, currentValue[0]) : currentValue[0], this.range ? Math.min(this.range.end, currentValue[1]) : currentValue[1]];
      var performUpdate = function performUpdate() {
        _this2.currentValue = normalizedValue;
        _this2.updateQueryHandler(normalizedValue, _this2.$props);
        _this2.$emit('valueChange', {
          start: normalizedValue[0],
          end: normalizedValue[1]
        });
        _this2.$emit('value-change', {
          start: normalizedValue[0],
          end: normalizedValue[1]
        });
      };
      checkValueChange(this.$props.componentId, {
        start: normalizedValue[0],
        end: normalizedValue[1]
      }, this.$props.beforeValueChange, performUpdate);
    },
    updateQueryHandler: function updateQueryHandler(value) {
      var query = DynamicRangeSlider.defaultQuery(value, this.$props);
      if (this.$props.customQuery) {
        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
        var queryTobeSet = extractQueryFromCustomQuery(customQueryTobeSet);
        if (queryTobeSet) {
          query = queryTobeSet;
        }
        var customQueryOptions = getOptionsForCustomQuery(customQueryTobeSet);
        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
      }
      var _ref2 = this.range || {
          start: value[0],
          end: value[1]
        },
        start = _ref2.start,
        end = _ref2.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: this.$props.componentId,
        query: query,
        value: value,
        label: this.$props.filterLabel,
        showFilter: this.$props.showFilter && !isInitialValue,
        URLParams: this.$props.URLParams,
        componentType: componentTypes.dynamicRangeSlider
      });
    }
  },
  computed: {
    labels: function labels() {
      if (!this.rangeLabels) return null;
      return this.rangeLabels(this.range.start, this.range.end);
    }
  },
  watch: {
    $props: {
      deep: true,
      handler: function handler(newVal) {
        var _this3 = this;
        var propsKeys = getValidPropsKeys(newVal);
        checkSomePropChange(newVal, this.componentProps, propsKeys, function () {
          _this3.updateComponentProps(_this3.componentId, newVal, componentTypes.dynamicRangeSlider);
          _this3.updateComponentProps(_this3.internalRangeComponent, newVal, componentTypes.dynamicRangeSlider);
        });
      }
    },
    react: function react() {
      this.setReact();
    },
    selectedValue: function selectedValue(newValue) {
      if (isEqual(newValue, this.currentValue)) return;
      var value = newValue || {
        start: this.range.start,
        end: this.range.end
      };
      this.$emit('change', value);
      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
    },
    range: function range(newValue, oldValue) {
      if (isEqual(newValue, oldValue) || !this.currentValue) return;
      var _ref3 = this.currentValue || [],
        currentStart = _ref3[0],
        currentEnd = _ref3[1];
      var _ref4 = oldValue || {},
        oldStart = _ref4.start,
        oldEnd = _ref4.end;
      var newStart = currentStart === oldStart ? newValue.start : currentStart;
      var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
      this.handleChange([newStart, newEnd]);
    },
    customQuery: function customQuery(newVal, oldVal) {
      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
        this.updateQueryHandler(this.$data.currentValue);
      }
    },
    value: function value(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
      }
    }
  },
  render: function render() {
    var _this4 = this;
    if (!this.range || !this.currentValue || this.range.start === null || this.range.end === null || this.range.start === this.range.end) {
      return null;
    }
    var _this$range = this.range,
      start = _this$range.start,
      end = _this$range.end;
    return createVNode(Container, {
      "class": this.$props.className
    }, {
      "default": function _default() {
        return [_this4.$props.title && createVNode(Title, {
          "class": getClassName(_this4.$props.innerClass, 'title')
        }, {
          "default": function _default() {
            return [_this4.$props.title];
          }
        }), createVNode(NoSSR, null, {
          "default": function _default() {
            return [createVNode(Slider, {
              "class": getClassName(_this4.$props.innerClass, 'slider')
            }, {
              "default": function _default() {
                return [createVNode(VueSlider, mergeProps({
                  "ref": "slider",
                  "modelValue": [Math.floor(Math.max(start, _this4.currentValue[0])), Math.ceil(Math.min(end, _this4.currentValue[1]))],
                  "min": Math.floor(Math.min(start, _this4.currentValue[0])),
                  "max": Math.ceil(Math.max(end, _this4.currentValue[1])),
                  "onChange": _this4.handleSlider,
                  "lazy": true,
                  "dotSize": 20,
                  "height": 4,
                  "enable-cross": false,
                  "tooltip": "always",
                  "useKeyboard": false
                }, _this4.$props.sliderOptions), null), _this4.labels ? createVNode("div", {
                  "class": "label-container"
                }, [createVNode("label", {
                  "class": getClassName(_this4.$props.innerClass, 'label') || 'range-label-left'
                }, [_this4.labels.start]), createVNode("label", {
                  "class": getClassName(_this4.$props.innerClass, 'label') || 'range-label-right'
                }, [_this4.labels.end])]) : null];
              }
            })];
          }
        })];
      }
    });
  }
};
DynamicRangeSlider.defaultQuery = function (value, props) {
  return {
    query: {
      queryFormat: props.queryFormat,
      dataField: props.dataField,
      value: value,
      showMissing: props.showMissing
    }
  };
};
DynamicRangeSlider.parseValue = function (value) {
  if (value) {
    return Array.isArray(value) ? value : [value.start, value.end];
  }
  return [];
};
DynamicRangeSlider.hasInternalComponent = function () {
  return true;
};
var mapStateToProps = function mapStateToProps(state, props) {
  var componentId = state.aggregations[props.componentId];
  var internalRange = state.aggregations[props.componentId + "__range__internal"];
  var options = componentId && componentId[props.dataField];
  var range = state.aggregations[props.componentId + "__range__internal"];
  if (props.nestedField) {
    options = options && componentId[props.dataField][props.nestedField] && componentId[props.dataField][props.nestedField].buckets ? componentId[props.dataField][props.nestedField].buckets : [];
    range = range && internalRange[props.nestedField].min ? {
      start: internalRange[props.nestedField].min.value,
      end: internalRange[props.nestedField].max.value
    } : null;
  } else {
    options = options && componentId[props.dataField].buckets ? componentId[props.dataField].buckets : [];
    range = range && internalRange.min ? {
      start: internalRange.min.value,
      end: internalRange.max.value
    } : null;
  }
  return {
    options: options,
    range: range,
    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
    componentProps: state.props[props.componentId]
  };
};
var mapDispatchtoProps = {
  addComponent: addComponent,
  removeComponent: removeComponent,
  updateQuery: updateQuery,
  watchComponent: watchComponent,
  setQueryListener: setQueryListener,
  setQueryOptions: setQueryOptions,
  setComponentProps: setComponentProps,
  setCustomQuery: setCustomQuery,
  updateComponentProps: updateComponentProps
};
var RangeConnected = PreferencesConsumer(connect(mapStateToProps, mapDispatchtoProps)(DynamicRangeSlider));
RangeConnected.defaultQuery = DynamicRangeSlider.defaultQuery;
RangeConnected.parseValue = DynamicRangeSlider.parseValue;
RangeConnected.hasInternalComponent = DynamicRangeSlider.hasInternalComponent;
RangeConnected.name = DynamicRangeSlider.name;

// Add componentType for SSR
RangeConnected.componentType = componentTypes.dynamicRangeSlider;
RangeConnected.install = function (Vue) {
  Vue.component(RangeConnected.name, RangeConnected);
};

export default RangeConnected;
export { RangeConnected };