@mistong/eui-alert/demo/index.js

An eui component

/*
* annotation like `placeholder begin *** and
* placeholder end ***` is required for generate eui manual, please keep it
*/
import React from 'react';
import ReactDOM from 'react-dom';
import Code from '@mistong/eui-code';
import Demo from '@mistong/eui-demo';
import Icon from '@mistong/eui-icon';
/* placeholder begin src */
import Alert from '../src';
import '@mistong/eui/dist/index.css';
/* placeholder end src */
import './index.scss';

/*
* annotation like `placeholder begin *** and
* placeholder end ***` is required for generate eui manual, please keep it
*/


/* placeholder begin class */
class DemoComponent extends React.Component {
  close = () => {
    alert('onClose');
  }
  afterClose = () => {
    setTimeout(() => {
      alert('afterClose');
    }, 1000);
  }

  render() {
    const alertTypeCode = `
  import Alert from '@mistong/eui-alert'
  const dom=(<div>
      <Alert type={'info'} message={'提示'}/>
      <Alert type={'success'} message={'成功'}/>
      <Alert type={'warning'} message={'警告'}/>
      <Alert type={'error'} message={'错误'}/>
    </div>);
  `;
    const alertTypeDom = (<div>
      <Alert type={'info'} message={'提示'}/>
      <Alert type={'success'} message={'成功'}/>
      <Alert type={'warning'} message={'警告'}/>
      <Alert type={'error'} message={'错误'}/>
    </div>);
    const alertShowIconCode = `
  import Alert from '@mistong/eui-alert'
  const dom=(<div>
      <Alert type={'info'} message={'提示'} showIcon/>
      <Alert type={'success'} message={'成功'} showIcon/>
      <Alert type={'warning'} message={'警告'} showIcon/>
      <Alert type={'error'} message={'错误'} showIcon/>
    </div>);
  `;
    const alertShowIconDom = (<div>
      <Alert type={'info'} message={'提示'} showIcon/>
      <Alert type={'success'} message={'成功'} showIcon/>
      <Alert type={'warning'} message={'警告'} showIcon/>
      <Alert type={'error'} message={'错误'} showIcon/>
    </div>);
    const alertIconCode = `
  import Alert from '@mistong/eui-alert'
  const dom=(<div>
      <Alert type={'info'} message={'提示'} icon="calendar" showIcon/>
      <Alert type={'success'} message={'成功'} showIcon icon="tree-leaf"/>
    </div>);
  `;
    const alertIconDom = (<div>
      <Alert type={'info'} message={'提示'} icon="calendar" showIcon/>
      <Alert type={'success'} message={'成功'} showIcon icon="tree-leaf"/>
    </div>);
    const alertClosableCode = `
  import Alert from '@mistong/eui-alert'
  const dom=(<div>
      <Alert type={'info'} message={'提示'} closable/>
    </div>);
  `;
    const alertClosableDom = (<div>
      <Alert type={'info'} message={'提示'} closable/>
    </div>);
    const alertHookCode = `
  import Alert from '@mistong/eui-alert'
    close = () => {
    alert('onClose');
  }
  afterClose = () => {
    setTimeout(() => {
      alert('afterClose');
    }, 1000);
  }
  const dom=(<div>
                  <Alert message={'测试'}
             showIcon
             type={'success'}
             closable
             icon={'calendar'}
             onClose={this.close}
             afterClose={this.afterClose}
      />
    </div>);
  `;
    const alertHookDom = (<div>
      <Alert message={'测试'}
             showIcon
             type={'success'}
             closable
             icon={'calendar'}
             onClose={this.close
             }
             afterClose={this.afterClose
             }
      />
    </div>);
    return <Demo className="eui-alert-demo">
      <h2>Alert 警告提示</h2>
      <p>警告提示，展现需要关注的信息</p>
      <h3 className="title">代码演示</h3>
      <h3>type：指定警告的四种类型</h3>
      <Code sourceCode={alertTypeCode} buttonText="type：指定警告的四种类型">
        {alertTypeDom}
      </Code>
      <h3>showIcon：显示图标</h3>
      <Code sourceCode={alertShowIconCode} buttonText="showIcon：显示图标">
        {alertShowIconDom}
      </Code>
      <h3>icon：自定义EUI Icon的图标</h3>
      <Code sourceCode={alertIconCode} buttonText="icon：自定义EUI Icon的图标">
        {alertIconDom}
      </Code>
      <h3>closable：是否显示关闭按钮</h3>
      <Code sourceCode={alertClosableCode} buttonText="closable：是否显示关闭按钮">
        {alertClosableDom}
      </Code>
      <h3>onClose/afterClose：给close事件添加hook</h3>
      <Code sourceCode={alertHookCode} buttonText="onClose/afterClose：给close事件添加hook">
        {alertHookDom}
      </Code>
      <h3>API</h3>
      <table>
        <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>可选值</th>
          <th>默认值</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>className</td>
          <td>添加自定义class</td>
          <td>string</td>
          <td>-</td>
          <td>无</td>
        </tr>
        <tr>
          <td>type</td>
          <td>警告的类型</td>
          <td>string</td>
          <td>info|success|warning|error
          </td>
          <td>info</td>
        </tr>
        <tr>
          <td>showIcon</td>
          <td>是否显示图标</td>
          <td>boolean</td>
          <td>true/false
          </td>
          <td>false</td>
        </tr>
        <tr>
          <td>icon</td>
          <td>自定义EUI Icon的图标</td>
          <td>string</td>
          <td>具体请参考EUI Icon的type属性
          </td>
          <td>无</td>
        </tr>
        <tr>
          <td>closable</td>
          <td>是否显示关闭按钮</td>
          <td>boolean</td>
          <td>true/false
          </td>
          <td>false</td>
        </tr>
        <tr>
          <td>message</td>
          <td>警告的信息</td>
          <td>string|element</td>
          <td>-</td>
          <td>无</td>
        </tr>
        <tr>
          <td>onClose</td>
          <td>关闭警告的hook</td>
          <td>function</td>
          <td>-</td>
          <td>无</td>
        </tr>
        <tr>
          <td>afterClose</td>
          <td>关闭警告以后的hook</td>
          <td>function</td>
          <td>-</td>
          <td>无</td>
        </tr>
        </tbody>
      </table>
    </Demo>;
  }
}

/* placeholder end class */
/* placeholder begin ReactDOM */
ReactDOM.render(
  <DemoComponent/>,
  document.getElementById('app'),
);