Code Monkey home page Code Monkey logo

react-duallist's Introduction

react-duallist

A React based searchable, sortable and fully customizable dual list.

Demo

Install

npm install react-duallist --save

or

yarn add react-duallist

Use

import Duallist from 'react-duallist';

import 'react-duallist/lib/react_duallist.[css|less|scss|sass]'

  <Duallist
    available={available}
    selected={selected}
    onSelect={this.onSelect}
  />

options

Option Description Default Value Required
available List of available options, will appear in the left box true
selected List of selected options, will appear in the right box true, atleast need to pass an empty array
onSelect A callback to handle the change in the selected list true
leftLabel A header for the left (available) list Available
rightLabel A header for the right (selected) list Selected
sortable A false value will hide the reorder buttons on the right true
searchable A false value will hide the search field on the top true
moveLeftIcon fontawesome icons or icon of your choice <
moveAllLeftIcon fontawesome icons or icon of your choice <<
moveRightIcon fontawesome icons or icon of your choice >
moveAllRightIcon fontawesome icons or icon of your choice >>
moveUpIcon fontawesome icons or icon of your choice ￪
moveTopIcon fontawesome icons or icon of your choice ⇈
moveDownIcon fontawesome icons or icon of your choice ￬
moveBottomIcon fontawesome icons or icon of your choice ⇊

Tests

npm test

or yarn test

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

  • 0.0.1 - Duallist implementations
  • 0.0.2 - Support sorting on the 'selected' list
  • 0.0.3 - Hide/show search bar
  • 0.0.4 - Add example page
  • 0.0.5 - Add Custom icon support
  • 1.0.0 - Support React 16
  • 1.1.0 - Some style changes
  • 1.1.1 - Rename lib directory
  • 1.1.2 - Handle when empty arrays are passed
  • 1.1.4 - OnSelect handlers for the left and right lists.
  • 1.1.5 - [Fix for issue #1] Allow empty 'selected' array

react-duallist's People

Contributors

dlatheron avatar jyotirmaybanerjee avatar

Stargazers

avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

risaac ambroseus smithleebic miguelkorn ssowms

react-duallist's Issues

v1.1.4 It seems avalable.value can't be a number.

Had to toString() it. Otherwise it throws:

index.js?2692:187 Uncaught TypeError: Cannot read property 'value' of undefined
    at eval (index.js?2692:187)
    at Array.map (<anonymous>)
    at Duallist._this.renderRightList (index.js?2692:184)
    at Duallist.render (index.js?2692:298)
    at finishClassComponent (react-dom.development.js?61bb:8389)
    at updateClassComponent (react-dom.development.js?61bb:8357)
    at beginWork (react-dom.development.js?61bb:8982)
    at performUnitOfWork (react-dom.development.js?61bb:11814)
    at workLoop (react-dom.development.js?61bb:11843)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:100)

Please pass non empty arrays

If I try the demo I can never use the << button without getting the warning "Please pass non empty arrays".
How can the << button be used?

My use case would be if a user has selected 10 items from a large list on the left and wants to start all over again.

Feature Request

Hi Jyotirmay,

Thanks for the great library. I wanted to see if it was possible for you to expose additional properties.

  1. The ability change the placeholder text in the search inputs.
  2. Add Labels underneath each of the list boxes

Best,

Roberto

Can't override/localise the search placeholder text

The string for the placeholder test for the left and right search boxes appears to be fixed in Index.js, lines 235 and 294.

It would be really useful to make this externally accessible because currently a library user can change the props for the left and right labels, but can't keep the search text in sync with these names.

I'm happy to submit a PR for the change if you don't have time.

Enhancement

Hi All,

Thanks again for adding the last feature I requested so quick. I'm back to see if there is anyway you guys can allow for both search inputs to be components. Also the label for both lists. The reason is for internationalization.

Best,

Roberto

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.