refactor: remove css from more components

cheminfo · Jan 15, 2025 · 0a615f2 · 0a615f2
1 parent e53b1ca
commit 0a615f2
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 77 deletions.
diff --git a/src/component/elements/dropDownButton/DropDownList.tsx b/src/component/elements/dropDownButton/DropDownList.tsx
@@ -1,41 +1,39 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 import type {
   DropDownListItem,
   DropDownListProps,
   ItemProps,
 } from './DropDownButton.js';
 
-const styles = {
-  ul: css`
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  `,
-  li: css`
-    text-align: center;
-    white-space: nowrap;
-    color: black;
-    border-bottom: 0.55px solid #f9f9f9;
+const Menu = styled.ul`
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+`;
+const MenuItem = styled.li`
+  text-align: center;
+  white-space: nowrap;
+  color: black;
+  border-bottom: 0.55px solid #f9f9f9;
 
-    &:last-of-type {
-      border-bottom: none;
-    }
+  &:last-of-type {
+    border-bottom: none;
+  }
 
-    &:hover {
-      background-color: #f6f6f6;
-    }
-  `,
-  label: css`
-    padding: 5px 20px;
-    display: block;
-  `,
-};
+  &:hover {
+    background-color: #f6f6f6;
+  }
+`;
+
+const Text = styled.span`
+  padding: 5px 20px;
+  display: block;
+`;
 
 interface InnerDropDownListProps<T>
   extends DropDownListProps<T>,
-    Required<ItemProps> {
+  Required<ItemProps> {
   onSelect: (index: number) => void;
 }
 
@@ -49,10 +47,9 @@ function DropDownList({
 }: InnerDropDownListProps<DropDownListItem>) {
   return (
     <div>
-      <ul css={styles.ul}>
+      <Menu>
         {data.map((item, index) => (
-          <li
-            css={styles.li}
+          <MenuItem
             key={item[itemKey]}
             onClick={(e) => {
               e.stopPropagation();
@@ -64,12 +61,10 @@ function DropDownList({
               cursor: 'pointer',
             }}
           >
-            {renderItem?.(item) || (
-              <span css={styles.label}>{item[labelKey]}</span>
-            )}
-          </li>
+            {renderItem?.(item) || <Text>{item[labelKey]}</Text>}
+          </MenuItem>
         ))}
-      </ul>
+      </Menu>
     </div>
   );
 }

diff --git a/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx b/src/component/panels/SummaryPanel/CorrelationTable/CorrelationTable.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type { Correlation } from 'nmr-correlation';
 import { useMemo } from 'react';
 
@@ -8,7 +7,7 @@ import { getLabelColor } from '../utilities/Utilities.js';
 import AdditionalColumnHeader from './AdditionalColumnHeader.js';
 import CorrelationTableRow from './CorrelationTableRow.js';
 
-const tableStyle = css`
+const Container = styled.div`
   overflow: auto;
   height: 100%;
   display: block;
@@ -90,8 +89,8 @@ function CorrelationTable({
           styleLabel={
             correlation.atomType === 'H'
               ? {
-                  color: getLabelColor(correlationsData, correlation),
-                }
+                color: getLabelColor(correlationsData, correlation),
+              }
               : {}
           }
           onSaveEditEquivalences={editEquivalencesSaveHandler}
@@ -131,7 +130,7 @@ function CorrelationTable({
   );
 
   return (
-    <div css={tableStyle}>
+    <Container>
       <table>
         <thead>
           <tr>
@@ -145,7 +144,7 @@ function CorrelationTable({
         </thead>
         <tbody>{rows}</tbody>
       </table>
-    </div>
+    </Container>
   );
 }
 

diff --git a/src/component/panels/SummaryPanel/SummaryPanel.tsx b/src/component/panels/SummaryPanel/SummaryPanel.tsx
@@ -1,5 +1,4 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import type {
   Correlation,
   Link,
@@ -51,38 +50,37 @@ export type OnEditCorrelationCallback = (
   options?: CorrelationOptions,
 ) => void;
 
-const panelStyle = css`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
   height: 100%;
   width: 100%;
+`;
 
-  .extra-header-content {
-    display: flex;
-    flex: 1;
-    justify-content: center;
-
-    .overview-container {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      margin-left: 10px;
-    }
+const InnerHeader = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+`;
+const OverviewContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+`;
 
-    .table-view-selection {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      margin-right: 2px;
-      white-space: nowrap;
+const SelectionContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 2px;
+  white-space: nowrap;
+`;
 
-      label {
-        font-size: 13px;
-      }
-    }
-  }
+const SelectionLabel = styled.label`
+  font-size: 13px;
 `;
 
 const EditLinkDialog = withDialog(EditLinkModal);
@@ -474,7 +472,7 @@ function SummaryPanel() {
 
   const total = correlationsData ? correlationsData.values.length : 0;
   return (
-    <div css={panelStyle}>
+    <Container>
       <EditLinkDialog onEdit={editCorrelationTableCellHandler} />
       <SetMolecularFormulaModal
         isOpen={dialog.molecularFormula}
@@ -506,13 +504,13 @@ function SummaryPanel() {
           },
         ]}
       >
-        <div className="extra-header-content">
-          <div className="overview-container">
+        <InnerHeader>
+          <OverviewContainer>
             <Overview correlationsData={correlationsData} />
-          </div>
-          <div className="table-view-selection">
+          </OverviewContainer>
+          <SelectionContainer>
             <span>
-              <label>View:</label>
+              <SelectionLabel>View:</SelectionLabel>
               <Select
                 onChange={(selection) => {
                   setSelectedAdditionalColumnsAtomType(selection);
@@ -532,8 +530,8 @@ function SummaryPanel() {
                 }}
               />
             </span>
-          </div>
-        </div>
+          </SelectionContainer>
+        </InnerHeader>
       </DefaultPanelHeader>
       <CorrelationTable
         correlationsData={correlationsData}
@@ -545,7 +543,7 @@ function SummaryPanel() {
         showProtonsAsRows={showProtonsAsRows}
         spectraData={spectraData}
       />
-    </div>
+    </Container>
   );
 }
 

diff --git a/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx b/src/component/panels/multipleAnalysisPanel/MultipleSpectraAnalysisPanel.tsx
@@ -130,7 +130,7 @@ function MultipleSpectraAnalysisPanelInner({
       css={[
         tablePanelStyle,
         isFlipped &&
-          css`
+        css`
             .table-container th {
               position: relative;
             }