From 4c914bd5b78a1c7571103e16eda1b97a52506e67 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sun, 12 Apr 2020 08:16:12 +0800
Subject: [PATCH] fix(select): limit the maximum height of the dropdown-menu

---
 components/select/select-dropdown.tsx | 24 ++++++++++++++++++++----
 components/select/select.tsx          |  9 +++++++--
 pages/en-us/components/select.mdx     |  2 ++
 pages/zh-cn/components/select.mdx     |  2 ++
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/components/select/select-dropdown.tsx b/components/select/select-dropdown.tsx
index a466773..a91b67b 100644
--- a/components/select/select-dropdown.tsx
+++ b/components/select/select-dropdown.tsx
@@ -1,26 +1,42 @@
 import React from 'react'
 import useTheme from '../styles/use-theme'
+import withDefaults from '../utils/with-defaults'
 import { useSelectContext } from './select-context'
 import Dropdown from '../shared/dropdown'
 
 interface Props {
   visible: boolean
+  className?: string
+  dropdownStyle?: object
 }
 
-const SelectDropdown: React.FC<React.PropsWithChildren<Props>> = ({
-  visible, children,
+const defaultProps = {
+  className: '',
+  dropdownStyle: {},
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type SelectDropdownProps = Props & typeof defaultProps & NativeAttrs
+
+const SelectDropdown: React.FC<React.PropsWithChildren<SelectDropdownProps>> = ({
+  visible, children, className, dropdownStyle,
 }) => {
   const theme = useTheme()
   const { ref } = useSelectContext()
 
   return (
     <Dropdown parent={ref} visible={visible}>
-      <div className="select-dropdown">
+      <div className={`select-dropdown ${className}`} style={dropdownStyle}>
         {children}
         <style jsx>{`
         .select-dropdown {
           border-radius: ${theme.layout.radius};
           box-shadow: ${theme.expressiveness.shadowLarge};
+          background-color: ${theme.palette.background};
+          max-height: 15rem;
+          overflow-y: auto;
+          overflow-anchor: none;
+          padding: ${theme.layout.gapQuarter} 0;
         }
       `}</style>
       </div>
@@ -28,4 +44,4 @@ const SelectDropdown: React.FC<React.PropsWithChildren<Props>> = ({
   )
 }
 
-export default SelectDropdown
+export default withDefaults(SelectDropdown, defaultProps)
diff --git a/components/select/select.tsx b/components/select/select.tsx
index 521b999..20d83f9 100644
--- a/components/select/select.tsx
+++ b/components/select/select.tsx
@@ -19,6 +19,8 @@ interface Props {
   onChange?: (value: string) => void
   pure?: boolean
   className?: string
+  dropdownClassName?: string
+  dropdownStyle?: object
 }
 
 const defaultProps = {
@@ -34,7 +36,8 @@ export type SelectProps = Props & typeof defaultProps & NativeAttrs
 
 const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   children, size, disabled, initialValue: init, value: customValue,
-  icon: Icon, onChange, className, pure, placeholder, ...props
+  icon: Icon, onChange, className, pure, placeholder, dropdownClassName,
+  dropdownStyle, ...props
 }) => {
   const theme = useTheme()
   const ref = useRef<HTMLDivElement>(null)
@@ -81,7 +84,9 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
       <div className={`select ${className}`} ref={ref} onClick={clickHandler} {...props}>
         {!value && <span className="value placeholder">{placeholder}</span>}
         {value && <span className="value">{selectedChild}</span>}
-        <SelectDropdown visible={visible}>{children}</SelectDropdown>
+        <SelectDropdown visible={visible}
+          className={dropdownClassName}
+          dropdownStyle={dropdownStyle}>{children}</SelectDropdown>
         {!pure && <div className="icon"><Icon /></div>}
         <style jsx>{`
           .select {
diff --git a/pages/en-us/components/select.mdx b/pages/en-us/components/select.mdx
index f95c232..904bc7c 100644
--- a/pages/en-us/components/select.mdx
+++ b/pages/en-us/components/select.mdx
@@ -83,6 +83,8 @@ Display a dropdown list of items.
 | **pure** | remove icon component | `boolean` | - | `false` |
 | **disabled** | disable current radio | `boolean` | - | `false` |
 | **onChange** | selected value | `(val: string) => void` | - | - |
+| **dropdownClassName** | className of dropdown menu | `string` | - | - |
+| **dropdownStyle** | style of dropdown menu | `object` | - | - |
 | ... | native props | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - |
 
 <Attributes.Title>Select.Option.Props</Attributes.Title>
diff --git a/pages/zh-cn/components/select.mdx b/pages/zh-cn/components/select.mdx
index 1c2d6c0..c09ec77 100644
--- a/pages/zh-cn/components/select.mdx
+++ b/pages/zh-cn/components/select.mdx
@@ -82,6 +82,8 @@ export const meta = {
 | **pure** | 隐藏右侧图标组件 | `boolean` | - | `false` |
 | **disabled** | 禁用所有的交互 | `boolean` | - | `false` |
 | **onChange** | 选项被选中所触发的事件 | `(val: string) => void` | - | - |
+| **dropdownClassName** | 下拉框的自定义类名 | `string` | - | - |
+| **dropdownStyle** | 下拉框的自定义样式 | `object` | - | - |
 | ... | 原生属性 | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - |
 
 <Attributes.Title>Select.Option.Props</Attributes.Title>