react-addressable-sliders/lib/js/utils.js

Multi-range slider made with react with addressable and identifiable ranges

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.updateRef = exports.toggleTooltip = exports.toggleNameTooltip = exports.onThumbValueChange = exports.getMinAndMaxFromRanges = exports.getClickedValueOnTrack = exports.checkRanges = exports.changeTooltipPosition = exports.Thumb = exports.Direction = void 0;

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var Thumb;
exports.Thumb = Thumb;

(function (Thumb) {
  Thumb["MIN"] = "min";
  Thumb["MAX"] = "max";
})(Thumb || (exports.Thumb = Thumb = {}));

var Direction;
exports.Direction = Direction;

(function (Direction) {
  Direction["LEFT"] = "left";
  Direction["RIGHT"] = "right";
})(Direction || (exports.Direction = Direction = {}));

var getMinAndMaxFromRanges = function getMinAndMaxFromRanges(ranges) {
  if (!ranges || Object.keys(ranges).length === 0) {
    return {
      min: 0,
      max: 100
    };
  }

  var min = Object.values(ranges)[0].min;
  var max = Object.values(ranges)[0].max;
  Object.values(ranges).forEach(function (range) {
    if (!min && min !== 0 || range.min < min) {
      min = range.min;
    }

    if (!max && max !== 0 || range.max > max) {
      max = range.max;
    }
  });
  return {
    min: min,
    max: max
  };
};

exports.getMinAndMaxFromRanges = getMinAndMaxFromRanges;

var getPercent = function getPercent(value, min, max) {
  return Math.round((value - min) / (max - min) * 100);
};

var updateRef = function updateRef(range, extremes, rangesRef) {
  var minPercent = getPercent(range.min, extremes.min, extremes.max);
  var maxPercent = getPercent(range.max, extremes.min, extremes.max);

  if (rangesRef && rangesRef.current && rangesRef.current[range.id]) {
    rangesRef.current[range.id].style.left = minPercent + "%";
    rangesRef.current[range.id].style.width = maxPercent - minPercent + "%";
  }
};

exports.updateRef = updateRef;

var onThumbValueChange = function onThumbValueChange(target_value, thumb, range, ranges, setRanges, options, emitChanges, labelsRef, extremes) {
  var newValue;

  if (thumb === Thumb.MIN) {
    var value = Math.min(Number(target_value), range.max - 1);
    var nearestRangeValue = Math.max.apply(Math, Object.values(ranges).map(function (item) {
      return item.max;
    }).filter(function (max) {
      return max <= range.min;
    }));
    newValue = Math.max(value, nearestRangeValue + ((options === null || options === void 0 ? void 0 : options.rangePadding) || 0));
  } else {
    var value = Math.max(Number(target_value), range.min + 1);
    var nearestRangeValue = Math.min.apply(Math, Object.values(ranges).map(function (item) {
      return item.min;
    }).filter(function (min) {
      return min >= range.max;
    }));
    newValue = Math.min(value, nearestRangeValue - ((options === null || options === void 0 ? void 0 : options.rangePadding) || 0));
  }

  if (emitChanges) {
    var result_1 = emitChanges(range, newValue, thumb);

    if (!!result_1) {
      if (_typeof(result_1) === 'object') {
        setRanges(function (prevState) {
          var _a, _b;

          return __assign(__assign({}, prevState), (_a = {}, _a[range.id] = __assign(__assign({}, range), (_b = {}, _b[thumb] = result_1[thumb === Thumb.MIN ? Thumb.MAX : Thumb.MIN], _b)), _a));
        });
      }

      return;
    }
  }

  changeTooltipPosition(range, thumb, labelsRef, extremes);
  setRanges(function (prevState) {
    var _a, _b;

    return __assign(__assign({}, prevState), (_a = {}, _a[range.id] = __assign(__assign({}, range), (_b = {}, _b[thumb] = newValue, _b)), _a));
  });
};

exports.onThumbValueChange = onThumbValueChange;

