yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-10-31 09:56:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix review comments

Browse Source
This commit is contained in:
mfrachet 2021-09-15 09:57:23 +02:00
parent 48fe09616b
commit 5f022f865e
13 changed files with 109 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/helper-plugin/lib/src/index.js
View File

@ -145,7 +145,7 @@ export { default as hasPermissions } from './old/utils/hasPermissions';
export { findMatchingPermissions } from './old/utils/hasPermissions';
export { default as translatedErrors } from './old/utils/translatedErrors';
export { darken } from './old/utils/colors';
export { default as getFileExtension } from './old/utils/getFileExtension';
export { default as getFileExtension } from './utils/getFileExtension/getFileExtension';
export { default as getFilterType } from './old/utils/getFilterType';
export { default as getQueryParameters } from './old/utils/getQueryParameters';
export { default as validateInput } from './old/utils/inputsValidations';
@ -158,7 +158,7 @@ export { default as getYupInnerErrors } from './old/utils/getYupInnerErrors';
export { default as generateFiltersFromSearch } from './old/utils/generateFiltersFromSearch';
export { default as generateSearchFromFilters } from './old/utils/generateSearchFromFilters';
export { default as generateSearchFromObject } from './old/utils/generateSearchFromObject';
export { default as prefixFileUrlWithBackendUrl } from './old/utils/prefixFileUrlWithBackendUrl';
export { default as prefixFileUrlWithBackendUrl } from './utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl';
export { default as prefixPluginTranslations } from './old/utils/prefixPluginTranslations';
export { default as pxToRem } from './utils/pxToRem';

0
packages/core/helper-plugin/lib/src/old/utils/getFileExtension.js → packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.js
View File

21
packages/core/helper-plugin/lib/src/utils/getFileExtension/getFileExtension.stories.mdx Normal file
View File

@ -0,0 +1,21 @@
<!--- getFileExtension.stories.mdx --->
import { Meta } from '@storybook/addon-docs';
<Meta title="utils/getFileExtension" />
# getFileExtension
This hook is used to create URL aware of the backend. Practical to resolve assets.
## Usage
```
import { getFileExtension } from '@strapi/helper-plugin';
const Compo = () => {
const ext = getFileExtension('.png')
return <div>{ext}</div>;
}
```

0
packages/core/helper-plugin/lib/src/old/utils/tests/getFileExtension.test.js → packages/core/helper-plugin/lib/src/utils/getFileExtension/tests/getFileExtension.test.js
View File

0
packages/core/helper-plugin/lib/src/old/utils/prefixFileUrlWithBackendUrl.js → packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.js
View File

21
packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/prefixFileUrlWithBackendUrl.stories.mdx Normal file
View File

@ -0,0 +1,21 @@
<!--- prefixFileUrlWithBackendUrl.stories.mdx --->
import { Meta } from '@storybook/addon-docs';
<Meta title="utils/prefixFileUrlWithBackendUrl" />
# prefixFileUrlWithBackendUrl
This hook is used to create URL aware of the backend. Practical to resolve assets.
## Usage
```
import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
const Compo = () => {
const url = prefixFileUrlWithBackendUrl('/somewhere-i-belong')
return <div>{url}</div>;
}
```

0
packages/core/helper-plugin/lib/src/old/utils/tests/prefixFileUrlWithBackendUrl.test.js → packages/core/helper-plugin/lib/src/utils/prefixFileUrlWithBackendUrl/tests/prefixFileUrlWithBackendUrl.test.js
View File

2
packages/core/upload/admin/src/pages/App/components/DocAssetCard.js
View File

