Uxcore-pickable NPM

uxcore-pickable

TL;DR

uxcore-pickable ui component for react

setup develop environment

$ git clone https://github.com/uxcore/uxcore-pickable
$ cd uxcore-pickable
$ npm install
$ gulp server

Usage

const classnames = require('classnames');

const Pickable = require('uxcore-pickable');
const {Item} = Pickable;

class Demo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          value: [1]
        }
    }

    handleChange(value) {
      this.setState({
        value: value
      })
    }

    render() {
      let items = [{
        text: '条件一',
        value: 1,
        num: 15
      }, {
        text: '条件二',
        value: 2,
        num: 20
      }, {
        text: '条件三',
        value: 3,
        disable: true
      }];
      return <div>
        <div>
          <Pickable onChange={this.handleChange.bind(this)} value={this.state.value}>
            {items.map((item, index) => {
              return <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>
            })}
          </Pickable>
        </div>
        <div>
          <Pickable onChange={this.handleChange.bind(this)} value={this.state.value} type="simple">
            {items.map((item, index) => {
              return <Item key={index} value={item.value} number={item.num} disabled={item.disable}>{item.text}</Item>
            })}
          </Pickable>
        </div>
      </div>;
    }
};

module.exports = Demo;

demo

http://uxco.re/components/pickable/

API

values(): 获得选中的值

Props

配置项	类型	必填	默认值	功能/备注
prefixCls	string	optional	kuma-pickable	类名前缀，不使用 kuma 主题时使用
className	string	required	-	增加额外的class
onChange	func(value, changedKeys)	optional	-	选中情况变化时触发，返回选中的项，以及目前发生变动的值
multiple	bool	optional	true	是否多选
max	number	optional	99	最大显示的数字，超过 max，显示 max+，2.0 版本后此项废弃，改为传入 children 时实现。
type	string	optional	normal	样式风格，可选值为 `normal`, `simple`, `hook`, `simpleHook`
enableFold	bool	optional	false	是否启用折行后自动折叠, 3.0 版本后支持
defaultfoldItems	bool	optional	true	是否在折行的情况下默认折叠, 3.0 版本后支持
maxLines	number	optonal	1	超过几行的情况下使用折叠, 3.0 版本后支持
locale	string	optional	zh-cn	国际化,zh-cn/en-us, 3.0 版本后支持
simpleValueInSingleMode	bool	optional	false	单选时，输出和接收的值变成简单的值类型，而非数组，从 1 变成 1

Item Props

配置项	类型	必填	默认值	功能/备注
value	string/number	required	-	该 Item 对应的值
disabled	boolean	optional	false	是否禁用
number	number	optional	-	number 有值时会显示对应的值，2.0 版本后此项废弃，改为传入 children 时实现。
max	number	optional	99	最大显示的数字，超过 max，显示 max+，2.0 版本后此项废弃，改为传入 children 时实现。