Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/react-alert

Package Overview
Dependencies
Maintainers
1
Versions
173
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/react-alert

Alert component

  • 4.7.14
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
228
decreased by-26.92%
Maintainers
1
Weekly downloads
 
Created
Source

Alert 确认对话框

弹出对话框会在继续之前,通知用户重要信息,点击确定后异步关闭对话框。

import { Alert } from 'uiw';
// or
import Alert from '@uiw/react-alert';

基本用法

import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible1: false,
      visible2: false,
    }
  }
  onClick(type) {
    this.setState({ [type]: !this.state[type] });
  }
  onClosed(type) {
    this.setState({ [type]: false });
  }
  render() {
    return (
      <div>
        <Alert
          isOpen={this.state.visible1}
          confirmText="确定按钮"
          onClosed={this.onClosed.bind(this, 'visible1')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          isOpen={this.state.visible2}
          confirmText="确定按钮"
          cancelText="取消按钮"
          type="danger"
          onConfirm={() => console.log('您点击了确定按钮!')}
          onCancel={() => console.log('您点击了取消按钮!')}
          onClosed={this.onClosed.bind(this, 'visible2')}
        >
          这个对话框有两个按钮,单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后,此对话框将关闭,触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。用作通知用户重要信息。
        </Alert>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this, 'visible1')}>单个按钮确认对话框</Button>
          <Button onClick={this.onClick.bind(this, 'visible2')}>确认对话框</Button>
        </ButtonGroup>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

延迟关闭对话框

这里是利用 Promise 等它执行完成再去关闭窗口

import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick() {
    this.setState({ visible: !this.statevisible });
  }
  onClosed() {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <Alert
          icon="delete"
          isOpen={this.state.visible}
          confirmText="确定按钮"
          type="danger"
          onConfirm={() => {
            console.log('确定回调!, 这里是利用Promise等执行完成再去关闭窗口');
            return new Promise((resolve, reject) => {
              const random = Math.random();
              console.log('测试,随机值大于 0.5 执行 resolve 事件,否则 执行 reject 触发 catch 错误', random, random > 0.5)
              setTimeout(random > 0.5 ? resolve : reject, 3000);
            }).catch(() => {
              // 可以通过下面方式,阻止弹框消失
              // throw new Error();
            });
          }}
          onClosed={this.onClosed.bind(this, 'visible')}
        >
          这里是利用 <b>Promise</b> 的特性,等它执行完成后,再去关闭窗口,达到延迟关闭的效果。<br /><br />
          这个测试例子,生成随机值判断是否大于 <b>0.5</b> 执行 <b>resolve</b> 事件,否则 执行 <b>reject</b> 触发 <b>catch</b> 错误。
        </Alert>
        <Button onClick={this.onClick.bind(this, 'visible')}>延迟关闭对话框</Button>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

带图标的弹出框

通过设置 icontype 参数设置带状态的弹出对话框。

import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible1: false,
      visible2: false,
    }
  }
  onClick(type) {
    this.setState({ [type]: !this.state[type] });
  }
  onClosed(type) {
    this.setState({ [type]: false });
  }
  render() {
    return (
      <div>
        <Alert
          isOpen={this.state.visible1}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="information"
          type="primary"
          onClosed={this.onClosed.bind(this, 'visible1')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          isOpen={this.state.visible2}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="circle-check"
          type="success"
          onClosed={this.onClosed.bind(this, 'visible2')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          isOpen={this.state.visible3}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="warning"
          type="warning"
          onClosed={this.onClosed.bind(this, 'visible3')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          isOpen={this.state.visible4}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="circle-close"
          type="danger"
          onClosed={this.onClosed.bind(this, 'visible4')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          isOpen={this.state.visible5}
          confirmText="确定按钮"
          cancelText="取消按钮"
          type="light"
          onClosed={this.onClosed.bind(this, 'visible5')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          isOpen={this.state.visible6}
          confirmText="确定按钮"
          cancelText="取消按钮"
          type="dark"
          onClosed={this.onClosed.bind(this, 'visible6')}
        >
          这个对话框有两个按钮,单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后,此对话框将关闭,触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。用作通知用户重要信息。
        </Alert>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this, 'visible1')} type="primary">主要</Button>
          <Button onClick={this.onClick.bind(this, 'visible2')} type="success">成功</Button>
          <Button onClick={this.onClick.bind(this, 'visible3')} type="warning">警告</Button>
          <Button onClick={this.onClick.bind(this, 'visible4')} type="danger">错误</Button>
          <Button onClick={this.onClick.bind(this, 'visible5')} type="light">亮按钮</Button>
          <Button onClick={this.onClick.bind(this, 'visible6')} type="dark">暗按钮</Button>
        </ButtonGroup>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

带标题的弹出框

import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible1: false,
      visible2: false,
    }
  }
  onClick(type) {
    this.setState({ [type]: !this.state[type] });
  }
  onClosed(type) {
    this.setState({ [type]: false });
  }
  render() {
    return (
      <div>
        <Alert
          title="带标题的弹出框"
          isOpen={this.state.visible1}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="information"
          type="primary"
          onClosed={this.onClosed.bind(this, 'visible1')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          title="带标题的弹出框"
          isOpen={this.state.visible2}
          confirmText="确定按钮"
          cancelText="取消按钮"
          type="success"
          onClosed={this.onClosed.bind(this, 'visible2')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          title="带标题的弹出框"
          isOpen={this.state.visible3}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="warning"
          type="warning"
          onClosed={this.onClosed.bind(this, 'visible3')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          title="带标题的弹出框"
          isOpen={this.state.visible4}
          confirmText="确定按钮"
          cancelText="取消按钮"
          icon="circle-close"
          type="danger"
          onClosed={this.onClosed.bind(this, 'visible4')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          title="带标题的弹出框"
          isOpen={this.state.visible5}
          confirmText="确定按钮"
          cancelText="取消按钮"
          type="light"
          onClosed={this.onClosed.bind(this, 'visible5')}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        />
        <Alert
          title="带标题的弹出框"
          isOpen={this.state.visible6}
          confirmText="确定按钮"
          cancelText="取消按钮"
          type="dark"
          onClosed={this.onClosed.bind(this, 'visible6')}
        >
          这个对话框有两个按钮,单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后,此对话框将关闭,触发 “<b>onConfirm</b>” 或 “<b>onCancel</b>” 事件。用作通知用户重要信息。
        </Alert>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this, 'visible1')} type="primary">主要</Button>
          <Button onClick={this.onClick.bind(this, 'visible2')} type="success">成功</Button>
          <Button onClick={this.onClick.bind(this, 'visible3')} type="warning">警告</Button>
          <Button onClick={this.onClick.bind(this, 'visible4')} type="danger">错误</Button>
          <Button onClick={this.onClick.bind(this, 'visible5')} type="light">亮按钮</Button>
          <Button onClick={this.onClick.bind(this, 'visible6')} type="dark">暗按钮</Button>
        </ButtonGroup>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

自定义按钮

这个对话框有两个按钮,单击 确定按钮取消按钮 后,此对话框将关闭,将不触发 onConfirmonCancel 事件。因为这俩按钮是自定义按钮。你可以正对自定义按钮外面的对象定义 className="w-alert-footer" 将显示默认样式。

import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick(type) {
    this.setState({ visible: !this.state.visible });
  }
  onClosed(type) {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <Alert
          isOpen={this.state.visible}
          type="danger"
          useButton={false}
          maskClosable={true}
          onClose={this.onClosed.bind(this)}
          // onClosed={this.onClosed.bind(this)}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        >
          这个对话框有两个按钮,单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后,此对话框将关闭,将不触发 “<del>onConfirm</del>” 或 “<del>onCancel</del>” 事件。因为这俩按钮是自定义按钮。
          <br /><br />
          <div className="w-alert-footer">
            <Button type="danger" onClick={this.onClosed.bind(this)} >确定按钮</Button>
            <Button onClick={this.onClosed.bind(this)} >取消按钮</Button>
          </div>
        </Alert>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this)}>单个按钮确认对话框</Button>
        </ButtonGroup>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

不显示遮罩层

import React from 'react';
import ReactDOM from 'react-dom';
import { Alert, ButtonGroup, Button } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    }
  }
  onClick(type) {
    this.setState({ visible: !this.state.visible });
  }
  onClosed(type) {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <Alert
          isOpen={this.state.visible}
          type="danger"
          maskClosable={true}
          hasBackdrop={false}
          onClose={this.onClosed.bind(this)}
          onClosed={this.onClosed.bind(this)}
          content="这个对话框只有两个个按钮,单击“确定按钮”后,此对话框将关闭。用作通知用户重要信息。"
        >
          这个对话框有两个按钮,单击 “<b>确定按钮</b>” 或 “<b>取消按钮</b>” 后,此对话框将关闭,将不触发 “<del>onConfirm</del>” 或 “<del>onCancel</del>” 事件。因为这俩按钮是自定义按钮。
        </Alert>
        <ButtonGroup>
          <Button onClick={this.onClick.bind(this)}>单个按钮确认对话框</Button>
        </ButtonGroup>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

Props

虽然类似于对 <Modal>,但 <Alert> 更具限制性,只应用于重要信息。此组件继承 <Modal> 的属性,所以部分参数可以参考 <Modal> 组件。

参数说明类型默认值
onCancel取消按钮的回调函数Function(e)-
onConfirm点击确定按钮回调Function(e)-
cancelText取消按钮文字,String-
confirmText确认按钮文字String确认
type按钮类型跟 <Button> 组件的 type 参数一致,同时会影响按钮颜色。Stringlight
icon<Modal>设置对话框右上角图标,,设置 type 将图标设置不同的颜色。当前属性为 <Icon> 组件的 type 属性,所以可以参考该组件自定义图标。String/ReactNode-
title<Modal>设置标题Function(e)-
useButton<Modal>是否使用默认按钮,如果设置 false 需要自定义按钮关闭Booleantrue
isOpen<Modal>对话框是否可见Booleanfalse
maskClosable<Modal>点击遮罩层是否允许关闭booleantrue

更多属性文档请参考 Modal

Keywords

FAQs

Package last updated on 11 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc