@appbaseio/reactivesearch-vue/dist/cjs/RangeInput.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'));
var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-1a877b17.js');
var vue = require('vue');
var VueTypes = _interopDefault(require('vue-types'));
var vueEmotion = require('@appbaseio/vue-emotion');
require('@emotion/css');
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');
require('./Title-d513ac26.js');
var Flex = require('./Flex-f7af0673.js');
var Input = require('./Input-55fbd8e1.js');
var Container = require('./Container-1c05785a.js');
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');
require('./ssr-15d936a0.js');
var RangeSlider = require('./RangeSlider.js');

var _templateObject;
var alert = function alert(_ref) {
  var theme = _ref.theme;
  return "\n\tcolor: " + theme.colors.alertColor + ";\n";
};
var Content = vueEmotion.styled('div')(_templateObject || (_templateObject = _rollupPluginBabelHelpers._taggedTemplateLiteralLoose(["\n\t", ";\n\tfont-size: 13px;\n\tmargin: 8px;\n"])), function (props) {
  return props.alert && alert;
});

var getClassName = reactivecore.helper.getClassName,
  isEqual = reactivecore.helper.isEqual;
var RangeInput = {
  name: 'RangeInput',
  components: {
    RangeSlider: RangeSlider.RangeConnected
  },
  inject: {
    theme: {
      from: 'theme_reactivesearch'
    }
  },
  data: function data() {
    var state = {
      currentValue: {
        start: this.$props.range ? this.$props.range.start : 0,
        end: this.$props.range ? this.$props.range.end : 10
      },
      isStartValid: true,
      isEndValid: true
    };
    return state;
  },
  props: {
    className: {
      types: vueTypes.types.string,
      "default": ''
    },
    defaultValue: vueTypes.types.range,
    validateRange: vueTypes.types.func,
    value: vueTypes.types.range,
    dataField: vueTypes.types.stringRequired,
    innerClass: vueTypes.types.style,
    range: {
      types: vueTypes.types.range,
      "default": function _default() {
        return {
          start: 0,
          end: 10
        };
      }
    },
    rangeLabels: vueTypes.types.rangeLabels,
    stepValue: vueTypes.types.number,
    componentStyle: vueTypes.types.style,
    componentId: vueTypes.types.stringRequired,
    compoundClause: vueTypes.types.compoundClause,
    includeNullValues: VueTypes.bool,
    beforeValueChange: vueTypes.types.func,
    customQuery: vueTypes.types.func,
    data: vueTypes.types.data,
    filterLabel: vueTypes.types.string,
    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,
    endpoint: vueTypes.types.endpointConfig
  },
  methods: {
    shouldUpdate: function shouldUpdate(value) {
      var validateRange = this.$props.validateRange;
      if (validateRange && value) {
        return validateRange([value.start, value.end]);
      }
      if (value) {
        return value.start <= value.end;
      }
      return false;
    },
    isControlled: function isControlled() {
      if (this.$props.value && this.$attrs) {
        return true;
      }
      return false;
    },
    handleChange: function handleChange(value, event) {
      var currentValue = value;
      if (this.shouldUpdate(value) && !isEqual(value, this.currentValue)) {
        switch (event) {
          case 'change':
            if (!value) {
              currentValue = {
                start: this.$props.range ? this.$props.range.start : 0,
                end: this.$props.range ? this.$props.range.end : 10
              };
            }
            this.currentValue = currentValue;
            this.$emit('change', this.currentValue);
            break;
          case 'value-change':
            this.$emit('valueChange', this.currentValue);
            this.$emit('value-change', this.currentValue);
            break;
          default:
            this.currentValue = _rollupPluginBabelHelpers._extends({}, currentValue);
            break;
        }
      }
    },
    handleOnChange: function handleOnChange(value) {
      this.handleChange(value || this.$props.range, 'change');
    },
    handleValueChange: function handleValueChange(value) {
      this.handleChange(value, 'value-change');
    },
    handleInputChange: function handleInputChange(e) {
      var _e$target = e.target,
        name = _e$target.name,
        value = _e$target.value;
      if (Number.isNaN(value)) {
        if (name === 'start') {
          this.isStartValid = false;
        } else {
          this.isEndValid = false;
        }
      } else if (name === 'start' && !this.isStartValid) {
        this.isStartValid = true;
      } else if (name === 'end' && !this.isEndValid) {
        this.isEndValid = true;
      }
      if (this.isStartValid && this.isEndValid) {
        if (name === 'start') {
          this.handleChange({
            start: Number(value),
            end: this.currentValue.end
          }, 'change');
        } else {
          this.handleChange({
            start: this.currentValue.start,
            end: Number(value)
          }, 'change');
        }
      }
    }
  },
  watch: {
    defaultValue: function defaultValue(newVal, oldVal) {
      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
        this.handleChange(newVal);
      }
    },
    value: function value(newVal, oldVal) {
      if (!isEqual(newVal, oldVal)) {
        if (this.isControlled()) {
          this.handleChange(newVal, 'change');
        }
      }
    }
  },
  created: function created() {
    if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
      this.handleChange(this.$props.defaultValue);
    }
    if (this.isControlled()) {
      this.handleChange(this.$props.value, 'change');
    }
  },
  render: function render() {
    var _this = this;
    var _this$$props = this.$props,
      className = _this$$props.className,
      dataField = _this$$props.dataField,
      range = _this$$props.range,
      rangeLabels = _this$$props.rangeLabels,
      componentId = _this$$props.componentId,
      innerClass = _this$$props.innerClass,
      stepValue = _this$$props.stepValue,
      componentStyle = _this$$props.componentStyle,
      themePreset = _this$$props.themePreset,
      includeNullValues = _this$$props.includeNullValues,
      beforeValueChange = _this$$props.beforeValueChange,
      customQuery = _this$$props.customQuery,
      data = _this$$props.data,
      filterLabel = _this$$props.filterLabel,
      react = _this$$props.react,
      showFilter = _this$$props.showFilter,
      showCheckbox = _this$$props.showCheckbox,
      title = _this$$props.title,
      URLParams = _this$$props.URLParams,
      sliderOptions = _this$$props.sliderOptions,
      nestedField = _this$$props.nestedField;
    return vue.createVNode(Container.Container, {
      "style": componentStyle,
      "class": className
    }, {
      "default": function _default() {
        return [vue.createVNode(RangeSlider.RangeConnected, vue.mergeProps(_transformOn({
          change: _this.handleOnChange,
          'value-change': _this.handleValueChange
        }), {
          "componentId": componentId,
          "value": {
            start: _this.currentValue.start,
            end: _this.currentValue.end
          },
          "range": range,
          "dataField": dataField,
          "rangeLabels": rangeLabels,
          "includeNullValues": includeNullValues,
          "beforeValueChange": beforeValueChange,
          "customQuery": customQuery,
          "data": data,
          "filterLabel": filterLabel,
          "react": react,
          "showFilter": showFilter,
          "showCheckbox": showCheckbox,
          "title": title,
          "URLParams": URLParams,
          "sliderOptions": sliderOptions,
          "nestedField": nestedField
        }), null), vue.createVNode(Flex.Flex, {
          "class": getClassName(innerClass, 'input-container') || ''
        }, {
          "default": function _default() {
            return [vue.createVNode(Flex.Flex, {
              "direction": "column",
              "flex": 2
            }, {
              "default": function _default() {
                return [vue.createVNode(Input.Input, vue.mergeProps(_transformOn({
                  change: _this.handleInputChange
                }), {
                  "key": componentId + "-start-value",
                  "name": "start",
                  "type": "number",
                  "step": stepValue,
                  "themePreset": themePreset,
                  "aria-label": componentId + "-start-input",
                  "min": _this.$props.range ? _this.$props.range.start : 0,
                  "class": getClassName(innerClass, 'input') || '',
                  "alert": !_this.isStartValid,
                  "value": _this.currentValue.start || 0
                }), null), !_this.isStartValid && vue.createVNode(Content, {
                  "alert": true
                }, {
                  "default": function _default() {
                    return [vue.createTextVNode("Input range is invalid")];
                  }
                })];
              }
            }), vue.createVNode(Flex.Flex, {
              "justifyContent": "center",
              "alignItems": "center",
              "flex": 1
            }, {
              "default": function _default() {
                return [vue.createTextVNode("-")];
              }
            }), vue.createVNode(Flex.Flex, {
              "direction": "column",
              "flex": 2
            }, {
              "default": function _default() {
                return [vue.createVNode(Input.Input, vue.mergeProps(_transformOn({
                  change: _this.handleInputChange
                }), {
                  "key": componentId + "-end-value",
                  "name": "end",
                  "type": "number",
                  "step": stepValue,
                  "themePreset": themePreset,
                  "aria-label": componentId + "-end-input",
                  "max": _this.$props.range ? _this.$props.range.end : 10,
                  "class": getClassName(innerClass, 'input') || '',
                  "alert": !_this.isEndValid,
                  "value": _this.currentValue.end || 0
                }), null), !_this.isEndValid && vue.createVNode(Content, {
                  "alert": true
                }, {
                  "default": function _default() {
                    return [vue.createTextVNode("Input range is invalid")];
                  }
                })];
              }
            })];
          }
        })];
      }
    });
  }
};
var mapStateToProps = function mapStateToProps(state) {
  return {
    themePreset: state.config.themePreset
  };
};
var RangeConnected = PreferencesConsumer.PreferencesConsumer(ComponentWrapper.ComponentWrapper(index.connect(mapStateToProps, {})(RangeInput), {
  componentType: constants.componentTypes.rangeInput
}));
RangeConnected.name = RangeInput.name;
RangeConnected.install = function (Vue) {
  Vue.component(RangeConnected.name, RangeConnected);
};

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

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