Wondering what’s next for npm?Check out our public roadmap! »

    @ortelius/inorigojs-ui-react
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.48 • Public • Published

    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;
    }
    }

    Install

    npm i @ortelius/inorigojs-ui-react

    DownloadsWeekly Downloads

    3

    Version

    0.0.48

    License

    ISC

    Unpacked Size

    221 kB

    Total Files

    38

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar