From a739a7b3404a7ae4b82fd0760a16fcb88fc33b0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=9F=E8=83=9C=E4=BD=B3?= Date: Mon, 23 Sep 2024 16:29:54 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20"TreeSelect"=20?= =?UTF-8?q?=E7=9A=84=E4=B8=8B=E6=8B=89=E6=A1=86=E5=8A=A8=E6=80=81=E5=AE=BD?= =?UTF-8?q?=E5=BA=A6=EF=BC=88=E8=BE=93=E5=85=A5=E6=96=87=E5=AD=97=E6=90=9C?= =?UTF-8?q?=E7=B4=A2=EF=BC=89=E6=97=B6=E7=9A=84=E5=AE=9A=E4=BD=8D=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/pages/documentation/changelog/2.x.x.md | 1 + src/AnimationList/AbsoluteList.tsx | 42 +++++++++++++++------ 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/site/pages/documentation/changelog/2.x.x.md b/site/pages/documentation/changelog/2.x.x.md index 2d3c78f39..bbf294e56 100644 --- a/site/pages/documentation/changelog/2.x.x.md +++ b/site/pages/documentation/changelog/2.x.x.md @@ -3,6 +3,7 @@ ### 2.0.23-beta.7 - 修改 currentCSSZoom !== 1的判断方案 (< 2.0.23) +- 修复 "TreeSelect" 的下拉框动态宽度（输入文字搜索）时的定位问题 (< 2.0.23) ### 2.0.23-beta.6 diff --git a/src/AnimationList/AbsoluteList.tsx b/src/AnimationList/AbsoluteList.tsx index 927d23418..a8d1300c0 100644 --- a/src/AnimationList/AbsoluteList.tsx +++ b/src/AnimationList/AbsoluteList.tsx @@ -13,6 +13,7 @@ import { addZoomListener, removeZoomListener } from '../utils/zoom' import { isInDocument } from '../utils/dom/isInDocument' import { AbsoluteProps, GetAbsoluteProps } from './Props' import { getCurrentCSSZoom } from '../utils/dom/document' +import { addResizeObserver } from '../utils/dom/element' const PICKER_V_MARGIN = 4 let root: HTMLDivElement @@ -63,6 +64,8 @@ export default function(List: ComponentType) { el: HTMLElement + cancelResizeObserver: () => void + constructor(props: AbsoluteProps) { super(props) this.handleRef = this.handleRef.bind(this) @@ -74,7 +77,7 @@ export default function(List: ComponentType) { this.element = document.createElement('div') if (this.container) this.container.appendChild(this.element) if (props.getResetPosition) { - props.getResetPosition(this.resetPosition.bind(this)) + props.getResetPosition(this.resetPosition) } this.zoomChangeHandler = this.zoomChangeHandler.bind(this) } @@ -90,6 +93,16 @@ export default function(List: ComponentType) { if (this.props.absolute) { addZoomListener(this.zoomChangeHandler) } + + if (this.el) { + this.cancelResizeObserver = addResizeObserver( + this.el, + () => { + this.resetPosition(true) + }, + { direction: true } + ) + } } componentDidUpdate(prevProps: AbsoluteProps) { @@ -107,6 +120,7 @@ export default function(List: ComponentType) { if (this.container) { if (this.element && this.element.parentNode) this.element.parentNode.removeChild(this.element) } + if (this.cancelResizeObserver) this.cancelResizeObserver() } getContainer(element?: HTMLElement) { @@ -234,7 +248,7 @@ export default function(List: ComponentType) { return isRight } - resetPosition(clean?: boolean) { + resetPosition = (clean?: boolean) => { const { focus, parentElement } = this.props if (!this.el || !focus || (this.ajustdoc && !clean)) return const width = this.el.offsetWidth @@ -288,7 +302,7 @@ export default function(List: ComponentType) { } const mergeStyle = Object.assign({}, style, this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined) - return + return } render() { @@ -320,26 +334,30 @@ export default function(List: ComponentType) { const mergeClass = classnames(listClass('absolute-wrapper'), rootClass, autoClass) const { focus, style } = props.focus ? this.getStyle() : { style: this.lastStyle, focus: undefined } this.element.className = mergeClass - const mergeStyle = Object.assign( - {}, - style, - props.style, - this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined - ) + const overdocStyle = this.state.overdoc ? getOverDocStyle(this.isRight()) : undefined + const mergeStyle = Object.assign({}, style, props.style, overdocStyle) if (zIndex || typeof zIndex === 'number') mergeStyle.zIndex = parseInt((zIndex as unknown) as string, 10) + // console.log('======================') + // console.log('this.state.overdoc: >>', this.state.overdoc) + // console.log('overdocStyle: >>', overdocStyle) + // console.log('mergeStyle: >>', mergeStyle) + // console.log('======================') return ReactDOM.createPortal( , this.element ) } } - return compose(scrollConsumer, zIndexConsumer)(AbsoluteList) as ComponentType> + return compose( + scrollConsumer, + zIndexConsumer + )(AbsoluteList) as ComponentType> } From 58b105d8e7c05c7dfba3680bb34b7a9f3b58ee66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=9F=E8=83=9C=E4=BD=B3?= Date: Mon, 23 Sep 2024 16:37:57 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/chunks/Components/TreeSelect.js | 13 +++ .../TreeSelect/example-03-filter.tsx | 7 +- .../TreeSelect/test-01-absolute-big-width.tsx | 82 +++++++++++++++++++ 3 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 site/pages/components/TreeSelect/test-01-absolute-big-width.tsx diff --git a/site/chunks/Components/TreeSelect.js b/site/chunks/Components/TreeSelect.js index 94d13d5f5..559c74061 100644 --- a/site/chunks/Components/TreeSelect.js +++ b/site/chunks/Components/TreeSelect.js @@ -117,6 +117,19 @@ const examples = [ parseTsText: require('!raw-loader!doc/pages/components/TreeSelect/example-07-componentref.tsx'), }, + { + name: 'test-01-absolute-big-width', + isTs: true, + isTest: true, + title: locate( + 'absolute-position \n absolute-position', + 'absolute-position \n absolute-position' + ), + component: require('doc/pages/components/TreeSelect/test-01-absolute-big-width.tsx').default, + rawText: require('!raw-loader!doc/pages/components/TreeSelect/test-01-absolute-big-width.tsx'), + parseTsText: require('!raw-loader!doc/pages/components/TreeSelect/test-01-absolute-big-width.tsx'), + + }, ] const codes = undefined diff --git a/site/pages/components/TreeSelect/example-03-filter.tsx b/site/pages/components/TreeSelect/example-03-filter.tsx index 822a12e14..8c9c8a863 100644 --- a/site/pages/components/TreeSelect/example-03-filter.tsx +++ b/site/pages/components/TreeSelect/example-03-filter.tsx @@ -18,7 +18,11 @@ const data = [ 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-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' }, ], }, @@ -50,6 +54,7 @@ const App: React.FC = () => { keygen="id" renderItem={node => `node ${node.title}`} data={data} + absolute />
{ + const [single, setSingle] = React.useState('') + const [multi, setMulti] = React.useState([]) + const handleChangeSingle = v => { + setSingle(v) + } + const handleChangeMultiple = v => { + setMulti(v) + } + const handleFilter = (text: string) => d => d.title.indexOf(text) > -1 + return ( +
+ `node ${node.title}`} + data={data} + absolute + multiple + compressed + /> + {/*
+ `node ${node.title}`} + data={data} + absolute + /> */} +
+ ) +} +export default App From 6cb0c98d8e304d6887a0c700bb7e34899bf939fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BF=9F=E8=83=9C=E4=BD=B3?= Date: Tue, 24 Sep 2024 10:54:02 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0github=20actions?= =?UTF-8?q?=E6=9E=84=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/publish.yml | 40 +++++++++++++++++++++++ package.json | 5 +-- scripts/publish.js | 60 +++++++++++++++++++++++++++++++++++ 3 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/publish.yml create mode 100644 scripts/publish.js diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml new file mode 100644 index 000000000..3dddcd1eb --- /dev/null +++ b/.github/workflows/publish.yml @@ -0,0 +1,40 @@ +name: publish + +on: + push: + tags: + - 'version-*' +jobs: + build: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [18.19.1] + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 1 + ref: ${{ github.event.release.tag_name}} + + - name: Use Pnpm + uses: pnpm/action-setup@v4 + with: + version: 9.4.0 + + - name: dependencies + run: yarn + + - name: build + run: yarn build + + - name: set token + run: echo -e //registry.npmjs.org/:_authToken=${NPM_TOKEN} >> .npmrc + env: + NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }} + + - name: publish + run: yarn release + + diff --git a/package.json b/package.json index 74e201434..e6184b9ee 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,10 @@ "build-es5": "node scripts/build-es5.js", "build-css": "node scripts/build-css.js", "build-esm": "node scripts/build-esm.js", - "build": "npm-run-all build-*", + "build": "NODE_OPTIONS=--openssl-legacy-provider npm-run-all build-*", "cypress:open": "cross-env NODE_ENV=development cypress open", - "cypress:run": "cross-env NODE_ENV=development cypress run --browser chrome" + "cypress:run": "cross-env NODE_ENV=development cypress run --browser chrome", + "release": "node scripts/publish.js" }, "sideEffects": [ "*.less" diff --git a/scripts/publish.js b/scripts/publish.js new file mode 100644 index 000000000..17ff671e9 --- /dev/null +++ b/scripts/publish.js @@ -0,0 +1,60 @@ +/* eslint-disable import/no-dynamic-require */ +const path = require('path') +const fs = require('fs') +const { exec } = require('child_process') + +const mianPackage = require(path.resolve(__dirname, '../package.json')) +const { version } = mianPackage + +// 获取version中的 tag 比如 2.0.0-alpha.1 中的 alpha +let tag = (version.split('-')[1] || '').split('.')[0] || 'latest-2' +if (tag === 'rc') { + tag = 'next-2' +} +const mainVersion = version.split('.')[0] +if (mainVersion !== '2') { + console.error('version 不是 2.x.x') + process.exit(1) +} + +console.log('version', version) +console.log('tag', tag) + +const validateFile = () => { + const distPath = path.resolve(__dirname, `../publish/dist`) + if (!fs.existsSync(distPath)) { + console.error(`${distPath} 不存在`) + process.exit(1) + } + const esPath = path.resolve(__dirname, `../publish/es/index.js`) + const cjsPath = path.resolve(__dirname, `../publish/lib/index.js`) + if (!fs.existsSync(esPath) || !fs.existsSync(cjsPath)) { + console.error(`${esPath} 或 ${cjsPath} 不存在`) + process.exit(1) + } + const umdPath = path.resolve(__dirname, `../publish/dist/shineout.min.js`) + if (!fs.existsSync(umdPath)) { + console.error(`${umdPath} 不存在`) + process.exit(1) + } +} + +const publishPackage = () => { + const distPath = path.resolve(__dirname, `../publish`) + exec(`npm publish ${distPath} --access public${tag ? ` --tag ${tag}` : ''}`, (error, stdout) => { + if (error) { + console.error(error) + process.exit(1) + return + } + console.log(stdout) + }) +} + +try { + validateFile() + publishPackage() +} catch (error) { + console.error(error) + process.exit(1) +}