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 7cb04916e9..7ad5b51431 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/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/__tests__/popover.spec.tsx b/src/packages/popover/__tests__/popover.spec.tsx index 44983b3641..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] @@ -75,78 +78,53 @@ test('render popover content dark', async () => { test('render popover position', async () => { render( - - + + ) 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( - - +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} > -
) - 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) }) }) test('should emit onchoose event when clicking the action', async () => { const choose = vi.fn() - const { container } = render( + render( - + ) - 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)) @@ -201,22 +177,21 @@ 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-menu-item')[0] + const contentItem = document.querySelectorAll('.nut-popover-item')[0] fireEvent.click(contentItem) 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/demo.scss b/src/packages/popover/demo.scss index ccd77f8fc9..fab7013aa4 100644 --- a/src/packages/popover/demo.scss +++ b/src/packages/popover/demo.scss @@ -1,35 +1,3 @@ -.demo-popover .nut-popover-content { - width: 120px; -} - -.customClass { - .nut-popover-content { - width: auto; - } - - .self-content { - width: 195px; - display: flex; - flex-wrap: wrap; - - &-item { - margin-top: 10px; - margin-bottom: 10px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - } - - &-desc { - margin-top: 5px; - width: 60px; - font-size: 10px; - text-align: center; - } - } -} - .brickBox { margin: 80px 0; display: flex; @@ -46,5 +14,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/demo.taro.tsx b/src/packages/popover/demo.taro.tsx index 94099fb696..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' @@ -10,51 +10,44 @@ import Demo3 from './demos/taro/demo3' import Demo4 from './demos/taro/demo4' import Demo41 from './demos/taro/demo4-1' import Demo5 from './demos/taro/demo5' -import Demo6 from './demos/taro/demo6' const PopoverDemo = () => { const [translated] = useTranslate({ 'zh-CN': { title: '基础用法', title1: '选项配置', - title2: '自定义内容', + title2: '自定义内容+颜色', title3: '位置自定义：多条数据', title6: '位置自定义：单条数据', title4: '自定义目标元素', - content: '自定义内容', - contentColor: '自定义颜色', }, 'en-US': { title: 'Basic Usage', title1: 'Option Configuration', - title2: 'Custom Content', + title2: 'Custom Content and Color', title3: 'Custom Location: multi datas', title6: 'Custom Location: one data', title4: 'Custom Target Element', - content: 'Custom Content', - contentColor: 'Custom Color', }, 'zh-TW': { title: '基礎用法', title1: '選項配置', - title2: '自定義內容', + title2: '自定義內容+顏色', title3: '位置自定義：多條資料', title6: '位置自定義：單一資料', title4: '自定義目標元素', - content: '自定義內容', - contentColor: '自定義顏色', }, }) return ( <>
- + {translated.title} {translated.title1} - {translated.content} + {translated.title2} {translated.title3} @@ -62,9 +55,7 @@ const PopoverDemo = () => { {translated.title4} - {translated.contentColor} - - + ) } diff --git a/src/packages/popover/demo.tsx b/src/packages/popover/demo.tsx index 893f3c95bb..45ff39609a 100644 --- a/src/packages/popover/demo.tsx +++ b/src/packages/popover/demo.tsx @@ -8,7 +8,6 @@ import Demo3 from './demos/h5/demo3' import Demo4 from './demos/h5/demo4' import Demo41 from './demos/h5/demo4-1' import Demo5 from './demos/h5/demo5' -import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' @@ -17,35 +16,30 @@ const PopoverDemo = () => { 'zh-CN': { title: '基础用法', title1: '选项配置', - title2: '自定义内容', + title2: '自定义内容+颜色', title3: '位置自定义：多条数据', title6: '位置自定义：单条数据', title4: '自定义目标元素', - content: '自定义内容', - contentColor: '自定义颜色', scroll: '置于可滚动容器中', fixed: '容器设置 position: fixed', }, 'en-US': { title: 'Basic Usage', title1: 'Option Configuration', - title2: 'Custom Content', + title2: 'Custom Content and Color', title3: 'Custom Location: multi datas', title6: 'Custom Location: one data', title4: 'Custom Target Element', - content: 'Custom Content', - contentColor: 'Custom Color', scroll: 'In scrollable contain', fixed: 'position: fixed', }, 'zh-TW': { title: '基礎用法', title1: '選項配置', - title2: '自定義內容', + title2: '自定義內容+顏色', title3: '位置自定義：多條資料', title6: '位置自定義：單一資料', title4: '自定義目標元素', - content: '自定義內容', contentColor: '自定義顏色', scroll: '置於可滾動容器中', fixed: '容器設置 position: fixed', @@ -59,7 +53,7 @@ const PopoverDemo = () => {

{translated.title1}

-

{translated.content}

+

{translated.title2}

{translated.title3}

@@ -67,8 +61,6 @@ const PopoverDemo = () => {

{translated.title4}

-

{translated.contentColor}

-

{translated.scroll}

{translated.fixed}

diff --git a/src/packages/popover/demos/h5/demo1.tsx b/src/packages/popover/demos/h5/demo1.tsx index 990d0bfdcb..eaaecb6c68 100644 --- a/src/packages/popover/demos/h5/demo1.tsx +++ b/src/packages/popover/demos/h5/demo1.tsx @@ -2,10 +2,10 @@ import React, { useState } from 'react' import { Popover, Button, Space } from '@nutui/nutui-react' import { Tips, Close } from '@nutui/icons-react' -const Demo1 = () => { +const Demo = () => { const [basic, setBasic] = useState(false) const [dark, setDark] = useState(false) - + const [index, setIndex] = useState(0) const itemList = [ { key: 'key1', @@ -13,6 +13,11 @@ const Demo1 = () => { icon: , action: { icon: , + onClick: (e: any) => { + e.stopPropagation() + index === 0 && basic && setBasic(false) + index === 1 && dark && setDark(false) + }, }, }, ] @@ -21,31 +26,34 @@ const Demo1 = () => { { basic ? setBasic(false) : setBasic(true) + setIndex(0) + }} + onOpen={() => { + console.log('打开菜单时触发') + }} + onClose={() => { + console.log('关闭菜单时触发') }} > - + { 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 913cd90498..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 fabf593ee1..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,77 +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-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/h5/demo4-1.tsx b/src/packages/popover/demos/h5/demo4-1.tsx index 0cced79b3d..e3e52d1d27 100644 --- a/src/packages/popover/demos/h5/demo4-1.tsx +++ b/src/packages/popover/demos/h5/demo4-1.tsx @@ -5,29 +5,36 @@ import { Picker, Toast, PickerOnChangeCallbackParameter, + FullPosition, } 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) - 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-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: , @@ -56,7 +63,6 @@ const Demo41 = () => { visible={showPicker} options={columns} duration="500" - title="" onConfirm={(list) => { let description = '' list.forEach((option: any) => { @@ -66,7 +72,7 @@ const Demo41 = () => { }} onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => { if (selectedOptions[0]?.value) { - setCurPostion(selectedOptions[0].value as string) + setCurPostion(selectedOptions[0].value as FullPosition) } }} onClose={() => { @@ -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 d75b9bb232..5cd6751e80 100644 --- a/src/packages/popover/demos/h5/demo4.tsx +++ b/src/packages/popover/demos/h5/demo4.tsx @@ -4,34 +4,35 @@ import { Cell, Picker, PickerOnChangeCallbackParameter, + FullPosition, } from '@nutui/nutui-react' 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: '主要文案内容', }, ] @@ -62,7 +63,7 @@ const Demo4 = () => { }} onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => { if (selectedOptions[0]?.value) { - setCurPostion(selectedOptions[0].value as string) + setCurPostion(selectedOptions[0].value as FullPosition) } }} onClose={() => { @@ -75,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..5aee27e346 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 4ace92582e..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,77 +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 5d3f4d4326..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('') + 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 b74f299d7e..43652ede7d 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 @@ -159,12 +142,9 @@ 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` | -| \--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 d95440c0ed..dc2b55f3b6 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-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 @@ -88,14 +81,6 @@ bottom-end # 底部右侧位置 ::: -### 自定义颜色 - -:::demo - - - -::: - ### 置于可滚动容器中 :::demo @@ -120,7 +105,7 @@ bottom-end # 底部右侧位置 | --- | --- | --- | --- | | list | 选项列表 | `PopoverList[]` | `[]` | | visible | 是否展示气泡弹出层 | `boolean` | `false` | -| location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `string` | `bottom` | +| location | 弹出位置，里面具体的参数值可以参考上面的位置自定义例子 | `FullPosition` | `bottom` | | offset | 出现位置的偏移量 | `string[]` \| `number[]` | `[0, 12]` | | arrowOffset | 小箭头的偏移量 | `number` | `0` | | showArrow | 是否显示小箭头 | `boolean` | `true` | @@ -161,12 +146,9 @@ 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` | -| \--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 fab25e83ab..8830338658 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 @@ -152,12 +137,9 @@ 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` | -| \--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 f82646bc76..ce90611f8c 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 @@ -161,12 +146,9 @@ 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` | -| \--nutui-popover-menu-item-width | 選項區菜單每一項寬度值，超過寬度值後，會折行展示，保障信息的完整性 | `160px` | +| \--nutui-popover-padding | 選項區菜單每一項的 padding 值 | `8px` | +| \--nutui-popover-item-width | 選項區菜單每一項寬度值，超過寬度值後，會折行展示，保障信息的完整性 | `160px` | diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 5b597c97a7..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; @@ -32,13 +31,14 @@ transform: rotate(90deg) translateY(-50%); } - &.nut-popover-arrow-left-start { + &.nut-popover-arrow-left-top { top: 16px; right: -8px; transform: rotate(90deg) translateY(0%); } - &.nut-popover-arrow-left-end { + &.nut-popover-arrow-left-bottom { + top: auto; bottom: 16px; right: -8px; transform: rotate(90deg) translateY(0%); @@ -53,13 +53,13 @@ transform: rotate(-90deg) translateY(-50%); } - &.nut-popover-arrow-right-start { + &.nut-popover-arrow-right-top { top: 16px; left: -8px; transform: rotate(-90deg) translateY(0%); } - &.nut-popover-arrow-right-end { + &.nut-popover-arrow-right-bottom { bottom: 16px; left: -8px; transform: rotate(-90deg) translateY(0%); @@ -77,13 +77,16 @@ max-height: initial; overflow-y: initial; - .nut-popover-menu-item { + &-group { + padding: 0 $popover-padding; + } + + .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 +94,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; } } @@ -145,18 +142,18 @@ } } - &-top-end { + &-top-right { right: 0; - .nut-popover-arrow-top-end { + .nut-popover-arrow-top-right { right: 16px; bottom: -3.5px; transform: rotate(180deg) translateX(0%); } } - &-top-start { + &-top-left { left: 0; - .nut-popover-arrow-top-start { + .nut-popover-arrow-top-left { left: 16px; bottom: -3.5px; transform: rotate(180deg) translateX(0%); @@ -170,35 +167,35 @@ } } - &-bottom-end { + &-bottom-right { right: 0; - .nut-popover-arrow-bottom-end { + .nut-popover-arrow-bottom-right { right: 16px; transform: translateX(0%); } } - &-bottom-start { + &-bottom-left { left: 0; - .nut-popover-arrow-bottom-start { + .nut-popover-arrow-bottom-left { left: 16px; transform: translateX(0%); } } - &-left-end { + &-left-bottom { bottom: 0; } - &-left-start { + &-left-top { top: 0; } - &-right-end { + &-right-bottom { bottom: 0; } - &-right-start { + &-right-top { top: 0; } } @@ -217,7 +214,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 +225,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 +233,6 @@ &-action-icon { right: auto; - left: $popover-menu-item-padding; } } &-top { @@ -246,21 +242,21 @@ transform: translateX(50%); } } - &-top-end { + &-top-right { right: auto; left: 0; - .nut-popover-arrow-top-end { + .nut-popover-arrow-top-right { right: auto; left: 16px; } } - &-top-start { + &-top-left { left: auto; right: 0; - .nut-popover-arrow-top-start { + .nut-popover-arrow-top-left { left: auto; right: 16px; } @@ -273,22 +269,22 @@ transform: translateX(50%); } } - &-bottom-end { + &-bottom-right { right: auto; left: 0; - .nut-popover-arrow-bottom-end { + .nut-popover-arrow-bottom-right { right: auto; left: 16px; } } - &-bottom-start { + &-bottom-left { left: auto; right: 0; - .nut-popover-arrow-bottom-start { + .nut-popover-arrow-bottom-left { left: auto; right: 16px; } diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 2c33febb6d..9c746b794d 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -6,23 +6,16 @@ import React, { useState, } from 'react' import classNames from 'classnames' -import Taro, { createSelectorQuery } from '@tarojs/taro' -import { View } from '@tarojs/components' +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' 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' - -export interface RootPosition { - width: number - height: number - left: number - top: number - right: number -} +import { TaroPopoverProps, PopoverList, WrapperPosition } from '@/types' +import pxTransform from '@/utils/px-transform' +import useUuid from '@/hooks/use-uuid' const defaultProps = { ...ComponentDefaults, @@ -33,7 +26,6 @@ const defaultProps = { offset: [0, 8], arrowOffset: 0, targetId: '', - className: '', showArrow: true, closeOnOutsideClick: true, closeOnActionClick: true, @@ -77,77 +69,54 @@ 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 [rootPosition, setRootPosition] = useState() + const [popWidth, setPopWidth] = useState(0) + const [popHeight, setPopHeight] = useState(0) + const [wrapperPosition, setWrapperPosition] = useState() useEffect(() => { setShowPopup(visible) if (visible) { - setTimeout(() => { - getContentWidth() - }, 0) + getWrapperPosition() } }, [visible]) - const getContentWidth = async () => { - let rect - - createSelectorQuery() - .selectViewport() - .scrollOffset(async (res) => { - const distance = res.scrollTop + const uid = useUuid() + const popoverId = `popover-${uid}` - 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, - }) + const getWrapperPosition = async () => { + 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, }) - .exec() - setTimeout(() => { getPopoverContentW() - }, 300) - } - - 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) + nextTick(async () => { + const rectContent = await getRectByTaro(popoverContentRef.current) + setPopWidth(rectContent.width) + setPopHeight(rectContent.height) + }) } const clickAway = () => { if (closeOnOutsideClick) { - onClick && onClick() - onClose && onClose() + onClick?.() + onClose?.() } } const classes = classNames( + classPrefix, { - [`${classPrefix}`]: true, [`${classPrefix}-${theme}`]: theme === 'dark', }, className @@ -155,16 +124,17 @@ 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 = () => { + 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 @@ -177,37 +147,40 @@ export const Popover: FunctionComponent< if (width) { const dir = rtl ? 'right' : 'left' if (['bottom', 'top'].includes(direction)) { - const h = direction === 'bottom' ? height + cross : -(elHeight + cross) - styles.top = `${top + h}px` + const h = direction === 'bottom' ? height + cross : -(popHeight + cross) + styles.top = pxTransform(top + h) if (!skew) { - styles[dir] = - `${-(elWidth - width) / 2 + rootPosition[dir] + parallel}px` + styles[dir] = pxTransform( + -(popWidth - width) / 2 + wrapperPosition[dir] + parallel + ) } - if (skew === 'start') { - styles.left = `${left + parallel}px` + if (skew === 'left') { + styles.left = pxTransform(left + parallel) } - if (skew === 'end') { - styles.left = `${right + parallel}px` + if (skew === 'right') { + styles.left = pxTransform(right + parallel) } } if (['left', 'right'].includes(direction)) { const contentW = - direction === 'left' ? -(elWidth + cross) : width + cross - styles.left = `${left + contentW}px` + direction === 'left' ? -(popWidth + cross) : width + cross + styles.left = pxTransform(left + contentW) if (!skew) { - styles.top = `${top - elHeight / 2 + height / 2 - 4 + parallel}px` + styles.top = pxTransform( + top - popHeight / 2 + height / 2 - 4 + parallel + ) } - if (skew === 'start') { - styles.top = `${top + parallel}px` + if (skew === 'top') { + styles.top = pxTransform(top + parallel) } - if (skew === 'end') { - styles.top = `${top + height + parallel}px` + if (skew === 'bottom') { + styles.top = pxTransform(top + height + parallel) } } } - styles.visibility = elWidth === 0 ? 'hidden' : 'initial' + styles.visibility = popWidth === 0 ? 'hidden' : 'initial' return styles } @@ -224,10 +197,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 +209,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` } } @@ -262,6 +235,7 @@ export const Popover: FunctionComponent< { props?.onClick?.() if (!visible) { @@ -275,7 +249,7 @@ export const Popover: FunctionComponent< {Array.isArray(children) ? children[0] : children} )} - + )} - {Array.isArray(children) ? children[1] : ''} + {Array.isArray(children) ? children[1] : null} {list.map((item, index) => { return ( 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..21508d739b 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -17,7 +17,7 @@ import useClickAway from '@/hooks/use-click-away' import { canUseDom } from '@/utils/can-use-dom' import { getAllScrollableParents } from '@/utils/get-scroll-parent' import { useRtl } from '@/packages/configprovider' -import { WebPopoverProps, PopoverList } from '@/types' +import { WebPopoverProps, PopoverList, WrapperPosition } from '@/types' const defaultProps = { ...ComponentDefaults, @@ -71,26 +71,32 @@ export const Popover: FunctionComponent< const popoverRef = useRef(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,31 +121,27 @@ 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, }) } const classes = classNames( + classPrefix, { - [`${classPrefix}`]: true, [`${classPrefix}-${theme}`]: theme === 'dark', }, className @@ -155,15 +149,21 @@ 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 = () => { + 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 @@ -176,42 +176,40 @@ 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 === 'start') { + if (skew === 'left') { styles.left = `${left + parallel}px` } - if (skew === 'end') { + if (skew === 'right') { styles.left = `${right + parallel}px` } } 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 === 'start') { + if (skew === 'top') { styles.top = `${top + parallel}px` } - if (skew === 'end') { + if (skew === 'bottom') { styles.top = `${top + height + parallel}px` } } } + 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] @@ -224,10 +222,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 +234,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` } } @@ -249,11 +247,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 +261,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} @@ -277,7 +275,10 @@ export const Popover: FunctionComponent< )} { createPortal( -
+
{showArrow && ( -
+
)} @@ -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/packages/tour/__test__/tour.spec.tsx b/src/packages/tour/__test__/tour.spec.tsx index bdcfba249f..d1f767f4c6 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,11 +70,10 @@ 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)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[0, 0]} maskWidth={50} @@ -91,11 +94,10 @@ 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)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> @@ -112,12 +114,11 @@ 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)', '--nutui-popover-text-color': 'rgb(255, 255, 255)', - '--nutui-popover-border-color': 'rgb(75, 76, 77)', }} >
@@ -135,7 +136,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' diff --git a/src/packages/tour/demo.taro.tsx b/src/packages/tour/demo.taro.tsx index 5d508c9d0d..15bb8ba9e2 100644 --- a/src/packages/tour/demo.taro.tsx +++ b/src/packages/tour/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 Header from '@/sites/components/header' import './demo.scss' @@ -31,7 +31,7 @@ const TourDemo = () => { 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..12a414d142 100644 --- a/src/packages/tour/demos/h5/demo2.tsx +++ b/src/packages/tour/demos/h5/demo2.tsx @@ -34,11 +34,10 @@ 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)', - '--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 4b03a63af1..3c992fad8d 100644 --- a/src/packages/tour/demos/h5/demo3.tsx +++ b/src/packages/tour/demos/h5/demo3.tsx @@ -48,11 +48,10 @@ 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)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> 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..a792a1810d 100644 --- a/src/packages/tour/demos/taro/demo2.tsx +++ b/src/packages/tour/demos/taro/demo2.tsx @@ -34,11 +34,10 @@ 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)', - '--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 67b09d9298..6422eef8bb 100644 --- a/src/packages/tour/demos/taro/demo3.tsx +++ b/src/packages/tour/demos/taro/demo3.tsx @@ -49,11 +49,10 @@ 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)', - '--nutui-popover-border-color': 'rgb(255, 0, 0)', }} offset={[8, 8]} /> 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/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 5b524d3cb6..171f967fa9 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 61559a9017..88cf0c8259 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 @@ -277,7 +277,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 5b524d3cb6..171f967fa9 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 fa1bde064e..2b317e987d 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 @@ -276,7 +276,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/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss index d0f70b7fab..f4d228c14c 100644 --- a/src/styles/variables-jmapp.scss +++ b/src/styles/variables-jmapp.scss @@ -1744,30 +1744,18 @@ $badge-outline-border: var( //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-menu-item-width: var(--nutui-popover-menu-item-width, 160px) !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 794cc13d6f..64608ffa0b 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; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index c752653fbe..5813c0a676 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1631,21 +1631,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 @@ -1654,11 +1645,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; 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 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) + } +}