English | [简体中文](./README-zh_CN.md)

# @ray-js/countdown-action-sheet

[![latest](https://img.shields.io/npm/v/@ray-js/countdown-action-sheet/latest.svg)](https://www.npmjs.com/package/@ray-js/countdown-action-sheet) [![download](https://img.shields.io/npm/dt/@ray-js/countdown-action-sheet.svg)](https://www.npmjs.com/package/@ray-js/countdown-action-sheet)

> General countdown setting action-sheet

## Installation

```sh
$ npm install @ray-js/countdown-action-sheet
# or
$ yarn add @ray-js/countdown-action-sheet
```

## Usage

### Basic Usage

```tsx
import React from 'react';
import { View, Text, Button } from '@ray-js/components';
import CountdownActionSheet from '@ray-js/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

```tsx
import React from 'react';
import { Button } from '@ray-js/components';
import CountdownActionSheet from '@ray-js/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}
      />
    </>
  );
}
```