1. import React, { Component } from 'react'
  2. import PropTypes from 'prop-types'
  3. import classnames from 'classnames'
  4. import Checkbox from '../../checkbox'
  5. import List from '../../list'
  6.  
  7. /**
  8. * 筛选项<br/>
  9. * - 通过itemKey设置筛选项唯一标识。
  10. * - 可通过disabled设置筛选项是否不可选,适用于多选筛选(FilterCheckbox)。
  11. *
  12. * 主要属性和接口:
  13. * - itemKey: 筛选项唯一标识,必须。
  14. * - disabled: 是否不可选。
  15. * 如:
  16. * ```code
  17. * <FilterCheckbox>
  18. * {
  19. * this.state.filterData.map((cityShopList,index)=>{
  20. * return (
  21. * <ItemGroup key={cityShopList.cityId} mainKey={cityShopList.cityId} label={cityShopList.cityName}>
  22. * {
  23. * cityShopList.shopInfoDTOList.map((shopInfo)=>{
  24. * return <Item disabled={shopInfo.status==1} key={shopInfo.shopId} itemKey={shopInfo.shopId}>{shopInfo.shopName}</Item>
  25. * })
  26. * }
  27. * </ItemGroup>
  28. * );
  29. * })
  30. * }
  31. * </FilterCheckbox>
  32. * ```
  33. *
  34. * @class FilterItem
  35. * @module 筛选控件
  36. * @extends Component
  37. * @constructor
  38. * @since 2.0.0
  39. * @demo ph-filter|ph-filter.js {展示}
  40. * @show true
  41. * */
  42.  
  43. export default class FilterItem extends Component{
  44. static propTypes= {
  45. /**
  46. * item项的唯一标示,必填项
  47. * @property itemKey
  48. * @type String|Number
  49. * */
  50. itemKey:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  51. /**
  52. * 状态
  53. * @property disabled
  54. * @type Boolean
  55. * @default false
  56. * */
  57. disabled: PropTypes.bool,
  58. /**
  59. * 点击的回调
  60. * @property clickCallback
  61. * @type func
  62. * @default null
  63. * */
  64. clickCallback: PropTypes.func
  65. }
  66.  
  67. static defaultProps = {
  68. disabled: false
  69. }
  70.  
  71. constructor(props,context){
  72. super(props,context);
  73. }
  74.  
  75. clickCallback(){
  76. let {readOnly, filterType, onItemChange, categoryChange, index, panelIndex, itemKey, children, clickCallback, disabled} = this.props
  77.  
  78. if(clickCallback) clickCallback(itemKey, disabled)
  79.  
  80. if(readOnly || filterType) return
  81.  
  82. onItemChange(itemKey)
  83.  
  84. categoryChange && categoryChange(panelIndex, {key: itemKey, value: children}, {itemIndex: index})
  85. }
  86.  
  87. onChange(e){
  88. let {mainKey, itemKey, onItemChange, children} = this.props
  89. onItemChange(mainKey, itemKey, children, e)
  90. }
  91.  
  92. renderChildren(){
  93. let {filterType, checked, disabled, children, itemKey} = this.props;
  94.  
  95. return (
  96. <List.Col>
  97. {
  98. filterType? <Checkbox id={itemKey} label={children} disabled={disabled} checked={checked && !disabled} onChange={this.onChange.bind(this)} />: children
  99. }
  100. </List.Col>
  101. )
  102. }
  103.  
  104. render(){
  105. let {active, disabled, className} = this.props
  106.  
  107. return (
  108. <div className={classnames('ph-row ph-list-item', active ? 'active':'', disabled? 'disabled':'', className)}
  109. onClick={this.clickCallback.bind(this)}
  110. >
  111. {this.renderChildren()}
  112. </div>
  113. )
  114. }
  115. }