src/badge/index.js File

  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import Component from '../utils/Component'
  4. import classnames from 'classnames'
  5. import Logger from '../utils/logger'
  6.  
  7. import '../style'
  8. import 'phoenix-styles/less/modules/badges.less'
  9.  
  10. /**
  11.  * Badge标记<br/>
  12.  * - 主要是用来提供不同颜色的标识, 通过phStyle来改变颜色, 可选default、primary、warning、danger、info、error、success。
  13.  * - 不提供默认回调, 但支持自定义className，事件等操作。
  14.  *
  15.  * 主要属性和接口：
  16.  * - phStyle:颜色, 默认primary <br/>
  17.  * 如：`<Badge phStyle='info'>惠</Badge>`
  18.  *
  19.  * @class Badge
  20.  * @module 标签组件
  21.  * @extends Component
  22.  * @constructor
  23.  * @since 0.1.0
  24.  * @demo badge|badge.js {展示}
  25.  * @show true
  26.  * */
  27.  
  28. export default class Badge extends Component{
  29.     static propTypes = {
  30.         /**
  31.          * 样式前缀
  32.          * @property classPrefix
  33.          * @type String
  34.          * @default 'badge'
  35.          * */
  36.         classPrefix: PropTypes.string,
  37.         /**
  38.          * 标记颜色[default、primary、warning、danger、info、error、success], 默认primary
  39.          * @property phStyle
  40.          * @type string
  41.          * @default 'default'
  42.          **/
  43.         phStyle:PropTypes.string
  44.     };
  45.  
  46.     static defaultProps ={
  47.         phStyle: 'default',
  48.         classPrefix:'badge',
  49.         classMapping : {
  50.             'primary':'primary',
  51.             'info':'info',
  52.             'success':'success',
  53.             'error':'error',
  54.             'warning':'warning',
  55.             'danger':'danger'
  56.         }
  57.     };
  58.  
  59.     constructor(props,context){
  60.         super(props,context);
  61.         new Logger('Badge');
  62.     }
  63.  
  64.     renderBadge(){
  65.         let {className, style, children} = this.props
  66.  
  67.         return(
  68.             <span {...this.otherProps} className={classnames(
  69.                this.getProperty(true),
  70.                className
  71.            )} style={this.getStyles(style)}>
  72.                {children}
  73.            </span>
  74.         )
  75.     }
  76.  
  77.     render(){
  78.         return this.renderBadge()
  79.     }
  80. }
  81.