WRR-5260: Convert Slider/SlideBehaviourDecorator to functional component

.travis.yml

@@ -2,7 +2,7 @@ dist: jammy
 language: node_js
 node_js:
     - lts/*
-    - node
+    - "22"
 sudo: false
 before_install:
     - curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-4.4.gpg --dearmor

Slider/Slider.js

@@ -18,6 +18,7 @@
  */
 
 import {forKey, forProp, forward, forwardWithPrevent, handle, not} from '@enact/core/handle';
+import EnactPropTypes from '@enact/core/internal/prop-types';
 import useHandlers from '@enact/core/useHandlers';
 import {setDefaultProps} from '@enact/core/util';
 import {usePublicClassNames} from '@enact/core/usePublicClassNames';
@@ -72,7 +73,7 @@ const sliderDefaultProps = {
  */
 const SliderBase = (props) => {
 	const sliderProps = setDefaultProps(props, sliderDefaultProps);
-	const {active, className, css, disabled, focused, keyFrequency, showAnchor, ...rest} = sliderProps;
+	const {active, className, css, disabled, focused, keyFrequency, showAnchor, sliderRef, ...rest} = sliderProps;
 
 	validateSteppedOnce(p => p.knobStep, {
 		component: 'Slider',
@@ -88,7 +89,6 @@ const SliderBase = (props) => {
 	const tooltip = sliderProps.tooltip === true ? ProgressBarTooltip : sliderProps.tooltip;
 
 	const spotlightAccelerator = useRef();
-	const ref = useRef();
 	const {current: context} = useRef({lastWheelTimeStamp: 0});
 
 	const handlers = useHandlers({
@@ -146,18 +146,18 @@ const SliderBase = (props) => {
 	}, [keyFrequency]);
 
 	useLayoutEffect(() => {
-		const sliderRef = ref.current;
+		const sliderRefCurrent = sliderRef.current;
 
-		if (sliderRef) {
-			sliderRef.addEventListener('wheel', nativeEventHandlers.onWheel, {passive: false});
+		if (sliderRefCurrent) {
+			sliderRefCurrent.addEventListener('wheel', nativeEventHandlers.onWheel, {passive: false});
 		}
 		return () => {
-			if (sliderRef) {
-				sliderRef.removeEventListener('wheel', nativeEventHandlers.onWheel, {passive: false});
+			if (sliderRefCurrent) {
+				sliderRefCurrent.removeEventListener('wheel', nativeEventHandlers.onWheel, {passive: false});
 			}
 		};
 
-	}, [ref, nativeEventHandlers.onWheel]);
+	}, [sliderRef, nativeEventHandlers.onWheel]);
 
 	delete rest.activateOnSelect;
 	delete rest.knobStep;
@@ -178,7 +178,7 @@ const SliderBase = (props) => {
 			progressBarComponent={
 				<ProgressBar css={mergedCss} />
 			}
-			ref={ref}
+			ref={sliderRef}
 			step={step}
 			tooltipComponent={
 				<ComponentOverride
@@ -345,6 +345,14 @@ SliderBase.propTypes = /** @lends sandstone/Slider.SliderBase.prototype */ {
 	 */
 	showAnchor: PropTypes.bool,
 
+	/**
+	 * Called with the reference to the Slider node.
+	 *
+	 * @type {Object|Function}
+	 * @public
+	 */
+	sliderRef: EnactPropTypes.ref,
+
 	/**
 	 * The amount to increment or decrement the value.
 	 *

Slider/SliderBehaviorDecorator.js

@@ -1,21 +1,16 @@
 import {forward, forwardCustom} from '@enact/core/handle';
 import hoc from '@enact/core/hoc';
 import platform from '@enact/core/platform';
+import {setDefaultProps} from "@enact/core/util";
 import Pause from '@enact/spotlight/Pause';
 import IString from 'ilib/lib/IString';
 import PropTypes from 'prop-types';
-import {Component, createRef} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 
 import $L from '../internal/$L';
 
 import {forwardSpotlightEvents} from './utils';
 
-const toggleActive = ({active}) => {
-	return {
-		active: !active
-	};
-};
-
 const defaultConfig = {
 	// FIXME: This is a compromise to maintain a single decorator for Slider and IncrementSlider
 	// that handles both a consolidated focus state and spotlight directional event mgmt. When this
@@ -26,6 +21,12 @@ const defaultConfig = {
 	emitSpotlightEvents: null
 };
 
+const sliderDefaultProps = {
+	max: 100,
+	min: 0,
+	orientation: 'horizontal'
+};
+
 // Adds sandstone-specific slider behaviors
 // * aria-valuetext handling
 //   * use aria-valuetext when set
@@ -40,63 +41,33 @@ const defaultConfig = {
 const SliderBehaviorDecorator = hoc(defaultConfig, (config, Wrapped) => {
 	const {emitSpotlightEvents} = config;
 
-	return class extends Component {
-		static displayName = 'SliderBehaviorDecorator';
-
-		static propTypes = {
-			activateOnSelect: PropTypes.bool,
-			'aria-valuetext': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-			max: PropTypes.number,
-			min: PropTypes.number,
-			orientation: PropTypes.string,
-			value: PropTypes.number
-		};
-
-		static defaultProps = {
-			max: 100,
-			min: 0,
-			orientation: 'horizontal'
-		};
-
-		constructor (props) {
-			super(props);
-
-			this.paused = new Pause();
-			this.handleActivate = this.handleActivate.bind(this);
-			this.handleBlur = this.handleBlur.bind(this);
-			this.handleDragEnd = this.handleDragEnd.bind(this);
-			this.handleDragStart = this.handleDragStart.bind(this);
-			this.handleFocus = this.handleFocus.bind(this);
-			this.handleSpotlightEvents = this.handleSpotlightEvents.bind(this);
-			this.bounds = {};
-			this.sliderRef = createRef();
-
-			this.state = {
-				active: false,
-				dragging: false,
-				focused: false,
-				useHintText: true,
-				prevValue: props.value
-			};
-		}
-
-		static getDerivedStateFromProps (props, state) {
-			if (props.value !== state.prevValue) {
-				return {
-					useHintText: false,
-					prevValue: props.value
-				};
+	const SliderBehavior = (props) => {
+		const sliderBehaviorProps = setDefaultProps(props, sliderDefaultProps);
+
+		const [paused] = useState(() => new Pause());
+		const sliderRef = useRef();
+		const [active, setActive] = useState(false);
+		const [dragging, setDragging] = useState(false);
+		const [focused, setFocused] = useState(false);
+		const [useHintText, setUseHintText] = useState(true);
+		const [prevValue, setPrevValue] = useState(sliderBehaviorProps.value);
+
+		useEffect(() => {
+			if (sliderBehaviorProps.value !== prevValue) {
+				setUseHintText(false);
+				setPrevValue(sliderBehaviorProps.value);
 			}
-			return null;
-		}
+		}, [prevValue, sliderBehaviorProps.value]);
 
-		componentWillUnmount () {
-			this.paused.resume();
-		}
 
-		getValueText () {
-			const {'aria-valuetext': ariaValueText, max, min, orientation, value = min} = this.props;
-			const {useHintText} = this.state;
+		useEffect(() => {
+			return () => {
+				paused.resume();
+			};
+		});
+
+		const getValueText = useCallback(() => {
+			const {'aria-valuetext': ariaValueText, max, min, orientation, value = min} = sliderBehaviorProps;
 
 			const valueText = (ariaValueText != null) ? ariaValueText : value;
 			const verticalHint = `${new IString($L('From {startValue} to {lastValue}')).format({startValue: min, lastValue: max})} ${valueText} ${$L('change a value with up down button')}`;
@@ -107,91 +78,99 @@ const SliderBehaviorDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			}
 
 			return valueText;
-		}
+		}, [sliderBehaviorProps, useHintText]);
 
-		focusSlider () {
-			let slider = this.sliderRef.current.node;
+		const focusSlider = useCallback(() => {
+			let slider = sliderRef.current;
 			if (slider.getAttribute('role') !== 'slider') {
 				slider = slider.querySelector('[role="slider"]');
 			}
 			slider.focus();
-		}
+		}, [sliderRef]);
 
-		handleActivate () {
-			forwardCustom('onActivate')(null, this.props);
-			this.setState(toggleActive);
-		}
+		const handleActivate = useCallback(() => {
+			forwardCustom('onActivate')(null, sliderBehaviorProps);
+			setActive(prevState => !prevState);
+		}, [setActive, sliderBehaviorProps]);
 
-		handleBlur (ev) {
-			forward('onBlur', ev, this.props);
-			this.setState({
-				focused: false,
-				useHintText: true
-			});
-		}
+		const handleBlur = useCallback((ev) => {
+			forward('onBlur', ev, sliderBehaviorProps);
+			setFocused(false);
+			setUseHintText(true);
+		}, [setFocused, setUseHintText, sliderBehaviorProps]);
 
-		handleDragStart () {
+		const handleDragStart = useCallback(() => {
 			// on platforms with a touchscreen, we want to focus slider when dragging begins
 			if (platform.touchScreen) {
-				this.focusSlider();
+				focusSlider();
 			}
-			this.paused.pause();
-			this.setState({dragging: true});
-		}
-
-		handleDragEnd () {
-			this.paused.resume();
-			this.setState({dragging: false});
-		}
-
-		handleFocus (ev) {
-			forward('onFocus', ev, this.props);
-			if (!this.props.activateOnSelect) {
-				this.handleActivate();
+			paused.pause();
+			setDragging(true);
+		}, [focusSlider, paused, setDragging]);
+
+		const handleDragEnd = useCallback(() => {
+			paused.resume();
+			setDragging(false);
+		}, [paused, setDragging]);
+
+		const handleFocus = useCallback((ev) => {
+			forward('onFocus', ev, sliderBehaviorProps);
+			if (!sliderBehaviorProps.activateOnSelect) {
+				handleActivate();
 			}
-			this.setState({focused: true});
-		}
+			setFocused(true);
+		}, [handleActivate, setFocused, sliderBehaviorProps]);
 
-		handleSpotlightEvents (ev) {
+		const handleSpotlightEvents = useCallback((ev) => {
 			if (!emitSpotlightEvents) {
-				forward('onKeyDown', ev, this.props);
+				forward('onKeyDown', ev, sliderBehaviorProps);
 			}
+			forwardSpotlightEvents(ev, sliderBehaviorProps);
+		}, [sliderBehaviorProps]);
 
-			forwardSpotlightEvents(ev, this.props);
+		const sliderProps = Object.assign({}, sliderBehaviorProps);
+
+		if (!emitSpotlightEvents) {
+			// Remove spotlight props before hitting spottable since we've handled them uniquely
+			delete sliderProps.onSpotlightLeft;
+			delete sliderProps.onSpotlightRight;
+			delete sliderProps.onSpotlightUp;
+			delete sliderProps.onSpotlightDown;
+
+			sliderProps.onKeyDown = handleSpotlightEvents;
+		} else {
+			sliderProps[emitSpotlightEvents] = handleSpotlightEvents;
 		}
 
-		render () {
-			const props = Object.assign({}, this.props);
+		return (
+			<Wrapped
+				role="slider"
+				{...sliderProps}
+				active={active}
+				aria-valuetext={getValueText()}
+				focused={focused || dragging}
+				onActivate={handleActivate}
+				onBlur={handleBlur}
+				onDragStart={handleDragStart}
+				onDragEnd={handleDragEnd}
+				onFocus={handleFocus}
+				sliderRef={sliderRef}
+			/>
+		);
 
-			if (!emitSpotlightEvents) {
-				// Remove spotlight props before hitting spottable since we've handled them uniquely
-				delete props.onSpotlightLeft;
-				delete props.onSpotlightRight;
-				delete props.onSpotlightUp;
-				delete props.onSpotlightDown;
-
-				props.onKeyDown = this.handleSpotlightEvents;
-			} else {
-				props[emitSpotlightEvents] = this.handleSpotlightEvents;
-			}
+	};
 
-			return (
-				<Wrapped
-					role="slider"
-					{...props}
-					active={this.state.active}
-					aria-valuetext={this.getValueText()}
-					focused={this.state.focused || this.state.dragging}
-					onActivate={this.handleActivate}
-					onBlur={this.handleBlur}
-					onDragStart={this.handleDragStart}
-					onDragEnd={this.handleDragEnd}
-					onFocus={this.handleFocus}
-					ref={this.sliderRef}
-				/>
-			);
-		}
+	SliderBehavior.displayName = 'SliderBehaviorDecorator';
+	SliderBehavior.propTypes = {
+		activateOnSelect: PropTypes.bool,
+		'aria-valuetext': PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+		max: PropTypes.number,
+		min: PropTypes.number,
+		orientation: PropTypes.string,
+		value: PropTypes.number
 	};
+
+	return SliderBehavior;
 });
 
 export default SliderBehaviorDecorator;