@jswork/task-icon-selector NPM

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

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: ()

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/

react component

@jswork/noop @jswork/react-radio-group autoprefixer classnames object-assign prop-types

@everything-registry/sub-chunk-501 @infinitebrahmanuniverse/nolb-_jsw @zalastax/nolb-_jsw

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago