feat(Select): Allow customisation of search input and option containe…

…r (#1437) (#295)
binance-chain-npm · Dec 3, 2021 · aac1b12 · aac1b12
1 parent caabdfc
commit aac1b12
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 19 deletions.
diff --git a/src/components/Select/component.tsx b/src/components/Select/component.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useTheme } from 'styled-components';
 
@@ -10,7 +10,13 @@ import { TextInput } from '../TextInput';
 import { Context } from './context';
 import { DropdownSelect } from './variant/DropdownSelect';
 import { ModalSelect } from './variant/ModalSelect';
-import { Container, StyledCard, StyledTextInput, OptionsContainer, OptionsTitle } from './styled';
+import {
+  Container,
+  StyledCard,
+  StyledTextInput,
+  OptionContainer as DefaultOptionContainer,
+  OptionTitle,
+} from './styled';
 import { useCurrentVariant } from './useCurrentVariant';
 
 export const VARIANTS = ['responsive', 'dropdown', 'modal'] as const;
@@ -24,12 +30,14 @@ export type Props = Pick<React.HTMLProps<HTMLElement>, 'children'> &
     variant?: Variant;
     title?: React.ReactNode;
     optionTitle?: React.ReactNode;
+    optionContainerElement?: React.ReactNode;
     optionContainerHeight?: number;
     optionItemHeight?: number;
     search?: React.ComponentProps<typeof TextInput>['value'];
     onChangeSearch?: React.ComponentProps<typeof TextInput>['onChange'];
     searchIcon?: boolean;
     searchPlaceholder?: string;
+    showSearch?: boolean;
     target: React.ReactNode;
     open?: boolean;
     onClose?: () => void;
@@ -39,12 +47,14 @@ export const Component = ({
   variant = 'responsive',
   children,
   optionTitle,
+  optionContainerElement: optionContainerElementProp,
   optionContainerHeight,
   optionItemHeight = DEFAULT_OPTION_ITEM_HEIGHT,
   search: searchProp,
   onChangeSearch,
   searchIcon = true,
   searchPlaceholder,
+  showSearch,
   'data-testid': testId,
   ...otherProps
 }: Props) => {
@@ -144,10 +154,19 @@ export const Component = ({
     [items],
   );
 
+  const OptionContainer = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
+    (props, ref) => {
+      if (React.isValidElement(optionContainerElementProp)) {
+        return React.cloneElement(optionContainerElementProp, { ...props, ref });
+      }
+      return <DefaultOptionContainer {...props} as="div" ref={ref} />;
+    },
+  );
+
   const content = useMemo(() => {
     return (
       <Container>
-        {filterable && (
+        {(filterable || showSearch) && (
           <StyledCard position="top">
             <StyledTextInput
               value={search}
@@ -166,34 +185,40 @@ export const Component = ({
           </StyledCard>
         )}
         <Space size="small" />
-        {optionTitle && <OptionsTitle>{optionTitle}</OptionsTitle>}
+        {optionTitle && <OptionTitle>{optionTitle}</OptionTitle>}
         <Space size="small" />
-        <OptionsContainer data-testid={buildTestId('options')}>
-          <FixedSizeList
-            width="100%"
-            height={Math.min(
-              optionContainerHeight ?? DEFAULT_OPTION_CONTAINER_HEIGHT,
-              itemCount * (optionItemHeight ?? DEFAULT_OPTION_ITEM_HEIGHT),
-            )}
-            itemCount={itemCount}
-            itemSize={optionItemHeight}
-          >
-            {row}
-          </FixedSizeList>
-        </OptionsContainer>
+        <OptionContainer data-testid={buildTestId('options')}>
+          {filterable ? (
+            <FixedSizeList
+              width="100%"
+              height={Math.min(
+                optionContainerHeight ?? DEFAULT_OPTION_CONTAINER_HEIGHT,
+                itemCount * (optionItemHeight ?? DEFAULT_OPTION_ITEM_HEIGHT),
+              )}
+              itemCount={itemCount}
+              itemSize={optionItemHeight}
+            >
+              {row}
+            </FixedSizeList>
+          ) : (
+            items
+          )}
+        </OptionContainer>
       </Container>
     );
   }, [
     buildTestId,
     filterable,
     itemCount,
+    items,
     optionContainerHeight,
     optionItemHeight,
     optionTitle,
     row,
     search,
     searchIcon,
     searchPlaceholder,
+    showSearch,
     theme.honeycomb.size.increased,
     theme.honeycomb.color.text.placeholder,
     updateSearch,

diff --git a/src/components/Select/styled.tsx b/src/components/Select/styled.tsx
@@ -21,13 +21,13 @@ export const StyledTextInput = styled(TextInput)`
   }
 `;
 
-export const OptionsTitle = styled.div`
+export const OptionTitle = styled.div`
   font-size: ${({ theme }) => em(theme.honeycomb.size.small)};
   color: ${({ theme }) => theme.honeycomb.color.text.masked};
   padding: 0 ${({ theme }) => em(theme.honeycomb.size.small, theme.honeycomb.size.small)};
 `;
 
-export const OptionsContainer = styled.div`
+export const OptionContainer = styled.div`
   background: ${({ theme }) => theme.honeycomb.color.bg.normal};
   border-top-left-radius: ${({ theme }) => em(theme.honeycomb.radius.increased)};
   border-top-right-radius: ${({ theme }) => em(theme.honeycomb.radius.increased)};