yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-15 11:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

go to pending modal on successfully drop file

Browse Source
This commit is contained in:
ronronscelestes 2022-04-04 15:12:21 +02:00
parent a6fecbb914
commit d5c74ba1ae
9 changed files with 126 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js
View File

@ -58,7 +58,7 @@ const LogoInput = ({ customLogo, defaultLogo }) => {
</CarouselInput>
<LogoModalStepper
onClose={() => setIsDialogOpen(false)}
initialStep={customLogo ? 'pending' : 'add'}
initialStep={customLogo ? 'pending' : 'upload'}
isOpen={isDialogOpen}
/>
</>

32
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/AddLogoDialog.js
View File

@ -1,23 +1,37 @@
import React from 'react';
import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
import { Box } from '@strapi/design-system/Box';
import { Divider } from '@strapi/design-system/Divider';
import FromComputerForm from './FromComputerForm';
const AddLogoDialog = () => {
const AddLogoDialog = ({ setLocalImage, goTo, next }) => {
const { formatMessage } = useIntl();
return (
<TabGroup label="How do you want to upload your assets?" variant="simple">
<Box paddingLeft={2} paddingRight={2}>
<Tabs>
<Tab>From computer</Tab>
<Tab>From URL</Tab>
<Tab>
{formatMessage({
id: 'Settings.application.customization.modal.upload.from-computer',
defaultMessage: 'From computer',
})}
</Tab>
<Tab>
{formatMessage({
id: 'Settings.application.customization.modal.upload.from-url',
defaultMessage: 'From URL',
})}
</Tab>
</Tabs>
<Divider />
</Box>
<TabPanels>
<TabPanel>
<FromComputerForm />
<FromComputerForm setLocalImage={setLocalImage} goTo={goTo} next={next} />
</TabPanel>
<TabPanel>TO DO</TabPanel>
</TabPanels>
@ -25,4 +39,14 @@ const AddLogoDialog = () => {
);
};
AddLogoDialog.defaultProps = {
next: null,
};
AddLogoDialog.propTypes = {
setLocalImage: PropTypes.func.isRequired,
goTo: PropTypes.func.isRequired,
next: PropTypes.string,
};
export default AddLogoDialog;

97
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromComputerForm.js
View File

@ -1,4 +1,5 @@
import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Box } from '@strapi/design-system/Box';
@ -14,7 +15,7 @@ const FileInput = styled(Box)`
opacity: 0;
`;
const FromComputerForm = () => {
const FromComputerForm = ({ setLocalImage, goTo, next }) => {
const { formatMessage } = useIntl();
const [dragOver, setDragOver] = useState(false);
const [fileError, setFileError] = useState(false);
@ -37,8 +38,9 @@ const FromComputerForm = () => {
}
try {
const fileToAsset = await parseFileMetadatas(file);
console.log(fileToAsset);
const asset = await parseFileMetadatas(file);
setLocalImage(asset);
goTo(next);
} catch (err) {
if (err.displayMessage) {
setFileError(formatMessage(err.displayMessage));
@ -77,47 +79,52 @@ const FromComputerForm = () => {
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
>
<Flex justifyContent="center">
<Flex direction="column">
<Icon
color="primary600"
width={`${60 / 16}rem`}
height={`${60 / 16}rem`}
as={PicturePlus}
/>
<Flex justifyContent="center" direction="column">
<Icon
color="primary600"
width={`${60 / 16}rem`}
height={`${60 / 16}rem`}
as={PicturePlus}
aria-hidden
/>
<Box paddingTop={3} paddingBottom={5}>
<Typography variant="delta">Drag & Drop here or</Typography>
</Box>
<Box paddingTop={3} paddingBottom={5}>
<Typography variant="delta" as="span">
Drag and Drop here or
</Typography>
</Box>
<FileInput
accept={ACCEPTED_FORMAT.map(format => `.${format}`)}
cursor="pointer"
as="input"
position="absolute"
left={0}
right={0}
bottom={0}
top={0}
width="100%"
type="file"
name="files"
tabIndex={-1}
zIndex={1}
onChange={handleChange}
ref={inputRef}
/>
<FileInput
accept={ACCEPTED_FORMAT.map(format => `.${format}`)}
cursor="pointer"
as="input"
position="absolute"
left={0}
right={0}
bottom={0}
top={0}
width="100%"
type="file"
name="files"
tabIndex={-1}
zIndex={1}
onChange={handleChange}
ref={inputRef}
/>
<Button type="button" onClick={handleClick}>
Browse files
</Button>
<Button type="button" onClick={handleClick}>
{formatMessage({
id: 'Settings.application.customization.modal.upload.cta.browse',
defaultMessage: 'Browse files',
})}
</Button>
<Box paddingTop={6}>
<Typography variant="pi" textColor="neutral600">
Max dimension: 750*750, Max size: TBC
</Typography>
</Box>
</Flex>
<Box paddingTop={6}>
<Typography variant="pi" textColor="neutral600">
{/* Add translation once we know more about max size */}
Max dimension: 750*750, Max size: TBC
</Typography>
</Box>
</Flex>
</Box>
{fileError && (
@ -133,4 +140,14 @@ const FromComputerForm = () => {
);
};
FromComputerForm.defaultProps = {
next: null,
};
FromComputerForm.propTypes = {
setLocalImage: PropTypes.func.isRequired,
goTo: PropTypes.func.isRequired,
next: PropTypes.string,
};
export default FromComputerForm;

2
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js
View File

@ -1,7 +1,7 @@
import React from 'react';
const PendingLogoDialog = () => {
return <div>PendingLogoDialog</div>;
return <div>PENDING DIALOG - TO DO</div>;
};
export default PendingLogoDialog;

23
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/index.js
View File

@ -1,5 +1,6 @@
import React, { useReducer, useEffect } from 'react';
import PropTypes from 'prop-types';
import { useIntl } from 'react-intl';
import {
ModalLayout,
ModalBody,
@ -11,15 +12,16 @@ import reducer, { initialState } from './reducer';
import stepper from './stepper';
const LogoModalStepper = ({ initialStep, isOpen, onClose }) => {
const [{ currentStep }, dispatch] = useReducer(reducer, initialState);
const { Component, modalTitle } = stepper[currentStep];
const [{ currentStep, localImage }, dispatch] = useReducer(reducer, initialState);
const { Component, modalTitle, next } = stepper[currentStep];
const { formatMessage } = useIntl();
useEffect(() => {
if (isOpen) {
goTo(initialStep);
}
// Disabling the rule because we just want to let the ability to open the modal
// at a specific step then we will let the stepper handle the navigation
// Disabling the rule because we just want to open the modal at a specific step
// then we let the stepper handle the navigation
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isOpen]);
@ -30,6 +32,13 @@ const LogoModalStepper = ({ initialStep, isOpen, onClose }) => {
});
};
const setLocalImage = asset => {
dispatch({
type: 'SET_LOCAL_IMAGE',
value: asset,
});
};
if (!isOpen) {
return null;
}
@ -37,12 +46,12 @@ const LogoModalStepper = ({ initialStep, isOpen, onClose }) => {
return (
<ModalLayout labelledBy="modal" onClose={onClose}>
<ModalHeader>
<Typography fontWeight="bold" as="h2" id="title">
{modalTitle}
<Typography fontWeight="bold" as="h2" id="modal">
{formatMessage(modalTitle)}
</Typography>
</ModalHeader>
<ModalBody>
<Component />
<Component setLocalImage={setLocalImage} localImage={localImage} goTo={goTo} next={next} />
</ModalBody>
<ModalFooter />
</ModalLayout>

7
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/reducer.js
View File

@ -8,7 +8,8 @@
import produce from 'immer';
const initialState = {
currentStep: 'add',
currentStep: 'upload',
localImage: undefined,
};
const reducer = (state = initialState, action) =>
@ -18,6 +19,10 @@ const reducer = (state = initialState, action) =>
draftState.currentStep = action.to;
break;
}
case 'SET_LOCAL_IMAGE': {
draftState.localImage = action.value;
break;
}
default: {
return draftState;
}

14
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/stepper.js
View File

@ -2,17 +2,23 @@ import AddLogoDialog from './AddLogoDialog';
import PendingLogoDialog from './PendingLogoDialog';
const stepper = {
add: {
upload: {
Component: AddLogoDialog,
modalTitle: 'Upload logo',
modalTitle: {
id: 'Settings.application.customization.modal.upload',
defaultMessage: 'Upload logo',
},
next: 'pending',
prev: null,
},
pending: {
Component: PendingLogoDialog,
modalTitle: 'Pending logo',
modalTitle: {
id: 'Settings.application.customization.modal.pending',
defaultMessage: 'Pending logo',
},
next: null,
prev: 'add',
prev: 'upload',
},
};

3
packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/parseFileMetadatas.js
View File

@ -34,9 +34,10 @@ const rawFileToAsset = rawFile => {
};
export const parseFileMetadatas = async file => {
const isFormatAuthorized = ACCEPTED_FORMAT.some(format => file.type.includes(format));
let error;
const isFormatAuthorized = ACCEPTED_FORMAT.some(format => file.type.includes(format));
if (!isFormatAuthorized) {
error = new Error('File format');
error.displayMessage = FILE_FORMAT_ERROR_MESSAGE;

5
packages/core/admin/admin/src/translations/en.json
View File

@ -103,6 +103,11 @@
"Settings.application.customization.carousel.title": "Logo",
"Settings.application.customization.carousel.change-action": "Change logo",
"Settings.application.customization.carousel-slide.label": "Logo slide",
"Settings.application.customization.modal.upload": "Upload logo",
"Settings.application.customization.modal.upload.from-computer": "From computer",
"Settings.application.customization.modal.upload.cta.browse": "Browse files",
"Settings.application.customization.modal.upload.from-url": "From URL",
"Settings.application.customization.modal.pending": "Pending logo",
"Settings.error": "Error",
"Settings.global": "Global Settings",
"Settings.permissions": "Administration panel",