Implemented marqueeOn prop support for MarqueeController

Enact-DCO-1.0-Signed-off-by: Blake Stephens <blake.stephens@lge.com>

Author: Blake Stephens

packages/ui/Marquee/MarqueeController.js

@@ -56,6 +56,7 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 				complete: this.handleComplete,
 				enter: this.handleEnter,
 				leave: this.handleLeave,
+				marqueeOn: props.marqueeOn,
 				register: this.handleRegister,
 				start: this.handleStart,
 				unregister: this.handleUnregister
@@ -284,7 +285,7 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 		}
 
 		render () {
-			let props = this.props;
+			let {...props} = this.props;
 
 			if (marqueeOnFocus) {
 				props = {
@@ -294,6 +295,8 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 				};
 			}
 
+			delete props.marqueeOn;
+
 			return (
 				<MarqueeControllerContext.Provider value={this.childContext}>
 					<Wrapped {...props} />

packages/ui/Marquee/MarqueeDecorator.js

@@ -114,6 +114,10 @@ const didPropChange = (propList, prev, next) => {
 	return hasPropsChanged.indexOf(true) !== -1;
 };
 
+const getMarqueeOn = function (props, context, marqueeOnDefault = 'focus') {
+	return (props.marqueeOn || (context && context.marqueeOn) || marqueeOnDefault);
+};
+
 /*
  * There's only one timer shared for Marquee so we need to keep track of what we may be using it
  * for. We may need to clean up certain things as we move among states.
@@ -304,15 +308,13 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 
 		static defaultProps = {
 			marqueeDelay: 1000,
-			marqueeOn: 'focus',
+			// marqueeOn: 'focus',
 			marqueeOnRenderDelay: 1000,
 			marqueeResetDelay: 1000,
 			marqueeSpacing: '50%',
 			marqueeSpeed: 60
 		}
 
-		static contextType = MarqueeControllerContext
-
 		constructor (props) {
 			super(props);
 			this.state = {
@@ -338,7 +340,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			}
 
 			this.validateTextDirection();
-			if (this.props.marqueeOn === 'render') {
+			if (getMarqueeOn(this.props, this.context) === 'render') {
 				this.startAnimation(this.props.marqueeOnRenderDelay);
 			}
 			on('keydown', this.handlePointerHide);
@@ -352,7 +354,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		}
 
 		componentDidUpdate (prevProps) {
-			const {children, disabled, forceDirection, locale, marqueeOn, marqueeDisabled, marqueeSpacing, marqueeSpeed, rtl} = this.props;
+			const {children, disabled, forceDirection, locale, marqueeOn = getMarqueeOn(this.props, this.context), marqueeDisabled, marqueeSpacing, marqueeSpeed, rtl} = this.props;
 
 			let forceRestartMarquee = false;
 
@@ -371,7 +373,8 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 				this.invalidateMetrics();
 				this.cancelAnimation();
 			} else if (
-				prevProps.marqueeOn !== marqueeOn ||
+				// prevProps.marqueeOn !== marqueeOn ||
+				getMarqueeOn(prevProps, this.context) !== marqueeOn ||
 				prevProps.marqueeDisabled !== marqueeDisabled ||
 				prevProps.marqueeSpeed !== marqueeSpeed ||
 				prevProps.forceDirection !== forceDirection
@@ -383,7 +386,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 
 			this.validateTextDirection();
 			if (forceRestartMarquee || this.shouldStartMarquee()) {
-				this.tryStartingAnimation(this.props.marqueeOn === 'render' ? this.props.marqueeOnRenderDelay : this.props.marqueeDelay);
+				this.tryStartingAnimation(marqueeOn === 'render' ? this.props.marqueeOnRenderDelay : this.props.marqueeDelay);
 			}
 		}
 
@@ -402,6 +405,8 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			off('keydown', this.handlePointerHide);
 		}
 
+		static contextType = MarqueeControllerContext
+
 		promoteJob = new Job(() => {
 			if (!this.contentFits) {
 				this.setState(state => state.promoted ? null : {promoted: true});
@@ -462,7 +467,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		 * @returns {Boolean} - `true` if a possible marquee condition exists
 		 */
 		shouldStartMarquee () {
-			const {disabled, marqueeDisabled, marqueeOn} = this.props;
+			const {disabled, marqueeDisabled, marqueeOn = getMarqueeOn(this.props, this.context)} = this.props;
 			return !marqueeDisabled && (
 				marqueeOn === 'render' ||
 				!this.sync && (
@@ -769,15 +774,15 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			forwardBlur(ev, this.props);
 			if (this.isFocused) {
 				this.isFocused = false;
-				if (!this.sync && !(this.isHovered && this.props.marqueeOn === 'hover')) {
+				if (!this.sync && !(this.isHovered && getMarqueeOn(this.props, this.context) === 'hover')) {
 					this.cancelAnimation();
 				}
 			}
 		}
 
 		handleEnter = (ev) => {
 			this.isHovered = true;
-			if (this.props.marqueeOn === 'hover') {
+			if (getMarqueeOn(this.props, this.context) === 'hover') {
 				if (this.sync) {
 					this.context.enter(this);
 				} else if (!this.state.animating) {
@@ -801,7 +806,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 
 		handleUnhover () {
 			this.isHovered = false;
-			if (this.props.marqueeOn === 'hover') {
+			if (getMarqueeOn(this.props, this.context) === 'hover') {
 				if (this.sync) {
 					this.context.leave(this);
 				} else {
@@ -826,11 +831,13 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 				alignment,
 				children,
 				disabled,
-				marqueeOn,
+				marqueeOn = getMarqueeOn(this.props, this.context),
 				marqueeSpeed,
 				...rest
 			} = this.props;
 
+			console.log('marqueeOn:', marqueeOn, this.context && this.context.marqueeOn, children);
+
 			const marqueeOnFocus = marqueeOn === 'focus';
 			const marqueeOnHover = marqueeOn === 'hover';
 			const marqueeOnRender = marqueeOn === 'render';