Uxcore-tag NPM

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回调