@ray-js/components-ty-dialog v0.0.7

English | 简体中文

@ray-js/components-ty-dialog

基础库 2.3.0 以上版本开始支持

Installation

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

Usage

Dialog（Alert）

import Dialog from '@ray-js/components-ty-dialog';

const [showSimpleAlert, setShowSimpleAlert] = React.useState(false);

<Dialog
  show={showSimpleAlert}
  title="Title"
  subTitle="Body"
  actionDataSource={[
    {
      text: <TyTypography type="title" text="确认" />,
      onClick: () => setShowSimpleAlert(false),
    },
  ]}
/>
<Button onClick={() => setShowSimpleAlert(true)}>Click me</Button>

Alert

import { Alert } from '@ray-js/components-ty-dialog';

const [showAlert, setShowAlert] = React.useState(false);

<Alert
  show={showAlert}
  title="Title"
  subTitle="Body"
  okText="确认"
  onOk={() => setShowAlert(false)}
/>
<Button onClick={() => setShowAlert(!showAlert)}>Click me</Button>

Customize Icon

import Dialog from '@ray-js/components-ty-dialog';
import TyTypography from '@ray-js/components-ty-typography';

const [showCustomIcon, setShowCustomIcon] = React.useState(false);

<Dialog
  show={showCustomIcon}
  title="Title"
  subTitle="Body"
  icon={
    <Icon style={{ textAlign: 'center' }} type="icon-warning" size={39} color="#FF4444" />
  }
  actionDataSource={[
    {
      text: <TyTypography type="title" text="确认" />,
      onClick: () => setShowCustomIcon(false),
    },
  ]}
/>
<Button onClick={() => setShowCustomIcon(true)}>Click me</Button>

Dialog with Viewport（Combination）

import { DialogContainer, DialogContent, DialogActions, DialogTitle, DialogSubTitle } from '@ray-js/components-ty-dialog';
import TyTypography from '@ray-js/components-ty-typography';

const [showViewport, setShowViewport] = React.useState(false);

<DialogContainer show={showViewport}>
  <DialogContent>
    <DialogTitle>title</DialogTitle>
    <View className={styles.viewport} />
    <DialogSubTitle>subTitle</DialogSubTitle>
  </DialogContent>
  <DialogActions
    dataSource={[
      { text: '次要按钮', onClick: () => setShowViewport(false) },
      {
        text: <TyTypography type="title" text="主要按钮" size={16} />,
        onClick: () => setShowViewport(false),
      },
    ]}
  />
</DialogContainer>
<Button onClick={() => setShowViewport(true)}>Click me</Button>

hooks

useAlert、useConfirm also supports

import { useDialog } from '@ray-js/components-ty-dialog';
import TyTypography from '@ray-js/components-ty-typography';

const setDialogVisibleMemo = React.useCallback(() => setDialogVisible(false), []);

const { modal: dialog, setVisible: setDialogVisible } = useDialog({
  title: 'useDialog',
  actionDataSource: [
    {
      text: <TyTypography type="caption" text="取消" />,
      onClick: setDialogVisibleMemo,
    },
    {
      text: <TyTypography type="title" text="确认" />,
      onClick: setDialogVisibleMemo,
    },
  ],
});

<>
  {dialog}
  <Button onClick={() => setDialogVisible(true)}>Click me</Button>
</>;