InorigoJS React UI Components

Bundle of React components for use with Inorigo solutions.

Installing package

Using npm:

npm install @ortelius/inorigojs-ui-react

DropDown

Drop down component.

import {DropDown} from "@ortelius/inorigojs-ui-react";
<DropDown
items={myItemArray} //[{id, presentation}, {id, presentation}]
selectedId={mypreselectedid}
classNameDiv="" //Add a css class to the root div element
classNameSelect="form-control"
classNameDefault="defaultdropdown"
placeholder="Employment Type"
callbackItemSelect={(value) => { console.log(value) }}
callbackItemClear={() => { console.log(value) }}
radio //Make it a radio button
/>

Properties

• items array[{id, presentation}] - Array of values to show in the dropdown.
• placeholder string - Default text for text
• callbackItemSelect function - Function that should get triggered when an item gets selected
• callbackItemClear function - Function that should get triggered when an item gets deselected
• classNameDiv string - Css classname for dropdown container
• classNameDefault string - Css classname for default text
• classNameSelect string- Css classname for selected value
• itemSelected string- Id of a preselected item
• radio boolean- Render as a radio button list
• disabled boolean- Disables input

Searchable drop down

import {SearchableDropDown} from "@ortelius/inorigojs-ui-react";
<SearchableDropDown
items={MyItemList} //[{id, presentation}, {id, presentation}]
selectedId={mypreselectedid}
classNames="form-control" //Add css classes
classNameDefault="defaultdropdown" //Add css classes
placeholder="My cool list"
callbackItemSelect={(value) => { console.log(value }}
callbackItemClear={() => { console.log(null) }}
/>

Properties

• items array[{id, presentation}] - Array of values to show in the dropdown.
• placeholder string - Default text for text
• callbackItemSelect function - Function that should get triggered when an item gets selected
• callbackItemClear function - Function that should get triggered when an item gets deselected
• classNames string - Css classname for dropdown container
• classNameDefault string - Css classname for default text
• itemSelected string- Id of a preselected item
• disabled boolean- Disables input

Multi Select DropDown

import {MultiSelectDropDown} from "@ortelius/inorigojs-ui-react";
<MultiSelectDropDown
items={myListItems} //[{id, presentation}, {id, presentation}]
selectedIds={["id2", "id5"]}
placeholder="Multi Selector"
multiple={true} //Show all selected values in folded preview
callbackItemSelect={value => {
this.props.context.handleChange("site", value);
}}
wclassname="sitedropdown" //Add css classes
/>

Properties

• items array[{id, presentation}] - Array of values to show in the dropdown.
• placeholder string - Default text for text
• callbackItemSelect function - Function that should get triggered when an item gets selected
• callbackItemClear function - Function that should get triggered when an item gets deselected
• classNames string - Css classname for dropdown container
• classNameDefault string - Css classname for default text
• selectedIds array[string]- Id of a preselected item
• disabled boolean- Disables input
• multiple boolean - Allow multiple values.
• wclassname string - Css classname that sets the width of the field.

Loader (fullscreen)

Renders a inorigo loading spinner

import {Loader} from "@ortelius/inorigojs-ui-react";
<Loader />

InlineLoader (not fullscreen)

Renders a inorigo loading spinner

import {InlineLoader} from "@ortelius/inorigojs-ui-react";
<InlineLoader />

Drag and drop (Deprecated)

Drag and drop component

import {DragAndDrop} from "@ortelius/inorigojs-ui-react";

Properties

• content - which is the components that should be rendered for each draggable item.
• data - is the data as an array that the content represents. The mapping of components (for content) should be on this data.
• onDropCallback - is the function that should be executed when the dragged item is dropped.
• switchPlaces - This function switches the position of the dragged item with the position of the target item.
• onDragStartHandler - When an item starts to be dragged, this event fires. It activates the drop zones for all of the places where an item may be dropped, and sets which item is being dragged.
• onDropHandler - This function fires when a dragged item is dropped onto a drop zone. It triggers "switchPlaces"and the onDropCallback that was specified earlier.
• onDragOverHandler - Changes the css-classes of the hovered items so that it is visible where the item will land if dropped there.
• onDragOutHandler - Only prevents default behaviour of whatever was dragged out of.
• activateDropZones - When the component is loaded all of the drop zones have display: none so that they do not interfere whith the default functionality of other HTML elements (such as onClick). When they are activated, they block all other events beneath the drop zones.
• deActivateDropZones - Hides drop zones once an item has been dropped and they are no longer needed.

Bootstrap window (Deprecated)

Component for quickly creating a modal window.

Example

import {BootstrapWindow} from "@ortelius/inorigojs-ui-react";

The Bootstrap Modal Window component requires Bootstrap 4.1.x to be installed in your project, either through CDN or NPM. The window will have all child markup as its content. The component will be invisible at first, and does not display anything until a modal event has been fired. To summon the window you can simply add attribute to anything clickable in your markup as such:

<a data-toggle="modal" data-target={`#Modal${myModalID}`}> Click me! </a>

Then make sure to add the BootstrapWindow element somewhere in your markup:

<BootstrapWindow title="One sassy title" id={`#Modal${myModalID}`}>
  <div>Some content for the window!</div>
 </BootstrapWindow>

To change the width use the following css in your main stylesheet:

.modal-lg {
max-width: 80% !important;
 }

Or you can use @media to define different breakpoints:

@media (min-width: 576px) {
  .modal-dialog {
      max-width: 600px !important;
     margin: 1.75rem auto !important;
}
}