Countdown Subpage

Last Updated on : 2022-01-07 02:53:54download

countdownSubpage

Set a countdown

Display a countdown

Overview

The countdown subpage component countdownSubpage is used to set and display a countdown for a specific action, such as turning on or off a light. You can set parameters to define the properties of this component.

Common properties

Field name	Data type	Description	Default value
countdown	number	The remaining time of the countdown. Unit: seconds.	None
renderHeader	() => ReactNode	The content of the header.	None
onCountdownText	string	The description of the countdown for turning on a light.	None
offCountdownText	string	The description of the countdown for turning off a light.	None
onSave	(time: number)=>void	The callback that is executed when the Confirm button is tapped.	None
background	string	The background color of the page.	None
hourLabel	string	The text of the hour.	None
minuteLabel	string	The text of the minute.	None
secondLabel	string	The text of the second.	None
confirmButtonStyle	StyleProp	The style of the Confirm button.	None
confirmText	string	The text of the Confirm button.	None
confirmTextStyle	StyleProp	The style of the Confirm text.	None
cancelButtonStyle	StyleProp	The style of the Cancel button.	None
cancelText	string	The text of the Cancel button.	None
cancelTextStyle	StyleProp	The style of the Cancel text.	None
clock	ClockProps	Properties of `clock`	None
picker	PickerProps	Properties of `picker`	None

Properties of `clock`

Field name	Data type	Description	Default value
countdown	number	The remaining time of the countdown. Unit: seconds.	None
totalCountDown	number	The total duration of the countdown.	None
hourLabel	string	The text of the hour.	None
minuteLabel	string	The text of the minute.	None
secondLabel	string	The text of the second.	None
subTitleStyle:	StyleProp	The style of the subtitle text.	None
onReset	()=>void	The callback that is executed when the callback is reset.	None
onCancel	() => void	The callback that is executed when the callback is cancelled.	None
innerBackgroundColor	string	The inner background color of the clock.	None
isShowHour	Boolean	Specifies whether to display the hour on the clock when the remaining time of the countdown is less than one hour.	None
timeTextStyle	StyleProp	The style of the time text.	None
unitTextStyle	StyleProp	The style of the hour, minute, and second text.	None
lineColor	string	The color of the pointers that indicate the time that has elapsed.	None
activeColor	string	The color of the pointers that indicate the remaining time of the countdown.	None
lineHeight	number	The height of the pointers on the clock.	None
lineNum	number	The number of the pointers on the clock.	None
resetText	string	The description of countdown resetting.	None
resetStyle	StyleProp	The text of the Reset button.	None
resetTextStyle	StyleProp	The style of the Reset text.	None
size:	number	The size of the clock.	None

Properties of `picker`

Field name	Data type	Description	Default value
hourLabel	string	The text of the hour.	None
minuteLabel	string	The text of the minute.	None
secondLabel	string	The text of the second.	None
timeTextColor	string	The color of the time text.	None
timeTextSize	number	The font size of the time text.	None
unitTextStyle	StyleProp	The font size of the time unit text.	None
time	number	The value of the time.	None
isShowSecond	Boolean	Specifies whether to display the second.	None
onChange	(value: number) => void	The callback that is executed when the time picker is modified.	None

Example

import React from 'react';
import { Utils } from 'tuya-panel-kit';
import { CountdownSubPage } from '@tuya/tuya-panel-lamp-sdk';
import Strings from '../../../i18n';

const { winWidth, convertX } = Utils.RatioUtils;
const cx = (value: number) => {
  return Math.floor(convertX(value));
};
const CountdownSubPageDemo = () => {
  const params = {
    background: '#fff',
    countdown: 100,
    minuteLabel: Strings.getLang('TYLamp_minute'),
    secondLabel: Strings.getLang('TYLamp_second'),
    hourLabel: Strings.getLang('TYLamp_hour'),
    onSave: (time: number) => {},
    onCountdownText: Strings.getLang('TYLamp_onCountdown'),
    offCountdownText: Strings.getLang('TYLamp_offCountdown'),
    confirmText: Strings.getLang('TYLamp_confirm'),
    confirmButtonStyle: {
      backgroundColor: '#87cefa',
      height: 48,
      width: winWidth - cx(32),
      paddingHorizontal: cx(16),
      borderRadius: 24,
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: cx(16),
      marginHorizontal: cx(16),
    },
    confirmTextStyle: {
      color: '#fff',
      fontSize: 16,
    },
    cancelButtonStyle: {
      marginHorizontal: cx(16),
      height: 48,
      width: winWidth - cx(32),
      borderRadius: 24,
      backgroundColor: '#333',
      marginBottom: cx(16),
      alignItems: 'center',
      justifyContent: 'center',
    },
    cancelText: Strings.getLang('TYLamp_cancel'),
    cancelTextStyle: {
      color: '#fff',
      fontSize: 16,
    },
    picker: {
      time: 250,
      isShowSecond: false,
      unitTextStyle: { fontSize: 14, color: 'rgba(255,255,255,0.5)' },
      timeTextColor: '#333',
      timeTextSize: 40,
      minuteLabel: Strings.getLang('TYLamp_minute'),
      secondLabel: Strings.getLang('TYLamp_second'),
      hourLabel: Strings.getLang('TYLamp_hour'),
    },
    clock: {
      countdown: 200,
      totalCountDown: 200,
      minuteLabel: Strings.getLang('TYLamp_minute'),
      secondLabel: Strings.getLang('TYLamp_second'),
      hourLabel: Strings.getLang('TYLamp_hour'),
      timeTextStyle: { fontSize: 40, color: '#000' },
      unitTextStyle: { fontSize: 14, color: 'rgba(255,255,255,0.5)' },
      lineColor: '#e3e3e3',
      activeColor: '#87cefa',
      innerBackgroundColor: 'rgba(255,255,255,0.85)',
      isShowHour: false,
      size: 280,
      lineHeight: 5,
      lineWidth: 1,
      lineNum: 100,
      resetStyle: {},
      resetText: Strings.getLang('TYLamp_resetCountdown'),
      resetTextStyle: {
        color: '#888',
      },
      onReset: () => {},
      onCancel: () => {},
    },
  };
  return (
    <CountdownSubPage
      route={{
        params,
      }}
    />
  );
};
export default CountdownSubPageDemo;

Prev DocMusic Drawer

Next DocTab Bar