@ndla/ui 19.1.1 → 20.0.2
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/README.md +1 -1
- package/es/Masthead/Masthead.js +1 -0
- package/es/Messages/MessageBanner.js +3 -3
- package/es/MyNdla/Resource/FolderInput.js +29 -36
- package/es/NDLAFilm/FilmSlideshow.js +8 -8
- package/es/Resource/ListResource.js +6 -6
- package/es/Search/LoadingWrapper.js +2 -2
- package/es/Search/SearchResult.js +1 -1
- package/es/SearchTypeResult/SearchTypeResult.js +3 -3
- package/es/TopicMenu/TopicMenu.js +14 -1
- package/es/TreeStructure/FolderItem.js +54 -38
- package/es/TreeStructure/FolderItems.js +29 -35
- package/es/TreeStructure/FolderNameInput.js +12 -16
- package/es/TreeStructure/TreeStructure.js +64 -91
- package/es/TreeStructure/arrowNavigation.js +44 -0
- package/es/TreeStructure/helperFunctions.js +41 -35
- package/es/all.css +1 -1
- package/es/index.js +0 -1
- package/es/locale/messages-en.js +4 -1
- package/es/locale/messages-nb.js +4 -1
- package/es/locale/messages-nn.js +4 -1
- package/es/locale/messages-se.js +4 -1
- package/es/locale/messages-sma.js +4 -1
- package/lib/Masthead/Masthead.js +1 -0
- package/lib/Messages/MessageBanner.js +3 -3
- package/lib/MyNdla/Resource/FolderInput.d.ts +2 -2
- package/lib/MyNdla/Resource/FolderInput.js +26 -33
- package/lib/NDLAFilm/FilmSlideshow.js +10 -10
- package/lib/Resource/ListResource.js +6 -6
- package/lib/Search/LoadingWrapper.js +3 -3
- package/lib/Search/SearchResult.js +2 -2
- package/lib/SearchTypeResult/SearchTypeResult.js +4 -4
- package/lib/TopicMenu/TopicMenu.js +14 -1
- package/lib/TreeStructure/FolderItem.d.ts +6 -3
- package/lib/TreeStructure/FolderItem.js +55 -38
- package/lib/TreeStructure/FolderItems.d.ts +1 -1
- package/lib/TreeStructure/FolderItems.js +29 -35
- package/lib/TreeStructure/FolderNameInput.d.ts +3 -2
- package/lib/TreeStructure/FolderNameInput.js +13 -17
- package/lib/TreeStructure/TreeStructure.d.ts +1 -6
- package/lib/TreeStructure/TreeStructure.js +63 -92
- package/lib/TreeStructure/TreeStructure.types.d.ts +13 -20
- package/lib/TreeStructure/arrowNavigation.d.ts +9 -0
- package/lib/TreeStructure/arrowNavigation.js +54 -0
- package/lib/TreeStructure/helperFunctions.d.ts +3 -4
- package/lib/TreeStructure/helperFunctions.js +45 -35
- package/lib/all.css +1 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -9
- package/lib/locale/messages-en.d.ts +3 -0
- package/lib/locale/messages-en.js +4 -1
- package/lib/locale/messages-nb.d.ts +3 -0
- package/lib/locale/messages-nb.js +4 -1
- package/lib/locale/messages-nn.d.ts +3 -0
- package/lib/locale/messages-nn.js +4 -1
- package/lib/locale/messages-se.d.ts +3 -0
- package/lib/locale/messages-se.js +4 -1
- package/lib/locale/messages-sma.d.ts +3 -0
- package/lib/locale/messages-sma.js +4 -1
- package/package.json +14 -13
- package/src/Masthead/Masthead.tsx +4 -1
- package/src/Messages/MessageBanner.tsx +1 -1
- package/src/MyNdla/Resource/FolderInput.tsx +41 -44
- package/src/NDLAFilm/FilmSlideshow.tsx +1 -1
- package/src/Resource/ListResource.tsx +1 -0
- package/src/Search/LoadingWrapper.tsx +1 -1
- package/src/Search/SearchResult.jsx +1 -1
- package/src/SearchTypeResult/SearchTypeResult.tsx +1 -1
- package/src/TopicMenu/TopicMenu.jsx +15 -2
- package/src/TreeStructure/FolderItem.tsx +63 -40
- package/src/TreeStructure/FolderItems.tsx +26 -19
- package/src/TreeStructure/FolderNameInput.tsx +10 -12
- package/src/TreeStructure/TreeStructure.tsx +56 -71
- package/src/TreeStructure/TreeStructure.types.ts +13 -17
- package/src/TreeStructure/arrowNavigation.ts +53 -0
- package/src/TreeStructure/helperFunctions.ts +17 -25
- package/src/index.ts +0 -2
- package/src/locale/messages-en.ts +3 -0
- package/src/locale/messages-nb.ts +3 -0
- package/src/locale/messages-nn.ts +3 -0
- package/src/locale/messages-se.ts +3 -0
- package/src/locale/messages-sma.ts +3 -0
- package/es/Spinner/Spinner.js +0 -42
- package/es/Spinner/index.js +0 -2
- package/es/TreeStructure/keyboardNavigation/keyboardNavigation.js +0 -194
- package/es/TreeStructure/keyboardNavigation/keyboardNavigation.types.js +0 -0
- package/lib/Spinner/Spinner.d.ts +0 -16
- package/lib/Spinner/Spinner.js +0 -54
- package/lib/Spinner/index.d.ts +0 -2
- package/lib/Spinner/index.js +0 -13
- package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.d.ts +0 -11
- package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.js +0 -198
- package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.types.d.ts +0 -26
- package/lib/TreeStructure/keyboardNavigation/keyboardNavigation.types.js +0 -1
- package/src/Spinner/Spinner.tsx +0 -46
- package/src/Spinner/index.ts +0 -3
- package/src/TreeStructure/keyboardNavigation/keyboardNavigation.ts +0 -161
- package/src/TreeStructure/keyboardNavigation/keyboardNavigation.types.ts +0 -28
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { FolderStructureProps } from './TreeStructure.types';
|
|
2
2
|
|
|
3
|
-
const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
|
|
4
|
-
const paths = (
|
|
5
|
-
for (const { id,
|
|
3
|
+
export const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
|
|
4
|
+
const paths = (folders: FolderStructureProps[], path: string[]): string[] => {
|
|
5
|
+
for (const { id, subfolders } of folders) {
|
|
6
6
|
if (id === findId) {
|
|
7
7
|
return [...path, id];
|
|
8
|
-
} else if (
|
|
9
|
-
return paths(
|
|
8
|
+
} else if (subfolders?.length) {
|
|
9
|
+
return paths(subfolders, [...path, id]);
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
return [];
|
|
@@ -14,33 +14,18 @@ const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[]
|
|
|
14
14
|
return paths(data, []);
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
const
|
|
18
|
-
let currentPath: number[] = [];
|
|
19
|
-
const paths = (dataChildren: FolderStructureProps[], path: number[]) => {
|
|
20
|
-
dataChildren.forEach(({ id, data: dataChildrenSub }, _index) => {
|
|
21
|
-
if (id === findId) {
|
|
22
|
-
currentPath = [...path, _index];
|
|
23
|
-
} else if (dataChildrenSub?.length) {
|
|
24
|
-
paths(dataChildrenSub, [...path, _index]);
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
};
|
|
28
|
-
paths(data, []);
|
|
29
|
-
return currentPath;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
|
|
17
|
+
export const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
|
|
33
18
|
if (!findId) {
|
|
34
19
|
return undefined;
|
|
35
20
|
}
|
|
36
21
|
let folderName: string | undefined;
|
|
37
22
|
const paths = (dataChildren: FolderStructureProps[]) => {
|
|
38
|
-
dataChildren.some(({ id, name,
|
|
23
|
+
dataChildren.some(({ id, name, subfolders }, _index) => {
|
|
39
24
|
if (id === findId) {
|
|
40
25
|
folderName = name;
|
|
41
26
|
return true;
|
|
42
|
-
} else if (
|
|
43
|
-
return paths(
|
|
27
|
+
} else if (subfolders?.length) {
|
|
28
|
+
return paths(subfolders);
|
|
44
29
|
}
|
|
45
30
|
return false;
|
|
46
31
|
});
|
|
@@ -49,4 +34,11 @@ const getFolderName = (data: FolderStructureProps[], findId: string | undefined)
|
|
|
49
34
|
return folderName;
|
|
50
35
|
};
|
|
51
36
|
|
|
52
|
-
export
|
|
37
|
+
export const flattenFolders = (folders: FolderStructureProps[], openFolders?: string[]): FolderStructureProps[] => {
|
|
38
|
+
return folders.reduce((acc, { subfolders, id, ...rest }) => {
|
|
39
|
+
if (!subfolders || (openFolders && !openFolders.includes(id))) {
|
|
40
|
+
return acc.concat({ subfolders, id, ...rest });
|
|
41
|
+
}
|
|
42
|
+
return acc.concat({ subfolders, id, ...rest }, flattenFolders(subfolders, openFolders));
|
|
43
|
+
}, [] as FolderStructureProps[]);
|
|
44
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -109,8 +109,6 @@ export {
|
|
|
109
109
|
} from './LearningPaths';
|
|
110
110
|
export { Translation, TranslationLine, TranslationBox } from './Translation';
|
|
111
111
|
|
|
112
|
-
export { default as Spinner } from './Spinner';
|
|
113
|
-
|
|
114
112
|
export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
|
|
115
113
|
|
|
116
114
|
export { default as ContentTypeResult } from './Search/ContentTypeResult';
|
|
@@ -861,8 +861,10 @@ const messages = {
|
|
|
861
861
|
open: 'Open menu',
|
|
862
862
|
close: 'Close menu',
|
|
863
863
|
},
|
|
864
|
+
cancel: 'Cancel',
|
|
864
865
|
close: 'Close',
|
|
865
866
|
title: 'Title',
|
|
867
|
+
save: 'Save',
|
|
866
868
|
image: {
|
|
867
869
|
altText: 'Alt-text',
|
|
868
870
|
caption: 'Caption',
|
|
@@ -993,6 +995,7 @@ const messages = {
|
|
|
993
995
|
folder: 'Folder',
|
|
994
996
|
delete: 'Delete',
|
|
995
997
|
edit: 'Edit',
|
|
998
|
+
missingName: 'Folder name required',
|
|
996
999
|
},
|
|
997
1000
|
confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
|
|
998
1001
|
confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
|
|
@@ -861,6 +861,8 @@ const messages = {
|
|
|
861
861
|
},
|
|
862
862
|
close: 'Lukk',
|
|
863
863
|
title: 'Tittel',
|
|
864
|
+
cancel: 'Avbryt',
|
|
865
|
+
save: 'Lagre',
|
|
864
866
|
image: {
|
|
865
867
|
altText: 'Alt-tekst',
|
|
866
868
|
caption: 'Bildetekst',
|
|
@@ -991,6 +993,7 @@ const messages = {
|
|
|
991
993
|
folder: 'Mappe',
|
|
992
994
|
delete: 'Slett',
|
|
993
995
|
edit: 'Rediger',
|
|
996
|
+
missingName: 'Mappenavn er påkrevd',
|
|
994
997
|
},
|
|
995
998
|
confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
|
|
996
999
|
confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
|
|
@@ -860,8 +860,10 @@ const messages = {
|
|
|
860
860
|
open: 'Åpne meny',
|
|
861
861
|
close: 'Lukk meny',
|
|
862
862
|
},
|
|
863
|
+
cancel: 'Avbryt',
|
|
863
864
|
close: 'Lukk',
|
|
864
865
|
title: 'Tittel',
|
|
866
|
+
save: 'Lagre',
|
|
865
867
|
image: {
|
|
866
868
|
altText: 'Alt-tekst',
|
|
867
869
|
caption: 'Bilettekst',
|
|
@@ -992,6 +994,7 @@ const messages = {
|
|
|
992
994
|
folder: 'Mappe',
|
|
993
995
|
delete: 'Slett',
|
|
994
996
|
edit: 'Rediger',
|
|
997
|
+
missingName: 'Mappenavn er påkrevd',
|
|
995
998
|
},
|
|
996
999
|
confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
|
|
997
1000
|
confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',
|
|
@@ -859,8 +859,10 @@ const messages = {
|
|
|
859
859
|
open: 'Åpne meny',
|
|
860
860
|
close: 'Lukk meny',
|
|
861
861
|
},
|
|
862
|
+
cancel: 'Avbryt',
|
|
862
863
|
close: 'Lukk',
|
|
863
864
|
title: 'Tittel',
|
|
865
|
+
save: 'Lagre',
|
|
864
866
|
image: {
|
|
865
867
|
altText: 'Alt-tekst',
|
|
866
868
|
caption: 'Bilettekst',
|
|
@@ -991,6 +993,7 @@ const messages = {
|
|
|
991
993
|
folder: 'Mappe',
|
|
992
994
|
delete: 'Slett',
|
|
993
995
|
edit: 'Rediger',
|
|
996
|
+
missingName: 'Mappenavn er påkrevd',
|
|
994
997
|
},
|
|
995
998
|
confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
|
|
996
999
|
confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
|
|
@@ -859,8 +859,10 @@ const messages = {
|
|
|
859
859
|
open: 'Åpne meny',
|
|
860
860
|
close: 'Lukk meny',
|
|
861
861
|
},
|
|
862
|
+
cancel: 'Avbryt',
|
|
862
863
|
close: 'Lukk',
|
|
863
864
|
title: 'Tittel',
|
|
865
|
+
save: 'Lagre',
|
|
864
866
|
image: {
|
|
865
867
|
altText: 'Alt-tekst',
|
|
866
868
|
caption: 'Bilettekst',
|
|
@@ -991,6 +993,7 @@ const messages = {
|
|
|
991
993
|
folder: 'Mappe',
|
|
992
994
|
delete: 'Slett',
|
|
993
995
|
edit: 'Rediger',
|
|
996
|
+
missingName: 'Mappenavn er påkrevd',
|
|
994
997
|
},
|
|
995
998
|
confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
|
|
996
999
|
confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
|
package/es/Spinner/Spinner.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled-base";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Copyright (c) 2018-present, NDLA.
|
|
5
|
-
*
|
|
6
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
7
|
-
* LICENSE file in the root directory of this source tree.
|
|
8
|
-
*
|
|
9
|
-
*/
|
|
10
|
-
import React from 'react';
|
|
11
|
-
import { colors, spacing } from '@ndla/core';
|
|
12
|
-
import { jsx as ___EmotionJSX } from "@emotion/core";
|
|
13
|
-
|
|
14
|
-
var SpinnerDiv = /*#__PURE__*/_styled('div', {
|
|
15
|
-
target: "eecx2hs0",
|
|
16
|
-
label: "SpinnerDiv"
|
|
17
|
-
})("border:calc(", function (props) {
|
|
18
|
-
return spacing[props.size];
|
|
19
|
-
}, " / 6.5) solid rgba(0,0,0,0.1);border-bottom-color:", function (props) {
|
|
20
|
-
return props.inverted ? '#fff' : colors.brand.primary;
|
|
21
|
-
}, ";border-radius:50%;animation:spinnerAnimation 0.7s linear infinite;height:", function (props) {
|
|
22
|
-
return spacing[props.size];
|
|
23
|
-
}, ";width:", function (props) {
|
|
24
|
-
return spacing[props.size];
|
|
25
|
-
}, ";margin:", function (props) {
|
|
26
|
-
return props.margin;
|
|
27
|
-
}, ";display:block;@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNkMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplPzogU3BhY2luZ05hbWVzO1xuICBtYXJnaW4/OiBzdHJpbmc7XG4gIGludmVydGVkPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIGV4dGVuZHMgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG59XG5cbmNvbnN0IFNwaW5uZXJEaXYgPSBzdHlsZWQoJ2RpdicpPFN0eWxlZFByb3BzPmBcbiAgYm9yZGVyOiBjYWxjKCR7KHByb3BzKSA9PiBzcGFjaW5nW3Byb3BzLnNpemVdfSAvIDYuNSkgc29saWQgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItYm90dG9tLWNvbG9yOiAkeyhwcm9wcykgPT4gKHByb3BzLmludmVydGVkID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBhbmltYXRpb246IHNwaW5uZXJBbmltYXRpb24gMC43cyBsaW5lYXIgaW5maW5pdGU7XG4gIGhlaWdodDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICB3aWR0aDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBkaXNwbGF5OiBibG9jaztcbiAgQGtleWZyYW1lcyBzcGlubmVyQW5pbWF0aW9uIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3Bpbm5lciA9ICh7IHNpemUgPSAnbGFyZ2UnLCBtYXJnaW4gPSBgJHtzcGFjaW5nLm5vcm1hbH0gYXV0b2AsIGludmVydGVkIH06IFBhcnRpYWw8UHJvcHM+KSA9PiAoXG4gIDxTcGlubmVyRGl2IHNpemU9e3NpemV9IG1hcmdpbj17bWFyZ2lufSBpbnZlcnRlZD17ISFpbnZlcnRlZH0gLz5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFNwaW5uZXI7XG4iXX0= */"));
|
|
28
|
-
|
|
29
|
-
var Spinner = function Spinner(_ref) {
|
|
30
|
-
var _ref$size = _ref.size,
|
|
31
|
-
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
32
|
-
_ref$margin = _ref.margin,
|
|
33
|
-
margin = _ref$margin === void 0 ? "".concat(spacing.normal, " auto") : _ref$margin,
|
|
34
|
-
inverted = _ref.inverted;
|
|
35
|
-
return ___EmotionJSX(SpinnerDiv, {
|
|
36
|
-
size: size,
|
|
37
|
-
margin: margin,
|
|
38
|
-
inverted: !!inverted
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
export default Spinner;
|
package/es/Spinner/index.js
DELETED
|
@@ -1,194 +0,0 @@
|
|
|
1
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
|
8
|
-
|
|
9
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
10
|
-
|
|
11
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Copyright (c) 2022-present, NDLA.
|
|
15
|
-
*
|
|
16
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
17
|
-
* LICENSE file in the root directory of this source tree.
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
import { MAX_LEVEL_FOR_FOLDERS } from '../TreeStructure';
|
|
21
|
-
export var KEYBOARD_KEYS_OF_INTEREST = ['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft', ' ']; // Traverse upwards, incase parent is last element of its parent..
|
|
22
|
-
|
|
23
|
-
var traverseUpwards = function traverseUpwards(inital, setFocusedFolderId, paths, index) {
|
|
24
|
-
var findParent = inital;
|
|
25
|
-
var parentNextIds = [];
|
|
26
|
-
paths.forEach(function (pathIndex) {
|
|
27
|
-
var nextParent = findParent ? findParent[pathIndex + 1] : undefined;
|
|
28
|
-
parentNextIds.push((nextParent === null || nextParent === void 0 ? void 0 : nextParent.id) || false);
|
|
29
|
-
findParent = findParent[pathIndex].data || [];
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
if (!parentNextIds.length) {
|
|
33
|
-
var _findParent;
|
|
34
|
-
|
|
35
|
-
parentNextIds.push(((_findParent = findParent[index + 1]) === null || _findParent === void 0 ? void 0 : _findParent.id) || false);
|
|
36
|
-
} // We use a reversed version of parentNextIds, filtered out falses, to find the next element
|
|
37
|
-
// No newId? We are at the end of the tree so we wont update.
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var newId = parentNextIds.reverse().filter(function (id) {
|
|
41
|
-
return id;
|
|
42
|
-
})[0];
|
|
43
|
-
|
|
44
|
-
if (newId) {
|
|
45
|
-
setFocusedFolderId(newId);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
var keyboardNavigation = function keyboardNavigation(_ref) {
|
|
50
|
-
var _document$activeEleme, _elementWithKeyFocus$5;
|
|
51
|
-
|
|
52
|
-
var e = _ref.e,
|
|
53
|
-
data = _ref.data,
|
|
54
|
-
onToggleOpen = _ref.onToggleOpen,
|
|
55
|
-
setFocusedFolderId = _ref.setFocusedFolderId,
|
|
56
|
-
id = _ref.focusedFolderId,
|
|
57
|
-
openFolders = _ref.openFolders;
|
|
58
|
-
|
|
59
|
-
if (e.key === ' ' && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.nodeName) === 'INPUT') {
|
|
60
|
-
return;
|
|
61
|
-
} // We are navigating in the tree.
|
|
62
|
-
// We need to find the next folder in the tree
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
var elementWithKeyFocus = {
|
|
66
|
-
paths: [],
|
|
67
|
-
index: 0
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
var updatePathToElementWithKeyFocus = function updatePathToElementWithKeyFocus(data, paths, parent, parentId) {
|
|
71
|
-
return data.some(function (_ref2, _index) {
|
|
72
|
-
var childData = _ref2.data,
|
|
73
|
-
dataId = _ref2.id,
|
|
74
|
-
url = _ref2.url;
|
|
75
|
-
|
|
76
|
-
if (dataId === id) {
|
|
77
|
-
elementWithKeyFocus.paths = paths;
|
|
78
|
-
elementWithKeyFocus.index = _index;
|
|
79
|
-
elementWithKeyFocus.isOpen = openFolders.includes(dataId) && childData && childData.length > 0;
|
|
80
|
-
elementWithKeyFocus.data = childData;
|
|
81
|
-
elementWithKeyFocus.parent = parent;
|
|
82
|
-
elementWithKeyFocus.parentId = parentId;
|
|
83
|
-
elementWithKeyFocus.url = url;
|
|
84
|
-
return true;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
return childData ? updatePathToElementWithKeyFocus(childData, [].concat(_toConsumableArray(paths), [_index]), _toConsumableArray(childData), dataId) : false;
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
if (!updatePathToElementWithKeyFocus(data, [], data)) {
|
|
92
|
-
var _data$;
|
|
93
|
-
|
|
94
|
-
// Couldn't find its location in the tree.
|
|
95
|
-
// This should not happen, reset its value to root.
|
|
96
|
-
setFocusedFolderId(e.key === 'ArrowDown' ? (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.id : undefined);
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
e.preventDefault();
|
|
101
|
-
e.stopPropagation();
|
|
102
|
-
|
|
103
|
-
if (e.key === ' ') {
|
|
104
|
-
var simulatedEvent = new MouseEvent('click', {
|
|
105
|
-
bubbles: true,
|
|
106
|
-
cancelable: true,
|
|
107
|
-
view: window
|
|
108
|
-
});
|
|
109
|
-
document.activeElement && document.activeElement.dispatchEvent(simulatedEvent);
|
|
110
|
-
return;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
if (e.key === 'ArrowRight') {
|
|
114
|
-
var _elementWithKeyFocus$;
|
|
115
|
-
|
|
116
|
-
if (!elementWithKeyFocus.isOpen && ((_elementWithKeyFocus$ = elementWithKeyFocus.data) === null || _elementWithKeyFocus$ === void 0 ? void 0 : _elementWithKeyFocus$.length) && id && elementWithKeyFocus.paths.length < MAX_LEVEL_FOR_FOLDERS - 1) {
|
|
117
|
-
onToggleOpen(id);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
return;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
if (e.key === 'ArrowLeft') {
|
|
124
|
-
if (id && elementWithKeyFocus.isOpen) {
|
|
125
|
-
onToggleOpen(id);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
if (!id && e.key === 'ArrowDown') {
|
|
132
|
-
var _data$2;
|
|
133
|
-
|
|
134
|
-
setFocusedFolderId((_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.id);
|
|
135
|
-
return;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
if (!id) {
|
|
139
|
-
return;
|
|
140
|
-
} // Move up
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
if (e.key === 'ArrowUp') {
|
|
144
|
-
if (elementWithKeyFocus.index > 0) {
|
|
145
|
-
var _elementWithKeyFocus$2;
|
|
146
|
-
|
|
147
|
-
// Move upwards to the parent folder
|
|
148
|
-
setFocusedFolderId(elementWithKeyFocus.parent ? (_elementWithKeyFocus$2 = elementWithKeyFocus.parent[elementWithKeyFocus.index - 1]) === null || _elementWithKeyFocus$2 === void 0 ? void 0 : _elementWithKeyFocus$2.id : undefined);
|
|
149
|
-
} else if (elementWithKeyFocus.paths.length > 0) {
|
|
150
|
-
var _findParent$parentsCu;
|
|
151
|
-
|
|
152
|
-
elementWithKeyFocus.paths.pop();
|
|
153
|
-
var findParent = data;
|
|
154
|
-
elementWithKeyFocus.paths.forEach(function (index) {
|
|
155
|
-
findParent = findParent[index].data;
|
|
156
|
-
});
|
|
157
|
-
var parentsCurrentIndex = findParent.findIndex(function (_ref3) {
|
|
158
|
-
var id = _ref3.id;
|
|
159
|
-
return id === elementWithKeyFocus.parentId;
|
|
160
|
-
});
|
|
161
|
-
setFocusedFolderId((_findParent$parentsCu = findParent[parentsCurrentIndex]) === null || _findParent$parentsCu === void 0 ? void 0 : _findParent$parentsCu.id);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
return;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
if (elementWithKeyFocus.isOpen) {
|
|
168
|
-
var _elementWithKeyFocus$3;
|
|
169
|
-
|
|
170
|
-
if ((_elementWithKeyFocus$3 = elementWithKeyFocus.data) === null || _elementWithKeyFocus$3 === void 0 ? void 0 : _elementWithKeyFocus$3.length) {
|
|
171
|
-
var _elementWithKeyFocus$4;
|
|
172
|
-
|
|
173
|
-
setFocusedFolderId((_elementWithKeyFocus$4 = elementWithKeyFocus.data[0]) === null || _elementWithKeyFocus$4 === void 0 ? void 0 : _elementWithKeyFocus$4.id);
|
|
174
|
-
} else {
|
|
175
|
-
// move to next child of parent if any... need new traverse :-/
|
|
176
|
-
traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
return;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
if (elementWithKeyFocus.parent && elementWithKeyFocus.index < ((_elementWithKeyFocus$5 = elementWithKeyFocus.parent) === null || _elementWithKeyFocus$5 === void 0 ? void 0 : _elementWithKeyFocus$5.length) - 1) {
|
|
183
|
-
var _elementWithKeyFocus$6;
|
|
184
|
-
|
|
185
|
-
// Move downwards to the next child
|
|
186
|
-
setFocusedFolderId((_elementWithKeyFocus$6 = elementWithKeyFocus.parent[elementWithKeyFocus.index + 1]) === null || _elementWithKeyFocus$6 === void 0 ? void 0 : _elementWithKeyFocus$6.id);
|
|
187
|
-
return;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
traverseUpwards(data, setFocusedFolderId, elementWithKeyFocus.paths, elementWithKeyFocus.index);
|
|
191
|
-
return;
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
export default keyboardNavigation;
|
|
File without changes
|
package/lib/Spinner/Spinner.d.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2018-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
/// <reference types="react" />
|
|
9
|
-
import { SpacingNames } from '@ndla/core';
|
|
10
|
-
interface Props {
|
|
11
|
-
size?: SpacingNames;
|
|
12
|
-
margin?: string;
|
|
13
|
-
inverted?: boolean;
|
|
14
|
-
}
|
|
15
|
-
declare const Spinner: ({ size, margin, inverted }: Partial<Props>) => JSX.Element;
|
|
16
|
-
export default Spinner;
|
package/lib/Spinner/Spinner.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
|
|
8
|
-
var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
var _core = require("@ndla/core");
|
|
13
|
-
|
|
14
|
-
var _core2 = require("@emotion/core");
|
|
15
|
-
|
|
16
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Copyright (c) 2018-present, NDLA.
|
|
20
|
-
*
|
|
21
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
22
|
-
* LICENSE file in the root directory of this source tree.
|
|
23
|
-
*
|
|
24
|
-
*/
|
|
25
|
-
var SpinnerDiv = ( /*#__PURE__*/0, _styledBase["default"])('div', {
|
|
26
|
-
target: "eecx2hs0",
|
|
27
|
-
label: "SpinnerDiv"
|
|
28
|
-
})("border:calc(", function (props) {
|
|
29
|
-
return _core.spacing[props.size];
|
|
30
|
-
}, " / 6.5) solid rgba(0,0,0,0.1);border-bottom-color:", function (props) {
|
|
31
|
-
return props.inverted ? '#fff' : _core.colors.brand.primary;
|
|
32
|
-
}, ";border-radius:50%;animation:spinnerAnimation 0.7s linear infinite;height:", function (props) {
|
|
33
|
-
return _core.spacing[props.size];
|
|
34
|
-
}, ";width:", function (props) {
|
|
35
|
-
return _core.spacing[props.size];
|
|
36
|
-
}, ";margin:", function (props) {
|
|
37
|
-
return props.margin;
|
|
38
|
-
}, ";display:block;@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCNkMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjb2xvcnMsIHNwYWNpbmcsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplPzogU3BhY2luZ05hbWVzO1xuICBtYXJnaW4/OiBzdHJpbmc7XG4gIGludmVydGVkPzogYm9vbGVhbjtcbn1cblxuaW50ZXJmYWNlIFN0eWxlZFByb3BzIGV4dGVuZHMgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG59XG5cbmNvbnN0IFNwaW5uZXJEaXYgPSBzdHlsZWQoJ2RpdicpPFN0eWxlZFByb3BzPmBcbiAgYm9yZGVyOiBjYWxjKCR7KHByb3BzKSA9PiBzcGFjaW5nW3Byb3BzLnNpemVdfSAvIDYuNSkgc29saWQgcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItYm90dG9tLWNvbG9yOiAkeyhwcm9wcykgPT4gKHByb3BzLmludmVydGVkID8gJyNmZmYnIDogY29sb3JzLmJyYW5kLnByaW1hcnkpfTtcbiAgYm9yZGVyLXJhZGl1czogNTAlO1xuICBhbmltYXRpb246IHNwaW5uZXJBbmltYXRpb24gMC43cyBsaW5lYXIgaW5maW5pdGU7XG4gIGhlaWdodDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICB3aWR0aDogJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19O1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBkaXNwbGF5OiBibG9jaztcbiAgQGtleWZyYW1lcyBzcGlubmVyQW5pbWF0aW9uIHtcbiAgICAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcbiAgICB9XG4gICAgMTAwJSB7XG4gICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpO1xuICAgIH1cbiAgfVxuYDtcblxuY29uc3QgU3Bpbm5lciA9ICh7IHNpemUgPSAnbGFyZ2UnLCBtYXJnaW4gPSBgJHtzcGFjaW5nLm5vcm1hbH0gYXV0b2AsIGludmVydGVkIH06IFBhcnRpYWw8UHJvcHM+KSA9PiAoXG4gIDxTcGlubmVyRGl2IHNpemU9e3NpemV9IG1hcmdpbj17bWFyZ2lufSBpbnZlcnRlZD17ISFpbnZlcnRlZH0gLz5cbik7XG5cbmV4cG9ydCBkZWZhdWx0IFNwaW5uZXI7XG4iXX0= */"));
|
|
39
|
-
|
|
40
|
-
var Spinner = function Spinner(_ref) {
|
|
41
|
-
var _ref$size = _ref.size,
|
|
42
|
-
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
43
|
-
_ref$margin = _ref.margin,
|
|
44
|
-
margin = _ref$margin === void 0 ? "".concat(_core.spacing.normal, " auto") : _ref$margin,
|
|
45
|
-
inverted = _ref.inverted;
|
|
46
|
-
return (0, _core2.jsx)(SpinnerDiv, {
|
|
47
|
-
size: size,
|
|
48
|
-
margin: margin,
|
|
49
|
-
inverted: !!inverted
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
var _default = Spinner;
|
|
54
|
-
exports["default"] = _default;
|
package/lib/Spinner/index.d.ts
DELETED
package/lib/Spinner/index.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports["default"] = void 0;
|
|
7
|
-
|
|
8
|
-
var _Spinner = _interopRequireDefault(require("./Spinner"));
|
|
9
|
-
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
-
|
|
12
|
-
var _default = _Spinner["default"];
|
|
13
|
-
exports["default"] = _default;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2022-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
import { KeyboardNavigationProps } from './keyboardNavigation.types';
|
|
9
|
-
export declare const KEYBOARD_KEYS_OF_INTEREST: string[];
|
|
10
|
-
declare const keyboardNavigation: ({ e, data, onToggleOpen, setFocusedFolderId, focusedFolderId: id, openFolders, }: KeyboardNavigationProps) => string | undefined;
|
|
11
|
-
export default keyboardNavigation;
|