From 8b51a1b3758eff8cbfd09e462a074f967e5d194f Mon Sep 17 00:00:00 2001 From: pengshixing <2644378911@qq.com> Date: Sat, 2 Dec 2023 17:28:29 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=98=BE=E7=A4=BA=E5=A4=A9=EF=BC=8C?= =?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=88=86=EF=BC=8C=E7=A7=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-ui-docs/markdown/countdown.md | 15 ++++----- .../src/components/countdown/index.tsx | 31 +++++++++++++------ packages/taro-ui/types/countdown.d.ts | 13 +++----- 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/packages/taro-ui-docs/markdown/countdown.md b/packages/taro-ui-docs/markdown/countdown.md index 3ff375099..d7ebe5c1f 100644 --- a/packages/taro-ui-docs/markdown/countdown.md +++ b/packages/taro-ui-docs/markdown/countdown.md @@ -54,29 +54,31 @@ export default class CountdownPage extends Taro.Component { ::: -## 显示天数 +## 自定义显示天，时，分，秒 :::demo ```html ``` - ::: - ## 自定义格式化 :::demo ```html 0) { - day = this.props.isShowDay ? Math.floor(this.seconds / (60 * 60 * 24)) : 0 + day = Math.floor(this.seconds / (60 * 60 * 24)) hours = Math.floor(this.seconds / (60 * 60)) - day * 24 minutes = Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60 seconds = @@ -137,11 +137,17 @@ export default class AtCountdown extends React.Component< minutes: '分', seconds: '秒' }, - isShowDay, isCard, - isShowHour + showFieldNames = { + isShowDay: false, + isShowHour: true, + isShowMinute: true, + isShowSecond: true + } } = this.props + const { isShowDay, isShowHour, isShowMinute, isShowSecond } = showFieldNames; + const { _day, _hours, _minutes, _seconds } = this.state return ( @@ -161,8 +167,12 @@ export default class AtCountdown extends React.Component< {isShowHour && ( )} - - + { + isShowMinute && + } + { + isShowSecond && + } ) } @@ -172,8 +182,12 @@ AtCountdown.defaultProps = { customStyle: '', className: '', isCard: false, - isShowDay: false, - isShowHour: true, + showFieldNames: { + isShowDay: false, + isShowHour: true, + isShowMinute: true, + isShowSecond: true + }, format: { day: '天', hours: '时', @@ -190,8 +204,7 @@ AtCountdown.propTypes = { customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), isCard: PropTypes.bool, - isShowDay: PropTypes.bool, - isShowHour: PropTypes.bool, + showFieldNames: PropTypes.object, format: PropTypes.object, day: PropTypes.number, hours: PropTypes.number, diff --git a/packages/taro-ui/types/countdown.d.ts b/packages/taro-ui/types/countdown.d.ts index 5ce1ce922..6939c41b8 100644 --- a/packages/taro-ui/types/countdown.d.ts +++ b/packages/taro-ui/types/countdown.d.ts @@ -25,6 +25,8 @@ export interface FormatObject { seconds: string } +type isTrue = string | boolean; + export interface AtCountDownProps extends AtComponent { /** * 是否显示卡片式样式 @@ -32,15 +34,10 @@ export interface AtCountDownProps extends AtComponent { */ isCard?: boolean /** - * 是否显示天数 - * @default false - */ - isShowDay?: boolean - /** - * 是否显示小时 - * @default true + * 自定义显示天，时，分，秒 + * @default {isShowDay:false,isShowHour:true,isShowMinute:true,isShowSecond:true} */ - isShowHour?: boolean + showFieldNames?: {isShowDay?: isTrue, isShowHour?: isTrue, isShowMinute?: isTrue, isShowSecond?: isTrue} /** * 格式化分割符号 * @default { day: '天', hours: '时', minutes: '分', seconds: '秒' } From 584342ee9d8438f67defa6d25dc0826629515e36 Mon Sep 17 00:00:00 2001 From: pengshixing <2644378911@qq.com> Date: Sat, 2 Dec 2023 18:02:01 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DcalculateTime?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/countdown/index.tsx | 50 +++++++++---------- 1 file changed, 23 insertions(+), 27 deletions(-) diff --git a/packages/taro-ui/src/components/countdown/index.tsx b/packages/taro-ui/src/components/countdown/index.tsx index d0370fce9..0f6f3d1fc 100644 --- a/packages/taro-ui/src/components/countdown/index.tsx +++ b/packages/taro-ui/src/components/countdown/index.tsx @@ -19,6 +19,20 @@ const toSeconds = ( seconds: number ): number => day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds +const defaultShowFieldNames = { + isShowDay: false, + isShowHour: true, + isShowMinute: true, + isShowSecond: true +} + +const defaultFormat = { + day: '天', + hours: '时', + minutes: '分', + seconds: '秒' +} + export default class AtCountdown extends React.Component< AtCountDownProps, AtCountdownState @@ -63,9 +77,11 @@ export default class AtCountdown extends React.Component< let [day, hours, minutes, seconds] = [0, 0, 0, 0] if (this.seconds > 0) { - day = Math.floor(this.seconds / (60 * 60 * 24)) - hours = Math.floor(this.seconds / (60 * 60)) - day * 24 - minutes = Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60 + const showFieldNames = this.props.showFieldNames || defaultShowFieldNames; + const { isShowDay, isShowHour, isShowMinute } = showFieldNames; + day = isShowDay ? Math.floor(this.seconds / (60 * 60 * 24)) : 0 + hours = isShowHour ? Math.floor(this.seconds / (60 * 60)) - day * 24 : 0 + minutes = isShowMinute ? Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60 : 0 seconds = Math.floor(this.seconds) - day * 24 * 60 * 60 - @@ -131,19 +147,9 @@ export default class AtCountdown extends React.Component< const { className, customStyle, - format = { - day: '天', - hours: '时', - minutes: '分', - seconds: '秒' - }, + format = defaultFormat, isCard, - showFieldNames = { - isShowDay: false, - isShowHour: true, - isShowMinute: true, - isShowSecond: true - } + showFieldNames = defaultShowFieldNames } = this.props const { isShowDay, isShowHour, isShowMinute, isShowSecond } = showFieldNames; @@ -182,18 +188,8 @@ AtCountdown.defaultProps = { customStyle: '', className: '', isCard: false, - showFieldNames: { - isShowDay: false, - isShowHour: true, - isShowMinute: true, - isShowSecond: true - }, - format: { - day: '天', - hours: '时', - minutes: '分', - seconds: '秒' - }, + showFieldNames: defaultShowFieldNames, + format: defaultFormat, day: 0, hours: 0, minutes: 0, From a624a9fd375ea8e044f7d873c6f2114f014b6bd5 Mon Sep 17 00:00:00 2001 From: pengshixing <2644378911@qq.com> Date: Sat, 9 Dec 2023 16:23:51 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=8F=AA=E6=B7=BB=E5=8A=A0isShowMin?= =?UTF-8?q?ute?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/taro-ui-docs/markdown/countdown.md | 26 +++++++--- .../src/components/countdown/index.tsx | 51 +++++++++---------- packages/taro-ui/types/countdown.d.ts | 18 +++++-- 3 files changed, 55 insertions(+), 40 deletions(-) diff --git a/packages/taro-ui-docs/markdown/countdown.md b/packages/taro-ui-docs/markdown/countdown.md index d7ebe5c1f..c3dee7e50 100644 --- a/packages/taro-ui-docs/markdown/countdown.md +++ b/packages/taro-ui-docs/markdown/countdown.md @@ -54,18 +54,13 @@ export default class CountdownPage extends Taro.Component { ::: -## 自定义显示天，时，分，秒 +## 显示天数 :::demo ```html ``` ::: + +## 只显示秒钟 + +:::demo + +```html + +``` +::: ## 自定义格式化 :::demo @@ -109,7 +117,9 @@ export default class CountdownPage extends Taro.Component { | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ------- | ------- | ----| -------- | | isCard | 是否显示卡片式样式 | Boolean | - | false | -| showFieldNames | 自定义显示天，时，分，秒 | Object | - | `isShowDay:false,isShowHour:true,isShowMinute:true,isShowSecond:true` | +| isShowDay | 是否显示天数 | Boolean | - | false | +| isShowHour | 是否显示小时 | Boolean | - | true | +| isShowMinute | 是否显示分钟 | Boolean | - | true | | format | 格式化分割符号 | Object | - | `day: '天',hours: '时',minutes: '分',seconds: '秒'` | | day | 天数 | Number | - | 0 | | hours | 小时 | Number | - | 0 | diff --git a/packages/taro-ui/src/components/countdown/index.tsx b/packages/taro-ui/src/components/countdown/index.tsx index 0f6f3d1fc..4fef28ea3 100644 --- a/packages/taro-ui/src/components/countdown/index.tsx +++ b/packages/taro-ui/src/components/countdown/index.tsx @@ -19,18 +19,11 @@ const toSeconds = ( seconds: number ): number => day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds -const defaultShowFieldNames = { - isShowDay: false, - isShowHour: true, - isShowMinute: true, - isShowSecond: true -} - const defaultFormat = { - day: '天', - hours: '时', - minutes: '分', - seconds: '秒' + day: '天', + hours: '时', + minutes: '分', + seconds: '秒' } export default class AtCountdown extends React.Component< @@ -77,11 +70,13 @@ export default class AtCountdown extends React.Component< let [day, hours, minutes, seconds] = [0, 0, 0, 0] if (this.seconds > 0) { - const showFieldNames = this.props.showFieldNames || defaultShowFieldNames; - const { isShowDay, isShowHour, isShowMinute } = showFieldNames; - day = isShowDay ? Math.floor(this.seconds / (60 * 60 * 24)) : 0 - hours = isShowHour ? Math.floor(this.seconds / (60 * 60)) - day * 24 : 0 - minutes = isShowMinute ? Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60 : 0 + day = this.props.isShowDay ? Math.floor(this.seconds / (60 * 60 * 24)) : 0 + hours = this.props.isShowHour + ? Math.floor(this.seconds / (60 * 60)) - day * 24 + : 0 + minutes = this.props.isShowMinute + ? Math.floor(this.seconds / 60) - day * 24 * 60 - hours * 60 + : 0 seconds = Math.floor(this.seconds) - day * 24 * 60 * 60 - @@ -149,11 +144,11 @@ export default class AtCountdown extends React.Component< customStyle, format = defaultFormat, isCard, - showFieldNames = defaultShowFieldNames + isShowDay, + isShowHour, + isShowMinute } = this.props - const { isShowDay, isShowHour, isShowMinute, isShowSecond } = showFieldNames; - const { _day, _hours, _minutes, _seconds } = this.state return ( @@ -173,12 +168,10 @@ export default class AtCountdown extends React.Component< {isShowHour && ( )} - { - isShowMinute && - } - { - isShowSecond && - } + {isShowMinute && ( + + )} + ) } @@ -188,7 +181,9 @@ AtCountdown.defaultProps = { customStyle: '', className: '', isCard: false, - showFieldNames: defaultShowFieldNames, + isShowDay: false, + isShowHour: true, + isShowMinute: true, format: defaultFormat, day: 0, hours: 0, @@ -200,7 +195,9 @@ AtCountdown.propTypes = { customStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), className: PropTypes.oneOfType([PropTypes.array, PropTypes.string]), isCard: PropTypes.bool, - showFieldNames: PropTypes.object, + isShowDay: PropTypes.bool, + isShowHour: PropTypes.bool, + isShowMinute: PropTypes.bool, format: PropTypes.object, day: PropTypes.number, hours: PropTypes.number, diff --git a/packages/taro-ui/types/countdown.d.ts b/packages/taro-ui/types/countdown.d.ts index 6939c41b8..071ab2223 100644 --- a/packages/taro-ui/types/countdown.d.ts +++ b/packages/taro-ui/types/countdown.d.ts @@ -25,8 +25,6 @@ export interface FormatObject { seconds: string } -type isTrue = string | boolean; - export interface AtCountDownProps extends AtComponent { /** * 是否显示卡片式样式 @@ -34,10 +32,20 @@ export interface AtCountDownProps extends AtComponent { */ isCard?: boolean /** - * 自定义显示天，时，分，秒 - * @default {isShowDay:false,isShowHour:true,isShowMinute:true,isShowSecond:true} + * 是否显示天数 + * @default false + */ + isShowDay?: boolean + /** + * 是否显示小时 + * @default true + */ + isShowHour?: boolean + /** + * 是否显示分钟 + * @default true */ - showFieldNames?: {isShowDay?: isTrue, isShowHour?: isTrue, isShowMinute?: isTrue, isShowSecond?: isTrue} + isShowMinute?: boolean /** * 格式化分割符号 * @default { day: '天', hours: '时', minutes: '分', seconds: '秒' }