Merge pull request #90 from unix/select

fix(select): limit the maximum height of the dropdown-menu

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)

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 {

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>

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>