WRR-6385: Converted sandstone/TimePicker/TimePickerBase HourPicker to…

… functional component (#1732)

* converted HourPicker to functional component

* fixed lint warning

* fixed review issues

* empty commit

* fixed review issues

* updated .travis.yml

---------

Co-authored-by: Juwon Jeong <juwon.jeong@lge.com>

TimePicker/TimePickerBase.js

@@ -1,5 +1,5 @@
 import kind from '@enact/core/kind';
-import {Component, Fragment} from 'react';
+import {Fragment, useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
 
 import $L from '../internal/$L';
@@ -27,45 +27,33 @@ const hours12 = [
  * @ui
  * @private
  */
-class HourPicker extends Component {
-	static propTypes = {
-		hasMeridiem: PropTypes.bool,
-		value: PropTypes.number
-	};
-
-	constructor (props) {
-		super(props);
-
-		this.state = {
-			noAnimation: false,
-			prevValue: props.value
-		};
-	}
-
-	static getDerivedStateFromProps (props, state) {
-		if (state.prevValue !== props.value) {
-			const hours = props.hasMeridiem ? hours12 : hours24;
+const HourPicker = (props) => {
+	const {hasMeridiem, value, ...rest} = props;
+	const hours = hasMeridiem ? hours12 : hours24;
 
-			return {
-				noAnimation: hours[state.prevValue] === hours[props.value],
-				prevValue: props.value
-			};
-		}
-
-		return null;
-	}
+	const [noAnimation, setNoAnimation] = useState(false);
+	const [prevValue, setPrevValue] = useState(value);
 
-	render () {
-		const {hasMeridiem, ...rest} = this.props;
-		const hours = hasMeridiem ? hours12 : hours24;
+	useEffect(() => {
+		if (prevValue !== value) {
+			const hoursArray = hasMeridiem ? hours12 : hours24;
 
-		return (
-			<DateComponentPicker {...rest} noAnimation={this.state.noAnimation}>
-				{hours}
-			</DateComponentPicker>
-		);
-	}
-}
+			setNoAnimation(hoursArray[prevValue] === hoursArray[value]);
+			setPrevValue(value);
+		}
+	}, [hasMeridiem, prevValue, value]);
+
+	return (
+		<DateComponentPicker {...rest} noAnimation={noAnimation} value={value}>
+			{hours}
+		</DateComponentPicker>
+	);
+};
+
+HourPicker.propTypes = {
+	hasMeridiem: PropTypes.bool,
+	value: PropTypes.number
+};
 
 /**
 * {@link sandstone/TimePicker.TimePickerBase} is the stateless functional time picker