@orangelogic/orange-dam-content-browser-sdk 2.1.53 → 2.1.54

package/src/components/Browser/Browser.tsx

@@ -0,0 +1,284 @@
+import _debounce from 'lodash-es/debounce';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+
+import { LIBRARY_NAME } from '@/consts/data';
+import { useGetCollectionsQuery, useGetFoldersQuery } from '@/store/search/search.api';
+import { RootFolder } from '@/store/search/search.slice';
+import { Folder } from '@/types/search';
+import { getData } from '@/utils/storage';
+import {
+  CxChangeEvent, CxDrawer, CxInput, CxMenu, CxSelectEvent, CxSelectionChangeEvent, CxTree,
+} from '@/web-component';
+import { skipToken } from '@reduxjs/toolkit/query';
+
+import { Drawer } from './Browser.styled';
+import BrowserItem from './BrowserItem';
+
+type Props = {
+  collectionPath?: string;
+  currentFolder: Folder;
+  focusInput?: boolean;
+  lastLocationMode?: boolean;
+  open: boolean;
+  showCollections?: boolean;
+  useSession?: string;
+  onFolderSelect: (selectedFolder: Folder) => void;
+  onClose: () => void;
+};
+
+const Browser: FC<Props> = ({
+  collectionPath,
+  currentFolder,
+  focusInput,
+  lastLocationMode,
+  open,
+  showCollections,
+  useSession,
+  onFolderSelect,
+  onClose,
+}) => {
+  const [searchText, setSearchText] = useState('');
+  const [isDefined, setIsDefined] = useState(false);
+
+  const collectionRef = useRef<CxMenu>(null);
+  const drawerRef = useRef<CxDrawer>(null);
+  const searchRef = useRef<CxInput>(null);
+  const treeRef = useRef<CxTree>(null);
+  const firstRender = useRef(true);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-drawer'),
+      customElements.whenDefined('cx-input'),
+      customElements.whenDefined('cx-tree'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, []);
+
+  useEffect(() => {
+    const searchInput = searchRef.current;
+    if (!searchInput) return;
+    const onSearchInput = _debounce((e: CxChangeEvent) => {
+      const value = (e.target as CxInput).value;
+      if (searchText !== value && (value.length > 2 || value.length === 0)) {
+        setSearchText(value);
+      }
+    }, 500);
+    searchInput.addEventListener('cx-input', onSearchInput);
+
+    return () => {
+      searchInput.removeEventListener('cx-input', onSearchInput);
+    };
+  }, [isDefined, searchText]);
+
+  useEffect(() => {
+    const drawer = drawerRef.current;
+    if (!drawer) return;
+    const onDrawerClose = () => {
+      onClose();
+    };
+    drawer.addEventListener('cx-request-close', onDrawerClose);
+
+    return () => {
+      drawer.removeEventListener('cx-request-close', onDrawerClose);
+    };
+  }, [isDefined, onClose]);
+
+  const {
+    data: folders,
+    isLoading: isLoadingFolders,
+    isFetching: isFetchingFolders,
+    isError: isErrorFolders,
+  } = useGetFoldersQuery({ folder: RootFolder, searchText, useSession });
+
+  useEffect(() => {
+    const handleDefaultFolder = () => {
+      if (!folders) return;
+      const libraryFolder = folders.find((folder) => folder.title === LIBRARY_NAME);
+
+      if (libraryFolder) {
+        onFolderSelect(libraryFolder);
+      } else {
+        onFolderSelect(RootFolder);
+      }
+    };
+
+    if (firstRender.current && folders) {
+      firstRender.current = false;
+      if (lastLocationMode) {
+        getData('lastLocation').then((lastLocation) => {
+          if (typeof lastLocation === 'string') {
+            try {
+              const folder = JSON.parse(lastLocation) as Folder;
+              onFolderSelect(folder);
+            } catch (error) {
+              handleDefaultFolder();
+            }
+          } else {
+            handleDefaultFolder();
+          }
+        }).catch(() => {
+          handleDefaultFolder();
+        });
+      } else {
+        handleDefaultFolder();
+      }
+    }
+  }, [folders, lastLocationMode, onFolderSelect]);
+
+  const {
+    data: collections,
+    isLoading: isLoadingCollections,
+    isFetching: isFetchingCollections,
+    isError: isErrorCollections,
+  } = useGetCollectionsQuery(
+    collectionPath
+      ? {
+        folder: collectionPath,
+        useSession,
+      }
+      : skipToken,
+  );
+
+  useEffect(() => {
+    const tree = treeRef.current;
+    if (!tree) return;
+    const onTreeSelect = (e: CxSelectionChangeEvent) => {
+      const folder = JSON.parse(
+        e.detail.selection[0].dataset.value ?? '{}',
+      ) as Folder;
+      onFolderSelect?.(folder);
+    };
+    tree.addEventListener('cx-selection-change', onTreeSelect);
+  }, [isDefined, onFolderSelect]);
+
+  useEffect(() => {
+    const collection = collectionRef.current;
+    if (!collection) return;
+    const onCollectionSelect = (e: CxSelectEvent) => {
+      const folder = JSON.parse(e.detail.item.value ?? '{}') as Folder;
+      onFolderSelect?.(folder);
+    };
+    collection.addEventListener('cx-select', onCollectionSelect);
+
+    return () => {
+      collection.removeEventListener('cx-select', onCollectionSelect);
+    };
+  }, [isDefined, collections, onFolderSelect]);
+
+  const renderFolders = useCallback(() => {
+    if (isLoadingFolders || isFetchingFolders) {
+      return Array.from({ length: 5 }).map((_, index) => (
+        <cx-skeleton key={index}></cx-skeleton>
+      ));
+    } else if (folders && folders.length > 0) {
+      return folders?.map((folder) => (
+        <BrowserItem
+          key={folder.id}
+          folder={folder}
+          currentFolderID={currentFolder.id}
+          searchText={searchText}
+          useSession={useSession}
+        />
+      ));
+    } else if (isErrorFolders) {
+      return (
+        <cx-typography variant="body3">Failed to load folders</cx-typography>
+      );
+    }
+
+    return <cx-typography variant="body3">No folders found</cx-typography>;
+  }, [
+    isLoadingFolders,
+    isFetchingFolders,
+    isErrorFolders,
+    folders,
+    currentFolder.id,
+    searchText,
+    useSession,
+  ]);
+
+  const renderCollections = useCallback(() => {
+    if (isLoadingCollections || isFetchingCollections) {
+      return Array.from({ length: 5 }).map((_, index) => (
+        <cx-skeleton key={index}></cx-skeleton>
+      ));
+    } else if (collections && collections.length > 0) {
+      return collections?.map((collection) => {
+        const isSelected = currentFolder.id === collection.id;
+
+        return (  
+          <cx-menu-item
+            key={collection.id}
+            value={JSON.stringify(collection)}
+            className={`${isSelected ? 'selected' : ''}`}
+          >
+            <cx-icon slot="prefix" name="collections"></cx-icon>
+            {collection.title}
+          </cx-menu-item>
+        );
+      });
+    } else if (isErrorCollections) {
+      return (
+        <cx-typography variant="body3">
+          Failed to load collections
+        </cx-typography>
+      );
+    }
+
+    return <cx-typography variant="body3">No collections found</cx-typography>;
+  }, [isLoadingCollections, isFetchingCollections, collections, isErrorCollections, currentFolder.id]);
+
+  return (
+    <Drawer
+      ref={drawerRef}
+      label="Browser"
+      placement="start"
+      contained
+      open={open}
+    >
+      <cx-space direction="vertical" spacing="small" wrap="nowrap">
+        <cx-space
+          direction="vertical"
+          spacing="small"
+          style={{
+            padding: 'var(--body-spacing) var(--body-spacing) 0',
+          }}
+        >
+          <cx-typography variant="body3">Folders</cx-typography>
+          <cx-input
+            ref={searchRef}
+            value={searchText}
+            placeholder="Search..."
+            clearable
+            autoFocus={focusInput}
+            className='search-input'
+          >
+            <cx-icon name="search" slot="prefix" className="icon--large"></cx-icon>
+          </cx-input>
+          <div className="browser__folders">
+            <cx-tree ref={treeRef}>{renderFolders()}</cx-tree>
+          </div>
+        </cx-space>
+        {showCollections && collections && collections.length > 0 && (
+          <div className="browser__collections">
+            <cx-details>
+              <cx-typography slot="summary" variant="body3">
+                Collections
+              </cx-typography>
+              <cx-menu
+                ref={collectionRef}
+                className="browser__collections__menu"
+              >
+                {renderCollections()}
+              </cx-menu>
+            </cx-details>
+          </div>
+        )}
+      </cx-space>
+    </Drawer>
+  );
+};
+
+export default Browser;

