mirror of
https://github.com/strapi/strapi.git
synced 2025-10-27 08:02:56 +00:00
Merge branch 'v4/ds-migration' of github.com:strapi/strapi into cm/components
This commit is contained in:
soupette
commit
77a335c65b
@ -2,29 +2,39 @@
|
||||
"name": "kitchensink",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"description": "A Strapi application",
|
||||
"description": "A Strapi application.",
|
||||
"scripts": {
|
||||
"develop": "strapi develop",
|
||||
"develop:ce": "STRAPI_DISABLE_EE=true strapi develop",
|
||||
"start": "strapi start",
|
||||
"build": "strapi build",
|
||||
"build:ce": "STRAPI_DISABLE_EE=true strapi build",
|
||||
"strapi": "strapi"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"dependencies": {
|
||||
"@strapi/strapi": "3.6.8",
|
||||
"@strapi/plugin-users-permissions": "3.6.8",
|
||||
"@strapi/admin": "3.6.8",
|
||||
"@strapi/plugin-documentation": "3.6.8",
|
||||
"@strapi/plugin-graphql": "3.6.8",
|
||||
"@strapi/plugin-i18n": "3.6.8",
|
||||
"sqlite3": "5.0.2"
|
||||
},
|
||||
"author": {
|
||||
"name": "A Strapi developer"
|
||||
"@strapi/plugin-users-permissions": "3.6.8",
|
||||
"@strapi/provider-email-mailgun": "3.6.8",
|
||||
"@strapi/provider-upload-aws-s3": "3.6.8",
|
||||
"@strapi/provider-upload-cloudinary": "3.6.8",
|
||||
"@strapi/strapi": "3.6.8",
|
||||
"@strapi/utils": "3.6.8",
|
||||
"lodash": "4.17.21",
|
||||
"mysql": "2.18.1",
|
||||
"passport-google-oauth2": "0.2.0",
|
||||
"pg": "8.6.0",
|
||||
"sqlite3": "5.0.2",
|
||||
"strapi-middleware-views": "3.6.8"
|
||||
},
|
||||
"strapi": {
|
||||
"uuid": "379fa84f-f1a0-4101-a6e7-40ee09ed3927"
|
||||
"uuid": "getstarted"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.x.x <=14.x.x",
|
||||
"npm": "^6.0.0"
|
||||
"node": ">=12.x.x <=16.x.x",
|
||||
"npm": ">=6.0.0"
|
||||
},
|
||||
"license": "MIT"
|
||||
"license": "SEE LICENSE IN LICENSE"
|
||||
}
|
||||
|
||||
@ -69,7 +69,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
|
||||
icon={<SortIcon isUp={visible} />}
|
||||
/>
|
||||
{visible && (
|
||||
<Popover source={buttonRef} spacingTop={4} centered>
|
||||
<Popover source={buttonRef} spacing={16} centered>
|
||||
<PopoverContent
|
||||
queryInfos={queryInfos}
|
||||
name={name}
|
||||
|
||||
@ -307,6 +307,23 @@ describe('Content manager | App | main', () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c6 svg > g,
|
||||
.c6 svg path {
|
||||
fill: #8e8ea9;
|
||||
@ -421,8 +438,6 @@ describe('Content manager | App | main', () => {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 1.25rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
|
||||
@ -555,6 +555,20 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
|
||||
}
|
||||
|
||||
.c36 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -744,6 +758,23 @@ describe('ADMIN | Pages | USERS | ListPage', () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c20 svg > g,
|
||||
.c20 svg path {
|
||||
fill: #8e8ea9;
|
||||
|
||||
@ -40,8 +40,8 @@
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@strapi/babel-plugin-switch-ee-ce": "1.0.0",
|
||||
"@strapi/helper-plugin": "3.6.8",
|
||||
"@strapi/icons": "0.0.1-alpha.36",
|
||||
"@strapi/parts": "0.0.1-alpha.36",
|
||||
"@strapi/icons": "0.0.1-alpha.37",
|
||||
"@strapi/parts": "0.0.1-alpha.37",
|
||||
"@strapi/utils": "3.6.8",
|
||||
"axios": "^0.21.1",
|
||||
"babel-loader": "8.2.2",
|
||||
@ -104,7 +104,7 @@
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-intl": "5.20.2",
|
||||
"react-loadable": "^5.5.0",
|
||||
"react-query": "3.19.0",
|
||||
"react-query": "3.24.3",
|
||||
"react-redux": "7.2.3",
|
||||
"react-router": "5.2.0",
|
||||
"react-router-dom": "5.2.0",
|
||||
|
||||
@ -192,6 +192,23 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c6 svg > g,
|
||||
.c6 svg path {
|
||||
fill: #8e8ea9;
|
||||
@ -372,8 +389,6 @@ exports[`<ContentTypeBuilderNav /> renders and matches the snapshot 1`] = `
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
height: 1.25rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.c43 {
|
||||
|
||||
@ -550,6 +550,20 @@ exports[`<ListView /> renders and matches the snapshot 1`] = `
|
||||
}
|
||||
|
||||
.c36 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@ -57,8 +57,8 @@
|
||||
"@storybook/builder-webpack5": "^6.3.7",
|
||||
"@storybook/manager-webpack5": "^6.3.7",
|
||||
"@storybook/react": "^6.3.7",
|
||||
"@strapi/icons": "0.0.1-alpha.36",
|
||||
"@strapi/parts": "0.0.1-alpha.36",
|
||||
"@strapi/icons": "0.0.1-alpha.37",
|
||||
"@strapi/parts": "0.0.1-alpha.37",
|
||||
"babel-loader": "^8.2.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"enzyme": "^3.8.0",
|
||||
|
||||
@ -29,20 +29,22 @@ const IconWrapper = styled.span`
|
||||
}
|
||||
`;
|
||||
|
||||
export const DocAssetCard = ({ name, extension, selected, onSelect }) => {
|
||||
export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
|
||||
{onEdit && (
|
||||
<CardAction position="end">
|
||||
<IconButton
|
||||
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
|
||||
icon={<EditIcon />}
|
||||
/>
|
||||
</CardAction>
|
||||
<CardAsset>
|
||||
)}
|
||||
<CardAsset size={size}>
|
||||
<IconWrapper>
|
||||
<IconDocumentation aria-label={name} />
|
||||
</IconWrapper>
|
||||
@ -65,12 +67,16 @@ export const DocAssetCard = ({ name, extension, selected, onSelect }) => {
|
||||
|
||||
DocAssetCard.defaultProps = {
|
||||
selected: false,
|
||||
onEdit: undefined,
|
||||
onSelect: undefined,
|
||||
size: 'M',
|
||||
};
|
||||
|
||||
DocAssetCard.propTypes = {
|
||||
extension: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
onEdit: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
selected: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
};
|
||||
|
||||
@ -30,6 +30,8 @@ export const ImageAssetCard = ({
|
||||
thumbnail,
|
||||
selected,
|
||||
onSelect,
|
||||
onEdit,
|
||||
size,
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
@ -37,13 +39,15 @@ export const ImageAssetCard = ({
|
||||
<Card>
|
||||
<CardHeader>
|
||||
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
|
||||
{onEdit && (
|
||||
<CardAction position="end">
|
||||
<IconButton
|
||||
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
|
||||
icon={<EditIcon />}
|
||||
/>
|
||||
</CardAction>
|
||||
<CardAsset src={thumbnail} />
|
||||
)}
|
||||
<CardAsset src={thumbnail} size={size} />
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<CardContent>
|
||||
@ -65,15 +69,19 @@ ImageAssetCard.defaultProps = {
|
||||
height: undefined,
|
||||
width: undefined,
|
||||
selected: false,
|
||||
onEdit: undefined,
|
||||
onSelect: undefined,
|
||||
size: 'M',
|
||||
};
|
||||
|
||||
ImageAssetCard.propTypes = {
|
||||
extension: PropTypes.string.isRequired,
|
||||
height: PropTypes.number,
|
||||
name: PropTypes.string.isRequired,
|
||||
onEdit: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
width: PropTypes.number,
|
||||
thumbnail: PropTypes.string.isRequired,
|
||||
selected: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
};
|
||||
|
||||
@ -28,20 +28,22 @@ const IconWrapper = styled.span`
|
||||
}
|
||||
`;
|
||||
|
||||
export const UnknownAssetCard = ({ name, extension, selected, onSelect }) => {
|
||||
export const UnknownAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
|
||||
{onEdit && (
|
||||
<CardAction position="end">
|
||||
<IconButton
|
||||
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
|
||||
icon={<EditIcon />}
|
||||
/>
|
||||
</CardAction>
|
||||
<CardAsset>
|
||||
)}
|
||||
<CardAsset size={size}>
|
||||
<IconWrapper>
|
||||
<EmptyStatePicture aria-label={name} />
|
||||
</IconWrapper>
|
||||
@ -61,12 +63,16 @@ export const UnknownAssetCard = ({ name, extension, selected, onSelect }) => {
|
||||
|
||||
UnknownAssetCard.defaultProps = {
|
||||
selected: false,
|
||||
onEdit: undefined,
|
||||
onSelect: undefined,
|
||||
size: 'M',
|
||||
};
|
||||
|
||||
UnknownAssetCard.propTypes = {
|
||||
extension: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
onEdit: PropTypes.func,
|
||||
onSelect: PropTypes.func,
|
||||
selected: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
};
|
||||
|
||||
@ -0,0 +1,145 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
Card,
|
||||
CardBody,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardSubtitle,
|
||||
CardBadge,
|
||||
} from '@strapi/parts/Card';
|
||||
import CloseAlertIcon from '@strapi/icons/CloseAlertIcon';
|
||||
import { Text } from '@strapi/parts/Text';
|
||||
import { Box } from '@strapi/parts/Box';
|
||||
import { Row } from '@strapi/parts/Row';
|
||||
import { Stack } from '@strapi/parts/Stack';
|
||||
import { ProgressBar } from '@strapi/parts/ProgressBar';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { getTrad } from '../../utils';
|
||||
import { AssetType } from '../../constants';
|
||||
import { useUpload } from '../../hooks/useUpload';
|
||||
|
||||
const Extension = styled.span`
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
const BoxWrapper = styled(Row)`
|
||||
height: 88px;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: ${({ theme, error }) => (error ? theme.colors.danger600 : undefined)};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const CancelButton = styled.button`
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: ${({ theme }) => theme.colors.neutral200};
|
||||
}
|
||||
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const UploadingAssetCard = ({ name, extension, assetType, file }) => {
|
||||
const { upload, cancel, error, progress } = useUpload();
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
let badgeContent;
|
||||
|
||||
if (assetType === AssetType.Image) {
|
||||
badgeContent = formatMessage({
|
||||
id: getTrad('settings.section.image.label'),
|
||||
defaultMessage: 'Image',
|
||||
});
|
||||
} else if (assetType === AssetType.Video) {
|
||||
badgeContent = formatMessage({
|
||||
id: getTrad('settings.section.video.label'),
|
||||
defaultMessage: 'Video',
|
||||
});
|
||||
} else {
|
||||
badgeContent = formatMessage({
|
||||
id: getTrad('settings.section.doc.label'),
|
||||
defaultMessage: 'Doc',
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
upload(file);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Stack size={1}>
|
||||
<Card borderColor={error ? 'danger600' : undefined}>
|
||||
<CardHeader>
|
||||
<BoxWrapper
|
||||
background={error ? 'danger100' : 'neutral700'}
|
||||
justifyContent="center"
|
||||
error={error}
|
||||
hasRadius
|
||||
>
|
||||
{error ? (
|
||||
<CloseAlertIcon aria-hidden />
|
||||
) : (
|
||||
<>
|
||||
<Box paddingBottom={2}>
|
||||
<ProgressBar value={progress} size="S">
|
||||
{progress}/100%
|
||||
</ProgressBar>
|
||||
</Box>
|
||||
|
||||
<CancelButton type="button" onClick={cancel}>
|
||||
<Text small as="span" textColor="neutral200">
|
||||
{formatMessage({
|
||||
id: 'app.components.Button.cancel',
|
||||
defaultMessage: 'Cancel',
|
||||
})}
|
||||
</Text>
|
||||
<Box as="span" paddingLeft={2} aria-hidden>
|
||||
<CloseAlertIcon />
|
||||
</Box>
|
||||
</CancelButton>
|
||||
</>
|
||||
)}
|
||||
</BoxWrapper>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<CardContent>
|
||||
<CardTitle as="h2">{name}</CardTitle>
|
||||
<CardSubtitle>
|
||||
<Extension>{extension}</Extension>
|
||||
</CardSubtitle>
|
||||
</CardContent>
|
||||
<CardBadge>{badgeContent}</CardBadge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{error ? (
|
||||
<Text small bold textColor="danger600">
|
||||
{error.message}
|
||||
</Text>
|
||||
) : (
|
||||
undefined
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
UploadingAssetCard.propTypes = {
|
||||
assetType: PropTypes.oneOf(Object.values(AssetType)).isRequired,
|
||||
extension: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
file: PropTypes.instanceOf(File).isRequired,
|
||||
};
|
||||
@ -24,7 +24,16 @@ const Extension = styled.span`
|
||||
text-transform: uppercase;
|
||||
`;
|
||||
|
||||
export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect }) => {
|
||||
export const VideoAssetCard = ({
|
||||
name,
|
||||
extension,
|
||||
url,
|
||||
mime,
|
||||
selected,
|
||||
onSelect,
|
||||
onEdit,
|
||||
size,
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const [duration, setDuration] = useState();
|
||||
const formattedDuration = duration ? formatDuration(duration) : undefined;
|
||||
@ -33,14 +42,16 @@ export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect
|
||||
<Card>
|
||||
<CardHeader>
|
||||
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
|
||||
{onEdit && (
|
||||
<CardAction position="end">
|
||||
<IconButton
|
||||
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
|
||||
icon={<EditIcon />}
|
||||
/>
|
||||
</CardAction>
|
||||
<CardAsset>
|
||||
<VideoPreview url={url} mime={mime} onLoadDuration={setDuration} />
|
||||
)}
|
||||
<CardAsset size={size}>
|
||||
<VideoPreview url={url} mime={mime} onLoadDuration={setDuration} size={size} />
|
||||
</CardAsset>
|
||||
<CardTimer>{formattedDuration || '...'}</CardTimer>
|
||||
</CardHeader>
|
||||
@ -52,7 +63,7 @@ export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect
|
||||
</CardSubtitle>
|
||||
</CardContent>
|
||||
<CardBadge>
|
||||
{formatMessage({ id: getTrad('settings.section.video.label'), defaultMessage: 'Doc' })}
|
||||
{formatMessage({ id: getTrad('settings.section.video.label'), defaultMessage: 'Video' })}
|
||||
</CardBadge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@ -61,7 +72,9 @@ export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect
|
||||
|
||||
VideoAssetCard.defaultProps = {
|
||||
onSelect: undefined,
|
||||
onEdit: undefined,
|
||||
selected: false,
|
||||
size: 'M',
|
||||
};
|
||||
|
||||
VideoAssetCard.propTypes = {
|
||||
@ -69,6 +82,8 @@ VideoAssetCard.propTypes = {
|
||||
mime: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
onSelect: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
url: PropTypes.string.isRequired,
|
||||
selected: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
};
|
||||
|
||||
@ -7,11 +7,11 @@ const VideoPreviewWrapper = styled.div`
|
||||
canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-height: ${({ size }) => (size === 'M' ? 164 / 16 : 88 / 16)}rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const VideoPreview = ({ url, mime, onLoadDuration }) => {
|
||||
export const VideoPreview = ({ url, mime, onLoadDuration, size }) => {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const videoRef = useRef(null);
|
||||
const canvasRef = useRef(null);
|
||||
@ -29,7 +29,7 @@ export const VideoPreview = ({ url, mime, onLoadDuration }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<VideoPreviewWrapper>
|
||||
<VideoPreviewWrapper size={size}>
|
||||
{!loaded && (
|
||||
<video ref={videoRef} onLoadedData={handleThumbnailVisibility} src={url}>
|
||||
<source type={mime} />
|
||||
@ -41,8 +41,13 @@ export const VideoPreview = ({ url, mime, onLoadDuration }) => {
|
||||
);
|
||||
};
|
||||
|
||||
VideoPreview.defaultProps = {
|
||||
size: 'M',
|
||||
};
|
||||
|
||||
VideoPreview.propTypes = {
|
||||
url: PropTypes.string.isRequired,
|
||||
mime: PropTypes.string.isRequired,
|
||||
onLoadDuration: PropTypes.func.isRequired,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
};
|
||||
|
||||
@ -0,0 +1,472 @@
|
||||
import React from 'react';
|
||||
import { ThemeProvider, lightTheme } from '@strapi/parts';
|
||||
import { render as renderTL } from '@testing-library/react';
|
||||
import { DocAssetCard } from '../DocAssetCard';
|
||||
import en from '../../../translations/en.json';
|
||||
|
||||
jest.mock('../../../utils', () => ({
|
||||
...jest.requireActual('../../../utils'),
|
||||
getTrad: x => x,
|
||||
}));
|
||||
|
||||
jest.mock('react-intl', () => ({
|
||||
useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id]) }),
|
||||
}));
|
||||
|
||||
describe('DocAssetCard', () => {
|
||||
it('snapshots the component', () => {
|
||||
const { container } = renderTL(
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<DocAssetCard
|
||||
name="hello.png"
|
||||
extension="png"
|
||||
selected={false}
|
||||
onSelect={jest.fn()}
|
||||
onEdit={jest.fn()}
|
||||
size="S"
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c24 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
||||
}
|
||||
|
||||
.c11 {
|
||||
padding-top: 8px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
background: #f6f6f9;
|
||||
color: #666687;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-align-items: flex-start;
|
||||
-webkit-box-align: flex-start;
|
||||
-ms-flex-align: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 5.5rem;
|
||||
width: 100%;
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.43;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
font-weight: 600;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.c23 {
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.45;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
margin: 0;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #c0c0cf;
|
||||
-webkit-appearance: none;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.c4:checked {
|
||||
background-color: #4945ff;
|
||||
border: 1px solid #4945ff;
|
||||
}
|
||||
|
||||
.c4:checked:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.c4:checked:disabled:after {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
|
||||
}
|
||||
|
||||
.c4:disabled {
|
||||
background-color: #dcdce4;
|
||||
border: 1px solid #c0c0cf;
|
||||
}
|
||||
|
||||
.c4:indeterminate {
|
||||
background-color: #4945ff;
|
||||
border: 1px solid #4945ff;
|
||||
}
|
||||
|
||||
.c4:indeterminate:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
color: white;
|
||||
height: 2px;
|
||||
width: 10px;
|
||||
background-color: #ffffff;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.c4:indeterminate:disabled {
|
||||
background-color: #dcdce4;
|
||||
border: 1px solid #c0c0cf;
|
||||
}
|
||||
|
||||
.c4:indeterminate:disabled:after {
|
||||
background-color: #8e8ea9;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdce4;
|
||||
}
|
||||
|
||||
.c6 svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.c6 svg > g,
|
||||
.c6 svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c6[aria-disabled='true'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c7 svg > g,
|
||||
.c7 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c7:hover svg > g,
|
||||
.c7:hover svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c7:active svg > g,
|
||||
.c7:active svg path {
|
||||
fill: #a5a5ba;
|
||||
}
|
||||
|
||||
.c7[aria-disabled='true'] {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c7[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c10 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
<div>
|
||||
<article
|
||||
aria-labelledby="card-1-title"
|
||||
class="c0"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c1 c2"
|
||||
>
|
||||
<div
|
||||
class="c3"
|
||||
>
|
||||
<input
|
||||
aria-labelledby="card-1-title"
|
||||
class="c4"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-1"
|
||||
class="c6 c7"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c8"
|
||||
>
|
||||
<div
|
||||
class="c9"
|
||||
>
|
||||
<span
|
||||
class="c10"
|
||||
>
|
||||
<svg
|
||||
aria-label="hello.png"
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20 22H6.5A3.5 3.5 0 013 18.5V5a3 3 0 013-3h14a1 1 0 011 1v18a1 1 0 01-1 1zm-1-2v-3H6.5a1.5 1.5 0 100 3H19z"
|
||||
fill="#8E8EA9"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<div
|
||||
class="c12"
|
||||
>
|
||||
<div
|
||||
class="c13"
|
||||
>
|
||||
<h2
|
||||
class="c14"
|
||||
id="card-1-title"
|
||||
>
|
||||
hello.png
|
||||
</h2>
|
||||
<div
|
||||
class="c15"
|
||||
>
|
||||
<span
|
||||
class="c16"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c17"
|
||||
>
|
||||
<div
|
||||
class="c18 c19 c20"
|
||||
>
|
||||
<span
|
||||
class="c21 c22 c23"
|
||||
>
|
||||
Doc
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div
|
||||
class="c24"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
aria-relevant="all"
|
||||
id="live-region-log"
|
||||
role="log"
|
||||
/>
|
||||
<p
|
||||
aria-live="polite"
|
||||
aria-relevant="all"
|
||||
id="live-region-status"
|
||||
role="status"
|
||||
/>
|
||||
<p
|
||||
aria-live="assertive"
|
||||
aria-relevant="all"
|
||||
id="live-region-alert"
|
||||
role="alert"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
});
|
||||
});
|
||||
@ -23,12 +23,15 @@ describe('ImageAssetCard', () => {
|
||||
height={40}
|
||||
width={40}
|
||||
thumbnail="http://somewhere.com/hello.png"
|
||||
selected={false}
|
||||
onSelect={jest.fn()}
|
||||
onEdit={jest.fn()}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c21 {
|
||||
.c23 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -46,14 +49,14 @@ describe('ImageAssetCard', () => {
|
||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c10 {
|
||||
padding-top: 8px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c17 {
|
||||
background: #f6f6f9;
|
||||
color: #666687;
|
||||
padding: 4px;
|
||||
@ -61,6 +64,12 @@ describe('ImageAssetCard', () => {
|
||||
}
|
||||
|
||||
.c3 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
@ -84,7 +93,7 @@ describe('ImageAssetCard', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c11 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -98,14 +107,14 @@ describe('ImageAssetCard', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c9 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -119,52 +128,122 @@ describe('ImageAssetCard', () => {
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c13 {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c14 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
.c20 {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.43;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c21 {
|
||||
font-weight: 600;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
.c22 {
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.45;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c18 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c16 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c19 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c4 {
|
||||
margin: 0;
|
||||
height: 18px;
|
||||
min-width: 18px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #c0c0cf;
|
||||
-webkit-appearance: none;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.c4:checked {
|
||||
background-color: #4945ff;
|
||||
border: 1px solid #4945ff;
|
||||
}
|
||||
|
||||
.c4:checked:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.c4:checked:disabled:after {
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
|
||||
}
|
||||
|
||||
.c4:disabled {
|
||||
background-color: #dcdce4;
|
||||
border: 1px solid #c0c0cf;
|
||||
}
|
||||
|
||||
.c4:indeterminate {
|
||||
background-color: #4945ff;
|
||||
border: 1px solid #4945ff;
|
||||
}
|
||||
|
||||
.c4:indeterminate:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: relative;
|
||||
color: white;
|
||||
height: 2px;
|
||||
width: 10px;
|
||||
background-color: #ffffff;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
.c4:indeterminate:disabled {
|
||||
background-color: #dcdce4;
|
||||
border: 1px solid #c0c0cf;
|
||||
}
|
||||
|
||||
.c4:indeterminate:disabled:after {
|
||||
background-color: #8e8ea9;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@ -173,7 +252,7 @@ describe('ImageAssetCard', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -185,44 +264,61 @@ describe('ImageAssetCard', () => {
|
||||
border: 1px solid #dcdce4;
|
||||
}
|
||||
|
||||
.c4 svg {
|
||||
.c6 svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.c4 svg > g,
|
||||
.c4 svg path {
|
||||
.c6 svg > g,
|
||||
.c6 svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c4[aria-disabled='true'] {
|
||||
.c6[aria-disabled='true'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c5 svg > g,
|
||||
.c5 svg path {
|
||||
.c7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c7 svg > g,
|
||||
.c7 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c5:hover svg > g,
|
||||
.c5:hover svg path {
|
||||
.c7:hover svg > g,
|
||||
.c7:hover svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c5:active svg > g,
|
||||
.c5:active svg path {
|
||||
.c7:active svg > g,
|
||||
.c7:active svg path {
|
||||
fill: #a5a5ba;
|
||||
}
|
||||
|
||||
.c5[aria-disabled='true'] {
|
||||
.c7[aria-disabled='true'] {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c5[aria-disabled='true'] svg path {
|
||||
.c7[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c15 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -237,12 +333,21 @@ describe('ImageAssetCard', () => {
|
||||
>
|
||||
<div
|
||||
class="c3"
|
||||
>
|
||||
<input
|
||||
aria-labelledby="card-1-title"
|
||||
class="c4"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-1"
|
||||
class="c4 c5"
|
||||
class="c6 c7"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
@ -264,35 +369,35 @@ describe('ImageAssetCard', () => {
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c6"
|
||||
class="c8"
|
||||
>
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="c7"
|
||||
class="c9"
|
||||
src="http://somewhere.com/hello.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c8"
|
||||
>
|
||||
<div
|
||||
class="c9"
|
||||
>
|
||||
<div
|
||||
class="c10"
|
||||
>
|
||||
<h2
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<div
|
||||
class="c12"
|
||||
>
|
||||
<h2
|
||||
class="c13"
|
||||
id="card-1-title"
|
||||
>
|
||||
hello.png
|
||||
</h2>
|
||||
<div
|
||||
class="c12"
|
||||
class="c14"
|
||||
>
|
||||
<span
|
||||
class="c13"
|
||||
class="c15"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
@ -300,13 +405,13 @@ describe('ImageAssetCard', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c14"
|
||||
class="c16"
|
||||
>
|
||||
<div
|
||||
class="c15 c16 c17"
|
||||
class="c17 c18 c19"
|
||||
>
|
||||
<span
|
||||
class="c18 c19 c20"
|
||||
class="c20 c21 c22"
|
||||
>
|
||||
Image
|
||||
</span>
|
||||
@ -316,7 +421,7 @@ describe('ImageAssetCard', () => {
|
||||
</div>
|
||||
</article>
|
||||
<div
|
||||
class="c21"
|
||||
class="c23"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -22,7 +22,7 @@ describe('UnknownAssetCard', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c15 {
|
||||
.c12 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -40,19 +40,13 @@ describe('UnknownAssetCard', () => {
|
||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c6 {
|
||||
padding-top: 8px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -71,7 +65,7 @@ describe('UnknownAssetCard', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c4 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -85,7 +79,7 @@ describe('UnknownAssetCard', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -99,7 +93,7 @@ describe('UnknownAssetCard', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c3 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -113,21 +107,21 @@ describe('UnknownAssetCard', () => {
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c9 {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c10 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c8 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@ -136,60 +130,11 @@ describe('UnknownAssetCard', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdce4;
|
||||
}
|
||||
|
||||
.c4 svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.c4 svg > g,
|
||||
.c4 svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c4[aria-disabled='true'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c5 svg > g,
|
||||
.c5 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c5:hover svg > g,
|
||||
.c5:hover svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c5:active svg > g,
|
||||
.c5:active svg path {
|
||||
fill: #a5a5ba;
|
||||
}
|
||||
|
||||
.c5[aria-disabled='true'] {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c5[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c11 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
.c5 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@ -205,39 +150,11 @@ describe('UnknownAssetCard', () => {
|
||||
<div
|
||||
class="c3"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-1"
|
||||
class="c4 c5"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
class="c7"
|
||||
class="c4"
|
||||
>
|
||||
<span
|
||||
class="c8"
|
||||
class="c5"
|
||||
>
|
||||
<svg
|
||||
aria-label="hello.png"
|
||||
@ -324,25 +241,25 @@ describe('UnknownAssetCard', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c9"
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
class="c10"
|
||||
class="c7"
|
||||
>
|
||||
<div
|
||||
class="c11"
|
||||
class="c8"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
class="c9"
|
||||
id="card-1-title"
|
||||
>
|
||||
hello.png
|
||||
</h2>
|
||||
<div
|
||||
class="c13"
|
||||
class="c10"
|
||||
>
|
||||
<span
|
||||
class="c14"
|
||||
class="c11"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
@ -352,7 +269,7 @@ describe('UnknownAssetCard', () => {
|
||||
</div>
|
||||
</article>
|
||||
<div
|
||||
class="c15"
|
||||
class="c12"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -49,6 +49,7 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
|
||||
const file = files.item(i);
|
||||
|
||||
assets.push({
|
||||
name: file.name,
|
||||
source: AssetSource.Computer,
|
||||
type: typeFromMime(file.type),
|
||||
url: URL.createObjectURL(file),
|
||||
|
||||
@ -40,6 +40,7 @@ describe('FromUrlForm', () => {
|
||||
|
||||
const expectedAssets = [
|
||||
{
|
||||
name: 'http://localhost:5000/an-image.png',
|
||||
ext: 'png',
|
||||
mime: 'image/png',
|
||||
source: 'url',
|
||||
@ -48,6 +49,7 @@ describe('FromUrlForm', () => {
|
||||
rawFile: new File([''], 'image/png'),
|
||||
},
|
||||
{
|
||||
name: 'http://localhost:5000/a-pdf.pdf',
|
||||
ext: 'pdf',
|
||||
mime: 'application/pdf',
|
||||
source: 'url',
|
||||
@ -56,6 +58,7 @@ describe('FromUrlForm', () => {
|
||||
rawFile: new File([''], 'application/pdf'),
|
||||
},
|
||||
{
|
||||
name: 'http://localhost:5000/a-video.mp4',
|
||||
ext: 'mp4',
|
||||
mime: 'video/mp4',
|
||||
source: 'url',
|
||||
@ -64,6 +67,7 @@ describe('FromUrlForm', () => {
|
||||
rawFile: new File([''], 'video/mp4'),
|
||||
},
|
||||
{
|
||||
name: 'http://localhost:5000/not-working-like-cors.lutin',
|
||||
ext: 'lutin',
|
||||
mime: 'application/json',
|
||||
source: 'url',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ModalHeader, ModalBody, ModalFooter } from '@strapi/parts/ModalLayout';
|
||||
import { ButtonText, Text } from '@strapi/parts/Text';
|
||||
@ -12,18 +12,18 @@ import { DocAssetCard } from '../../AssetCard/DocAssetCard';
|
||||
import { ImageAssetCard } from '../../AssetCard/ImageAssetCard';
|
||||
import { VideoAssetCard } from '../../AssetCard/VideoAssetCard';
|
||||
import { UnknownAssetCard } from '../../AssetCard/UnknownAssetCard';
|
||||
import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';
|
||||
import { getTrad } from '../../../utils';
|
||||
import { AssetType, AssetSource } from '../../../constants';
|
||||
import { useUpload } from '../../../hooks/useUpload';
|
||||
|
||||
export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const { upload, isLoading } = useUpload(assets, onClose);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault();
|
||||
|
||||
await upload();
|
||||
setIsUploading(true);
|
||||
};
|
||||
|
||||
return (
|
||||
@ -69,16 +69,32 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
|
||||
{assets.map((asset, idx) => {
|
||||
const assetKey = `${asset.url}-${idx}`;
|
||||
|
||||
if (isUploading) {
|
||||
return (
|
||||
<GridItem col={4} key={assetKey}>
|
||||
<UploadingAssetCard
|
||||
id={assetKey}
|
||||
name={asset.name}
|
||||
extension={asset.ext}
|
||||
assetType={asset.type}
|
||||
file={asset.rawFile}
|
||||
size="S"
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
}
|
||||
|
||||
if (asset.type === AssetType.Image) {
|
||||
return (
|
||||
<GridItem col={4} key={assetKey}>
|
||||
<ImageAssetCard
|
||||
id={assetKey}
|
||||
name={asset.url}
|
||||
name={asset.name}
|
||||
extension={asset.ext}
|
||||
height={asset.height}
|
||||
width={asset.width}
|
||||
thumbnail={asset.url}
|
||||
size="S"
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
@ -89,10 +105,11 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
|
||||
<GridItem col={4} key={assetKey}>
|
||||
<VideoAssetCard
|
||||
id={assetKey}
|
||||
name={asset.url}
|
||||
name={asset.name}
|
||||
extension={asset.ext}
|
||||
url={asset.url}
|
||||
mime={asset.mime}
|
||||
size="S"
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
@ -101,14 +118,19 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
|
||||
if (asset.type === AssetType.Unknown) {
|
||||
return (
|
||||
<GridItem col={4} key={assetKey}>
|
||||
<UnknownAssetCard id={assetKey} name={asset.url} extension={asset.ext} />
|
||||
<UnknownAssetCard
|
||||
id={assetKey}
|
||||
name={asset.name}
|
||||
extension={asset.ext}
|
||||
size="S"
|
||||
/>
|
||||
</GridItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<GridItem col={4} key={assetKey}>
|
||||
<DocAssetCard name={asset.url} extension={asset.ext} />
|
||||
<DocAssetCard name={asset.name} extension={asset.ext} size="S" />
|
||||
</GridItem>
|
||||
);
|
||||
})}
|
||||
@ -124,7 +146,7 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
|
||||
</Button>
|
||||
}
|
||||
endActions={
|
||||
<Button type="submit" loading={isLoading}>
|
||||
<Button type="submit" loading={isUploading}>
|
||||
{formatMessage(
|
||||
{
|
||||
id: getTrad('modal.upload-list.footer.button.singular'),
|
||||
|
||||
@ -68,7 +68,7 @@ describe('PendingAssetStep', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c55 {
|
||||
.c52 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -113,7 +113,7 @@ describe('PendingAssetStep', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c52 {
|
||||
.c49 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -153,6 +153,23 @@ describe('PendingAssetStep', () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c6 svg > g,
|
||||
.c6 svg path {
|
||||
fill: #8e8ea9;
|
||||
@ -180,11 +197,11 @@ describe('PendingAssetStep', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c51 {
|
||||
.c48 {
|
||||
border-top: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c53 > * + * {
|
||||
.c50 > * + * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -302,7 +319,7 @@ describe('PendingAssetStep', () => {
|
||||
background: #4945ff;
|
||||
}
|
||||
|
||||
.c54 {
|
||||
.c51 {
|
||||
padding: 8px 16px;
|
||||
background: #4945ff;
|
||||
border: none;
|
||||
@ -310,52 +327,52 @@ describe('PendingAssetStep', () => {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.c54 .c16 {
|
||||
.c51 .c16 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.c54[aria-disabled='true'] {
|
||||
.c51[aria-disabled='true'] {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c54[aria-disabled='true'] .c16 {
|
||||
.c51[aria-disabled='true'] .c16 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c54[aria-disabled='true'] svg > g,
|
||||
.c54[aria-disabled='true'] svg path {
|
||||
.c51[aria-disabled='true'] svg > g,
|
||||
.c51[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c54[aria-disabled='true']:active {
|
||||
.c51[aria-disabled='true']:active {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c54[aria-disabled='true']:active .c16 {
|
||||
.c51[aria-disabled='true']:active .c16 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c54[aria-disabled='true']:active svg > g,
|
||||
.c54[aria-disabled='true']:active svg path {
|
||||
.c51[aria-disabled='true']:active svg > g,
|
||||
.c51[aria-disabled='true']:active svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c54:hover {
|
||||
.c51:hover {
|
||||
background-color: #f6f6f9;
|
||||
}
|
||||
|
||||
.c54:active {
|
||||
.c51:active {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c54 .c16 {
|
||||
.c51 .c16 {
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c54 svg > g,
|
||||
.c54 svg path {
|
||||
.c51 svg > g,
|
||||
.c51 svg path {
|
||||
fill: #32324d;
|
||||
}
|
||||
|
||||
@ -432,33 +449,27 @@ describe('PendingAssetStep', () => {
|
||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
||||
}
|
||||
|
||||
.c28 {
|
||||
.c25 {
|
||||
padding-top: 8px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c35 {
|
||||
.c32 {
|
||||
background: #f6f6f9;
|
||||
color: #666687;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c45 {
|
||||
.c42 {
|
||||
background: #32324d;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c23 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -477,7 +488,7 @@ describe('PendingAssetStep', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
.c26 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -491,7 +502,7 @@ describe('PendingAssetStep', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c41 {
|
||||
.c38 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -505,14 +516,14 @@ describe('PendingAssetStep', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
.c24 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.c26 {
|
||||
.c23 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -521,64 +532,67 @@ describe('PendingAssetStep', () => {
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 10.25rem;
|
||||
height: 5.5rem;
|
||||
width: 100%;
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c31 {
|
||||
.c28 {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c32 {
|
||||
.c29 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c38 {
|
||||
.c35 {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.43;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c47 {
|
||||
.c44 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.c39 {
|
||||
.c36 {
|
||||
font-weight: 600;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.c40 {
|
||||
.c37 {
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.45;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c36 {
|
||||
.c33 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c34 {
|
||||
.c31 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c37 {
|
||||
.c34 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.c30 {
|
||||
.c27 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@ -587,88 +601,39 @@ describe('PendingAssetStep', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c46 {
|
||||
.c43 {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.c24 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdce4;
|
||||
}
|
||||
|
||||
.c24 svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.c24 svg > g,
|
||||
.c24 svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c24[aria-disabled='true'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c25 svg > g,
|
||||
.c25 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c25:hover svg > g,
|
||||
.c25:hover svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c25:active svg > g,
|
||||
.c25:active svg path {
|
||||
fill: #a5a5ba;
|
||||
}
|
||||
|
||||
.c25[aria-disabled='true'] {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c25[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c43 {
|
||||
.c40 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c42 svg {
|
||||
.c39 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.c33 {
|
||||
.c30 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c44 canvas {
|
||||
.c41 canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-height: 5.5rem;
|
||||
}
|
||||
|
||||
.c48 {
|
||||
.c45 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c50 {
|
||||
.c47 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c49 svg {
|
||||
.c46 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@ -776,75 +741,45 @@ describe('PendingAssetStep', () => {
|
||||
>
|
||||
<div
|
||||
class="c23"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-1"
|
||||
class="c24 c25"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="c27"
|
||||
class="c24"
|
||||
src="http://localhost:5000/CPAM.jpg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c25"
|
||||
>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-1-title"
|
||||
/>
|
||||
<div
|
||||
class="c29"
|
||||
>
|
||||
<div
|
||||
class="c30"
|
||||
>
|
||||
<h2
|
||||
class="c31"
|
||||
id="card-1-title"
|
||||
>
|
||||
http://localhost:5000/CPAM.jpg
|
||||
</h2>
|
||||
<div
|
||||
class="c32"
|
||||
>
|
||||
<span
|
||||
class="c33"
|
||||
class="c30"
|
||||
>
|
||||
jpg
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c34"
|
||||
class="c31"
|
||||
>
|
||||
<div
|
||||
class="c35 c36 c37"
|
||||
class="c32 c33 c34"
|
||||
>
|
||||
<span
|
||||
class="c38 c39 c40"
|
||||
class="c35 c36 c37"
|
||||
>
|
||||
Image
|
||||
</span>
|
||||
@ -872,42 +807,13 @@ describe('PendingAssetStep', () => {
|
||||
<div
|
||||
class="c23"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-3"
|
||||
class="c24 c25"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<div
|
||||
class="c41"
|
||||
class="c38"
|
||||
>
|
||||
<span
|
||||
class="c42"
|
||||
class="c39"
|
||||
>
|
||||
<svg
|
||||
aria-label="http://localhost:5000/MARIAGE%20FRACHET%204.pdf"
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
@ -924,38 +830,36 @@ describe('PendingAssetStep', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c25"
|
||||
>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-2-title"
|
||||
/>
|
||||
<div
|
||||
class="c29"
|
||||
>
|
||||
<div
|
||||
class="c30"
|
||||
>
|
||||
<h2
|
||||
class="c31"
|
||||
id="card-2-title"
|
||||
>
|
||||
http://localhost:5000/MARIAGE%20FRACHET%204.pdf
|
||||
</h2>
|
||||
<div
|
||||
class="c32"
|
||||
>
|
||||
<span
|
||||
class="c43"
|
||||
class="c40"
|
||||
>
|
||||
pdf
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c34"
|
||||
class="c31"
|
||||
>
|
||||
<div
|
||||
class="c35 c36 c37"
|
||||
class="c32 c33 c34"
|
||||
>
|
||||
<span
|
||||
class="c38 c39 c40"
|
||||
class="c35 c36 c37"
|
||||
>
|
||||
Doc
|
||||
</span>
|
||||
@ -983,39 +887,11 @@ describe('PendingAssetStep', () => {
|
||||
<div
|
||||
class="c23"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-5"
|
||||
class="c24 c25"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c26"
|
||||
class="c38"
|
||||
>
|
||||
<div
|
||||
class="c41"
|
||||
>
|
||||
<div
|
||||
class="c44"
|
||||
>
|
||||
<video
|
||||
src="http://localhost:5000/mov_bbb.mp4"
|
||||
@ -1029,48 +905,46 @@ describe('PendingAssetStep', () => {
|
||||
</div>
|
||||
</div>
|
||||
<time
|
||||
class="c45 c46"
|
||||
class="c42 c43"
|
||||
>
|
||||
<span
|
||||
class="c47"
|
||||
class="c44"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c25"
|
||||
>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-3-title"
|
||||
/>
|
||||
<div
|
||||
class="c29"
|
||||
>
|
||||
<div
|
||||
class="c30"
|
||||
>
|
||||
<h2
|
||||
class="c31"
|
||||
id="card-3-title"
|
||||
>
|
||||
http://localhost:5000/mov_bbb.mp4
|
||||
</h2>
|
||||
<div
|
||||
class="c32"
|
||||
>
|
||||
<span
|
||||
class="c48"
|
||||
class="c45"
|
||||
>
|
||||
mp4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c34"
|
||||
class="c31"
|
||||
>
|
||||
<div
|
||||
class="c35 c36 c37"
|
||||
class="c32 c33 c34"
|
||||
>
|
||||
<span
|
||||
class="c38 c39 c40"
|
||||
class="c35 c36 c37"
|
||||
>
|
||||
Video
|
||||
</span>
|
||||
@ -1098,42 +972,13 @@ describe('PendingAssetStep', () => {
|
||||
<div
|
||||
class="c23"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-7"
|
||||
class="c24 c25"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<div
|
||||
class="c41"
|
||||
class="c38"
|
||||
>
|
||||
<span
|
||||
class="c49"
|
||||
class="c46"
|
||||
>
|
||||
<svg
|
||||
aria-label="https://www.w3schools.com/html/mov_bbb.mp4"
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 216 120"
|
||||
@ -1217,25 +1062,23 @@ describe('PendingAssetStep', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c28"
|
||||
class="c25"
|
||||
>
|
||||
<div
|
||||
class="c26"
|
||||
>
|
||||
<div
|
||||
class="c27"
|
||||
>
|
||||
<h2
|
||||
class="c28"
|
||||
id="card-4-title"
|
||||
/>
|
||||
<div
|
||||
class="c29"
|
||||
>
|
||||
<div
|
||||
class="c30"
|
||||
>
|
||||
<h2
|
||||
class="c31"
|
||||
id="card-4-title"
|
||||
>
|
||||
https://www.w3schools.com/html/mov_bbb.mp4
|
||||
</h2>
|
||||
<div
|
||||
class="c32"
|
||||
>
|
||||
<span
|
||||
class="c50"
|
||||
class="c47"
|
||||
>
|
||||
mp4
|
||||
</span>
|
||||
@ -1251,17 +1094,17 @@ describe('PendingAssetStep', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c0 c51"
|
||||
class="c0 c48"
|
||||
>
|
||||
<div
|
||||
class="c2"
|
||||
>
|
||||
<div
|
||||
class="c52 c53"
|
||||
class="c49 c50"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="c14 c54"
|
||||
class="c14 c51"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -1270,7 +1113,7 @@ describe('PendingAssetStep', () => {
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="c52 c53"
|
||||
class="c49 c50"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
@ -1288,7 +1131,7 @@ describe('PendingAssetStep', () => {
|
||||
</div>
|
||||
</form>
|
||||
<div
|
||||
class="c55"
|
||||
class="c52"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -134,6 +134,23 @@ describe('', () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c10 svg > g,
|
||||
.c10 svg path {
|
||||
fill: #8e8ea9;
|
||||
|
||||
@ -12,15 +12,17 @@ export const useAssets = ({ skipWhen }) => {
|
||||
const [{ rawQuery, query }, setQuery] = useQueryParams();
|
||||
const dataRequestURL = getRequestUrl('files');
|
||||
|
||||
const { data, error, isLoading } = useQuery(
|
||||
'assets',
|
||||
async () => {
|
||||
const getAssets = async () => {
|
||||
const { data } = await axiosInstance.get(`${dataRequestURL}${rawQuery}`);
|
||||
|
||||
return data;
|
||||
},
|
||||
{ enabled: !skipWhen }
|
||||
);
|
||||
};
|
||||
|
||||
const { data, error, isLoading } = useQuery(`assets`, getAssets, {
|
||||
enabled: !skipWhen,
|
||||
staleTime: 0,
|
||||
cacheTime: 0,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!query) {
|
||||
|
||||
@ -1,54 +1,48 @@
|
||||
import axios from 'axios';
|
||||
import { useRef, useState } from 'react';
|
||||
import { useMutation, useQueryClient } from 'react-query';
|
||||
import { axiosInstance } from '../utils';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { axiosInstance, getTrad } from '../utils';
|
||||
import pluginId from '../pluginId';
|
||||
|
||||
const endpoint = `/${pluginId}`;
|
||||
|
||||
const uploadAssets = async cancellableAssets => {
|
||||
const requests = cancellableAssets.map(({ rawFile, cancelToken }) => {
|
||||
const uploadAsset = (file, cancelToken, onProgress) => {
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append('files', rawFile);
|
||||
formData.append('fileInfo', JSON.stringify(rawFile));
|
||||
formData.append('files', file);
|
||||
formData.append('fileInfo', JSON.stringify(file));
|
||||
|
||||
return axiosInstance({
|
||||
method: 'post',
|
||||
url: endpoint,
|
||||
cancelToken,
|
||||
headers: {},
|
||||
data: formData,
|
||||
});
|
||||
});
|
||||
|
||||
return Promise.allSettled(requests);
|
||||
cancelToken: cancelToken.token,
|
||||
onUploadProgress({ total, loaded }) {
|
||||
onProgress((loaded / total) * 100);
|
||||
},
|
||||
}).then(res => res.data);
|
||||
};
|
||||
|
||||
export const useUpload = (assets, onSuccess) => {
|
||||
export const useUpload = () => {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const { formatMessage } = useIntl();
|
||||
const queryClient = useQueryClient();
|
||||
const cancellableAssets = assets.map(asset => ({
|
||||
...asset,
|
||||
cancelToken: axios.CancelToken.source().token,
|
||||
}));
|
||||
|
||||
const mutation = useMutation(uploadAssets, {
|
||||
onSuccess: res => {
|
||||
const assets = res
|
||||
.map(assetResponse => assetResponse.value.data)
|
||||
.reduce((acc, curr) => acc.concat(curr), []);
|
||||
const tokenRef = useRef(axios.CancelToken.source());
|
||||
|
||||
const mutation = useMutation(asset => uploadAsset(asset, tokenRef.current, setProgress), {
|
||||
onSuccess: assets => {
|
||||
// Coupled with the cache of useAssets
|
||||
queryClient.setQueryData('assets', cachedAssets => cachedAssets.concat(assets));
|
||||
|
||||
onSuccess();
|
||||
},
|
||||
});
|
||||
|
||||
const cancel = index => {
|
||||
cancellableAssets[index].cancelToken.cancel('Operation canceled by the user.');
|
||||
};
|
||||
const upload = asset => mutation.mutate(asset);
|
||||
const cancel = () =>
|
||||
tokenRef.current.cancel(
|
||||
formatMessage({ id: getTrad('modal.upload.cancelled'), defaultMessage: '' })
|
||||
);
|
||||
|
||||
const upload = () => mutation.mutate(cancellableAssets);
|
||||
|
||||
return { upload, cancel, isError: mutation.isError, isLoading: mutation.isLoading };
|
||||
return { upload, cancel, error: mutation.error, progress };
|
||||
};
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Button } from '@strapi/parts/Button';
|
||||
import { FilterPopoverURLQuery } from '@strapi/helper-plugin';
|
||||
import FilterIcon from '@strapi/icons/FilterIcon';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
const displayedFilters = [
|
||||
{
|
||||
name: 'created_at',
|
||||
fieldSchema: {
|
||||
type: 'date',
|
||||
},
|
||||
metadatas: { label: 'created_at' },
|
||||
},
|
||||
{
|
||||
name: 'updated_at',
|
||||
fieldSchema: {
|
||||
type: 'date',
|
||||
},
|
||||
metadatas: { label: 'updated_at' },
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
fieldSchema: {
|
||||
type: 'enumeration',
|
||||
options: ['image', 'video', 'file'],
|
||||
},
|
||||
metadatas: { label: 'type' },
|
||||
},
|
||||
];
|
||||
|
||||
export const Filters = () => {
|
||||
const buttonRef = useRef(null);
|
||||
const [isVisible, setVisible] = useState(false);
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const toggleFilter = () => setVisible(prev => !prev);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="tertiary"
|
||||
ref={buttonRef}
|
||||
startIcon={<FilterIcon />}
|
||||
onClick={toggleFilter}
|
||||
size="S"
|
||||
>
|
||||
{formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
|
||||
</Button>
|
||||
|
||||
{isVisible && (
|
||||
<FilterPopoverURLQuery
|
||||
displayedFilters={displayedFilters}
|
||||
isVisible={isVisible}
|
||||
onToggle={toggleFilter}
|
||||
source={buttonRef}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -127,7 +127,7 @@ describe('MediaLibrary / ListView', () => {
|
||||
);
|
||||
|
||||
expect(container).toMatchInlineSnapshot(`
|
||||
.c30 {
|
||||
.c27 {
|
||||
border: 0;
|
||||
-webkit-clip: rect(0 0 0 0);
|
||||
clip: rect(0 0 0 0);
|
||||
@ -145,88 +145,33 @@ describe('MediaLibrary / ListView', () => {
|
||||
grid-gap: 16px;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdce4;
|
||||
}
|
||||
|
||||
.c5 svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.c5 svg > g,
|
||||
.c5 svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c5[aria-disabled='true'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c6 svg > g,
|
||||
.c6 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c6:hover svg > g,
|
||||
.c6:hover svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c6:active svg > g,
|
||||
.c6:active svg path {
|
||||
fill: #a5a5ba;
|
||||
}
|
||||
|
||||
.c6[aria-disabled='true'] {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c6[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
background: #ffffff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
|
||||
}
|
||||
|
||||
.c9 {
|
||||
.c6 {
|
||||
padding-top: 8px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c13 {
|
||||
background: #f6f6f9;
|
||||
color: #666687;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c24 {
|
||||
.c21 {
|
||||
background: #32324d;
|
||||
color: #ffffff;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -245,7 +190,7 @@ describe('MediaLibrary / ListView', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -259,7 +204,7 @@ describe('MediaLibrary / ListView', () => {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
.c19 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -273,14 +218,14 @@ describe('MediaLibrary / ListView', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
.c5 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c4 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -294,59 +239,62 @@ describe('MediaLibrary / ListView', () => {
|
||||
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c9 {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
.c10 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c16 {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.43;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c26 {
|
||||
.c23 {
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
.c17 {
|
||||
font-weight: 600;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
.c18 {
|
||||
font-weight: 600;
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1.45;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c14 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c12 {
|
||||
margin-left: auto;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
.c15 {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
.c8 {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@ -355,31 +303,31 @@ describe('MediaLibrary / ListView', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
.c22 {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c11 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c23 canvas {
|
||||
.c20 canvas {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-height: 10.25rem;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
.c24 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
.c26 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.c28 svg {
|
||||
.c25 svg {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@ -400,62 +348,34 @@ describe('MediaLibrary / ListView', () => {
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-1"
|
||||
class="c5 c6"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c7"
|
||||
>
|
||||
<img
|
||||
aria-hidden="true"
|
||||
class="c8"
|
||||
class="c5"
|
||||
src="http://localhost:1337/uploads/thumbnail_strapi_cover_1fabc982ce_5b43615ed5.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c9"
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
class="c10"
|
||||
class="c7"
|
||||
>
|
||||
<div
|
||||
class="c11"
|
||||
class="c8"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
class="c9"
|
||||
id="card-1-title"
|
||||
>
|
||||
strapi-cover_1fabc982ce.png
|
||||
</h2>
|
||||
<div
|
||||
class="c13"
|
||||
class="c10"
|
||||
>
|
||||
<span
|
||||
class="c14"
|
||||
class="c11"
|
||||
>
|
||||
png
|
||||
</span>
|
||||
@ -463,13 +383,13 @@ describe('MediaLibrary / ListView', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c15"
|
||||
class="c12"
|
||||
>
|
||||
<div
|
||||
class="c16 c17 c18"
|
||||
class="c13 c14 c15"
|
||||
>
|
||||
<span
|
||||
class="c19 c20 c21"
|
||||
class="c16 c17 c18"
|
||||
>
|
||||
Image
|
||||
</span>
|
||||
@ -489,39 +409,11 @@ describe('MediaLibrary / ListView', () => {
|
||||
<div
|
||||
class="c4"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-3"
|
||||
class="c5 c6"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c7"
|
||||
class="c19"
|
||||
>
|
||||
<div
|
||||
class="c22"
|
||||
>
|
||||
<div
|
||||
class="c23"
|
||||
class="c20"
|
||||
>
|
||||
<video
|
||||
src="http://localhost:1337/uploads/mov_bbb_2f3907f7aa.mp4"
|
||||
@ -535,48 +427,48 @@ describe('MediaLibrary / ListView', () => {
|
||||
</div>
|
||||
</div>
|
||||
<time
|
||||
class="c24 c25"
|
||||
class="c21 c22"
|
||||
>
|
||||
<span
|
||||
class="c26"
|
||||
class="c23"
|
||||
>
|
||||
...
|
||||
</span>
|
||||
</time>
|
||||
</div>
|
||||
<div
|
||||
class="c9"
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
class="c10"
|
||||
class="c7"
|
||||
>
|
||||
<div
|
||||
class="c11"
|
||||
class="c8"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
class="c9"
|
||||
id="card-2-title"
|
||||
>
|
||||
mov_bbb.mp4
|
||||
</h2>
|
||||
<div
|
||||
class="c13"
|
||||
class="c10"
|
||||
>
|
||||
<span
|
||||
class="c27"
|
||||
class="c24"
|
||||
>
|
||||
mp4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c15"
|
||||
class="c12"
|
||||
>
|
||||
<div
|
||||
class="c16 c17 c18"
|
||||
class="c13 c14 c15"
|
||||
>
|
||||
<span
|
||||
class="c19 c20 c21"
|
||||
class="c16 c17 c18"
|
||||
>
|
||||
Video
|
||||
</span>
|
||||
@ -596,39 +488,11 @@ describe('MediaLibrary / ListView', () => {
|
||||
<div
|
||||
class="c4"
|
||||
>
|
||||
<span>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-labelledby="tooltip-5"
|
||||
class="c5 c6"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c7"
|
||||
>
|
||||
<div
|
||||
class="c22"
|
||||
class="c19"
|
||||
>
|
||||
<span
|
||||
class="c28"
|
||||
class="c25"
|
||||
>
|
||||
<svg
|
||||
aria-label="CARTE MARIAGE AVS - Printemps.pdf"
|
||||
@ -648,38 +512,38 @@ describe('MediaLibrary / ListView', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c9"
|
||||
class="c6"
|
||||
>
|
||||
<div
|
||||
class="c10"
|
||||
class="c7"
|
||||
>
|
||||
<div
|
||||
class="c11"
|
||||
class="c8"
|
||||
>
|
||||
<h2
|
||||
class="c12"
|
||||
class="c9"
|
||||
id="card-3-title"
|
||||
>
|
||||
CARTE MARIAGE AVS - Printemps.pdf
|
||||
</h2>
|
||||
<div
|
||||
class="c13"
|
||||
class="c10"
|
||||
>
|
||||
<span
|
||||
class="c29"
|
||||
class="c26"
|
||||
>
|
||||
pdf
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c15"
|
||||
class="c12"
|
||||
>
|
||||
<div
|
||||
class="c16 c17 c18"
|
||||
class="c13 c14 c15"
|
||||
>
|
||||
<span
|
||||
class="c19 c20 c21"
|
||||
class="c16 c17 c18"
|
||||
>
|
||||
Doc
|
||||
</span>
|
||||
@ -691,7 +555,7 @@ describe('MediaLibrary / ListView', () => {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c30"
|
||||
class="c27"
|
||||
>
|
||||
<p
|
||||
aria-live="polite"
|
||||
|
||||
@ -22,6 +22,7 @@ import { ListView } from './components/ListView';
|
||||
import { useAssets } from '../../hooks/useAssets';
|
||||
import { getTrad } from '../../utils';
|
||||
import pluginPermissions from '../../permissions';
|
||||
import { Filters } from './components/Filters';
|
||||
|
||||
const BoxWithHeight = styled(Box)`
|
||||
height: ${32 / 16}rem;
|
||||
@ -94,7 +95,7 @@ const App = () => {
|
||||
})}
|
||||
/>
|
||||
</BoxWithHeight>
|
||||
<Button variant="tertiary">Filter</Button>
|
||||
<Filters />
|
||||
</>
|
||||
}
|
||||
endActions={
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
"modal.upload-list.sub-header-title.plural": "{number} assets selected",
|
||||
"modal.upload-list.sub-header-title.singular": "{number} asset selected",
|
||||
"modal.upload-list.sub-header.button": "Add more assets",
|
||||
"modal.upload.cancelled": "Upload manually aborted.",
|
||||
"page.title": "Settings - Media Library",
|
||||
"plugin.description.long": "Media file management.",
|
||||
"plugin.description.short": "Media file management.",
|
||||
|
||||
@ -15,6 +15,7 @@ export const urlsToAssets = async urls => {
|
||||
});
|
||||
|
||||
return {
|
||||
name: loadedFile.name,
|
||||
url: res.config.url,
|
||||
mime: res.headers['content-type'],
|
||||
rawFile: loadedFile,
|
||||
@ -30,6 +31,7 @@ export const urlsToAssets = async urls => {
|
||||
|
||||
const assets = fullFilledAssets.map(fullFilledAsset => ({
|
||||
source: AssetSource.Url,
|
||||
name: fullFilledAsset.value.name,
|
||||
type: typeFromMime(fullFilledAsset.value.mime),
|
||||
url: fullFilledAsset.value.url,
|
||||
ext: fullFilledAsset.value.url.split('.').pop(),
|
||||
@ -39,6 +41,7 @@ export const urlsToAssets = async urls => {
|
||||
|
||||
const unknownAssets = rejectedAssets.map(unknownAsset => ({
|
||||
source: AssetSource.Url,
|
||||
name: unknownAsset.reason,
|
||||
type: AssetType.Unknown,
|
||||
url: unknownAsset.reason,
|
||||
ext: unknownAsset.reason.split('.').pop(),
|
||||
|
||||
@ -88,7 +88,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
|
||||
icon={<SortIcon />}
|
||||
/>
|
||||
{visible && (
|
||||
<Popover source={buttonRef} spacingTop={4} centered>
|
||||
<Popover source={buttonRef} spacing={16} centered>
|
||||
<ul>
|
||||
{localesArray.map(name => (
|
||||
<Box key={name} padding={3} as="li">
|
||||
|
||||
@ -92,6 +92,20 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
|
||||
}
|
||||
|
||||
.c25 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
@ -333,6 +333,23 @@ describe('Plugin | Users and Permissions | RoleListPage', () => {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.c22 svg > g,
|
||||
.c22 svg path {
|
||||
fill: #8e8ea9;
|
||||
|
||||
24
yarn.lock
24
yarn.lock
@ -4921,15 +4921,15 @@
|
||||
resolve-from "^5.0.0"
|
||||
store2 "^2.12.0"
|
||||
|
||||
"@strapi/icons@0.0.1-alpha.36":
|
||||
version "0.0.1-alpha.36"
|
||||
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.36.tgz#0d9fffbb44efa4c08532f34ade9668b08fb321be"
|
||||
integrity sha512-MkTjtHF16Bx6pcdklo1d1++vXkdymEeE61ZR4kuSslnU7aSW+KSyUePAvwzdUnm2ys/vqNMp99CH7SGtRH8g5w==
|
||||
"@strapi/icons@0.0.1-alpha.37":
|
||||
version "0.0.1-alpha.37"
|
||||
resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-0.0.1-alpha.37.tgz#65131221835227958d020f7c9910ab471834a515"
|
||||
integrity sha512-tUTKqQ+qQrt7V0qwoT/mHmyP/b/O1zk087nb8pjx22sjTXSyXToZW3RkMATn2RNF9MKGrKAQRswphyFY6Os+Yg==
|
||||
|
||||
"@strapi/parts@0.0.1-alpha.36":
|
||||
version "0.0.1-alpha.36"
|
||||
resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.36.tgz#7baa4cacad61cf583b9dc6aae5efd923f793f0a3"
|
||||
integrity sha512-O8OEjP6kbXVydqM/NweRmbSwwnLSFlaXu60/UgOEjA+z+IbK6sbsqxiFFW7zUpmnvhRhlDjcBa+c3uhforDeqA==
|
||||
"@strapi/parts@0.0.1-alpha.37":
|
||||
version "0.0.1-alpha.37"
|
||||
resolved "https://registry.yarnpkg.com/@strapi/parts/-/parts-0.0.1-alpha.37.tgz#1746151b0c86014da089761eec192920f4921ab0"
|
||||
integrity sha512-KdTJj/d0N3jfobmFkpy02pqnX4rsI5oUVIQ5EVSl9zV+8aagC76Txdb3tQdHFwVYTWHjpODoXpQqPduX+IvL0A==
|
||||
dependencies:
|
||||
"@internationalized/number" "^3.0.2"
|
||||
compute-scroll-into-view "^1.0.17"
|
||||
@ -20159,10 +20159,10 @@ react-portal@^4.2.0:
|
||||
dependencies:
|
||||
prop-types "^15.5.8"
|
||||
|
||||
react-query@3.19.0:
|
||||
version "3.19.0"
|
||||
resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.19.0.tgz#e1fe8f62b9956fb2986317686c27f79ad7ee4e7e"
|
||||
integrity sha512-AaerSVsmBG2iIciwX2x8cWZS4Htw/4u2GFTYK8oiicpX3PY5mvat/8/Y3wZhM47KlllAzvC+P9MW81oHuEt2wg==
|
||||
react-query@3.24.3:
|
||||
version "3.24.3"
|
||||
resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.24.3.tgz#58c538fb55386fa947bda88acbe616e02cb5b2bb"
|
||||
integrity sha512-JipKpn7XoDVvRWwXWXKSJU5SbNJKqspx9IRBntaQt1EQOBXe9314Z/8cV9YXXbZIhzrHAetT3X7tRClZaYk98g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
broadcast-channel "^3.4.1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user