Merge branch 'development' of https://github.com/team-reactype/ReacType into development

Author: ShlomoPorges

src/actions/components.js

@@ -240,9 +240,9 @@ export const openExpansionPanel = component => ({
   payload: { component },
 });
 
-// export const deleteAllData = () => ({
-//   type: DELETE_ALL_DATA,
-// });
+export const deleteAllData = () => ({
+  type: DELETE_ALL_DATA,
+});
 
 export const deleteProp = propId => dispatch => {
   dispatch({ type: DELETE_PROP, payload: propId });

src/components/MainContainerHeader.jsx

@@ -56,6 +56,7 @@ const MainContainerHeader = (props) => {
     showGenerateAppModal,
     collapseColumn,
     rightColumnOpen,
+    clearWorkspace,
   } = props;
 
   return (
@@ -90,6 +91,16 @@ const MainContainerHeader = (props) => {
             >
               <GetAppIcon className={classes.light} />
             </Button>
+            <Button
+              color="secondary"
+              aria-label="Delete All"
+              variant="contained"
+              onClick={clearWorkspace}
+              disabled={totalComponents < 1}
+              className={classes.clearButton}
+            >
+              Clear workspace
+            </Button>
           </div>
         </Tooltip>
       </div>

src/containers/MainContainer.tsx

@@ -14,6 +14,7 @@ import {
   changeComponentFocusChild,
   deleteChild,
   deleteComponent,
+  deleteAllData,
   createApplication,
 } from '../actions/components';
 import KonvaStage from '../components/KonvaStage';
@@ -47,6 +48,7 @@ const mapDispatchToProps = dispatch => ({
         genOption,
       }),
     ),
+  deleteAllData: () => dispatch(deleteAllData()),
 });
 
 const mapStateToProps = store => ({
@@ -179,6 +181,20 @@ class MainContainer extends Component {
     });
   };
 
+  clearWorkspace = () => {
+    this.setState({
+      modal: createModal({
+        message: 'Are you sure want to delete all data?',
+        closeModal: this.closeModal,
+        secBtnLabel: 'Clear Workspace',
+        secBtnAction: () => {
+          this.props.deleteAllData();
+          this.closeModal();
+        },
+      }),
+    });
+  };
+
   render() {
     const { draggable, scaleX, scaleY, modal, toggleClass } = this.state;
     const {
@@ -212,6 +228,7 @@ class MainContainer extends Component {
           <MainContainerHeader
             // showImageDeleteModal={showImageDeleteModal}
             showGenerateAppModal={showGenerateAppModal}
+            clearWorkspace={this.clearWorkspace}
           />
 
           <div className="main" ref={main}>