From 3a79ca7ddf573c65756ba14bd1af5df5361906d9 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Thu, 27 Mar 2025 12:33:49 +0800 Subject: [PATCH 01/13] =?UTF-8?q?fix:=20popover=20=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E7=9A=84=E9=97=AE=E9=A2=98,=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=97=A0=E7=94=A8=E4=BB=A3=E7=A0=81=E5=92=8C=E6=97=A0?= =?UTF-8?q?=E7=94=A8=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/popover/demo.scss | 1 - src/packages/popover/demos/h5/demo3.tsx | 1 + src/packages/popover/demos/h5/demo4-1.tsx | 2 +- src/packages/popover/demos/taro/demo3.tsx | 1 + src/packages/popover/demos/taro/demo4-1.tsx | 2 +- src/packages/popover/doc.en-US.md | 3 -- src/packages/popover/doc.md | 3 -- src/packages/popover/doc.taro.md | 3 -- src/packages/popover/doc.zh-TW.md | 3 -- src/packages/popover/popover.scss | 47 +++++++++------------ src/packages/popover/popover.taro.tsx | 26 +++++------- src/packages/popover/popover.tsx | 33 +++++++-------- src/packages/popup/popup.scss | 6 +-- src/styles/variables.scss | 16 +------ 14 files changed, 55 insertions(+), 92 deletions(-) diff --git a/src/packages/popover/demo.scss b/src/packages/popover/demo.scss index ccd77f8fc9..a906a6ca71 100644 --- a/src/packages/popover/demo.scss +++ b/src/packages/popover/demo.scss @@ -46,5 +46,4 @@ .custom-color { --nutui-popover-text-color: rgb(255, 255, 255); --nutui-popover-content-background-color: rgb(255, 0, 0); - --nutui-popover-border-color: rgb(255, 0, 0); } diff --git a/src/packages/popover/demos/h5/demo3.tsx b/src/packages/popover/demos/h5/demo3.tsx index fabf593ee1..254b9bee81 100644 --- a/src/packages/popover/demos/h5/demo3.tsx +++ b/src/packages/popover/demos/h5/demo3.tsx @@ -56,6 +56,7 @@ const Demo3 = () => { justifyContent: 'center', alignItems: 'center', flexDirection: 'column', + flex: 1, } as any const selfContentDesc = { marginTop: '5px', diff --git a/src/packages/popover/demos/h5/demo4-1.tsx b/src/packages/popover/demos/h5/demo4-1.tsx index 0cced79b3d..a34542dbe2 100644 --- a/src/packages/popover/demos/h5/demo4-1.tsx +++ b/src/packages/popover/demos/h5/demo4-1.tsx @@ -12,7 +12,7 @@ const Demo41 = () => { const [baseDesc, setBaseDesc] = useState('') const [showPicker, setShowPicker] = useState(false) const [customPositon, setCustomPosition] = useState(false) - const [curPostion, setCurPostion] = useState('') + const [curPostion, setCurPostion] = useState('top') const columns = [ [ diff --git a/src/packages/popover/demos/taro/demo3.tsx b/src/packages/popover/demos/taro/demo3.tsx index 4ace92582e..d59154a94b 100644 --- a/src/packages/popover/demos/taro/demo3.tsx +++ b/src/packages/popover/demos/taro/demo3.tsx @@ -57,6 +57,7 @@ const Demo3 = () => { justifyContent: 'center', alignItems: 'center', flexDirection: 'column', + flex: 1, } as any const selfContentDesc = { marginTop: '5px', diff --git a/src/packages/popover/demos/taro/demo4-1.tsx b/src/packages/popover/demos/taro/demo4-1.tsx index 5d3f4d4326..775707da79 100644 --- a/src/packages/popover/demos/taro/demo4-1.tsx +++ b/src/packages/popover/demos/taro/demo4-1.tsx @@ -13,7 +13,7 @@ const Demo4 = () => { const [baseDesc, setBaseDesc] = useState('') const [showPicker, setShowPicker] = useState(false) const [customPositon, setCustomPosition] = useState(false) - const [curPostion, setCurPostion] = useState('') + const [curPostion, setCurPostion] = useState('top') const [showToast, SetShowToast] = useState(false) const columns = [ diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md index b74f299d7e..d8dea5399d 100644 --- a/src/packages/popover/doc.en-US.md +++ b/src/packages/popover/doc.en-US.md @@ -159,9 +159,6 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-popover-font-size | The font-size value of the popover content area | `12px` | | \--nutui-popover-text-color | Text color of options area | `$color-title` | | \--nutui-popover-content-background-color | The background color of the options area | `$white` | -| \--nutui-popover-hover-background-color | The background color of the finger click menu option | `#fff` | -| \--nutui-popover-hover-text-color | Text color for finger click menu options | `#1a1a1a` | -| \--nutui-popover-border-color | Arrow colors for top, bottom, left and right | `$white` | | \--nutui-popover-divider-color | The bottom border color of the options area | `$color-border` | | \--nutui-popover-disable-color | Option Disabled Colors | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` | diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index d95440c0ed..1408e3eedc 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -161,9 +161,6 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` | | \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` | | \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | -| \--nutui-popover-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` | -| \--nutui-popover-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` | -| \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色 | `$white` | | \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index fab25e83ab..b8c76e2afc 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -152,9 +152,6 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | \--nutui-popover-font-size | popover 内容区的 font-size 值 | `12px` | | \--nutui-popover-text-color | 选项区的文字颜色 | `$color-title` | | \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | -| \--nutui-popover-hover-background-color | 手指点击菜单选项选中的背景颜色 | `#fff` | -| \--nutui-popover-hover-text-color | 手指点击菜单选项选中的文字颜色 | `#1a1a1a` | -| \--nutui-popover-border-color | top、bottom、left 和 right 的箭头颜色 | `$white` | | \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | diff --git a/src/packages/popover/doc.zh-TW.md b/src/packages/popover/doc.zh-TW.md index f82646bc76..2271940120 100644 --- a/src/packages/popover/doc.zh-TW.md +++ b/src/packages/popover/doc.zh-TW.md @@ -161,9 +161,6 @@ PopoverList 屬性是一個由對象構成的數組，數組中的每個對象 | \--nutui-popover-font-size | popover 內容區的 font-size 值 | `12px` | | \--nutui-popover-text-color | 選項區的文字顏色 | `$color-title` | | \--nutui-popover-content-background-color | 選項區的背景顏色 | `$white` | -| \--nutui-popover-hover-background-color | 手指點擊菜單選項選中的背景顏色 | `#fff` | -| \--nutui-popover-hover-text-color | 手指點擊菜單選項選中的文字顏色 | `#1a1a1a` | -| \--nutui-popover-border-color | top、bottom、left 和 right 的箭頭顏色 | `$white` | | \--nutui-popover-divider-color | 選項區的底部 border 顏色 | `$color-border` | | \--nutui-popover-disable-color | 選項禁用的顏色 | `$color-text-disabled` | | \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` | diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 5b597c97a7..1fade301da 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -76,14 +76,14 @@ line-height: 28px; max-height: initial; overflow-y: initial; + padding: 0 $popover-padding; - .nut-popover-menu-item { + .nut-popover-item { display: flex; align-items: center; justify-content: center; - padding: 0 $popover-menu-item-padding; border-bottom: 1px solid $popover-divider-color; - max-width: $popover-menu-item-width; + max-width: $popover-item-width; word-wrap: break-word; &:last-child { @@ -91,48 +91,42 @@ border-bottom: none; } - &-icon { + &-icon, + &-action-icon { display: flex; justify-content: center; align-items: center; - width: 12px; - height: 12px; - font-size: 12px; + width: $font-size-s; + height: $font-size-s; + font-size: $font-size-s; .nut-icon { - width: 12px; - height: 12px; - font-size: 12px; + width: $font-size-s; + height: $font-size-s; + font-size: $font-size-s; } } + &-icon { + margin-right: $spacing-xxs; + } + &-name { width: calc(100% - 34px); word-break: keep-all; - margin: 0 8px 0 4px; flex: 1; } &-action-icon { - display: flex; - justify-content: center; - align-items: center; - width: 12px; - height: 12px; - font-size: 12px; color: $color-text; - .nut-icon { - width: 12px; - height: 12px; - font-size: 12px; - } + margin-left: $spacing-base; } - &.nut-popover-menu-disabled { + &.nut-popover-item-disabled { color: $popover-disable-color; cursor: not-allowed; } - &.nut-popover-menu-taroitem { + &.nut-popover-taroitem { display: flex; } } @@ -217,7 +211,7 @@ .nut-popover-content { background: $popover-text-color !important; color: $popover-content-background-color !important; - .nut-popover-menu-item { + .nut-popover-item { &-action-icon { color: rgba(255, 255, 255, 0.8); } @@ -228,7 +222,7 @@ [dir='rtl'] .nut-popover, .nut-rtl .nut-popover { .nut-popover-content { - .nut-popover-menu-item { + .nut-popover-item { &-name { margin-left: 0; margin-right: 4px; @@ -236,7 +230,6 @@ &-action-icon { right: auto; - left: $popover-menu-item-padding; } } &-top { diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 2c33febb6d..4210300c1a 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -33,7 +33,6 @@ const defaultProps = { offset: [0, 8], arrowOffset: 0, targetId: '', - className: '', showArrow: true, closeOnOutsideClick: true, closeOnActionClick: true, @@ -140,14 +139,14 @@ export const Popover: FunctionComponent< const clickAway = () => { if (closeOnOutsideClick) { - onClick && onClick() - onClose && onClose() + onClick?.() + onClose?.() } } const classes = classNames( + classPrefix, { - [`${classPrefix}`]: true, [`${classPrefix}-${theme}`]: theme === 'dark', }, className @@ -155,7 +154,8 @@ export const Popover: FunctionComponent< const popoverArrow = () => { const prefixCls = 'nut-popover-arrow' - return `${prefixCls} ${prefixCls}-${location.split('-')[0]} ${prefixCls}-${location}` + const direction = location.split('-')[0] + return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${location}` } const getRootPosition = () => { @@ -295,8 +295,8 @@ export const Popover: FunctionComponent< handleSelect(item, index)} > {item.icon && ( - - {item.icon} - + {item.icon} )} - - {item.name} - - {item.action && item.action.icon && ( + {item.name} + {item.action?.icon && ( item.action?.onClick?.(e)} > {item.action.icon} diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index 6f194dc6a4..e1607864fb 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -146,8 +146,8 @@ export const Popover: FunctionComponent< } const classes = classNames( + classPrefix, { - [`${classPrefix}`]: true, [`${classPrefix}-${theme}`]: theme === 'dark', }, className @@ -155,7 +155,8 @@ export const Popover: FunctionComponent< const popoverArrow = () => { const prefixCls = 'nut-popover-arrow' - return `${prefixCls} ${prefixCls}-${location.split('-')[0]} ${prefixCls}-${location}` + const direction = location.split('-')[0] + return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${location}` } const getRootPosition = () => { @@ -249,11 +250,11 @@ export const Popover: FunctionComponent< const handleSelect = (item: PopoverList, index: number) => { if (!item.disabled) { - onSelect && onSelect(item, index) + onSelect?.(item, index) } if (closeOnActionClick) { - onClick && onClick() - onClose && onClose() + onClick?.() + onClose?.() } } return ( @@ -263,11 +264,11 @@ export const Popover: FunctionComponent< className="nut-popover-wrapper" ref={popoverRef} onClick={() => { - onClick && onClick() + onClick?.() if (!visible) { - onOpen && onOpen() + onOpen?.() } else { - onClose && onClose() + onClose?.() } }} style={style} @@ -301,8 +302,8 @@ export const Popover: FunctionComponent<
handleSelect(item, index)} > {item.icon && ( -
- {item.icon} -
+
{item.icon}
)} -
- {item.name} -
- {item.action && item.action.icon && ( +
{item.name}
+ {item.action?.icon && (
item.action?.onClick?.(e)} > {item.action.icon} diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index 51a352ad8a..1dd8ed0577 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -160,13 +160,13 @@ } } - &-default-enter-active { + &-none-enter-active { animation-fill-mode: both; animation-name: popup-scale-fade-in; animation-duration: $popup-animation-duration; } - &-default-exit-active { + &-none-exit-active { animation-fill-mode: both; animation-name: popup-scale-fade-out; animation-duration: $popup-animation-duration; @@ -323,7 +323,7 @@ animation-duration: $popup-animation-duration; } - &-default-exit-done, + &-none-exit-done, &-center-exit-done, &-left-exit-done, &-right-exit-done, diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9a609de4fa..007fe95ed1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1648,21 +1648,12 @@ $badge-outline-border: var( //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, $radius-xs) !default; -$popover-border-color: var(--nutui-popover-border-color, #ffffff) !default; $popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, #ffffff ) !default; $popover-text-color: var(--nutui-popover-text-color, $color-mask) !default; -$popover-hover-background-color: var( - --nutui-popover-hover-background-color, - #fff -) !default; -$popover-hover-text-color: var( - --nutui-popover-hover-text-color, - #1a1a1a -) !default; $popover-disable-color: var( --nutui-popover-disable-color, $color-text-disabled @@ -1671,11 +1662,8 @@ $popover-divider-color: var( --nutui-popover-divider-color, $color-border ) !default; -$popover-menu-item-padding: var( - --nutui-popover-menu-item-padding, - 8px -) !default; -$popover-menu-item-width: var(--nutui-popover-menu-item-width, 160px) !default; +$popover-padding: var(--nutui-popover-padding, 8px) !default; +$popover-item-width: var(--nutui-popover-item-width, 160px) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; From 1384e4b3ebca8cee94cc6712fe28af3bc8bdcc8b Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Thu, 27 Mar 2025 14:53:00 +0800 Subject: [PATCH 02/13] fix: position types --- .../popover/__tests__/popover.spec.tsx | 8 ++-- src/packages/popover/demos/h5/demo1.tsx | 4 +- src/packages/popover/demos/h5/demo2.tsx | 2 +- src/packages/popover/demos/h5/demo3.tsx | 3 +- src/packages/popover/demos/h5/demo4-1.tsx | 14 +++--- src/packages/popover/demos/h5/demo4.tsx | 21 ++++---- src/packages/popover/doc.md | 26 +++++----- src/packages/popover/popover.scss | 48 +++++++++---------- src/packages/popover/popover.tsx | 16 +++---- 9 files changed, 72 insertions(+), 70 deletions(-) diff --git a/src/packages/popover/__tests__/popover.spec.tsx b/src/packages/popover/__tests__/popover.spec.tsx index 44983b3641..5bd620ac52 100644 --- a/src/packages/popover/__tests__/popover.spec.tsx +++ b/src/packages/popover/__tests__/popover.spec.tsx @@ -172,14 +172,14 @@ test('render position fixed ', async () => {
) - const item = document.querySelectorAll('.nut-popover-menu-item-name') + const item = document.querySelectorAll('.nut-popover-item-name') fireEvent.click(item[0]) expect(click).toBeCalled() expect(close).toBeCalled() fireEvent.click(getByTestId('a')) await waitFor(() => { fireEvent.scroll(getByTestId('aa'), { target: { scrollTop: 10 } }) - const item1 = document.querySelectorAll('.nut-popover-menu-item-name') + const item1 = document.querySelectorAll('.nut-popover-item-name') expect(item1.length).toBe(3) }) }) @@ -193,7 +193,7 @@ test('should emit onchoose event when clicking the action', async () => { ) - const contentItem = document.querySelectorAll('.nut-popover-menu-item')[0] + const contentItem = document.querySelectorAll('.nut-popover-item')[0] fireEvent.click(contentItem) await waitFor(() => expect(choose.mock.calls[0][0].name).toEqual('option1')) await waitFor(() => expect(choose.mock.calls[0][1]).toBe(0)) @@ -208,7 +208,7 @@ test('should not emit select event when the action is disabled', async () => { ) - const contentItem = document.querySelectorAll('.nut-popover-menu-item')[0] + const contentItem = document.querySelectorAll('.nut-popover-item')[0] fireEvent.click(contentItem) await waitFor(() => expect(choose).not.toBeCalled()) }) diff --git a/src/packages/popover/demos/h5/demo1.tsx b/src/packages/popover/demos/h5/demo1.tsx index 990d0bfdcb..f71a3b86f4 100644 --- a/src/packages/popover/demos/h5/demo1.tsx +++ b/src/packages/popover/demos/h5/demo1.tsx @@ -21,7 +21,7 @@ const Demo1 = () => { { basic ? setBasic(false) : setBasic(true) @@ -35,7 +35,7 @@ const Demo1 = () => { visible={dark} list={itemList} theme="dark" - location="bottom-start" + location="bottom-left" onClick={() => { dark ? setDark(false) : setDark(true) }} diff --git a/src/packages/popover/demos/h5/demo2.tsx b/src/packages/popover/demos/h5/demo2.tsx index 913cd90498..19b63eb703 100644 --- a/src/packages/popover/demos/h5/demo2.tsx +++ b/src/packages/popover/demos/h5/demo2.tsx @@ -60,7 +60,7 @@ const Demo2 = () => { { showIcon ? setShowIcon(false) : setShowIcon(true) }} diff --git a/src/packages/popover/demos/h5/demo3.tsx b/src/packages/popover/demos/h5/demo3.tsx index 254b9bee81..8043217a61 100644 --- a/src/packages/popover/demos/h5/demo3.tsx +++ b/src/packages/popover/demos/h5/demo3.tsx @@ -69,10 +69,11 @@ const Demo3 = () => { <> { customized ? setCustomized(false) : setCustomized(true) }} - location="top-start" + location="top-left" className="customClass" > + { location="bottom-left" onClick={() => { dark ? setDark(false) : setDark(true) + setIndex(1) }} > - + ) } -export default Demo1 +export default Demo diff --git a/src/packages/popover/demos/h5/demo2.tsx b/src/packages/popover/demos/h5/demo2.tsx index 19b63eb703..000dc72386 100644 --- a/src/packages/popover/demos/h5/demo2.tsx +++ b/src/packages/popover/demos/h5/demo2.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import { Popover, Button, Space } from '@nutui/nutui-react' -import { Home, Cart, Location, Check } from '@nutui/icons-react' +import { Home, Check } from '@nutui/icons-react' interface List { key?: string @@ -15,41 +15,26 @@ const Demo2 = () => { const iconItemList = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', icon: , action: { - icon: , + icon: , onClick: (e: any) => { console.log('onclick 1') e.stopPropagation() }, }, }, - { - key: 'key2', - name: 'option2', - icon: , - }, - { - key: 'key3', - name: 'option3', - icon: , - }, ] const itemListDisabled = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', disabled: true, }, { key: 'key2', - name: 'option2', - disabled: true, - }, - { - key: 'key3', - name: 'option3', + name: '主要文案内容', }, ] const chooseHandle = (item: List, index: number) => { @@ -58,31 +43,27 @@ const Demo2 = () => { return ( { showIcon ? setShowIcon(false) : setShowIcon(true) }} list={iconItemList} - style={{ marginInlineEnd: 30 }} > - + { disableAction ? setDisableAction(false) : setDisableAction(true) }} list={itemListDisabled} - // location="right" + location="right" onSelect={chooseHandle} > - + ) diff --git a/src/packages/popover/demos/h5/demo3.tsx b/src/packages/popover/demos/h5/demo3.tsx index 8043217a61..70aab93c45 100644 --- a/src/packages/popover/demos/h5/demo3.tsx +++ b/src/packages/popover/demos/h5/demo3.tsx @@ -1,17 +1,10 @@ import React, { useState } from 'react' import { Popover, Button } from '@nutui/nutui-react' -import { - Home, - Cart, - Location, - Service, - Notice, - Category, -} from '@nutui/icons-react' +import { Location, Service, Notice } from '@nutui/icons-react' const Demo3 = () => { - const [customized, setCustomized] = useState(false) - const selfContent = [ + const [visible, setVisible] = useState(false) + const list = [ { key: 'key1', name: , @@ -27,79 +20,49 @@ const Demo3 = () => { name: , description: 'option3', }, - { - key: 'key4', - name: , - description: 'option4', - }, - { - key: 'key5', - name: , - description: 'option5', - }, - { - key: 'key6', - name: , - description: 'option6', - }, ] - - const selfContentStyle = { - width: '195px', + const contStyle = { + width: '155px', display: 'flex', - flexWrap: 'wrap', } as any - const selfContentItem = { + const itemStyle = { marginTop: '10px', - marginBottom: '10px', display: 'flex', - justifyContent: 'center', alignItems: 'center', flexDirection: 'column', flex: 1, } as any - const selfContentDesc = { - marginTop: '5px', - width: '60px', - fontSize: '10px', + const descStyle = { + width: '50px', textAlign: 'center', } as any return ( <> { - customized ? setCustomized(false) : setCustomized(true) + visible ? setVisible(false) : setVisible(true) }} - location="top-left" - className="customClass" + location="right" > - - {customized ? ( -
- {selfContent.map((item: any) => { + + {visible && ( +
+ {list.map((item: any) => { return ( -
- {item.name ? item.name : null} -
- {item.description} -
+
+ {item.name} +
{item.description}
) })}
- ) : null} + )} ) diff --git a/src/packages/popover/demos/h5/demo4-1.tsx b/src/packages/popover/demos/h5/demo4-1.tsx index 363f08f924..e3e52d1d27 100644 --- a/src/packages/popover/demos/h5/demo4-1.tsx +++ b/src/packages/popover/demos/h5/demo4-1.tsx @@ -9,7 +9,7 @@ import { } from '@nutui/nutui-react' import { Tips, Close } from '@nutui/icons-react' -const Demo41 = () => { +const Demo = () => { const [baseDesc, setBaseDesc] = useState('') const [showPicker, setShowPicker] = useState(false) const [customPositon, setCustomPosition] = useState(false) @@ -20,15 +20,21 @@ const Demo41 = () => { { label: 'top', value: 'top' }, { label: 'top-left', value: 'top-left' }, { label: 'top-right', value: 'top-right' }, + { label: 'right', value: 'right' }, + { label: 'right-top', value: 'right-top' }, + { label: 'right-bottom', value: 'right-bottom' }, { label: 'bottom', value: 'bottom' }, { label: 'bottom-left', value: 'bottom-left' }, { label: 'bottom-right', value: 'bottom-right' }, + { label: 'left', value: 'left' }, + { label: 'left-top', value: 'left-top' }, + { label: 'left-bottom', value: 'left-bottom' }, ], ] const positionList = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', icon: , action: { icon: , @@ -79,7 +85,7 @@ const Demo41 = () => {
{ ) } -export default Demo41 +export default Demo diff --git a/src/packages/popover/demos/h5/demo4.tsx b/src/packages/popover/demos/h5/demo4.tsx index 75b96d7ffe..5cd6751e80 100644 --- a/src/packages/popover/demos/h5/demo4.tsx +++ b/src/packages/popover/demos/h5/demo4.tsx @@ -32,7 +32,7 @@ const Demo4 = () => { const positionList = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', }, ] @@ -76,7 +76,7 @@ const Demo4 = () => {
{ const [customTarget, setCustomTarget] = useState(false) const iconItemList = [ { key: 'key1', - name: 'option1', - icon: , - }, - { - key: 'key2', - name: 'option2', - icon: , - }, - { - key: 'key3', - name: 'option3', - icon: , + name: '主要文案内容', + icon: , }, ] @@ -28,21 +18,16 @@ const Demo5 = () => { return ( <> { setCustomTarget(false) }} /> - diff --git a/src/packages/popover/demos/h5/demo6.tsx b/src/packages/popover/demos/h5/demo6.tsx deleted file mode 100644 index ea04bcb626..0000000000 --- a/src/packages/popover/demos/h5/demo6.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from 'react' -import { Popover, Button } from '@nutui/nutui-react' - -const Demo6 = () => { - const [customColor, setCustomColor] = useState(false) - const itemList = [ - { - key: 'key1', - name: 'option1', - }, - { - key: 'key2', - name: 'option2', - }, - { - key: 'key3', - name: 'option3', - }, - ] - return ( - <> - { - customColor ? setCustomColor(false) : setCustomColor(true) - }} - > - - - - ) -} - -export default Demo6 diff --git a/src/packages/popover/demos/h5/demo7.tsx b/src/packages/popover/demos/h5/demo7.tsx index 4dc7c09776..07679867c1 100644 --- a/src/packages/popover/demos/h5/demo7.tsx +++ b/src/packages/popover/demos/h5/demo7.tsx @@ -6,15 +6,7 @@ const Demo7 = () => { const itemList = [ { key: 'key1', - name: 'option1', - }, - { - key: 'key2', - name: 'option2', - }, - { - key: 'key3', - name: 'option3', + name: '主要文案内容主要文案内容', }, ] return ( @@ -26,23 +18,23 @@ const Demo7 = () => { position: 'relative', }} > -
+
{ visible ? setVisible(false) : setVisible(true) }} > - -
+
) diff --git a/src/packages/popover/demos/h5/demo8.tsx b/src/packages/popover/demos/h5/demo8.tsx index a858c679c2..83b45faa6e 100644 --- a/src/packages/popover/demos/h5/demo8.tsx +++ b/src/packages/popover/demos/h5/demo8.tsx @@ -6,15 +6,7 @@ const Demo8 = () => { const list = [ { key: 'key1', - name: 'option1', - }, - { - key: 'key2', - name: 'option2', - }, - { - key: 'key3', - name: 'option3', + name: '主要文案内容主要文案内容', }, ] return ( @@ -31,16 +23,15 @@ const Demo8 = () => { className="demo-popover" visible={visible} list={list} - location="top-start" + theme="dark" + location="top-right" style={{ marginInlineEnd: '30px' }} closeOnOutsideClick={false} onClick={() => { visible ? setVisible(false) : setVisible(true) }} > - +
diff --git a/src/packages/popover/demos/taro/demo1.tsx b/src/packages/popover/demos/taro/demo1.tsx index 0cc4e3e5ac..33e94bdd1e 100644 --- a/src/packages/popover/demos/taro/demo1.tsx +++ b/src/packages/popover/demos/taro/demo1.tsx @@ -2,19 +2,21 @@ import React, { useState } from 'react' import { Popover, Button, Space } from '@nutui/nutui-react-taro' import { Tips, Close } from '@nutui/icons-react-taro' -const Demo1 = () => { +const Demo = () => { const [basic, setBasic] = useState(false) const [dark, setDark] = useState(false) + const [index, setIndex] = useState(0) const itemList = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', icon: , action: { icon: , onClick: (e: any) => { - console.log('onclick 1') e.stopPropagation() + index === 0 && basic && setBasic(false) + index === 1 && dark && setDark(false) }, }, }, @@ -24,10 +26,10 @@ const Demo1 = () => { { basic ? setBasic(false) : setBasic(true) + setIndex(0) }} onOpen={() => { console.log('打开菜单时触发') @@ -36,27 +38,22 @@ const Demo1 = () => { console.log('关闭菜单时触发') }} > - + - { dark ? setDark(false) : setDark(true) + setIndex(1) }} > - + ) } -export default Demo1 +export default Demo diff --git a/src/packages/popover/demos/taro/demo2.tsx b/src/packages/popover/demos/taro/demo2.tsx index d0fbb68339..20875b7229 100644 --- a/src/packages/popover/demos/taro/demo2.tsx +++ b/src/packages/popover/demos/taro/demo2.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { Popover, Button } from '@nutui/nutui-react-taro' -import { Home, Cart, Location, Check } from '@nutui/icons-react-taro' +import { Popover, Button, Space } from '@nutui/nutui-react-taro' +import { Home, Check } from '@nutui/icons-react-taro' interface List { key?: string @@ -15,64 +15,47 @@ const Demo2 = () => { const iconItemList = [ { key: 'key1', - name: 'option1', - icon: , + name: '主要文案内容', + icon: , action: { - icon: , + icon: , onClick: (e: any) => { console.log('onclick 1') e.stopPropagation() }, }, }, - { - key: 'key2', - name: 'option2', - icon: , - }, - { - key: 'key3', - name: 'option3', - icon: , - }, ] const itemListDisabled = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', disabled: true, }, { key: 'key2', - name: 'option2', - disabled: true, - }, - { - key: 'key3', - name: 'option3', + name: '主要文案内容', }, ] const chooseHandle = (item: List, index: number) => { console.log('选择') } return ( - <> + { showIcon ? setShowIcon(false) : setShowIcon(true) }} list={iconItemList} - style={{ marginInlineEnd: '30px' }} > - + { disableAction ? setDisableAction(false) : setDisableAction(true) }} @@ -80,11 +63,9 @@ const Demo2 = () => { location="right" onSelect={chooseHandle} > - + - + ) } diff --git a/src/packages/popover/demos/taro/demo3.tsx b/src/packages/popover/demos/taro/demo3.tsx index d59154a94b..c261d38aac 100644 --- a/src/packages/popover/demos/taro/demo3.tsx +++ b/src/packages/popover/demos/taro/demo3.tsx @@ -1,18 +1,11 @@ import React, { useState } from 'react' import { View } from '@tarojs/components' import { Popover, Button } from '@nutui/nutui-react-taro' -import { - Home, - Cart, - Location, - Service, - Notice, - Category, -} from '@nutui/icons-react-taro' +import { Location, Service, Notice } from '@nutui/icons-react-taro' const Demo3 = () => { - const [customized, setCustomized] = useState(false) - const selfContent = [ + const [visible, setVisible] = useState(false) + const list = [ { key: 'key1', name: , @@ -28,78 +21,50 @@ const Demo3 = () => { name: , description: 'option3', }, - { - key: 'key4', - name: , - description: 'option4', - }, - { - key: 'key5', - name: , - description: 'option5', - }, - { - key: 'key6', - name: , - description: 'option6', - }, ] - const selfContentStyle = { - width: '195px', + const contStyle = { + width: '155px', display: 'flex', - flexWrap: 'wrap', } as any - const selfContentItem = { + const itemStyle = { marginTop: '10px', - marginBottom: '10px', display: 'flex', - justifyContent: 'center', alignItems: 'center', flexDirection: 'column', flex: 1, } as any - const selfContentDesc = { - marginTop: '5px', - width: '60px', - fontSize: '10px', + const descStyle = { + width: '50px', textAlign: 'center', } as any return ( <> { - customized ? setCustomized(false) : setCustomized(true) + visible ? setVisible(false) : setVisible(true) }} - location="top-start" - className="customClass" + location="right" > - - {customized ? ( - - {selfContent.map((item: any) => { + + {visible && ( + + {list.map((item: any) => { return ( - - {item.name ? item.name : null} - - {item.description} - + + {item.name} + {item.description} ) })} - ) : null} + )} ) diff --git a/src/packages/popover/demos/taro/demo4-1.tsx b/src/packages/popover/demos/taro/demo4-1.tsx index 775707da79..9c36f465e6 100644 --- a/src/packages/popover/demos/taro/demo4-1.tsx +++ b/src/packages/popover/demos/taro/demo4-1.tsx @@ -6,32 +6,37 @@ import { Picker, Toast, PickerOnChangeCallbackParameter, + FullPosition, } from '@nutui/nutui-react-taro' import { Tips, Close } from '@nutui/icons-react-taro' -const Demo4 = () => { +const Demo = () => { const [baseDesc, setBaseDesc] = useState('') const [showPicker, setShowPicker] = useState(false) const [customPositon, setCustomPosition] = useState(false) - const [curPostion, setCurPostion] = useState('top') + const [curPostion, setCurPostion] = useState('top') const [showToast, SetShowToast] = useState(false) const columns = [ [ { label: 'top', value: 'top' }, - { label: 'top-start', value: 'top-start' }, - { label: 'top-end', value: 'top-end' }, + { label: 'top-left', value: 'top-left' }, + { label: 'top-right', value: 'top-right' }, { label: 'right', value: 'right' }, + { label: 'right-top', value: 'right-top' }, + { label: 'right-bottom', value: 'right-bottom' }, { label: 'bottom', value: 'bottom' }, - { label: 'bottom-start', value: 'bottom-start' }, - { label: 'bottom-end', value: 'bottom-end' }, + { label: 'bottom-left', value: 'bottom-left' }, + { label: 'bottom-right', value: 'bottom-right' }, { label: 'left', value: 'left' }, + { label: 'left-top', value: 'left-top' }, + { label: 'left-bottom', value: 'left-bottom' }, ], ] const positionList = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', icon: , action: { icon: , @@ -60,7 +65,6 @@ const Demo4 = () => { visible={showPicker} options={columns} duration="500" - title="" onConfirm={(list) => { let description = '' list.forEach((option: any) => { @@ -70,7 +74,7 @@ const Demo4 = () => { }} onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => { if (selectedOptions[0]?.value) { - setCurPostion(selectedOptions[0].value as string) + setCurPostion(selectedOptions[0].value as FullPosition) } }} onClose={() => { @@ -83,8 +87,8 @@ const Demo4 = () => { { ) } -export default Demo4 +export default Demo diff --git a/src/packages/popover/demos/taro/demo4.tsx b/src/packages/popover/demos/taro/demo4.tsx index 430160cf20..e2f874e234 100644 --- a/src/packages/popover/demos/taro/demo4.tsx +++ b/src/packages/popover/demos/taro/demo4.tsx @@ -5,34 +5,35 @@ import { Cell, Picker, PickerOnChangeCallbackParameter, + FullPosition, } from '@nutui/nutui-react-taro' const Demo4 = () => { const [baseDesc, setBaseDesc] = useState('') const [showPicker, setShowPicker] = useState(false) const [customPositon, setCustomPosition] = useState(false) - const [curPostion, setCurPostion] = useState('') + const [curPostion, setCurPostion] = useState('top') const columns = [ [ { label: 'top', value: 'top' }, - { label: 'top-start', value: 'top-start' }, - { label: 'top-end', value: 'top-end' }, + { label: 'top-left', value: 'top-left' }, + { label: 'top-right', value: 'top-right' }, { label: 'right', value: 'right' }, - { label: 'right-start', value: 'right-start' }, - { label: 'right-end', value: 'right-end' }, + { label: 'right-top', value: 'right-top' }, + { label: 'right-bottom', value: 'right-bottom' }, { label: 'bottom', value: 'bottom' }, - { label: 'bottom-start', value: 'bottom-start' }, - { label: 'bottom-end', value: 'bottom-end' }, + { label: 'bottom-left', value: 'bottom-left' }, + { label: 'bottom-right', value: 'bottom-right' }, { label: 'left', value: 'left' }, - { label: 'left-start', value: 'left-start' }, - { label: 'left-end', value: 'left-end' }, + { label: 'left-top', value: 'left-top' }, + { label: 'left-bottom', value: 'left-bottom' }, ], ] const positionList = [ { key: 'key1', - name: 'option1', + name: '主要文案内容', }, ] @@ -63,7 +64,7 @@ const Demo4 = () => { }} onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => { if (selectedOptions[0]?.value) { - setCurPostion(selectedOptions[0].value as string) + setCurPostion(selectedOptions[0].value as FullPosition) } }} onClose={() => { @@ -76,8 +77,8 @@ const Demo4 = () => { { const [customTarget, setCustomTarget] = useState(false) const iconItemList = [ { key: 'key1', - name: 'option1', - icon: , - }, - { - key: 'key2', - name: 'option2', - icon: , - }, - { - key: 'key3', - name: 'option3', - icon: , + name: '主要文案内容', + icon: , }, ] @@ -29,19 +19,15 @@ const Demo5 = () => { <> { setCustomTarget(false) }} /> - diff --git a/src/packages/popover/demos/taro/demo6.tsx b/src/packages/popover/demos/taro/demo6.tsx deleted file mode 100644 index 764d56c16e..0000000000 --- a/src/packages/popover/demos/taro/demo6.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React, { useState } from 'react' -import { Popover, Button } from '@nutui/nutui-react-taro' - -const Demo6 = () => { - const [customColor, setCustomColor] = useState(false) - const itemList = [ - { - key: 'key1', - name: 'option1', - }, - { - key: 'key2', - name: 'option2', - }, - { - key: 'key3', - name: 'option3', - }, - ] - return ( - <> - { - customColor ? setCustomColor(false) : setCustomColor(true) - }} - > - - - - ) -} - -export default Demo6 diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md index d8dea5399d..0be8a415bc 100644 --- a/src/packages/popover/doc.en-US.md +++ b/src/packages/popover/doc.en-US.md @@ -26,7 +26,7 @@ import { Popover } from '@nutui/nutui-react' ::: -### Custom Content +### Custom Content and Color :::demo @@ -38,19 +38,21 @@ import { Popover } from '@nutui/nutui-react' Use the location property to control where the bubble pops up. optional value +> Attention, the type of location is changed from 3.x, take a look at the `FullPosition` type in types file . + ``` top # Top middle left # Left middle right # Right middle bottom # Bottom middle -top-start # Top left -top-end # Top right -left-start # Left top -left-end # Left bottom -right-start # Right top -right-end # Right bottom -bottom-start # Bottom left -bottom-end # Bottom right +top-left # Top left +top-right # Top Right +left-top # Left Top +left-bottom # Left Bottom +right-top # Right Top +right-bottom # Right Bottom +bottom-left # Bottom Left +bottom-right # Bottom Right ``` :::demo @@ -63,17 +65,6 @@ bottom-end # Bottom right Use the location property to control where the bubble pops up. optional value -``` -top # Top middle -left # Left middle -right # Right middle -bottom # Bottom middle -top-start # Top left -top-end # Top right -bottom-start # Bottom left -bottom-end # Bottom right -``` - :::demo @@ -88,14 +79,6 @@ bottom-end # Bottom right ::: -### Custom Color - -:::demo - - - -::: - ### In scrollable container :::demo diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index 0348fd7ae0..9602184a3c 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -26,7 +26,7 @@ import { Popover } from '@nutui/nutui-react' ::: -### 自定义内容 +### 自定义内容+颜色 :::demo @@ -38,19 +38,21 @@ import { Popover } from '@nutui/nutui-react' 通过 location 属性来控制气泡的弹出位置。可选值 +> 注意：这里在 3.x 版本上发生了变化，参考 type 文件中的 `FullPosition` 类型。 + ``` top # 顶部中间位置 left # 左侧中间位置 right # 右侧中间位置 bottom # 底部中间位置 -top-left # 顶部左侧位置 -top-right # 顶部右侧位置 -left-top # 左侧上方位置 -left-bottom # 左侧下方位置 -right-top # 右侧上方位置 -right-bottom # 右侧下方位置 -bottom-left # 底部左侧位置 -bottom-right # 底部右侧位置 +top-left # 顶部左侧位置 +top-right # 顶部右侧位置 +left-top # 左侧上方位置 +left-bottom # 左侧下方位置 +right-top # 右侧上方位置 +right-bottom # 右侧下方位置 +bottom-left # 底部左侧位置 +bottom-right # 底部右侧位置 ``` :::demo @@ -61,18 +63,9 @@ bottom-right # 底部右侧位置 ### 位置自定义：单条数据 -通过 location 属性来控制气泡的弹出位置。可选值 +通过 location 属性来控制气泡的弹出位置。 -``` -top # 顶部中间位置 -left # 左侧中间位置 -right # 右侧中间位置 -bottom # 底部中间位置 -top-left # 顶部左侧位置 -top-right # 顶部右侧位置 -bottom-left # 底部左侧位置 -bottom-right # 底部右侧位置 -``` +> 注意：这里在 3.x 版本上发生了变化，参考 type 文件中的 `FullPosition` 类型。 :::demo @@ -88,14 +81,6 @@ bottom-right # 底部右侧位置 ::: -### 自定义颜色 - -:::demo - - - -::: - ### 置于可滚动容器中 :::demo diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index b8c76e2afc..17f335194b 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -26,7 +26,7 @@ import { Popover } from '@nutui/nutui-react-taro' ::: -### 自定义内容 +### 自定义内容+颜色 :::demo @@ -38,19 +38,21 @@ import { Popover } from '@nutui/nutui-react-taro' 通过 location 属性来控制气泡的弹出位置。可选值 +> 注意：这里在 3.x 版本上发生了变化，参考 type 文件中的 `FullPosition` 类型。 + ``` top # 顶部中间位置 left # 左侧中间位置 right # 右侧中间位置 bottom # 底部中间位置 -top-start # 顶部左侧位置 -top-end # 顶部右侧位置 -left-start # 左侧上方位置 -left-end # 左侧下方位置 -right-start # 右侧上方位置 -right-end # 右侧下方位置 -bottom-start # 底部左侧位置 -bottom-end # 底部右侧位置 +top-left # 顶部左侧位置 +top-right # 顶部右侧位置 +left-top # 左侧上方位置 +left-bottom # 左侧下方位置 +right-top # 右侧上方位置 +right-bottom # 右侧下方位置 +bottom-left # 底部左侧位置 +bottom-right # 底部右侧位置 ``` :::demo @@ -61,18 +63,9 @@ bottom-end # 底部右侧位置 ### 位置自定义：单条数据 -通过 location 属性来控制气泡的弹出位置。可选值 +通过 location 属性来控制气泡的弹出位置。 -``` -top # 顶部中间位置 -left # 左侧中间位置 -right # 右侧中间位置 -bottom # 底部中间位置 -top-start # 顶部左侧位置 -top-end # 顶部右侧位置 -bottom-start # 底部左侧位置 -bottom-end # 底部右侧位置 -``` +> 注意：这里在 3.x 版本上发生了变化，参考 type 文件中的 `FullPosition` 类型。 :::demo @@ -96,14 +89,6 @@ bottom-end # 底部右侧位置 ::: -### 自定义颜色 - -:::demo - - - -::: - ## Popover ### Props diff --git a/src/packages/popover/doc.zh-TW.md b/src/packages/popover/doc.zh-TW.md index 2271940120..cbc574fc3a 100644 --- a/src/packages/popover/doc.zh-TW.md +++ b/src/packages/popover/doc.zh-TW.md @@ -26,7 +26,7 @@ import { Popover } from '@nutui/nutui-react' ::: -### 自定義內容 +### 自定義內容+顏色 :::demo @@ -38,19 +38,21 @@ import { Popover } from '@nutui/nutui-react' 通過 location 屬性來控製氣泡的彈出位置。可選值 +> 註意：這裏在 3.x 版本上發生了變化，參考 type 文件中的 `FullPosition` 類型。 + ``` top # 頂部中間位置 left # 左側中間位置 right # 右側中間位置 bottom # 底部中間位置 -top-start # 頂部左側位置 -top-end # 頂部右側位置 -left-start # 左側上方位置 -left-end # 左側下方位置 -right-start # 右側上方位置 -right-end # 右側下方位置 -bottom-start # 底部左側位置 -bottom-end # 底部右側位置 +top-left # 頂部左側位置 +top-right # 頂部右側位置 +left-top # 左側上方位置 +left-bottom # 左側下方位置 +right-top # 右側上方位置 +right-bottom # 右側下方位置 +bottom-left # 底部左側位置 +bottom-right # 底部右側位置 ``` :::demo @@ -63,16 +65,7 @@ bottom-end # 底部右側位置 通過 location 屬性來控製氣泡的彈出位置。可選值 -``` -top # 頂部中間位置 -left # 左側中間位置 -right # 右側中間位置 -bottom # 底部中間位置 -top-start # 頂部左側位置 -top-end # 頂部右側位置 -bottom-start # 底部左側位置 -bottom-end # 底部右側位置 -``` +> 註意：這裏在 3.x 版本上發生了變化，參考 type 文件中的 `FullPosition` 類型。 :::demo @@ -88,14 +81,6 @@ bottom-end # 底部右側位置 ::: -### 自定義顏色 - -:::demo - - - -::: - ### 置於可滾動容器中 :::demo diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 262a3c7708..cce1059152 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -76,7 +76,10 @@ line-height: 28px; max-height: initial; overflow-y: initial; - padding: 0 $popover-padding; + + &-group { + padding: 0 $popover-padding; + } .nut-popover-item { display: flex; diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 4210300c1a..59da1be45b 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -184,10 +184,10 @@ export const Popover: FunctionComponent< styles[dir] = `${-(elWidth - width) / 2 + rootPosition[dir] + parallel}px` } - if (skew === 'start') { + if (skew === 'left') { styles.left = `${left + parallel}px` } - if (skew === 'end') { + if (skew === 'right') { styles.left = `${right + parallel}px` } } @@ -198,10 +198,10 @@ export const Popover: FunctionComponent< if (!skew) { styles.top = `${top - elHeight / 2 + height / 2 - 4 + parallel}px` } - if (skew === 'start') { + if (skew === 'top') { styles.top = `${top + parallel}px` } - if (skew === 'end') { + if (skew === 'bottom') { styles.top = `${top + height + parallel}px` } } @@ -224,10 +224,10 @@ export const Popover: FunctionComponent< if (!skew) { styles[dir] = `calc(50% + ${arrowOffset}px)` } - if (skew === 'start') { + if (skew === 'left') { styles[dir] = `${base + arrowOffset}px` } - if (skew === 'end') { + if (skew === 'right') { styles[dir2] = `${base - arrowOffset}px` } } @@ -236,10 +236,10 @@ export const Popover: FunctionComponent< if (!skew) { styles.top = `calc(50% - ${arrowOffset}px)` } - if (skew === 'start') { + if (skew === 'top') { styles.top = `${base - arrowOffset}px` } - if (skew === 'end') { + if (skew === 'bottom') { styles.bottom = `${base + arrowOffset}px` } } @@ -275,7 +275,7 @@ export const Popover: FunctionComponent< {Array.isArray(children) ? children[0] : children} )} - + +
Date: Thu, 27 Mar 2025 19:24:07 +0800 Subject: [PATCH 05/13] =?UTF-8?q?fix:=20=E5=8F=98=E9=87=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/variables-jmapp.scss | 15 ++------------- src/styles/variables-jrkf.scss | 15 ++------------- 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index 6993402799..cbca053a4d 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -1636,29 +1636,18 @@ $badge-dot-border: var(--nutui-badge-dot-border, none); //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default; $popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default; -$popover-border-color: var(--nutui-popover-border-color, #ffffff) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, #ffffff ) !default; $popover-text-color: var(--nutui-popover-text-color, $color-text) !default; -$popover-hover-background-color: var( - --nutui-popover-hover-background-color, - #fff -) !default; -$popover-hover-text-color: var( - --nutui-popover-hover-text-color, - $color-text -) !default; $popover-disable-color: var( --nutui-popover-disable-color, $color-text-disabled ) !default; $popover-divider-color: var(--nutui-popover-divider-color, none) !default; -$popover-menu-item-padding: var( - --nutui-popover-menu-item-padding, - $spacing-xl -) !default; +$popover-padding: var(--nutui-popover-padding, $spacing-xl) !default; +$popover-item-width: var(--nutui-popover-item-width, 160px) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss index 13b4d4567b..62c6648016 100644 --- a/src/styles/variables-jrkf.scss +++ b/src/styles/variables-jrkf.scss @@ -1661,29 +1661,18 @@ $badge-dot-border: var(--nutui-badge-dot-border, none) !default; //popover（✅） $popover-border-radius: var(--nutui-popover-border-radius, $radius-s) !default; $popover-font-size: var(--nutui-popover-font-size, $font-size-base) !default; -$popover-border-color: var(--nutui-popover-border-color, #ffffff) !default; $popover-content-background-color: var( --nutui-popover-content-background-color, #ffffff ) !default; $popover-text-color: var(--nutui-popover-text-color, $color-text) !default; -$popover-hover-background-color: var( - --nutui-popover-hover-background-color, - #fff -) !default; -$popover-hover-text-color: var( - --nutui-popover-hover-text-color, - $color-text -) !default; $popover-disable-color: var( --nutui-popover-disable-color, $color-text-disabled ) !default; $popover-divider-color: var(--nutui-popover-divider-color, none) !default; -$popover-menu-item-padding: var( - --nutui-popover-menu-item-padding, - $spacing-xl -) !default; +$popover-padding: var(--nutui-popover-padding, $spacing-xl) !default; +$popover-item-width: var(--nutui-popover-item-width, 160px) !default; //progress（✅） $progress-height: var(--nutui-progress-height, 10px) !default; From 29cf4596f13e2af9c2f7b9ca28c7c891e4e81e31 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Fri, 28 Mar 2025 17:43:22 +0800 Subject: [PATCH 06/13] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=91=BD?= =?UTF-8?q?=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/popover/popover.taro.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 59da1be45b..2434004512 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -83,12 +83,15 @@ export const Popover: FunctionComponent< setShowPopup(visible) if (visible) { setTimeout(() => { - getContentWidth() + getWrapperPosition() + setTimeout(() => { + getPopoverContentW() + }, 300) }, 0) } }, [visible]) - const getContentWidth = async () => { + const getWrapperPosition = async () => { let rect createSelectorQuery() @@ -115,9 +118,6 @@ export const Popover: FunctionComponent< }) }) .exec() - setTimeout(() => { - getPopoverContentW() - }, 300) } const getRectTaro = async (targetId: any): Promise => { @@ -158,7 +158,7 @@ export const Popover: FunctionComponent< return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${location}` } - const getRootPosition = () => { + const getPopoverPosition = () => { const styles: CSSProperties = {} if (!rootPosition) { styles.visibility = 'hidden' @@ -275,7 +275,7 @@ export const Popover: FunctionComponent< {Array.isArray(children) ? children[0] : children} )} - + Date: Mon, 31 Mar 2025 14:19:35 +0800 Subject: [PATCH 07/13] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E4=BB=A3?= =?UTF-8?q?=E7=A0=81,=E6=96=B9=E6=B3=95=E5=AE=9A=E4=B9=89\=E6=96=B9?= =?UTF-8?q?=E6=B3=95=E5=BC=95=E7=94=A8=E7=AD=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/use-taro-rect.ts | 2 +- src/packages/picker/picker.taro.tsx | 1 - src/packages/popover/popover.taro.tsx | 74 +++++++++++---------------- 3 files changed, 32 insertions(+), 45 deletions(-) diff --git a/src/hooks/use-taro-rect.ts b/src/hooks/use-taro-rect.ts index 35e7690120..107d5b49bf 100644 --- a/src/hooks/use-taro-rect.ts +++ b/src/hooks/use-taro-rect.ts @@ -13,7 +13,7 @@ export const getTaroRectById = (id: string) => { query .select(`#${id}`) .boundingClientRect() - .exec(function (rect: any) { + .exec((rect: any) => { if (rect[0]) { resolve(rect[0]) } else { diff --git a/src/packages/picker/picker.taro.tsx b/src/packages/picker/picker.taro.tsx index 429b42a4c9..a246515fdf 100644 --- a/src/packages/picker/picker.taro.tsx +++ b/src/packages/picker/picker.taro.tsx @@ -8,7 +8,6 @@ import React, { import { View } from '@tarojs/components' import classNames from 'classnames' import isEqual from 'react-fast-compare' - import PickerView from '@/packages/pickerview/index.taro' import Popup from '@/packages/popup/index.taro' import SafeArea from '@/packages/safearea/index.taro' diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 2434004512..4e2ae6e966 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -6,13 +6,12 @@ import React, { useState, } from 'react' import classNames from 'classnames' -import Taro, { createSelectorQuery } from '@tarojs/taro' +import { createSelectorQuery } from '@tarojs/taro' import { View } from '@tarojs/components' import { ArrowRadius } from '@nutui/icons-react-taro' import Popup from '@/packages/popup/index.taro' import { getRectByTaro } from '@/utils/get-rect-by-taro' import { ComponentDefaults } from '@/utils/typings' -import { getRect } from '@/hooks/use-client-rect' import { useRtl } from '@/packages/configprovider/index.taro' import { TaroPopoverProps, PopoverList } from '@/types' @@ -76,8 +75,8 @@ export const Popover: FunctionComponent< const popoverRef = useRef(null) const popoverContentRef = useRef(null) const [showPopup, setShowPopup] = useState(false) - const [elWidth, setElWidth] = useState(0) - const [elHeight, setElHeight] = useState(0) + const [popWidth, setPopWidth] = useState(0) + const [popHeight, setPopHeight] = useState(0) const [rootPosition, setRootPosition] = useState() useEffect(() => { setShowPopup(visible) @@ -91,50 +90,38 @@ export const Popover: FunctionComponent< } }, [visible]) - const getWrapperPosition = async () => { + const getWrapperInfo = async (distance: number) => { let rect + if (targetId) { + const elem = document.querySelector(`#${targetId}`) + rect = await getRectByTaro(elem, targetId) + console.log('getWrapperInfo', rect) + } else { + rect = await getRectByTaro(popoverRef.current) + } + setRootPosition({ + width: rect.width, + height: rect.height, + left: rtl ? rect.right : rect.left, + top: rect.top + distance, + right: rtl ? rect.left : rect.right, + }) + } + + const getWrapperPosition = () => { createSelectorQuery() .selectViewport() - .scrollOffset(async (res) => { - const distance = res.scrollTop - - if (targetId) { - if (Taro.getEnv() === Taro.ENV_TYPE.WEB) { - rect = getRect(document.querySelector(`#${targetId}`) as Element) - } else { - rect = await getRectTaro(targetId) - } - } else { - rect = await getRectByTaro(popoverRef.current) - } - - setRootPosition({ - width: rect.width, - height: rect.height, - left: rtl ? rect.right : rect.left, - top: rect.top + distance, - right: rtl ? rect.left : rect.right, - }) + .scrollOffset((res) => { + getWrapperInfo(res.scrollTop) }) .exec() } - const getRectTaro = async (targetId: any): Promise => { - return new Promise((resolve) => { - createSelectorQuery() - .select(`#${targetId}`) - .boundingClientRect() - .exec((res: any) => { - resolve(res[0]) - }) - }) - } - const getPopoverContentW = async () => { const rectContent = await getRectByTaro(popoverContentRef.current) - setElWidth(rectContent.width) - setElHeight(rectContent.height) + setPopWidth(rectContent.width) + setPopHeight(rectContent.height) } const clickAway = () => { @@ -174,15 +161,16 @@ export const Popover: FunctionComponent< cross += +offset[1] parallel += +rtloffset } + console.log('widht', width, 'left') if (width) { const dir = rtl ? 'right' : 'left' if (['bottom', 'top'].includes(direction)) { - const h = direction === 'bottom' ? height + cross : -(elHeight + cross) + const h = direction === 'bottom' ? height + cross : -(popHeight + cross) styles.top = `${top + h}px` if (!skew) { styles[dir] = - `${-(elWidth - width) / 2 + rootPosition[dir] + parallel}px` + `${-(popWidth - width) / 2 + rootPosition[dir] + parallel}px` } if (skew === 'left') { styles.left = `${left + parallel}px` @@ -193,10 +181,10 @@ export const Popover: FunctionComponent< } if (['left', 'right'].includes(direction)) { const contentW = - direction === 'left' ? -(elWidth + cross) : width + cross + direction === 'left' ? -(popWidth + cross) : width + cross styles.left = `${left + contentW}px` if (!skew) { - styles.top = `${top - elHeight / 2 + height / 2 - 4 + parallel}px` + styles.top = `${top - popHeight / 2 + height / 2 - 4 + parallel}px` } if (skew === 'top') { styles.top = `${top + parallel}px` @@ -207,7 +195,7 @@ export const Popover: FunctionComponent< } } - styles.visibility = elWidth === 0 ? 'hidden' : 'initial' + styles.visibility = popWidth === 0 ? 'hidden' : 'initial' return styles } From 2015999322d0cbeca2f624f520681f7ce6bfb70d Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Tue, 1 Apr 2025 22:37:26 +0800 Subject: [PATCH 08/13] =?UTF-8?q?fix:=20=E4=BF=AE=E8=AE=A2=E5=B0=8F?= =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E4=B8=8B=E9=94=99=E4=BD=8D=E9=97=AE=E9=A2=98?= =?UTF-8?q?,=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/nutui-taro-demo/src/app.ts | 4 +- src/config.json | 4 +- .../popover/__tests__/popover.spec.tsx | 8 +-- src/packages/popover/demo.taro.tsx | 6 +- src/packages/popover/demos/taro/demo1.tsx | 2 +- src/packages/popover/popover.scss | 2 +- src/packages/popover/popover.taro.tsx | 64 +++++++++---------- src/packages/tour/demo.taro.tsx | 6 +- src/packages/tour/demos/h5/demo1.tsx | 2 +- src/packages/tour/demos/h5/demo2.tsx | 2 +- src/packages/tour/demos/h5/demo3.tsx | 2 +- src/packages/tour/demos/h5/demo4.tsx | 2 +- src/packages/tour/demos/h5/demo5.tsx | 8 +-- src/packages/tour/demos/taro/demo1.tsx | 2 +- src/packages/tour/demos/taro/demo2.tsx | 2 +- src/packages/tour/demos/taro/demo3.tsx | 2 +- src/packages/tour/demos/taro/demo4.tsx | 2 +- src/packages/tour/demos/taro/demo5.tsx | 10 +-- src/packages/tour/tour.taro.tsx | 8 +-- src/utils/get-rect-by-taro.ts | 10 +++ src/utils/lru.ts | 36 +++++++++++ 21 files changed, 114 insertions(+), 70 deletions(-) create mode 100644 src/utils/lru.ts diff --git a/packages/nutui-taro-demo/src/app.ts b/packages/nutui-taro-demo/src/app.ts index 9a9ff37670..f44ee74bc2 100644 --- a/packages/nutui-taro-demo/src/app.ts +++ b/packages/nutui-taro-demo/src/app.ts @@ -1,10 +1,10 @@ import { Component } from 'react' -import './app.scss' - import('@/sites/assets/styles/reset.scss') import('@/packages/nutui.react.scss.taro') import('@nutui/touch-emulator') +import './app.scss' + // console.log(NutUI) class App extends Component { render() { diff --git a/src/config.json b/src/config.json index 84a46e709e..52ea382175 100644 --- a/src/config.json +++ b/src/config.json @@ -960,9 +960,9 @@ "sort": 19, "show": true, "taro": true, - "v15": 10, + "v15": 1, "author": "lzz", - "dd": false + "dd": true }, { "version": "3.0.0", diff --git a/src/packages/popover/__tests__/popover.spec.tsx b/src/packages/popover/__tests__/popover.spec.tsx index 5bd620ac52..166105077c 100644 --- a/src/packages/popover/__tests__/popover.spec.tsx +++ b/src/packages/popover/__tests__/popover.spec.tsx @@ -75,7 +75,7 @@ test('render popover content dark', async () => { test('render popover position', async () => { render( - + @@ -83,13 +83,13 @@ test('render popover position', async () => { ) const content = document.querySelectorAll('.nut-popover-content')[0] expect(content.className).toContain( - 'nut-popup-none nut-popover-content nut-popover-content-bottom-start' + 'nut-popup-none nut-popover-content nut-popover-content-bottom-left' ) }) test('render popover position2', async () => { const { container } = render( - + @@ -117,7 +117,7 @@ test('render popover position22', async () => { test('render popover position3', async () => { const { container } = render( - + diff --git a/src/packages/popover/demo.taro.tsx b/src/packages/popover/demo.taro.tsx index e6a166accb..564759f87d 100644 --- a/src/packages/popover/demo.taro.tsx +++ b/src/packages/popover/demo.taro.tsx @@ -1,6 +1,6 @@ import React from 'react' import Taro from '@tarojs/taro' -import { ScrollView, View } from '@tarojs/components' +import { View } from '@tarojs/components' import { useTranslate } from '@/sites/assets/locale/taro' import './demo.scss' import Header from '@/sites/components/header' @@ -42,7 +42,7 @@ const PopoverDemo = () => { return ( <>
- + {translated.title} {translated.title1} @@ -55,7 +55,7 @@ const PopoverDemo = () => { {translated.title4} - + ) } diff --git a/src/packages/popover/demos/taro/demo1.tsx b/src/packages/popover/demos/taro/demo1.tsx index 33e94bdd1e..5aee27e346 100644 --- a/src/packages/popover/demos/taro/demo1.tsx +++ b/src/packages/popover/demos/taro/demo1.tsx @@ -44,7 +44,7 @@ const Demo = () => { visible={dark} list={itemList} theme="dark" - location="bottom-left" + location="right" onClick={() => { dark ? setDark(false) : setDark(true) setIndex(1) diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index cce1059152..c03b29182d 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -1,5 +1,4 @@ @import '../popup/popup.scss'; - .nut-popover { position: absolute; display: inline-block; @@ -39,6 +38,7 @@ } &.nut-popover-arrow-left-bottom { + top: auto; bottom: 16px; right: -8px; transform: rotate(90deg) translateY(0%); diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 4e2ae6e966..91338a10e4 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -6,16 +6,17 @@ import React, { useState, } from 'react' import classNames from 'classnames' -import { createSelectorQuery } from '@tarojs/taro' -import { View } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import { ArrowRadius } from '@nutui/icons-react-taro' import Popup from '@/packages/popup/index.taro' import { getRectByTaro } from '@/utils/get-rect-by-taro' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' import { TaroPopoverProps, PopoverList } from '@/types' +import pxTransform from '@/utils/px-transform' +import useUuid from '@/hooks/use-uuid' -export interface RootPosition { +export interface WrapperPosition { width: number height: number left: number @@ -77,7 +78,7 @@ export const Popover: FunctionComponent< const [showPopup, setShowPopup] = useState(false) const [popWidth, setPopWidth] = useState(0) const [popHeight, setPopHeight] = useState(0) - const [rootPosition, setRootPosition] = useState() + const [wrapperPosition, setWrapperPosition] = useState() useEffect(() => { setShowPopup(visible) if (visible) { @@ -86,38 +87,30 @@ export const Popover: FunctionComponent< setTimeout(() => { getPopoverContentW() }, 300) - }, 0) + }, 10) } }, [visible]) - const getWrapperInfo = async (distance: number) => { + const uid = useUuid() + const popoverId = `popover-${uid}` + + const getWrapperPosition = async () => { let rect if (targetId) { const elem = document.querySelector(`#${targetId}`) rect = await getRectByTaro(elem, targetId) - console.log('getWrapperInfo', rect) } else { - rect = await getRectByTaro(popoverRef.current) + rect = await getRectByTaro(popoverRef.current, popoverId) } - - setRootPosition({ + setWrapperPosition({ width: rect.width, height: rect.height, left: rtl ? rect.right : rect.left, - top: rect.top + distance, + top: rect.top, right: rtl ? rect.left : rect.right, }) } - const getWrapperPosition = () => { - createSelectorQuery() - .selectViewport() - .scrollOffset((res) => { - getWrapperInfo(res.scrollTop) - }) - .exec() - } - const getPopoverContentW = async () => { const rectContent = await getRectByTaro(popoverContentRef.current) setPopWidth(rectContent.width) @@ -147,11 +140,12 @@ export const Popover: FunctionComponent< const getPopoverPosition = () => { const styles: CSSProperties = {} - if (!rootPosition) { + if (!wrapperPosition) { styles.visibility = 'hidden' return styles } - const { width, height, left, top, right } = rootPosition + const { width, height, left, top, right } = wrapperPosition + const direction = location.split('-')[0] const skew = location.split('-')[1] let cross = 0 @@ -161,36 +155,39 @@ export const Popover: FunctionComponent< cross += +offset[1] parallel += +rtloffset } - console.log('widht', width, 'left') + if (width) { const dir = rtl ? 'right' : 'left' if (['bottom', 'top'].includes(direction)) { const h = direction === 'bottom' ? height + cross : -(popHeight + cross) - styles.top = `${top + h}px` + styles.top = pxTransform(top + h) if (!skew) { - styles[dir] = - `${-(popWidth - width) / 2 + rootPosition[dir] + parallel}px` + styles[dir] = pxTransform( + -(popWidth - width) / 2 + wrapperPosition[dir] + parallel + ) } if (skew === 'left') { - styles.left = `${left + parallel}px` + styles.left = pxTransform(left + parallel) } if (skew === 'right') { - styles.left = `${right + parallel}px` + styles.left = pxTransform(right + parallel) } } if (['left', 'right'].includes(direction)) { const contentW = direction === 'left' ? -(popWidth + cross) : width + cross - styles.left = `${left + contentW}px` + styles.left = pxTransform(left + contentW) if (!skew) { - styles.top = `${top - popHeight / 2 + height / 2 - 4 + parallel}px` + styles.top = pxTransform( + top - popHeight / 2 + height / 2 - 4 + parallel + ) } if (skew === 'top') { - styles.top = `${top + parallel}px` + styles.top = pxTransform(top + parallel) } if (skew === 'bottom') { - styles.top = `${top + height + parallel}px` + styles.top = pxTransform(top + height + parallel) } } } @@ -250,6 +247,7 @@ export const Popover: FunctionComponent< { props?.onClick?.() if (!visible) { @@ -294,7 +292,7 @@ export const Popover: FunctionComponent< {item.icon && ( {item.icon} )} - {item.name} + {item.name} {item.action?.icon && ( { return ( <>
- {translated.title1} @@ -44,7 +44,7 @@ const TourDemo = () => { {translated.title5} - + ) } diff --git a/src/packages/tour/demos/h5/demo1.tsx b/src/packages/tour/demos/h5/demo1.tsx index ae1938cdc3..9125751890 100644 --- a/src/packages/tour/demos/h5/demo1.tsx +++ b/src/packages/tour/demos/h5/demo1.tsx @@ -34,7 +34,7 @@ const Demo1 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" /> ) diff --git a/src/packages/tour/demos/h5/demo2.tsx b/src/packages/tour/demos/h5/demo2.tsx index 2c65c3db8c..a5d18272c4 100644 --- a/src/packages/tour/demos/h5/demo2.tsx +++ b/src/packages/tour/demos/h5/demo2.tsx @@ -34,7 +34,7 @@ const Demo2 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', diff --git a/src/packages/tour/demos/h5/demo3.tsx b/src/packages/tour/demos/h5/demo3.tsx index 4b03a63af1..adbdb1c60e 100644 --- a/src/packages/tour/demos/h5/demo3.tsx +++ b/src/packages/tour/demos/h5/demo3.tsx @@ -48,7 +48,7 @@ const Demo3 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', diff --git a/src/packages/tour/demos/h5/demo4.tsx b/src/packages/tour/demos/h5/demo4.tsx index 7dd065c214..8ec481ae14 100644 --- a/src/packages/tour/demos/h5/demo4.tsx +++ b/src/packages/tour/demos/h5/demo4.tsx @@ -33,7 +33,7 @@ const Demo4 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" offset={[8, 8]} closeOnOverlayClick={false} > diff --git a/src/packages/tour/demos/h5/demo5.tsx b/src/packages/tour/demos/h5/demo5.tsx index 21ca36d2cd..ab78c0742f 100644 --- a/src/packages/tour/demos/h5/demo5.tsx +++ b/src/packages/tour/demos/h5/demo5.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { Cell, Tour, Tabbar } from '@nutui/nutui-react' const Demo5 = () => { - const [showTour, setShowTour] = useState(true) + const [showTour, setShowTour] = useState(false) const closeTour = () => { setShowTour(false) @@ -20,12 +20,12 @@ const Demo5 = () => { { content: '基于京东APP 10.0 视觉规范', target: 'target7', - location: 'top-end', + location: 'top-right', }, { content: '支持定制主题，内置 700+ 个主题变量', target: 'target8', - location: 'top-end', + location: 'top-right', }, ] @@ -48,7 +48,7 @@ const Demo5 = () => { visible={showTour} onClose={closeTour} list={steps} - location="top-start" + location="top-left" offset={[0, 0]} maskWidth={60} maskHeight={50} diff --git a/src/packages/tour/demos/taro/demo1.tsx b/src/packages/tour/demos/taro/demo1.tsx index 86b9c10874..3333e7fc85 100644 --- a/src/packages/tour/demos/taro/demo1.tsx +++ b/src/packages/tour/demos/taro/demo1.tsx @@ -34,7 +34,7 @@ const Demo1 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" /> ) diff --git a/src/packages/tour/demos/taro/demo2.tsx b/src/packages/tour/demos/taro/demo2.tsx index 367f1abcc8..d65120eec4 100644 --- a/src/packages/tour/demos/taro/demo2.tsx +++ b/src/packages/tour/demos/taro/demo2.tsx @@ -34,7 +34,7 @@ const Demo2 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', diff --git a/src/packages/tour/demos/taro/demo3.tsx b/src/packages/tour/demos/taro/demo3.tsx index 67b09d9298..c29ce4fab2 100644 --- a/src/packages/tour/demos/taro/demo3.tsx +++ b/src/packages/tour/demos/taro/demo3.tsx @@ -49,7 +49,7 @@ const Demo3 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', diff --git a/src/packages/tour/demos/taro/demo4.tsx b/src/packages/tour/demos/taro/demo4.tsx index ad229d517a..923861b814 100644 --- a/src/packages/tour/demos/taro/demo4.tsx +++ b/src/packages/tour/demos/taro/demo4.tsx @@ -34,7 +34,7 @@ const Demo4 = () => { onClose={closeTour} list={steps} type="tile" - location="bottom-end" + location="bottom-right" offset={[8, 8]} closeOnOverlayClick={false} > diff --git a/src/packages/tour/demos/taro/demo5.tsx b/src/packages/tour/demos/taro/demo5.tsx index f753040fd1..4d665891c0 100644 --- a/src/packages/tour/demos/taro/demo5.tsx +++ b/src/packages/tour/demos/taro/demo5.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { Cell, Tour, Tabbar } from '@nutui/nutui-react-taro' const Demo5 = () => { - const [showTour, setShowTour] = useState(true) + const [showTour, setShowTour] = useState(false) const closeTour = () => { setShowTour(false) @@ -12,20 +12,22 @@ const Demo5 = () => { { content: '70+ 高质量组件，覆盖移动端主流场景', target: 'target5', + location: 'top-left', }, { content: '支持一套代码同时开发多端小程序+H5', target: 'target6', + location: 'top-left', }, { content: '基于京东APP 10.0 视觉规范', target: 'target7', - location: 'top-end', + location: 'top-right', }, { content: '支持定制主题，内置 700+ 个主题变量', target: 'target8', - location: 'top-end', + location: 'top-right', }, ] @@ -48,7 +50,7 @@ const Demo5 = () => { visible={showTour} onClose={closeTour} list={steps} - location="top-start" + location="top-left" offset={[0, 0]} maskWidth={60} maskHeight={50} diff --git a/src/packages/tour/tour.taro.tsx b/src/packages/tour/tour.taro.tsx index 6648540179..85f4b8c0ff 100644 --- a/src/packages/tour/tour.taro.tsx +++ b/src/packages/tour/tour.taro.tsx @@ -91,7 +91,6 @@ export const Tour: FunctionComponent< const getRootPosition = () => { getTaroRectById(list[active].target as string).then((rect: any) => { - console.log('rect', rect) setMaskRect({ top: rect.top, left: rect.left, @@ -122,7 +121,6 @@ export const Tour: FunctionComponent< ) => { setShowTour(false) setShowPopup(false) - onClose && onClose(e) } @@ -162,16 +160,16 @@ export const Tour: FunctionComponent< ? 'nut-tour-mask' : 'nut-tour-mask nut-tour-mask-none' }`} - id="nut-tour-popid" + id={`nut-tour-popid${index}`} style={maskStyle()} /> )} {/* placeholder don't delete <> */} diff --git a/src/utils/get-rect-by-taro.ts b/src/utils/get-rect-by-taro.ts index 075b737b35..f1c9232459 100644 --- a/src/utils/get-rect-by-taro.ts +++ b/src/utils/get-rect-by-taro.ts @@ -1,6 +1,9 @@ import { createSelectorQuery } from '@tarojs/taro' +import MiniLru from '@/utils/lru' import { getRect, inBrowser } from '@/hooks/use-client-rect' +const lru = new MiniLru(10) + export interface Rect { dataset: Record id: string @@ -33,10 +36,17 @@ export const getRectByTaro = async ( } // 小程序下的逻辑 return new Promise((resolve, reject) => { + if (lru.has(element)) { + resolve(lru.get(element) as Rect) + return + } createSelectorQuery() .select(`#${harmonyId || element.uid}`) .boundingClientRect() .exec(([rects]) => { + if (rects) { + lru.set(element, rects) + } resolve(rects) }) }) diff --git a/src/utils/lru.ts b/src/utils/lru.ts new file mode 100644 index 0000000000..1d9cca3381 --- /dev/null +++ b/src/utils/lru.ts @@ -0,0 +1,36 @@ +export default class MiniLru { + private cache: Map + + private capacity: number + + constructor(capacity: number) { + if (capacity <= 0) { + throw new Error('Cache capacity must be a positive number') + } + this.cache = new Map() + this.capacity = capacity + } + + get(key: any): any | null { + if (this.cache.has(key)) { + const value = this.cache.get(key) + this.cache.delete(key) + this.cache.set(key, value) + return value + } + return null + } + + set(key: any, value: any): void { + if (this.cache.has(key)) { + this.cache.delete(key) + } else if (this.cache.size >= this.capacity) { + this.cache.delete(this.cache.keys().next().value) + } + this.cache.set(key, value) + } + + has(key: any): boolean { + return this.cache.has(key) + } +} From a7c611c892cfba08db82cdba6b16387ac88548a0 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 09:32:07 +0800 Subject: [PATCH 09/13] =?UTF-8?q?fix:=20tour=E5=8D=95=E6=B5=8B=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/tour/__test__/tour.spec.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/packages/tour/__test__/tour.spec.tsx b/src/packages/tour/__test__/tour.spec.tsx index bdcfba249f..2f2add257f 100644 --- a/src/packages/tour/__test__/tour.spec.tsx +++ b/src/packages/tour/__test__/tour.spec.tsx @@ -31,20 +31,22 @@ const steps4 = [ { content: '70+ 高质量组件，覆盖移动端主流场景', target: 'target4', + location: 'top-left', }, { content: '支持一套代码同时开发多端小程序+H5', target: 'target5', + location: 'top-left', }, { content: '基于京东APP 10.0 视觉规范', target: 'target6', - location: 'top-end', + location: 'top-right', }, { content: '支持定制主题，内置 700+ 个主题变量', target: 'target7', - location: 'top-end', + location: 'top-right', }, ] @@ -52,10 +54,12 @@ test('base render', () => { const root = document.createElement('div') root.id = 'target' const { container } = render( - + ) expect(document.querySelector('.nut-popover')).toBeTruthy() - expect(document.querySelector('.nut-popover-content-bottom-end')).toBeTruthy() + expect( + document.querySelector('.nut-popover-content-bottom-right') + ).toBeTruthy() }) test('custom style', () => { @@ -66,7 +70,7 @@ test('custom style', () => { visible list={steps} type="tile" - location="bottom-end" + location="bottom-right" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', @@ -91,7 +95,7 @@ test('custom offset', () => { visible list={steps2} type="tile" - location="bottom-end" + location="bottom-right" style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', @@ -112,7 +116,7 @@ test('slot render', () => { visible list={steps3} type="tile" - location="bottom-end" + location="bottom-right" offset={[8, 8]} style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', @@ -135,7 +139,7 @@ test('steps render', async () => { const root1 = document.createElement('div') root1.id = 'target5' const { container } = render( - + ) const btn = document.querySelectorAll( '.nut-tour-content-bottom-operate-btn' From 75449c274329720d4cc5bd9e61f0be5376171ace Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 11:11:57 +0800 Subject: [PATCH 10/13] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=91=BD?= =?UTF-8?q?=E5=90=8D,=E5=8D=95=E6=B5=8B=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../popover/__tests__/popover.spec.tsx | 137 +++++++++--------- src/packages/popover/popover.taro.tsx | 35 ++--- src/packages/popover/popover.tsx | 102 ++++++------- src/types/spec/popover/base.ts | 8 + 4 files changed, 140 insertions(+), 142 deletions(-) diff --git a/src/packages/popover/__tests__/popover.spec.tsx b/src/packages/popover/__tests__/popover.spec.tsx index 166105077c..e59417ec2d 100644 --- a/src/packages/popover/__tests__/popover.spec.tsx +++ b/src/packages/popover/__tests__/popover.spec.tsx @@ -4,6 +4,7 @@ import '@testing-library/jest-dom' import { Tips, Close } from '@nutui/icons-react' import Popover from '../index' import Button from '@/packages/button' +import { FullPosition } from '@/types' const itemList = [ { @@ -27,6 +28,10 @@ const itemListOne = [ icon: , action: { icon: , + onClick: (e: any) => { + console.log('onclick 1') + e.stopPropagation() + }, }, }, ] @@ -51,9 +56,7 @@ const itemListDisabled = [ test('render popover content', async () => { const { container } = render( - + ) const content = document.querySelectorAll('.nut-popover-content')[0] @@ -76,9 +79,7 @@ test('render popover content dark', async () => { test('render popover position', async () => { render( - + ) const content = document.querySelectorAll('.nut-popover-content')[0] @@ -87,66 +88,43 @@ test('render popover position', async () => { ) }) -test('render popover position2', async () => { - const { container } = render( +test('render popover position with arrowOffset', async () => { + const { rerender } = render( - + ) - const content = document.querySelectorAll( - '.nut-popover-arrow' - )[0] as HTMLElement - expect(content).toHaveAttribute('style', 'left: 36px;') -}) -test('render popover position22', async () => { - const { container } = render( - - - - ) - const content = document.querySelectorAll( - '.nut-popover-arrow' - )[0] as HTMLElement - expect(content).toHaveAttribute('style', 'left: calc(50% + 20px);') -}) + const checkArrowStyles = (location: FullPosition, expectedStyles: string) => { + rerender( + + + + ) + content = document.querySelectorAll('.nut-popover-arrow')[0] + expect(content).toHaveAttribute('style', expectedStyles) + } -test('render popover position3', async () => { - const { container } = render( - - - - ) - const content = document.querySelectorAll( - '.nut-popover-arrow' - )[0] as HTMLElement - expect(content).toHaveAttribute('style', 'top: -4px;') -}) + let content = document.querySelectorAll('.nut-popover-arrow')[0] + expect(content).toHaveAttribute('style', 'left: 36px;') -test('render popover position33', async () => { - const { container } = render( - - - - ) - const content = document.querySelectorAll( - '.nut-popover-arrow' - )[0] as HTMLElement - expect(content).toHaveAttribute('style', 'top: calc(50% - 20px);') + checkArrowStyles('bottom', 'left: calc(50% + 20px);') + checkArrowStyles('bottom-right', 'right: -4px;') + checkArrowStyles('left', 'top: calc(50% - 20px);') + checkArrowStyles('left-bottom', 'bottom: 36px;') + checkArrowStyles('left-top', 'top: -4px;') + checkArrowStyles('right', 'top: calc(50% - 20px);') + checkArrowStyles('right-bottom', 'bottom: 36px;') + checkArrowStyles('right-top', 'top: -4px;') + checkArrowStyles('top-right', 'right: -4px;') + checkArrowStyles('top-left', 'left: 36px;') + checkArrowStyles('top', 'left: calc(50% + 20px);') }) test('render position fixed ', async () => { const close = vi.fn() const click = vi.fn() - const { container, getByTestId } = render( + const { getByTestId } = render(
{ onClick={click} onClose={close} > - @@ -186,11 +164,9 @@ test('render position fixed ', async () => { test('should emit onchoose event when clicking the action', async () => { const choose = vi.fn() - const { container } = render( + render( - + ) const contentItem = document.querySelectorAll('.nut-popover-item')[0] @@ -201,11 +177,9 @@ test('should emit onchoose event when clicking the action', async () => { test('should not emit select event when the action is disabled', async () => { const choose = vi.fn() - const { container } = render( + render( - + ) const contentItem = document.querySelectorAll('.nut-popover-item')[0] @@ -213,10 +187,11 @@ test('should not emit select event when the action is disabled', async () => { await waitFor(() => expect(choose).not.toBeCalled()) }) -test('target id', async () => { - const choose = vi.fn() +test('click event', async () => { const close = vi.fn() - const { container, getByTestId } = render( + const close1 = vi.fn() + const open = vi.fn() + const { getByTestId, rerender } = render(
) fireEvent.click(getByTestId('closeid')) + await waitFor(() => + expect(document.querySelectorAll('.nut-popover')[0]).toHaveStyle({ + visibility: 'hidden', + }) + ) + + rerender( + <> + + + + ) + fireEvent.click(getByTestId('popid')) + await waitFor(() => { + expect(document.querySelectorAll('.nut-popover')[0]).toHaveStyle({ + visibility: 'hidden', + }) + }) }) diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 91338a10e4..c9d4f32a10 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -12,18 +12,10 @@ import Popup from '@/packages/popup/index.taro' import { getRectByTaro } from '@/utils/get-rect-by-taro' import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' -import { TaroPopoverProps, PopoverList } from '@/types' +import { TaroPopoverProps, PopoverList, WrapperPosition } from '@/types' import pxTransform from '@/utils/px-transform' import useUuid from '@/hooks/use-uuid' -export interface WrapperPosition { - width: number - height: number - left: number - top: number - right: number -} - const defaultProps = { ...ComponentDefaults, list: [], @@ -95,19 +87,16 @@ export const Popover: FunctionComponent< const popoverId = `popover-${uid}` const getWrapperPosition = async () => { - let rect - if (targetId) { - const elem = document.querySelector(`#${targetId}`) - rect = await getRectByTaro(elem, targetId) - } else { - rect = await getRectByTaro(popoverRef.current, popoverId) - } + const rect = targetId + ? await getRectByTaro(document.querySelector(`#${targetId}`), targetId) + : await getRectByTaro(popoverRef.current, popoverId) + const { width, height, right, left, top } = rect setWrapperPosition({ - width: rect.width, - height: rect.height, - left: rtl ? rect.right : rect.left, - top: rect.top, - right: rtl ? rect.left : rect.right, + width, + height, + left: rtl ? right : left, + top, + right: rtl ? left : right, }) } @@ -145,7 +134,6 @@ export const Popover: FunctionComponent< return styles } const { width, height, left, top, right } = wrapperPosition - const direction = location.split('-')[0] const skew = location.split('-')[1] let cross = 0 @@ -155,7 +143,6 @@ export const Popover: FunctionComponent< cross += +offset[1] parallel += +rtloffset } - if (width) { const dir = rtl ? 'right' : 'left' if (['bottom', 'top'].includes(direction)) { @@ -275,7 +262,7 @@ export const Popover: FunctionComponent< )} - {Array.isArray(children) ? children[1] : ''} + {Array.isArray(children) ? children[1] : null} {list.map((item, index) => { return ( (null) const popoverContentRef = useRef(null) const [showPopup, setShowPopup] = useState(false) - const [rootPosition, setRootPosition] = useState<{ - width: number - height: number - left: number - top: number - right: number - }>() - + const [wrapperPosition, setWrapperPosition] = useState() useEffect(() => { setShowPopup(visible) if (visible) { setTimeout(() => { - getContentWidth() + getWrapperPosition() }, 0) } }, [visible, location]) const update = useRef((e: any) => { - getContentWidth() + getWrapperPosition() }) + + let targetSet = [] + let element: Element | null = null + if (canUseDom && targetId) { + element = document.querySelector(`#${targetId}`) + targetSet = [element, popoverContentRef.current] + } else { + targetSet = [popoverRef.current, popoverContentRef.current] + } + const scrollableParents = useMemo(() => { + return getAllScrollableParents(element || popoverRef.current) + }, [element, popoverRef.current]) + useEffect(() => { if (visible) { scrollableParents.forEach((parent) => { @@ -103,14 +109,6 @@ export const Popover: FunctionComponent< } }, [visible]) - let element: Element | null = null - let targetSet = [] - if (canUseDom && targetId) { - element = document.querySelector(`#${targetId}`) as Element - targetSet = [element, popoverContentRef.current] - } else { - targetSet = [popoverRef.current, popoverContentRef.current] - } useClickAway( () => { onClick?.() @@ -123,25 +121,21 @@ export const Popover: FunctionComponent< closeOnOutsideClick ) - const scrollableParents = useMemo(() => { - return getAllScrollableParents((element || popoverRef.current) as Element) - }, [element, popoverRef.current]) - - const getContentWidth = () => { + const getWrapperPosition = () => { const rect = getRect( - targetId - ? (document.querySelector(`#${targetId}`) as Element) - : (popoverRef.current as Element) + targetId ? document.querySelector(`#${targetId}`) : popoverRef.current ) - - setRootPosition({ - width: rect.width, - height: rect.height, - left: rtl ? rect.right : rect.left, - top: - rect.top + - Math.max(document.documentElement.scrollTop, document.body.scrollTop), - right: rtl ? rect.left : rect.right, + const distance = Math.max( + document.documentElement.scrollTop, + document.body.scrollTop + ) + const { width, height, right, left, top } = rect + setWrapperPosition({ + width, + height, + left: rtl ? right : left, + top: top + distance, + right: rtl ? left : right, }) } @@ -159,12 +153,17 @@ export const Popover: FunctionComponent< return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${location}` } - const getRootPosition = () => { + const getPopoverPosition = () => { const styles: CSSProperties = {} - if (!rootPosition) return {} - const contentWidth = popoverContentRef.current?.clientWidth as number - const contentHeight = popoverContentRef.current?.clientHeight as number - const { width, height, left, top, right } = rootPosition + + if (!wrapperPosition) { + styles.visibility = 'hidden' + return styles + } + + const popWidth = popoverContentRef.current?.clientWidth as number + const popHeight = popoverContentRef.current?.clientHeight as number + const { width, height, left, top, right } = wrapperPosition const direction = location.split('-')[0] const skew = location.split('-')[1] let cross = 0 @@ -177,13 +176,12 @@ export const Popover: FunctionComponent< if (width) { const dir = rtl ? 'right' : 'left' if (['bottom', 'top'].includes(direction)) { - const h = - direction === 'bottom' ? height + cross : -(contentHeight + cross) + const h = direction === 'bottom' ? height + cross : -(popHeight + cross) styles.top = `${top + h}px` if (!skew) { styles[dir] = - `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px` + `${-(popWidth - width) / 2 + wrapperPosition[dir] + parallel}px` } if (skew === 'left') { styles.left = `${left + parallel}px` @@ -194,12 +192,10 @@ export const Popover: FunctionComponent< } if (['left', 'right'].includes(direction)) { const contentW = - direction === 'left' ? -(contentWidth + cross) : width + cross + direction === 'left' ? -(popWidth + cross) : width + cross styles.left = `${left + contentW}px` if (!skew) { - styles.top = `${ - top - contentHeight / 2 + height / 2 - 4 + parallel - }px` + styles.top = `${top - popHeight / 2 + height / 2 - 4 + parallel}px` } if (skew === 'top') { styles.top = `${top + parallel}px` @@ -209,10 +205,11 @@ export const Popover: FunctionComponent< } } } + styles.visibility = popWidth === 0 ? 'hidden' : 'initial' return styles } - const arrowStyle = () => { + const popoverArrowStyle = () => { const styles: CSSProperties = {} const direction = location.split('-')[0] const skew = location.split('-')[1] @@ -278,7 +275,10 @@ export const Popover: FunctionComponent< )} { createPortal( -
+
{showArrow && ( -
+
)} diff --git a/src/types/spec/popover/base.ts b/src/types/spec/popover/base.ts index adb5f5e981..816ceab984 100644 --- a/src/types/spec/popover/base.ts +++ b/src/types/spec/popover/base.ts @@ -11,6 +11,14 @@ export interface PopoverList { action?: { icon?: ReactNode; onClick?: (e: any) => void } } +export interface WrapperPosition { + width: number + height: number + left: number + top: number + right: number +} + export type BasePopover = POPUP_PROPS & BaseProps & { theme: UITheme From 28c07fd37a735c2e232bdc1866f9c177e1598a13 Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 12:18:05 +0800 Subject: [PATCH 11/13] =?UTF-8?q?fix:=20=E6=94=B9=E4=B8=BA=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=20nextTick?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/popover/popover.taro.tsx | 39 ++++++++++++++------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index c9d4f32a10..9c746b794d 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -6,6 +6,7 @@ import React, { useState, } from 'react' import classNames from 'classnames' +import { nextTick } from '@tarojs/taro' import { Text, View } from '@tarojs/components' import { ArrowRadius } from '@nutui/icons-react-taro' import Popup from '@/packages/popup/index.taro' @@ -74,12 +75,7 @@ export const Popover: FunctionComponent< useEffect(() => { setShowPopup(visible) if (visible) { - setTimeout(() => { - getWrapperPosition() - setTimeout(() => { - getPopoverContentW() - }, 300) - }, 10) + getWrapperPosition() } }, [visible]) @@ -87,23 +83,28 @@ export const Popover: FunctionComponent< const popoverId = `popover-${uid}` const getWrapperPosition = async () => { - const rect = targetId - ? await getRectByTaro(document.querySelector(`#${targetId}`), targetId) - : await getRectByTaro(popoverRef.current, popoverId) - const { width, height, right, left, top } = rect - setWrapperPosition({ - width, - height, - left: rtl ? right : left, - top, - right: rtl ? left : right, + nextTick(async () => { + const rect = targetId + ? await getRectByTaro(document.querySelector(`#${targetId}`), targetId) + : await getRectByTaro(popoverRef.current, popoverId) + const { width, height, right, left, top } = rect + setWrapperPosition({ + width, + height, + left: rtl ? right : left, + top, + right: rtl ? left : right, + }) + getPopoverContentW() }) } const getPopoverContentW = async () => { - const rectContent = await getRectByTaro(popoverContentRef.current) - setPopWidth(rectContent.width) - setPopHeight(rectContent.height) + nextTick(async () => { + const rectContent = await getRectByTaro(popoverContentRef.current) + setPopWidth(rectContent.width) + setPopHeight(rectContent.height) + }) } const clickAway = () => { From 8faad828441d140df20b75336dcc2daa5ed68e1a Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 15:55:00 +0800 Subject: [PATCH 12/13] docs: fixed --- src/packages/popover/doc.en-US.md | 4 ++-- src/packages/popover/doc.md | 4 ++-- src/packages/popover/doc.taro.md | 4 ++-- src/packages/popover/doc.zh-TW.md | 4 ++-- src/packages/tour/__test__/tour.spec.tsx | 3 --- src/packages/tour/demos/h5/demo2.tsx | 1 - src/packages/tour/demos/h5/demo3.tsx | 1 - src/packages/tour/demos/taro/demo2.tsx | 1 - src/packages/tour/demos/taro/demo3.tsx | 1 - 9 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/packages/popover/doc.en-US.md b/src/packages/popover/doc.en-US.md index 0be8a415bc..43652ede7d 100644 --- a/src/packages/popover/doc.en-US.md +++ b/src/packages/popover/doc.en-US.md @@ -144,7 +144,7 @@ The component provides the following CSS variables, which can be used to customi | \--nutui-popover-content-background-color | The background color of the options area | `$white` | | \--nutui-popover-divider-color | The bottom border color of the options area | `$color-border` | | \--nutui-popover-disable-color | Option Disabled Colors | `$color-text-disabled` | -| \--nutui-popover-menu-item-padding | The padding value of each item in the option area menu | `8px` | -| \--nutui-popover-menu-item-width | The width value of each item in the options | `160px` | +| \--nutui-popover-padding | The padding value of each item in the option area menu | `8px` | +| \--nutui-popover-item-width | The width value of each item in the options | `160px` | diff --git a/src/packages/popover/doc.md b/src/packages/popover/doc.md index 9602184a3c..dc2b55f3b6 100644 --- a/src/packages/popover/doc.md +++ b/src/packages/popover/doc.md @@ -148,7 +148,7 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | | \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | -| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | -| \--nutui-popover-menu-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding | 选项区菜单每一项的 padding 值 | `8px` | +| \--nutui-popover-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/popover/doc.taro.md b/src/packages/popover/doc.taro.md index 17f335194b..8830338658 100644 --- a/src/packages/popover/doc.taro.md +++ b/src/packages/popover/doc.taro.md @@ -139,7 +139,7 @@ PopoverList 属性是一个由对象构成的数组，数组中的每个对象 | \--nutui-popover-content-background-color | 选项区的背景颜色 | `$white` | | \--nutui-popover-divider-color | 选项区的底部 border 颜色 | `$color-border` | | \--nutui-popover-disable-color | 选项禁用的颜色 | `$color-text-disabled` | -| \--nutui-popover-menu-item-padding | 选项区菜单每一项的 padding 值 | `8px` | -| \--nutui-popover-menu-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding | 选项区菜单每一项的 padding 值 | `8px` | +| \--nutui-popover-item-width | 选项区菜单每一项宽度值，超过宽度值后，会折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/popover/doc.zh-TW.md b/src/packages/popover/doc.zh-TW.md index cbc574fc3a..ce90611f8c 100644 --- a/src/packages/popover/doc.zh-TW.md +++ b/src/packages/popover/doc.zh-TW.md @@ -148,7 +148,7 @@ PopoverList 屬性是一個由對象構成的數組，數組中的每個對象 | \--nutui-popover-content-background-color | 選項區的背景顏色 | `$white` | | \--nutui-popover-divider-color | 選項區的底部 border 顏色 | `$color-border` | | \--nutui-popover-disable-color | 選項禁用的顏色 | `$color-text-disabled` | -| \--nutui-popover-menu-item-padding | 選項區菜單每一項的 padding 值 | `8px` | -| \--nutui-popover-menu-item-width | 選項區菜單每一項寬度值，超過寬度值後，會折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding | 選項區菜單每一項的 padding 值 | `8px` | +| \--nutui-popover-item-width | 選項區菜單每一項寬度值，超過寬度值後，會折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/tour/__test__/tour.spec.tsx b/src/packages/tour/__test__/tour.spec.tsx index 2f2add257f..d1f767f4c6 100644 --- a/src/packages/tour/__test__/tour.spec.tsx +++ b/src/packages/tour/__test__/tour.spec.tsx @@ -74,7 +74,6 @@ test('custom style', () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -99,7 +98,6 @@ test('custom offset', () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -121,7 +119,6 @@ test('slot render', () => { style={{ '--nutui-popover-content-background-color': 'rgb(75, 76, 77)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} >
diff --git a/src/packages/tour/demos/h5/demo2.tsx b/src/packages/tour/demos/h5/demo2.tsx index a5d18272c4..12a414d142 100644 --- a/src/packages/tour/demos/h5/demo2.tsx +++ b/src/packages/tour/demos/h5/demo2.tsx @@ -38,7 +38,6 @@ const Demo2 = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} diff --git a/src/packages/tour/demos/h5/demo3.tsx b/src/packages/tour/demos/h5/demo3.tsx index adbdb1c60e..3c992fad8d 100644 --- a/src/packages/tour/demos/h5/demo3.tsx +++ b/src/packages/tour/demos/h5/demo3.tsx @@ -52,7 +52,6 @@ const Demo3 = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> diff --git a/src/packages/tour/demos/taro/demo2.tsx b/src/packages/tour/demos/taro/demo2.tsx index d65120eec4..a792a1810d 100644 --- a/src/packages/tour/demos/taro/demo2.tsx +++ b/src/packages/tour/demos/taro/demo2.tsx @@ -38,7 +38,6 @@ const Demo2 = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} diff --git a/src/packages/tour/demos/taro/demo3.tsx b/src/packages/tour/demos/taro/demo3.tsx index c29ce4fab2..6422eef8bb 100644 --- a/src/packages/tour/demos/taro/demo3.tsx +++ b/src/packages/tour/demos/taro/demo3.tsx @@ -53,7 +53,6 @@ const Demo3 = () => { style={{ '--nutui-popover-content-background-color': 'rgb(255, 0, 0)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> From 285da6e2aeab8055d32614430318a2347633184e Mon Sep 17 00:00:00 2001 From: hanyuxinting Date: Wed, 2 Apr 2025 16:08:07 +0800 Subject: [PATCH 13/13] docs: add --- .../sites-react/doc/docs/react/migrate-from-v2.en-US.md | 7 ++++++- src/sites/sites-react/doc/docs/react/migrate-from-v2.md | 7 ++++++- .../sites-react/doc/docs/taro/migrate-from-v2.en-US.md | 7 ++++++- src/sites/sites-react/doc/docs/taro/migrate-from-v2.md | 7 ++++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md index 570aa4230b..31dcbbe9b0 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md @@ -260,7 +260,12 @@ If your project uses these components, please read the documentation carefully a [//]: # '#### ImagePreview' [//]: # '#### NoticeBar' -[//]: # '#### Popover' + +#### Popover + +- Deprecated style variables that existed in the documentation have been removed, `--nutui-popover-hover-background-color`、`--nutui-popover-hover-text-color`、`--nutui-popover-border-color` +- Changed style variable, `--nutui-popover-menu-item-padding` -> `--nutui-popover-padding`，`--nutui-popover-menu-item-width` -> `--nutui-popover-item-width` +- Revised the data type for `location` to use a unified position type `FullPosition` #### Price diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md index 7f1a2479bd..620588c364 100644 --- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md +++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md @@ -271,7 +271,12 @@ plugins: [ [//]: # '#### ImagePreview' [//]: # '#### NoticeBar' -[//]: # '#### Popover' + +#### Popover + +- 废弃的样式变量，这些变量存在于文档，已删除：`--nutui-popover-hover-background-color`、`--nutui-popover-hover-text-color`、`--nutui-popover-border-color` +- 变更样式变量 `--nutui-popover-menu-item-padding` 变更为 `--nutui-popover-padding`，`--nutui-popover-menu-item-width` 变更为 `--nutui-popover-item-width` +- 修订 `location` 的数据类型，使用统一位置类型 `FullPosition` #### Price diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md index 570aa4230b..31dcbbe9b0 100644 --- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md +++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md @@ -260,7 +260,12 @@ If your project uses these components, please read the documentation carefully a [//]: # '#### ImagePreview' [//]: # '#### NoticeBar' -[//]: # '#### Popover' + +#### Popover + +- Deprecated style variables that existed in the documentation have been removed, `--nutui-popover-hover-background-color`、`--nutui-popover-hover-text-color`、`--nutui-popover-border-color` +- Changed style variable, `--nutui-popover-menu-item-padding` -> `--nutui-popover-padding`，`--nutui-popover-menu-item-width` -> `--nutui-popover-item-width` +- Revised the data type for `location` to use a unified position type `FullPosition` #### Price diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md index c063e14c46..be4ee60180 100644 --- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md +++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md @@ -274,7 +274,12 @@ plugins: [ [//]: # '#### ImagePreview' [//]: # '#### NoticeBar' -[//]: # '#### Popover' + +#### Popover + +- 废弃的样式变量，这些变量存在于文档，已删除：`--nutui-popover-hover-background-color`、`--nutui-popover-hover-text-color`、`--nutui-popover-border-color` +- 变更样式变量 `--nutui-popover-menu-item-padding` 变更为 `--nutui-popover-padding`，`--nutui-popover-menu-item-width` 变更为 `--nutui-popover-item-width` +- 修订 `location` 的数据类型，使用统一位置类型 `FullPosition` #### Price