@noriginmedia/norigin-spatial-navigation-core 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/SpatialNavigation.d.ts +12 -3
- package/dist/index.cjs +41 -6
- package/dist/index.mjs +41 -6
- package/package.json +1 -1
|
@@ -171,7 +171,12 @@ declare class SpatialNavigationService {
|
|
|
171
171
|
*/
|
|
172
172
|
sortSiblingsByPriority(siblings: FocusableComponent[], currentLayout: FocusableComponentLayout, direction: string, focusKey: string): FocusableComponent[];
|
|
173
173
|
constructor();
|
|
174
|
-
init({ debug, visualDebug,
|
|
174
|
+
init({ debug, visualDebug,
|
|
175
|
+
/**
|
|
176
|
+
* @deprecated
|
|
177
|
+
* Native mode will be removed in the next version
|
|
178
|
+
*/
|
|
179
|
+
nativeMode, throttle: throttleParam, throttleKeypresses, useGetBoundingClientRect, shouldFocusDOMNode, domNodeFocusOptions, shouldUseNativeEvents, rtl, distanceCalculationMethod, customDistanceCalculationFunction }?: {
|
|
175
180
|
debug?: boolean;
|
|
176
181
|
visualDebug?: boolean;
|
|
177
182
|
nativeMode?: boolean;
|
|
@@ -204,7 +209,7 @@ declare class SpatialNavigationService {
|
|
|
204
209
|
* @example
|
|
205
210
|
* navigateByDirection('right') // The focus is moved to right
|
|
206
211
|
*/
|
|
207
|
-
navigateByDirection(direction: string, focusDetails
|
|
212
|
+
navigateByDirection(direction: string, focusDetails?: FocusDetails): void;
|
|
208
213
|
/**
|
|
209
214
|
* This function navigates between siblings OR goes up by the Tree
|
|
210
215
|
* Based on the Direction
|
|
@@ -249,6 +254,10 @@ declare class SpatialNavigationService {
|
|
|
249
254
|
updateAllLayouts(): void;
|
|
250
255
|
updateLayout(focusKey: string): void;
|
|
251
256
|
updateFocusable(focusKey: string, { node, preferredChildFocusKey, focusable, isFocusBoundary, focusBoundaryDirections, onEnterPress, onEnterRelease, onArrowPress, onFocus, onBlur }: FocusableComponentUpdatePayload): void;
|
|
257
|
+
/**
|
|
258
|
+
* @deprecated
|
|
259
|
+
* Native mode will be removed in the next version
|
|
260
|
+
*/
|
|
252
261
|
isNativeMode(): boolean;
|
|
253
262
|
doesFocusableExist(focusKey: string): boolean;
|
|
254
263
|
/**
|
|
@@ -277,5 +286,5 @@ export declare const init: ({ debug, visualDebug, nativeMode, throttle: throttle
|
|
|
277
286
|
}) => void, setThrottle: ({ throttle: throttleParam, throttleKeypresses }?: {
|
|
278
287
|
throttle?: number;
|
|
279
288
|
throttleKeypresses?: boolean;
|
|
280
|
-
}) => void, destroy: () => void, setKeyMap: (keyMap: BackwardsCompatibleKeyMap) => void, setFocus: (focusKey: string, focusDetails?: FocusDetails) => void, navigateByDirection: (direction: string, focusDetails
|
|
289
|
+
}) => void, destroy: () => void, setKeyMap: (keyMap: BackwardsCompatibleKeyMap) => void, setFocus: (focusKey: string, focusDetails?: FocusDetails) => void, navigateByDirection: (direction: string, focusDetails?: FocusDetails) => void, pause: () => void, resume: () => void, updateAllLayouts: () => void, getCurrentFocusKey: () => string, doesFocusableExist: (focusKey: string) => boolean, updateRtl: (rtl: boolean) => void;
|
|
281
290
|
export {};
|
package/dist/index.cjs
CHANGED
|
@@ -497,7 +497,17 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
497
497
|
};
|
|
498
498
|
SpatialNavigationService.prototype.init = function (_a) {
|
|
499
499
|
var _this = this;
|
|
500
|
-
var _b = _a === void 0 ? {} : _a, _c = _b.debug, debug = _c === void 0 ? false : _c, _d = _b.visualDebug, visualDebug = _d === void 0 ? false : _d,
|
|
500
|
+
var _b = _a === void 0 ? {} : _a, _c = _b.debug, debug = _c === void 0 ? false : _c, _d = _b.visualDebug, visualDebug = _d === void 0 ? false : _d,
|
|
501
|
+
/**
|
|
502
|
+
* @deprecated
|
|
503
|
+
* Native mode will be removed in the next version
|
|
504
|
+
*/
|
|
505
|
+
_e = _b.nativeMode,
|
|
506
|
+
/**
|
|
507
|
+
* @deprecated
|
|
508
|
+
* Native mode will be removed in the next version
|
|
509
|
+
*/
|
|
510
|
+
nativeMode = _e === void 0 ? false : _e, _f = _b.throttle, throttleParam = _f === void 0 ? 0 : _f, _g = _b.throttleKeypresses, throttleKeypresses = _g === void 0 ? false : _g, _h = _b.useGetBoundingClientRect, useGetBoundingClientRect = _h === void 0 ? false : _h, _j = _b.shouldFocusDOMNode, shouldFocusDOMNode = _j === void 0 ? false : _j, _k = _b.domNodeFocusOptions, domNodeFocusOptions = _k === void 0 ? {} : _k, _l = _b.shouldUseNativeEvents, shouldUseNativeEvents = _l === void 0 ? false : _l, _m = _b.rtl, rtl = _m === void 0 ? false : _m, _o = _b.distanceCalculationMethod, distanceCalculationMethod = _o === void 0 ? 'corners' : _o, _p = _b.customDistanceCalculationFunction, customDistanceCalculationFunction = _p === void 0 ? undefined : _p;
|
|
501
511
|
if (!this.enabled) {
|
|
502
512
|
this.domNodeFocusOptions = domNodeFocusOptions;
|
|
503
513
|
this.enabled = true;
|
|
@@ -530,6 +540,9 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
530
540
|
draw_1();
|
|
531
541
|
}
|
|
532
542
|
}
|
|
543
|
+
else {
|
|
544
|
+
console.warn('nativeMode option is deprecated and will be removed in the next version.');
|
|
545
|
+
}
|
|
533
546
|
}
|
|
534
547
|
};
|
|
535
548
|
SpatialNavigationService.prototype.setThrottle = function (_a) {
|
|
@@ -622,10 +635,11 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
622
635
|
if (eventType === KEY_ENTER && _this.focusKey) {
|
|
623
636
|
_this.onEnterRelease();
|
|
624
637
|
}
|
|
625
|
-
if (_this.focusKey &&
|
|
626
|
-
eventType ===
|
|
627
|
-
|
|
628
|
-
|
|
638
|
+
if (_this.focusKey &&
|
|
639
|
+
(eventType === DIRECTION_LEFT ||
|
|
640
|
+
eventType === DIRECTION_RIGHT ||
|
|
641
|
+
eventType === DIRECTION_UP ||
|
|
642
|
+
eventType === DIRECTION_DOWN)) {
|
|
629
643
|
_this.onArrowRelease(eventType);
|
|
630
644
|
}
|
|
631
645
|
};
|
|
@@ -715,6 +729,7 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
715
729
|
* navigateByDirection('right') // The focus is moved to right
|
|
716
730
|
*/
|
|
717
731
|
SpatialNavigationService.prototype.navigateByDirection = function (direction, focusDetails) {
|
|
732
|
+
if (focusDetails === void 0) { focusDetails = {}; }
|
|
718
733
|
if (this.paused === true || !this.enabled || this.nativeMode) {
|
|
719
734
|
return;
|
|
720
735
|
}
|
|
@@ -761,7 +776,14 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
761
776
|
* the Focusable Containers, that have "forceFocus" flag enabled.
|
|
762
777
|
*/
|
|
763
778
|
if (!fromParentFocusKey && !currentComponent) {
|
|
764
|
-
this.
|
|
779
|
+
var forcedKey = this.getForcedFocusKey();
|
|
780
|
+
if (forcedKey) {
|
|
781
|
+
this.setFocus(forcedKey);
|
|
782
|
+
}
|
|
783
|
+
else {
|
|
784
|
+
this.log('smartNavigate', 'Aborted due to missing current component and force-focusable key');
|
|
785
|
+
}
|
|
786
|
+
// Current component is null (e.g. nothing to navigate from)
|
|
765
787
|
return;
|
|
766
788
|
}
|
|
767
789
|
this.log('smartNavigate', 'currentComponent', currentComponent ? currentComponent.focusKey : undefined, currentComponent ? currentComponent.node : undefined, currentComponent);
|
|
@@ -1150,8 +1172,17 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
1150
1172
|
if (!focusKey || focusKey === ROOT_FOCUS_KEY) {
|
|
1151
1173
|
// eslint-disable-next-line no-param-reassign
|
|
1152
1174
|
focusKey = this.getForcedFocusKey();
|
|
1175
|
+
// If there is no force-focusable key either then we abort
|
|
1176
|
+
if (!focusKey) {
|
|
1177
|
+
this.log('setFocus', 'Aborted due to missing force-focusable key');
|
|
1178
|
+
return;
|
|
1179
|
+
}
|
|
1153
1180
|
}
|
|
1154
1181
|
var newFocusKey = this.getNextFocusKey(focusKey);
|
|
1182
|
+
if (!newFocusKey) {
|
|
1183
|
+
this.log('setFocus', 'Aborted due to missing next focus key');
|
|
1184
|
+
return;
|
|
1185
|
+
}
|
|
1155
1186
|
this.log('setFocus', 'newFocusKey', newFocusKey);
|
|
1156
1187
|
this.setCurrentFocusedKey(newFocusKey, focusDetails);
|
|
1157
1188
|
this.updateParentsHasFocusedChild(newFocusKey, focusDetails);
|
|
@@ -1198,6 +1229,10 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
1198
1229
|
}
|
|
1199
1230
|
}
|
|
1200
1231
|
};
|
|
1232
|
+
/**
|
|
1233
|
+
* @deprecated
|
|
1234
|
+
* Native mode will be removed in the next version
|
|
1235
|
+
*/
|
|
1201
1236
|
SpatialNavigationService.prototype.isNativeMode = function () {
|
|
1202
1237
|
return this.nativeMode;
|
|
1203
1238
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -495,7 +495,17 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
495
495
|
};
|
|
496
496
|
SpatialNavigationService.prototype.init = function (_a) {
|
|
497
497
|
var _this = this;
|
|
498
|
-
var _b = _a === void 0 ? {} : _a, _c = _b.debug, debug = _c === void 0 ? false : _c, _d = _b.visualDebug, visualDebug = _d === void 0 ? false : _d,
|
|
498
|
+
var _b = _a === void 0 ? {} : _a, _c = _b.debug, debug = _c === void 0 ? false : _c, _d = _b.visualDebug, visualDebug = _d === void 0 ? false : _d,
|
|
499
|
+
/**
|
|
500
|
+
* @deprecated
|
|
501
|
+
* Native mode will be removed in the next version
|
|
502
|
+
*/
|
|
503
|
+
_e = _b.nativeMode,
|
|
504
|
+
/**
|
|
505
|
+
* @deprecated
|
|
506
|
+
* Native mode will be removed in the next version
|
|
507
|
+
*/
|
|
508
|
+
nativeMode = _e === void 0 ? false : _e, _f = _b.throttle, throttleParam = _f === void 0 ? 0 : _f, _g = _b.throttleKeypresses, throttleKeypresses = _g === void 0 ? false : _g, _h = _b.useGetBoundingClientRect, useGetBoundingClientRect = _h === void 0 ? false : _h, _j = _b.shouldFocusDOMNode, shouldFocusDOMNode = _j === void 0 ? false : _j, _k = _b.domNodeFocusOptions, domNodeFocusOptions = _k === void 0 ? {} : _k, _l = _b.shouldUseNativeEvents, shouldUseNativeEvents = _l === void 0 ? false : _l, _m = _b.rtl, rtl = _m === void 0 ? false : _m, _o = _b.distanceCalculationMethod, distanceCalculationMethod = _o === void 0 ? 'corners' : _o, _p = _b.customDistanceCalculationFunction, customDistanceCalculationFunction = _p === void 0 ? undefined : _p;
|
|
499
509
|
if (!this.enabled) {
|
|
500
510
|
this.domNodeFocusOptions = domNodeFocusOptions;
|
|
501
511
|
this.enabled = true;
|
|
@@ -528,6 +538,9 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
528
538
|
draw_1();
|
|
529
539
|
}
|
|
530
540
|
}
|
|
541
|
+
else {
|
|
542
|
+
console.warn('nativeMode option is deprecated and will be removed in the next version.');
|
|
543
|
+
}
|
|
531
544
|
}
|
|
532
545
|
};
|
|
533
546
|
SpatialNavigationService.prototype.setThrottle = function (_a) {
|
|
@@ -620,10 +633,11 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
620
633
|
if (eventType === KEY_ENTER && _this.focusKey) {
|
|
621
634
|
_this.onEnterRelease();
|
|
622
635
|
}
|
|
623
|
-
if (_this.focusKey &&
|
|
624
|
-
eventType ===
|
|
625
|
-
|
|
626
|
-
|
|
636
|
+
if (_this.focusKey &&
|
|
637
|
+
(eventType === DIRECTION_LEFT ||
|
|
638
|
+
eventType === DIRECTION_RIGHT ||
|
|
639
|
+
eventType === DIRECTION_UP ||
|
|
640
|
+
eventType === DIRECTION_DOWN)) {
|
|
627
641
|
_this.onArrowRelease(eventType);
|
|
628
642
|
}
|
|
629
643
|
};
|
|
@@ -713,6 +727,7 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
713
727
|
* navigateByDirection('right') // The focus is moved to right
|
|
714
728
|
*/
|
|
715
729
|
SpatialNavigationService.prototype.navigateByDirection = function (direction, focusDetails) {
|
|
730
|
+
if (focusDetails === void 0) { focusDetails = {}; }
|
|
716
731
|
if (this.paused === true || !this.enabled || this.nativeMode) {
|
|
717
732
|
return;
|
|
718
733
|
}
|
|
@@ -759,7 +774,14 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
759
774
|
* the Focusable Containers, that have "forceFocus" flag enabled.
|
|
760
775
|
*/
|
|
761
776
|
if (!fromParentFocusKey && !currentComponent) {
|
|
762
|
-
this.
|
|
777
|
+
var forcedKey = this.getForcedFocusKey();
|
|
778
|
+
if (forcedKey) {
|
|
779
|
+
this.setFocus(forcedKey);
|
|
780
|
+
}
|
|
781
|
+
else {
|
|
782
|
+
this.log('smartNavigate', 'Aborted due to missing current component and force-focusable key');
|
|
783
|
+
}
|
|
784
|
+
// Current component is null (e.g. nothing to navigate from)
|
|
763
785
|
return;
|
|
764
786
|
}
|
|
765
787
|
this.log('smartNavigate', 'currentComponent', currentComponent ? currentComponent.focusKey : undefined, currentComponent ? currentComponent.node : undefined, currentComponent);
|
|
@@ -1148,8 +1170,17 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
1148
1170
|
if (!focusKey || focusKey === ROOT_FOCUS_KEY) {
|
|
1149
1171
|
// eslint-disable-next-line no-param-reassign
|
|
1150
1172
|
focusKey = this.getForcedFocusKey();
|
|
1173
|
+
// If there is no force-focusable key either then we abort
|
|
1174
|
+
if (!focusKey) {
|
|
1175
|
+
this.log('setFocus', 'Aborted due to missing force-focusable key');
|
|
1176
|
+
return;
|
|
1177
|
+
}
|
|
1151
1178
|
}
|
|
1152
1179
|
var newFocusKey = this.getNextFocusKey(focusKey);
|
|
1180
|
+
if (!newFocusKey) {
|
|
1181
|
+
this.log('setFocus', 'Aborted due to missing next focus key');
|
|
1182
|
+
return;
|
|
1183
|
+
}
|
|
1153
1184
|
this.log('setFocus', 'newFocusKey', newFocusKey);
|
|
1154
1185
|
this.setCurrentFocusedKey(newFocusKey, focusDetails);
|
|
1155
1186
|
this.updateParentsHasFocusedChild(newFocusKey, focusDetails);
|
|
@@ -1196,6 +1227,10 @@ var SpatialNavigationService = /** @class */ (function () {
|
|
|
1196
1227
|
}
|
|
1197
1228
|
}
|
|
1198
1229
|
};
|
|
1230
|
+
/**
|
|
1231
|
+
* @deprecated
|
|
1232
|
+
* Native mode will be removed in the next version
|
|
1233
|
+
*/
|
|
1199
1234
|
SpatialNavigationService.prototype.isNativeMode = function () {
|
|
1200
1235
|
return this.nativeMode;
|
|
1201
1236
|
};
|