Package Exports

@jswork/react-interactive-list

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jswork/react-interactive-list) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-interactive-list

An interactive, dynamic list of components with add / remove actions.

installation

npm install -S @jswork/react-interactive-list

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
min	number	false	1	The minimum size.
max	number	false	10	The max size.
items	array	false	[]	The data source.
template	func	false	noop	The data item template.
templateCreate	func	false	noop	The action of `create` component.
templateDefault	func	false	noop	The empty create template.
onChange	func	false	noop	The change handler.
onError	func	false	noop	When trigger max/min boundary.

usage

import css

@import "~@jswork/react-interactive-list/dist/style.css";

// or use sass
@import "~@jswork/react-interactive-list/dist/style.scss";

// customize your styles:
$react-interactive-list-options: ()

import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactInteractiveList from '@jswork/react-interactive-list';
import './assets/style.scss';

class App extends React.Component {
  state = {
    items: [
      this.templateDefault(),
      this.templateDefault(),
      this.templateDefault(),
      this.templateDefault()
    ]
  };

  template = ({ item, index, items }, cb) => {
    return (
      <div className="is-item py-2" key={index}>
        {index + 1}:
        <input
          className="checkbox"
          type="checkbox"
          checked={item.checked}
          onChange={(e) => {
            items[index].checked = e.target.checked;
            this.list.notify();
          }}
        />
        <input
          type="text"
          value={item.value}
          onChange={(e) => {
            item.value = e.target.value;
            this.list.notify();
          }}
        />
        <button className="button is-small is-danger" onClick={cb}>
          Remove
        </button>
      </div>
    );
  };

  templateCreate = (_, cb) => {
    return (
      <button className="button is-info is-fullwidth" onClick={cb}>
        Add
      </button>
    );
  };

  templateDefault() {
    return { checked: false, value: 'A new template' };
  }

  onChange = (inEvent) => {
    const items = inEvent.target.value;
    this.setState({ items });
    console.log('changed:', items);
  };

  onError = (inEvent) => {
    // console.log('validate:', inEvent.target.value);
  };

  onClickRadom = (inEvent) => {
    const random = Math.floor(Math.random() * 8);
    this.setState({
      items: [1, 2, 3, 4, 5, 6, 7, 8]
        .slice(0, random)
        .map((item) => this.templateDefault())
    });
  };
  render() {
    const { items } = this.state;
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-interactive-list">
        <button
          className="button is-primary is-fullwidth mb-2"
          onClick={this.onClickRadom}>
          Set Random Items
        </button>
        <ReactInteractiveList
          items={items}
          template={this.template}
          templateDefault={this.templateDefault}
          templateCreate={this.templateCreate}
          onChange={this.onChange}
          onError={this.onError}
          ref={(list) => (this.list = list)}
        />
      </ReactDemokit>
    );
  }
}

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

documentation

https://afeiship.github.io/react-interactive-list/

license

Code released under the MIT license.