@ray-js/countdown-action-sheet v1.0.0

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}
      />
    </>
  );
}