@enact/limestone 1.3.0 → 1.10.0

package/Slider/Slider.js

@@ -23,6 +23,7 @@ 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 _Touchable = _interopRequireDefault(require("@enact/ui/Touchable"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _anyPass = _interopRequireDefault(require("ramda/src/anyPass"));
@@ -35,7 +36,7 @@ var _SliderBehaviorDecorator = _interopRequireDefault(require("./SliderBehaviorD
 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"];
+var _excluded = ["active", "className", "colorPicker", "css", "disabled", "focused", "keyFrequency", "max", "min", "pressed", "showAnchor", "showMinMax"];
 /**
  * Provides Limestone-themed slider components and behaviors.
  *
@@ -65,11 +66,13 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var sliderDefaultProps = {
   activateOnSelect: false,
   active: false,
+  colorPicker: false,
   disabled: false,
   keyFrequency: [1],
   max: 100,
   min: 0,
   orientation: 'horizontal',
+  pressed: false,
   step: 1,
   wheelInterval: 0
 };
@@ -84,15 +87,21 @@ var sliderDefaultProps = {
  * @ui
  * @public
  */
-var SliderBase = exports.SliderBase = function SliderBase(props) {
+var _SliderBase = exports.SliderBase = function SliderBase(props) {
   var sliderProps = (0, _util.setDefaultProps)(props, sliderDefaultProps);
+  (0, _util.checkPropTypes)(_SliderBase, sliderProps);
   var active = sliderProps.active,
     className = sliderProps.className,
+    colorPicker = sliderProps.colorPicker,
     css = sliderProps.css,
     disabled = sliderProps.disabled,
     focused = sliderProps.focused,
     keyFrequency = sliderProps.keyFrequency,
+    max = sliderProps.max,
+    min = sliderProps.min,
+    pressed = sliderProps.pressed,
     showAnchor = sliderProps.showAnchor,
+    showMinMax = sliderProps.showMinMax,
     rest = _objectWithoutProperties(sliderProps, _excluded);
   (0, _validators.validateSteppedOnce)(function (p) {
     return p.knobStep;
@@ -108,12 +117,13 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     valueName: 'max'
   })(sliderProps);
   var tooltip = sliderProps.tooltip === true ? _ProgressBar2.ProgressBarTooltip : sliderProps.tooltip;
+  var context = (0, _react.useMemo)(function () {
+    return {
+      lastWheelTimeStamp: 0
+    };
+  }, []);
   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])),
@@ -129,7 +139,7 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     customCss: css,
     publicClassNames: true
   });
-  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.showAnchor, showAnchor), css && css.slider);
+  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.colorPicker, colorPicker), mergedCss.hasMinMax, showMinMax), mergedCss.pressed, pressed), mergedCss.showAnchor, showAnchor), css && css.slider);
   (0, _react.useEffect)(function () {
     spotlightAccelerator.current = new _Accelerator["default"](keyFrequency);
   }, [keyFrequency]);
@@ -155,25 +165,47 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
   delete rest.step;
   delete rest.tooltip;
   delete rest.wheelInterval;
+  var sliderMax = colorPicker ? 360 : max;
+  var sliderMin = colorPicker ? 0 : min;
+  var sliderStep = colorPicker ? 1 : step;
+  var styleObject = {
+    '--semantic-color-surface-default-handle': "hsla(".concat(rest.value ? rest.value : 0, ", 100%, 50%, 1)"),
+    '--semantic-color-surface-default-focused': "hsla(".concat(rest.value ? rest.value : 0, ", 100%, 50%, 1)")
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], _objectSpread(_objectSpread(_objectSpread({}, rest), handlers), {}, {
     "aria-disabled": disabled,
+    colorPicker: colorPicker,
     className: componentClassName,
     css: mergedCss,
     disabled: disabled,
+    max: sliderMax,
+    min: sliderMin,
     progressBarComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
-      css: mergedCss
+      css: mergedCss,
+      style: {
+        backgroundImage: colorPicker && (0, _utils.hueGradient)(rest.orientation)
+      }
     }),
     ref: ref,
-    step: step,
+    step: sliderStep,
+    style: colorPicker && styleObject,
     tooltipComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
       component: tooltip,
       css: mergedCss,
       visible: focused
-    })
+    }),
+    minMaxComponent: showMinMax ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: mergedCss.minMax,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: sliderMin
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: sliderMax
+      })]
+    }) : null
   }));
 };
-SliderBase.displayName = 'Slider';
-SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
+_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.
@@ -189,6 +221,14 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   active: _propTypes["default"].bool,
+  /**
+   * Indicates if this component will be used as a colorPicker.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  colorPicker: _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.
@@ -304,6 +344,14 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   onKeyUp: _propTypes["default"].func,
+  /**
+   * Indicates if the component is pressed.
+   *
+   * @type {Boolean}
+   * @default false
+   * @private
+   */
+  pressed: _propTypes["default"].bool,
   /**
    * Displays an anchor at `progressAnchor`.
    *
@@ -311,6 +359,13 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   showAnchor: _propTypes["default"].bool,
+  /**
+   * Displays the min and max values at the edges of the slider.
+   *
+   * @type {Boolean}
+   * @public
+   */
+  showMinMax: _propTypes["default"].bool,
   /**
    * The amount to increment or decrement the value.
    *
@@ -391,7 +446,9 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
  * @mixes ui/Slider.SliderDecorator
  * @public
  */
-var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["default"], _Changeable["default"], _SliderBehaviorDecorator["default"], _Spottable["default"], (0, _Slottable["default"])({
+var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["default"], (0, _Touchable["default"])({
+  activeProp: 'pressed'
+}), _Changeable["default"], _SliderBehaviorDecorator["default"], _Spottable["default"], (0, _Slottable["default"])({
   slots: ['knob', 'tooltip']
 }), _Skinnable["default"]);
 
@@ -424,7 +481,7 @@ var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["
  * @public
  */
 
-var Slider = exports.Slider = SliderDecorator(SliderBase);
+var Slider = exports.Slider = SliderDecorator(_SliderBase);
 Slider.defaultPropValues = sliderDefaultProps;
 
 /**