@enact/ui
Version:
A collection of simplified unstyled cross-platform UI components for Enact
386 lines (381 loc) • 14.5 kB
JavaScript
"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", "max", "min", "minMaxComponent", "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,
/**
* Adds a child component to the slider which should show the min and max values.
*
* @see {@link ui/ComponentOverride}
*
* @type {Component|Element}
* @public
*/
minMaxComponent: _propTypes["default"].componentOverride,
/**
* 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,
max = _ref4.max,
min = _ref4.min,
minMaxComponent = _ref4.minMaxComponent,
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.noFill;
delete rest.pressed;
delete rest.step;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("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
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
className: css.minMax,
component: minMaxComponent,
orientation: orientation,
max: max,
min: min
})]
}));
}
});
/**
* 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;