@ray-js/countdown-action-sheet
v1.0.0
Published
通用的倒计时功能设置弹窗
Downloads
7
Readme
English | 简体中文
@ray-js/countdown-action-sheet
通用的倒计时功能设置弹窗
Installation
$ npm install @ray-js/countdown-action-sheet
# or
$ yarn add @ray-js/countdown-action-sheet
Usage
Basic Usage
import React from 'react';
import { View, Text, Button } from '@ray-js/components';
import CountdownActionSheet from '@ray/countdown-action-sheet';
export default function Home() {
const [show, setShow] = React.useState(false);
const [countdown, setCountdown] = React.useState(0);
const open = React.useCallback(() => {
setShow(true);
}, []);
const hide = React.useCallback(() => {
setShow(false);
}, []);
const handleStop = React.useCallback(() => {
hide();
setCountdown(0);
}, []);
const handleOK = React.useCallback<React.ComponentProps<typeof CountdownActionSheet>['onOk']>(
data => {
hide();
if (data.mode === 'set') {
setCountdown(data.value);
}
},
[]
);
return (
<>
<Button onClick={open}>Open Countdown Action Sheet</Button>
<CountdownActionSheet
show={show}
value={countdown}
title="Title"
cancelText="Cancel"
okText="Confirm"
startText="Start"
hourText="Hour"
minuteText="Minute"
countdownCloseText="close countdown"
countdownCloseTipText="close countdown tip"
onClickOverlay={hide}
onCancel={hide}
onStop={handleStop}
onOk={handleOK}
/>
</>
);
}
Custom Max Min and Step
import React from 'react';
import { Button } from '@ray-js/components';
import CountdownActionSheet from '@ray/countdown-action-sheet';
export default function Home() {
const [show, setShow] = React.useState(false);
const [countdown, setCountdown] = React.useState(0);
const open = React.useCallback(() => {
setShow(true);
}, []);
const hide = React.useCallback(() => {
setShow(false);
}, []);
const handleStop = React.useCallback(() => {
hide();
setCountdown(0);
}, []);
const handleOK = React.useCallback<React.ComponentProps<typeof CountdownActionSheet>['onOk']>(
data => {
hide();
if (data.mode === 'set') {
setCountdown(data.value);
}
},
[]
);
return (
<>
<Button onClick={open}>Click me</Button>
<CountdownActionSheet
show={show}
value={countdown}
min={0}
max={1440}
step={5}
title="Title"
cancelText="Cancel"
okText="Confirm"
startText="Start"
hourText="Hour"
minuteText="Minute"
countdownCloseText="close countdown"
countdownCloseTipText="close countdown tip"
onClickOverlay={hide}
onCancel={hide}
onStop={handleStop}
onOk={handleOK}
/>
</>
);
}