@enact/spotlight - npm Package Compare versions

Comparing version 1.4.0 to 1.4.1

CHANGELOG.md

@@ -5,2 +5,8 @@ # Change Log
 
+## [1.4.1] - 2017-07-05
+
+### Changed
+
+- `spotlight/Spottable` to remove focus from a component when it becomes disabled and move it to another component if not explicitly moved during the `onSpotlightDisappear` event callback
+
 ## [1.4.0] - 2017-06-29
@@ -7,0 +13,0 @@

package.json

 {
   "name": "@enact/spotlight",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A focus management library",
@@ -24,3 +24,3 @@ "main": "src/spotlight.js",
   "dependencies": {
-    "@enact/core": "^1.4.0",
+    "@enact/core": "^1.4.1",
     "prop-types": "~15.5.0",
@@ -27,0 +27,0 @@ "ramda": "~0.23.0",

Spottable/Spottable.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _reactDom = require('react-dom');
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var _propTypes = require('prop-types');
@@ -29,2 +33,4 @@
 
+var _container = require('../src/container');
+
 var _spotlight = require('../src/spotlight');
@@ -57,3 +63,2 @@
 var spottableClass = 'spottable';
-var spottableDisabledClass = 'spottableDisabled';
 
@@ -70,2 +75,7 @@ var ENTER_KEY = 13;
 
+// Last instance of spottable to be focused
+var lastSelectTarget = null;
+// Should we prevent select being passed through
+var selectCancelled = false;
+
 /**
@@ -154,5 +164,28 @@ * Default configuration for Spottable
 
+			_this.handleSelect = function (ev) {
+				// Only apply accelerator if handling select
+				if (ev.which === REMOTE_OK_KEY || ev.which === ENTER_KEY) {
+					if (selectCancelled || lastSelectTarget && lastSelectTarget !== _this) {
+						return false;
+					}
+					lastSelectTarget = _this;
+				}
+				return true;
+			};
+
+			_this.setFocusTarget = function () {
+				lastSelectTarget = _this;
+				return true;
+			};
+
+			_this.resetLastSelecTarget = function () {
+				var stop = lastSelectTarget === _this;
+				selectCancelled = false;
+				lastSelectTarget = null;
+				return stop;
+			};
+
 			_this.handle = _handle.handle.bind(_this);
-			_this.handleKeyDown = _this.handle((0, _handle.forward)('onKeyDown'), _this.forwardSpotlightEvents, _this.shouldEmulateMouse, (0, _handle.forward)('onMouseDown'));
-			_this.handleKeyUp = _this.handle((0, _handle.forward)('onKeyUp'), _this.shouldEmulateMouse, (0, _handle.forward)('onMouseUp'), (0, _handle.forward)('onClick'));
+			_this.handleKeyDown = _this.handle(_this.handleSelect, (0, _handle.forward)('onKeyDown'), _this.forwardSpotlightEvents, _this.shouldEmulateMouse, (0, _handle.forward)('onMouseDown'));
+			_this.handleKeyUp = _this.handle((0, _handle.forward)('onKeyUp'), _this.resetLastSelecTarget, _this.shouldEmulateMouse, (0, _handle.forward)('onMouseUp'), (0, _handle.forward)('onClick'));
 
@@ -190,12 +223,37 @@ _this.handleBlur = function (ev) {
 		_createClass(_class, [{
-			key: 'componentWillUnmount',
-			value: function componentWillUnmount() {
-				var onSpotlightDisappear = this.props.onSpotlightDisappear;
+			key: 'componentDidMount',
+			value: function componentDidMount() {
+				// eslint-disable-next-line react/no-find-dom-node
+				this.node = _reactDom2.default.findDOMNode(this);
+			}
+		}, {
+			key: 'componentDidUpdate',
+			value: function componentDidUpdate(prevProps) {
+				// if the component is spotted and became disabled,
+				if (this.state.spotted && !prevProps.disabled && this.props.disabled) {
+					(0, _handle.forward)('onSpotlightDisappear', null, this.props);
+					if (lastSelectTarget === this) {
+						selectCancelled = true;
+						(0, _handle.forward)('onMouseUp', null, this.props);
+					}
 
+					// if spotlight didn't move, find something else to spot starting from here
+					var current = _spotlight2.default.getCurrent();
+					if (!_spotlight2.default.getPointerMode() && (!current || this.node === current)) {
+						this.node.blur();
 
-				if (this.state.spotted && onSpotlightDisappear) {
-					onSpotlightDisappear();
+						(0, _container.getContainersForNode)(this.node).reverse().reduce(function (found, id) {
+							return found || _spotlight2.default.focus(id);
+						}, false);
+					}
 				}
 			}
 		}, {
+			key: 'componentWillUnmount',
+			value: function componentWillUnmount() {
+				if (this.state.spotted) {
+					(0, _handle.forward)('onSpotlightDisappear', null, this.props);
+				}
+			}
+		}, {
 			key: 'render',
@@ -208,5 +266,3 @@ value: function render() {
 
-				var spottableDisabled = this.state.spotted && disabled;
-				var spottable = (spottableDisabled || !disabled) && !spotlightDisabled;
-				var classes = spottableDisabled ? spottableClass + ' ' + spottableDisabledClass : spottableClass;
+				var spottable = !disabled && !spotlightDisabled;
 				var tabIndex = rest.tabIndex;
@@ -228,11 +284,8 @@
 					rest.onKeyDown = this.handleKeyDown;
+					rest.onKeyUp = this.handleKeyUp;
 
-					if (!spottableDisabled) {
-						rest.onKeyUp = this.handleKeyUp;
-					}
-
 					if (rest.className) {
-						rest.className += ' ' + classes;
+						rest.className += ' ' + spottableClass;
 					} else {
-						rest.className = classes;
+						rest.className = spottableClass;
 					}
@@ -239,0 +292,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

206779

increased by0.88%

Lines of code

4210

increased by1.13%

Dependency changes

• Updated@enact/core@^1.4.1