@pupilfirst/multiselect-inline v2.0.0

@pupilfirst/multiselect-inline

A multi-select inline component with search for ReasonReact projects.

Demo

multiselect-inline.pupilfirst.com

Installation

npm install @pupilfirst/multiselect-inline

Then add @pupilfirst/multiselect-inline to bs-dependencies in your bsconfig.json. A minimal example:

{
  "name": "your project",
  "sources": "src",
  "bs-dependencies": ["@pupilfirst/multiselect-inline"]
}

Example

Here's an example interface, to select few sports.

   module Selectable = {
    type t =
      | Sport(name)
    and name = string;

    let value = t =>
      switch (t) {
      | Sport(name) => name
      };

    let searchString = value;

    let makeSport = name => Sport(name);
  };

  module MultiSelect = MultiselectInline.Make(Selectable);

  type state = {
    searchInput: string,
    selected: array(Selectable.t),
  };

  let unselected = selected => {
    let searchCollection =
      [|
        "Badminton",
        "Tennis",
        "Baseball",
        "Swimming",
        "Volleyball",
        "Football",
        "Formula 1",
        "Squash",
        "Boxing",
      |]
      |> Array.map(sportName => Selectable.makeSport(sportName));
    searchCollection
    |> Js.Array.filter(sport => !(selected |> Array.mem(sport)));
  };

  let setSportSearch = (setState, value) => {
    setState(state => {...state, searchInput: value});
  };

  let select = (setState, state, sport) => {
    let selected = state.selected |> Js.Array.concat([|sport|]);
    setState(_state => {searchInput: "", selected});
  };

  let deSelect = (setState, state, sport) => {
    let selected =
      state.selected
      |> Js.Array.filter(selected =>
           Selectable.value(sport) != Selectable.value(selected)
         );
    setState(_state => {searchInput: "", selected});
  };

  [@react.component]
  let make = () => {
    let (state, setState) =
      React.useState(() => {searchInput: "", selected: [||]});
    <div className="mt-4">
      <h2 className="text-xl font-semibold"> {"Example" |> str} </h2>
      <div className="mt-4">
        <label
          className="block text-xs font-semibold"
          htmlFor="MultiselectInline__search-input-example">
          {"Select your sports:" |> str}
        </label>
      </div>
      <MultiSelect
        placeholder="Search sport"
        emptySelectionMessage="No sport selected"
        selected={state.selected}
        unselected={unselected(state.selected)}
        onChange={setSportSearch(setState)}
        value={state.searchInput}
        onSelect={select(setState, state)}
        onDeselect={deSelect(setState, state)}
      />
    </div>;
  };

See this code in action here: https://multiselect-inline.pupilfirst.com

Other examples

• Real world Usage in Pupilfirst

Usage

MultiselectInline.Make is a functor that accepts a module with with type t that has functions value and searchString.

MultiselectInline component

MultiselectInline is a Reason-React component that accepts an array of unselected and selected items, both of which have to be of the type MultiselectInline.Selectable.t.

The MultiselectInline component accepts the following props: