Init UploadList design

Signed-off-by: soupette <cyril.lpz@gmail.com>

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 (
     <>
       <HeaderNavWrapper>
-        <HeaderModalTitle>
-          <div className="settings-tabs" style={{ left: 30 }}>
-            <ModalNav>
-              {links.map(link => {
-                const isActive = link === to;
+        <div className="settings-tabs" style={{ left: 30 }}>
+          <ModalNav>
+            {links.map(link => {
+              const isActive = link === to;
 
-                return (
-                  <NavLink
-                    key={link}
-                    to={link}
-                    isActive={isActive}
-                    isDisabled={link === 'url'}
-                    onClick={handleGoTo}
-                  />
-                );
-              })}
-            </ModalNav>
-          </div>
-          <hr />
-        </HeaderModalTitle>
+              return (
+                <NavLink
+                  key={link}
+                  to={link}
+                  isActive={isActive}
+                  isDisabled={link === 'url'}
+                  onClick={handleGoTo}
+                />
+              );
+            })}
+          </ModalNav>
+        </div>
+        <hr />
       </HeaderNavWrapper>
       <ModalForm>
         <ModalBody style={{ paddingTop: 35, paddingBottom: 18 }}>
           <div className="container-fluid">
             <div className="row">
               <div className="col-12">
-                {to === 'computer' && <InputFile />}
+                {to === 'computer' && <InputFile onChange={addFilesToUpload} />}
                 {to === 'url' && <div>COMING SOON</div>}
               </div>
             </div>
@@ -64,4 +57,12 @@ const UploadForm = () => {
   );
 };
 
+UploadForm.defaultProps = {
+  addFilesToUpload: () => {},
+};
+
+UploadForm.propTypes = {
+  addFilesToUpload: PropTypes.func,
+};
+
 export default UploadForm;

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;

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 (
+    <>
+      <HeaderWrapper>
+        <div>
+          <div className="assets-selected">
+            <span>4 selected assets</span>
+          </div>
+          <div className="infos">
+            <span>
+              Manage the assets before adding them to the Media Library
+            </span>
+          </div>
+        </div>
+        <div>
+          <Button type="button" color="primary">
+            Add More assets
+          </Button>
+        </div>
+      </HeaderWrapper>
+    </>
+  );
+};
+
+UploadList.defaultProps = {
+  filesToUpload: [],
+};
+
+UploadList.propTypes = {
+  filesToUpload: PropTypes.array,
+};
+
+export default UploadList;

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 (
     <Modal
       isOpen={isOpen}
@@ -37,12 +58,17 @@ const ModalStepper = ({ isOpen, onToggle }) => {
       <HeaderModal>
         <section>
           <HeaderModalTitle>
-            <FormattedMessage id={currentStepObject.headerTradId} />
+            <FormattedMessage id={headerTradId} />
           </HeaderModalTitle>
         </section>
       </HeaderModal>
-      {/* body */}
-      {Component && <Component />}
+      {/* body of the modal */}
+      {Component && (
+        <Component
+          addFilesToUpload={addFilesToUpload}
+          filesToUpload={filesToUpload}
+        />
+      )}
 
       <ModalFooter>
         <section>

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:

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',
   },
 };
 

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",