refactor: SegmentedTab onChange handler props

joinmarket-webui · Dec 15, 2023 · 19eff9e · 19eff9e
1 parent 876f575
commit 19eff9e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 23 deletions.
diff --git a/src/components/Earn.tsx b/src/components/Earn.tsx
@@ -259,9 +259,7 @@ const EarnForm = ({
                         value: OFFERTYPE_REL,
                       },
                     ]}
-                    onChange={(tab, checked) => {
-                      checked && setFieldValue('offertype', tab.value, true)
-                    }}
+                    onChange={(tab) => setFieldValue('offertype', tab.value, true)}
                     value={values.offertype}
                     disabled={isLoading || isSubmitting}
                   />

diff --git a/src/components/SegmentedTabs.module.css b/src/components/SegmentedTabs.module.css
@@ -1,31 +1,31 @@
-.segmented-tabs {
+.segmentedTabs {
   background-color: var(--bs-gray-300);
   border-radius: 0.25rem;
   padding: 0.25rem;
   width: 100%;
 }
 
-.segmented-tab > label {
+.segmentedTab > label {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-:root[data-theme='dark'] .segmented-tabs {
+:root[data-theme='dark'] .segmentedTabs {
   color: var(--bs-gray-100);
   background-color: var(--bs-gray-800);
 }
 
-.segmented-tab {
+.segmentedTab {
   flex: 1 1 0;
 }
 
-.segmented-tab input[type='radio'] {
+.segmentedTab input[type='radio'] {
   display: none;
 }
 
-.segmented-tab label {
+.segmentedTab label {
   background-color: white;
   padding: 0.25rem 1rem;
   border-radius: 0.1rem;
@@ -34,30 +34,30 @@
   text-align: center;
 }
 
-.segmented-tab input[type='radio']:disabled ~ label {
+.segmentedTab input[type='radio']:disabled ~ label {
   background-color: transparent;
   color: var(--bs-gray-600);
   opacity: 0.5;
 }
 
-:root[data-theme='dark'] .segmented-tab input[type='radio']:disabled ~ label {
+:root[data-theme='dark'] .segmentedTab input[type='radio']:disabled ~ label {
   color: var(--bs-gray-600);
   opacity: 0.5;
 }
 
-.segmented-tab input[type='radio']:not(:checked):not(:disabled) ~ label {
+.segmentedTab input[type='radio']:not(:checked):not(:disabled) ~ label {
   background-color: transparent;
 }
 
-.segmented-tab input[type='radio']:not(:disabled) ~ label {
+.segmentedTab input[type='radio']:not(:disabled) ~ label {
   cursor: pointer;
 }
 
-.segmented-tab input[type='radio']:checked:not(:disabled) ~ label {
+.segmentedTab input[type='radio']:checked:not(:disabled) ~ label {
   background-color: var(--bs-gray-100);
   box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);
 }
 
-:root[data-theme='dark'] .segmented-tab input[type='radio']:checked:not(:disabled) ~ label {
+:root[data-theme='dark'] .segmentedTab input[type='radio']:checked:not(:disabled) ~ label {
   background-color: var(--bs-gray-600);
 }
diff --git a/src/components/SegmentedTabs.tsx b/src/components/SegmentedTabs.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import { ChangeEvent } from 'react'
 import * as rb from 'react-bootstrap'
 import styles from './SegmentedTabs.module.css'
 
@@ -10,34 +10,34 @@ interface SegmentedTab {
 }
 
 function SegmentedTabFormCheck(props: rb.FormCheckProps) {
-  const _onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const _onChange = (e: ChangeEvent<HTMLInputElement>) => {
     e.stopPropagation()
     props.onChange && props.onChange(e)
   }
 
   return (
     <>
-      <rb.Form.Check {...props} bsPrefix={styles['segmented-tab']} type="radio" onChange={_onChange} />
+      <rb.Form.Check {...props} bsPrefix={styles.segmentedTab} type="radio" onChange={_onChange} />
     </>
   )
 }
 
 interface SegmentedTabsProps {
   name: string
   tabs: SegmentedTab[]
-  onChange: (tab: SegmentedTab, checked: boolean) => void
+  onChange: (tab: SegmentedTab) => void
   value?: SegmentedTabValue
   disabled?: boolean
 }
 
 export default function SegmentedTabs({ name, tabs, onChange, value, disabled = false }: SegmentedTabsProps) {
-  const _onChange = (e: React.ChangeEvent<HTMLInputElement>, tab: SegmentedTab) => {
+  const _onChange = (e: ChangeEvent<HTMLInputElement>, tab: SegmentedTab) => {
     e.stopPropagation()
-    onChange(tab, e.currentTarget.checked)
+    onChange(tab)
   }
 
   return (
-    <div className={['segmented-tabs-hook', styles['segmented-tabs']].join(' ')}>
+    <div className={`segmented-tabs-hook ${styles.segmentedTabs}`}>
       <div className="d-flex gap-1">
         {tabs.map((tab, index) => {
           return (

diff --git a/src/components/jar_details/JarDetailsOverlay.tsx b/src/components/jar_details/JarDetailsOverlay.tsx
@@ -325,7 +325,7 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
               <SegmentedTabs
                 name="jarDetailsTab"
                 tabs={tabs}
-                onChange={(tab, checked) => checked && setSelectedTab(tab.value)}
+                onChange={(tab) => setSelectedTab(tab.value)}
                 value={selectedTab}
               />
             </div>