Skip to content

Commit

Permalink
feat(auto-complete): add props for popup container (#558)
Browse files Browse the repository at this point in the history 
* feat(auto-complete): add props for popup container

* docs(auto-complete): add attribute for popup container
  • Loading branch information
@unix
unix committed Aug 13, 2021
1 parent 5bbce55 commit 36037c8
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 22 deletions.
16 changes: 14 additions & 2 deletions components/auto-complete/auto-complete-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ interface Props {
className?: string
disableMatchWidth?: boolean
dropdownStyle?: CSSProperties
getPopupContainer?: () => HTMLElement | null
}

const defaultProps = {
Expand All @@ -21,7 +22,14 @@ export type AutoCompleteDropdownProps = Props & typeof defaultProps & NativeAttr

const AutoCompleteDropdown: React.FC<
React.PropsWithChildren<AutoCompleteDropdownProps>
> = ({ children, visible, className, dropdownStyle, disableMatchWidth }) => {
> = ({
children,
visible,
className,
dropdownStyle,
disableMatchWidth,
getPopupContainer,
}) => {
const theme = useTheme()
const { ref } = useAutoCompleteContext()
const isEmpty = useMemo(() => {
Expand All @@ -34,7 +42,11 @@ const AutoCompleteDropdown: React.FC<
}

return (
<Dropdown parent={ref} visible={visible} disableMatchWidth={disableMatchWidth}>
<Dropdown
parent={ref}
visible={visible}
disableMatchWidth={disableMatchWidth}
getPopupContainer={getPopupContainer}>
<div
className={`auto-complete-dropdown ${className}`}
style={dropdownStyle}
Expand Down
5 changes: 4 additions & 1 deletion components/auto-complete/auto-complete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ interface Props {
disableMatchWidth?: boolean
disableFreeSolo?: boolean
className?: string
getPopupContainer?: () => HTMLElement | null
}

const defaultProps = {
Expand Down Expand Up @@ -104,6 +105,7 @@ const AutoComplete = React.forwardRef<
dropdownStyle,
disableMatchWidth,
disableFreeSolo,
getPopupContainer,
...props
},
userRef: React.Ref<HTMLInputElement | null>,
Expand Down Expand Up @@ -222,7 +224,8 @@ const AutoComplete = React.forwardRef<
visible={visible}
disableMatchWidth={disableMatchWidth}
className={dropdownClassName}
dropdownStyle={dropdownStyle}>
dropdownStyle={dropdownStyle}
getPopupContainer={getPopupContainer}>
{autoCompleteItems}
</AutoCompleteDropdown>

Expand Down
14 changes: 14 additions & 0 deletions components/shared/dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import useResize from '../utils/use-resize'
import CSSTransition from './css-transition'
import useClickAnyWhere from '../utils/use-click-anywhere'
import useDOMObserver from '../utils/use-dom-observer'
import useWarning from 'components/utils/use-warning'

interface Props {
parent?: MutableRefObject<HTMLElement | null> | undefined
Expand Down Expand Up @@ -61,6 +62,19 @@ const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(
const [rect, setRect] = useState<ReactiveDomReact>(defaultRect)
if (!parent) return null

/* istanbul ignore next */
if (process.env.NODE_ENV !== 'production') {
if (getPopupContainer && getPopupContainer()) {
const el = getPopupContainer()
const style = window.getComputedStyle(el as HTMLDivElement)
if (style.position === 'static') {
useWarning(
'The element specified by "getPopupContainer" must have "position" set.',
)
}
}
}

const updateRect = () => {
const { top, left, right, width: nativeWidth } = getRect(parent, getPopupContainer)
setRect({ top, left, right, width: nativeWidth })
Expand Down
39 changes: 20 additions & 19 deletions pages/en-us/components/auto-complete.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,25 +291,26 @@ AutoComplete control of input field.
<Attributes edit="/pages/en-us/components/auto-complete.mdx">
<Attributes.Title>AutoComplete.Props</Attributes.Title>

| Attribute | Description | Type | Accepted values | Default |
| --------------------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | --------- |
| **options** | options of input | [AutoCompleteOptions](#type-autocompleteoptions) | - | - |
| **type** | input type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
| **initialValue** | initial value | `string` | - | - |
| **value** | current value | `string` | - | - |
| **width** | container width | `string` | - | - |
| **clearable** | show clear icon | `boolean` | - | `false` |
| **searching** | show loading icon for search | `boolean` | - | `false` |
| **onChange** | value of input is changed | `(value: string) => void` | - | - |
| **onSearch** | called when searching items | `(value: string) => void` | - | - |
| **onSelect** | called when a option is selected | `(value: string) => void` | - | - |
| **dropdownClassName** | className of dropdown box | `string` | - | - |
| **dropdownStyle** | style of dropdown box | `object` | - | - |
| **disableMatchWidth** | disable Option from follow parent width | `boolean` | - | `false` |
| **disableFreeSolo** | only values can be changed through Select | `boolean` | - | `false` |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
| Attribute | Description | Type | Accepted values | Default |
| --------------------- | ----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | --------- |
| **options** | options of input | [AutoCompleteOptions](#type-autocompleteoptions) | - | - |
| **type** | input type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
| **size** | input size | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
| **initialValue** | initial value | `string` | - | - |
| **value** | current value | `string` | - | - |
| **width** | container width | `string` | - | - |
| **clearable** | show clear icon | `boolean` | - | `false` |
| **searching** | show loading icon for search | `boolean` | - | `false` |
| **onChange** | value of input is changed | `(value: string) => void` | - | - |
| **onSearch** | called when searching items | `(value: string) => void` | - | - |
| **onSelect** | called when a option is selected | `(value: string) => void` | - | - |
| **dropdownClassName** | className of dropdown box | `string` | - | - |
| **dropdownStyle** | style of dropdown box | `object` | - | - |
| **disableMatchWidth** | disable Option from follow parent width | `boolean` | - | `false` |
| **disableFreeSolo** | only values can be changed through Select | `boolean` | - | `false` |
| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement` | - | `body` |
| **ref** | forwardRef | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |

<Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>

Expand Down
1 change: 1 addition & 0 deletions pages/zh-cn/components/auto-complete.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,7 @@ export const meta = {
| **dropdownStyle** | 自定义下拉框的样式 | `object` | - | - |
| **disableMatchWidth** | 禁止 Option 跟随父元素的宽度 | `boolean` | - | `false` |
| **disableFreeSolo** | 只允许通过 Select 事件更改值 (禁止 Input 输入随意值) | `boolean` | - | `false` |
| **getPopupContainer** | 下拉框渲染的父元素，默认是 `body` | `() => HTMLElement` | - | `body` |
| **ref** | 转发的原生输入框 Ref | <Code>Ref<HTMLInputElement &#124; null></Code> | - | - |
| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |

Expand Down

0 comments on commit 36037c8

Please sign in to comment.