uxcore-tag

TL;DR

uxcore-tag ui component for react

setup develop environment

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

Usage

const data = [
  {
    tag: 'owner创建0',
    count: 0,
    canAddCount: true,
    createByOwner: true,
    canDelete: true
  },
  {
    tag: 'owner创建1',
    count: 1,
    canAddCount: true,
    createByOwner: true,
    canDelete: false
  }
]

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: data
    }
  }

  onClickTag(tag) {

    console.log('点击标签: ', tag)
  }

  onAdd(tag) {
    let me = this,
      data = me.state.data;
    

    let item = {
      tag: tag,
      count: 0,
      canAddCount: false,
      createByOwner: false,
      canDelete: true
    }

    data.push(item);

    me.setState({
      data: data
    })

    console.log('添加标签: ' + tag);
  }

  onLike(tag) {
     let me = this,
      data = me.state.data;

      data = data.map(function (item) {
        if (item.tag == tag) {
          item.count = item.count + 1;
          item.canAddCount = false;
        }
        return item
      })

     me.setState({
      data: data
     }) 

    console.log('赞标签: ', tag);
  }
  
  onDelete(tag, cb) {
    let me = this,
      data = me.state.data;

      data = data.filter(function (item) {
        return item.tag != tag
      })

      cb && cb();
     me.setState({
      data: data
     }) 

    console.log('删除标签: ' + tag);
  }

  render() {
    let me = this;

    let props = {
      className: 'tag-classname',
      addTags: true,
      onAdd: me.onAdd.bind(me),
      locale: 'zh-cn'
      //locale: 'en-us'
    }

    return (
      <div className="demo">
        
        <Tag {...props}>
        {me.state.data.map(function (item, index) {
            return <Item 
                key={"uxcore-tag-item-" + index}
                className={item.createByOwner ? "create-by-owner" : ''}
                tag={item.tag}
                count={item.count}
                canAddCount={item.canAddCount}
                canDelete={item.canDelete}
                onClick={me.onClickTag.bind(me)}
                maxDisplayCount={99}
                onAddCount={me.onLike.bind(me)}
                onDelete={me.onDelete.bind(me)}
                confirmDeleteText="确定删除该标签吗?"
                locale="zh-cn"
                >
                {item.tag}
              </Item>
        })}
          
        </Tag>
      </div>
    );
  }

uxcore-tag

API

Props

Tag

|配置项|类型|必填|默认值|功能/备注| |---|---|---|---|---| |className|string|optional|''|额外的className| |addTags|boolean|optional|true|是否可以新增tag| |onAdd(tagName [, callback(keepOpen)])|function|optional|noop|新增tag的回调,tagName为新增的标签名；如果传入第二个参数，那么必须要执行callback，keepOpen表示是否保留输入框内容不收起输入框| |locale|string|optional|'zh-cn'|语言，另可选'en-us', 'pl-pl'| |placeholder|string|optional|'请输入标签'|添加标签输入框的placeholder自定义|

TagItem

通过 Tag.Item 取得。

|配置项|类型|必填|默认值|功能/备注| |---|---|---|---|---| |className|string|optional|''|额外的className| |tag|string|require|''|tag的值| |type|string|optional| | 枚举值 show, success, warning, info, danger | |count|number|optional|0|标签后面的数字| |canAddCount|boolean|optional|false|是否可以增加数字| |canDelete|boolean|optional|false|是否可以删除标签| |onClick(tagName)|function|optional|noop|点标签回调| |maxDisplayCount|number|optional|99|最大显示数字| |onAddCount(tagName)|function|optional|noop|点击增加数字的加号回调| |onDelete(tagName, cb)|function|optional|noop|点击删除icon回调 注意手动调用cb，否则弹窗不会消失| |confirmDeleteText|string|optional|''|确认删除文案，如果不填则直接触发onDelete回调|