optimizely-oui/module/js/components/RangeSlider/index.js

Optimizely's Component Library.

import _pt from "prop-types";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import classnames from "classnames";
import { FILL_COLOR_MAP } from "../../utils/accessibility";
var DEFAULT_FILL_COLOR_NAME = "default";

var RangeSlider = function RangeSlider(_ref) {
  var className = _ref.className,
      _ref$fillColorName = _ref.fillColorName,
      fillColorName = _ref$fillColorName === void 0 ? DEFAULT_FILL_COLOR_NAME : _ref$fillColorName,
      _ref$isDisabled = _ref.isDisabled,
      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
      onChange = _ref.onChange,
      testSection = _ref.testSection,
      _ref$useOffForLabel = _ref.useOffForLabel,
      useOffForLabel = _ref$useOffForLabel === void 0 ? false : _ref$useOffForLabel,
      value = _ref.value,
      props = _objectWithoutProperties(_ref, ["className", "fillColorName", "isDisabled", "onChange", "testSection", "useOffForLabel", "value"]);

  var rangeClasses = classnames({
    "oui-rangeslider": true,
    "oui-rangeslider--disabled": isDisabled
  }, className); // ensure valid fillColor name (in the case that propType errors are ignored)

  var validFillColorName = Object.keys(FILL_COLOR_MAP).includes(fillColorName) ? fillColorName : DEFAULT_FILL_COLOR_NAME;
  var fillColor = FILL_COLOR_MAP[validFillColorName];
  return React.createElement("div", _extends({
    className: rangeClasses,
    "data-test-section": testSection
  }, props), React.createElement("div", {
    className: "oui-grid"
  }, React.createElement("div", {
    className: "oui-grid__cell position--relative"
  }, React.createElement("div", {
    className: "range-labels flex"
  }, React.createElement("label", {
    className: "oui-label muted flush flex--1"
  }, useOffForLabel ? "Off" : "0%"), React.createElement("label", {
    className: "oui-label muted flush"
  }, "100%")), React.createElement("div", {
    className: "range-display"
  }, React.createElement("svg", {
    preserveAspectRatio: "none",
    xmlns: "http://www.w3.org/2000/svg",
    width: "100",
    height: "100",
    viewBox: "0 0 100 100"
  }, React.createElement("path", {
    fill: fillColor,
    d: "M0 100h100V0z",
    shapeRendering: "geometricPrecision"
  })), React.createElement("svg", {
    preserveAspectRatio: "none",
    xmlns: "http://www.w3.org/2000/svg",
    width: "100",
    height: "100",
    viewBox: "0 0 100 100",
    style: {
      position: "absolute",
      left: 0,
      top: 0
    }
  }, React.createElement("path", {
    d: "M".concat(value, " 100H100V0L").concat(value, " ").concat(100 - value - 1, "z"),
    fill: "white",
    opacity: "0.9",
    shapeRendering: "geometricPrecision"
  }))), React.createElement("div", {
    className: "range-grid"
  }, React.createElement("div", {
    className: "gridline grid-1"
  }), React.createElement("div", {
    className: "gridline grid-2"
  }), React.createElement("div", {
    className: "gridline grid-3"
  }), React.createElement("div", {
    className: "gridline grid-4"
  }), React.createElement("div", {
    className: "gridline grid-5"
  }), React.createElement("div", {
    className: "gridline gridline-half grid-h1"
  }), React.createElement("div", {
    className: "gridline gridline-half grid-h2"
  }), React.createElement("div", {
    className: "gridline gridline-half grid-h3"
  }), React.createElement("div", {
    className: "gridline gridline-half grid-h4"
  })), React.createElement("input", {
    className: "hard position--relative width--1-1",
    "data-traffic-group": "1",
    type: "range",
    min: "0",
    max: "100",
    step: "1",
    value: value,
    onChange: onChange,
    disabled: isDisabled
  }))));
};

RangeSlider.propTypes = {
  className: _pt.string,
  fillColorName: _pt.any,
  isDisabled: _pt.bool,
  onChange: _pt.func.isRequired,
  testSection: _pt.string,
  useOffForLabel: _pt.bool,
  value: _pt.number.isRequired
};
export default RangeSlider;