package/src/components/Browser/BrowserItem.tsx

@@ -0,0 +1,98 @@
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useGetFoldersQuery } from '@/store/search/search.api';
+import { Folder } from '@/types/search';
+
+import { CxCollapseEvent, CxTreeItem } from '@/web-component';
+
+type Props = {
+  folder: Folder;
+  currentFolderID: string;
+  searchText?: string;
+  useSession?: string;
+};
+
+export const BrowserItem: FC<Props> = ({
+  folder,
+  currentFolderID,
+  searchText,
+  useSession,
+}) => {
+  const [isDefined, setIsDefined] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const treeItemRef = useRef<CxTreeItem>(null);
+  const isSelected = currentFolderID === folder.id;
+
+  const {
+    data: folders,
+    isFetching,
+  } = useGetFoldersQuery({ folder, searchText: '', useSession }, { skip: !isExpanded });
+
+  const highlightedTitle = useMemo(() => {
+    if (!searchText) return folder.title;
+    const searchWords = searchText.toLowerCase().split(' ').filter(Boolean);
+    const regex = new RegExp(`(${searchWords.join('|')})`, 'gi');
+    const parts = folder.title.split(regex);
+
+    return parts.map((part, index) =>
+      searchWords.includes(part.toLowerCase()) ? <strong key={index}>{part}</strong> : part,
+    );
+  }, [folder.title, searchText]);
+
+  useEffect(() => {
+    Promise.all([
+      customElements.whenDefined('cx-tree-item'),
+    ]).then(() => {
+      setIsDefined(true);
+    });
+  }, [isDefined]);
+
+  useEffect(() => {
+    const treeItem = treeItemRef.current;
+    if (!treeItem) return;
+    const onExpand = () => {
+      setIsExpanded(true);
+    };
+    const onCollapse = (e: CxCollapseEvent) => {
+      if (e.detail.target === treeItemRef.current) {
+        setIsExpanded(false);
+      }
+    };
+    treeItem.addEventListener('cx-lazy-load', onExpand);
+    treeItem.addEventListener('cx-expand', onExpand);
+    treeItem.addEventListener('cx-collapse', onCollapse);
+
+    return () => {
+      treeItem.removeEventListener('cx-lazy-load', onExpand);
+      treeItem.removeEventListener('cx-expand', onExpand);
+      treeItem.removeEventListener('cx-collapse', onCollapse);
+    };
+  }, [isDefined]);
+
+  // Lazy load if folder has children
+  // and (folders are not fetched yet or are fetching)
+  const isLazy = folder.hasChildren && (folders === undefined || isFetching);
+
+  return (
+    <cx-tree-item
+      ref={treeItemRef}
+      data-value={JSON.stringify(folder)}
+      expanded={isExpanded}
+      selected={isSelected}
+      lazy={isLazy}
+    >
+      <cx-icon name="folder"></cx-icon>
+      <cx-line-clamp lines={1}>{highlightedTitle}</cx-line-clamp>
+      {folders?.map((item) => (
+        <BrowserItem
+          key={item.id}
+          folder={item}
+          searchText={searchText}
+          currentFolderID={currentFolderID}
+        />
+      ))}
+    </cx-tree-item>
+  );
+};
+
+export default BrowserItem;

