Feature/enyo 4811 roysutton

packages/moonstone/CHANGELOG.md

@@ -15,6 +15,10 @@ The following is a curated list of changes in the Enact moonstone module, newest
 - `moonstone/VirtualList` to scroll correctly using page down key with disabled items
 - `moonstone/Scrollable` to not cause a script error when scrollbar is not rendered
 - `moonstone/Picker` incrementer and decrementer to not change size when focused
+- `moonstone/Marquee` to correctly start when hovering on disabled spottable components
+- `moonstone/Marquee.MarqueeController` to not abort marquee when moving among components
+- `moonstone/Picker` marquee issues with disabled buttons or Picker
+- `moonstone/LabeledItem` to start marquee when hovering over in disabled state
 
 ## [1.12.1] - 2017-11-07
 

packages/moonstone/LabeledItem/LabeledItem.js

@@ -41,6 +41,14 @@ const LabeledItemBase = kind({
 		 */
 		children: PropTypes.node.isRequired,
 
+		/**
+		 * When `true`, applies a disabled style and the control becomes non-interactive.
+		 *
+		 * @type {Boolean}
+		 * @public
+		 */
+		disabled: PropTypes.bool,
+
 		/**
 		 * The label to be displayed along with the text.
 		 *
@@ -63,13 +71,13 @@ const LabeledItemBase = kind({
 		className: 'labeleditem'
 	},
 
-	render: ({children, label, titleIcon, ...rest}) => (
-		<Controller {...rest}>
+	render: ({children, disabled, label, titleIcon, ...rest}) => (
+		<Controller disabled={disabled} {...rest}>
 			<div className={css.text}>
-				<MarqueeText className={css.title}>{children}</MarqueeText>
+				<MarqueeText disabled={disabled} className={css.title}>{children}</MarqueeText>
 				{(titleIcon != null) ? <Icon small className={css.icon}>{titleIcon}</Icon> : null}
 			</div>
-			{(label != null) ? <MarqueeText className={css.label}>{label}</MarqueeText> : null}
+			{(label != null) ? <MarqueeText disabled={disabled} className={css.label}>{label}</MarqueeText> : null}
 		</Controller>
 	)
 });

packages/moonstone/LabeledItem/tests/LabeledItem-specs.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, shallow} from 'enzyme';
 
 import LabeledItem from '../LabeledItem';
 import css from '../LabeledItem.less';
@@ -44,7 +44,7 @@ describe('LabeledItem Specs', () => {
 	});
 
 	it('should have \'disabled\' HTML attribute when \'disabled=true\'', function () {
-		const item = mount(
+		const item = shallow(
 			<LabeledItem disabled>I am a disabled labeledItem</LabeledItem>
 		);
 

packages/moonstone/Marquee/MarqueeController.js

@@ -1,5 +1,6 @@
 import {forward} from '@enact/core/handle';
 import hoc from '@enact/core/hoc';
+import {Job} from '@enact/core/util';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -33,6 +34,22 @@ const contextTypes = {
 	 */
 	complete: PropTypes.func,
 
+	/**
+	 * Called by Marquee instances when hovered
+	 *
+	 * @type {Function}
+	 * @memberof moonstone/Marquee.Marquee.contextTypes
+	 */
+	enter: PropTypes.func,
+
+	/**
+	 * Called by Marquee instances when unhovered
+	 *
+	 * @type {Function}
+	 * @memberof moonstone/Marquee.Marquee.contextTypes
+	 */
+	leave: PropTypes.func,
+
 	/**
 	 * Called to register a Marquee instance to be synchronized
 	 *
@@ -111,12 +128,20 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 			return {
 				cancel: this.handleCancel,
 				complete: this.handleComplete,
+				enter: this.handleEnter,
+				leave: this.handleLeave,
 				register: this.handleRegister,
 				start: this.handleStart,
 				unregister: this.handleUnregister
 			};
 		}
 
+		componentWillUnmount () {
+			this.cancelJob.stop();
+		}
+
+		cancelJob = new Job(() => this.doCancel(), 30)
+
 		/*
 		 * Registers `component` with a set of handlers for `start` and `stop`.
 		 *
@@ -169,6 +194,7 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 		 * @returns	{undefined}
 		 */
 		handleStart = (component) => {
+			this.cancelJob.stop();
 			if (!this.anyRunning()) {
 				this.markAll(STATE.ready);
 				this.dispatch('start', component);
@@ -182,9 +208,16 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 		 *
 		 * @returns	{undefined}
 		 */
-		handleCancel = (component) => {
+		handleCancel = () => {
+			this.cancelJob.start();
+		}
+
+		doCancel = () => {
+			if (this.isHovered || this.isFocused) {
+				return;
+			}
 			this.markAll(STATE.inactive);
-			this.dispatch('stop', component);
+			this.dispatch('stop');
 		}
 
 		/*
@@ -197,17 +230,34 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 		handleComplete = (component) => {
 			const complete = this.markReady(component);
 			if (complete) {
+				this.cancelJob.stop();
 				this.markAll(STATE.ready);
 				this.dispatch('start');
 			}
 		}
 
+		handleEnter = () => {
+			this.isHovered = true;
+			if (!this.anyRunning()) {
+				this.dispatch('start');
+			}
+			this.cancelJob.stop();
+		}
+
+		handleLeave = () => {
+			this.isHovered = false;
+			this.cancelJob.start();
+		}
+
 		/*
 		 * Handler for the focus event
 		 */
 		handleFocus = (ev) => {
 			this.isFocused = true;
-			this.dispatch('start');
+			if (!this.anyRunning()) {
+				this.dispatch('start');
+			}
+			this.cancelJob.stop();
 			forwardFocus(ev, this.props);
 		}
 
@@ -216,8 +266,7 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 		 */
 		handleBlur = (ev) => {
 			this.isFocused = false;
-			this.dispatch('stop');
-			this.markAll(STATE.inactive);
+			this.cancelJob.start();
 			forwardBlur(ev, this.props);
 		}
 
@@ -312,7 +361,10 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => {
 				props = {
 					...this.props,
 					onBlur: this.handleBlur,
-					onFocus: this.handleFocus
+					onFocus: this.handleFocus,
+					// When picker button becomes disabled, it doesn't fire blur, but does fire
+					// `onSpotlightDisappear`.  We should investigate why `onBlur` does not fire
+					onSpotlightDisappear: this.handleBlur
 				};
 			}
 

packages/moonstone/Marquee/MarqueeDecorator.js

@@ -299,6 +299,8 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 				this.textDirectionValidated = false;
 			} else if (next.marqueeOn !== marqueeOn || next.marqueeDisabled !== marqueeDisabled || next.marqueeSpeed !== marqueeSpeed) {
 				this.cancelAnimation();
+			} else if (next.disabled && this.isHovered && marqueeOn === 'focus' && this.sync) {
+				this.context.enter(this);
 			}
 		}
 
@@ -372,7 +374,8 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 				this.forceRestartMarquee ||
 				!this.sync && (
 					(this.isFocused && this.props.marqueeOn === 'focus') ||
-					(this.isHovered && this.props.marqueeOn === 'hover')
+					(this.isHovered && this.props.marqueeOn === 'hover') ||
+					(this.isHovered && this.props.marqueeOn === 'focus' && this.props.disabled)
 				)
 			);
 		}
@@ -568,6 +571,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		cancelAnimation = () => {
 			if (this.sync) {
 				this.context.cancel(this);
+				return;
 			}
 
 			this.stop();
@@ -592,35 +596,51 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 
 		handleFocus = (ev) => {
 			this.isFocused = true;
-			this.setState((prevState) => {
-				if (!prevState.animating) {
-					this.startAnimation();
-				}
-				return null;
-			});
+			if (!this.sync) {
+				this.setState((prevState) => {
+					if (!prevState.animating) {
+						this.startAnimation();
+					}
+					return null;
+				});
+			}
 			forwardFocus(ev, this.props);
 		}
 
 		handleBlur = (ev) => {
 			this.isFocused = false;
-			this.cancelAnimation();
+			if (!this.sync) {
+				this.cancelAnimation();
+			}
 			forwardBlur(ev, this.props);
 		}
 
 		handleEnter = (ev) => {
 			this.isHovered = true;
-			this.setState((prevState) => {
-				if (!prevState.animating) {
-					this.startAnimation();
+			if (this.props.disabled || this.props.marqueeOn === 'hover') {
+				if (this.sync) {
+					this.context.enter(this);
+				} else {
+					this.setState((prevState) => {
+						if (!prevState.animating) {
+							this.startAnimation();
+						}
+						return null;
+					});
 				}
-				return null;
-			});
+			}
 			forwardEnter(ev, this.props);
 		}
 
 		handleLeave = (ev) => {
 			this.isHovered = false;
-			this.cancelAnimation();
+			if (this.props.disabled || this.props.marqueeOn === 'hover') {
+				if (this.sync) {
+					this.context.leave(this);
+				} else {
+					this.cancelAnimation();
+				}
+			}
 			forwardLeave(ev, this.props);
 		}
 
@@ -669,7 +689,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			}
 
 			// TODO: cancel others on hover
-			if (marqueeOnHover || (disabled && marqueeOnFocus)) {
+			if (marqueeOnHover || marqueeOnFocus) {
 				rest[enter] = this.handleEnter;
 				rest[leave] = this.handleLeave;
 			}

packages/moonstone/internal/Picker/Picker.less

@@ -93,6 +93,7 @@
 			border-width: 0;
 			border-style: solid;
 			border-radius: inherit;
+			pointer-events: none;
 		}
 
 		.icon {

packages/moonstone/internal/Picker/PickerButton.js

@@ -1,9 +1,11 @@
-import Holdable from '../Holdable';
+import {forward, handle} from '@enact/core/handle';
 import kind from '@enact/core/kind';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Pure from '@enact/ui/internal/Pure';
 
+import {contextTypes} from '../../Marquee/MarqueeController';
+import Holdable from '../Holdable';
 import Icon from '../../Icon';
 import IconButton from '../../IconButton';
 import {withSkinnableProps} from '../../Skinnable';
@@ -26,10 +28,35 @@ const PickerButtonBase = kind({
 		spotlightDisabled: PropTypes.bool
 	},
 
+	defaultProps: {
+		joined: false
+	},
+
+	contextTypes: contextTypes,
+
 	styles: {
 		css
 	},
 
+	handlers: {
+		onMouseEnter: handle(
+			forward('onMouseEnter'),
+			(ev, props, context) => {
+				if (context.enter) {
+					context.enter(null);
+				}
+			}
+		),
+		onMouseLeave: handle(
+			forward('onMouseLeave'),
+			(ev, props, context) => {
+				if (context.leave) {
+					context.leave(null);
+				}
+			}
+		)
+	},
+
 	computed: {
 		className: ({hidden, styler}) => styler.append({
 			hidden

packages/spotlight/CHANGELOG.md

@@ -11,6 +11,7 @@ The following is a curated list of changes in the Enact spotlight module, newest
 ### Fixed
 
 - `spotlight` to handle non-5-way keys correctly to focus on next 5-way keys
+- `spotlight/Spottable` to forward `onMouseEnter` and `onMouseLeave`
 
 ## [1.12.1] - 2017-11-07
 

packages/spotlight/Spottable/Spottable.js

@@ -321,11 +321,13 @@ const Spottable = hoc(defaultConfig, (config, Wrapped) => {
 			}
 		}
 
-		handleEnter = () => {
+		handleEnter = (ev) => {
+			forward('onMouseEnter', ev, this.props);
 			this.isHovered = true;
 		}
 
-		handleLeave = () => {
+		handleLeave = (ev) => {
+			forward('onMouseLeave', ev, this.props);
 			this.isHovered = false;
 		}