@opuscapita/react-select-order-list

react-select-order-list

Description

SelectOrderList component renders two lists. First contains data and we can check and uncheck them. After that selected row appears on second list where we can sort data by drag and drop function. We also have delete option avaiable from second list by remove icon.

Installation

npm install @opuscapita/react-select-order-list

• Install and load font-awesome font to your project

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

SelectOrderList

Prop name	Type	Default	Description
availableData	Immutable List of items	List()	List of the selectable items
onChange	function	required	Callback function, which is called when data selection or order is changed. It returns an object of allSelected (boolean) sign and selectedData (List)
allSelected	boolean	false	Sign of all available items selected
id	string	''	Id for a component div wrapper
searchPlaceholder	string	''	Placeholder for search
selectedData	Immutable List of items	List	List of selected and sorted items
translations	object	{ allLabel: '', availableListLabel: '', searchTooltip: '', selectedListLabel: '' }	Localized labels
singleColumn	boolean	false	Uses single column layout and shows only selected data cloumn

SelectOrderList - items

Prop name	Type	Default	Description
label	string or element	required	Item label
value	string/bool/number	required	Item value
isLocked	bool	false	Item locked sign

Code example

import React from 'react';
import { List } from 'immutable';
import SelectOrderList from '../../../src/index';

export default class ListItemsView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      availableData: List([
        {
          label: 'one',
          value: 1',
        },
        {
          label: 'two',
          value: 2,
        },
        {
          label: 'three',
          value: 3,
        },
      ]),
      selectedData: List([
        {
          label: 'two',
          value: 2,
        },
        {
          label: 'three',
          value: 3,
        },
      ]),
      allSelected: false,
    };
  }

  onChange =(data) => {
    this.setState({ ...data });
  }

  render() {
    return (
      <SelectOrderList
        allLabel="All"
        allSelected={this.state.allSelected}
        availableData={this.state.availableData}
        availableListLabel="Available data"
        id="example"
        onChange={this.onChange}
        selectedData={this.state.selectedData}
        selectedListLabel="Selected data"
      />
    );
  }
}