mirror of https://github.com/usememos/memos
chore: update resource icons
Steven
2 years ago
parent
9a0ada6756
commit
04595a5fb1
@ -1,49 +0,0 @@
|
||||
import React from "react";
|
||||
import { getResourceType, getResourceUrl } from "@/utils/resource";
|
||||
import Icon from "./Icon";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
import SquareDiv from "./kit/SquareDiv";
|
||||
import "@/less/resource-cover.less";
|
||||
|
||||
interface ResourceCoverProps {
|
||||
resource: Resource;
|
||||
}
|
||||
|
||||
const ResourceCover = ({ resource }: ResourceCoverProps) => {
|
||||
const resourceType = getResourceType(resource);
|
||||
const resourceUrl = getResourceUrl(resource);
|
||||
switch (resourceType) {
|
||||
case "image/*":
|
||||
return (
|
||||
<SquareDiv className="h-20 w-20 flex items-center justify-center overflow-clip">
|
||||
<img
|
||||
className="max-w-full max-h-full object-cover shadow"
|
||||
src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
|
||||
onClick={() => showPreviewImageDialog(resourceUrl)}
|
||||
/>
|
||||
</SquareDiv>
|
||||
);
|
||||
case "video/*":
|
||||
return <Icon.FileVideo2 className="resource-cover" />;
|
||||
case "audio/*":
|
||||
return <Icon.FileAudio className="resource-cover" />;
|
||||
case "text/*":
|
||||
return <Icon.FileText className="resource-cover" />;
|
||||
case "application/epub+zip":
|
||||
return <Icon.Book className="resource-cover" />;
|
||||
case "application/pdf":
|
||||
return <Icon.Book className="resource-cover" />;
|
||||
case "application/msword":
|
||||
return <Icon.FileEdit className="resource-cover" />;
|
||||
case "application/msexcel":
|
||||
return <Icon.SheetIcon className="resource-cover" />;
|
||||
case "application/zip":
|
||||
return <Icon.FileArchiveIcon className="resource-cover" />;
|
||||
case "application/x-java-archive":
|
||||
return <Icon.BinaryIcon className="resource-cover" />;
|
||||
default:
|
||||
return <Icon.File className="resource-cover" />;
|
||||
}
|
||||
};
|
||||
|
||||
export default React.memo(ResourceCover);
|
||||
@ -1,34 +1,55 @@
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
import { getResourceType, getResourceUrl } from "@/utils/resource";
|
||||
import Icon from "./Icon";
|
||||
import showPreviewImageDialog from "./PreviewImageDialog";
|
||||
import SquareDiv from "./kit/SquareDiv";
|
||||
|
||||
interface Props {
|
||||
className: string;
|
||||
resource: Resource;
|
||||
className?: string;
|
||||
strokeWidth?: number;
|
||||
}
|
||||
|
||||
const ResourceIcon = (props: Props) => {
|
||||
const { className, resource } = props;
|
||||
const { resource } = props;
|
||||
const resourceType = getResourceType(resource);
|
||||
const resourceUrl = getResourceUrl(resource);
|
||||
const className = classNames("w-full h-auto", props.className);
|
||||
const strokeWidth = props.strokeWidth;
|
||||
|
||||
if (getResourceType(resource).startsWith("image")) {
|
||||
const url = getResourceUrl(resource);
|
||||
return (
|
||||
<SquareDiv key={resource.id} className={classNames("cursor-pointer rounded hover:shadow", className)}>
|
||||
<img
|
||||
className="min-h-full min-w-full w-auto h-auto rounded"
|
||||
src={resource.externalLink ? url : url + "?thumbnail=1"}
|
||||
onClick={() => showPreviewImageDialog([url], 0)}
|
||||
decoding="async"
|
||||
loading="lazy"
|
||||
/>
|
||||
</SquareDiv>
|
||||
);
|
||||
switch (resourceType) {
|
||||
case "image/*":
|
||||
return (
|
||||
<SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
|
||||
<img
|
||||
className="max-w-full max-h-full object-cover shadow"
|
||||
src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
|
||||
onClick={() => showPreviewImageDialog(resourceUrl)}
|
||||
/>
|
||||
</SquareDiv>
|
||||
);
|
||||
case "video/*":
|
||||
return <Icon.FileVideo2 strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "audio/*":
|
||||
return <Icon.FileAudio strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "text/*":
|
||||
return <Icon.FileText strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "application/epub+zip":
|
||||
return <Icon.Book strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "application/pdf":
|
||||
return <Icon.Book strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "application/msword":
|
||||
return <Icon.FileEdit strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "application/msexcel":
|
||||
return <Icon.SheetIcon strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "application/zip":
|
||||
return <Icon.FileArchiveIcon strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
case "application/x-java-archive":
|
||||
return <Icon.BinaryIcon strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
default:
|
||||
return <Icon.File strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
|
||||
}
|
||||
|
||||
const ResourceIcon = Icon.FileText;
|
||||
return <ResourceIcon className={className} />;
|
||||
};
|
||||
|
||||
export default ResourceIcon;
|
||||
export default React.memo(ResourceIcon);
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import { Checkbox } from "@mui/joy";
|
||||
import { useState } from "react";
|
||||
import ResourceItemDropdown from "./ResourceItemDropdown";
|
||||
|
||||
const ResourceItem = ({ resource, handleCheckClick, handleUncheckClick }: ResourceItemType) => {
|
||||
const [isSelected, setIsSelected] = useState<boolean>(false);
|
||||
|
||||
const handleSelectBtnClick = () => {
|
||||
if (isSelected) {
|
||||
handleUncheckClick();
|
||||
} else {
|
||||
handleCheckClick();
|
||||
}
|
||||
setIsSelected(!isSelected);
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={resource.id} className="px-2 py-2 w-full grid grid-cols-10">
|
||||
<span className="col-span-1 w-full flex justify-center m-auto truncate ">
|
||||
<Checkbox checked={isSelected} onChange={handleSelectBtnClick} />
|
||||
</span>
|
||||
<span className="col-span-2 w-full m-auto truncate text-base pr-2">{resource.id}</span>
|
||||
<span className="col-span-6 w-full m-auto truncate text-base pr-2">{resource.filename}</span>
|
||||
<div className="col-span-1 w-full flex flex-row justify-end items-center pr-2">
|
||||
<ResourceItemDropdown resource={resource} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResourceItem;
|
||||
@ -1,23 +0,0 @@
|
||||
import React, { DependencyList, EffectCallback, useEffect, useRef } from "react";
|
||||
|
||||
const useIsoMorphicEffect = (effect: EffectCallback, deps?: DependencyList | undefined) => {
|
||||
useEffect(effect, deps);
|
||||
};
|
||||
|
||||
function useLatestValue<T>(value: T) {
|
||||
const cache = useRef(value);
|
||||
|
||||
useIsoMorphicEffect(() => {
|
||||
cache.current = value;
|
||||
}, [value]);
|
||||
|
||||
return cache;
|
||||
}
|
||||
|
||||
// TODO: Add React.useEvent ?? once the useEvent hook is available
|
||||
function useEvent<F extends (...args: any[]) => any, P extends any[] = Parameters<F>, R = ReturnType<F>>(cb: (...args: P) => R) {
|
||||
const cache = useLatestValue(cb);
|
||||
return React.useCallback((...args: P) => cache.current(...args), [cache]);
|
||||
}
|
||||
|
||||
export default useEvent;
|
||||
@ -1,3 +0,0 @@
|
||||
.resource-cover {
|
||||
@apply w-20 h-auto ml-auto mr-auto opacity-40;
|
||||
}
|
||||
Loading…
Reference in New Issue