Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(auto-complete): add props for popup container #558

Merged
merged 2 commits into from
Jun 11, 2021
Merged

feat(auto-complete): add props for popup container #558

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
893c60e
feat(auto-complete): add props for popup container
unix Jun 11, 2021
1231f81
docs(auto-complete): add attribute for popup container
unix Jun 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions components/auto-complete/auto-complete-dropdown.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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