Skip to content
This repository has been archived by the owner on Apr 25, 2024. It is now read-only.

Commit

Permalink
Version 2 - only two cases: emptyDirectory or pathNotFound
Browse files Browse the repository at this point in the history 
Signed-off-by: julia-zielke <[email protected]>
  • Loading branch information
@julia-zielke
julia-zielke committed Jan 9, 2024
1 parent 82d7ab9 commit ad7a53d
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 169 deletions.
3 changes: 0 additions & 3 deletions public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1241,9 +1241,6 @@
"filepicker": {
"buttonText": "Browse Files",
"placeholder": "No File selected",
"emptyNamespace": {
"title": "The namespace \"{{namespace}}\" is empty."
},
"emptyDirectory": {
"title": "The directory \"{{path}}\" is empty."
},
Expand Down
259 changes: 111 additions & 148 deletions src/componentsNext/FilePicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,171 +41,134 @@ const FilePicker = ({
path,
namespace,
});
//const isError = true;

const { t } = useTranslation();

const { parent, isRoot, segments } = analyzePath(path);

const results = data?.children?.results ?? [];

const noResults = data?.children?.results.length ? false : true;

const scrollableLength =
data?.children == undefined || data.children.results.length < 8
? false
: true;

namespace = namespace || data?.namespace;

const emptyNamespace = isRoot && noResults;
const emptyDirectory = !isRoot && !isError && noResults;

console.log("data " + data);
console.log("isRoot " + isRoot);
const emptyDirectory = !isError && noResults;
const pathNotFound = isError;
const folderUpButton = !isRoot && data && !isError;

return (
<ButtonBar>
{emptyNamespace ? (
<Filepicker
buttonText={t("components.filepicker.buttonText")}
onClick={() => {
setPath(convertFileToPath(inputValue));
}}
className="w-44"
>
<FilepickerHeading>
<div className="py-3">
{t("components.filepicker.emptyNamespace.title", { namespace })}
<Filepicker
buttonText={t("components.filepicker.buttonText")}
onClick={() => {
setPath(convertFileToPath(inputValue));
}}
className="w-44"
>
<FilepickerHeading>
<BreadcrumbRoot className="py-3">
<Breadcrumb
noArrow
onClick={() => {
setPath("/");
}}
className="h-5 hover:underline"
>
<Home />
</Breadcrumb>
{segments.map((file) => {
const isEmpty = file.absolute === "";

if (isEmpty) return null;
return (
<Breadcrumb
key={file.relative}
onClick={() => {
setPath(file.absolute);
}}
className="h-5 hover:underline"
>
{file.relative}
</Breadcrumb>
);
})}
</BreadcrumbRoot>
</FilepickerHeading>
<FilepickerSeparator />
{folderUpButton && (
<>
<div
onClick={() => {
parent ? setPath(parent.absolute) : null;
}}
className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
>
<FilepickerListItem icon={FolderUp}>..</FilepickerListItem>
</div>
</FilepickerHeading>
</Filepicker>
) : (
<Filepicker
buttonText={t("components.filepicker.buttonText")}
onClick={() => {
setPath(convertFileToPath(inputValue));
}}
className="w-44"
>
<FilepickerHeading>
<BreadcrumbRoot className="py-3">
<Breadcrumb
noArrow
onClick={() => {
setPath("/");
}}
className="h-5 hover:underline"
>
<Home />
</Breadcrumb>
{segments.map((file) => {
const isEmpty = file.absolute === "";

if (isEmpty) return null;
return (
<Breadcrumb
key={file.relative}
<FilepickerSeparator />
</>
)}
{emptyDirectory && (
<FilepickerMessage>
{t("components.filepicker.emptyDirectory.title", { path })}
</FilepickerMessage>
)}
{pathNotFound && (
<>
<div
onClick={() => {
setPath("/");
}}
className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
>
<FilepickerListItem icon={ArrowLeftToLineIcon}>
{t("components.filepicker.error.linkText")}
</FilepickerListItem>
</div>
<FilepickerSeparator />
<FilepickerMessage>
{t("components.filepicker.error.title", { path })}
</FilepickerMessage>
</>
)}
<FilepickerList>
{results.map((file) => {
const isSelectable = selectable?.(file) ?? true;
return (
<Fragment key={file.name}>
{file.type === "directory" ? (
<div
onClick={() => {
setPath(file.absolute);
setPath(file.path);
}}
className="h-5 hover:underline"
className="h-auto w-full cursor-pointer text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
>
{file.relative}
</Breadcrumb>
);
})}
</BreadcrumbRoot>
</FilepickerHeading>

<FilepickerSeparator />
<div>
{!isRoot && data && (
<>
<div
onClick={() => {
parent ? setPath(parent.absolute) : null;
}}
className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
>
<FilepickerListItem icon={FolderUp}>..</FilepickerListItem>
</div>
<FilepickerSeparator />
</>
)}
{isError ? (
<>
<div
onClick={() => {
setPath("/");
}}
className="h-auto w-full cursor-pointer p-0 font-normal text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
>
<FilepickerListItem icon={ArrowLeftToLineIcon}>
{t("components.filepicker.error.linkText")}
</FilepickerListItem>
</div>
<FilepickerMessage>
{t("components.filepicker.error.title", { path })}
</FilepickerMessage>
</>
) : (
<div>
{emptyDirectory ? (
<FilepickerMessage>
{t("components.filepicker.emptyDirectory.title", { path })}
</FilepickerMessage>
<FilepickerListItem icon={fileTypeToIcon(file.type)}>
{file.name}
</FilepickerListItem>
</div>
) : (
<FilepickerList scrollableLength={scrollableLength}>
{results.map((file) => {
const isSelectable = selectable?.(file) ?? true;
return (
<Fragment key={file.name}>
{file.type === "directory" ? (
<div
onClick={() => {
setPath(file.path);
}}
className="h-auto w-full cursor-pointer text-gray-11 hover:underline focus:bg-transparent focus:ring-0 focus:ring-transparent focus:ring-offset-0 dark:text-gray-dark-11 dark:focus:bg-transparent"
>
<FilepickerListItem
icon={fileTypeToIcon(file.type)}
>
{file.name}
</FilepickerListItem>
</div>
) : (
<FilepickerClose
className={twMergeClsx(
"h-auto w-full text-gray-11 hover:underline dark:text-gray-dark-11",
!isSelectable && "cursor-not-allowed opacity-70"
)}
disabled={!isSelectable}
onClick={() => {
setPath(file.parent);
setInputValue(file.path);
onChange?.(file.path);
}}
>
<FilepickerListItem
icon={fileTypeToIcon(file.type)}
>
{file.name}
</FilepickerListItem>
</FilepickerClose>
)}

<FilepickerSeparator />
</Fragment>
);
})}
</FilepickerList>
<FilepickerClose
className={twMergeClsx(
"h-auto w-full text-gray-11 hover:underline dark:text-gray-dark-11",
!isSelectable && "cursor-not-allowed opacity-70"
)}
disabled={!isSelectable}
onClick={() => {
setPath(file.parent);
setInputValue(file.path);
onChange?.(file.path);
}}
>
<FilepickerListItem icon={fileTypeToIcon(file.type)}>
{file.name}
</FilepickerListItem>
</FilepickerClose>
)}
</div>
)}
</div>
</Filepicker>
)}

<FilepickerSeparator />
</Fragment>
);
})}
</FilepickerList>
</Filepicker>
<Input
placeholder={t("components.filepicker.placeholder")}
value={inputValue}
Expand Down
20 changes: 2 additions & 18 deletions src/design/Filepicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,28 +44,12 @@ const FilepickerMessage: FC<PropsWithChildren> = ({ children }) => (
</div>
);

const Content: FC<PropsWithChildren> = ({ children }) => (
<div className="max-h-96 min-h-fit w-full overflow-x-hidden">{children}</div>
);

const ScrollableContent: FC<PropsWithChildren> = ({ children }) => (
<div className="max-h-96 min-h-fit w-full overflow-x-hidden overflow-y-scroll">
const FilepickerList: FC<PropsWithChildren> = ({ children }) => (
<div className={twMergeClsx("max-h-96 min-h-fit w-full overflow-x-hidden")}>
{children}
</div>
);

export type FilepickerListProps = PropsWithChildren & {
scrollableLength: boolean;
};

const FilepickerList: FC<FilepickerListProps> = ({
children,
scrollableLength,
}) => {
const Comp = scrollableLength ? ScrollableContent : Content;
return <Comp>{children}</Comp>;
};

// asChild only works with exactly one child, so when asChild is true, we can not have a loading property
type AsChildOrLoading =
| {
Expand Down

0 comments on commit ad7a53d

Please sign in to comment.