Ability to remove samples

Author: LesserChance

src/component/Pad/LayerA.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 
 /* App imports */
 import { MidiMap } from 'util/const'
-import { updatePadIntProperty, updatePadSensitivity } from 'redux/actions'
+import { updatePadIntProperty, updatePadProperty, updatePadSensitivity } from 'redux/actions'
 
 /* Component imports */
 import SamplePlayerComponent from 'component/SamplePlayer'
@@ -21,7 +21,7 @@ const PadLayerAComponent = (props) => {
   let padName = MidiMap[pad.padType][0]
 
   return (
-    <div className="">
+    <div className="PadLayer">
       <div className="level">
         <div className="level-left">
           <div className="level-item">
@@ -40,7 +40,9 @@ const PadLayerAComponent = (props) => {
             <SamplePlayerComponent sampleFile={props.padSampleFile}>
               <SampleComponent
                 draggable={false}
+                removable={true}
                 fileName={pad.fileName}
+                removeSample={() => {props.removePadSample(null)}}
               />
             </SamplePlayerComponent>
           </div>
@@ -155,8 +157,8 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     updatePadIntProperty: (property, value) => {
       dispatch(updatePadIntProperty(ownProps.padId, property, value));
     },
-    updatePadStringProperty: (property, value) => {
-      dispatch(updatePadIntProperty(ownProps.padId, property, value));
+    removePadSample: (value) => {
+      dispatch(updatePadProperty(ownProps.padId, 'fileName', null));
     },
     updatePadSensitivity: (value) => {
       dispatch(updatePadSensitivity(ownProps.padId, value));

src/component/Pad/LayerB.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux'
 
 /* App imports */
-import { updatePadIntProperty } from 'redux/actions'
+import { updatePadIntProperty, updatePadProperty } from 'redux/actions'
 
 /* Component imports */
 import SamplePlayerComponent from 'component/SamplePlayer'
@@ -14,7 +14,7 @@ const PadLayerBComponent = (props) => {
   let pad = props.pad;
 
   return (
-    <div className="level layerB">
+    <div className="level PadLayer layerB">
       <div className="level-left">
         <div className="level-item">
           <span className="is-size-7 padName has-background-white-ter">
@@ -26,7 +26,9 @@ const PadLayerBComponent = (props) => {
           <SamplePlayerComponent sampleFile={props.sampleFile}>
             <SampleComponent
               draggable={false}
+              removable={true}
               fileName={pad.fileNameB}
+              removeSample={() => {props.removePadSample(null)}}
             />
           </SamplePlayerComponent>
         </div>
@@ -58,7 +60,10 @@ const mapDispatchToProps = (dispatch, ownProps) => {
   return {
     updatePadIntProperty: (property, value) => {
       dispatch(updatePadIntProperty(ownProps.padId, property, value));
-    }
+    },
+    removePadSample: (value) => {
+      dispatch(updatePadProperty(ownProps.padId, 'fileNameB', null));
+    },
   }
 }
 

src/component/Sample.js

@@ -27,20 +27,31 @@ const SampleComponent = (props) => {
   }
 
   return (
-    <div ref={drag}>
-      <a href="#" className="panel-block sample" onClick={(e) => {if(hasSample) {props.playSample()}}}>
-        <span className="panel-icon">
-          <i className={"glyphicon " + ((props.playingSample) ? "glyphicon-stop" : "glyphicon-play")} aria-hidden="true" />
-        </span>
-        <span className={((props.playingSample) ? "has-text-primary" : "")}>
-          { hasSample &&
-            <div dangerouslySetInnerHTML={{ __html: displayName }} />
-          }
-          { !hasSample &&
-            <span>&lt;Empty&gt;</span>
-          }
-        </span>
-      </a>
+    <div className="sampleContainer">
+
+      <div ref={drag} className="dragContainer">
+        <a href="#" className="panel-block sample" onClick={(e) => {if(hasSample) {props.playSample()}}}>
+          <span className="panel-icon">
+            <i className={"glyphicon " + ((props.playingSample) ? "glyphicon-stop" : "glyphicon-play")} aria-hidden="true" />
+          </span>
+          <span className={((props.playingSample) ? "has-text-primary" : "")}>
+            { hasSample &&
+              <div dangerouslySetInnerHTML={{ __html: displayName }} />
+            }
+            { !hasSample &&
+              <span>&lt;Empty&gt;</span>
+            }
+          </span>
+        </a>
+      </div>
+
+      <div className="removeSample">
+        { hasSample && props.removable &&
+          <a href="#" onClick={props.removeSample}>
+            <i className="glyphicon glyphicon-trash" aria-hidden="true" />
+          </a>
+        }
+      </div>
     </div>
   );
 }

src/css/Pad.css

@@ -1,7 +1,22 @@
-.Pad .panel-block.sample {
+.Pad .sampleContainer .dragContainer {
+  display: inline-block; }
+
+.Pad .sampleContainer .panel-block.sample {
   border-radius: 6px;
   padding: .2em .5em; }
 
+.Pad .sampleContainer .removeSample {
+  display: none;
+  margin-left: .2em; }
+
+.Pad .PadLayer .level-left {
+  padding-right: 2em; }
+
+.Pad .PadLayer .level-left:hover {
+  padding-right: .8em; }
+  .Pad .PadLayer .level-left:hover .removeSample {
+    display: inline-block; }
+
 .Pad .level {
   margin-bottom: 0 !important; }
 

src/css/Pad.scss

@@ -1,8 +1,31 @@
 .Pad {
-  .panel-block.sample {
-    border-radius: 6px;
-    padding: .2em .5em;
+
+  .sampleContainer {
+    .dragContainer {
+      display: inline-block;
+    }
+
+    .panel-block.sample {
+      border-radius: 6px;
+      padding: .2em .5em;
+    }
+
+    .removeSample {
+      display: none;
+      margin-left: .2em;
+    }
   }
+
+  .PadLayer .level-left{
+    padding-right: 2em;
+  }
+  .PadLayer .level-left:hover {
+    padding-right: .8em;
+    .removeSample {
+      display: inline-block;
+    }
+  }
+
   .level {
     margin-bottom:0 !important;
   }