From a8b70cbdf832cf92ac651efb8464546c56560d25 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Thu, 9 Nov 2017 18:26:09 -0500 Subject: [PATCH 01/18] Allow MarqueeController more control Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- .../moonstone/Marquee/MarqueeController.js | 55 +++++++++++++++++-- .../moonstone/Marquee/MarqueeDecorator.js | 23 +++++--- 2 files changed, 66 insertions(+), 12 deletions(-) diff --git a/packages/moonstone/Marquee/MarqueeController.js b/packages/moonstone/Marquee/MarqueeController.js index 5fdb949c6e..a28ba2399e 100644 --- a/packages/moonstone/Marquee/MarqueeController.js +++ b/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,16 @@ 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 }; } + cancelJob = new Job(() => this.doCancel(), 30) + /* * Registers `component` with a set of handlers for `start` and `stop`. * @@ -169,6 +190,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 +204,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 +226,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 +262,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); } diff --git a/packages/moonstone/Marquee/MarqueeDecorator.js b/packages/moonstone/Marquee/MarqueeDecorator.js index b6ed3eaf7e..a3a7066857 100644 --- a/packages/moonstone/Marquee/MarqueeDecorator.js +++ b/packages/moonstone/Marquee/MarqueeDecorator.js @@ -568,6 +568,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => { cancelAnimation = () => { if (this.sync) { this.context.cancel(this); + return; } this.stop(); @@ -609,18 +610,26 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => { handleEnter = (ev) => { this.isHovered = true; - this.setState((prevState) => { - if (!prevState.animating) { - this.startAnimation(); - } - return null; - }); + if (this.sync) { + this.context.enter(this); + } else { + this.setState((prevState) => { + if (!prevState.animating) { + this.startAnimation(); + } + return null; + }); + } forwardEnter(ev, this.props); } handleLeave = (ev) => { this.isHovered = false; - this.cancelAnimation(); + if (this.sync) { + this.context.leave(this); + } else { + this.cancelAnimation(); + } forwardLeave(ev, this.props); } From 97db4d690791bdbb4e967c7235f7fb717e18c03c Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Thu, 9 Nov 2017 18:34:26 -0500 Subject: [PATCH 02/18] Apply same to focus/blur Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/Marquee/MarqueeDecorator.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/moonstone/Marquee/MarqueeDecorator.js b/packages/moonstone/Marquee/MarqueeDecorator.js index a3a7066857..4f172b1264 100644 --- a/packages/moonstone/Marquee/MarqueeDecorator.js +++ b/packages/moonstone/Marquee/MarqueeDecorator.js @@ -593,18 +593,22 @@ 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); } From a6e9b0a97859fcf8d3bca00f7afbd486345fd756 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Fri, 10 Nov 2017 12:08:58 -0500 Subject: [PATCH 03/18] Fix Spottable and PickerButton Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/CHANGELOG.md | 3 ++ .../moonstone/Marquee/MarqueeDecorator.js | 37 +++++++++++-------- .../moonstone/internal/Picker/PickerButton.js | 29 +++++++++++++-- packages/spotlight/CHANGELOG.md | 1 + packages/spotlight/Spottable/Spottable.js | 6 ++- 5 files changed, 56 insertions(+), 20 deletions(-) diff --git a/packages/moonstone/CHANGELOG.md b/packages/moonstone/CHANGELOG.md index 45f59f31af..a3e43e738d 100644 --- a/packages/moonstone/CHANGELOG.md +++ b/packages/moonstone/CHANGELOG.md @@ -15,6 +15,9 @@ 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` to start marquee when hovering over disabled incrementer/decrementer ## [1.12.1] - 2017-11-07 diff --git a/packages/moonstone/Marquee/MarqueeDecorator.js b/packages/moonstone/Marquee/MarqueeDecorator.js index 4f172b1264..9f6950fae2 100644 --- a/packages/moonstone/Marquee/MarqueeDecorator.js +++ b/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) ) ); } @@ -614,25 +617,29 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => { handleEnter = (ev) => { this.isHovered = true; - if (this.sync) { - this.context.enter(this); - } else { - this.setState((prevState) => { - if (!prevState.animating) { - this.startAnimation(); - } - return null; - }); + 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; + }); + } } forwardEnter(ev, this.props); } handleLeave = (ev) => { this.isHovered = false; - if (this.sync) { - this.context.leave(this); - } else { - this.cancelAnimation(); + if (this.props.disabled || this.props.marqueeOn === 'hover') { + if (this.sync) { + this.context.leave(this); + } else { + this.cancelAnimation(); + } } forwardLeave(ev, this.props); } @@ -682,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; } diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index 2d30b12be3..5f1e6dfabb 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/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,17 +28,38 @@ const PickerButtonBase = kind({ spotlightDisabled: PropTypes.bool }, + 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 }) }, - render: ({disabled, icon, joined, ...rest}) => { + render: ({disabled, icon, joined, onMouseEnter, onMouseLeave, ...rest}) => { if (joined) { delete rest.hidden; delete rest.onSpotlightDisappear; @@ -50,7 +73,7 @@ const PickerButtonBase = kind({ ); } else { return ( - + {icon} ); diff --git a/packages/spotlight/CHANGELOG.md b/packages/spotlight/CHANGELOG.md index 87bc9574fb..98b32121cd 100644 --- a/packages/spotlight/CHANGELOG.md +++ b/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 diff --git a/packages/spotlight/Spottable/Spottable.js b/packages/spotlight/Spottable/Spottable.js index 9219d29b0e..00de8fd8f9 100644 --- a/packages/spotlight/Spottable/Spottable.js +++ b/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; } From 43ba215d0a2c080016be5f0aa961eacd3d8c25e7 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Fri, 10 Nov 2017 14:45:23 -0500 Subject: [PATCH 04/18] Stop job on unmount Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/Marquee/MarqueeController.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/moonstone/Marquee/MarqueeController.js b/packages/moonstone/Marquee/MarqueeController.js index a28ba2399e..547525ca44 100644 --- a/packages/moonstone/Marquee/MarqueeController.js +++ b/packages/moonstone/Marquee/MarqueeController.js @@ -136,6 +136,10 @@ const MarqueeController = hoc(defaultConfig, (config, Wrapped) => { }; } + componentWillUnmount () { + this.cancelJob.stop(); + } + cancelJob = new Job(() => this.doCancel(), 30) /* From 6770d65c840ccdb6ee317b26eef6fe77d0efd1d1 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Fri, 10 Nov 2017 16:24:54 -0500 Subject: [PATCH 05/18] Don't clobber handlers for joined picker Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/internal/Picker/PickerButton.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index 5f1e6dfabb..70ff0e5d07 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/packages/moonstone/internal/Picker/PickerButton.js @@ -1,4 +1,4 @@ -import {forward, handle} from '@enact/core/handle'; +import {forward, forProp, handle} from '@enact/core/handle'; import kind from '@enact/core/kind'; import React from 'react'; import PropTypes from 'prop-types'; @@ -37,6 +37,7 @@ const PickerButtonBase = kind({ handlers: { onMouseEnter: handle( forward('onMouseEnter'), + forProp('joined', false), (ev, props, context) => { if (context.enter) { context.enter(null); @@ -45,6 +46,7 @@ const PickerButtonBase = kind({ ), onMouseLeave: handle( forward('onMouseLeave'), + forProp('joined', false), (ev, props, context) => { if (context.leave) { context.leave(null); @@ -59,7 +61,7 @@ const PickerButtonBase = kind({ }) }, - render: ({disabled, icon, joined, onMouseEnter, onMouseLeave, ...rest}) => { + render: ({disabled, icon, joined, ...rest}) => { if (joined) { delete rest.hidden; delete rest.onSpotlightDisappear; @@ -73,7 +75,7 @@ const PickerButtonBase = kind({ ); } else { return ( - + {icon} ); From 2c4f9dcfa1c5e6b68d98c98ca3178cf8cb0db758 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Fri, 10 Nov 2017 17:09:28 -0500 Subject: [PATCH 06/18] Make sure joined is boolean Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/internal/Picker/PickerButton.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index 70ff0e5d07..c9e387b131 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/packages/moonstone/internal/Picker/PickerButton.js @@ -28,6 +28,10 @@ const PickerButtonBase = kind({ spotlightDisabled: PropTypes.bool }, + defaultProps: { + joined: false + }, + contextTypes: contextTypes, styles: { From eccc37c0f5b73d16175f793ce4364a2c156c527b Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Fri, 10 Nov 2017 18:06:57 -0500 Subject: [PATCH 07/18] Fix leaving picker button after disable Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/Marquee/MarqueeController.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/moonstone/Marquee/MarqueeController.js b/packages/moonstone/Marquee/MarqueeController.js index 547525ca44..efc51745ef 100644 --- a/packages/moonstone/Marquee/MarqueeController.js +++ b/packages/moonstone/Marquee/MarqueeController.js @@ -361,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 }; } From 828998b9a16f2bc39f52c01d57a42e5ae72c9a1d Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 13 Nov 2017 16:56:53 -0500 Subject: [PATCH 08/18] Trigger with disabled joined button Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/internal/Picker/PickerButton.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index c9e387b131..8d1ca3ec0b 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/packages/moonstone/internal/Picker/PickerButton.js @@ -41,18 +41,16 @@ const PickerButtonBase = kind({ handlers: { onMouseEnter: handle( forward('onMouseEnter'), - forProp('joined', false), (ev, props, context) => { - if (context.enter) { + if (context.enter && (props.joined || props.disabled)) { context.enter(null); } } ), onMouseLeave: handle( forward('onMouseLeave'), - forProp('joined', false), (ev, props, context) => { - if (context.leave) { + if (context.leave && (props.joined || props.disabled)) { context.leave(null); } } From 237bf446d3c5278be1dad6c3e058a89c39c39275 Mon Sep 17 00:00:00 2001 From: Stephen Choi Date: Mon, 13 Nov 2017 14:03:59 -0800 Subject: [PATCH 09/18] Fix LabeledItem to marquee on disabled --- packages/moonstone/CHANGELOG.md | 1 + packages/moonstone/LabeledItem/LabeledItem.js | 16 ++++++++++++---- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/moonstone/CHANGELOG.md b/packages/moonstone/CHANGELOG.md index a3e43e738d..b646bccae5 100644 --- a/packages/moonstone/CHANGELOG.md +++ b/packages/moonstone/CHANGELOG.md @@ -18,6 +18,7 @@ The following is a curated list of changes in the Enact moonstone module, newest - `moonstone/Marquee` to correctly start when hovering on disabled spottable components - `moonstone/Marquee.MarqueeController` to not abort marquee when moving among components - `moonstone/Picker` to start marquee when hovering over disabled incrementer/decrementer +- `moonstone/LabeledItem` to start marquee when hovering over in disabled state ## [1.12.1] - 2017-11-07 diff --git a/packages/moonstone/LabeledItem/LabeledItem.js b/packages/moonstone/LabeledItem/LabeledItem.js index 5d6cac6b85..9362827832 100644 --- a/packages/moonstone/LabeledItem/LabeledItem.js +++ b/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}) => ( - + render: ({children, disabled, label, titleIcon, ...rest}) => ( +
- {children} + {children} {(titleIcon != null) ? {titleIcon} : null}
- {(label != null) ? {label} : null} + {(label != null) ? {label} : null} ) }); From b7264cdd19628f0d01dccc19a8bda5a2eb094017 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 13 Nov 2017 18:08:46 -0500 Subject: [PATCH 10/18] Allow disabled joined picker to marquee Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/CHANGELOG.md | 2 +- packages/moonstone/internal/Picker/Picker.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/moonstone/CHANGELOG.md b/packages/moonstone/CHANGELOG.md index b646bccae5..56c835628c 100644 --- a/packages/moonstone/CHANGELOG.md +++ b/packages/moonstone/CHANGELOG.md @@ -17,7 +17,7 @@ The following is a curated list of changes in the Enact moonstone module, newest - `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` to start marquee when hovering over disabled incrementer/decrementer +- `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 diff --git a/packages/moonstone/internal/Picker/Picker.less b/packages/moonstone/internal/Picker/Picker.less index 3f3d2e92bf..c9f8a9ea1e 100644 --- a/packages/moonstone/internal/Picker/Picker.less +++ b/packages/moonstone/internal/Picker/Picker.less @@ -93,6 +93,7 @@ border-width: 0; border-style: solid; border-radius: inherit; + pointer-events: none; } .icon { From ca7eef62abb4191391d1501e7678440bea9af0bc Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Mon, 13 Nov 2017 18:20:00 -0500 Subject: [PATCH 11/18] Fix linter warning Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/internal/Picker/PickerButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index 8d1ca3ec0b..e220f5263b 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/packages/moonstone/internal/Picker/PickerButton.js @@ -1,4 +1,4 @@ -import {forward, forProp, handle} from '@enact/core/handle'; +import {forward, handle} from '@enact/core/handle'; import kind from '@enact/core/kind'; import React from 'react'; import PropTypes from 'prop-types'; From 67baa87383dc8d854b2e4b3da1767ee48e0fac18 Mon Sep 17 00:00:00 2001 From: Stephen Choi Date: Mon, 13 Nov 2017 16:51:45 -0800 Subject: [PATCH 12/18] Allow non-joined Picker to handle onMouseEnter/Leave --- packages/moonstone/internal/Picker/PickerButton.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index e220f5263b..6bfb6cdcac 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/packages/moonstone/internal/Picker/PickerButton.js @@ -42,7 +42,7 @@ const PickerButtonBase = kind({ onMouseEnter: handle( forward('onMouseEnter'), (ev, props, context) => { - if (context.enter && (props.joined || props.disabled)) { + if (context.enter) { context.enter(null); } } @@ -50,7 +50,7 @@ const PickerButtonBase = kind({ onMouseLeave: handle( forward('onMouseLeave'), (ev, props, context) => { - if (context.leave && (props.joined || props.disabled)) { + if (context.leave) { context.leave(null); } } From 7c3be7427dbb86da54628c618f513d03300a7194 Mon Sep 17 00:00:00 2001 From: Stephen Choi Date: Mon, 13 Nov 2017 17:14:10 -0800 Subject: [PATCH 13/18] Fix test --- packages/moonstone/LabeledItem/tests/LabeledItem-specs.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/moonstone/LabeledItem/tests/LabeledItem-specs.js b/packages/moonstone/LabeledItem/tests/LabeledItem-specs.js index 996b7781be..01a0121e67 100644 --- a/packages/moonstone/LabeledItem/tests/LabeledItem-specs.js +++ b/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( I am a disabled labeledItem ); From 7e966cf228d903e681e2d4dcde796ded1827b17d Mon Sep 17 00:00:00 2001 From: Aaron Tam Date: Wed, 15 Nov 2017 14:12:32 -0800 Subject: [PATCH 14/18] Fixes up change log entry positioning --- packages/moonstone/CHANGELOG.md | 8 ++++---- packages/spotlight/CHANGELOG.md | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/moonstone/CHANGELOG.md b/packages/moonstone/CHANGELOG.md index 6dd3d3ec7d..15f084770b 100644 --- a/packages/moonstone/CHANGELOG.md +++ b/packages/moonstone/CHANGELOG.md @@ -11,6 +11,10 @@ The following is a curated list of changes in the Enact moonstone module, newest ### Fixed - `moonstone/Expandable` and derivatives to use the new `ease-out-quart` animation timing function to better match the aesthetic of Enyo's Expandables +- `moonstone/LabeledItem` to start marquee when hovering over in disabled state +- `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 ## [1.12.2] - 2017-11-15 @@ -23,10 +27,6 @@ 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 - `moonstone/Header` to use a slightly smaller font size for `title` in non-latin locales and a line-height for `titleBelow` and `subTitleBelow` that better meets the needs of tall-glyph languages like Tamil and Thai, as well as latin locales - `moonstone/Scroller` and `moonstone/VirtualList` to keep spotlight when pressing a 5-way control while scrolling - `moonstone/Panels` to prevent user interaction with panel contents during transition diff --git a/packages/spotlight/CHANGELOG.md b/packages/spotlight/CHANGELOG.md index 606fa80fb3..ff455cc751 100644 --- a/packages/spotlight/CHANGELOG.md +++ b/packages/spotlight/CHANGELOG.md @@ -10,12 +10,13 @@ The following is a curated list of changes in the Enact spotlight module, newest ### Fixed +- `spotlight/Spottable` to forward `onMouseEnter` and `onMouseLeave` + ## [1.12.2] - 2017-11-15 ### 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 From 963e3ba9acb7fdcd54db4a74be1bcda395d1a5fd Mon Sep 17 00:00:00 2001 From: Aaron Tam Date: Wed, 15 Nov 2017 14:29:04 -0800 Subject: [PATCH 15/18] Fixes up bad merge --- packages/spotlight/CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/spotlight/CHANGELOG.md b/packages/spotlight/CHANGELOG.md index ff455cc751..606fa80fb3 100644 --- a/packages/spotlight/CHANGELOG.md +++ b/packages/spotlight/CHANGELOG.md @@ -10,13 +10,12 @@ The following is a curated list of changes in the Enact spotlight module, newest ### Fixed -- `spotlight/Spottable` to forward `onMouseEnter` and `onMouseLeave` - ## [1.12.2] - 2017-11-15 ### 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 From 858a079ed2034a9941e62440bb71ef4be5d7ca2e Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Thu, 16 Nov 2017 15:30:03 -0500 Subject: [PATCH 16/18] Extract common code and clean up Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- .../moonstone/Marquee/MarqueeDecorator.js | 28 +++++++------------ .../moonstone/internal/Picker/PickerButton.js | 4 --- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/packages/moonstone/Marquee/MarqueeDecorator.js b/packages/moonstone/Marquee/MarqueeDecorator.js index 9f6950fae2..02fe4dd9c4 100644 --- a/packages/moonstone/Marquee/MarqueeDecorator.js +++ b/packages/moonstone/Marquee/MarqueeDecorator.js @@ -540,15 +540,17 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => { if (this.sync) { this.context.complete(this); } else { - this.setState((prevState) => { - if (!prevState.animating) { - this.startAnimation(); - } - return null; - }); + this.setState(this.setStateStartAnimation); } } + setStateStartAnimation = (prevState) => { + if (!prevState.animating) { + this.startAnimation(); + } + return null; + } + /* * Resets and restarts the marquee after `marqueeResetDelay` milliseconds * @@ -597,12 +599,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => { handleFocus = (ev) => { this.isFocused = true; if (!this.sync) { - this.setState((prevState) => { - if (!prevState.animating) { - this.startAnimation(); - } - return null; - }); + this.setState(this.setStateStartAnimation); } forwardFocus(ev, this.props); } @@ -621,12 +618,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => { if (this.sync) { this.context.enter(this); } else { - this.setState((prevState) => { - if (!prevState.animating) { - this.startAnimation(); - } - return null; - }); + this.setState(this.setStateStartAnimation); } } forwardEnter(ev, this.props); diff --git a/packages/moonstone/internal/Picker/PickerButton.js b/packages/moonstone/internal/Picker/PickerButton.js index 6bfb6cdcac..c93592217c 100644 --- a/packages/moonstone/internal/Picker/PickerButton.js +++ b/packages/moonstone/internal/Picker/PickerButton.js @@ -28,10 +28,6 @@ const PickerButtonBase = kind({ spotlightDisabled: PropTypes.bool }, - defaultProps: { - joined: false - }, - contextTypes: contextTypes, styles: { From 621127899659f5703bd2d6658d7013019185f241 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Thu, 16 Nov 2017 16:25:58 -0500 Subject: [PATCH 17/18] Fix up CHANGELOG problems Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- CHANGELOG.md | 2 +- packages/moonstone/CHANGELOG.md | 1 + packages/ui/CHANGELOG.md | 5 +++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13cf42e671..5dccd66172 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,7 +22,7 @@ The following is a curated list of changes in the Enact project, newest changes - `spotlight` to handle non-5-way keys correctly to focus on next 5-way keys - `spotlight/Spottable` to forward `onMouseEnter` and `onMouseLeave` - `ui/Remeasurable` to update on every trigger change -- `ui/Transition` to revert 1.12.1 change to support `clip` transition-type directions and endering optimizations +- `ui/Transition` to revert 1.12.1 change to support `clip` transition-type directions and rendering optimizations ## [1.12.1] - 2017-11-07 diff --git a/packages/moonstone/CHANGELOG.md b/packages/moonstone/CHANGELOG.md index 15f084770b..e41a12ceaa 100644 --- a/packages/moonstone/CHANGELOG.md +++ b/packages/moonstone/CHANGELOG.md @@ -15,6 +15,7 @@ The following is a curated list of changes in the Enact moonstone module, newest - `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/Panels` to prevent loss of spotlight issue when moving rapidly between panels ## [1.12.2] - 2017-11-15 diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index b08d850b8c..96b6958105 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -12,13 +12,14 @@ The following is a curated list of changes in the Enact ui module, newest change ### Fixed +- `ui/ViewManager` to prevent interaction issue with `moonstone/Scroller` + ## [1.12.2] - 2017-11-15 ### Fixed -- `ui/Viewport` to blur Spotlight `onWillTransition` -- `ui/View` use `idleUntil` to prevent wheel blocking error - `ui/Remeasurable` to update on every trigger change +- `ui/Transition` to revert 1.12.1 change to support `clip` transition-type directions and rendering optimizations ## [1.12.1] - 2017-11-07 From 48c88f7fdb9015557fc7629b03986f2f9ff32c52 Mon Sep 17 00:00:00 2001 From: Roy Sutton Date: Thu, 16 Nov 2017 16:28:17 -0500 Subject: [PATCH 18/18] Fix up CHANGELOG problems Enact-DCO-1.0-Signed-off-by: Roy Sutton roy.sutton@lge.com --- packages/moonstone/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/moonstone/CHANGELOG.md b/packages/moonstone/CHANGELOG.md index e41a12ceaa..dd1de0f3b9 100644 --- a/packages/moonstone/CHANGELOG.md +++ b/packages/moonstone/CHANGELOG.md @@ -15,7 +15,7 @@ The following is a curated list of changes in the Enact moonstone module, newest - `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/Panels` to prevent loss of spotlight issue when moving rapidly between panels +- `moonstone/Panels` to prevent loss of spotlight issue when moving between panels ## [1.12.2] - 2017-11-15