var checkRanges = function checkRanges(init_ranges, options) {
  var checked_ranges = init_ranges || {};
  var range_intervals = Object.values(checked_ranges);
  var rangePadding = (options === null || options === void 0 ? void 0 : options.rangePadding) || 0;
  range_intervals.forEach(function (considered_range) {
    considered_range.actualTrackColor = considered_range.trackColor ? considered_range.trackColor : (options === null || options === void 0 ? void 0 : options.getTrackColor) ? options.getTrackColor(considered_range) : "#" + (considered_range.ref_id ? considered_range.ref_id.substr(0, 6) : considered_range.parent_id ? considered_range.parent_id.substr(0, 6) : 'CCC');
    range_intervals.forEach(function (range) {
      if (considered_range.id !== range.id) {
        if (considered_range.min < range.max && considered_range.min > range.min) {
          considered_range.min = range.max + rangePadding;
        }

        if (considered_range.max < range.max && considered_range.max > range.min) {
          considered_range.max = range.min - rangePadding;
        }
      }
    });
  });
  return checked_ranges;
};

exports.checkRanges = checkRanges;

var changeTooltipPosition = function changeTooltipPosition(range, thumb, labelsRef, extremes) {
  if (labelsRef.current && labelsRef.current[range.id]) {
    var label_position = thumb === Thumb.MIN ? Direction.LEFT : Direction.RIGHT;
    var leftPosition = getPercent(range[thumb], extremes.min, extremes.max);

    if (leftPosition > 80) {
      labelsRef.current[range.id][label_position].style.right = 100 - leftPosition + "%";
      labelsRef.current[range.id][label_position].style.left = '';
    } else {
      labelsRef.current[range.id][label_position].style.left = leftPosition + "%";
      labelsRef.current[range.id][label_position].style.right = '';
    }
  }
};

exports.changeTooltipPosition = changeTooltipPosition;

var toggleTooltip = function toggleTooltip(action, range, thumb, labelsRef, extremes) {
  if (labelsRef.current && labelsRef.current[range.id]) {
    var label_position = thumb === Thumb.MIN ? Direction.LEFT : Direction.RIGHT;
    labelsRef.current[range.id][label_position].style.visibility = action === 'show' ? 'visible' : 'hidden';
    changeTooltipPosition(range, thumb, labelsRef, extremes);
  }
};

exports.toggleTooltip = toggleTooltip;

var toggleNameTooltip = function toggleNameTooltip(action, range_id, namesRef) {
  if (namesRef.current && namesRef.current[range_id]) {
    namesRef.current[range_id].style.visibility = action === 'show' ? 'visible' : 'hidden';
    namesRef.current[range_id].style.left = action === 'show' ? "calc(50% - " + namesRef.current[range_id].clientWidth / 2 + "px) " : '0';
  }
};

exports.toggleNameTooltip = toggleNameTooltip;

var getClickedValueOnTrack = function getClickedValueOnTrack(event, extremes, ranges) {
  var xPosition = event.clientX; // @ts-ignore

  var xTotal = event.target.clientWidth; // @ts-ignore

  var xOffset = event.target.offsetLeft;
  var relativePercentage = (xPosition - xOffset) / xTotal * 100;
  var relativeValue = extremes.min + relativePercentage / 100 * (extremes.max - extremes.min);
  var closestRanges = extremes;
  Object.values(ranges).forEach(function (range) {
    if (closestRanges.min <= range.max && range.max <= relativeValue) {
      closestRanges.min = Math.max(range.max, closestRanges.min === relativeValue ? range.max : closestRanges.min);
    }

    if (closestRanges.max >= range.min && range.min >= relativeValue) {
      closestRanges.max = Math.min(range.min, closestRanges.max === relativeValue ? range.min : closestRanges.max);
    }
  });
  return {
    relativePercentage: relativePercentage,
    relativeValue: relativeValue,
    closestRanges: {
      min: closestRanges.min === relativeValue ? extremes.min : closestRanges.min,
      max: closestRanges.max === relativeValue ? extremes.max : closestRanges.max
    }
  };
};

exports.getClickedValueOnTrack = getClickedValueOnTrack;