npm package: @jswork/task-icon-selector
Description: Kellis components.
Author: afei
Latest version: 1.0.2

# task-icon-selector
> Kellis components.

## installation
```shell
npm install -S @jswork/task-icon-selector
```

## icon urls
- https://dth-beta.alo7.com/assets/testimg/01.png (01-19)

## update
```shell
npm update @jswork/task-icon-selector
```

## properties
| Name      | Type   | Required | Default              | Description                           |
| --------- | ------ | -------- | -------------------- | ------------------------------------- |
| className | string | false    | -                    | The extended className for component. |
| name      | string | false    | 'task-icon-selector' | Default selector name.                |
| value     | string | false    | -                    | Default value.                        |
| onChange  | func   | false    | noop                 | The change handler.                   |
| disabled  | bool   | false    | false                | If the component is disabled.         |
| readOnly  | bool   | false    | false                | If the component is read only.        |
| items     | array  | false    | []                   | Image list.                           |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-radio-group/dist/style.scss";
  @import "~@jswork/task-icon-selector/dist/style.scss";

  // customize your styles:
  $task-icon-selector-options: ()
  ```
2. import js
  ```js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import TaskIconSelector from '@feizheng/task-icon-selector';
  import './assets/style.scss';

  class App extends React.Component {
    // https://course-assets.alo7.com/kellis/icon/01.png
    state = {
      value: '01',
      readOnly: false,
      disabled: false,
      items: [
        'https://course-assets.alo7.com/kellis/icon/01.png',
        'https://course-assets.alo7.com/kellis/icon/02.png',
        'https://course-assets.alo7.com/kellis/icon/03.png',
        'https://course-assets.alo7.com/kellis/icon/04.png',
        'https://course-assets.alo7.com/kellis/icon/05.png',
        'https://course-assets.alo7.com/kellis/icon/06.png',
        'https://course-assets.alo7.com/kellis/icon/07.png',
        'https://course-assets.alo7.com/kellis/icon/08.png',
        'https://course-assets.alo7.com/kellis/icon/09.png',
        'https://course-assets.alo7.com/kellis/icon/10.png',
        'https://course-assets.alo7.com/kellis/icon/11.png',
        'https://course-assets.alo7.com/kellis/icon/12.png',
        'https://course-assets.alo7.com/kellis/icon/13.png',
        'https://course-assets.alo7.com/kellis/icon/14.png',
        'https://course-assets.alo7.com/kellis/icon/15.png',
        'https://course-assets.alo7.com/kellis/icon/16.png',
        'https://course-assets.alo7.com/kellis/icon/17.png',
        'https://course-assets.alo7.com/kellis/icon/18.png'
      ].map((item) => {
        return {
          url: item,
          value: item.match(/(\d+)\.png/)[1] || '01'
        };
      })
    };
    render() {
      return (
        <div className="app-container">
          <div className="status-bar">
            <p>
              <strong>readOnly:</strong>
              <span>{this.state.readOnly + ''}</span>
            </p>
            <p>
              <strong>disabled:</strong>
              <span>{this.state.disabled + ''}</span>
            </p>
          </div>
          <TaskIconSelector
            prefixCls="ant"
            readOnly={this.state.readOnly}
            disabled={this.state.disabled}
            value={this.state.value}
            items={this.state.items}
            onChange={(e) => {
              this.setState({ value: e.target.value });
            }}
          />
          <button
            className="button"
            onClick={(e) => {
              this.setState({ readOnly: !this.state.readOnly });
            }}>
            toggle readOnly
          </button>
          <button
            className="button"
            onClick={(e) => {
              this.setState({ disabled: !this.state.disabled });
            }}>
            toggle disabled
          </button>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/task-icon-selector/