@wordpress/components/build/range-control/rail.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = RangeRail;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _i18n = require("@wordpress/i18n");

var _mark = _interopRequireDefault(require("./mark"));

var _rangeControlStyles = require("./styles/range-control-styles");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function RangeRail({
  disabled = false,
  marks = false,
  min = 0,
  max = 100,
  step = 1,
  value = 0,
  ...restProps
}) {
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_rangeControlStyles.Rail, (0, _extends2.default)({
    disabled: disabled
  }, restProps)), marks && (0, _element.createElement)(Marks, {
    disabled: disabled,
    marks: marks,
    min: min,
    max: max,
    step: step,
    value: value
  }));
}

function Marks({
  disabled = false,
  marks = false,
  min = 0,
  max = 100,
  step = 1,
  value = 0
}) {
  const marksData = useMarks({
    marks,
    min,
    max,
    step,
    value
  });
  return (0, _element.createElement)(_rangeControlStyles.MarksWrapper, {
    "aria-hidden": "true",
    className: "components-range-control__marks"
  }, marksData.map(mark => (0, _element.createElement)(_mark.default, (0, _extends2.default)({}, mark, {
    key: mark.key,
    "aria-hidden": "true",
    disabled: disabled
  }))));
}

function useMarks({
  marks,
  min = 0,
  max = 100,
  step = 1,
  value = 0
}) {
  if (!marks) {
    return [];
  }

  const range = max - min;

  if (!Array.isArray(marks)) {
    marks = [];
    const count = 1 + Math.round(range / step);

    while (count > marks.push({
      value: step * marks.length + min
    }));
  }

  const placedMarks = [];
  marks.forEach((mark, index) => {
    if (mark.value < min || mark.value > max) {
      return;
    }

    const key = `mark-${index}`;
    const isFilled = mark.value <= value;
    const offset = `${(mark.value - min) / range * 100}%`;
    const offsetStyle = {
      [(0, _i18n.isRTL)() ? 'right' : 'left']: offset
    };
    placedMarks.push({ ...mark,
      isFilled,
      key,
      style: offsetStyle
    });
  });
  return placedMarks;
}
//# sourceMappingURL=rail.js.map