src/ph-filter/components/FilterItem.js File

  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.         
  90.         onItemChange(mainKey, itemKey, children, e)
  91.     }
  92.  
  93.     renderChildren(){
  94.         let {filterType, checked, disabled, children, itemKey} = this.props;
  95.  
  96.         return (
  97.             <List.Col>
  98.                 {
  99.                     filterType? <Checkbox id={itemKey} label={children} disabled={disabled} checked={checked && !disabled} onChange={this.onChange.bind(this)} />: children
  100.                 }
  101.             </List.Col>
  102.         )
  103.     }
  104.  
  105.     render(){
  106.         let {active, disabled, className} = this.props
  107.  
  108.         return (
  109.             <div className={classnames('ph-row ph-list-item', active ? 'active':'', disabled? 'disabled':'', className)}
  110.                 onClick={this.clickCallback.bind(this)}
  111.             >
  112.                 {this.renderChildren()}
  113.             </div>
  114.         )
  115.     }
  116. }
  117.