fomantic-ui-react/es/slider/Slider.js

Fomantic-UI React -- A React Component Library.

/**
 * fomantic-ui-react v0.0.1-alpha.10
 * (c) 2022 FireLoong <fireloong@foxmail.com>
 * @license MIT
 */

import { _ as _defineProperty, a as _objectWithoutProperties } from '../_chunks/dep-9f1126c1.js';
import { _ as _slicedToArray } from '../_chunks/dep-dc9b74a1.js';
import React, { useState, useRef, useEffect, createElement } from 'react';
import classNames from 'classnames';
import useSlider from '../_util/useSlider.js';
import { uniq } from '../_util/classNamesUniq.js';
import { useMap, useCss, useSize } from 'react-use';
import 'lodash';

var _excluded = ["as", "className", "min", "max", "step", "start", "end", "range", "labeled", "labelType", "labelButtom", "labelDistance", "autoAdjustLabels", "ticked", "smooth", "vertical", "disabled", "inverted", "interpretLabel", "onChange", "onMove", "onStart", "children"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var Slider = function Slider(_ref) {
  var _ref$as = _ref.as,
      as = _ref$as === void 0 ? "div" : _ref$as,
      className = _ref.className,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? 0 : _ref$min,
      _ref$max = _ref.max,
      max = _ref$max === void 0 ? 20 : _ref$max,
      _ref$step = _ref.step,
      step = _ref$step === void 0 ? 1 : _ref$step,
      _ref$start = _ref.start,
      start = _ref$start === void 0 ? 0 : _ref$start,
      _ref$end = _ref.end,
      end = _ref$end === void 0 ? 20 : _ref$end,
      range = _ref.range,
      labeled = _ref.labeled,
      _ref$labelType = _ref.labelType,
      labelType = _ref$labelType === void 0 ? "number" : _ref$labelType,
      labelButtom = _ref.labelButtom,
      _ref$labelDistance = _ref.labelDistance,
      labelDistance = _ref$labelDistance === void 0 ? 50 : _ref$labelDistance,
      _ref$autoAdjustLabels = _ref.autoAdjustLabels,
      autoAdjustLabels = _ref$autoAdjustLabels === void 0 ? true : _ref$autoAdjustLabels,
      ticked = _ref.ticked,
      smooth = _ref.smooth,
      _ref$vertical = _ref.vertical,
      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
      disabled = _ref.disabled,
      inverted = _ref.inverted,
      interpretLabel = _ref.interpretLabel,
      onChange = _ref.onChange,
      onMove = _ref.onMove,
      onStart = _ref.onStart,
      children = _ref.children,
      props = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(start),
      _useState2 = _slicedToArray(_useState, 2),
      sliderValue = _useState2[0],
      setSliderValue = _useState2[1];

  var _useMap = useMap(),
      _useMap2 = _slicedToArray(_useMap, 2),
      fillStyles = _useMap2[0],
      setFillStyle = _useMap2[1].set;

  var _useMap3 = useMap(),
      _useMap4 = _slicedToArray(_useMap3, 2),
      thumbStyles = _useMap4[0],
      setThumbStyle = _useMap4[1].set;

  var trackCss = useCss({
    "&>iframe": {
      opacity: 0
    }
  });
  var ref = useRef(null);
  var state = useSlider(ref, {
    start: (start - min) / (max - min),
    vertical: vertical,
    onScrubStop: function onScrubStop(value) {
      if (!disabled) {
        var startValue = value * (max - min) + min;

        if (step > 0) {
          onChange === null || onChange === void 0 ? void 0 : onChange(Math.round(startValue / step) * step, Math.round(startValue / step) * step);
        } else {
          onChange === null || onChange === void 0 ? void 0 : onChange(startValue, startValue);
        }
      }
    },
    onScrub: function onScrub(value) {
      if (!disabled) {
        var startValue = value * (max - min) + min;
        setSliderValue(startValue);

        if (step > 0) {
          onMove === null || onMove === void 0 ? void 0 : onMove(Math.round(startValue / step) * step, Math.round(startValue / step) * step);
        } else {
          onMove === null || onMove === void 0 ? void 0 : onMove(startValue, startValue);
        }
      }
    },
    onScrubStart: function onScrubStart() {
      onStart === null || onStart === void 0 ? void 0 : onStart();
    }
  });
  useEffect(function () {
    if (step === 0 || smooth) {
      setFillStyle(vertical ? "top" : "left", "0%");
      setFillStyle(vertical ? "bottom" : "right", "".concat(100 * (1 - state.value), "%"));
      setThumbStyle(vertical ? "top" : "left", "calc(".concat(100 * state.value, "% - 10.5px)"));
      setThumbStyle(vertical ? "bottom" : "right", "auto");
    } else {
      setFillStyle(vertical ? "top" : "left", "0%");
      setFillStyle(vertical ? "bottom" : "right", "".concat(100 * (1 - (Math.round(sliderValue / step) * step - min) / (max - min)), "%"));
      setThumbStyle(vertical ? "top" : "left", "calc(".concat(100 * (Math.round(sliderValue / step) * step - min) / (max - min), "% - 10.5px)"));
      setThumbStyle(vertical ? "bottom" : "right", "auto");
    }
  }, [sliderValue]);

  var _useSize = useSize(function () {
    return /* @__PURE__ */React.createElement("div", {
      className: classNames("track", trackCss)
    });
  }),
      _useSize2 = _slicedToArray(_useSize, 2),
      trackElement = _useSize2[0],
      track = _useSize2[1];

  if (!as) {
    as = "div";
  }

  var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
  var numLabels = (max - min) / (step === 0 ? 1 : step);

  var gapRatio = function gapRatio() {
    var gapRatio2 = 1;

    if (autoAdjustLabels) {
      var trackLength = vertical ? track.height : track.width;
      var gapCounter = 1;

      if (trackLength && trackLength > 0) {
        while (trackLength / numLabels * gapCounter < labelDistance * 2) {
          if (!(numLabels % gapCounter)) {
            gapRatio2 = gapCounter;
          }

          gapCounter += 1;
        }
      }
    }

    return gapRatio2;
  };

  var labelItems = [];

  for (var i = 0; i <= numLabels; i++) {
    var labelStr = void 0;

    if (interpretLabel) {
      labelStr = interpretLabel(i * step);
    } else {
      labelStr = labelType === "number" ? i * step : alphabet[i % 26];
    }

    labelItems[i] = /* @__PURE__ */React.createElement("li", {
      key: i,
      className: classNames({
        halftick: i % gapRatio()
      }, "label"),
      style: _defineProperty({}, vertical ? "top" : "left", "calc(((100% - 7px) - 7px) * ".concat(step / (max - min) * i, " + 7px)"))
    }, i % gapRatio() ? null : labelStr);
  }

  return /*#__PURE__*/createElement(as, _objectSpread({
    ref: ref,
    className: uniq(classNames("ui", {
      "bottom aligned": labelButtom,
      labeled: labeled,
      ticked: ticked,
      vertical: vertical,
      disabled: disabled,
      inverted: inverted
    }, "slider", className))
  }, props), /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement("div", {
    className: "inner"
  }, trackElement, /* @__PURE__ */React.createElement("div", {
    className: "track-fill",
    style: fillStyles
  }), /* @__PURE__ */React.createElement("div", {
    className: "thumb",
    style: thumbStyles
  })), labeled && /* @__PURE__ */React.createElement("ul", {
    className: classNames("auto", "labels")
  }, labelItems)));
};

Slider.displayName = "Slider";

export { Slider as default };
//# sourceMappingURL=Slider.js.map