Ph-filter NPM | npm.io

ph-filter

Filter 使用方法

    <FilterContainer onChange={function(key){console.log(key);}}>
        <Panel selected={{key:'s_flower',value:'花店'}}>
            <ItemGroup label={<span style={{color:'red'}}>美食</span>}>
                <Item itemKey='f_all'>
                    <span style={{color:'red'}}>全部美食</span>
                </Item>
                <Item itemKey='f_bbc'>
                    本帮江浙菜
                </Item>
                <Item itemKey='f_jp'>
                    日本菜
                </Item>
                <Item itemKey='f_cf'>
                    咖啡厅
                </Item>
            </ItemGroup>
            <ItemGroup  label='电影'>
                <Item itemKey='m_all'>
                    全部电影
                </Item>
                <Item itemKey='m_p'>
                    私人影院
                </Item>
                <Item itemKey='m_c'>
                    电影院
                </Item>
            </ItemGroup>
            <ItemGroup label='购物'>
                <Item itemKey='s_all'>
                    全部购物
                </Item>
                <Item itemKey='s_shoes'>
                    服饰鞋包
                </Item>
                <Item itemKey='s_medicine'>
                    药店
                </Item>
                <Item itemKey='s_glasses'>
                    眼镜店
                </Item>
                <Item itemKey='s_flower'>
                    花店
                </Item>
            </ItemGroup>
        </Panel>
        <PanelSimple default='筛选'>
            <Item itemKey="sjgy">世纪公园</Item>
            <Item itemKey="ljz">陆家嘴</Item>
            <Item itemKey="bbb">八佰伴</Item>
            <Item itemKey="pdxq">浦东新区</Item>
        </PanelSimple>
    </FilterContainer>

FilterCheckbox 拓展组件用法

    ...
    onSubmit(data){
        console.log(data);
    }
    ...
    const chooseData = "3244945,13893492,5687880,18418332,6210703,24890244"; // string
    const filterData = shopList.msg.cityShopList;

    return(
        <FilterCheckbox choose={chooseData} groupIndex={0} buttonText='确定' buttonStyle="info" onSubmit={::this.onSubmit}>
            {
                filterData.map((cityShopList,index)=>{
                    return (
                        <ItemGroup key={cityShopList.cityId} mainKey={cityShopList.cityId} label={cityShopList.cityName}>
                            {
                                cityShopList.shopInfoDTOList.map((shopInfo)=>{
                                    return (
                                        <Item disabled={shopInfo.status==1} key={shopInfo.shopId} itemKey={shopInfo.shopId}>{shopInfo.shopName}</Item>
                                    );
                                })
                            }
                        </ItemGroup>
                    );
                })
            }
            
        </FilterCheckbox>
    )

注意事项

目前支持两种Panel，一级选择：PanelSimple  和  二级选择：Panel

Panel全部嵌套在FilterContainer里，有几个panel，cat栏目就会被几等分
当使用Panel时，即表明该Panel是个二级选择Panel，所有的二级分类都会被ItemGroup标签包裹，itemGroup用于切换二级分类列表
```
	
```

API

View example to get more details

`<FilterContainer>` Props:

onChange 用户切换分类的时候触发的回调函数，输入参数是分类的key .
hideCat 当设置hideCat属性的时候，cat那一栏会隐藏，第一个panel会一直显示（适用于只有一个panel并且不需要cat的场景）

`<PanelSimple>`和 `<Panel>` Props:

default 当用户没有选择任何分类的时候，cat栏目里显示的默认文案 .
readOnly 是否为只读模式 .
selected 用户选择的分类对象，必须包含key和value属性{key:'s_flower',value:'花店'}，用于高亮panel里对应的项.

`<Item>` Props:

itemKey item的唯一标识，必填参数 .

`<ItemGroup>` Props:

label 一级分类的显示文案，用于包裹二级分类列表，可以是string，也可以是react标签 .

Contributing

Fork the project
Run the project in development view demo: $ npm run demo
Make changes.
Add appropriate tests
$ npm run test
If tests don't pass, make them pass.
Update README with appropriate docs.
Rnn build
$ npm run build
Commit and PR.

Repair

version 1.0.2 增加choose的数据是通过请求获取的情况兼容 version 1.0.1 修复没有choose时数据多一个逗号的问题 version 1.0.0 新增FilterCheckbox拓展组件 version 1.0.4 FilterCheckbox右边栏可横向滚动