refactor: j couplings table scroll

cheminfo · Feb 21, 2024 · 7954f43 · 7954f43
1 parent 61069db
commit 7954f43
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 73 deletions.
diff --git a/src/component/1d/multiplicityTree/MultiplicityTree.tsx b/src/component/1d/multiplicityTree/MultiplicityTree.tsx
@@ -206,7 +206,7 @@ function Tree(props: TreeProps) {
             : treeLevelsColors[level % treeLevelsColors.length];
           return (
             <path
-              key={path.join(' ')}
+              key={path.join(`%${level}`)}
               d={path.join(' ')}
               fill="none"
               stroke={levelColor}

diff --git a/src/component/modal/editRange/EditRangeModal.tsx b/src/component/modal/editRange/EditRangeModal.tsx
@@ -22,16 +22,14 @@ import SignalsForm from './forms/components/SignalsForm';
 import editRangeFormValidation from './forms/validation/EditRangeValidation';
 
 const styles = css`
-  width: 600px;
-  height: 500px;
+  min-height: 500px;
   padding: 5px;
 
   button:focus {
     outline: none;
   }
 
   .header {
-    height: 24px;
     border-bottom: 1px solid #f0f0f0;
     display: flex;
     align-items: center;
@@ -54,6 +52,10 @@ const styles = css`
       }
     }
   }
+
+  .tabs .tab-list {
+    overflow-x: auto;
+  }
 `;
 
 interface EditRangeModalProps {

diff --git a/src/component/modal/editRange/forms/components/CouplingsTable.tsx b/src/component/modal/editRange/forms/components/CouplingsTable.tsx
@@ -71,7 +71,7 @@ function CouplingsTable({
     <div>
       <Button.Done
         fill="outline"
-        style={{ marginBottom: '10px' }}
+        style={{ overflow: 'auto' }}
         onClick={() =>
           push({
             multiplicity: translateMultiplet('m'),
@@ -84,69 +84,76 @@ function CouplingsTable({
           Add New Coupling
         </span>
       </Button.Done>
+      <div style={{ maxHeight: '300px', overflow: 'auto' }}>
+        <table css={CouplingsTableStyle}>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Multiplicity</th>
+              <th>J (Hz)</th>
+              <th>{''}</th>
+            </tr>
+          </thead>
 
-      <table css={CouplingsTableStyle}>
-        <tbody>
-          <tr>
-            <th>#</th>
-            <th>Multiplicity</th>
-            <th>J (Hz)</th>
-            <th>{''}</th>
-          </tr>
-          {couplingsList.map((_coupling, i) => (
-            <tr
-              // eslint-disable-next-line react/no-array-index-key
-              key={`editCouplings${values.activeTab}${i}`}
-            >
-              <td>{i + 1}</td>
-              <td>
-                <FormikSelect
-                  className="select-box"
-                  name={`signals.${values.activeTab}.js.${i}.multiplicity`}
-                  items={Multiplets}
-                  itemValueField="label"
-                  onChange={(value) => {
-                    multiplicityChangeHandler(
-                      value,
-                      `signals.${values.activeTab}.js.${i}.coupling`,
-                    );
-                  }}
-                />
-              </td>
-              <td>
-                <FormikInput
-                  name={`signals.${values.activeTab}.js.${i}.coupling`}
-                  type="number"
-                  placeholder={'J (Hz)'}
-                  disabled={!hasCouplingConstant(_coupling.multiplicity)}
-                  onFocus={onFocus}
-                  onBlur={onBlur}
-                  style={{
-                    input: {
-                      width: '100%',
+          <tbody style={{ overflow: 'auto' }}>
+            {couplingsList.map((_coupling, i) => (
+              <tr
+                // eslint-disable-next-line react/no-array-index-key
+                key={`editCouplings${values.activeTab}${i}`}
+              >
+                <td>{i + 1}</td>
+                <td>
+                  <FormikSelect
+                    className="select-box"
+                    name={`signals.${values.activeTab}.js.${i}.multiplicity`}
+                    items={Multiplets}
+                    itemValueField="label"
+                    onChange={(value) => {
+                      multiplicityChangeHandler(
+                        value,
+                        `signals.${values.activeTab}.js.${i}.coupling`,
+                      );
+                    }}
+                    style={{
                       height: '26px',
-                      padding: '0.25rem 0.5rem',
-                    },
-                  }}
-                  checkErrorAfterInputTouched={false}
-                />
-              </td>
-              <td>
-                <div style={{ display: 'flex' }}>
-                  <Button.Danger
-                    fill="clear"
-                    onClick={() => {
-                      remove(i);
                     }}
-                  >
-                    <FaRegTrashAlt title="Delete coupling" />
-                  </Button.Danger>
-                </div>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+                  />
+                </td>
+                <td>
+                  <FormikInput
+                    name={`signals.${values.activeTab}.js.${i}.coupling`}
+                    type="number"
+                    placeholder={'J (Hz)'}
+                    disabled={!hasCouplingConstant(_coupling.multiplicity)}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    style={{
+                      input: {
+                        width: '100%',
+                        height: '26px',
+                        padding: '0.25rem 0.5rem',
+                      },
+                    }}
+                    checkErrorAfterInputTouched={false}
+                  />
+                </td>
+                <td>
+                  <div style={{ display: 'flex' }}>
+                    <Button.Danger
+                      fill="clear"
+                      onClick={() => {
+                        remove(i);
+                      }}
+                    >
+                      <FaRegTrashAlt title="Delete coupling" />
+                    </Button.Danger>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

diff --git a/src/component/modal/editRange/forms/components/SignalFormTab.tsx b/src/component/modal/editRange/forms/components/SignalFormTab.tsx
@@ -26,14 +26,12 @@ function SignalFormTab({ onFocus, onBlur }: SignalFormTabProps) {
       <FieldArray
         name={`signals.${values.activeTab}.js`}
         render={({ push, remove }) => (
-          <div>
-            <CouplingsTable
-              push={push}
-              remove={remove}
-              onFocus={onFocus}
-              onBlur={onBlur}
-            />
-          </div>
+          <CouplingsTable
+            push={push}
+            remove={remove}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
         )}
       />
     </div>

diff --git a/src/component/modal/editRange/forms/components/SignalsForm.tsx b/src/component/modal/editRange/forms/components/SignalsForm.tsx
@@ -186,6 +186,7 @@ function SignalsForm({ range, preferences }: SignalsFormProps) {
               padding: '0 1.5rem',
               fontSize: '12px',
               color: '#28ba62',
+              textWrap: 'nowrap',
             }}
           >
             <FaPlus style={{ display: 'inline-block' }} />