rsuite/esm/Slider/Graduated.js

A suite of react components

'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import Mark from "./Mark.js";
import Box from "../internals/Box/index.js";
import { forwardRef } from "../internals/utils/index.js";
import { useStyles } from "../internals/hooks/index.js";
import { precisionMath } from "./utils.js";
const Graduated = forwardRef((props, ref) => {
  const {
    as,
    step,
    min,
    max,
    count,
    value,
    classPrefix = 'slider',
    className,
    marks = [],
    renderMark,
    ...rest
  } = props;
  const {
    merge,
    prefix,
    cssVar
  } = useStyles(classPrefix);
  const activeIndexs = [];
  let startIndex = 0;
  let endIndex = 0;
  if (Array.isArray(value)) {
    const [start, end] = value;
    startIndex = precisionMath(start / step - min / step);
    endIndex = precisionMath(end / step - min / step);
    activeIndexs.push(precisionMath(Math.ceil((start - min) / (max - min) * count)));
    activeIndexs.push(precisionMath(Math.ceil((end - min) / (max - min) * count)));
  } else {
    endIndex = precisionMath(value / step - min / step);
    activeIndexs.push(precisionMath(Math.ceil((value - min) / (max - min) * count)));
  }
  const graduatedItems = [];

  // If custom marks are provided, use them
  if (marks.length > 0) {
    // Only create DOM nodes for the specific mark values
    marks.forEach((mark, index) => {
      // Calculate the position index for this mark
      const markPosition = precisionMath((mark.value - min) / (max - min) * count);
      graduatedItems.push(/*#__PURE__*/React.createElement("li", {
        className: prefix('tick'),
        key: `${mark.value}-${index}`,
        "data-pass": markPosition >= startIndex && markPosition <= endIndex,
        "data-active": activeIndexs.indexOf(markPosition) !== -1,
        style: cssVar('tick-offset', `${(mark.value - min) / (max - min) * 100}%`)
      }, /*#__PURE__*/React.createElement(Mark, {
        mark: mark.value,
        renderMark: () => mark.label || mark.value
      })));
    });
  } else {
    // Original implementation for when no custom marks are provided
    for (let i = 0; i < count; i += 1) {
      const mark = precisionMath(i * step + min);
      const lastMark = Math.min(max, mark + step);
      const last = i === count - 1;
      graduatedItems.push(/*#__PURE__*/React.createElement("li", {
        className: prefix('tick'),
        "data-pass": i >= startIndex && i <= endIndex,
        "data-active": activeIndexs.indexOf(i) !== -1,
        key: i
      }, /*#__PURE__*/React.createElement(Mark, {
        mark: mark,
        renderMark: renderMark
      }), last ? /*#__PURE__*/React.createElement(Mark, {
        mark: lastMark,
        renderMark: renderMark,
        last: last
      }) : null));
    }
  }
  const classes = merge(className, prefix('graduator'));
  return /*#__PURE__*/React.createElement(Box, _extends({
    as: as,
    ref: ref,
    className: classes
  }, rest, {
    "data-with-marks": marks.length > 0
  }), /*#__PURE__*/React.createElement("ol", null, graduatedItems));
});
Graduated.displayName = 'Graduated';
export default Graduated;