English | 简体中文

@ray-js/components-ty-actionsheet

Tuya Style ActionSheet, the client has an API to provide actionsheet. If there is no special customization requirements, it is recommended to give priority to showActionSheet

Installation

$ npm install @ray-js/components-ty-actionsheet
# or
$ yarn add @ray-js/components-ty-actionsheet

Usage

Hooks

import ActionSheet from '@ray-js/components-ty-actionsheet';
import TimerPicker from '@ray-js/components-ty-time-picker';

const [time, setTime] = React.useState({
  hour: new Date().getHours(),
  minute: new Date().getMinutes(),
});

const handleTimeChange = (value: any) => {
  setTime(value);
};

const { modal, setVisible } = ActionSheet.useActionSheet({
  header: '请选择时间',
  content: () => <TimerPicker value={time} onChange={handleTimeChange} />,
});

<>
  <Button onClick={() => setVisible(true)}>选择时间</Button>
  {modal}
</>;

Control State

const [visible, setVisible] = React.useState(false);

<ActionSheet
  // overlayCloseable={false}
  show={visible}
  header="Title"
  onCancel={() => setVisible(false)}
>
  <SilderDemo />
</ActionSheet>;

Functional

const Popup = ActionSheet.createPopup();

<Button onClick={() =>
  Popup.open({
    header: 'Functional Popup',
    content: (
      <View style={{ padding: 16 }}>
         content
      </View>
    ),
  })
}>Open Popup</Button>

<Popup.Container />