@ndla/ui 19.0.1 → 19.2.0

package/src/TreeStructure/TreeStructure.tsx

@@ -7,7 +7,6 @@
  */
 
 import React, { useEffect, useState, useRef, useMemo } from 'react';
-import { uuid } from '@ndla/util';
 import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
@@ -16,9 +15,8 @@ import { spacing, fonts } from '@ndla/core';
 import { uniq } from 'lodash';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
-import { getIdPathsOfFolder, getPathOfFolder, getFolderName } from './helperFunctions';
-import keyboardNavigation, { KEYBOARD_KEYS_OF_INTEREST } from './keyboardNavigation/keyboardNavigation';
-import { NewFolderProps, TreeStructureProps } from './TreeStructure.types';
+import { getPathOfFolder, getFolderName, flattenFolders } from './helperFunctions';
+import { TreeStructureProps } from './TreeStructure.types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -32,26 +30,32 @@ const AddFolderWrapper = styled.div`
 `;
 
 const TreeStructure = ({
-  data,
+  folders,
   label,
   editable,
   loading,
   onNewFolder,
+  onSelectFolder,
   openOnFolderClick,
   framed,
   folderIdMarkedByDefault,
   defaultOpenFolders,
   folderChild,
-  maximumLevelsOfFoldersAllowed,
+  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
-  const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
+  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
   const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || data[0]?.id);
+  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || folders[0]?.id);
   const treestructureRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const rootLevelId = useMemo(() => uuid(), []); // TODO: use useId hook when we update to React 18
+  const rootLevelId = 'treestructure-root';
+
+  const visibleFolders = useMemo(
+    () => flattenFolders(folders, openFolders).map((folder) => folder.id),
+    [folders, openFolders],
+  );
 
   useEffect(() => {
     if (defaultOpenFolders) {
@@ -63,54 +67,51 @@ const TreeStructure = ({
 
   useEffect(() => {
     if (!loading) {
-      setNewFolder(undefined);
+      setNewFolderParentId(undefined);
     }
   }, [loading]);
 
-  const onToggleOpen = (id: string) => {
-    if (openFolders.includes(id)) {
-      // Did we just closed a folder with a marked folder inside it?
-      // If so, we need to mark the folder we just closed.
-      if (markedFolderId) {
-        const closingFolderPath = getPathOfFolder(data, id);
-        const markedFolderPath = getPathOfFolder(data, markedFolderId);
-        const markedFolderIsSubPath = closingFolderPath.every(
-          (folderId, _index) => markedFolderPath[_index] === folderId,
-        );
-        if (markedFolderIsSubPath) {
+  const onCloseFolder = (id: string) => {
+    // Did we just closed a folder with a marked folder inside it?
+    // If so, we need to mark the folder we just closed.
+    if (markedFolderId) {
+      const closingFolderPath = getPathOfFolder(folders, id);
+      const markedFolderPath = getPathOfFolder(folders, markedFolderId);
+      const markedFolderIsSubPath = closingFolderPath.every(
+        (folderId, _index) => markedFolderPath[_index] === folderId,
+      );
+      if (markedFolderIsSubPath) {
+        if (onSelectFolder) {
           setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          onSelectFolder(closingFolderPath[closingFolderPath.length - 1]);
+        } else {
+          setFocusedFolderId(closingFolderPath[closingFolderPath.length - 1]);
         }
       }
-      setOpenFolders(openFolders.filter((folder) => folder !== id));
-    } else {
-      setOpenFolders(uniq([...openFolders, id]));
     }
+    setOpenFolders(openFolders.filter((folder) => folder !== id));
   };
 
-  const onCreateNewFolder = (props: { idPaths: number[]; parentId?: string }) => {
-    setNewFolder(props);
+  const onOpenFolder = (id: string) => {
+    setOpenFolders(uniq(openFolders.concat(id)));
   };
 
-  const onSaveNewFolder = (value: string) => {
-    if (newFolder) {
-      // We would like to create a new folder with the name of value.
-      // Its location in structure is based on newFolder object
-      onNewFolder({ ...newFolder, value }).then((newFolderId) => {
-        if (newFolderId) {
-          setMarkedFolderId(newFolderId);
-          setFocusedFolderId(newFolderId);
-          // Open current folder in case it was closed..
-
-          if (newFolder.parentId) {
-            setOpenFolders(uniq([...openFolders, newFolder.parentId]));
-          }
-        }
-      });
-    }
+  const onCreateNewFolder = (parentId: string) => {
+    setNewFolderParentId(parentId);
+  };
+
+  const onSaveNewFolder = (name: string, parentId: string) => {
+    onNewFolder(name, parentId).then((newFolderId) => {
+      if (newFolderId) {
+        setMarkedFolderId(newFolderId);
+        setFocusedFolderId(newFolderId);
+        setOpenFolders(uniq(openFolders.concat(parentId)));
+      }
+    });
   };
 
   const onCancelNewFolder = () => {
-    setNewFolder(undefined);
+    setNewFolderParentId(undefined);
   };
 
   const onMarkFolder = (id: string) => {
@@ -118,35 +119,25 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
-  const paths = getPathOfFolder(data, markedFolderId || '');
+  const paths = getPathOfFolder(folders, markedFolderId || '');
   const canAddFolder = editable && paths.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div
-      ref={treestructureRef}
-      onKeyDown={(e) => {
-        if (wrapperRef.current?.contains(document.activeElement) && KEYBOARD_KEYS_OF_INTEREST.includes(e.key)) {
-          keyboardNavigation({
-            e,
-            data,
-            setFocusedFolderId,
-            focusedFolderId,
-            onToggleOpen,
-            openFolders,
-          });
-        }
-      }}>
+    <div ref={treestructureRef}>
       {label && <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>}
       <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
         <FolderItems
-          idPaths={[]}
-          data={data}
+          onSelectFolder={onSelectFolder}
+          level={1}
+          folders={folders}
           editable={editable}
-          onToggleOpen={onToggleOpen}
-          newFolder={newFolder}
+          onOpenFolder={onOpenFolder}
+          onCloseFolder={onCloseFolder}
+          newFolderParentId={newFolderParentId}
           onCreateNewFolder={onCreateNewFolder}
           onCancelNewFolder={onCancelNewFolder}
           onSaveNewFolder={onSaveNewFolder}
+          visibleFolders={visibleFolders}
           openFolders={openFolders}
           markedFolderId={markedFolderId}
           onMarkFolder={onMarkFolder}
@@ -154,7 +145,6 @@ const TreeStructure = ({
           loading={loading}
           focusedFolderId={focusedFolderId}
           setFocusedFolderId={setFocusedFolderId}
-          firstLevel
           folderChild={folderChild}
           maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
         />
@@ -165,16 +155,15 @@ const TreeStructure = ({
             tooltip={
               canAddFolder
                 ? t('myNdla.newFolderUnder', {
-                    folderName: getFolderName(data, markedFolderId),
+                    folderName: getFolderName(folders, markedFolderId),
                   })
-                : t('myNdla.maxFoldersAlreadyAdded')
+                : t('treeStructure.maxFoldersAlreadyAdded')
             }>
             <AddButton
               disabled={!canAddFolder}
               aria-label={t('myNdla.newFolder')}
               onClick={() => {
-                const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
-                setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
+                setNewFolderParentId(markedFolderId);
               }}>
               {t('myNdla.newFolder')}
             </AddButton>
@@ -185,8 +174,4 @@ const TreeStructure = ({
   );
 };
 
-TreeStructure.defaultProps = {
-  maximumLevelsOfFoldersAllowed: MAX_LEVEL_FOR_FOLDERS,
-};
-
 export default TreeStructure;

package/src/TreeStructure/TreeStructure.types.ts

@@ -11,35 +11,29 @@ import React, { ReactNode } from 'react';
 export interface FolderStructureProps {
   id: string;
   name: string;
-  isOpen?: boolean;
-  data?: FolderStructureProps[];
+  subfolders: FolderStructureProps[];
   isFavorite?: boolean;
   status?: string;
   openAsDefault?: boolean;
-  url?: string;
   icon?: ReactNode;
 }
 
-export interface NewFolderProps {
-  parentId?: string;
-  idPaths: number[];
-}
-
 interface CommonFolderProps {
-  data: FolderStructureProps[];
   editable?: boolean;
   loading?: boolean;
   openOnFolderClick?: boolean;
+  onSelectFolder?: (id: string) => void;
 }
 
 export interface TreeStructureProps extends CommonFolderProps {
+  folders: FolderStructureProps[];
   framed?: boolean;
   label?: string;
   folderIdMarkedByDefault?: string;
-  onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
+  onNewFolder: (name: string, parentId: string) => Promise<string>;
   defaultOpenFolders?: string[];
   folderChild?: FolderChildFuncType;
-  maximumLevelsOfFoldersAllowed: number;
+  maximumLevelsOfFoldersAllowed?: number;
 }
 
 export type onCreateNewFolderProp = ({
@@ -56,18 +50,20 @@ export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | un
 export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
 
 export interface FolderItemsProps extends CommonFolderProps {
-  onToggleOpen: (id: string) => void;
-  onSaveNewFolder: (value: string) => void;
+  folders: FolderStructureProps[];
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
   onCancelNewFolder: () => void;
-  onCreateNewFolder: onCreateNewFolderProp;
-  newFolder: NewFolderProps | undefined;
+  onCreateNewFolder: (parentId: string) => void;
+  newFolderParentId: string | undefined;
+  visibleFolders: string[];
   openFolders: string[];
   markedFolderId?: string;
   onMarkFolder: (id: string) => void;
-  idPaths: number[];
+  level: number;
   focusedFolderId: string | undefined;
   setFocusedFolderId: SetFocusedFolderId;
-  firstLevel: boolean;
   keyNavigationFocusIsCreateFolderButton?: boolean;
   icon?: ReactNode;
   folderChild?: FolderChildFuncType;

package/src/TreeStructure/arrowNavigation.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { KeyboardEvent } from 'react';
+
+const navigateVertical = (
+  visibleFolders: string[],
+  folderId: string,
+  setFocusedFolderId: (id: string) => void,
+  direction: 1 | -1,
+) => {
+  const currentIndex = visibleFolders.findIndex((id) => id === folderId);
+  const target = visibleFolders[currentIndex + direction];
+  if (target !== undefined) {
+    setFocusedFolderId(target);
+  }
+};
+
+const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+export const arrowNavigation = (
+  e: KeyboardEvent<HTMLElement>,
+  id: string,
+  visibleFolders: string[],
+  setFocusedFolderId: (id: string) => void,
+  onOpen: (id: string) => void,
+  onClose: (id: string) => void,
+) => {
+  if (!arrowKeys.includes(e.key)) {
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  switch (e.key) {
+    case 'ArrowUp':
+      return navigateVertical(visibleFolders, id, setFocusedFolderId, -1);
+    case 'ArrowDown':
+      return navigateVertical(visibleFolders, id, setFocusedFolderId, 1);
+    case 'ArrowLeft':
+      return onClose(id);
+    case 'ArrowRight':
+      return onOpen(id);
+    default:
+      return;
+  }
+};

package/src/TreeStructure/helperFunctions.ts

@@ -1,12 +1,12 @@
 import { FolderStructureProps } from './TreeStructure.types';
 
-const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
-  const paths = (dataChildren: FolderStructureProps[], path: string[]): string[] => {
-    for (const { id, data: dataChildrenSub } of dataChildren) {
+export const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[] => {
+  const paths = (folders: FolderStructureProps[], path: string[]): string[] => {
+    for (const { id, subfolders } of folders) {
       if (id === findId) {
         return [...path, id];
-      } else if (dataChildrenSub?.length) {
-        return paths(dataChildrenSub, [...path, id]);
+      } else if (subfolders?.length) {
+        return paths(subfolders, [...path, id]);
       }
     }
     return [];
@@ -14,33 +14,18 @@ const getPathOfFolder = (data: FolderStructureProps[], findId: string): string[]
   return paths(data, []);
 };
 
-const getIdPathsOfFolder = (data: FolderStructureProps[], findId: string): number[] => {
-  let currentPath: number[] = [];
-  const paths = (dataChildren: FolderStructureProps[], path: number[]) => {
-    dataChildren.forEach(({ id, data: dataChildrenSub }, _index) => {
-      if (id === findId) {
-        currentPath = [...path, _index];
-      } else if (dataChildrenSub?.length) {
-        paths(dataChildrenSub, [...path, _index]);
-      }
-    });
-  };
-  paths(data, []);
-  return currentPath;
-};
-
-const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
+export const getFolderName = (data: FolderStructureProps[], findId: string | undefined): string | undefined => {
   if (!findId) {
     return undefined;
   }
   let folderName: string | undefined;
   const paths = (dataChildren: FolderStructureProps[]) => {
-    dataChildren.some(({ id, name, data: dataChildrenSub }, _index) => {
+    dataChildren.some(({ id, name, subfolders }, _index) => {
       if (id === findId) {
         folderName = name;
         return true;
-      } else if (dataChildrenSub?.length) {
-        return paths(dataChildrenSub);
+      } else if (subfolders?.length) {
+        return paths(subfolders);
       }
       return false;
     });
@@ -49,4 +34,11 @@ const getFolderName = (data: FolderStructureProps[], findId: string | undefined)
   return folderName;
 };
 
-export { getPathOfFolder, getIdPathsOfFolder, getFolderName };
+export const flattenFolders = (folders: FolderStructureProps[], openFolders?: string[]): FolderStructureProps[] => {
+  return folders.reduce((acc, { subfolders, id, ...rest }) => {
+    if (!subfolders || (openFolders && !openFolders.includes(id))) {
+      return acc.concat({ subfolders, id, ...rest });
+    }
+    return acc.concat({ subfolders, id, ...rest }, flattenFolders(subfolders, openFolders));
+  }, [] as FolderStructureProps[]);
+};

package/src/locale/messages-en.ts

@@ -989,7 +989,13 @@ const messages = {
     resources_plural: '{{count}} Resources',
     folders: '{{count}} Folder',
     folders_plural: '{{count}} Folders',
-    folder: 'Folder',
+    folder: {
+      folder: 'Folder',
+      delete: 'Delete',
+      edit: 'Edit',
+    },
+    confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
+    confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
     myTags: 'My tags',
     newFolder: 'New folder',
@@ -1031,6 +1037,9 @@ const messages = {
       },
     },
     resource: {
+      add: 'Add folder/tag',
+      remove: 'Remove',
+      copyLink: 'Copy link to this page',
       addToMyNdla: 'Add to My NDLA',
       addedToMyNdla: 'Added to My NDLA',
     },

package/src/locale/messages-nb.ts

@@ -987,7 +987,13 @@ const messages = {
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      delete: 'Slett',
+      edit: 'Rediger',
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -1028,6 +1034,9 @@ const messages = {
       },
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til siden',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
     },

package/src/locale/messages-nn.ts

@@ -988,7 +988,13 @@ const messages = {
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      delete: 'Slett',
+      edit: 'Rediger',
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -1029,6 +1035,9 @@ const messages = {
       },
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til sida',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
     },

package/src/locale/messages-se.ts

@@ -987,7 +987,13 @@ const messages = {
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      delete: 'Slett',
+      edit: 'Rediger',
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -1028,6 +1034,9 @@ const messages = {
       },
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til siden',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
     },

package/src/locale/messages-sma.ts

@@ -987,7 +987,13 @@ const messages = {
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
     folders_plural: '{{count}} mapper',
-    folder: 'Mappe',
+    folder: {
+      folder: 'Mappe',
+      delete: 'Slett',
+      edit: 'Rediger',
+    },
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
+    confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
@@ -1028,6 +1034,9 @@ const messages = {
       },
     },
     resource: {
+      add: 'Legg til mappe/tag',
+      remove: 'Fjern',
+      copyLink: 'Kopier lenke til siden',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
     },