@ -52,7 +52,7 @@ export const DocAssetCard = ({ name, extension }) => {
<CardContent>
<CardTitle as="h2">{name}</CardTitle>
<CardSubtitle>
<Extension>{extension.replace('.', '')}</Extension>
<Extension>{extension}</Extension>
</CardSubtitle>
</CardContent>
<CardBadge>

4
packages/core/upload/admin/src/pages/App/components/ImageAssetCard.js
View File

@ -35,13 +35,13 @@ export const ImageAssetCard = ({ name, extension, height, width, thumbnail }) =>
icon={<EditIcon />}
/>
</CardAction>
<CardAsset src={`http://localhost:1337${thumbnail}`} />
<CardAsset src={thumbnail} />
</CardHeader>
<CardBody>
<CardContent>
<CardTitle as="h2">{name}</CardTitle>
<CardSubtitle>
<Extension>{extension.replace('.', '')}</Extension> - {height}✕{width}
<Extension>{extension}</Extension> - {height}✕{width}
</CardSubtitle>
</CardContent>
<CardBadge>

16
packages/core/upload/admin/src/pages/App/components/ListView.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { GridLayout } from '@strapi/parts/Layout';
import { KeyboardNavigable } from '@strapi/parts/KeyboardNavigable';
import { prefixFileUrlWithBackendUrl, getFileExtension } from '@strapi/helper-plugin';
import { ImageAssetCard } from './ImageAssetCard';
import { VideoAssetCard } from './VideoAssetCard';
import { DocAssetCard } from './DocAssetCard';
@ -17,8 +18,8 @@ export const ListView = ({ assets }) => {
id={asset.id}
key={asset.id}
name={asset.name}
extension={asset.ext}
url={asset.url}
extension={getFileExtension(asset.ext)}
url={prefixFileUrlWithBackendUrl(asset.url)}
mime={asset.mime}
/>
);
@ -30,16 +31,21 @@ export const ListView = ({ assets }) => {
id={asset.id}
key={asset.id}
name={asset.name}
extension={asset.ext}
extension={getFileExtension(asset.ext)}
height={asset.height}
width={asset.width}
thumbnail={asset?.formats?.thumbnail?.url || asset.url}
thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)}
/>
);
}
return (
<DocAssetCard id={asset.id} key={asset.id} name={asset.name} extension={asset.ext} />
<DocAssetCard
id={asset.id}
key={asset.id}
name={asset.name}
extension={getFileExtension(asset.ext)}
/>
);
})}
</GridLayout>

2
packages/core/upload/admin/src/pages/App/components/VideoAssetCard.js
View File

@ -48,7 +48,7 @@ export const VideoAssetCard = ({ name, extension, url, mime }) => {
<CardContent>
<CardTitle as="h2">{name}</CardTitle>
<CardSubtitle>
<Extension>{extension.replace('.', '')}</Extension>
<Extension>{extension}</Extension>
</CardSubtitle>
</CardContent>
<CardBadge>

6
packages/core/upload/admin/src/pages/App/components/VideoPreview.js
View File

@ -31,11 +31,7 @@ export const VideoPreview = ({ url, mime, onLoadDuration }) => {
return (
<VideoPreviewWrapper>
{!loaded && (
<video
ref={videoRef}
onLoadedData={handleThumbnailVisibility}
src={`http://localhost:1337${url}`}
>
<video ref={videoRef} onLoadedData={handleThumbnailVisibility} src={url}>
<source type={mime} />
</video>
)}

99
packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js
View File

@ -10,7 +10,6 @@ jest.mock('../../../../utils', () => ({
}));
jest.mock('react-intl', () => ({
FormattedMessage: ({ id }) => id,
useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
}));
@ -146,6 +145,55 @@ describe('MediaLibrary / ListView', () => {
grid-gap: 16px;
}
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
cursor: pointer;
padding: 8px;
border-radius: 4px;
background: #ffffff;
border: 1px solid #dcdce4;
}
.c7 svg {
height: 12px;
width: 12px;
}
.c7 svg > g,
.c7 svg path {
fill: #ffffff;
}
.c7[aria-disabled='true'] {
pointer-events: none;
}
.c8 svg > g,
.c8 svg path {
fill: #8e8ea9;
}
.c8:hover svg > g,
.c8:hover svg path {
fill: #666687;
}
.c8:active svg > g,
.c8:active svg path {
fill: #a5a5ba;
}
.c8[aria-disabled='true'] {
background-color: #eaeaef;
}
.c8[aria-disabled='true'] svg path {
fill: #666687;
}
.c1 {
background: #ffffff;
border-radius: 4px;
@ -364,55 +412,6 @@ describe('MediaLibrary / ListView', () => {
right: 4px;
}
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
cursor: pointer;
padding: 8px;
border-radius: 4px;
background: #ffffff;
border: 1px solid #dcdce4;
}
.c7 svg {
height: 12px;
width: 12px;
}
.c7 svg > g,
.c7 svg path {
fill: #ffffff;
}
.c7[aria-disabled='true'] {
pointer-events: none;
}
.c8 svg > g,
.c8 svg path {
fill: #8e8ea9;
}
.c8:hover svg > g,
.c8:hover svg path {
fill: #666687;
}
.c8:active svg > g,
.c8:active svg path {
fill: #a5a5ba;
}
.c8[aria-disabled='true'] {
background-color: #eaeaef;
}
.c8[aria-disabled='true'] svg path {
fill: #666687;
}
.c15 {
text-transform: uppercase;
}