feat: add scrollable props for DropdownContent (#710)

* feat: add scrollable props * feat: add description of scrollable props
kufu · Apr 2, 2020 · 9559404 · 9559404
1 parent 9eda849
commit 9559404
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 9 deletions.
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -117,6 +117,19 @@ storiesOf('Dropdown', module)
             </Dropdown>
           </Box>
         </li>
+        <li>
+          <Box>
+            <Dropdown>
+              <DropdownTrigger>
+                <SecondaryButton>Non-scroll dropdown</SecondaryButton>
+              </DropdownTrigger>
+              <DropdownContent scrollable={false}>
+                <ListMenu />
+                <ListMenu />
+              </DropdownContent>
+            </Dropdown>
+          </Box>
+        </li>
         <li>
           <Box>
             <ControllableDropdown />

diff --git a/src/components/Dropdown/DropdownContent.tsx b/src/components/Dropdown/DropdownContent.tsx
@@ -12,11 +12,13 @@ export const DropdownContentContext = React.createContext<{
 
 type Props = {
   controllable?: boolean
+  scrollable?: boolean
   className?: string
 }
 
 export const DropdownContent: React.FC<Props> = ({
   controllable = false,
+  scrollable = true,
   className = '',
   children,
 }) => {
@@ -27,7 +29,11 @@ export const DropdownContent: React.FC<Props> = ({
   return (
     <DropdownContentRoot>
       <DropdownContentContext.Provider value={{ onClickCloser }}>
-        <DropdownContentInner triggerRect={triggerRect} className={`${dropdownKey} ${className}`}>
+        <DropdownContentInner
+          triggerRect={triggerRect}
+          scrollable={scrollable}
+          className={`${dropdownKey} ${className}`}
+        >
           {controllable ? children : <DropdownCloser>{children}</DropdownCloser>}
         </DropdownContentInner>
       </DropdownContentContext.Provider>

diff --git a/src/components/Dropdown/DropdownContentInner.tsx b/src/components/Dropdown/DropdownContentInner.tsx
@@ -7,11 +7,17 @@ import { Rect, getContentBoxStyle, ContentBoxStyle } from './dropdownHelper'
 
 type Props = {
   triggerRect: Rect
+  scrollable: boolean
   children: React.ReactNode
   className: string
 }
 
-export const DropdownContentInner: FC<Props> = ({ triggerRect, children, className }) => {
+export const DropdownContentInner: FC<Props> = ({
+  triggerRect,
+  scrollable,
+  children,
+  className,
+}) => {
   const theme = useTheme()
   const [isMounted, setIsMounted] = useState(false)
   const [isActive, setIsActive] = useState(false)
@@ -53,6 +59,7 @@ export const DropdownContentInner: FC<Props> = ({ triggerRect, children, classNa
     <Wrapper
       ref={wrapperRef}
       contentBox={contentBox}
+      scrollable={scrollable}
       className={`${className} ${isActive ? 'active' : ''}`}
       themes={theme}
     >
@@ -61,8 +68,8 @@ export const DropdownContentInner: FC<Props> = ({ triggerRect, children, classNa
   )
 }
 
-const Wrapper = styled.div<{ themes: Theme; contentBox: ContentBoxStyle }>`
-  ${({ contentBox, themes }) => {
+const Wrapper = styled.div<{ themes: Theme; contentBox: ContentBoxStyle; scrollable: boolean }>`
+  ${({ contentBox, themes, scrollable }) => {
     return css`
       visibility: hidden;
       z-index: 99999;
@@ -78,7 +85,7 @@ const Wrapper = styled.div<{ themes: Theme; contentBox: ContentBoxStyle }>`
         visibility: visible;
       }
 
-      ${contentBox.maxHeight
+      ${contentBox.maxHeight && scrollable
         ? `
           overflow-y: scroll;
           max-height: ${contentBox.maxHeight};

diff --git a/src/components/Dropdown/README.md b/src/components/Dropdown/README.md
@@ -49,7 +49,8 @@ import { Dropdown, DropdownTrigger, DropdownContent, DropdownCloser } from 'smar
 
 **DropdownContent**
 
-| Name         | Required | Type                               | DefaultValue | Description                            |
-| ------------ | -------- | ---------------------------------- | ------------ | -------------------------------------- |
-| controllable | -        | **boolean** <br> true &#124; false | false        | Use controllable content when its true |
-| className    | -        | **string**                         | ''           | className of DropdownContent           |
+| Name         | Required | Type                               | DefaultValue | Description                                                                               |
+| ------------ | -------- | ---------------------------------- | ------------ | ----------------------------------------------------------------------------------------- |
+| controllable | -        | **boolean** <br> true &#124; false | false        | Use controllable content when its true                                                    |
+| scrollable   | -        | **boolean** <br> true &#124; false | true         | If true, the content will automatically be scrollable when the window size is not enough. |
+| className    | -        | **string**                         | ''           | className of DropdownContent                                                              |