@opuscapita/react-select-order-list

React component containing orderable and selectable list

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
62Nov 2, 2019Dec 4, 2017Minified + gzip package size for @opuscapita/react-select-order-list in KB

Readme

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.

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"
      />
    );
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.