@enact/limestone 1.3.0

package/Slider/Slider.js

@@ -0,0 +1,441 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderDecorator = exports.SliderBase = exports.Slider = void 0;
+Object.defineProperty(exports, "SliderTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _ProgressBar2.ProgressBarTooltip;
+  }
+});
+exports["default"] = void 0;
+var _handle = require("@enact/core/handle");
+var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
+var _util = require("@enact/core/util");
+var _usePublicClassNames = require("@enact/core/usePublicClassNames");
+var _Accelerator = _interopRequireDefault(require("@enact/spotlight/Accelerator"));
+var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
+var _Changeable = _interopRequireDefault(require("@enact/ui/Changeable"));
+var _ComponentOverride = _interopRequireDefault(require("@enact/ui/ComponentOverride"));
+var _ProgressBar = _interopRequireDefault(require("@enact/ui/ProgressBar"));
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
+var _Slider = _interopRequireDefault(require("@enact/ui/Slider"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _anyPass = _interopRequireDefault(require("ramda/src/anyPass"));
+var _compose = _interopRequireDefault(require("ramda/src/compose"));
+var _react = require("react");
+var _ProgressBar2 = require("../ProgressBar");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _validators = require("../internal/validators");
+var _SliderBehaviorDecorator = _interopRequireDefault(require("./SliderBehaviorDecorator"));
+var _utils = require("./utils");
+var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["active", "className", "css", "disabled", "focused", "keyFrequency", "showAnchor"];
+/**
+ * Provides Limestone-themed slider components and behaviors.
+ *
+ * @example
+ * <Slider
+ *   defaultValue={-30}
+ *   max={100}
+ *   min={-100}
+ *   step={10}
+ *   tooltip
+ * />
+ *
+ * @module limestone/Slider
+ * @exports Slider
+ * @exports SliderBase
+ * @exports SliderDecorator
+ * @exports SliderTooltip
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var sliderDefaultProps = {
+  activateOnSelect: false,
+  active: false,
+  disabled: false,
+  keyFrequency: [1],
+  max: 100,
+  min: 0,
+  orientation: 'horizontal',
+  step: 1,
+  wheelInterval: 0
+};
+
+/**
+ * Range-selection input component.
+ *
+ * @class SliderBase
+ * @extends ui/Slider.SliderBase
+ * @omit progressBarComponent
+ * @memberof limestone/Slider
+ * @ui
+ * @public
+ */
+var SliderBase = exports.SliderBase = function SliderBase(props) {
+  var sliderProps = (0, _util.setDefaultProps)(props, sliderDefaultProps);
+  var active = sliderProps.active,
+    className = sliderProps.className,
+    css = sliderProps.css,
+    disabled = sliderProps.disabled,
+    focused = sliderProps.focused,
+    keyFrequency = sliderProps.keyFrequency,
+    showAnchor = sliderProps.showAnchor,
+    rest = _objectWithoutProperties(sliderProps, _excluded);
+  (0, _validators.validateSteppedOnce)(function (p) {
+    return p.knobStep;
+  }, {
+    component: 'Slider',
+    stepName: 'knobStep',
+    valueName: 'max'
+  })(sliderProps);
+  var step = (0, _validators.validateSteppedOnce)(function (p) {
+    return p.step;
+  }, {
+    component: 'Slider',
+    valueName: 'max'
+  })(sliderProps);
+  var tooltip = sliderProps.tooltip === true ? _ProgressBar2.ProgressBarTooltip : sliderProps.tooltip;
+  var spotlightAccelerator = (0, _react.useRef)();
+  var ref = (0, _react.useRef)();
+  var _useRef = (0, _react.useRef)({
+      lastWheelTimeStamp: 0
+    }),
+    context = _useRef.current;
+  var handlers = (0, _useHandlers["default"])({
+    onBlur: (0, _handle.handle)((0, _handle.forward)('onBlur'), (0, _handle.forProp)('active', true), (0, _handle.forward)('onActivate')),
+    onKeyDown: (0, _handle.handle)((0, _handle.forProp)('disabled', false), (0, _handle.forwardWithPrevent)('onKeyDown'), (0, _anyPass["default"])([_utils.handleIncrement, _utils.handleDecrement])),
+    onKeyUp: (0, _handle.handle)((0, _handle.forProp)('disabled', false), (0, _handle.forwardWithPrevent)('onKeyUp'), (0, _handle.forProp)('activateOnSelect', true), (0, _handle.forKey)('enter'), (0, _handle.forward)('onActivate'))
+  }, sliderProps, spotlightAccelerator);
+  var nativeEventHandlers = (0, _useHandlers["default"])({
+    onWheel: (0, _handle.handle)((0, _handle.forProp)('disabled', false), (0, _handle.not)((0, _handle.forProp)('noWheel', true)), (0, _handle.forwardWithPrevent)('onWheel'), (0, _anyPass["default"])([_utils.handleIncrementByWheel, _utils.handleDecrementByWheel]))
+  }, sliderProps, context);
+
+  // if the props includes a css map, merge them together
+  var mergedCss = (0, _usePublicClassNames.usePublicClassNames)({
+    componentCss: _SliderModule["default"],
+    customCss: css,
+    publicClassNames: true
+  });
+  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.showAnchor, showAnchor), css && css.slider);
+  (0, _react.useEffect)(function () {
+    spotlightAccelerator.current = new _Accelerator["default"](keyFrequency);
+  }, [keyFrequency]);
+  (0, _react.useLayoutEffect)(function () {
+    var sliderRef = ref.current;
+    if (sliderRef) {
+      sliderRef.addEventListener('wheel', nativeEventHandlers.onWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if (sliderRef) {
+        sliderRef.removeEventListener('wheel', nativeEventHandlers.onWheel, {
+          passive: false
+        });
+      }
+    };
+  }, [ref, nativeEventHandlers.onWheel]);
+  delete rest.activateOnSelect;
+  delete rest.knobStep;
+  delete rest.noWheel;
+  delete rest.onActivate;
+  delete rest.step;
+  delete rest.tooltip;
+  delete rest.wheelInterval;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], _objectSpread(_objectSpread(_objectSpread({}, rest), handlers), {}, {
+    "aria-disabled": disabled,
+    className: componentClassName,
+    css: mergedCss,
+    disabled: disabled,
+    progressBarComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
+      css: mergedCss
+    }),
+    ref: ref,
+    step: step,
+    tooltipComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
+      component: tooltip,
+      css: mergedCss,
+      visible: focused
+    })
+  }));
+};
+SliderBase.displayName = 'Slider';
+SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
+  /**
+   * Activates the component when selected so that it may be manipulated via the directional
+   * input keys.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  activateOnSelect: _propTypes["default"].bool,
+  /**
+   * Sets the knob to selected state and allows it to move via 5-way controls.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  active: _propTypes["default"].bool,
+  /**
+   * Customizes the component by mapping the supplied collection of CSS class names to the
+   * corresponding internal elements and states of this component.
+   *
+   * The following classes are supported:
+   *
+   * * `slider` - The root component class
+   *
+   * @type {Object}
+   * @public
+   */
+  css: _propTypes["default"].object,
+  /**
+   * Disables component and does not generate events.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  disabled: _propTypes["default"].bool,
+  /**
+   * Indicates that the slider has gained focus and if the tooltip is present, it will be
+   * shown.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  focused: _propTypes["default"].bool,
+  /**
+   * Controls the keydown frequency with which the acceleration will "freeze".
+   * While frozen, the value of the slider is not changed via arrow key.
+   *
+   * To customize the key acceleration speed, pass an array for {@link spotlight/Accelerator.Accelerator|frequency}.
+   * Each number represents a number of an event for sampling.
+   * For example, 1 means to process all events while 3 means to process one of the three events.
+   * If the number is large, the slider value changes slowly.
+   * Example for accelerating:
+   * ```
+   * keyFrequency={[3, 3, 3, 2, 2, 2, 1]}
+   * ```
+   *
+   * @type {Number[]}
+   * @default [1]
+   * @public
+   */
+  keyFrequency: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  /**
+   * The amount to increment or decrement the position of the knob via 5-way controls.
+   *
+   * It must evenly divide into the range designated by `min` and `max`. If not specified,
+   * `step` is used for the default value.
+   *
+   * @type {Number}
+   * @public
+   */
+  knobStep: _propTypes["default"].number,
+  /**
+   * The maximum value of the slider.
+   *
+   * The range between `min` and `max` should be evenly divisible by
+   * {@link limestone/Slider.SliderBase.step|step}.
+   *
+   * @type {Number}
+   * @default 100
+   * @public
+   */
+  max: _propTypes["default"].number,
+  /**
+   * The minimum value of the slider.
+   *
+   * The range between `min` and `max` should be evenly divisible by
+   * {@link limestone/Slider.SliderBase.step|step}.
+   *
+   * @type {Number}
+   * @default 0
+   * @public
+   */
+  min: _propTypes["default"].number,
+  /**
+   * Disable wheel event.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  noWheel: _propTypes["default"].bool,
+  /**
+   * The handler when the knob is activated or deactivated by selecting it via 5-way
+   *
+   * @type {Function}
+   * @public
+   */
+  onActivate: _propTypes["default"].func,
+  /**
+   * Called when a key is pressed down while the slider is focused.
+   *
+   * When a directional key is pressed down and the knob is active (either by first
+   * pressing enter or when `activateOnSelect` is disabled), the Slider will increment or
+   * decrement the current value and emit an `onChange` event. This default behavior can be
+   * prevented by calling `preventDefault()` on the event passed to this callback.
+   *
+   * @type {Function}
+   * @public
+   */
+  onKeyDown: _propTypes["default"].func,
+  /**
+   * Called when a key is released while the slider is focused.
+   *
+   * When the enter key is released and `activateOnSelect` is enabled, the slider will be
+   * activated to enable incrementing or decrementing the value via directional keys. This
+   * default behavior can be prevented by calling `preventDefault()` on the event passed to
+   * this callback.
+   *
+   * @type {Function}
+   * @public
+   */
+  onKeyUp: _propTypes["default"].func,
+  /**
+   * Displays an anchor at `progressAnchor`.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  showAnchor: _propTypes["default"].bool,
+  /**
+   * The amount to increment or decrement the value.
+   *
+   * It must evenly divide into the range designated by `min` and `max`.
+   *
+   * @type {Number}
+   * @default 1
+   * @public
+   */
+  step: _propTypes["default"].number,
+  /**
+   * Enables the built-in tooltip
+   *
+   * To customize the tooltip, pass either a custom tooltip component or an instance of
+   * {@link limestone/Slider.SliderTooltip|SliderTooltip} with additional props configured.
+   *
+   * ```
+   * <Slider
+   *   tooltip={
+   *     <SliderTooltip percent side="after" />
+   *   }
+   * />
+   * ```
+   *
+   * The tooltip may also be passed as a child via the `"tooltip"` slot. See
+   * {@link ui/Slottable|Slottable} for more information on how slots can be used.
+   *
+   * ```
+   * <Slider>
+   *   <SliderTooltip percent side="after" />
+   * </Slider>
+   * ```
+   *
+   * If a custom tooltip is provided, it will receive the following props:
+   *
+   * * `children` - The `value` prop from the slider
+   * * `visible` - `true` if the tooltip should be displayed
+   * * `orientation` - The value of the `orientation` prop from the slider
+   * * `proportion` - A number between 0 and 1 representing the proportion of the `value` in
+   *   terms of `min` and `max`
+   *
+   * @type {Boolean|Element|Function}
+   * @public
+   */
+  tooltip: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].object, _propTypes["default"].func]),
+  /**
+   * The value of the slider.
+   *
+   * Defaults to the value of `min`.
+   *
+   * @type {Number}
+   * @public
+   */
+  value: _propTypes["default"].number,
+  /**
+   * The interval (in milliseconds) between valid wheel events.
+   *
+   * For example, 200 means to ignore wheel events occurred within 200ms
+   * of the last processed wheel event while 0 means to process all wheel events.
+   * If the number is large, the slider value changes slowly.
+   *
+   * @type {Number}
+   * @default 0
+   * @public
+   */
+  wheelInterval: _propTypes["default"].number
+};
+
+/**
+ * Limestone-specific slider behaviors to apply to {@link limestone/Slider.SliderBase|SliderBase}.
+ *
+ * @hoc
+ * @memberof limestone/Slider
+ * @mixes ui/Changeable.Changeable
+ * @mixes spotlight/Spottable.Spottable
+ * @mixes limestone/Skinnable.Skinnable
+ * @mixes ui/Slottable.Slottable
+ * @mixes ui/Slider.SliderDecorator
+ * @public
+ */
+var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["default"], _Changeable["default"], _SliderBehaviorDecorator["default"], _Spottable["default"], (0, _Slottable["default"])({
+  slots: ['knob', 'tooltip']
+}), _Skinnable["default"]);
+
+/**
+ * Slider input with Limestone styling, {@link spotlight/Spottable.Spottable|Spottable},
+ * {@link ui/Touchable|Touchable} and {@link limestone/Slider.SliderDecorator|SliderDecorator}
+ * applied.
+ *
+ * By default, `Slider` maintains the state of its `value` property. Supply the `defaultValue`
+ * property to control its initial value. If you wish to directly control updates to the
+ * component, supply a value to `value` at creation time and update it in response to `onChange`
+ * events.
+ *
+ * @class Slider
+ * @memberof limestone/Slider
+ * @mixes limestone/Slider.SliderDecorator
+ * @ui
+ * @public
+ */
+
+/**
+ * Overrides the `aria-valuetext` for the slider.
+ *
+ * By default, `aria-valuetext` is set to the current value. This should only be used when
+ * the parent controls the value of the slider directly through the props.
+ *
+ * @name aria-valuetext
+ * @memberof limestone/Slider.Slider.prototype
+ * @type {String|Number}
+ * @public
+ */
+
+var Slider = exports.Slider = SliderDecorator(SliderBase);
+Slider.defaultPropValues = sliderDefaultProps;
+
+/**
+ * A {@link limestone/TooltipDecorator.Tooltip|Tooltip} specifically adapted for use with
+ * {@link limestone/ProgressBar.ProgressBar|ProgressBar} or
+ * {@link limestone/Slider.Slider|Slider}.
+ *
+ * @see {@link limestone/ProgressBar.ProgressBarTooltip}
+ * @class SliderTooltip
+ * @memberof limestone/Slider
+ * @ui
+ * @public
+ */
+var _default = exports["default"] = Slider;