ray-tag-select v1.0.0

ray-tag-select

install

npm i --save ray-tag-select

usage

• Demo.js

import React, { Component } from 'react';
import { DemoContent } from 'ray-page-container';
import TagSelect from 'ray-tag-select';
import Actions from './Actions';

const Option = TagSelect.Option;

const categorys = [
  { key: 'tag-1', value: 'tag1', text: '张三' },
  { key: 'tag-2', value: 'tag2', text: '李四' },
  { key: 'tag-3', value: 'tag3', text: '王五' },
  { key: 'tag-4', value: 'tag4', text: '赵六' },
  { key: 'tag-5', value: 'tag5', text: '周七' }
];

class Demo extends Component {

  onChange = (checkedTags) => {
    console.log('checkedTags:', checkedTags);
  }

  render() {
    return (
      <DemoContent
        title={`TagSelect props 设置`}
        actions={<Actions />}
      >
        <TagSelect onChange={this.onChange} expandable>
          {categorys.map(c => <Option key={c.key} value={c.value}>{c.text}</Option>)}
        </TagSelect>
      </DemoContent>
    );
  }
}

export default Demo;

• actions.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ActionItem } from 'ray-page-container';

class Actions extends Component {
  state = {
    block: false
  };

  toggleBlock = (e) => {
    const checked = e.target.checked;
    this.setState({
      block: checked
    });
    this.props.onPropsChange({
      type: 'block',
      value: checked
    });
  }

  render() {
    const { block } = this.state;
    return (
      <div className="pan-zoom-action">
        <ActionItem label="块级(block)">
          <input
            type="checkbox"
            checked={block}
            onChange={this.toggleBlock}
          />
        </ActionItem>
      </div>
    );
  }
}

Actions.propTypes = {
  onPropsChange: PropTypes.func
};

export default Actions;

props

TagSelect

TagSelect.Option

CheckableTag

Lecense

MIT