Skip to content

Commit

Permalink
feat: visualize Collapse component (#82)
Browse files Browse the repository at this point in the history
* feat: visualize Collapse component

* chore: use withCollapse
  • Loading branch information
alvrba authored May 16, 2022
1 parent 85effa7 commit 5b0efa8
Showing 1 changed file with 41 additions and 6 deletions.
47 changes: 41 additions & 6 deletions src/components/common/Item.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
LinkItem,
AppItem,
TextEditor,
withCollapse,
} from '@graasp/ui';
import Alert from '@material-ui/lab/Alert';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -72,8 +73,10 @@ const Item = ({ id, isChildren, showPinnedOnly }) => {
return <Alert severity="error">{t('An unexpected error occured.')}</Alert>;
}

const showCollapse = item.get('settings')?.isExpandable;

switch (item.get('type')) {
case ITEM_TYPES.FOLDER:
case ITEM_TYPES.FOLDER: {
// do not display children folders if they are not pinned
if (!item.get('settings')?.isPinned && isChildren) {
return null;
Expand Down Expand Up @@ -105,28 +108,53 @@ const Item = ({ id, isChildren, showPinnedOnly }) => {
))}
</Container>
);
case ITEM_TYPES.LINK:
return <LinkItem item={item} height={SCREEN_MAX_HEIGHT} />;
}
case ITEM_TYPES.LINK: {
const linkItem = <LinkItem item={item} height={SCREEN_MAX_HEIGHT} />;

if (showCollapse) {
return withCollapse({
item,
})(linkItem);
}
return linkItem;
}
case ITEM_TYPES.FILE:
case ITEM_TYPES.S3_FILE: {
return (
const fileItem = (
<FileItem
id={buildFileId(id)}
item={item}
content={content}
maxHeight={SCREEN_MAX_HEIGHT}
/>
);

if (showCollapse) {
return withCollapse({
item,
})(fileItem);
}
return fileItem;
}
case ITEM_TYPES.DOCUMENT: {
return <DocumentItem id={buildDocumentId(id)} item={item} readOnly />;
const documentItem = (
<DocumentItem id={buildDocumentId(id)} item={item} readOnly />
);

if (showCollapse) {
return withCollapse({
item,
})(documentItem);
}
return documentItem;
}
case ITEM_TYPES.APP: {
if (isMemberLoading) {
return <Loader />;
}

return (
const appItem = (
<AppItem
id={buildAppId(id)}
item={item}
Expand All @@ -136,6 +164,13 @@ const Item = ({ id, isChildren, showPinnedOnly }) => {
requestApiAccessToken={Api.requestApiAccessToken}
/>
);

if (showCollapse) {
return withCollapse({
item,
})(appItem);
}
return appItem;
}
default:
console.error(`The type ${item?.get('type')} is not defined`);
Expand Down

0 comments on commit 5b0efa8

Please sign in to comment.