FilterPanel

react native 实现标签筛选组件，数据可配置，支持单选和多选，一般截个popup来使用，使用有任何不便，尽管戳我。

注意

  • 1.4.1版本中引用的PropTypes来自”prop-types”
  • 1.2.1版本中引用的PropTypes来自”react”

Install

  1. npm install beeshell

示例

  1. import { FilterPanel } from 'beeshell';

示例

暂无

用例

  2.  <FilterPanel
  3.     filterPanelInfo={this.state.filterPanelInfo}
  4.     onConfirm={(result, filterPanelInfo) => {
  5.         this.onFilterConfirm(result);
  6.         // 配合popup来使用时需要在完成选择后设置一下filterPanelInfo 来进行下一次的回显，因为popuphide会销毁这个组件
  7.         this.setState({
  8.             filterPanelInfo,
  9.         });
  10.     }}
  11. />

Props

Prop Type Optional Default Description
filterPanelInfo Array Yes [] 一个元素是对象的数组
onClear func Yes 用户点击清楚条件按钮的回调函数
onConfirm func Yes 用户点击确定时的回调函数
panelHeight number Yes panel的固定高度
panelMaxHeight number Yes 屏幕高度-124 panel最大高度，当设置了panelHeight时，panelMaxHeight = panelHeight
panelMinHeight number Yes 0 panel最小高度，当设置了panelHeight时，panelMinHeight = panelHeight
selectedBlockStyle object Yes 有默认样式 tag被选中时容器样式
selectedTextStyle object Yes 有默认样式 tag被选中时文本样式
hasCommonLabals bool Yes false 是否有常用便签功能
modyfyCommonLabels func Yes false 更新常用便签
commonLabels Array Yes [] 常用便签数据
activeExpand bool Yes false 是否开始折叠功能

filterPanelInfo 示例数据

  1. [{
  2.     "category_name": "门店品类",
  3.     "items": [{
  4.       "label_name": "美食",
  5.       "label_id": "1000"
  6.     }, {
  7.       "label_name": "甜点饮品",
  8.       "label_id": "19"
  9.     }, {
  10.       "label_name": "生活超市",
  11.       "label_id": "20"
  12.     }, {
  13.       "label_name": "生鲜果蔬",
  14.       "label_id": "21"
  15.     }, {
  16.       "label_name": "医药健康",
  17.       "label_id": "22"
  18.     }, {
  19.       "label_name": "鲜花绿植",
  20.       "label_id": "1001" //id 必须唯一
  21.     }],
  22.     "category_id": "11", //id 必须唯一
  23.     "support_muti_choice": 0 // 0是单选，1是可多选
  24. }]

To Do

  • 样式可定制化程度更高
  • 增加皮肤