WIP

alephium · Nov 10, 2023 · d3b5beb · d3b5beb
1 parent 8b92db6
commit d3b5beb
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 41 deletions.
diff --git a/src/components/Inputs/Select.tsx b/src/components/Inputs/Select.tsx
@@ -32,7 +32,6 @@ import {
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import CheckMark from '@/components/CheckMark'
 import { inputDefaultStyle, InputHeight, InputLabel, InputProps, inputStyling } from '@/components/Inputs'
 import Input from '@/components/Inputs/Input'
 import InputArea from '@/components/Inputs/InputArea'
@@ -248,13 +247,14 @@ interface SelectOptionsModalProps<T extends OptionValue> {
   onClose: () => void
   hookCoordinates?: Coordinates
   title?: string
-  optionRender?: (option: SelectOption<T>, isSelected?: boolean) => ReactNode
+  optionRender?: (option: SelectOption<T>, isSelected: boolean) => ReactNode
   onSearchInput?: (input: string) => void
   searchPlaceholder?: string
   showOnly?: T[]
   emptyListPlaceholder?: string
   parentSelectRef?: RefObject<HTMLDivElement | HTMLButtonElement>
   ListBottomComponent?: ReactNode
+  floatingOptions?: boolean
 }
 
 export function SelectOptionsModal<T extends OptionValue>({
@@ -270,7 +270,8 @@ export function SelectOptionsModal<T extends OptionValue>({
   showOnly,
   emptyListPlaceholder,
   parentSelectRef,
-  ListBottomComponent
+  ListBottomComponent,
+  floatingOptions
 }: SelectOptionsModalProps<T>) {
   const { t } = useTranslation()
   const optionSelectRef = useRef<HTMLDivElement>(null)
@@ -319,7 +320,12 @@ export function SelectOptionsModal<T extends OptionValue>({
         )
       }
     >
-      <OptionSelect title={title} aria-label={title} ref={optionSelectRef}>
+      <OptionSelect
+        title={title}
+        aria-label={title}
+        ref={optionSelectRef}
+        style={floatingOptions ? { gap: 10 } : undefined}
+      >
         {isEmpty ? (
           <OptionItem selected={false}>{emptyListPlaceholder}</OptionItem>
         ) : emptySearchResults ? (
@@ -336,18 +342,21 @@ export function SelectOptionsModal<T extends OptionValue>({
               selected={isSelected}
               focusable
               aria-label={option.label}
+              isFloating={floatingOptions}
             >
               {optionRender ? optionRender(option, isSelected) : option.label}
-              {isSelected && <CheckMark />}
             </OptionItem>
           )
         })}
         {ListBottomComponent && <div onClick={onClose}>{ListBottomComponent}</div>}
-        {invisibleOptions.map((option) => (
-          <OptionItem key={option.value} selected={false} invisible>
-            {optionRender ? optionRender(option) : option.label}
-          </OptionItem>
-        ))}
+        {invisibleOptions.map((option) => {
+          const isSelected = option.value === selectedOption?.value
+          return (
+            <OptionItem key={option.value} selected={isSelected} invisible>
+              {optionRender ? optionRender(option, isSelected) : option.label}
+            </OptionItem>
+          )
+        })}
       </OptionSelect>
     </Popup>
   )
@@ -421,7 +430,12 @@ export const OptionSelect = styled.div`
   flex-direction: column;
 `
 
-export const OptionItem = styled.button<{ selected: boolean; focusable?: boolean; invisible?: boolean }>`
+export const OptionItem = styled.button<{
+  selected: boolean
+  focusable?: boolean
+  invisible?: boolean
+  isFloating?: boolean
+}>`
   display: flex;
   justify-content: space-between;
   align-items: center;

diff --git a/src/components/Inputs/SelectOptionAddress.tsx b/src/components/Inputs/SelectOptionAddress.tsx
@@ -29,7 +29,7 @@ import { Address } from '@/types/addresses'
 
 interface SelectOptionAddressProps {
   address: Address
-  isSelected?: boolean
+  isSelected: boolean
   className?: string
 }
 
@@ -42,36 +42,35 @@ const SelectOptionAddress = ({ address, isSelected, className }: SelectOptionAdd
     <SelectOptionItemContent
       className={className}
       displaysCheckMarkWhenSelected
+      isSelected={isSelected}
       MainContent={
-        <Content>
-          <Header>
-            <AddressBadgeStyled addressHash={address.hash} disableA11y truncate />
-            <Group>
-              {t('Group')} {address.group}
-            </Group>
-          </Header>
-          <AssetList>
-            {assets.map((a) => (
-              <AssetBadge key={a.id} assetId={a.id} amount={a.balance} withBorder />
-            ))}
-          </AssetList>
-        </Content>
+        <Header>
+          <AddressBadgeStyled addressHash={address.hash} disableA11y truncate />
+          <Group>
+            {t('Group')} {address.group}
+          </Group>
+        </Header>
+      }
+      SecondaryContent={
+        <AssetList>
+          {assets.map((a) => (
+            <AssetBadge key={a.id} assetId={a.id} amount={a.balance} withBorder />
+          ))}
+        </AssetList>
       }
     />
   )
 }
 
 export default SelectOptionAddress
 
-const Content = styled.div`
-  display: flex;
-  flex-direction: column;
-`
-
 const Header = styled.div`
+  flex: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.border.secondary};
+  padding-bottom: var(--spacing-4);
 `
 
 const Group = styled.div`

diff --git a/src/components/Inputs/SelectOptionItemContent.tsx b/src/components/Inputs/SelectOptionItemContent.tsx
@@ -19,38 +19,52 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 import { ReactNode } from 'react'
 import styled from 'styled-components'
 
+import CheckMark from '@/components/CheckMark'
+
 interface SelectOptionItemContentProps {
   MainContent: ReactNode
+  isSelected: boolean
   SecondaryContent?: ReactNode
   className?: string
   displaysCheckMarkWhenSelected?: boolean
 }
 
 const SelectOptionItemContent = ({
-  MainContent: ContentLeft,
-  SecondaryContent: ContentRight,
+  MainContent: ContentTop,
+  SecondaryContent: ContentBottom,
+  isSelected,
   className
 }: SelectOptionItemContentProps) => (
   <div className={className}>
-    <OptionMainContent>{ContentLeft}</OptionMainContent>
-    <OptionSecondaryContent>{ContentRight}</OptionSecondaryContent>
+    <OptionMainContent>
+      {ContentTop}
+      {isSelected && (
+        <CheckMarkContainer>
+          <CheckMark />
+        </CheckMarkContainer>
+      )}
+    </OptionMainContent>
+    <OptionSecondaryContent>{ContentBottom}</OptionSecondaryContent>
   </div>
 )
 
 export default styled(SelectOptionItemContent)`
+  flex: 1;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: space-between;
-  gap: 20px;
-  width: ${({ displaysCheckMarkWhenSelected }) => (displaysCheckMarkWhenSelected ? 90 : 100)}%;
+  padding: var(--spacing-1);
 `
 
 const OptionMainContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
   font-weight: var(--fontWeight-semiBold);
 `
 
-const OptionSecondaryContent = styled.div`
-  * {
-    color: ${({ theme }) => theme.font.secondary} !important;
-  }
+const OptionSecondaryContent = styled.div``
+
+const CheckMarkContainer = styled.div`
+  margin-left: var(--spacing-3);
 `
diff --git a/src/modals/AddressSelectModal.tsx b/src/modals/AddressSelectModal.tsx
@@ -98,6 +98,7 @@ const AddressSelectModal = ({
             )
           : t('There are no available addresses.'))
       }
+      floatingOptions
     />
   )
 }