diff --git a/packages/nutui-taro-demo/src/app.config.ts b/packages/nutui-taro-demo/src/app.config.ts index 7357a2dbf7..584a92e8b6 100644 --- a/packages/nutui-taro-demo/src/app.config.ts +++ b/packages/nutui-taro-demo/src/app.config.ts @@ -2,125 +2,37 @@ const subPackages = [ { "root": "base", - "pages": [ - "pages/button/index", - "pages/cell/index", - "pages/configprovider/index", - "pages/icon/index", - "pages/image/index", - "pages/overlay/index" - ] + "pages": [] }, { "root": "layout", - "pages": [ - "pages/divider/index", - "pages/grid/index", - "pages/layout/index", - "pages/safearea/index", - "pages/space/index", - "pages/sticky/index" - ] + "pages": [] }, { "root": "nav", - "pages": [ - "pages/backtop/index", - "pages/elevator/index", - "pages/fixednav/index", - "pages/hoverbutton/index", - "pages/navbar/index", - "pages/sidenavbar/index", - "pages/tabbar/index", - "pages/tabs/index" - ] + "pages": [] }, { "root": "dentry", - "pages": [ - "pages/address/index", - "pages/calendar/index", - "pages/calendarcard/index", - "pages/cascader/index", - "pages/checkbox/index", - "pages/datepicker/index", - "pages/form/index", - "pages/input/index", - "pages/inputnumber/index" - ] + "pages": [] }, { "root": "dataentry", - "pages": [ - "pages/menu/index", - "pages/numberkeyboard/index", - "pages/picker/index", - "pages/radio/index", - "pages/range/index", - "pages/rate/index", - "pages/searchbar/index", - "pages/shortpassword/index", - "pages/signature/index", - "pages/switch/index", - "pages/textarea/index", - "pages/uploader/index" - ] + "pages": [] }, { "root": "feedback", - "pages": [ - "pages/actionsheet/index", - "pages/badge/index", - "pages/dialog/index", - "pages/drag/index", - "pages/empty/index", - "pages/infiniteloading/index", - "pages/loading/index", - "pages/noticebar/index", - "pages/notify/index", - "pages/popover/index", - "pages/popup/index", - "pages/pulltorefresh/index", - "pages/resultpage/index", - "pages/skeleton/index", - "pages/swipe/index", - "pages/toast/index" - ] + "pages": [] }, { "root": "exhibition", "pages": [ - "pages/animate/index", - "pages/animatingnumbers/index", - "pages/avatar/index", - "pages/circleprogress/index", - "pages/collapse/index", - "pages/countdown/index", - "pages/ellipsis/index", - "pages/imagepreview/index", - "pages/indicator/index", - "pages/pagination/index", - "pages/price/index", - "pages/progress/index", - "pages/steps/index", - "pages/swiper/index", - "pages/table/index", - "pages/tag/index", - "pages/tour/index", - "pages/video/index", - "pages/virtuallist/index" + "pages/countdown/index" ] }, { "root": "business", - "pages": [ - "pages/avatarcropper/index", - "pages/barrage/index", - "pages/card/index", - "pages/timeselect/index", - "pages/trendarrow/index", - "pages/watermark/index" - ] + "pages": [] } ]; diff --git a/src/config.json b/src/config.json index 17793b696c..670152864a 100644 --- a/src/config.json +++ b/src/config.json @@ -987,7 +987,8 @@ "sort": 17, "show": true, "taro": true, - "author": "songsong" + "author": "songsong", + "v14": true }, { "version": "2.0.0", diff --git a/src/packages/countdown/__test__/__snapshots__/countdown.spec.tsx.snap b/src/packages/countdown/__test__/__snapshots__/countdown.spec.tsx.snap new file mode 100644 index 0000000000..e2ff6de2cd --- /dev/null +++ b/src/packages/countdown/__test__/__snapshots__/countdown.spec.tsx.snap @@ -0,0 +1,100 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Countdown > type props primary 1`] = ` +
+
+ + 00 + + : + + 00 + + : + + 00 + +
+
+`; + +exports[`Countdown > type props text 1`] = ` +
+
+ + 00 + + : + + 00 + + : + + 00 + +
+
+`; + +exports[`Countdown > type props text primary 1`] = ` +
+
+ + 00 + + : + + 00 + + : + + 00 + +
+
+ + 00 + + : + + 00 + + : + + 00 + +
+
+`; diff --git a/src/packages/countdown/__test__/countdown.spec.tsx b/src/packages/countdown/__test__/countdown.spec.tsx index fc08fa1c45..96ce8a74d0 100644 --- a/src/packages/countdown/__test__/countdown.spec.tsx +++ b/src/packages/countdown/__test__/countdown.spec.tsx @@ -43,6 +43,28 @@ describe('Countdown', () => { }) }) + test('type props text', async () => { + const { container } = render( + + ) + const countdownDom = container.querySelector('.nut-countdown') as Element + expect(container).toMatchSnapshot() + expect( + countdownDom?.querySelectorAll('.nut-countdown-number-text')?.length + ).toBe(3) + }) + + test('type props primary', async () => { + const { container } = render( + + ) + const countdownDom = container.querySelector('.nut-countdown') as Element + expect(container).toMatchSnapshot() + expect( + countdownDom?.querySelectorAll('.nut-countdown-number-primary')?.length + ).toBe(3) + }) + test('paused props', async () => { const testClick = vi.fn() let paused = false diff --git a/src/packages/countdown/countdown.scss b/src/packages/countdown/countdown.scss index 8591c93949..1c2a5ec431 100644 --- a/src/packages/countdown/countdown.scss +++ b/src/packages/countdown/countdown.scss @@ -6,6 +6,7 @@ font-size: $countdown-font-size; &-number-primary, &-number, + &-number-text, &-unit { display: flex; align-items: center; @@ -20,19 +21,24 @@ padding: $countdown-number-padding; border-radius: $countdown-number-border-radius; margin: $countdown-number-margin; + text-align: center; } &-number { border: 1px solid $countdown-number-border-color; background-color: $countdown-number-background-color; color: $countdown-number-color; - text-align: center; } &-number-primary { border: 1px solid $countdown-number-primary-border-color; background-color: $countdown-number-primary-background-color; color: $countdown-number-primary-color; } + &-number-text { + border: 0; + background-color: transparent; + color: $countdown-number-color; + } &-unit { - color: $color-primary; + color: $countdown-color; } } diff --git a/src/packages/countdown/countdown.taro.tsx b/src/packages/countdown/countdown.taro.tsx index f1f178d6c5..8dadad0955 100644 --- a/src/packages/countdown/countdown.taro.tsx +++ b/src/packages/countdown/countdown.taro.tsx @@ -2,40 +2,15 @@ import React, { useState, useRef, useEffect, - ReactNode, ForwardRefRenderFunction, useImperativeHandle, } from 'react' +import classNames from 'classnames' import { View } from '@tarojs/components' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { padZero } from '@/utils/pad-zero' import { web } from '@/utils/platform-taro' - -export interface CountDownTimeProps { - d: number - h: number - m: number - s: number - ms: number -} -export type CountDownType = 'default' | 'primary' -export interface CountDownProps extends BasicComponent { - type: CountDownType - paused: boolean - startTime: number - endTime: number - remainingTime: number - millisecond: boolean - format: string - autoStart: boolean - time: number - destroy: boolean - onEnd: () => void - onPaused: (restTime: number) => void - onRestart: (restTime: number) => void - onUpdate: (restTime: any) => void - children: ReactNode -} +import { CountDownProps, CountDownTimeProps } from './types' const defaultProps = { ...ComponentDefaults, @@ -198,7 +173,7 @@ const InternalCountDown: ForwardRefRenderFunction< } else if (formatCache.includes('SS')) { formatCache = formatCache.replace('SS', msC.slice(0, 2)) } else if (formatCache.includes('S')) { - formatCache = formatCache.replace('SS', msC.slice(0, 1)) + formatCache = formatCache.replace('S', msC.slice(0, 1)) } } @@ -237,8 +212,7 @@ const InternalCountDown: ForwardRefRenderFunction< // 监听值变更 useEffect(() => { const tranTime = formatRemainTime(stateRef.current.restTime, 'custom') - - onUpdate && onUpdate(tranTime) + onUpdate && onUpdate(tranTime as CountDownTimeProps) }, [restTimeStamp]) // 监听暂停 @@ -301,9 +275,13 @@ const InternalCountDown: ForwardRefRenderFunction< {format.includes(formatUnit) ? ( <> - {padZero(time)} + {unit ? padZero(time) : time} {unit ? ( {getUnit(unit)} @@ -335,7 +313,7 @@ const InternalCountDown: ForwardRefRenderFunction< 'S', padZero(ms, 3) .toString() - .slice(0, digit || 2) + .slice(0, digit || 1) )} ) diff --git a/src/packages/countdown/countdown.tsx b/src/packages/countdown/countdown.tsx index e9bb2da527..75cebabf6b 100644 --- a/src/packages/countdown/countdown.tsx +++ b/src/packages/countdown/countdown.tsx @@ -2,32 +2,12 @@ import React, { useState, useRef, useEffect, - ReactNode, ForwardRefRenderFunction, useImperativeHandle, } from 'react' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { padZero } from '@/utils/pad-zero' - -export type CountDownType = 'default' | 'primary' - -export interface CountDownProps extends BasicComponent { - type: CountDownType - paused: boolean - startTime: number - endTime: number - remainingTime: number - millisecond: boolean - format: string - autoStart: boolean - time: number - destroy: boolean - onEnd: () => void - onPaused: (restTime: number) => void - onRestart: (restTime: number) => void - onUpdate: (restTime: any) => void - children: ReactNode -} +import { CountDownProps, CountDownTimeProps } from './types' const defaultProps = { ...ComponentDefaults, @@ -194,14 +174,18 @@ const InternalCountDown: ForwardRefRenderFunction< } else if (formatCache.includes('SS')) { formatCache = formatCache.replace('SS', msC.slice(0, 2)) } else if (formatCache.includes('S')) { - formatCache = formatCache.replace('SS', msC.slice(0, 1)) + formatCache = formatCache.replace('S', msC.slice(0, 1)) } } + const isTextDom = + type === 'text' + ? `$1` + : `$1` formatCache = formatCache.replace( /(\d+)/g, type === 'primary' ? `$1` - : `$1` + : isTextDom ) return formatCache @@ -241,7 +225,7 @@ const InternalCountDown: ForwardRefRenderFunction< useEffect(() => { const tranTime = formatRemainTime(stateRef.current.restTime, 'custom') - onUpdate && onUpdate(tranTime) + onUpdate && onUpdate(tranTime as CountDownTimeProps) }, [restTimeStamp]) // 监听暂停 diff --git a/src/packages/countdown/demos/h5/demo1.tsx b/src/packages/countdown/demos/h5/demo1.tsx index 2b216cb815..7119a3f3cd 100644 --- a/src/packages/countdown/demos/h5/demo1.tsx +++ b/src/packages/countdown/demos/h5/demo1.tsx @@ -10,13 +10,20 @@ const Demo1 = () => { } return ( <> + + + diff --git a/src/packages/countdown/demos/h5/demo3.tsx b/src/packages/countdown/demos/h5/demo3.tsx index 4932c253f7..6fdedc8d60 100644 --- a/src/packages/countdown/demos/h5/demo3.tsx +++ b/src/packages/countdown/demos/h5/demo3.tsx @@ -4,14 +4,24 @@ import { Cell, CountDown } from '@nutui/nutui-react' const Demo3 = () => { const stateRef = useRef({ endTime: Date.now() + 60 * 1000, + endDay: Date.now() + 60 * 1000 * 60 * 25, }) return ( - - - + <> + + + + + + + + + + ) } export default Demo3 diff --git a/src/packages/countdown/demos/h5/demo4.tsx b/src/packages/countdown/demos/h5/demo4.tsx index a3f380de89..d83420ca0c 100644 --- a/src/packages/countdown/demos/h5/demo4.tsx +++ b/src/packages/countdown/demos/h5/demo4.tsx @@ -10,7 +10,7 @@ const Demo4 = () => { ) diff --git a/src/packages/countdown/demos/taro/demo1.tsx b/src/packages/countdown/demos/taro/demo1.tsx index 8d1e389c29..a5bf4b6083 100644 --- a/src/packages/countdown/demos/taro/demo1.tsx +++ b/src/packages/countdown/demos/taro/demo1.tsx @@ -10,13 +10,20 @@ const Demo1 = () => { } return ( <> + + + diff --git a/src/packages/countdown/demos/taro/demo3.tsx b/src/packages/countdown/demos/taro/demo3.tsx index 381268fbfd..dff590bb02 100644 --- a/src/packages/countdown/demos/taro/demo3.tsx +++ b/src/packages/countdown/demos/taro/demo3.tsx @@ -4,11 +4,24 @@ import { Cell, CountDown } from '@nutui/nutui-react-taro' const Demo3 = () => { const stateRef = useRef({ endTime: Date.now() + 60 * 1000, + endDay: Date.now() + 60 * 1000 * 60 * 25, }) return ( - - - + <> + + + + + + + + + + ) } export default Demo3 diff --git a/src/packages/countdown/demos/taro/demo4.tsx b/src/packages/countdown/demos/taro/demo4.tsx index a80f32f01a..239f29c4bb 100644 --- a/src/packages/countdown/demos/taro/demo4.tsx +++ b/src/packages/countdown/demos/taro/demo4.tsx @@ -10,7 +10,7 @@ const Demo4 = () => { ) diff --git a/src/packages/countdown/doc.en-US.md b/src/packages/countdown/doc.en-US.md index a3b8740a79..433119dc17 100644 --- a/src/packages/countdown/doc.en-US.md +++ b/src/packages/countdown/doc.en-US.md @@ -90,6 +90,7 @@ Paused and restarted the countdown with the paused attribute | Property | Description | Type | Default | | --- | --- | --- | --- | +| type | Display Type | `default`\|`primary`\|`text` | `default` | | startTime | Start Time | `number` | `Date.now()` | | endTime | End Time | `number` | `Date.now()` | | remainingTime | Remaining time, unit milliseconds | `number` | `0` | @@ -131,18 +132,18 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-countdown-display | display mode of countdown | `flex` | +| \--nutui-countdown-display | Layout of countdown | `flex` | | \--nutui-countdown-color | Countdown text color | `$color-primary` | -| \--nutui-countdown-font-size | The font size of the countdown | `10px` | -| \--nutui-countdown-font-weight | Countdown font weight | `400` | -| \--nutui-countdown-width | Time area width of the countdown | `20px` | -| \--nutui-countdown-height | Time area height of the countdown | `14px` | -| \--nutui-countdown-number-padding | Countdown time area padding | `0 1px` | -| \--nutui-countdown-number-margin | Countdown time area margin | `0 2px` | -| \--countdown-number-border-radius | Countdown time area border radius | `2px` | -| \--nutui-countdown-color | Countdown time area text color | `$color-primary-light-pressed` | -| \--nutui-countdown-background-color | Countdown time area background color | `$color-primary` | -| \--nutui-countdown-border-color | Countdown time area border color color | `$color-primary` | -| \--nutui-countdown-primary-color | When type is primary, the text color of the countdown time area | `#FFFFFF` | -| \--nutui-countdown-primary-background-color | When type is primary, the background color of the countdown time area | `$color-primary` | -| \--nutui-countdown-primary-border-color | When type is primary, the border color of the countdown time area is the color | `$color-primary` | +| \--nutui-countdown-font-size | Countdown font size | `11px` | +| \--nutui-countdown-font-weight | Countdown font thickness | `400` | +| \--nutui-countdown-width | Countdown time area width | `16px` | +| \--nutui-countdown-height | Countdown time area height | `16px` | +| \--nutui-countdown-number-padding | Countdown time area padding | `0 0` | +| \--nutui-countdown-number-margin | Countdown time area margin | `0 1px` | +| \--nutui-countdown-number-border-radius | Countdown time area rounded angle size | `2px` | +| \--nutui-countdown-number-color | The text color of the countdown time area | `$color-primary` | +| \--nutui-countdown-background-color | Background color of the countdown time area | `$color-background-overlay` | +| \--nutui-countdown-border-color | Border color of the countdown time area | `$color-primary-light-pressed` | +| \--nutui-countdown-number-primary-color | When type is `primary`, the text color of the countdown time area | `$color-primary-text` | +| \--nutui-countdown-primary-background-color | When type is `primary`, the background color of the countdown time area | `$color-primary` | +| \--nutui-countdown-primary-border-color | When type is `primary`, the border color of the countdown time area | `$color-primary` | diff --git a/src/packages/countdown/doc.md b/src/packages/countdown/doc.md index d9a1424e7c..d26bfec589 100644 --- a/src/packages/countdown/doc.md +++ b/src/packages/countdown/doc.md @@ -90,7 +90,7 @@ import { CountDown } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 展示类型 | `default`\|`primary` | `default` | +| type | 展示类型 | `default`\|`primary`\|`text` | `default` | | startTime | 开始时间 | `number` | `Date.now()` | | endTime | 结束时间 | `number` | `Date.now()` | | remainingTime | 剩余时间，单位是毫秒 | `number` | `0` | @@ -135,16 +135,16 @@ import { CountDown } from '@nutui/nutui-react' | --- | --- | --- | | \--nutui-countdown-display | 倒计时的布局方式 | `flex` | | \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` | -| \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` | +| \--nutui-countdown-font-size | 倒计时的字体大小 | `11px` | | \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` | -| \--nutui-countdown-width | 倒计时的时间区域宽度 | `20px` | -| \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` | -| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` | -| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` | -| \--countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` | -| \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light-pressed` | -| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` | -| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` | -| \--nutui-countdown-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `#FFFFFF` | +| \--nutui-countdown-width | 倒计时的时间区域宽度 | `16px` | +| \--nutui-countdown-height | 倒计时的时间区域高度 | `16px` | +| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 0` | +| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 1px` | +| \--nutui-countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` | +| \--nutui-countdown-number-color | 倒计时的时间区域的文字颜色 | `$color-primary` | +| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-background-overlay` | +| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary-light-pressed` | +| \--nutui-countdown-number-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `$color-primary-text` | | \--nutui-countdown-primary-background-color | type为`primary`时，倒计时的时间区域的背景颜色 | `$color-primary` | | \--nutui-countdown-primary-border-color | type为`primary`时，倒计时的时间区域的边框颜色颜色 | `$color-primary` | diff --git a/src/packages/countdown/doc.taro.md b/src/packages/countdown/doc.taro.md index 4941c4712a..3b492caf8c 100644 --- a/src/packages/countdown/doc.taro.md +++ b/src/packages/countdown/doc.taro.md @@ -90,6 +90,7 @@ import { CountDown } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| type | 展示类型 | `default`\|`primary`\|`text` | `default` | | startTime | 开始时间 | `number` | `Date.now()` | | endTime | 结束时间 | `number` | `Date.now()` | | remainingTime | 剩余时间，单位是毫秒 | `number` | `0` | @@ -134,16 +135,16 @@ import { CountDown } from '@nutui/nutui-react-taro' | --- | --- | --- | | \--nutui-countdown-display | 倒计时的布局方式 | `flex` | | \--nutui-countdown-color | 倒计时的文字颜色 | `$color-primary` | -| \--nutui-countdown-font-size | 倒计时的字体大小 | `10px` | +| \--nutui-countdown-font-size | 倒计时的字体大小 | `11px` | | \--nutui-countdown-font-weight | 倒计时的字体粗细 | `400` | -| \--nutui-countdown-width | 倒计时的时间区域宽度 | `20px` | -| \--nutui-countdown-height | 倒计时的时间区域高度 | `14px` | -| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 1px` | -| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 2px` | -| \--countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` | -| \--nutui-countdown-color | 倒计时的时间区域的文字颜色 | `$color-primary-light-pressed` | -| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-primary` | -| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary` | -| \--nutui-countdown-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `#FFFFFF` | +| \--nutui-countdown-width | 倒计时的时间区域宽度 | `16px` | +| \--nutui-countdown-height | 倒计时的时间区域高度 | `16px` | +| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 0` | +| \--nutui-countdown-number-margin | 倒计时的时间区域margin | `0 1px` | +| \--nutui-countdown-number-border-radius | 倒计时的时间区域圆角大小 | `2px` | +| \--nutui-countdown-number-color | 倒计时的时间区域的文字颜色 | `$color-primary` | +| \--nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-background-overlay` | +| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary-light-pressed` | +| \--nutui-countdown-number-primary-color | type为`primary`时，倒计时的时间区域的文字颜色 | `$color-primary-text` | | \--nutui-countdown-primary-background-color | type为`primary`时，倒计时的时间区域的背景颜色 | `$color-primary` | | \--nutui-countdown-primary-border-color | type为`primary`时，倒计时的时间区域的边框颜色颜色 | `$color-primary` | diff --git a/src/packages/countdown/doc.zh-TW.md b/src/packages/countdown/doc.zh-TW.md index 4946d28a36..458a9aef45 100644 --- a/src/packages/countdown/doc.zh-TW.md +++ b/src/packages/countdown/doc.zh-TW.md @@ -90,6 +90,7 @@ import { CountDown } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | +| type | 展示類型 | `default`\|`primary`\|`text` | `default` | | startTime | 開始時間 | `number` | `Date.now()` | | endTime | 結束時間 | `number` | `Date.now()` | | remainingTime | 剩余時間，單位是毫秒 | `number` | `0` | @@ -132,18 +133,18 @@ import { CountDown } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-countdown-display | 倒計時的布局方式 | `flex` | -| \--nutui-countdown-color | 倒計時的文字顔色 | `$color-primary` | -| \--nutui-countdown-font-size | 倒計時的字體大小 | `10px` | +| \--nutui-countdown-display | 倒計時的佈局方式 | `flex` | +| \--nutui-countdown-color | 倒計時的文字顏色 | `$color-primary` | +| \--nutui-countdown-font-size | 倒計時的字體大小 | `11px` | | \--nutui-countdown-font-weight | 倒計時的字體粗細 | `400` | -| \--nutui-countdown-width | 倒計時的時間區域寬度 | `20px` | -| \--nutui-countdown-height | 倒計時的時間區域高度 | `14px` | -| \--nutui-countdown-number-padding | 倒計時的時間區域padding | `0 1px` | -| \--nutui-countdown-number-margin | 倒計時的時間區域margin | `0 2px` | -| \--countdown-number-border-radius | 倒計時的時間區域圓角大小 | `2px` | -| \--nutui-countdown-color | 倒計時的時間區域的文字顔色 | `$color-primary-light-pressed` | -| \--nutui-countdown-background-color | 倒計時的時間區域的背景顔色 | `$color-primary` | -| \--nutui-countdown-border-color | 倒計時的時間區域的邊框顔色顔色 | `$color-primary` | -| \--nutui-countdown-primary-color | type爲`primary`時，倒計時的時間區域的文字顔色 | `#FFFFFF` | -| \--nutui-countdown-primary-background-color | type爲`primary`時，倒計時的時間區域的背景顔色 | `$color-primary` | -| \--nutui-countdown-primary-border-color | type爲`primary`時，倒計時的時間區域的邊框顔色顔色 | `$color-primary` | +| \--nutui-countdown-width | 倒計時的時間區域寬度 | `16px` | +| \--nutui-countdown-height | 倒計時的時間區域高度 | `16px` | +| \--nutui-countdown-number-padding | 倒計時的時間區域padding | `0 0` | +| \--nutui-countdown-number-margin | 倒計時的時間區域margin | `0 1px` | +| \--nutui-countdown-number-border-radius | 倒計時的時間區域圓角大小 | `2px` | +| \--nutui-countdown-number-color | 倒計時的時間區域的文字顏色 | `$color-primary` | +| \--nutui-countdown-background-color | 倒計時的時間區域的背景顏色 | `$color-background-overlay` | +| \--nutui-countdown-border-color | 倒計時的時間區域的邊框顏色顏色 | `$color-primary-light-pressed` | +| \--nutui-countdown-number-primary-color | type爲`primary`時，倒計時的時間區域的文字顏色 | `$color-primary-text` | +| \--nutui-countdown-primary-background-color | type爲`primary`時，倒計時的時間區域的背景顏色 | `$color-primary` | +| \--nutui-countdown-primary-border-color | type爲`primary`時，倒計時的時間區域的邊框顏色顏色 | `$color-primary` | diff --git a/src/packages/countdown/index.taro.ts b/src/packages/countdown/index.taro.ts index 7613153601..f389d13d67 100644 --- a/src/packages/countdown/index.taro.ts +++ b/src/packages/countdown/index.taro.ts @@ -1,4 +1,4 @@ import { CountDown } from './countdown.taro' -export type { CountDownProps } from './countdown.taro' +export type { CountDownProps, CountDownType, CountDownTimeProps } from './types' export default CountDown diff --git a/src/packages/countdown/index.ts b/src/packages/countdown/index.ts index 5879e8eea8..d48a338dfd 100644 --- a/src/packages/countdown/index.ts +++ b/src/packages/countdown/index.ts @@ -1,4 +1,4 @@ import { CountDown } from './countdown' -export type { CountDownProps } from './countdown' +export type { CountDownProps, CountDownType, CountDownTimeProps } from './types' export default CountDown diff --git a/src/packages/countdown/types.ts b/src/packages/countdown/types.ts new file mode 100644 index 0000000000..1dce65f270 --- /dev/null +++ b/src/packages/countdown/types.ts @@ -0,0 +1,29 @@ +import { BasicComponent } from '@/utils/typings' + +export type CountDownType = 'default' | 'primary' | 'text' + +export interface CountDownTimeProps { + d: number + h: number + m: number + s: number + ms: number +} + +export interface CountDownProps extends BasicComponent { + type: CountDownType + paused: boolean + startTime: number + endTime: number + remainingTime: number + millisecond: boolean + format: string + autoStart: boolean + time: number + destroy: boolean + onEnd: () => void + onPaused: (restTime: number) => void + onRestart: (restTime: number) => void + onUpdate: (restTime: string | CountDownTimeProps) => void + children: React.ReactNode +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 27da2c93ca..d471a05575 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -778,43 +778,43 @@ $numberkeyboard-key-confirm-background-color: var( // countdown（✅） $countdown-display: var(--nutui-countdown-display, flex) !default; $countdown-color: var(--nutui-countdown-color, $color-primary) !default; -$countdown-font-size: var(--nutui-countdown-font-size, 10px) !default; -$coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default; -$countdown-height: var(--nutui-countdown-height, 14px) !default; -$countdown-width: var(--nutui-countdown-width, 20px) !default; -$countdown-number-padding: var( - --nutui-countdown-number-padding, - 0 1px +$countdown-font-size: var(--nutui-countdown-font-size, $font-size-xs) !default; +$coutdown-font-weight: var( + --nutui-countdown-font-weight, + $font-weight ) !default; +$countdown-height: var(--nutui-countdown-height, 16px) !default; +$countdown-width: var(--nutui-countdown-width, 16px) !default; +$countdown-number-padding: var(--nutui-countdown-number-padding, 0 0) !default; $countdown-number-border-radius: var( --nutui-countdown-number-border-radius, - 2px -) !default; -$countdown-number-margin: var(--nutui-countdown-number-margin, 0 2px) !default; -$countdown-number-border-color: var( - --nutui-countdown-number-border-color, - $color-primary-light-pressed + $radius-xxs ) !default; +$countdown-number-margin: var(--nutui-countdown-number-margin, 0 1px) !default; $countdown-number-color: var( --nutui-countdown-number-color, $color-primary ) !default; $countdown-number-background-color: var( --nutui-countdown-number-background-color, - transparent + $color-background-overlay ) !default; -$countdown-number-primary-border-color: var( - --nutui-countdown-number-primary-border-color, - $color-primary +$countdown-number-border-color: var( + --nutui-countdown-number-border-color, + $color-primary-light-pressed ) !default; $countdown-number-primary-color: var( --nutui-countdown-number-primary-color, - #ffffff + $color-primary-text ) !default; $countdown-number-primary-background-color: var( --nutui-countdown-number-primary-background-color, $color-primary ) !default; +$countdown-number-primary-border-color: var( + --nutui-countdown-number-primary-border-color, + $color-primary +) !default; //large price（✅） $price-symbol-padding-right: var(