mirror of
https://github.com/strapi/strapi.git
synced 2025-12-27 07:03:38 +00:00
Pending asset step init
This commit is contained in:
mfrachet
parent
5c478a41ed
commit
751d2e0c83
@ -10,7 +10,7 @@ import { FromUrlForm } from './FromUrlForm';
|
||||
import { FromComputerForm } from './FromComputerForm';
|
||||
import { getTrad } from '../../../utils';
|
||||
|
||||
export const AddAssetStep = ({ onClose }) => {
|
||||
export const AddAssetStep = ({ onClose, onAddAsset }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
@ -54,7 +54,7 @@ export const AddAssetStep = ({ onClose }) => {
|
||||
<FromComputerForm />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<FromUrlForm onClose={onClose} />
|
||||
<FromUrlForm onClose={onClose} onAddAsset={onAddAsset} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
@ -64,4 +64,5 @@ export const AddAssetStep = ({ onClose }) => {
|
||||
|
||||
AddAssetStep.propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onAddAsset: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
@ -9,10 +9,12 @@ import { Form } from '@strapi/helper-plugin';
|
||||
import { Formik } from 'formik';
|
||||
import { getTrad, urlSchema } from '../../../utils';
|
||||
|
||||
export const FromUrlForm = ({ onClose }) => {
|
||||
export const FromUrlForm = ({ onClose, onAddAsset }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
const handleSubmit = () => {};
|
||||
const handleSubmit = () => {
|
||||
onAddAsset();
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
@ -71,4 +73,5 @@ export const FromUrlForm = ({ onClose }) => {
|
||||
|
||||
FromUrlForm.propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onAddAsset: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
@ -1,14 +1,28 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ModalLayout } from '@strapi/parts/ModalLayout';
|
||||
import { AddAssetStep } from './AddAssetStep/AddAssetStep';
|
||||
import { PendingAssetStep } from './PendingAssetStep/PendingAssetStep';
|
||||
|
||||
const Steps = {
|
||||
AddAsset: 'AddAsset',
|
||||
PendingAsset: 'PendingAsset',
|
||||
};
|
||||
|
||||
export const UploadAssetDialog = ({ onSuccess, onClose }) => {
|
||||
const [step, setStep] = useState(Steps.AddAsset);
|
||||
|
||||
const handleAddToPendingAssets = () => {
|
||||
setStep(Steps.PendingAsset);
|
||||
onSuccess();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalLayout onClose={onClose} labelledBy="title">
|
||||
{/* <AddAssetStep onClose={onClose} /> */}
|
||||
<PendingAssetStep onClose={onClose} />
|
||||
{step === Steps.AddAsset && (
|
||||
<AddAssetStep onClose={onClose} onAddAsset={handleAddToPendingAssets} />
|
||||
)}
|
||||
{step === Steps.PendingAsset && <PendingAssetStep onClose={onClose} />}
|
||||
</ModalLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@ -52,13 +52,6 @@ describe('', () => {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
padding-top: 24px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 24px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
@ -92,20 +85,6 @@ describe('', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c23 {
|
||||
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;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -159,14 +138,6 @@ describe('', () => {
|
||||
border-bottom: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c22 {
|
||||
border-top: 1px solid #eaeaef;
|
||||
}
|
||||
|
||||
.c24 > * + * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
@ -179,146 +150,6 @@ describe('', () => {
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdce4;
|
||||
}
|
||||
|
||||
.c25 svg {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.c25 svg > g,
|
||||
.c25 svg path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.c25[aria-disabled='true'] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.c26 {
|
||||
padding: 8px 16px;
|
||||
background: #4945ff;
|
||||
border: none;
|
||||
border: 1px solid #dcdce4;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.c26 .c27 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.c26[aria-disabled='true'] {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c26[aria-disabled='true'] .c27 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c26[aria-disabled='true'] svg > g,
|
||||
.c26[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c26[aria-disabled='true']:active {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c26[aria-disabled='true']:active .c27 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c26[aria-disabled='true']:active svg > g,
|
||||
.c26[aria-disabled='true']:active svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c26:hover {
|
||||
background-color: #f6f6f9;
|
||||
}
|
||||
|
||||
.c26:active {
|
||||
background-color: #eaeaef;
|
||||
}
|
||||
|
||||
.c26 .c27 {
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c26 svg > g,
|
||||
.c26 svg path {
|
||||
fill: #32324d;
|
||||
}
|
||||
|
||||
.c29 {
|
||||
padding: 8px 16px;
|
||||
background: #4945ff;
|
||||
border: none;
|
||||
border: 1px solid #4945ff;
|
||||
background: #4945ff;
|
||||
}
|
||||
|
||||
.c29 .c27 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.c29[aria-disabled='true'] {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c29[aria-disabled='true'] .c27 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c29[aria-disabled='true'] svg > g,
|
||||
.c29[aria-disabled='true'] svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c29[aria-disabled='true']:active {
|
||||
border: 1px solid #dcdce4;
|
||||
background: #eaeaef;
|
||||
}
|
||||
|
||||
.c29[aria-disabled='true']:active .c27 {
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c29[aria-disabled='true']:active svg > g,
|
||||
.c29[aria-disabled='true']:active svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c29:hover {
|
||||
border: 1px solid #7b79ff;
|
||||
background: #7b79ff;
|
||||
}
|
||||
|
||||
.c29:active {
|
||||
border: 1px solid #4945ff;
|
||||
background: #4945ff;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
background: #eaeaef;
|
||||
}
|
||||
@ -329,6 +160,17 @@ describe('', () => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
padding-top: 24px;
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
@ -367,11 +209,6 @@ describe('', () => {
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
<body
|
||||
class="lock-body-scroll"
|
||||
>
|
||||
@ -443,10 +280,10 @@ describe('', () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="c11"
|
||||
>
|
||||
<div
|
||||
aria-label="How do you want to upload your assets?"
|
||||
role="tablist"
|
||||
@ -490,55 +327,19 @@ describe('', () => {
|
||||
<hr
|
||||
class="c19 c20"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
aria-labelledby="tabgroup-1-0-tab"
|
||||
id="tabgroup-1-0-tabpanel"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c21"
|
||||
>
|
||||
From URL form
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c4 c22"
|
||||
>
|
||||
<div
|
||||
class="c6"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c23 c24"
|
||||
aria-labelledby="tabgroup-1-0-tab"
|
||||
id="tabgroup-1-0-tabpanel"
|
||||
role="tabpanel"
|
||||
tabindex="0"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="c25 c26"
|
||||
type="button"
|
||||
<div
|
||||
class="c21"
|
||||
>
|
||||
<span
|
||||
class="c27 c28"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="c23 c24"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
class="c25 c29"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="c27 c28"
|
||||
>
|
||||
Upload {number} asset to the library
|
||||
</span>
|
||||
</button>
|
||||
From computer form
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user