diff --git a/src/config.json b/src/config.json index db596b002d..45b7ea68bf 100644 --- a/src/config.json +++ b/src/config.json @@ -854,6 +854,7 @@ "type": "component", "show": true, "taro": true, + "v15": true, "rn": true, "desc": "弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示", "author": "szg2008" diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap index da4e2fb170..3d8bb0b584 100644 --- a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap +++ b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap @@ -1,7 +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 exist 1`] = `"
选择地址
"`; +exports[`Address: show custom 2`] = `"
选择地址
请选择
浙江
湖南
福建
"`; + +exports[`Address: show custom icon 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; + +exports[`Address: show custom icon 2`] = `"
请选择地址
选择其他地址
"`; + +exports[`Address: show exist 1`] = `"
选择地址
"`; diff --git a/src/packages/address/__test__/address.spec.tsx b/src/packages/address/__test__/address.spec.tsx index bb69e02c95..ae9806b843 100644 --- a/src/packages/address/__test__/address.spec.tsx +++ b/src/packages/address/__test__/address.spec.tsx @@ -1,6 +1,7 @@ import React, { useRef } from 'react' import { fireEvent, render, waitFor } from '@testing-library/react' import '@testing-library/jest-dom' +import { Star } from '@nutui/icons-react' import { Address } from '../address' const existList = [ @@ -117,6 +118,48 @@ test('Address: show custom', async () => { expect(container.innerHTML).toMatchSnapshot() }) +test('Address: show custom', async () => { + const { container } = render( +
+ ) + expect(container.innerHTML).toMatchSnapshot() +}) + +test('Address: show custom icon', async () => { + const { container } = render( +
} + title="选择地址" + /> + ) + expect(container.innerHTML).toMatchSnapshot() +}) + +test('Address: show custom icon', async () => { + const onExistSelect = vi.fn() + const onSwitch = vi.fn() + const { container } = render( +
+ ) + expect(container.innerHTML).toMatchSnapshot() + const btn = container.querySelector('.nut-address-footer-btn') as Element + fireEvent.click(btn) + const leftIcon = container.querySelector('.nut-address-left-icon') as Element + expect(leftIcon).toBeTruthy() + fireEvent.click(leftIcon) +}) + test('Address: options disabled', async () => { const { container } = render(
) const items = container.querySelectorAll('.nut-cascader-item') diff --git a/src/packages/address/address.tsx b/src/packages/address/address.tsx index 901c982475..e7b0db7b53 100644 --- a/src/packages/address/address.tsx +++ b/src/packages/address/address.tsx @@ -121,19 +121,18 @@ export const InternalAddress: ForwardRefRenderFunction< } const renderLeftOnCustomSwitch = () => { - return ( - <> - {custom && ( -
- {React.isValidElement(backIcon) ? ( - backIcon - ) : ( - - )} -
- )} - - ) + if (custom) { + return ( +
+ {React.isValidElement(backIcon) ? ( + backIcon + ) : ( + + )} +
+ ) + } + return null } const selectedExistItem = (data: AddressList) => { diff --git a/src/packages/cascader/cascader.taro.tsx b/src/packages/cascader/cascader.taro.tsx index 39f7eb8dfc..e5a1419f18 100644 --- a/src/packages/cascader/cascader.taro.tsx +++ b/src/packages/cascader/cascader.taro.tsx @@ -481,7 +481,6 @@ const InternalCascader: ForwardRefRenderFunction< {...popupProps} visible={innerVisible} position="bottom" - style={{ overflowY: 'hidden' }} round closeIcon={closeIcon} closeable={closeable} diff --git a/src/packages/overlay/overlay.scss b/src/packages/overlay/overlay.scss index 6f4094dea2..8a53fb36f8 100644 --- a/src/packages/overlay/overlay.scss +++ b/src/packages/overlay/overlay.scss @@ -15,12 +15,6 @@ z-index: $overlay-zIndex; } -[dir='rtl'] .nut-overlay, -.nut-rtl .nut-overlay { - left: auto; - right: 0; -} - .nut-overflow-hidden { overflow: hidden !important; } @@ -67,3 +61,9 @@ animation-duration: $overlay-animation-duration; } } + +[dir='rtl'] .nut-overlay, +.nut-rtl .nut-overlay { + left: auto; + right: 0; +} diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/src/packages/popup/__tests__/popup.spec.tsx index d38de739ef..9f60141578 100644 --- a/src/packages/popup/__tests__/popup.spec.tsx +++ b/src/packages/popup/__tests__/popup.spec.tsx @@ -69,6 +69,28 @@ test('pop from right', () => { expect(pop).toBeTruthy() }) +test('pop title', () => { + const { container } = render() + const title = container.querySelector('.nut-popup-title-title') as HTMLElement + expect(title).toHaveTextContent('标题') +}) + +test('pop left', () => { + const { container } = render() + const title = container.querySelector('.nut-popup-title-left') as HTMLElement + expect(title).toHaveTextContent('返回') +}) + +test('pop description', () => { + const { container } = render( + + ) + const title = container.querySelector( + '.nut-popup-title-description' + ) as HTMLElement + expect(title).toHaveTextContent('副标题') +}) + test('should render close icon when using closeable prop', () => { const { container } = render() const closeIcon = container.querySelector( @@ -84,7 +106,7 @@ test('should have "nut-popup-round" class when setting the round prop', () => { }) test('should allow to using portal prop', () => { - render() + render() expect(document.body.querySelector('.nut-popup')).toBeTruthy() }) @@ -117,7 +139,6 @@ test('event click-title-right icon and keep overlay test ', () => { const closeIcon = container.querySelector( '.nut-popup-title-right' ) as HTMLElement - const overlay = container.querySelector('.nut-overlay') as Element fireEvent.click(closeIcon) expect(onCloseIconClick).toBeCalled() const overlay2 = container.querySelector('.hidden-render') as Element @@ -140,3 +161,13 @@ test('event click-overlay test', async () => { fireEvent.click(overlay) expect(onOverlayClick).toBeCalled() }) + +test('pop destroyOnClose', () => { + const onClose = vi.fn() + const { container } = render( + + ) + const overlay = container.querySelector('.nut-overlay') as Element + fireEvent.click(overlay) + expect(onClose).toBeCalled() +}) diff --git a/src/packages/popup/demo.taro.tsx b/src/packages/popup/demo.taro.tsx index 2286295589..d4513043c3 100644 --- a/src/packages/popup/demo.taro.tsx +++ b/src/packages/popup/demo.taro.tsx @@ -77,9 +77,7 @@ const PopupDemo = () => { return ( <>
- + {translated.ce5c5446} diff --git a/src/packages/popup/demos/h5/demo1.tsx b/src/packages/popup/demos/h5/demo1.tsx index 7a3a22fc6a..c39f71b785 100644 --- a/src/packages/popup/demos/h5/demo1.tsx +++ b/src/packages/popup/demos/h5/demo1.tsx @@ -1,25 +1,28 @@ import React, { useState } from 'react' import { Popup, Cell } from '@nutui/nutui-react' -const Demo1 = () => { - const [showBasic, setShowBasic] = useState(false) +const Demo = () => { + const [showIcon, setShowIcon] = useState(false) + return ( <> { - setShowBasic(true) + setShowIcon(true) }} /> { - setShowBasic(false) + setShowIcon(false) }} /> ) } -export default Demo1 +export default Demo diff --git a/src/packages/popup/demos/h5/demo2.tsx b/src/packages/popup/demos/h5/demo2.tsx index 5dc8ffa45a..4718b46b68 100644 --- a/src/packages/popup/demos/h5/demo2.tsx +++ b/src/packages/popup/demos/h5/demo2.tsx @@ -6,6 +6,7 @@ const Demo2 = () => { const [showBottom, setShowBottom] = useState(false) const [showLeft, setShowLeft] = useState(false) const [showRight, setShowRight] = useState(false) + const [showText, setShowText] = useState(false) return ( <> @@ -33,6 +34,12 @@ const Demo2 = () => { setShowRight(true) }} /> + { + setShowText(true) + }} + /> { /> { setShowLeft(false) @@ -58,12 +64,26 @@ const Demo2 = () => { /> { setShowRight(false) }} /> + { + setShowText(false) + }} + > +
+ {Array.from({ length: 10 }) + .fill('') + .map((_, i) => ( + 正文 + ))} +
+ ) } diff --git a/src/packages/popup/demos/taro/demo1.tsx b/src/packages/popup/demos/taro/demo1.tsx index 4b714a588c..990a6ca016 100644 --- a/src/packages/popup/demos/taro/demo1.tsx +++ b/src/packages/popup/demos/taro/demo1.tsx @@ -1,35 +1,28 @@ import React, { useState } from 'react' import { Popup, Cell } from '@nutui/nutui-react-taro' -import { ScrollView, Text } from '@tarojs/components' -const Demo1 = () => { - const [showBasic, setShowBasic] = useState(false) +const Demo = () => { + const [showIcon, setShowIcon] = useState(false) + return ( <> { - setShowBasic(true) + setShowIcon(true) }} /> { - setShowBasic(false) + setShowIcon(false) }} - > - - {Array.from({ length: 1 }) - .fill('') - .map((_, i) => ( - - 正文 - - ))} - - + /> ) } -export default Demo1 +export default Demo diff --git a/src/packages/popup/demos/taro/demo2.tsx b/src/packages/popup/demos/taro/demo2.tsx index 4ac4e69b86..6a5809282a 100644 --- a/src/packages/popup/demos/taro/demo2.tsx +++ b/src/packages/popup/demos/taro/demo2.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react' import { Popup, Cell } from '@nutui/nutui-react-taro' -import { ScrollView, View } from '@tarojs/components' +import { ScrollView, Text } from '@tarojs/components' const Demo2 = () => { const [showTop, setShowTop] = useState(false) const [showBottom, setShowBottom] = useState(false) const [showLeft, setShowLeft] = useState(false) const [showRight, setShowRight] = useState(false) + const [showText, setShowText] = useState(false) return ( <> @@ -34,6 +35,12 @@ const Demo2 = () => { setShowRight(true) }} /> + { + setShowText(true) + }} + /> { { setShowBottom(false) }} lockScroll - > - - {Array.from({ length: 200 }) - .fill('') - .map((_, i) => ( - - 底部弹出-{i} - - ))} - - + /> { setShowLeft(false) @@ -70,12 +69,28 @@ const Demo2 = () => { /> { setShowRight(false) }} /> + { + setShowText(false) + }} + > + + {Array.from({ length: 10 }) + .fill('') + .map((_, i) => ( + + 正文 + + ))} + + ) } diff --git a/src/packages/popup/demos/taro/demo8.tsx b/src/packages/popup/demos/taro/demo8.tsx index 38d6895dcb..c88e32c2fe 100644 --- a/src/packages/popup/demos/taro/demo8.tsx +++ b/src/packages/popup/demos/taro/demo8.tsx @@ -13,8 +13,13 @@ const Demo8 = () => { setScrollPenetration(true) }} /> - - + + {Array.from({ length: 200 }) .fill('') .map((_, i) => ( diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index a8dfa63ed5..b0d80ee228 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -1,17 +1,10 @@ @import '../overlay/overlay.scss'; .nut-popup { - /* #ifdef rn */ - position: absolute; - /* #endif */ - /* #ifndef rn */ position: fixed; - /* #endif */ - min-height: 26%; + min-height: 46%; max-height: 100%; - overflow-y: auto; background-color: $overlay-content-bg-color; - color: $color-title; -webkit-overflow-scrolling: touch; font-size: $font-size-base; @@ -24,38 +17,45 @@ padding: $popup-title-padding; position: relative; - &-left { - position: absolute; - left: $popup-title-padding; - } - - &-title { + &-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; + } + + &-title { + color: $color-title; font-weight: $font-weight-bold; font-size: $popup-title-font-size; + line-height: $popup-title-font-size; } &-description { - color: $color-text-help; + color: $color-text; font-size: $popup-description-font-size; font-weight: $font-weight; + &-gap { + margin-top: $popup-description-spacing; + } + } + + &-left { + position: absolute; + top: $popup-title-padding; + left: $popup-title-padding; } &-right { position: absolute; + top: $popup-title-padding; + right: $popup-title-padding; + z-index: 1; - cursor: pointer; width: $popup-icon-size; height: $popup-icon-size; - display: flex; - justify-content: center; - align-items: center; - top: $popup-title-padding; - right: $popup-title-padding; - color: $color-text-help; + color: $color-title; + cursor: pointer; &:active { opacity: 0.7; @@ -82,9 +82,8 @@ top: 50%; left: 50%; min-height: 10%; - /* #ifndef rn */ + max-width: 295px; transform: translate(-50%, -50%); - /* #endif */ &.nut-popup-round { border-radius: $popup-border-radius; @@ -93,7 +92,7 @@ &-bottom, &-top { - max-height: 83%; + max-height: 87%; } &-bottom { @@ -109,10 +108,8 @@ &-right { top: 0; right: 0; - /* #ifdef rn */ width: 100px; height: 100%; - /* #endif */ &.nut-popup-round { border-radius: $popup-border-radius 0 0 $popup-border-radius; @@ -122,10 +119,8 @@ &-left { top: 0; left: 0; - /* #ifdef rn */ width: 100px; height: 100%; - /* #endif */ &.nut-popup-round { border-radius: 0 $popup-border-radius $popup-border-radius 0; @@ -136,9 +131,6 @@ top: 0; left: 0; width: 100%; - /* #ifdef rn */ - height: 100px; - /* #endif */ &.nut-popup-round { border-radius: 0 0 $popup-border-radius $popup-border-radius; @@ -217,25 +209,19 @@ /* 从顶部滑出 */ @keyframes popup-slide-top-enter { from { - /* #ifndef rn */ transform: translate3d(0, -100%, 0); - /* #endif */ } } @keyframes popup-slide-top-exit { to { - /* #ifndef rn */ transform: translate3d(0, -100%, 0); - /* #endif */ } } &-top-enter-active, &-top-appear-active { - /* #ifndef rn */ transform: translate3d(0, 0%, 0); - /* #endif*/ animation-fill-mode: both; animation-name: popup-slide-top-enter; animation-duration: $popup-animation-duration; @@ -250,25 +236,19 @@ /* 从右侧滑出 */ @keyframes popup-slide-right-enter { from { - /* #ifndef rn */ transform: translate3d(100%, 0, 0); - /* #endif*/ } } @keyframes popup-slide-right-exit { to { - /* #ifndef rn */ transform: translate3d(100%, 0, 0); - /* #endif*/ } } &-right-enter-active, &-right-appear-active { - /* #ifndef rn */ transform: translate3d(0, 0, 0); - /* #endif*/ animation-fill-mode: both; animation-name: popup-slide-right-enter; animation-duration: $popup-animation-duration; @@ -283,25 +263,19 @@ /* 从底部滑出 */ @keyframes popup-slide-bottom-enter { from { - /* #ifndef rn */ transform: translate3d(0, 100%, 0); - /* #endif */ } } @keyframes slide-bottom-exit { to { - /* #ifndef rn */ transform: translate3d(0, 100%, 0); - /* #endif */ } } &-bottom-enter-active, &-bottom-appear-active { - /* #ifndef rn */ transform: translate(0, 0); - /* #endif */ animation-fill-mode: both; animation-name: popup-slide-bottom-enter; animation-duration: $popup-animation-duration; @@ -316,17 +290,13 @@ /* 从左侧滑出 */ @keyframes popup-slide-left-enter { from { - /* #ifndef rn */ transform: translate3d(-100%, 0, 0); - /* #endif */ } } @keyframes popup-slide-left-exit { to { - /* #ifndef rn */ transform: translate3d(-100%, 0, 0); - /* #endif */ } } @@ -398,9 +368,7 @@ &-center { left: auto; right: 50%; - /* #ifndef rn */ transform: translate(50%, -50%); - /* #endif*/ } &-bottom { diff --git a/src/packages/popup/popup.taro.tsx b/src/packages/popup/popup.taro.tsx index 07c5d61af9..836e947974 100644 --- a/src/packages/popup/popup.taro.tsx +++ b/src/packages/popup/popup.taro.tsx @@ -188,18 +188,16 @@ export const Popup: FunctionComponent< afterClose && afterClose() } - const resolveContainer = (getContainer: Teleport | undefined) => { - const container = - typeof getContainer === 'function' ? getContainer() : getContainer - return container || document.body - } - - const renderToContainer = (getContainer: Teleport, node: ReactElement) => { - if (getContainer) { - const container = resolveContainer(getContainer) - return createPortal(node, container) as ReactPortal - } - return node + const renderCloseIcon = () => { + return ( + <> + {closeable && ( + + {React.isValidElement(closeIcon) ? closeIcon : } + + )} + + ) } const renderTitle = () => { @@ -212,10 +210,16 @@ export const Popup: FunctionComponent< {left} )} {(title || description) && ( - - {title} + + {title && ( + + {title} + + )} {description && ( - + {description} )} @@ -223,24 +227,12 @@ export const Popup: FunctionComponent< )} )} - {closeable && ( - - {React.isValidElement(closeIcon) ? closeIcon : } - - )} + {renderCloseIcon()} ) } if (closeable) { - return ( - <> - {closeable && ( - - {React.isValidElement(closeIcon) ? closeIcon : } - - )} - - ) + return renderCloseIcon() } } const renderPop = () => { @@ -283,20 +275,33 @@ export const Popup: FunctionComponent< onClick={onHandleClickOverlay} /> ) : null} - <>{renderPop()} + {renderPop()} ) } useEffect(() => { - visible && open() - !visible && close() + visible ? open() : close() }, [visible]) useEffect(() => { setTransitionName(transition || `${classPrefix}-slide-${position}`) }, [position, transition]) + const resolveContainer = (getContainer: Teleport | undefined) => { + const container = + typeof getContainer === 'function' ? getContainer() : getContainer + return container || document.body + } + + const renderToContainer = (getContainer: Teleport, node: ReactElement) => { + if (getContainer) { + const container = resolveContainer(getContainer) + return createPortal(node, container) as ReactPortal + } + return node + } + return <>{renderToContainer(portal as Teleport, renderNode())} } diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index ca1abc71f4..06723bb723 100644 --- a/src/packages/popup/popup.tsx +++ b/src/packages/popup/popup.tsx @@ -191,18 +191,16 @@ export const Popup: FunctionComponent< afterClose && afterClose() } - const resolveContainer = (getContainer: Teleport | undefined) => { - const container = - typeof getContainer === 'function' ? getContainer() : getContainer - return container || document.body - } - - const renderToContainer = (getContainer: Teleport, node: ReactElement) => { - if (getContainer) { - const container = resolveContainer(getContainer) - return createPortal(node, container) as ReactPortal - } - return node + const renderCloseIcon = () => { + return ( + <> + {closeable && ( +
+ {React.isValidElement(closeIcon) ? closeIcon : } +
+ )} + + ) } const renderTitle = () => { @@ -215,10 +213,14 @@ export const Popup: FunctionComponent<
{left}
)} {(title || description) && ( -
- {title} +
+ {title && ( +
{title}
+ )} {description && ( -
+
{description}
)} @@ -226,24 +228,12 @@ export const Popup: FunctionComponent< )} )} - {closeable && ( -
- {React.isValidElement(closeIcon) ? closeIcon : } -
- )} + {renderCloseIcon()}
) } if (closeable) { - return ( - <> - {closeable && ( -
- {React.isValidElement(closeIcon) ? closeIcon : } -
- )} - - ) + return renderCloseIcon() } } const renderPop = () => { @@ -285,20 +275,33 @@ export const Popup: FunctionComponent< onClick={onHandleClickOverlay} /> ) : null} - <>{renderPop()} + {renderPop()} ) } useEffect(() => { - visible && open() - !visible && close() + visible ? open() : close() }, [visible]) useEffect(() => { setTransitionName(transition || `${classPrefix}-slide-${position}`) }, [position, transition]) + const resolveContainer = (getContainer: Teleport | undefined) => { + const container = + typeof getContainer === 'function' ? getContainer() : getContainer + return container || document.body + } + + const renderToContainer = (getContainer: Teleport, node: ReactElement) => { + if (getContainer) { + const container = resolveContainer(getContainer) + return createPortal(node, container) as ReactPortal + } + return node + } + return <>{renderToContainer(portal as Teleport, renderNode())} } diff --git a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap index 9ab6b57b77..e1495fa7ec 100644 --- a/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap +++ b/src/packages/timeselect/__test__/__snapshots__/timeselect.spec.tsx.snap @@ -1,5 +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 2`] = `"
取件时间
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/packages/timeselect/__test__/timeselect.spec.tsx b/src/packages/timeselect/__test__/timeselect.spec.tsx index a476128b18..05b5cf475d 100644 --- a/src/packages/timeselect/__test__/timeselect.spec.tsx +++ b/src/packages/timeselect/__test__/timeselect.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { render, waitFor } from '@testing-library/react' +import { fireEvent, render, waitFor } from '@testing-library/react' import '@testing-library/jest-dom' import ReactTestUtils from 'react-dom/test-utils' import { TimeSelect } from '../timeselect' @@ -29,14 +29,13 @@ test('timeselect props test', async () => { return } const { container } = render() - await waitFor(() => { - expect(container.outerHTML).toMatchSnapshot() - }) + expect(container.outerHTML).toMatchSnapshot() }) test('timeselect event test', async () => { const handleDateChange = vi.fn() const handleTimeChange = vi.fn() + const handleSelect = vi.fn() const App = () => { return ( { options={options} onDateChange={handleDateChange} onTimeChange={handleTimeChange} + onSelect={handleSelect} /> ) } @@ -61,5 +61,12 @@ test('timeselect event test', async () => { children: [options[0].children[0]], }, ]) + + const close = container.querySelector( + '.nut-popup-title-right-top-right' + ) as Element + fireEvent.click(close) + const overlay = container.querySelector('.nut-overlay') as HTMLElement + expect(overlay.style.display).toEqual('') }) }) diff --git a/src/packages/timeselect/demos/taro/demo1.tsx b/src/packages/timeselect/demos/taro/demo1.tsx index f5eb8291f6..80ef3b072b 100644 --- a/src/packages/timeselect/demos/taro/demo1.tsx +++ b/src/packages/timeselect/demos/taro/demo1.tsx @@ -53,9 +53,6 @@ const Demo1 = () => { { optionKey={optionKey} defaultValue={defaultValue} visible={visible} - style={{ - height: '30%', - }} onSelect={handleSelect} onDateChange={handleDateChange} onTimeChange={handleTimeChange} diff --git a/src/packages/timeselect/demos/taro/demo3.tsx b/src/packages/timeselect/demos/taro/demo3.tsx index e10c71251e..977856880b 100644 --- a/src/packages/timeselect/demos/taro/demo3.tsx +++ b/src/packages/timeselect/demos/taro/demo3.tsx @@ -53,9 +53,6 @@ const Demo3 = () => { > = ( position="bottom" title={title || locale.timeselect.pickupTime} style={{ - width: '100%', - height: '20%', ...style, }} onClose={closeFun} diff --git a/src/packages/timeselect/timeselect.tsx b/src/packages/timeselect/timeselect.tsx index a0ad3b94b8..1e6b91d674 100644 --- a/src/packages/timeselect/timeselect.tsx +++ b/src/packages/timeselect/timeselect.tsx @@ -144,8 +144,6 @@ export const TimeSelect: FunctionComponent> = ( position="bottom" title={title || locale.timeselect.pickupTime} style={{ - width: '100%', - height: '20%', ...style, }} onClose={closeFun} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 58c9661fc1..3fd4faf536 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1018,30 +1018,28 @@ $overlay-animation-duration: var( 0.3s ) !default; //popup（✅） -$popup-border-radius: var(--nutui-popup-border-radius, 24px) !default; -$popup-icon-size: var(--nutui-popup-icon-size, $font-size-xl) !default; +$popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default; +$popup-icon-size: var(--nutui-popup-icon-size, 20px) !default; $popup-title-padding: var(--nutui-popup-title-padding, 16px) !default; $popup-title-font-size: var( --nutui-popup-title-font-size, - $font-size-xl + $font-size-l ) !default; -$popup-description-font-size: var( - --nutui-popup-description-font-size, - $font-size-xs +$popup-title-font-weight: var( + --nutui-popup-title-font-weight, + $font-weight-bold ) !default; -$popup-title-height: var(--nutui-popup-title-height, 50px) !default; -$popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default; -$popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default; -$popup-icon-size: var(--nutui-popup-icon-size, $font-size-xl) !default; $popup-description-font-size: var( --nutui-popup-description-font-size, - $font-size-xs + $font-size-base ) !default; -$popup-title-font-weight: var( - --nutui-popup-title-font-weight, - $font-weight-bold +$popup-description-spacing: var( + --nutui-popup-description-spacing, + $spacing-base ) !default; $popup-title-height: var(--nutui-popup-title-height, 50px) !default; +$popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default; +$popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default; // Notify（✅） $notify-text-color: var(--nutui-notify-text-color, $white) !default;