task-icon-selector

Kellis components.

installation

npm install -S @jswork/task-icon-selector

icon urls

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

update

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

@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

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/