Refactored Melody Editor to only use MUI components. #164

stylesuxx · Jan 12, 2022 · bc59178 · bc59178
1 parent 73a4ea3
commit bc59178
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 316 deletions.
diff --git a/src/Components/Input/LabeledSelect/index.jsx b/src/Components/Input/LabeledSelect/index.jsx
@@ -54,9 +54,10 @@ function LabeledSelect({
         variant="standard"
       >
 
-        <InputLabel id={`${label}-select-label`}>
-          {label}
-        </InputLabel>
+        { label &&
+          <InputLabel id={`${label}-select-label`}>
+            {label}
+          </InputLabel>}
 
         <Select />
       </FormControl>

diff --git a/src/Components/MelodyEditor/MelodyElement/index.jsx b/src/Components/MelodyEditor/MelodyElement/index.jsx
@@ -9,6 +9,13 @@ import React, {
   useImperativeHandle,
   forwardRef,
 } from 'react';
+
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
 import './style.scss';
 
 const MelodyElement = forwardRef(({
@@ -201,35 +208,33 @@ const MelodyElement = forwardRef(({
   }
 
   return (
-    <div className="esc-melody-wrapper">
-      <div className="esc-melody">
+    <div className="esc-melody">
+      <Stack spacing={1}>
         <header>
-          <div className="index">
-            <h4>
-              {label}
-            </h4>
-          </div>
-
-          <div className="default-btn">
-            <button
+          <Typography>
+            {label}
+          </Typography>
+
+          <ButtonGroup>
+            <Button
               className="play"
               disabled={!isPlayable || disabled}
               onClick={playing ? handleStopMelody : handlePlayMelody}
-              type="button"
+              variant='outlined'
             >
               {playing ? t('common:melodyEditorStop') : t('common:melodyEditorPlay')}
-            </button>
+            </Button>
 
             { !dummy &&
-              <button
+              <Button
                 className={`accept ${isAccepted ? 'accepted' : ''}`}
                 disabled={!isValid || playing || disabled}
                 onClick={handleAcceptMelody}
-                type="button"
+                variant='outlined'
               >
                 {t('common:melodyEditorAccept')}
-              </button>}
-          </div>
+              </Button>}
+          </ButtonGroup>
         </header>
 
         <div className="editor-wrapper">
@@ -243,7 +248,7 @@ const MelodyElement = forwardRef(({
             value={currentMelody}
           />
         </div>
-      </div>
+      </Stack>
     </div>
   );
 });

diff --git a/src/Components/MelodyEditor/MelodyElement/style.scss b/src/Components/MelodyEditor/MelodyElement/style.scss
@@ -1,75 +1,36 @@
-.esc-melody-wrapper {
-  width: 50%;
+.esc-melody {
+  header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
 
-  .esc-melody {
-    flex: 1;
-    margin: 10px;
-    position: relative;
+  .editor-wrapper {
+    border: 1px solid silver;
+    padding: 5px;
+    display: flex;
 
-    header {
-      padding-bottom: 5px;
-      margin-bottom: 10px;
-      border-bottom: 1px solid silver;
-      display: flex;
-      justify-content: space-between;
+    .editor {
       width: 100%;
+      font-family: monospace;
 
-      .default-btn {
-        width: auto;
-        display: flex;
-
-        button {
-          margin-left: 10px;
-          width: 100px;
-        }
-
-        button.accepted {
-          background: var(--color-tertiary);
-          color: white;
-
-          &[disabled] {
-            cursor: default;
-            opacity: 0.5;
-          }
-        }
+      mark {
+        background: #FFCCCB;
       }
 
-      .index {
-        flex: 1;
-        h4 {
-          padding-top: 5px;
-          font-size: 1.17em;
+      &.playing {
+        mark {
+          background: #CCFFCB;
         }
       }
-    }
 
-    .editor-wrapper {
-      border: 1px solid silver;
-      padding: 5px;
-      display: flex;
-
-      .editor {
+      textarea {
         width: 100%;
-        font-family: monospace;
-
-        mark {
-          background: #FFCCCB;
-        }
-
-        &.playing {
-          mark {
-            background: #CCFFCB;
-          }
-        }
-
-        textarea {
-          width: 100%;
-          resize: none;
-          border: 0px;
+        resize: none;
+        border: 0px;
 
-          &[disabled] {
-            opacity: 0.75;
-          }
+        &[disabled] {
+          opacity: 0.75;
         }
       }
     }

diff --git a/src/Components/MelodyEditor/__tests__/index.test.jsx b/src/Components/MelodyEditor/__tests__/index.test.jsx
@@ -334,9 +334,10 @@ describe('MelodyEditor', () => {
     userEvent.click(screen.getByText(/common:melodyEditorSave/i));
     expect(onSave).not.toHaveBeenCalled();
 
-    expect(screen.getByTestId('saveMelodyName')).toBeInTheDocument();
+    const element = screen.getAllByRole('textbox')[0];
+    expect(element).toBeInTheDocument();
 
-    fireEvent.change(screen.getByTestId('saveMelodyName'), {
+    fireEvent.change(element, {
       target: {
         name: "",
         value: "TestName",