diff --git a/package.json b/package.json index 53877aa614..4256726888 100644 --- a/package.json +++ b/package.json @@ -102,8 +102,8 @@ }, "dependencies": { "@babel/runtime": "^7.23.9", - "@nutui/icons-react": "^3.0.0-beta.1", - "@nutui/icons-react-taro": "^3.0.1-beta.0", + "@nutui/icons-react": "^3.0.0-beta.2", + "@nutui/icons-react-taro": "^3.0.0-beta.2", "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2", "@nutui/touch-emulator": "^1.0.0", "@react-spring/web": "~9.6.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9e7688eb58..7190680059 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,11 +18,11 @@ importers: specifier: ^7.23.9 version: 7.25.4 '@nutui/icons-react': - specifier: ^3.0.0-beta.1 - version: 3.0.0-beta.1 + specifier: ^3.0.0-beta.2 + version: 3.0.0-beta.2 '@nutui/icons-react-taro': - specifier: ^3.0.1-beta.0 - version: 3.0.1-beta.1 + specifier: ^3.0.0-beta.2 + version: 3.0.0-beta.2 '@nutui/jdesign-icons-react-taro': specifier: 1.0.6-beta.2 version: 1.0.6-beta.2 @@ -2386,14 +2386,14 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} - '@nutui/icons-react-taro@3.0.1-beta.1': - resolution: {integrity: sha512-ZWsNgmApFEqczvVnjuGK0V73Tz8DXantIE2rJ4niF9Wo59ul1xz7nJGhHHSQeQDvkQEziSTCOL/6pu/6yEMAmg==, tarball: https://registry.npmjs.org/@nutui/icons-react-taro/-/icons-react-taro-3.0.1-beta.1.tgz} + '@nutui/icons-react-taro@3.0.0-beta.2': + resolution: {integrity: sha512-18/mbhcHEVqDUYqSvZGK0gPl2AJMjqXarYj6mCFBdN4PWgaAh500YVncEwxmCYNbHm72qHZff+/UhOCU7OwAow==, tarball: https://registry.npmjs.org/@nutui/icons-react-taro/-/icons-react-taro-3.0.0-beta.2.tgz} '@nutui/icons-react@1.0.5': resolution: {integrity: sha512-0TYl3Fk+sVz95DKqn/7isYAvaK5YGnaBwMMib4rqYLoqi9GGFwgU9rp2hYXu/X5IYdWgshj0xiuGMK75/vUYbQ==} - '@nutui/icons-react@3.0.0-beta.1': - resolution: {integrity: sha512-2dpDPy8ZYcUHpqQ+F+/V7DKNDXi3NqJMsra/v79LWZ7k4/fnGKp/XDfsH7dC4LWjvX6PP+jiIB4m+7rYHZ60Dg==, tarball: https://registry.npmjs.org/@nutui/icons-react/-/icons-react-3.0.0-beta.1.tgz} + '@nutui/icons-react@3.0.0-beta.2': + resolution: {integrity: sha512-rzdOuRl4YKIKKnMSAS414PCbVfZVYouYjewWLrGSdA0GfrUzHifvIRIIHBSGUZ4XjUQC3PFK0mir2pox6jFCgQ==, tarball: https://registry.npmjs.org/@nutui/icons-react/-/icons-react-3.0.0-beta.2.tgz} '@nutui/jdesign-icons-react-taro@1.0.6-beta.2': resolution: {integrity: sha512-2Scz5c9o14gA7Mw5JdiEkc/KEbNlNWMcJMuqVyFVipYeeYN/118N/fvHVpocmJviN0Gc4P+u3ZB3dIQSA2j4Fw==} @@ -8675,7 +8675,7 @@ packages: engines: {node: '>= 0.6'} mime@1.6.0: - resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} + resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==, tarball: https://registry.npmjs.org/mime/-/mime-1.6.0.tgz} engines: {node: '>=4'} hasBin: true @@ -14893,11 +14893,11 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 - '@nutui/icons-react-taro@3.0.1-beta.1': {} + '@nutui/icons-react-taro@3.0.0-beta.2': {} '@nutui/icons-react@1.0.5': {} - '@nutui/icons-react@3.0.0-beta.1': {} + '@nutui/icons-react@3.0.0-beta.2': {} '@nutui/jdesign-icons-react-taro@1.0.6-beta.2': {} @@ -27028,4 +27028,4 @@ snapshots: toposort: 2.0.2 type-fest: 2.19.0 - zwitch@2.0.4: {} \ No newline at end of file + zwitch@2.0.4: {} diff --git a/src/config.json b/src/config.json index 57a6efe126..f6b5a7b096 100644 --- a/src/config.json +++ b/src/config.json @@ -839,7 +839,7 @@ "author": "vickyYE" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Popover", "type": "component", "cName": "气泡弹出框", @@ -847,6 +847,7 @@ "sort": 19, "show": true, "taro": true, + "v15": true, "author": "lzz" }, { diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap index 3d8bb0b584..bf829340b7 100644 --- a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap +++ b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap @@ -1,13 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
"`; +exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
"`; -exports[`Address: show custom 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; +exports[`Address: show custom 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; -exports[`Address: show custom 2`] = `"
选择地址
请选择
浙江
湖南
福建
"`; +exports[`Address: show custom 2`] = `"
选择地址
请选择
浙江
湖南
福建
"`; -exports[`Address: show custom icon 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; +exports[`Address: show custom icon 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; -exports[`Address: show custom icon 2`] = `"
请选择地址
选择其他地址
"`; +exports[`Address: show custom icon 2`] = `"
请选择地址
选择其他地址
"`; -exports[`Address: show exist 1`] = `"
选择地址
"`; +exports[`Address: show exist 1`] = `"
选择地址
"`; diff --git a/src/packages/audio/__test__/__snapshots__/audio.spec.tsx.snap b/src/packages/audio/__test__/__snapshots__/audio.spec.tsx.snap index f6ead158f4..8f0ac9dea5 100644 --- a/src/packages/audio/__test__/__snapshots__/audio.spec.tsx.snap +++ b/src/packages/audio/__test__/__snapshots__/audio.spec.tsx.snap @@ -19,9 +19,8 @@ exports[`icon type test 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap index df296e7a6b..e3cba2e658 100644 --- a/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap +++ b/src/packages/backtop/__test__/__snapshots__/backtop.spec.tsx.snap @@ -22,7 +22,6 @@ exports[`backtop custom test 1`] = `
diff --git a/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap b/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap index 01a621288e..8000829858 100644 --- a/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap +++ b/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap @@ -113,7 +113,6 @@ exports[`Cascader > visible true 1`] = ` @@ -143,7 +142,6 @@ exports[`Cascader > visible true 1`] = ` @@ -173,7 +171,6 @@ exports[`Cascader > visible true 1`] = ` @@ -215,7 +212,6 @@ exports[`Cascader > visible true 2`] = ` diff --git a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap index f9fdd2bae0..6379008bf0 100644 --- a/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap +++ b/src/packages/checkbox/__test__/__snapshots__/checkbox.spec.tsx.snap @@ -15,7 +15,6 @@ exports[`should match snapshot 1`] = ` @@ -83,7 +82,6 @@ exports[`should match snapshot 1`] = ` @@ -130,7 +128,6 @@ exports[`should match snapshot 1`] = ` diff --git a/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap b/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap index ae4e9a9fd6..aa66202d12 100644 --- a/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap +++ b/src/packages/grid/__test__/__snapshots__/grid.spec.tsx.snap @@ -20,9 +20,8 @@ exports[`render with column num 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -259,9 +251,8 @@ exports[`render with custom content 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -298,9 +289,8 @@ exports[`render with custom content 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -332,9 +322,8 @@ exports[`should match snapshot 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -43,9 +42,8 @@ exports[`child element count 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -64,9 +62,8 @@ exports[`child element count 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -85,9 +82,8 @@ exports[`child element count 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -164,9 +159,8 @@ exports[`tabbar height 1`] = ` xmlns="http://www.w3.org/2000/svg" >
diff --git a/src/packages/image/__test__/__snapshots__/image.spec.tsx.snap b/src/packages/image/__test__/__snapshots__/image.spec.tsx.snap index 64b689afa3..3b0c73fe31 100644 --- a/src/packages/image/__test__/__snapshots__/image.spec.tsx.snap +++ b/src/packages/image/__test__/__snapshots__/image.spec.tsx.snap @@ -23,9 +23,8 @@ exports[`image props test 1`] = ` xmlns="http://www.w3.org/2000/svg" >
diff --git a/src/packages/menu/__test__/__snapshots__/menu.spec.tsx.snap b/src/packages/menu/__test__/__snapshots__/menu.spec.tsx.snap index 7bd7dd4e1d..3781756b6b 100644 --- a/src/packages/menu/__test__/__snapshots__/menu.spec.tsx.snap +++ b/src/packages/menu/__test__/__snapshots__/menu.spec.tsx.snap @@ -27,7 +27,6 @@ exports[`should match snapshot 1`] = `
@@ -60,7 +59,6 @@ exports[`should match snapshot 1`] = ` @@ -124,7 +122,6 @@ exports[`should match snapshot of two columns in one line 1`] = `
@@ -157,7 +154,6 @@ exports[`should match snapshot of two columns in one line 1`] = ` diff --git a/src/packages/noticebar/__test__/__snapshots__/noticebar.spec.tsx.snap b/src/packages/noticebar/__test__/__snapshots__/noticebar.spec.tsx.snap index 34cd759e0a..5193e98fd9 100644 --- a/src/packages/noticebar/__test__/__snapshots__/noticebar.spec.tsx.snap +++ b/src/packages/noticebar/__test__/__snapshots__/noticebar.spec.tsx.snap @@ -22,7 +22,6 @@ exports[`align center test 1`] = ` @@ -63,7 +62,6 @@ exports[`noticebar base test 1`] = ` @@ -104,7 +102,6 @@ exports[`scrollable test 1`] = ` diff --git a/src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap b/src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap index ed7adfcba3..0f170052e6 100644 --- a/src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap +++ b/src/packages/numberkeyboard/_test_/__snapshots__/index.spec.tsx.snap @@ -328,7 +328,6 @@ exports[`should match snapshot 1`] = ` diff --git a/src/packages/popover/__tests__/__snapshots__/popover.spec.tsx.snap b/src/packages/popover/__tests__/__snapshots__/popover.spec.tsx.snap new file mode 100644 index 0000000000..3dbd32ca31 --- /dev/null +++ b/src/packages/popover/__tests__/__snapshots__/popover.spec.tsx.snap @@ -0,0 +1,44 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`render popover content dark 1`] = ` +
+
+ +
+
+`; + +exports[`target id 1`] = ` +
+ +
+`; diff --git a/src/packages/popover/__tests__/popover.spec.tsx b/src/packages/popover/__tests__/popover.spec.tsx index 983ffe969b..ef0ba408e2 100644 --- a/src/packages/popover/__tests__/popover.spec.tsx +++ b/src/packages/popover/__tests__/popover.spec.tsx @@ -1,6 +1,7 @@ import React from 'react' import { render, waitFor, fireEvent } from '@testing-library/react' import '@testing-library/jest-dom' +import { Tips, Close } from '@nutui/icons-react' import Popover from '../index' import Button from '@/packages/button' @@ -19,6 +20,17 @@ const itemList = [ }, ] +const itemListOne = [ + { + key: 'key1', + name: 'option1', + icon: , + action: { + icon: , + }, + }, +] + const itemListDisabled = [ { key: 'key1', @@ -50,8 +62,19 @@ test('render popover content', async () => { ) }) -test('render popover position', async () => { +test('render popover content dark', async () => { const { container } = render( + + + + ) + const content = document.querySelectorAll('.nut-popover')[0] + expect(content.className).toContain('nut-popover-dark') + expect(container).toMatchSnapshot() +}) + +test('render popover position', async () => { + render( + + 点击消失 + + + ) + fireEvent.click(getByTestId('closeid')) +}) diff --git a/src/packages/popover/demos/h5/demo1.tsx b/src/packages/popover/demos/h5/demo1.tsx index 5db0df494b..990d0bfdcb 100644 --- a/src/packages/popover/demos/h5/demo1.tsx +++ b/src/packages/popover/demos/h5/demo1.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Popover, Button } from '@nutui/nutui-react' +import { Popover, Button, Space } from '@nutui/nutui-react' +import { Tips, Close } from '@nutui/icons-react' const Demo1 = () => { const [basic, setBasic] = useState(false) @@ -8,24 +9,20 @@ const Demo1 = () => { const itemList = [ { key: 'key1', - name: 'option1', - }, - { - key: 'key2', - name: 'option2', - }, - { - key: 'key3', - name: 'option3', + name: '主要文案内容', + icon: , + action: { + icon: , + }, }, ] return ( - <> + { basic ? setBasic(false) : setBasic(true) }} @@ -39,7 +36,6 @@ const Demo1 = () => { list={itemList} theme="dark" location="bottom-start" - style={{ marginInlineEnd: '30px' }} onClick={() => { dark ? setDark(false) : setDark(true) }} @@ -48,7 +44,7 @@ const Demo1 = () => { 暗黑风格 - + ) } diff --git a/src/packages/popover/demos/h5/demo2.tsx b/src/packages/popover/demos/h5/demo2.tsx index ae5e0a8aaa..913cd90498 100644 --- a/src/packages/popover/demos/h5/demo2.tsx +++ b/src/packages/popover/demos/h5/demo2.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { Popover, Button } from '@nutui/nutui-react' +import { Popover, Button, Space } from '@nutui/nutui-react' import { Home, Cart, Location, Check } from '@nutui/icons-react' interface List { @@ -56,7 +56,7 @@ const Demo2 = () => { console.log('选择') } return ( - <> + { showIcon ? setShowIcon(false) : setShowIcon(true) }} list={iconItemList} - style={{ marginInlineEnd: '30px' }} + style={{ marginInlineEnd: 30 }} > - + ) } diff --git a/src/packages/popover/demos/h5/demo4.tsx b/src/packages/popover/demos/h5/demo4.tsx index a2456ca0c1..27ce80a3c9 100644 --- a/src/packages/popover/demos/h5/demo4.tsx +++ b/src/packages/popover/demos/h5/demo4.tsx @@ -34,10 +34,6 @@ const Demo4 = () => { key: 'key1', name: 'option1', }, - { - key: 'key2', - name: 'option2', - }, ] const handlePicker = () => { @@ -58,7 +54,6 @@ const Demo4 = () => { visible={showPicker} options={columns} duration="500" - title="" onConfirm={(list) => { let description = '' list.forEach((option: any) => { diff --git a/src/packages/popover/demos/taro/demo1.tsx b/src/packages/popover/demos/taro/demo1.tsx index caa3dbf098..0cc4e3e5ac 100644 --- a/src/packages/popover/demos/taro/demo1.tsx +++ b/src/packages/popover/demos/taro/demo1.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react' -import { Popover, Button } from '@nutui/nutui-react-taro' +import { Popover, Button, Space } from '@nutui/nutui-react-taro' +import { Tips, Close } from '@nutui/icons-react-taro' const Demo1 = () => { const [basic, setBasic] = useState(false) @@ -8,18 +9,18 @@ const Demo1 = () => { { key: 'key1', name: 'option1', - }, - { - key: 'key2', - name: 'option2', - }, - { - key: 'key3', - name: 'option3', + icon: , + action: { + icon: , + onClick: (e: any) => { + console.log('onclick 1') + e.stopPropagation() + }, + }, }, ] return ( - <> + { 暗黑风格 - + ) } diff --git a/src/packages/popover/demos/taro/demo4.tsx b/src/packages/popover/demos/taro/demo4.tsx index 4f17476027..633170b9aa 100644 --- a/src/packages/popover/demos/taro/demo4.tsx +++ b/src/packages/popover/demos/taro/demo4.tsx @@ -34,10 +34,6 @@ const Demo4 = () => { key: 'key1', name: 'option1', }, - { - key: 'key2', - name: 'option2', - }, ] const handlePicker = () => { @@ -58,7 +54,6 @@ const Demo4 = () => { visible={showPicker} options={columns} duration="500" - title="" onConfirm={(list) => { let description = '' list.forEach((option: any) => { diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss index 213d067cf2..5b597c97a7 100644 --- a/src/packages/popover/popover.scss +++ b/src/packages/popover/popover.scss @@ -7,93 +7,81 @@ &-arrow { position: absolute; - width: 0; - height: 0; - border: 8px solid transparent; + width: 8px; + height: 4px; + + .nut-icon-ArrowRadius { + position: absolute; + color: $popover-content-background-color; + } &-top { - bottom: 0; - border-top-color: $popover-border-color; - border-bottom-width: 0; - margin-bottom: -8px; + bottom: -4px; } &-bottom { - top: 0px; - border-bottom-color: $popover-border-color; - border-top-width: 0; - margin-top: -8px; + top: -4px; } &-left { - right: 0px; - border-left-color: $popover-border-color; - border-right-width: 0; - margin-right: -8px; + right: -6px; + transform-origin: center top; &.nut-popover-arrow-left { top: 50%; - transform: translateY(-50%); + transform: rotate(90deg) translateY(-50%); } &.nut-popover-arrow-left-start { top: 16px; - transform: translateY(0%); + right: -8px; + transform: rotate(90deg) translateY(0%); } &.nut-popover-arrow-left-end { bottom: 16px; - transform: translateY(0%); + right: -8px; + transform: rotate(90deg) translateY(0%); } } &-right { - left: 0px; - border-right-color: $popover-border-color; - border-left-width: 0; - margin-left: -8px; - + transform-origin: center top; &.nut-popover-arrow-right { top: 50%; - transform: translateY(-50%); + left: -6px; + transform: rotate(-90deg) translateY(-50%); } &.nut-popover-arrow-right-start { top: 16px; - transform: translateY(0%); + left: -8px; + transform: rotate(-90deg) translateY(0%); } &.nut-popover-arrow-right-end { bottom: 16px; - transform: translateY(0%); + left: -8px; + transform: rotate(-90deg) translateY(0%); } } } .nut-popover-content { position: absolute; - background-color: $popover-content-background-color; + background: $popover-content-background-color; border-radius: $popover-border-radius; font-size: $popover-font-size; - font-family: PingFangSC; - font-weight: normal; color: $popover-text-color; - box-shadow: 0 2px 12px #3232331f; + line-height: 28px; max-height: initial; overflow-y: initial; - &-group { - display: block; - height: 100%; - width: 100%; - } - .nut-popover-menu-item { - position: relative; display: flex; align-items: center; justify-content: center; - padding: $popover-menu-item-padding; + padding: 0 $popover-menu-item-padding; border-bottom: 1px solid $popover-divider-color; max-width: $popover-menu-item-width; word-wrap: break-word; @@ -103,14 +91,6 @@ border-bottom: none; } - &:hover:nth-of-type(2) { - border-radius: 8px 8px 0px 0px; - } - - &:hover:last-of-type { - border-radius: 0px 0px 8px 8px; - } - &-icon { display: flex; justify-content: center; @@ -128,7 +108,7 @@ &-name { width: calc(100% - 34px); word-break: keep-all; - margin: 0 6px 0 4px; + margin: 0 8px 0 4px; flex: 1; } @@ -140,6 +120,11 @@ height: 12px; font-size: 12px; color: $color-text; + .nut-icon { + width: 12px; + height: 12px; + font-size: 12px; + } } &.nut-popover-menu-disabled { @@ -155,7 +140,8 @@ &-top { .nut-popover-arrow-top { left: 50%; - transform: translateX(-50%); + transform-origin: center left; + transform: rotate(180deg) translateX(-50%); } } @@ -163,7 +149,8 @@ right: 0; .nut-popover-arrow-top-end { right: 16px; - transform: translateX(0%); + bottom: -3.5px; + transform: rotate(180deg) translateX(0%); } } @@ -171,7 +158,8 @@ left: 0; .nut-popover-arrow-top-start { left: 16px; - transform: translateX(0%); + bottom: -3.5px; + transform: rotate(180deg) translateX(0%); } } @@ -221,17 +209,8 @@ color: $popover-content-background-color; .nut-popover-arrow { - &-top { - border-top-color: $popover-text-color; - } - &-bottom { - border-bottom-color: $popover-text-color; - } - &-left { - border-left-color: $popover-text-color; - } - &-right { - border-right-color: $popover-text-color; + .nut-icon-ArrowRadius { + color: $popover-text-color; } } @@ -239,10 +218,8 @@ background: $popover-text-color !important; color: $popover-content-background-color !important; .nut-popover-menu-item { - border-bottom-color: $popover-content-background-color; - &:hover { - color: $popover-content-background-color; - background-color: $popover-text-color; + &-action-icon { + color: rgba(255, 255, 255, 0.8); } } } diff --git a/src/packages/popover/popover.taro.tsx b/src/packages/popover/popover.taro.tsx index 4fcd3d5bb2..8af0be91d9 100644 --- a/src/packages/popover/popover.taro.tsx +++ b/src/packages/popover/popover.taro.tsx @@ -8,6 +8,7 @@ import React, { import classNames from 'classnames' import Taro, { createSelectorQuery } from '@tarojs/taro' import { View } from '@tarojs/components' +import { ArrowRadius } from '@nutui/icons-react-taro' import Popup from '@/packages/popup/index.taro' import { PopupProps } from '@/packages/popup/popup.taro' import { getRectByTaro } from '@/utils/get-rect-by-taro' @@ -46,7 +47,7 @@ const defaultProps = { theme: 'light', location: 'bottom', visible: false, - offset: [0, 12], + offset: [0, 8], arrowOffset: 0, targetId: '', className: '', @@ -138,12 +139,12 @@ export const Popover: FunctionComponent< const getRectTaro = async (targetId: any): Promise => { return new Promise((resolve) => { - const query = createSelectorQuery() - query.select(`#${targetId}`) && - query.select(`#${targetId}`).boundingClientRect() - query.exec((res: any) => { - resolve(res[0]) - }) + createSelectorQuery() + .select(`#${targetId}`) + .boundingClientRect() + .exec((res: any) => { + resolve(res[0]) + }) }) } @@ -170,9 +171,7 @@ export const Popover: FunctionComponent< const popoverArrow = () => { const prefixCls = 'nut-popover-arrow' - const loca = location - const direction = loca.split('-')[0] - return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${loca}` + return `${prefixCls} ${prefixCls}-${location.split('-')[0]} ${prefixCls}-${location}` } const getRootPosition = () => { @@ -181,9 +180,6 @@ export const Popover: FunctionComponent< styles.visibility = 'hidden' return styles } - - const contentWidth = elWidth - const contentHeight = elHeight const { width, height, left, top, right } = rootPosition const direction = location.split('-')[0] const skew = location.split('-')[1] @@ -197,13 +193,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 : -(elHeight + cross) styles.top = `${top + h}px` if (!skew) { styles[dir] = - `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px` + `${-(elWidth - width) / 2 + rootPosition[dir] + parallel}px` } if (skew === 'start') { styles.left = `${left + parallel}px` @@ -214,12 +209,10 @@ export const Popover: FunctionComponent< } if (['left', 'right'].includes(direction)) { const contentW = - direction === 'left' ? -(contentWidth + cross) : width + cross + direction === 'left' ? -(elWidth + cross) : width + cross styles.left = `${left + contentW}px` if (!skew) { - styles.top = `${ - top - contentHeight / 2 + height / 2 - 4 + parallel - }px` + styles.top = `${top - elHeight / 2 + height / 2 - 4 + parallel}px` } if (skew === 'start') { styles.top = `${top + parallel}px` @@ -230,11 +223,7 @@ export const Popover: FunctionComponent< } } - if (elWidth === 0) { - styles.visibility = 'hidden' - } else { - styles.visibility = 'initial' - } + styles.visibility = elWidth === 0 ? 'hidden' : 'initial' return styles } @@ -312,7 +301,9 @@ export const Popover: FunctionComponent< > {showArrow && ( - + + + )} {Array.isArray(children) ? children[1] : ''} {list.map((item, index) => { @@ -328,22 +319,22 @@ export const Popover: FunctionComponent< key={item.key || index} onClick={() => handleSelect(item, index)} > - {item.icon ? ( + {item.icon && ( {item.icon} - ) : null} + )} {item.name} - {item.action && item.action.icon ? ( + {item.action && item.action.icon && ( item.action?.onClick?.(e)} > {item.action.icon} - ) : null} + )} ) })} diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx index 9d6c6f3acb..0bc5d668e1 100644 --- a/src/packages/popover/popover.tsx +++ b/src/packages/popover/popover.tsx @@ -9,6 +9,7 @@ import React, { } from 'react' import classNames from 'classnames' import { createPortal } from 'react-dom' +import { ArrowRadius } from '@nutui/icons-react' import Popup from '@/packages/popup' import { PopupProps } from '@/packages/popup/popup' import { getRect } from '@/utils/use-client-rect' @@ -43,7 +44,7 @@ const defaultProps = { theme: 'light', location: 'bottom', visible: false, - offset: [0, 12], + offset: [0, 8], arrowOffset: 0, targetId: '', showArrow: true, @@ -172,8 +173,7 @@ export const Popover: FunctionComponent< const popoverArrow = () => { const prefixCls = 'nut-popover-arrow' - const direction = location.split('-')[0] - return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${location}` + return `${prefixCls} ${prefixCls}-${location.split('-')[0]} ${prefixCls}-${location}` } const getRootPosition = () => { @@ -267,11 +267,11 @@ export const Popover: FunctionComponent< const handleSelect = (item: PopoverList, index: number) => { if (!item.disabled) { - onSelect?.(item, index) + onSelect && onSelect(item, index) } if (closeOnActionClick) { - onClick?.() - onClose?.() + onClick && onClick() + onClose && onClose() } } return ( @@ -281,11 +281,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} @@ -309,7 +309,9 @@ export const Popover: FunctionComponent< ref={popoverContentRef} > {showArrow && ( -
+
+ +
)} {Array.isArray(children) ? children[1] : null} {list.map((item, index) => { @@ -325,22 +327,22 @@ export const Popover: FunctionComponent< key={item.key || index} onClick={() => handleSelect(item, index)} > - {item.icon ? ( + {item.icon && (
{item.icon}
- ) : null} + )}
{item.name}
- {item.action && item.action.icon ? ( + {item.action && item.action.icon && (
item.action?.onClick?.(e)} > {item.action.icon}
- ) : null} + )}
) })} diff --git a/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap b/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap index cf42d441f7..f3b3157992 100644 --- a/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap +++ b/src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snap @@ -21,7 +21,6 @@ exports[`size test 1`] = ` diff --git a/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap b/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap index a387d2812e..bcd8e25d82 100644 --- a/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap +++ b/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap @@ -20,7 +20,6 @@ exports[`should render description correctly 1`] = ` diff --git a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap index 93df4815cd..9eeb47a2b8 100644 --- a/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap +++ b/src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap @@ -2,4 +2,4 @@ exports[`should only render title 1`] = `"
首页
11
分类
逛
"`; -exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; +exports[`should render fixed element when using bottom prop 1`] = `"
首页
分类
"`; diff --git a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap index e1495fa7ec..a3b053042a 100644 --- a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap +++ b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap @@ -1,3 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`timeselect props test 1`] = `"
取件时间
520
521
09:00-10:0010:00-11:0011:00-12:00
"`; +exports[`timeselect props test 1`] = `"
取件时间
520
521
09:00-10:0010:00-11:0011:00-12:00
"`; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 3fd4faf536..f882645e5b 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1585,14 +1585,14 @@ $badge-outline-border: var( ); //popover（✅） -$popover-border-radius: var(--nutui-popover-border-radius, 8px) !default; +$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, #1a1a1a) !default; +$popover-text-color: var(--nutui-popover-text-color, $color-mask) !default; $popover-hover-background-color: var( --nutui-popover-hover-background-color, #fff