package/src/components/ControlBar/ControlBar.constants.tsx

@@ -0,0 +1,66 @@
+import { GridView } from '@/types/search';
+
+const AscendingIcon = () => (
+  <svg
+    // @ts-expect-error
+    slot="prefix"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.33333 4.7619L4.25984 5.68841L6.60714 3.33929V11.3095H7.61905V3.33929L9.96627 5.68841L10.8929 4.7619L6.96429 0.833333L3.33333 4.7619Z"
+      fill="currentColor"
+    />
+    <path
+      opacity="0.3"
+      d="M17.0833 15.2381L16.1568 14.3116L13.8095 16.6607V8.69048H12.7976V16.6607L10.4504 14.3116L9.52381 15.2381L13.4524 19.1667L17.0833 15.2381Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const DescendingIcon = () => (
+  <svg
+    // @ts-expect-error
+    slot="prefix"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      opacity="0.3"
+      d="M3.33333 4.7619L4.25984 5.68841L6.60714 3.33929V11.3095H7.61905V3.33929L9.96627 5.68841L10.8929 4.7619L6.96429 0.833333L3.33333 4.7619Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.0833 15.2381L16.1568 14.3116L13.8095 16.6607V8.69048H12.7976V16.6607L10.4504 14.3116L9.52381 15.2381L13.4524 19.1667L17.0833 15.2381Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const sortDirections = [{
+  label: 'Ascending',
+  value: 'ascending',
+  icon: AscendingIcon,
+}, {
+  label: 'Descending',
+  value: 'descending',
+  icon: DescendingIcon,
+}];
+
+export const views = [{
+  value: GridView.Small,
+  label: 'Small labeled',
+}, {
+  value: GridView.Medium,
+  label: 'Medium labeled',
+}, {
+  value: GridView.Large,
+  label: 'Large labeled',
+}];

