feat: 调整 absolute 下拉控制组件定位逻辑，增加容器在有无 relative 下的处理

cypress/e2e/AnimationList/test.absolute-relative.cy.ts

@@ -0,0 +1,106 @@
+describe('Select[clickAway]', () => {
+  it('下拉列表', () => {
+    cy.visit('/cn/components/Select?example=008-popupContainer-absolute-relative')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top - rect.height)).to.eq(3)
+          })
+        cy.get('@Container').click({ force: true })
+      })
+    })
+  })
+
+  it('上拉列表', () => {
+    cy.visit('/cn/components/Select?example=008-popupContainer-absolute-relative')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    cy.get('#apis').invoke('css', { display: 'none' })
+    cy.get('#api-Select').invoke('css', { display: 'none' })
+    cy.get('.doc-api-table').invoke('css', { display: 'none' })
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top)).to.eq(coRect.height + 3)
+          })
+      })
+    })
+  })
+})

cypress/e2e/AnimationList/test.absolute.cy.ts

@@ -0,0 +1,105 @@
+describe('Select[clickAway]', () => {
+  it('下拉列表', () => {
+    cy.visit('/cn/components/Select?example=007-popupContainer-absolute')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top - rect.height)).to.eq(3)
+          })
+      })
+    })
+  })
+
+  it('上拉列表', () => {
+    cy.visit('/cn/components/Select?example=007-popupContainer-absolute')
+
+    const components = [
+      {
+        selector: 'select',
+        dropDown: 'so-select-options',
+      },
+      {
+        selector: 'datepicker',
+        dropDown: 'so-datepicker-picker',
+      },
+      {
+        selector: 'cascader',
+        dropDown: 'so-cascader-options',
+      },
+      {
+        selector: 'treeselect',
+        dropDown: 'so-treeSelect-options',
+      },
+    ]
+
+    cy.get('#relative-app').as('App')
+    cy.get('#app-out-container').as('OutContainer')
+    cy.get('#app-root-container').as('Container')
+
+    cy.get('#app-out-container').scrollTo(50, 50)
+
+    cy.get('#apis').invoke('css', { display: 'none' })
+    cy.get('#api-Select').invoke('css', { display: 'none' })
+    cy.get('.doc-api-table').invoke('css', { display: 'none' })
+
+    components.forEach(async com => {
+      const { selector, dropDown } = com
+
+      cy.get(`.${selector}`).as(selector)
+      cy.get(`@${selector}`).click()
+      cy.get('@Container')
+        .find(`.${dropDown}`)
+        .should('have.length', 1)
+
+      cy.get(`.${selector}`).then($el => {
+        const rect = $el[0].getBoundingClientRect()
+        cy.get('@Container')
+          .find(`.${dropDown}`)
+          .then($co => {
+            const coRect = $co[0].getBoundingClientRect()
+            // 3 为固定间距
+            expect(Math.abs(coRect.top - rect.top)).to.eq(coRect.height + 3)
+          })
+      })
+    })
+  })
+})

site/chunks/Components/Select.js

@@ -416,6 +416,32 @@ const examples = [
     parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-006-open.tsx'),
 
   },
+  {
+    name: 'test-007-popupContainer-absolute',
+    isTs: true,
+    isTest: true,
+    title: locate(
+      '指定无定位属性容器后，下拉菜单是否正常定位 \n 检查容器位置是否在下拉菜单之下。该示例需要单独运行，否则 setConfig 会干扰其他示例',
+      ' \n '
+    ),
+    component: require('doc/pages/components/Select/test-007-popupContainer-absolute.tsx').default,
+    rawText: require('!raw-loader!doc/pages/components/Select/test-007-popupContainer-absolute.tsx'),
+    parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-007-popupContainer-absolute.tsx'),
+
+  },
+  {
+    name: 'test-008-popupContainer-absolute-relative',
+    isTs: true,
+    isTest: true,
+    title: locate(
+      '指定容器后，下拉菜单是否正常定位 \n 检查容器位置是否在下拉菜单之下。该示例需要单独运行，否则 setConfig 会干扰其他示例',
+      ' \n '
+    ),
+    component: require('doc/pages/components/Select/test-008-popupContainer-absolute-relative.tsx').default,
+    rawText: require('!raw-loader!doc/pages/components/Select/test-008-popupContainer-absolute-relative.tsx'),
+    parseTsText: require('!raw-loader!ts-loader!doc/pages/components/Select/test-008-popupContainer-absolute-relative.tsx'),
+
+  },
 ]
 
 const codes = undefined

