Merge pull request #406 from myl7/filename
This commit is contained in:
commit
8d57826e00
3 changed files with 18 additions and 12 deletions
|
@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next'
|
||||||
import useLocalStorage from '../utils/useLocalStorage'
|
import useLocalStorage from '../utils/useLocalStorage'
|
||||||
import { getPreviewType, preview } from '../utils/getPreviewType'
|
import { getPreviewType, preview } from '../utils/getPreviewType'
|
||||||
import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
|
import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
|
||||||
import { getFileIcon } from '../utils/getFileIcon'
|
import { getExtension, getFileIcon } from '../utils/getFileIcon'
|
||||||
import {
|
import {
|
||||||
DownloadingToast,
|
DownloadingToast,
|
||||||
downloadMultipleFiles,
|
downloadMultipleFiles,
|
||||||
|
@ -66,10 +66,20 @@ const renderEmoji = (name: string) => {
|
||||||
const emoji = emojiRegex().exec(name)
|
const emoji = emojiRegex().exec(name)
|
||||||
return { render: emoji && !emoji.index, emoji }
|
return { render: emoji && !emoji.index, emoji }
|
||||||
}
|
}
|
||||||
export const formatChildName = (name: string) => {
|
const formatChildName = (name: string) => {
|
||||||
const { render, emoji } = renderEmoji(name)
|
const { render, emoji } = renderEmoji(name)
|
||||||
return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name
|
return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name
|
||||||
}
|
}
|
||||||
|
export const ChildName: FC<{ name: string }> = ({ name }) => {
|
||||||
|
const original = formatChildName(name)
|
||||||
|
const extension = getExtension(original)
|
||||||
|
const prename = original.substring(0, original.length - extension.length)
|
||||||
|
return (
|
||||||
|
<span className="truncate before:float-right before:content-[attr(data-tail)]" data-tail={extension}>
|
||||||
|
{prename}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
export const ChildIcon: FC<{ child: OdFolderChildren }> = ({ child }) => {
|
export const ChildIcon: FC<{ child: OdFolderChildren }> = ({ child }) => {
|
||||||
const { render, emoji } = renderEmoji(child.name)
|
const { render, emoji } = renderEmoji(child.name)
|
||||||
return render ? (
|
return render ? (
|
||||||
|
@ -364,11 +374,7 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
|
||||||
|
|
||||||
if ('file' in responses[0] && responses.length === 1) {
|
if ('file' in responses[0] && responses.length === 1) {
|
||||||
const file = responses[0].file as OdFileObject
|
const file = responses[0].file as OdFileObject
|
||||||
const downloadUrl = file['@microsoft.graph.downloadUrl']
|
const previewType = getPreviewType(getExtension(file.name), { video: Boolean(file.video) })
|
||||||
const fileName = file.name
|
|
||||||
const fileExtension = fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase()
|
|
||||||
|
|
||||||
const previewType = getPreviewType(fileExtension, { video: Boolean(file.video) })
|
|
||||||
|
|
||||||
if (previewType) {
|
if (previewType) {
|
||||||
switch (previewType) {
|
switch (previewType) {
|
||||||
|
|
|
@ -9,7 +9,7 @@ import { useTranslation } from 'next-i18next'
|
||||||
import { getBaseUrl } from '../utils/getBaseUrl'
|
import { getBaseUrl } from '../utils/getBaseUrl'
|
||||||
import { formatModifiedDateTime } from '../utils/fileDetails'
|
import { formatModifiedDateTime } from '../utils/fileDetails'
|
||||||
import { getReadablePath } from '../utils/getReadablePath'
|
import { getReadablePath } from '../utils/getReadablePath'
|
||||||
import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing'
|
import { Checkbox, ChildIcon, ChildName, Downloading } from './FileListing'
|
||||||
|
|
||||||
const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
|
const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
|
||||||
// We use the generated medium thumbnail for rendering preview images (excluding folders)
|
// We use the generated medium thumbnail for rendering preview images (excluding folders)
|
||||||
|
@ -43,7 +43,7 @@ const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
|
||||||
<span className="w-5 flex-shrink-0 text-center">
|
<span className="w-5 flex-shrink-0 text-center">
|
||||||
<ChildIcon child={c} />
|
<ChildIcon child={c} />
|
||||||
</span>
|
</span>
|
||||||
<span className="overflow-hidden truncate">{formatChildName(c.name)}</span>
|
<ChildName name={c.name} />
|
||||||
</div>
|
</div>
|
||||||
<div className="truncate text-center font-mono text-xs text-gray-700 dark:text-gray-500">
|
<div className="truncate text-center font-mono text-xs text-gray-700 dark:text-gray-500">
|
||||||
{formatModifiedDateTime(c.lastModifiedDateTime)}
|
{formatModifiedDateTime(c.lastModifiedDateTime)}
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { getBaseUrl } from '../utils/getBaseUrl'
|
||||||
import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
|
import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
|
||||||
import { getReadablePath } from '../utils/getReadablePath'
|
import { getReadablePath } from '../utils/getReadablePath'
|
||||||
|
|
||||||
import { Downloading, Checkbox, formatChildName, ChildIcon } from './FileListing'
|
import { Downloading, Checkbox, ChildIcon, ChildName } from './FileListing'
|
||||||
|
|
||||||
const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c }) => {
|
const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c }) => {
|
||||||
return (
|
return (
|
||||||
|
@ -19,7 +19,7 @@ const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c })
|
||||||
<div className="w-5 flex-shrink-0 text-center">
|
<div className="w-5 flex-shrink-0 text-center">
|
||||||
<ChildIcon child={c} />
|
<ChildIcon child={c} />
|
||||||
</div>
|
</div>
|
||||||
<div className="truncate">{formatChildName(c.name)}</div>
|
<ChildName name={c.name} />
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-3 hidden flex-shrink-0 font-mono text-sm text-gray-700 dark:text-gray-500 md:block">
|
<div className="col-span-3 hidden flex-shrink-0 font-mono text-sm text-gray-700 dark:text-gray-500 md:block">
|
||||||
{formatModifiedDateTime(c.lastModifiedDateTime)}
|
{formatModifiedDateTime(c.lastModifiedDateTime)}
|
||||||
|
@ -93,7 +93,7 @@ const FolderListLayout = ({
|
||||||
key={c.id}
|
key={c.id}
|
||||||
>
|
>
|
||||||
<Link href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`} passHref>
|
<Link href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`} passHref>
|
||||||
<a className="col-span-10">
|
<a className="col-span-12 md:col-span-10">
|
||||||
<FileListItem fileContent={c} />
|
<FileListItem fileContent={c} />
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
Loading…
Reference in a new issue