preact-arco-design/es/Slider/ticks.js

Arco Design React UI Library.

import React, { memo, useMemo } from "preact/compat";
import { plus } from 'number-precision';
import { formatPercent, getIntervalOffset, valueInRange } from "./utils";
import cs from "../_util/classNames";
export default memo(function Ticks(props) {
  var min = props.min,
      max = props.max,
      value = props.value,
      prefixCls = props.prefixCls,
      vertical = props.vertical,
      reverse = props.reverse,
      intervalConfigs = props.intervalConfigs;
  var stepsMap = new Map();

  var getCurrentSteps = function getCurrentSteps(interval) {
    var step = interval.step,
        begin = interval.begin,
        end = interval.end;
    var stepsLength = Math.floor((end - begin) / step);

    for (var i = 0; i <= stepsLength; i++) {
      var stepVal = plus(i * step, begin);
      if (stepVal <= min || stepVal >= max) continue;
      var offset = formatPercent(getIntervalOffset(stepVal, intervalConfigs));
      stepsMap.set(offset, {
        offset: offset,
        isActive: valueInRange(stepVal, value)
      });
    }
  };

  var steps = useMemo(function () {
    stepsMap.clear();
    intervalConfigs.forEach(function (interval) {
      return getCurrentSteps(interval);
    });
    return Array.from(stepsMap.values());
  }, [intervalConfigs]);
  return React.createElement("div", {
    className: "".concat(prefixCls, "-ticks")
  }, steps.map(function (item, index) {
    var _a, _b, _c;

    return React.createElement("div", {
      key: index,
      className: cs("".concat(prefixCls, "-tick"), (_a = {}, _a["".concat(prefixCls, "-tick-active")] = item.isActive, _a)),
      style: vertical ? (_b = {}, _b[reverse ? 'top' : 'bottom'] = item.offset, _b) : (_c = {}, _c[reverse ? 'right' : 'left'] = item.offset, _c)
    });
  }));
});