site/pages/components/Select/test-007-popupContainer-absolute.tsx

@@ -0,0 +1,138 @@
+/**
+ * cn - 指定无定位属性容器后，下拉菜单是否正常定位
+ *    -- 检查容器位置是否在下拉菜单之下。该示例需要单独运行，否则 setConfig 会干扰其他示例
+ * en -
+ *    --
+ */
+
+import React, { useEffect, useState } from 'react'
+import { Select, setConfig, DatePicker, Cascader, TreeSelect } from 'shineout'
+
+type SelectItem = string
+const data: SelectItem[] = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']
+
+for (let i = 0; i < 50; i++) {
+  data.push(`color-${i}`)
+}
+
+const cascaderData = [
+  {
+    value: 'jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        children: [
+          {
+            value: 'jiangning',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'anhui',
+    children: [
+      {
+        value: 'hefei',
+        children: [
+          {
+            value: 'feidong',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const treeSelectData = [
+  {
+    id: '1',
+    title: '1',
+    children: [
+      { id: '1-1', title: '1-1', children: [{ id: '1-1-1', title: '1-1-1' }, { id: '1-1-2', title: '1-1-2' }] },
+      { id: '1-2', title: '1-2' },
+    ],
+  },
+  { id: '2', title: '2', children: [{ id: '2-1', title: '2-1' }, { id: '2-2', title: '2-2' }] },
+  { id: '3', title: '3', children: [{ id: '3-1', title: '3-1' }] },
+]
+
+const container: React.CSSProperties = {
+  padding: 10,
+  height: 100,
+  width: 300,
+  background: '#ebebeb',
+  overflow: 'auto',
+}
+
+const style: React.CSSProperties = {
+  width: 200,
+  marginInlineEnd: 12,
+  marginBottom: 8,
+  marginLeft: 100,
+}
+
+const App: React.FC = () => {
+  const [mount, setMount] = useState(false)
+
+  useEffect(() => {
+    setConfig({
+      popupContainer: document.getElementById('app-root-container') || document.body,
+    })
+
+    setMount(true)
+  }, [])
+
+  return (
+    <>
+      <div style={{ width: 200, height: 1000 }} />
+      <div style={container} id="app-out-container">
+        <section id="relative-app">
+          <div style={{ height: 200, width: 500 }} />
+          {mount && (
+            <Select itemsInView={50} height={500} className="select" style={style} keygen absolute data={data} />
+          )}
+          <br />
+          {mount && (
+            <DatePicker
+              className="datepicker"
+              absolute
+              format="x"
+              type="datetime"
+              defaultValue={new Date()}
+              style={style}
+              formatResult="YYYY-MM-DD HH:mm:ss"
+            />
+          )}
+          {mount && (
+            <Cascader
+              className="cascader"
+              style={style}
+              data={cascaderData}
+              absolute
+              keygen="value"
+              renderItem={n => `${n.value}`}
+            />
+          )}
+          {mount && (
+            <TreeSelect
+              className="treeselect"
+              absolute
+              clearable
+              style={style}
+              keygen="id"
+              renderItem={node => `node ${node.title}`}
+              data={treeSelectData}
+            />
+          )}
+          <br />
+          <div style={{ height: 500 }} />
+        </section>
+
+        <div id="app-root-container" />
+      </div>
+    </>
+  )
+}
+
+export default App