feat(dropdown): allow dropdown to set the specified container (#344)

unix · web-flow · commit 4125e6f0a358 · 2020-07-21T21:38:17.000+08:00
* feat(dropdown): allow dropdown to set the specified container

* test(modal): update snapshots

* docs(select): add example for custom popup container

* fix(dropdown): fix type of getPopupContainer

* test(dropdown): add testcase for specified container rendering
diff --git a/components/modal/__tests__/__snapshots__/index.test.tsx.snap b/components/modal/__tests__/__snapshots__/index.test.tsx.snap
@@ -94,6 +94,7 @@ exports[`Modal should render correctly 1`] = `
           margin: 0 -16pt;
           padding: 16pt 16pt 8pt;
           overflow-y: auto;
+          position: relative;
         }
 
         .content > :global(*:first-child) {
diff --git a/components/modal/modal-content.tsx b/components/modal/modal-content.tsx
@@ -26,6 +26,7 @@ const ModalContent: React.FC<ModalContentProps> = ({ className, children, ...pro
           margin: 0 -${theme.layout.gap};
           padding: ${theme.layout.gap} ${theme.layout.gap} ${theme.layout.gapHalf};
           overflow-y: auto;
+          position: relative;
         }
 
         .content > :global(*:first-child) {
diff --git a/components/select/select-dropdown.tsx b/components/select/select-dropdown.tsx
@@ -9,6 +9,7 @@ interface Props {
   className?: string
   dropdownStyle?: object
   disableMatchWidth?: boolean
+  getPopupContainer?: () => HTMLElement | null
 }
 
 const defaultProps = {
@@ -25,12 +26,17 @@ const SelectDropdown: React.FC<React.PropsWithChildren<SelectDropdownProps>> = (
   className,
   dropdownStyle,
   disableMatchWidth,
+  getPopupContainer,
 }) => {
   const theme = useTheme()
   const { ref } = useSelectContext()
 
   return (
-    <Dropdown parent={ref} visible={visible} disableMatchWidth={disableMatchWidth}>
+    <Dropdown
+      parent={ref}
+      visible={visible}
+      disableMatchWidth={disableMatchWidth}
+      getPopupContainer={getPopupContainer}>
       <div className={`select-dropdown ${className}`} style={dropdownStyle}>
         {children}
         <style jsx>{`
diff --git a/components/select/select.tsx b/components/select/select.tsx
@@ -28,6 +28,7 @@ interface Props {
   dropdownClassName?: string
   dropdownStyle?: object
   disableMatchWidth?: boolean
+  getPopupContainer?: () => HTMLElement | null
 }
 
 const defaultProps = {
@@ -60,6 +61,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
   dropdownClassName,
   dropdownStyle,
   disableMatchWidth,
+  getPopupContainer,
   ...props
 }) => {
   const theme = useTheme()
@@ -148,7 +150,8 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
           visible={visible}
           className={dropdownClassName}
           dropdownStyle={dropdownStyle}
-          disableMatchWidth={disableMatchWidth}>
+          disableMatchWidth={disableMatchWidth}
+          getPopupContainer={getPopupContainer}>
           {children}
         </SelectDropdown>
         {!pure && (
diff --git a/components/shared/__tests__/dropdown.test.tsx b/components/shared/__tests__/dropdown.test.tsx
@@ -164,4 +164,24 @@ describe('Dropdown', () => {
 
     expect(() => wrapper.unmount()).not.toThrow()
   })
+
+  it('should render to specified container', () => {
+    const Mock: React.FC<{}> = () => {
+      const ref = useRef<HTMLDivElement>(null)
+      const customContainer = useRef<HTMLDivElement>(null)
+      return (
+        <div>
+          <div ref={customContainer} id="custom" />
+          <div ref={ref}>
+            <Dropdown parent={ref} visible getPopupContainer={() => customContainer.current}>
+              <span>test-value</span>
+            </Dropdown>
+          </div>
+        </div>
+      )
+    }
+    const wrapper = mount(<Mock />)
+    const customContainer = wrapper.find('#custom')
+    expect(customContainer.html()).toContain('dropdown')
+  })
 })
diff --git a/components/shared/dropdown.tsx b/components/shared/dropdown.tsx
@@ -10,6 +10,7 @@ interface Props {
   parent?: MutableRefObject<HTMLElement | null> | undefined
   visible: boolean
   disableMatchWidth?: boolean
+  getPopupContainer?: () => HTMLElement | null
 }
 
 interface ReactiveDomReact {
@@ -26,31 +27,48 @@ const defaultRect: ReactiveDomReact = {
   width: 0,
 }
 
-const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact => {
+const getOffset = (el?: HTMLElement | null | undefined) => {
+  if (!el)
+    return {
+      top: 0,
+      left: 0,
+    }
+  const { top, left } = el.getBoundingClientRect()
+  return { top, left }
+}
+
+const getRect = (
+  ref: MutableRefObject<HTMLElement | null>,
+  getContainer?: () => HTMLElement | null,
+): ReactiveDomReact => {
   if (!ref || !ref.current) return defaultRect
   const rect = ref.current.getBoundingClientRect()
+  const container = getContainer ? getContainer() : null
+  const scrollElement = container || document.documentElement
+  const { top: offsetTop, left: offsetLeft } = getOffset(container)
+
   return {
     ...rect,
     width: rect.width || rect.right - rect.left,
-    top: rect.bottom + document.documentElement.scrollTop,
-    left: rect.left + document.documentElement.scrollLeft,
+    top: rect.bottom + scrollElement.scrollTop - offsetTop,
+    left: rect.left + scrollElement.scrollLeft - offsetLeft,
   }
 }
 
 const Dropdown: React.FC<React.PropsWithChildren<Props>> = React.memo(
-  ({ children, parent, visible, disableMatchWidth }) => {
-    const el = usePortal('dropdown')
+  ({ children, parent, visible, disableMatchWidth, getPopupContainer }) => {
+    const el = usePortal('dropdown', getPopupContainer)
     const [rect, setRect] = useState<ReactiveDomReact>(defaultRect)
     if (!parent) return null
 
     const updateRect = () => {
-      const { top, left, right, width: nativeWidth } = getRect(parent)
+      const { top, left, right, width: nativeWidth } = getRect(parent, getPopupContainer)
       setRect({ top, left, right, width: nativeWidth })
     }
 
     useResize(updateRect)
     useClickAnyWhere(() => {
-      const { top, left } = getRect(parent)
+      const { top, left } = getRect(parent, getPopupContainer)
       const shouldUpdatePosition = top !== rect.top || left !== rect.left
       if (!shouldUpdatePosition) return
       updateRect()
diff --git a/components/utils/use-portal.ts b/components/utils/use-portal.ts
@@ -8,19 +8,24 @@ const createElement = (id: string): HTMLElement => {
   return el
 }
 
-const usePortal = (selectId: string = getId()): HTMLElement | null => {
+const usePortal = (
+  selectId: string = getId(),
+  getContainer?: () => HTMLElement | null,
+): HTMLElement | null => {
   const id = `zeit-ui-${selectId}`
   const { isBrowser } = useSSR()
   const [elSnapshot, setElSnapshot] = useState<HTMLElement | null>(
     isBrowser ? createElement(id) : null,
   )
 
   useEffect(() => {
-    const hasElement = document.querySelector<HTMLElement>(`#${id}`)
+    const customContainer = getContainer ? getContainer() : null
+    const parentElement = customContainer || document.body
+    const hasElement = parentElement.querySelector<HTMLElement>(`#${id}`)
     const el = hasElement || createElement(id)
 
     if (!hasElement) {
-      document.body.appendChild(el)
+      parentElement.appendChild(el)
     }
     setElSnapshot(el)
   }, [])
diff --git a/pages/en-us/components/select.mdx b/pages/en-us/components/select.mdx
@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Select, Spacer, Code } from 'components'
+import { Select, Spacer, Code, Modal, useModal, Button } from 'components'
 
 export const meta = {
   title: 'select',
@@ -142,25 +142,56 @@ Display a dropdown list of items.
 `}
 />
 
+<Playground
+  title="Set parent element"
+  desc="you can specify the container for drop-down box rendering."
+  scope={{ Select, Spacer, useModal, Modal, Button, Code }}
+  code={`
+() => {
+  const { visible, setVisible, bindings } = useModal()
+    return (
+      <>
+        <Button auto onClick={() => setVisible(true)}>Show Select</Button>
+        <Modal {...bindings}>
+          <Modal.Title>Modal</Modal.Title>
+          <Modal.Content id="customModalSelect">
+            <Select placeholder="Choose one" initialValue="1"
+              getPopupContainer={() => document.getElementById('customModalSelect')}>
+              <Select.Option value="1"><Code>TypeScript</Code></Select.Option>
+              <Select.Option value="2"><Code>JavaScript</Code></Select.Option>
+            </Select>
+            <p>Scroll through the content to see the changes.</p>
+            <div style={{ height: '1200px' }}></div>
+            <p>Scroll through the content to see the changes.</p>
+          </Modal.Content>
+          <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
+        </Modal>
+      </>
+    )
+}
+`}
+/>
+
 <Attributes edit="/pages/en-us/components/select.mdx">
 <Attributes.Title>Select.Props</Attributes.Title>
 
-| Attribute             | Description                             | Type                                                | Accepted values                   | Default         |
-| --------------------- | --------------------------------------- | --------------------------------------------------- | --------------------------------- | --------------- |
-| **value**             | selected value                          | `string`, `string[]`                                | -                                 | -               |
-| **initialValue**      | initial value                           | `string`, `string[]`                                | -                                 | -               |
-| **placeholder**       | placeholder string                      | `string`                                            | -                                 | -               |
-| **width**             | css width value of select               | `string`                                            | -                                 | `initial`       |
-| **size**              | select component size                   | `NormalSizes`                                       | [NormalSizes](#normalsizes)       | `medium`        |
-| **icon**              | icon component                          | `ComponentType`                                     | -                                 | `SVG Component` |
-| **pure**              | remove icon component                   | `boolean`                                           | -                                 | `false`         |
-| **multiple**          | support multiple selection              | `boolean`                                           | -                                 | `false`         |
-| **disabled**          | disable current radio                   | `boolean`                                           | -                                 | `false`         |
-| **onChange**          | selected value                          | <Code>(val: string &#124; string[]) => void </Code> | -                                 | -               |
-| **dropdownClassName** | className of dropdown menu              | `string`                                            | -                                 | -               |
-| **dropdownStyle**     | style of dropdown menu                  | `object`                                            | -                                 | -               |
-| **disableMatchWidth** | disable Option from follow Select width | `boolean`                                           | -                                 | `false`         |
-| ...                   | native props                            | `HTMLAttributes`                                    | `'name', 'alt', 'className', ...` | -               |
+| Attribute             | Description                                           | Type                                                | Accepted values                   | Default         |
+| --------------------- | ----------------------------------------------------- | --------------------------------------------------- | --------------------------------- | --------------- |
+| **value**             | selected value                                        | `string`, `string[]`                                | -                                 | -               |
+| **initialValue**      | initial value                                         | `string`, `string[]`                                | -                                 | -               |
+| **placeholder**       | placeholder string                                    | `string`                                            | -                                 | -               |
+| **width**             | css width value of select                             | `string`                                            | -                                 | `initial`       |
+| **size**              | select component size                                 | `NormalSizes`                                       | [NormalSizes](#normalsizes)       | `medium`        |
+| **icon**              | icon component                                        | `ComponentType`                                     | -                                 | `SVG Component` |
+| **pure**              | remove icon component                                 | `boolean`                                           | -                                 | `false`         |
+| **multiple**          | support multiple selection                            | `boolean`                                           | -                                 | `false`         |
+| **disabled**          | disable current radio                                 | `boolean`                                           | -                                 | `false`         |
+| **onChange**          | selected value                                        | <Code>(val: string &#124; string[]) => void </Code> | -                                 | -               |
+| **dropdownClassName** | className of dropdown menu                            | `string`                                            | -                                 | -               |
+| **dropdownStyle**     | style of dropdown menu                                | `object`                                            | -                                 | -               |
+| **disableMatchWidth** | disable Option from follow Select width               | `boolean`                                           | -                                 | `false`         |
+| **getPopupContainer** | dropdown render parent element, the default is `body` | `() => HTMLElement`                                 | -                                 | -               |
+| ...                   | 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

Original file line number	Diff line number	Diff line change
@@ -94,6 +94,7 @@ exports[`Modal should render correctly 1`] = `
`94`	`94`	`margin: 0 -16pt;`
`95`	`95`	`padding: 16pt 16pt 8pt;`
`96`	`96`	`overflow-y: auto;`
	`97`	`+ position: relative;`
`97`	`98`	`}`
`98`	`99`
`99`	`100`	`.content > :global(*:first-child) {`
Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,7 @@ const ModalContent: React.FC<ModalContentProps> = ({ className, children, ...pro`
`26`	`26`	`margin: 0 -${theme.layout.gap};`
`27`	`27`	`padding: ${theme.layout.gap} ${theme.layout.gap} ${theme.layout.gapHalf};`
`28`	`28`	`overflow-y: auto;`
	`29`	`+ position: relative;`
`29`	`30`	`}`
`30`	`31`
`31`	`32`	`.content > :global(*:first-child) {`