/* eslint-disable react/prefer-stateless-function */
/*
* annotation like `placeholder begin *** and
* placeholder end ***` is required for generate ewt manual, please keep it
*/
import React from 'react';
import Code from '@/Code';
import Demo from '@/Demo';

/* placeholder begin src */
import Icon from '../index.tsx';
/* placeholder end src */

import './index.scss';

/* placeholder begin class */
class DemoComponent extends React.Component {
  render() {
    const sourceCode = `
import { Icon } from '@ewtd/ewt';

<Icon type="info" style={{ color: '#f60' }} />
`;
    const iconAllCode = `
import { Icon } from '@ewtd/ewt';
...
render() {
  const iconArr = [
    'info',
    'warning',
    'success',
    'arrow-right',
    'close',
    'error',
    'triangle-down',
    'triangle-up',
  ];
  return (
    <ul className="icon-all">
      {
      iconArr.map(item => (
        <li className="demo-li" key={item}>
          <Icon type={item} />
          <span className="icon-name">{item}</span>
        </li>
      ))
    }
    </ul>
  );
};
`;
    const iconArr = [
      'horn-hollow',
      'home',
      'timing-clock',
      'single-user',
      'magnifying-lens',
      'earphone',
      'minus',
      'pie-chart',
      'wrong',
      'half-right-tick',
      'right-tick',
      'zoom-out',
      'zoom-in',
      'lamp',
      'doubt-circle',
      'heart',
      'location',
      'anwser-card',
      'calendar',
      'line-chart',
      'plus',
      'star-hollow',
      'finger-push',
      'pencil-running',
      'refresh',
      'download',
      'delete',
      'shopping-cart',
      'pause',
      'play',
      'info',
      'warning',
      'success',
      'arrow-right-dashed',
      'close',
      'error',
      'triangle-down',
      'triangle-up',
      'arow-right',
      'arow-down',
      'arow-left',
      'arow-up',
      'loading',
    ];
    return (
      <Demo className="ewt-icon-demo">
        <h2>Icon 图标组件</h2>
        <p>语义化的图标库。</p>
        <h3>代码演示</h3>
        <Code sourceCode={sourceCode} buttonText="单个图标">
          <Icon type="info" style={{ color: '#f60', fontSize: '30px' }} />
        </Code>
        <Code sourceCode={iconAllCode} buttonText="全部图标">
          <div className="icon-all">
            {
            iconArr.map((item) => (
              <div className="demo-li" key={item}>
                <Icon type={item} />
                <span className="icon-name">{item}</span>
              </div>
            ))
          }
          </div>
        </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><code>&#39;&#39;</code></td>
            </tr>
            <tr>
              <td>style</td>
              <td>自定义样式</td>
              <td>object</td>
              <td>否</td>
              <td><code>{'{}'}</code></td>
            </tr>
            <tr>
              <td>prefixCls</td>
              <td>样式名前缀</td>
              <td>string</td>
              <td>否</td>
              <td>ewt-icon</td>
            </tr>
            <tr>
              <td>type</td>
              <td>
                图标类型
              </td>
              <td>string</td>
              <td>否</td>
              <td>-</td>
            </tr>
          </tbody>
        </table>
      </Demo>
    );
  }
}
/* placeholder end class */

export default DemoComponent;