From 3c14b0a0466a6d8ed2a2d37b26490225a4f7f50b Mon Sep 17 00:00:00 2001 From: soupette Date: Tue, 18 Feb 2020 18:05:52 +0100 Subject: [PATCH] Init UploadList design Signed-off-by: soupette --- .../admin/src/components/UploadForm/index.js | 57 ++++++++++--------- .../components/UploadList/HeaderWrapper.js | 17 ++++++ .../admin/src/components/UploadList/index.js | 40 +++++++++++++ .../src/containers/ModalStepper/index.js | 38 +++++++++++-- .../src/containers/ModalStepper/reducer.js | 17 +++++- .../containers/ModalStepper/utils/stepper.js | 19 ++++--- .../admin/src/translations/en.json | 1 + 7 files changed, 146 insertions(+), 43 deletions(-) create mode 100644 packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js create mode 100644 packages/strapi-plugin-upload/admin/src/components/UploadList/index.js diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js index f59d57c16a..23f0843222 100644 --- a/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js +++ b/packages/strapi-plugin-upload/admin/src/components/UploadForm/index.js @@ -1,18 +1,13 @@ import React, { useReducer } from 'react'; -// import PropTypes from 'prop-types'; -import { - HeaderModalTitle, - HeaderNavWrapper, - ModalBody, - ModalForm, -} from 'strapi-helper-plugin'; +import PropTypes from 'prop-types'; +import { HeaderNavWrapper, ModalBody, ModalForm } from 'strapi-helper-plugin'; import ModalNav from '../ModalNav'; import NavLink from '../NavLink'; import InputFile from '../InputFile'; import init from './init'; import reducer, { initialState } from './reducer'; -const UploadForm = () => { +const UploadForm = ({ addFilesToUpload }) => { const [reducerState, dispatch] = useReducer(reducer, initialState, init); const { to } = reducerState.toJS(); const links = ['computer', 'url']; @@ -27,33 +22,31 @@ const UploadForm = () => { return ( <> - -
- - {links.map(link => { - const isActive = link === to; +
+ + {links.map(link => { + const isActive = link === to; - return ( - - ); - })} - -
-
- + return ( + + ); + })} + +
+
- {to === 'computer' && } + {to === 'computer' && } {to === 'url' &&
COMING SOON
}
@@ -64,4 +57,12 @@ const UploadForm = () => { ); }; +UploadForm.defaultProps = { + addFilesToUpload: () => {}, +}; + +UploadForm.propTypes = { + addFilesToUpload: PropTypes.func, +}; + export default UploadForm; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js new file mode 100644 index 0000000000..4be9ac2cb7 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/HeaderWrapper.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; +import { HeaderNavWrapper } from 'strapi-helper-plugin'; + +const Wrapper = styled(HeaderNavWrapper)` + padding-top: 27px; + font-size: 12px; + + .assets-selected { + padding-top: 7px; + line-height: 18px; + } + .infos { + color: #9ea7b8; + } +`; + +export default Wrapper; diff --git a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js new file mode 100644 index 0000000000..fe93143cd7 --- /dev/null +++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button } from '@buffetjs/core'; +import HeaderWrapper from './HeaderWrapper'; + +const UploadList = ({ filesToUpload }) => { + console.log(filesToUpload); + + return ( + <> + +
+
+ 4 selected assets +
+
+ + Manage the assets before adding them to the Media Library + +
+
+
+ +
+ + + ); +}; + +UploadList.defaultProps = { + filesToUpload: [], +}; + +UploadList.propTypes = { + filesToUpload: PropTypes.array, +}; + +export default UploadList; diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js index 4fb9d0a763..07759caab2 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js @@ -16,9 +16,17 @@ import reducer, { initialState } from './reducer'; const ModalStepper = ({ isOpen, onToggle }) => { const { formatMessage } = useGlobalContext(); const [reducerState, dispatch] = useReducer(reducer, initialState, init); - const { currentStep } = reducerState.toJS(); - const currentStepObject = stepper[currentStep]; - const { Component } = currentStepObject; + const { currentStep, filesToUpload } = reducerState.toJS(); + const { Component, headerTradId, next, prev } = stepper[currentStep]; + + const addFilesToUpload = ({ target: { value } }) => { + dispatch({ + type: 'ADD_FILES_TO_UPLOAD', + filesToUpload: value, + }); + + goTo(next); + }; const handleClosed = () => { dispatch({ @@ -26,6 +34,19 @@ const ModalStepper = ({ isOpen, onToggle }) => { }); }; + // FIXME: when back button needed + // eslint-disable-next-line no-unused-vars + const goBack = () => { + goTo(prev); + }; + + const goTo = to => { + dispatch({ + type: 'GO_TO', + to, + }); + }; + return ( {
- +
- {/* body */} - {Component && } + {/* body of the modal */} + {Component && ( + + )}
diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js index 854c8ac46a..fb3a80e9c4 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/reducer.js @@ -1,11 +1,26 @@ import { fromJS } from 'immutable'; const initialState = fromJS({ - currentStep: 'browse', + // currentStep: 'browse', + currentStep: 'upload', + filesToUpload: [], }); const reducer = (state, action) => { switch (action.type) { + case 'ADD_FILES_TO_UPLOAD': + return state + .update('filesToUpload', list => + list.concat( + Object.keys(action.filesToUpload).reduce( + (acc, current) => [...acc, action.filesToUpload[current]], + [] + ) + ) + ) + .update('currentStep', () => action.nextStep); + case 'GO_TO': + return state.update('currentStep', () => action.to); case 'RESET_PROPS': return initialState; default: diff --git a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js index b475ce4aa8..b90ad78c85 100644 --- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js +++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js @@ -1,25 +1,28 @@ import UploadForm from '../../../components/UploadForm'; +import UploadList from '../../../components/UploadList'; import getTrad from '../../../utils/getTrad'; const stepper = { browse: { + Component: UploadForm, + generateFooter: () => [], + headerTradId: getTrad('modal.header.browse'), prev: null, next: 'upload', - Component: UploadForm, - headerTradId: getTrad('modal.header.browse'), - generateFooter: () => [], }, upload: { - prev: 'browse', - next: null, - Component: null, + Component: UploadList, + headerTradId: getTrad('modal.header.select-files'), generateFooter: () => [], + next: null, + prev: 'browse', }, 'edit-new': { - prev: 'upload', - next: null, Component: null, + headerTradId: 'coming soon', generateFooter: () => [], + next: null, + prev: 'upload', }, }; diff --git a/packages/strapi-plugin-upload/admin/src/translations/en.json b/packages/strapi-plugin-upload/admin/src/translations/en.json index 20017afb3e..2d5b632b91 100644 --- a/packages/strapi-plugin-upload/admin/src/translations/en.json +++ b/packages/strapi-plugin-upload/admin/src/translations/en.json @@ -9,6 +9,7 @@ "list.assets-empty.title": "There is no asset yet", "list.assets-empty.subtitle": "Add a first one to the list.", "modal.header.browse": "Upload assets", + "modal.header.select-files": "Selected files", "modal.nav.computer": "from computer", "modal.nav.url": "from url", "plugin.name": "Media Library",