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. }