@ndla/ui 20.0.3 → 21.0.0

package/src/TreeStructure/TreeStructure.tsx

@@ -6,17 +6,18 @@
  *
  */
 
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing, fonts } from '@ndla/core';
 import { uniq } from 'lodash';
+import { IFolder } from '@ndla/types-learningpath-api';
 import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
-import { getPathOfFolder, getFolderName, flattenFolders } from './helperFunctions';
-import { TreeStructureProps } from './TreeStructure.types';
+import { flattenFolders } from './helperFunctions';
+import { CommonTreeStructureProps, FolderType } from './types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -29,42 +30,60 @@ const AddFolderWrapper = styled.div`
   margin-top: ${spacing.xsmall};
 `;
 
+export interface TreeStructureProps extends CommonTreeStructureProps {
+  defaultOpenFolders?: string[];
+  folders: FolderType[];
+  editable?: boolean;
+  framed?: boolean;
+  label?: string;
+  maximumLevelsOfFoldersAllowed?: number;
+  onNewFolder: (name: string, parentId: string) => Promise<IFolder>;
+}
+
 const TreeStructure = ({
+  defaultOpenFolders,
+  editable,
+  menuItems,
   folders,
+  framed,
   label,
-  editable,
   loading,
+  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
   onNewFolder,
   onSelectFolder,
   openOnFolderClick,
-  framed,
-  folderIdMarkedByDefault,
-  defaultOpenFolders,
-  folderChild,
-  maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
-  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
+
+  const defaultSelectedFolderId = defaultOpenFolders && defaultOpenFolders[defaultOpenFolders.length - 1];
+
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
-  const [focusedFolderId, setFocusedFolderId] = useState<string | undefined>();
-  const [markedFolderId, setMarkedFolderId] = useState<string | undefined>(folderIdMarkedByDefault || folders[0]?.id);
-  const treestructureRef = useRef<HTMLDivElement>(null);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const rootLevelId = 'treestructure-root';
-
-  const visibleFolders = useMemo(
-    () => flattenFolders(folders, openFolders).map((folder) => folder.id),
-    [folders, openFolders],
-  );
+
+  const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
+  const [focusedId, setFocusedId] = useState<string | undefined>();
+  const [selectedFolder, setSelectedFolder] = useState<FolderType | undefined>();
+
+  const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
+  const visibleFolderIds = flattenedFolders.map((folder) => folder.id);
 
   useEffect(() => {
     if (defaultOpenFolders) {
       setOpenFolders((prev) => {
-        return uniq([...defaultOpenFolders, ...prev]);
+        return uniq(defaultOpenFolders.concat(prev));
       });
     }
   }, [defaultOpenFolders]);
 
+  useEffect(() => {
+    if (defaultSelectedFolderId !== undefined) {
+      const selected = flattenFolders(folders).find((folder) => folder.id === defaultSelectedFolderId);
+      if (selected) {
+        setSelectedFolder(selected);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultSelectedFolderId]);
+
   useEffect(() => {
     if (!loading) {
       setNewFolderParentId(undefined);
@@ -72,39 +91,30 @@ const TreeStructure = ({
   }, [loading]);
 
   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) {
+    const closedFolder = flattenedFolders.find((folder) => folder.id === id);
+
+    if (closedFolder) {
+      const subFolders = closedFolder.subfolders && flattenFolders(closedFolder.subfolders);
+      if (subFolders.some((folder) => folder.id === selectedFolder?.id)) {
         if (onSelectFolder) {
-          setMarkedFolderId(closingFolderPath[closingFolderPath.length - 1]);
-          onSelectFolder(closingFolderPath[closingFolderPath.length - 1]);
-        } else {
-          setFocusedFolderId(closingFolderPath[closingFolderPath.length - 1]);
+          setSelectedFolder(closedFolder);
+          onSelectFolder(closedFolder.id);
         }
+        setFocusedId(closedFolder.id);
       }
     }
-    setOpenFolders(openFolders.filter((folder) => folder !== id));
+    setOpenFolders(openFolders.filter((folderId) => folderId !== id));
   };
 
   const onOpenFolder = (id: string) => {
     setOpenFolders(uniq(openFolders.concat(id)));
   };
 
-  const onCreateNewFolder = (parentId: string) => {
-    setNewFolderParentId(parentId);
-  };
-
   const onSaveNewFolder = (name: string, parentId: string) => {
-    onNewFolder(name, parentId).then((newFolderId) => {
-      if (newFolderId) {
-        setMarkedFolderId(newFolderId);
-        setFocusedFolderId(newFolderId);
+    onNewFolder(name, parentId).then((newFolder) => {
+      if (newFolder) {
+        setSelectedFolder(newFolder);
+        setFocusedId(newFolder.id);
         setOpenFolders(uniq(openFolders.concat(parentId)));
       }
     });
@@ -114,39 +124,33 @@ const TreeStructure = ({
     setNewFolderParentId(undefined);
   };
 
-  const onMarkFolder = (id: string) => {
-    setMarkedFolderId(id);
-    setFocusedFolderId(id);
-  };
-
-  const paths = getPathOfFolder(folders, markedFolderId || '');
-  const canAddFolder = editable && paths.length < (maximumLevelsOfFoldersAllowed || 1);
+  const canAddFolder =
+    editable && selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div ref={treestructureRef}>
-      {label && <StyledLabel htmlFor={rootLevelId}>{label}</StyledLabel>}
-      <TreeStructureStyledWrapper ref={wrapperRef} id={rootLevelId} aria-label="Menu tree" role="tree" framed={framed}>
+    <div>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <TreeStructureStyledWrapper aria-label="Menu tree" role="tree" framed={framed}>
         <FolderItems
-          onSelectFolder={onSelectFolder}
-          level={1}
-          folders={folders}
           editable={editable}
-          onOpenFolder={onOpenFolder}
-          onCloseFolder={onCloseFolder}
+          focusedFolderId={focusedId}
+          menuItems={menuItems}
+          folders={folders}
+          level={1}
+          loading={loading}
+          selectedFolder={selectedFolder}
+          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
           newFolderParentId={newFolderParentId}
-          onCreateNewFolder={onCreateNewFolder}
           onCancelNewFolder={onCancelNewFolder}
+          onCloseFolder={onCloseFolder}
+          onOpenFolder={onOpenFolder}
           onSaveNewFolder={onSaveNewFolder}
-          visibleFolders={visibleFolders}
+          onSelectFolder={onSelectFolder}
           openFolders={openFolders}
-          markedFolderId={markedFolderId}
-          onMarkFolder={onMarkFolder}
           openOnFolderClick={openOnFolderClick}
-          loading={loading}
-          focusedFolderId={focusedFolderId}
-          setFocusedFolderId={setFocusedFolderId}
-          folderChild={folderChild}
-          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
+          setFocusedId={setFocusedId}
+          setSelectedFolder={setSelectedFolder}
+          visibleFolders={visibleFolderIds}
         />
       </TreeStructureStyledWrapper>
       {editable && (
@@ -155,16 +159,14 @@ const TreeStructure = ({
             tooltip={
               canAddFolder
                 ? t('myNdla.newFolderUnder', {
-                    folderName: getFolderName(folders, markedFolderId),
+                    folderName: selectedFolder?.name,
                   })
                 : t('treeStructure.maxFoldersAlreadyAdded')
             }>
             <AddButton
               disabled={!canAddFolder}
               aria-label={t('myNdla.newFolder')}
-              onClick={() => {
-                setNewFolderParentId(markedFolderId);
-              }}>
+              onClick={() => setNewFolderParentId(selectedFolder?.id)}>
               {t('myNdla.newFolder')}
             </AddButton>
           </Tooltip>

package/src/TreeStructure/helperFunctions.ts

@@ -1,44 +1,10 @@
-import { FolderStructureProps } from './TreeStructure.types';
+import { FolderType } from './types';
 
-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 (subfolders?.length) {
-        return paths(subfolders, [...path, id]);
-      }
-    }
-    return [];
-  };
-  return paths(data, []);
-};
-
-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, subfolders }, _index) => {
-      if (id === findId) {
-        folderName = name;
-        return true;
-      } else if (subfolders?.length) {
-        return paths(subfolders);
-      }
-      return false;
-    });
-  };
-  paths(data);
-  return folderName;
-};
-
-export const flattenFolders = (folders: FolderStructureProps[], openFolders?: string[]): FolderStructureProps[] => {
+export const flattenFolders = (folders: FolderType[], openFolders?: string[]): FolderType[] => {
   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[]);
+  }, [] as FolderType[]);
 };

package/src/TreeStructure/index.ts

@@ -7,5 +7,6 @@
  */
 
 import TreeStructure from './TreeStructure';
-export type { FolderStructureProps, TreeStructureProps } from './TreeStructure.types';
+export type { FolderType, TreeStructureMenuProps } from './types';
+export type { TreeStructureProps } from './TreeStructure';
 export { TreeStructure };

package/src/TreeStructure/types.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { MouseEvent, ReactNode } from 'react';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { MenuItemProps } from '@ndla/button/src';
+
+export interface FolderType extends IFolder {
+  icon?: ReactNode;
+}
+
+export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
+  onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
+}
+
+export interface CommonTreeStructureProps {
+  loading?: boolean;
+  onSelectFolder?: (id: string) => void;
+  openOnFolderClick?: boolean;
+  menuItems?: TreeStructureMenuProps[];
+}
+
+export interface CommonFolderItemsProps extends CommonTreeStructureProps {
+  focusedFolderId?: string;
+  level: number;
+  selectedFolder?: FolderType;
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
+  setFocusedId: (id: string) => void;
+  setSelectedFolder: (id: FolderType) => void;
+  visibleFolders: string[];
+}

package/src/index.ts

@@ -244,4 +244,4 @@ export type { SnackBarItem } from './SnackBar';
 export { SnackBar } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
-export type { FolderStructureProps, TreeStructureProps } from './TreeStructure';
+export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';

package/lib/TreeStructure/TreeStructure.types.d.ts

@@ -1,61 +0,0 @@
-/**
- * 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 React, { ReactNode } from 'react';
-export interface FolderStructureProps {
-    id: string;
-    name: string;
-    subfolders: FolderStructureProps[];
-    isFavorite?: boolean;
-    status?: string;
-    openAsDefault?: boolean;
-    icon?: ReactNode;
-}
-interface CommonFolderProps {
-    editable?: boolean;
-    loading?: boolean;
-    openOnFolderClick?: boolean;
-    onSelectFolder?: (id: string) => void;
-}
-export interface TreeStructureProps extends CommonFolderProps {
-    folders: FolderStructureProps[];
-    framed?: boolean;
-    label?: string;
-    folderIdMarkedByDefault?: string;
-    onNewFolder: (name: string, parentId: string) => Promise<string>;
-    defaultOpenFolders?: string[];
-    folderChild?: FolderChildFuncType;
-    maximumLevelsOfFoldersAllowed?: number;
-}
-export declare type onCreateNewFolderProp = ({ idPaths, parentId, }: {
-    idPaths: number[];
-    parentId: string | undefined;
-}) => void;
-export declare type SetOpenFolderProp = React.Dispatch<React.SetStateAction<string[]>>;
-export declare type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
-export declare type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
-export interface FolderItemsProps extends CommonFolderProps {
-    folders: FolderStructureProps[];
-    onCloseFolder: (id: string) => void;
-    onOpenFolder: (id: string) => void;
-    onSaveNewFolder: (name: string, parentId: string) => void;
-    onCancelNewFolder: () => void;
-    onCreateNewFolder: (parentId: string) => void;
-    newFolderParentId: string | undefined;
-    visibleFolders: string[];
-    openFolders: string[];
-    markedFolderId?: string;
-    onMarkFolder: (id: string) => void;
-    level: number;
-    focusedFolderId: string | undefined;
-    setFocusedFolderId: SetFocusedFolderId;
-    keyNavigationFocusIsCreateFolderButton?: boolean;
-    icon?: ReactNode;
-    folderChild?: FolderChildFuncType;
-    maximumLevelsOfFoldersAllowed: number;
-}
-export {};

package/src/TreeStructure/TreeStructure.types.ts

@@ -1,71 +0,0 @@
-/**
- * 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 React, { ReactNode } from 'react';
-
-export interface FolderStructureProps {
-  id: string;
-  name: string;
-  subfolders: FolderStructureProps[];
-  isFavorite?: boolean;
-  status?: string;
-  openAsDefault?: boolean;
-  icon?: ReactNode;
-}
-
-interface CommonFolderProps {
-  editable?: boolean;
-  loading?: boolean;
-  openOnFolderClick?: boolean;
-  onSelectFolder?: (id: string) => void;
-}
-
-export interface TreeStructureProps extends CommonFolderProps {
-  folders: FolderStructureProps[];
-  framed?: boolean;
-  label?: string;
-  folderIdMarkedByDefault?: string;
-  onNewFolder: (name: string, parentId: string) => Promise<string>;
-  defaultOpenFolders?: string[];
-  folderChild?: FolderChildFuncType;
-  maximumLevelsOfFoldersAllowed?: number;
-}
-
-export type onCreateNewFolderProp = ({
-  idPaths,
-  parentId,
-}: {
-  idPaths: number[];
-  parentId: string | undefined;
-}) => void;
-
-export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<string[]>>;
-export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
-
-export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
-
-export interface FolderItemsProps extends CommonFolderProps {
-  folders: FolderStructureProps[];
-  onCloseFolder: (id: string) => void;
-  onOpenFolder: (id: string) => void;
-  onSaveNewFolder: (name: string, parentId: string) => void;
-  onCancelNewFolder: () => void;
-  onCreateNewFolder: (parentId: string) => void;
-  newFolderParentId: string | undefined;
-  visibleFolders: string[];
-  openFolders: string[];
-  markedFolderId?: string;
-  onMarkFolder: (id: string) => void;
-  level: number;
-  focusedFolderId: string | undefined;
-  setFocusedFolderId: SetFocusedFolderId;
-  keyNavigationFocusIsCreateFolderButton?: boolean;
-  icon?: ReactNode;
-  folderChild?: FolderChildFuncType;
-  maximumLevelsOfFoldersAllowed: number;
-}