@opuscapita/react-select-order-list

    3.2.4 • Public • Published

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

    Keywords

    none

    Install

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

    DownloadsWeekly Downloads

    166

    Version

    3.2.4

    License

    MIT

    Unpacked Size

    6.33 MB

    Total Files

    21

    Last publish

    Collaborators

    • jarkko.rouvinen
    • maciej-wakula-opuscapita
    • bo-kh
    • pdetmer
    • janek.bug
    • alexeysergeev
    • ilkkalehtinen
    • havantkim
    • eriihine
    • tamkov-sc
    • kwierchris
    • elefantino
    • samikarj
    • dsanko
    • dmitrydivin
    • alexanderdanilov
    • egor.stambakio
    • jenni
    • ocmachineuser
    • lukaszkepa
    • naniantero
    • nkovalenko-sc
    • jluukka
    • zjuice
    • adam-dziomdziora-cybercom
    • kaputse
    • dmitriy.sanko
    • nczeranka
    • ocautomation