disprzcomponents v1.0.0

Introduction

ES6 react components build to use in various applications

Getting Started

To use disprz components in the application first set the npm registry to disprznpm.disprz.com.

• npm set registry http://disprznpm.disprz.com

Install in application

• npm install disprzcomponents --save

Usage inside react component

• import {AppButton, AppIcon} from "disprzcomponents"
• <AppButton buttonLabel="My First Button"/>

Dropdown

import {dropdown} from "disprzcomponents"

const options = { value: 1, display: "label1" }, { value: 2, display: "label2" }, { value: 3, display: "label3" };

<DropDown value={this.state.selectedValue} onSelect={this.setSelectedValue} items={options}/>

Dialog

import {DialogControl} from "disprzcomponents"

let dialogContent = <div>test</div>

<DialogControl ctrClass={"dialog"} showOkButton={true} showCloseButton={true} content={dialogContent} onCloseButtonClick={this.hideAllocationView} onOkButtonClick={this.onAutoAllocate} title={"Alert"}></DialogControl>

Toast

import {Toast} from "disprzcomponents"

let toastContent= <div>test</div>

<Toast showOkButton={false} autoHide={true} autoHideTimeOut={3000} ctrCls={""} position={Toast.Position.BOTTOM_RIGHT} showCancelButton={false} okButtonLabel={"label"} closeButtonLabel={"label"} title={"Title"} content={toastContent} onOkButtonClick={function} onCloseButtonClick={function} onCancel={function} />

User Selection Widget

import {UserSelectionWidget} from "disprzcomponents"

<UserSelectionWidget apiUrl={"{apiUrl}/api/user/searchUsers"}
  getLimitedUserDefinedFieldsSummaryUrl={"{apiUrl}/api/admin/getLimitedUserDefinedFieldsSummary"}
  rowSelectable={true}
  showTotalCountAsHeading={true}
  user={UserProps}
  extraQueryParams={{
                         restrictToMyUsers: false
  }}
  accessToken={token}/>

Adding new components to this project

• Inside src folder add a component folder and place the components
• Next src/index.js export your component
• Package.json file increase to next version number
• Build the project using npm run build
• publish it using npm publish