@enact/ui/Slider/Slider.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "Knob", {
  enumerable: true,
  get: function get() {
    return _Knob["default"];
  }
});
exports["default"] = exports.SliderDecorator = exports.SliderBase = exports.Slider = void 0;
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _kind = _interopRequireDefault(require("@enact/core/kind"));
var _propTypes2 = _interopRequireDefault(require("prop-types"));
var _compose = _interopRequireDefault(require("ramda/src/compose"));
var _Changeable = _interopRequireDefault(require("../Changeable"));
var _ComponentOverride = _interopRequireDefault(require("../ComponentOverride"));
var _ForwardRef = _interopRequireDefault(require("../ForwardRef"));
var _Touchable = _interopRequireDefault(require("../Touchable"));
var _Knob = _interopRequireDefault(require("./Knob"));
var _PositionDecorator = _interopRequireDefault(require("./PositionDecorator"));
var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["backgroundProgress", "componentRef", "css", "disabled", "knobComponent", "min", "orientation", "percent", "progressBarComponent", "progressAnchor", "tooltipComponent", "value"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
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); } /**
 * Unstyled slider components and behaviors to be customized by a theme or application.
 *
 * @module ui/Slider
 * @exports Knob
 * @exports Slider
 * @exports SliderBase
 * @exports SliderDecorator
 */ /**
 * An unstyled, sliding range-selection component.
 *
 * @class SliderBase
 * @memberof ui/Slider
 * @ui
 * @public
 */