package/src/components/ControlBar/ControlBar.styled.ts

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--cx-spacing-small);
+  width: 100%;
+
+  --menu-item-width: 278px;
+  --details-width: 354px;
+
+  cx-input {
+    min-width: 160px;
+    max-width: 300px;
+    flex: 1;
+  }
+
+  cx-menu-item.selected::part(label),
+  cx-menu-item.selected::part(prefix),
+  cx-menu-item.selected::part(suffix) {
+    color: var(--cx-color-primary);
+    font-weight: var(--cx-font-weight-medium);
+  }
+
+  cx-menu-item::part(base) {
+    width: var(--menu-item-width);
+    max-width: 100%;
+    padding: var(--cx-spacing-2x-small) var(--cx-spacing-small);
+  }
+
+  cx-menu-item::part(checked-icon) {
+    display: none;
+  }
+
+  .filter-details {
+    width: var(--details-width);
+    max-width: 100%;
+
+    cx-space {
+      flex-wrap: wrap;
+    }
+
+    cx-tree {
+      width: 100%;
+    }
+
+    cx-tree-item {
+      &::part(item) {
+        padding: var(--cx-spacing-2x-small) 0;
+      }
+
+      &::part(item--selected) {
+        background-color: transparent;
+        color: var(--cx-color-neutral-700);
+      }
+    }
+  }
+
+  .filter-details--empty {
+    &::part(content) {
+      padding: 0;
+    }
+  }
+
+  .filter-details .clear-all-button {
+    margin-top: var(--cx-spacing-small);
+  }
+
+  .menu-item--switch {
+    &::part(label) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    &::part(submenu-icon) {
+      display: none;
+    }
+  }
+`;