Skip to content

feat: 添加无法自定义显示天，时，分，秒 #1716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 10, 2023
Merged

feat: 添加无法自定义显示天，时，分，秒 #1716

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8b51a1b
fix: 修复无法自定义显示天，时，分，秒
P4X666 Dec 2, 2023
584342e
fix: 修复calculateTime
P4X666 Dec 2, 2023
a624a9f
fix: 只添加isShowMinute
P4X666 Dec 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions packages/taro-ui-docs/markdown/countdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,29 +54,31 @@ export default class CountdownPage extends Taro.Component {

:::

## 显示天数
## 自定义显示天，时，分，秒

:::demo

```html
<AtCountdown
isShowDay
showFieldNames={{
isShowDay: true,
isShowHour: true,
isShowMinute: true,
isShowSecond: true
}}
day={2}
hours={1}
minutes={1}
seconds={10}
/>
```

:::

## 自定义格式化

:::demo

```html
<AtCountdown
isShowDay
format={{ hours: ':', minutes: ':', seconds: '' }}
day={2}
hours={1}
Expand Down Expand Up @@ -107,8 +109,7 @@ export default class CountdownPage extends Taro.Component {
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------- | ------- | ------- | ----| -------- |
| isCard | 是否显示卡片式样式 | Boolean | - | false |
| isShowDay | 是否显示天数 | Boolean | - | false |
| isShowHour | 是否显示小时 | Boolean | - | true |
| showFieldNames | 自定义显示天，时，分，秒 | Object | - | `isShowDay:false,isShowHour:true,isShowMinute:true,isShowSecond:true` |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此处变动可能引起版本兼容性问题，建议增加 isShowMinute 即可

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

现在已经按照建议改为只添加isShowMinute了

| format | 格式化分割符号 | Object | - | `day: '天',hours: '时',minutes: '分',seconds: '秒'` |
| day | 天数 | Number | - | 0 |
| hours | 小时 | Number | - | 0 |
Expand Down
55 changes: 32 additions & 23 deletions packages/taro-ui/src/components/countdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 = this.props.isShowDay ? Math.floor(this.seconds / (60 * 60 * 24)) : 0
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 -
Expand Down Expand Up @@ -131,17 +147,13 @@ export default class AtCountdown extends React.Component<
const {
className,
customStyle,
format = {
day: '天',
hours: '时',
minutes: '分',
seconds: '秒'
},
isShowDay,
format = defaultFormat,
isCard,
isShowHour
showFieldNames = defaultShowFieldNames
} = this.props

const { isShowDay, isShowHour, isShowMinute, isShowSecond } = showFieldNames;

const { _day, _hours, _minutes, _seconds } = this.state

return (
Expand All @@ -161,8 +173,12 @@ export default class AtCountdown extends React.Component<
{isShowHour && (
<AtCountdownItem num={_hours} separator={format?.hours || ''} />
)}
<AtCountdownItem num={_minutes} separator={format?.minutes || ''} />
<AtCountdownItem num={_seconds} separator={format?.seconds || ''} />
{
isShowMinute && <AtCountdownItem num={_minutes} separator={format?.minutes || ''} />
}
{
isShowSecond && <AtCountdownItem num={_seconds} separator={format?.seconds || ''} />
}
</View>
)
}
Expand All @@ -172,14 +188,8 @@ AtCountdown.defaultProps = {
customStyle: '',
className: '',
isCard: false,
isShowDay: false,
isShowHour: true,
format: {
day: '天',
hours: '时',
minutes: '分',
seconds: '秒'
},
showFieldNames: defaultShowFieldNames,
format: defaultFormat,
day: 0,
hours: 0,
minutes: 0,
Expand All @@ -190,8 +200,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,
Expand Down
13 changes: 5 additions & 8 deletions packages/taro-ui/types/countdown.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,19 @@ export interface FormatObject {
seconds: string
}

type isTrue = string | boolean;

export interface AtCountDownProps extends AtComponent {
/**
* 是否显示卡片式样式
* @default false
*/
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: '秒' }
Expand Down