var SliderBase = exports.SliderBase = (0, _kind["default"])({
  name: 'ui:Slider',
  propTypes: /** @lends ui/Slider.SliderBase.prototype */{
    /**
     * The component used to render the progress bar within the slider.
     *
     * The provided component will receive the following props from `Slider`
     *
     * * backgroundProgress - The value of `backgroundProgress`
     * * orientation        - The value of `orientation`
     * * progress           - The `value` as a proportion between `min` and `max`
     * * progressAnchor     - The value of `progressAnchor`
     *
     * This prop accepts either a Component (e.g. `MyProgress`) which will be instantiated with
     * the above props or a component instance (e.g. `<MyProgress customProp="value" />`) which
     * will have its props merged with the above props.
     *
     * @type {Component|Element}
     * @required
     * @public
     */
    progressBarComponent: _propTypes["default"].componentOverride.isRequired,
    /**
     * Background progress, as a proportion between `0` and `1`.
     *
     * @type {Number}
     * @default 0
     * @public
     */
    backgroundProgress: _propTypes2["default"].number,
    /**
     * Called with a reference to the root component.
     *
     * When using {@link ui/Slider.Slider}, the `ref` prop is forwarded to this component
     * as `componentRef`.
     *
     * @type {Object|Function}
     * @public
     */
    componentRef: _propTypes["default"].ref,
    /**
     * 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
     * * `knob`       - The knob node
     * * `horizontal` - Applied when `orientation` prop is `"horizontal"``
     * * `pressed`    - Applied when `pressed` prop is `true`
     * * `noFill`     - Applied when `noFill` prop is `true`
     * * `vertical`   - Applied when `orientation` prop is `"vertical"`
     *
     * @type {Object}
     * @public
     */
    css: _propTypes2["default"].object,
    /**
     * Disables component and does not generate events.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    disabled: _propTypes2["default"].bool,
    /**
     * Defines a custom knob component for the slider.
     *
     * By default, Slider will use its own implementation, {@link ui/Slider.Knob}.
     *
     * The following props are forwarded to the knob:
     *
     * * `className`        - A `knob` class applied by the slider
     * * `disabled`         - The value of `disabled`
     * * `orientation`      - The value of `orientation`
     * * `proportion`       - The `value` as a proportion between `min` and `max`
     * * `tooltipComponent` - The value of `tooltipComponent`
     * * `value`            - The value of `value`
     *
     * This prop accepts either a Component (e.g. `MyKnob`) which will be instantiated with
     * the above props or a component instance (e.g. `<MyKnob customProp="value" />`) which
     * will have its props merged with the above props.
     *
     * @see {@link ui/ComponentOverride}
     *
     * @type {Component|Element}
     * @default {@link ui/Slider.Knob}
     * @public
     */
    knobComponent: _propTypes["default"].componentOverride,
    /**
     * The maximum value of the slider.
     *
     * The range between `min` and `max` should be evenly divisible by
     * {@link ui/Slider.SliderBase.step|step}.
     *
     * @type {Number}
     * @default 100
     * @public
     */
    max: _propTypes2["default"].number,
    /**
     * The minimum value of the slider.
     *
     * The range between `min` and `max` should be evenly divisible by
     * {@link ui/Slider.SliderBase.step|step}.
     *
     * @type {Number}
     * @default 0
     * @public
     */
    min: _propTypes2["default"].number,
    /**
     * Applies the style where the slider bar does not display filled.
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    noFill: _propTypes2["default"].bool,
    /**
     * The orientation of the slider.
     *
     * Allowed values include:
     * * `'horizontal'` - A left and right orientation
     * * `'vertical'` - An up and down orientation
     *
     * @type {String}
     * @default "horizontal"
     * @public
     */
    orientation: _propTypes2["default"].string,
    /**
     * Applies a pressed visual effect.
     *
     * @type {Boolean}
     * @public
     */
    pressed: _propTypes2["default"].bool,
    /**
     * Sets the point, as a proportion between 0 and 1, from which the slider is filled.
     *
     * Applies to both the slider's `value` and `backgroundProgress`. In both cases,
     * setting the value of `progressAnchor` will cause the slider to fill from that point
     * down, when `value` or `backgroundProgress` is proportionally less than the anchor, or up,
     * when `value` or `backgroundProgress` is proportionally greater than the anchor, rather
     * than always from the start of the slider.
     *
     * @type {Number}
     * @default 0
     * @public
     */
    progressAnchor: _propTypes2["default"].number,
    /**
     * 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: _propTypes2["default"].number,
    /**
     * Adds a tooltip to the slider using the provided component.
     *
     * The following props are forwarded to the tooltip:
     *
     * * `children`    - The `value` prop from the slider
     * * `orientation` - The value of the `orientation` prop from the slider
     * * `proportion`  - The `value` as a proportion between `min` and `max`
     *
     * This prop accepts either a Component (e.g. `MyTooltip`) which will be instantiated with
     * the above props or a component instance (e.g. `<MyTooltip customProp="value" />`) which
     * will have its props merged with the above props.
     *
     * @see {@link ui/ComponentOverride}
     *
     * @type {Component|Element}
     * @public
     */
    tooltipComponent: _propTypes["default"].componentOverride,
    /**
     * The value of the slider.
     *
     * Defaults to the value of `min`.
     *
     * @type {Number}
     * @public
     */
    value: _propTypes2["default"].number
  },
  defaultProps: {
    disabled: false,
    knobComponent: _Knob["default"],
    min: 0,
    max: 100,
    noFill: false,
    orientation: 'horizontal',
    progressAnchor: 0,
    step: 1
  },
  styles: {
    css: _SliderModule["default"],
    className: 'slider',
    publicClassNames: true
  },
  computed: {
    className: function className(_ref) {
      var noFill = _ref.noFill,
        orientation = _ref.orientation,
        pressed = _ref.pressed,
        styler = _ref.styler;
      return styler.append(orientation, {
        noFill: noFill,
        pressed: pressed
      });
    },
    percent: function percent(_ref2) {
      var max = _ref2.max,
        min = _ref2.min,
        _ref2$value = _ref2.value,
        value = _ref2$value === void 0 ? min : _ref2$value;
      return (0, _utils.calcProportion)(min, max, value);
    },
    style: function style(_ref3) {
      var max = _ref3.max,
        min = _ref3.min,
        _style = _ref3.style,
        _ref3$value = _ref3.value,
        value = _ref3$value === void 0 ? min : _ref3$value;
      var proportion = (0, _utils.calcProportion)(min, max, value);
      return _objectSpread(_objectSpread({}, _style), {}, {
        '--ui-slider-proportion-end-knob': proportion
      });
    }
  },
  render: function render(_ref4) {
    var backgroundProgress = _ref4.backgroundProgress,
      componentRef = _ref4.componentRef,
      css = _ref4.css,
      disabled = _ref4.disabled,
      knobComponent = _ref4.knobComponent,
      min = _ref4.min,
      orientation = _ref4.orientation,
      percent = _ref4.percent,
      progressBarComponent = _ref4.progressBarComponent,
      progressAnchor = _ref4.progressAnchor,
      tooltipComponent = _ref4.tooltipComponent,
      _ref4$value = _ref4.value,
      value = _ref4$value === void 0 ? min : _ref4$value,
      rest = _objectWithoutProperties(_ref4, _excluded);
    delete rest.max;
    delete rest.noFill;
    delete rest.pressed;
    delete rest.step;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
      disabled: disabled,
      ref: componentRef,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
        backgroundProgress: backgroundProgress,
        component: progressBarComponent,
        orientation: orientation,
        progress: percent,
        progressAnchor: progressAnchor,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
          className: css.knob,
          component: knobComponent,
          disabled: disabled,
          orientation: orientation,
          proportion: percent,
          tooltipComponent: tooltipComponent,
          value: value
        })
      })
    }));
  }
});

/**
 * Adds touch and drag support to a {@link ui/Slider.SliderBase|SliderBase}.
 *
 * @hoc
 * @memberof ui/Slider
 * @mixes ui/Changeable.Changeable
 * @mixes ui/Touchable.Touchable
 * @public
 */
var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])((0, _ForwardRef["default"])({
  prop: 'componentRef'
}), _Changeable["default"], _PositionDecorator["default"], (0, _Touchable["default"])({
  activeProp: 'pressed'
}));

/**
 * A minimally-styled slider component with touch and drag support.
 *
 * @class Slider
 * @extends ui/Slider.SliderBase
 * @memberof ui/Slider
 * @mixes ui/Slider.SliderDecorator
 * @omit componentRef
 * @ui
 * @public
 */

/**
 * Called when the value is changed.
 *
 * @name onChange
 * @memberof ui/Slider.Slider.prototype
 * @type {Function}
 * @param {Object} event
 * @param {Number} event.value      Value of the slider
 * @param {Number} event.proportion Proportion of the value in terms of the min and max
 *                                  values
 * @public
 */

var Slider = exports.Slider = SliderDecorator(SliderBase);
var _default = exports["default"] = Slider;