@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
440 lines (432 loc) • 16.9 kB
JavaScript
;
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 Sandstone-themed slider components and behaviors.
*
* @example
* <Slider
* defaultValue={-30}
* max={100}
* min={-100}
* step={10}
* tooltip
* />
*
* @module sandstone/Slider
* @exports Slider
* @exports SliderBase
* @exports SliderDecorator
* @exports SliderTooltip
*/
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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(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; }
var sliderDefaultProps = {
activateOnSelect: false,
active: false,
disabled: false,
keyFrequency: [1],
max: 100,
min: 0,
step: 1,
wheelInterval: 0
};
/**
* Range-selection input component.
*
* @class SliderBase
* @extends ui/Slider.SliderBase
* @omit progressBarComponent
* @memberof sandstone/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 sandstone/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 sandstone/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 sandstone/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 sandstone/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
};
/**
* Sandstone-specific slider behaviors to apply to {@link sandstone/Slider.SliderBase|SliderBase}.
*
* @hoc
* @memberof sandstone/Slider
* @mixes ui/Changeable.Changeable
* @mixes spotlight/Spottable.Spottable
* @mixes sandstone/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 Sandstone styling, {@link spotlight/Spottable.Spottable|Spottable},
* {@link ui/Touchable|Touchable} and {@link sandstone/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 sandstone/Slider
* @mixes sandstone/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 sandstone/Slider.Slider.prototype
* @type {String|Number}
* @public
*/
var Slider = exports.Slider = SliderDecorator(SliderBase);
Slider.defaultPropValues = sliderDefaultProps;
/**
* A {@link sandstone/TooltipDecorator.Tooltip|Tooltip} specifically adapted for use with
* {@link sandstone/ProgressBar.ProgressBar|ProgressBar} or
* {@link sandstone/Slider.Slider|Slider}.
*
* @see {@link sandstone/ProgressBar.ProgressBarTooltip}
* @class SliderTooltip
* @memberof sandstone/Slider
* @ui
* @public
*/
var _default = exports["default"] = Slider;