mirror of
https://github.com/zhigang1992/react.git
synced 2026-03-29 15:59:33 +08:00
feat(auto-complete): add props for popup container (#558)
* feat(auto-complete): add props for popup container * docs(auto-complete): add attribute for popup container
This commit is contained in:
witt
@@ -9,6 +9,7 @@ interface Props {
|
||||
className?: string
|
||||
disableMatchWidth?: boolean
|
||||
dropdownStyle?: CSSProperties
|
||||
getPopupContainer?: () => HTMLElement | null
|
||||
}
|
||||
|
||||
const defaultProps = {
|
||||
@@ -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(() => {
|
||||
@@ -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}
|
||||
|
||||
@@ -45,6 +45,7 @@ interface Props {
|
||||
disableMatchWidth?: boolean
|
||||
disableFreeSolo?: boolean
|
||||
className?: string
|
||||
getPopupContainer?: () => HTMLElement | null
|
||||
}
|
||||
|
||||
const defaultProps = {
|
||||
@@ -104,6 +105,7 @@ const AutoComplete = React.forwardRef<
|
||||
dropdownStyle,
|
||||
disableMatchWidth,
|
||||
disableFreeSolo,
|
||||
getPopupContainer,
|
||||
...props
|
||||
},
|
||||
userRef: React.Ref<HTMLInputElement | null>,
|
||||
@@ -222,7 +224,8 @@ const AutoComplete = React.forwardRef<
|
||||
visible={visible}
|
||||
disableMatchWidth={disableMatchWidth}
|
||||
className={dropdownClassName}
|
||||
dropdownStyle={dropdownStyle}>
|
||||
dropdownStyle={dropdownStyle}
|
||||
getPopupContainer={getPopupContainer}>
|
||||
{autoCompleteItems}
|
||||
</AutoCompleteDropdown>
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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 })
|
||||
|
||||
@@ -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 | 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 | null></Code> | - | - |
|
||||
| ... | native props | `InputHTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title alias="AutoComplete.Option">AutoComplete.Item</Attributes.Title>
|
||||
|
||||
|
||||
@@ -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 | null></Code> | - | - |
|
||||
| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
|
||||
Reference in New Issue
Block a user