DESKERA-UI-LIBRARY

deskera-ui-library is a set of React components, so understanding how React fits into web development is important.

Installing

Install the package in your project directory with:

// with npm
npm install deskera-ui-library

// with yarn
yarn add deskera-ui-library

List of components

showAlert

Alert box

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | title | String | true | empty | | message | String | | | | className | String | | |

Event

| Event | Arguments | Description | | ------- | --------- | ------------------------------ | | onClick | | Emitted when clicked on button |

Example

import { showAlert } from "deskera-ui-library";

showAlert("Updated successfully")

DKButton

Use button

Props

| Property | Type | Required | Value | | --------- | ------- | -------- | ----- | | title | String | true | empty | | icon | String | | | | className | String | | | | style | String | | isReverse | Boolean | |

Event

| Event | Arguments | Description | | ------- | --------- | ------------------------------ | | onClick | | Emitted when clicked on button |

Example

import { DKButton } from "deskera-ui-library";

//simple button
<DKButton title="Try Now" className="text-white"/>

//button with icon
<DKButton title="Try Now" className="text-white" icon={`image_path`} />

DKCheckMark

Use Checkbox

Props

| Property | Type | Required | Value | | ---------- | ------- | -------- | ----- | | title | String | true | empty | | color | String | | | | className | String | | | | isSelected | Boolean | |

Event

| Event | Arguments | Description | | ------- | --------- | ------------------------------------- | | onClick | | Emitted when clicked on check/uncheck |

Example

import { DKCheckMark } from "deskera-ui-library";

<DKCheckMark title="Try Now" isSelected = {`true`} className="text-black"/>

DKContactIcon

Contact Icon

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | title | String | true | empty | | className | String | | |

Example

import { DKContactIcon } from "deskera-ui-library";

<DKContactIcon title="Contact" />

DKHeader

Header Text

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | text | String | true | | | className | String | | |

Example

import { DKHeader } from "deskera-ui-library";

<DKHeader text="Heading title" />

DKIcon

Icon

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | src | String | true | | | className | String | | style | String |

Event

| Event | Arguments | Description | | ------- | --------- | ------------------------------------- | | onClick | | Emitted when clicked on check/uncheck |

Example

import { DKIcon } from "deskera-ui-library";

<DKIcon src={`icon_path`} />

DKLabel

Label

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | text | String | true | | | className | String | | style | String |

Example

import { DKLabel } from "deskera-ui-library";

<DKLabel text="Enter your phone no" />

DKLine

Line

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | className | String | | style | String |

Example

import { DKLine } from "deskera-ui-library";

<DKLine className="mt-m"/>

DKListPicker

List picker

Props

| Property | Type | Required | Value | | ------------- | -------- | -------- | ----- | | title | String | true | - | | className | String | | - | | style | String | | - | | data | [String] | | - | | icons | [DKIcon] | | - | | iconClassName | String | | - | | button | {} | | - | | needIcon | String | | - | | needEdit | Boolean | | - | | needDelete | Boolean | | - | | allowSearch | Boolean | | - |

Event

| Event | Arguments | Description | | -------- | ------------ | ---------------------------------- | | onSelect | index, value | Emitted when select an option | | onEdit | index, value | Emitted when editing an option | | onDelete | index, value | Emitted when deleting an option | | onClose | | Emitted when click on close button |

Example

import { DKListPicker } from "deskera-ui-library";

<DKListPicker title="List Title" data={["Option1", "Option2"]} icons={[DKIcons.ic_edit, DKIcons.ic_delete]}  onSelect={(index, value)=>{}}
button={{title:"+ Add title", icon:"ic_add", className:"", style:{}, onClick:() => {} }}
/>;

DKListPicker2

Dynamic & Flexible List picker (with Object handling & search api functionalities)

Props

| Property | Type | Required | Value | | --------------- | ------- | -------- | ----- | | title | String | true | - | | className | String | | - | | style | String | | - | | data | [{}] | | - | | iconClassName | String | | - | | button | {} | | - | | needEdit | Boolean | | - | | needDelete | Boolean | | - | | allowSearch | Boolean | | - | | searchableKey | String | | - | | searchApiConfig | {} | | - |

Event

| Event | Arguments | Description | | -------- | ---------- | ---------------------------------- | | onSelect | index, obj | Emitted when select an option | | onEdit | index, obj | Emitted when editing an option | | onDelete | index, obj | Emitted when deleting an option | | onClose | | Emitted when click on close button | | renderer | index, obj | Emitted while rendering list items |

Example

import { DKListPicker2 } from "deskera-ui-library";

<DKListPicker2
  title="List Title"
  data={[{id: "0001", name: "Toy Car"}, {id: "0002", name: "Screw"}, {id: 0003", name: "Study Table"}]}
  searchableKey="name"
  renderer={(index, obj)=>(<span>{obj.name}</span>)}
  onSelect={(index, obj)=>{}}
  searchApiConfig={{
    method: "GET",
    getUrl: (val) => {
      return "https://jsonplaceholder.typicode.com/comments";
    },
    dataParser: (response) => {
      return response;
    },
    getPayload: (text) => {
      return null;
    },
    debounceTime: 250
  }}
  />;

DKSectionHeader

Section of header

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | text | String | true | | | className | String | | style | String |

Example

import { DKSectionHeader } from "deskera-ui-library";

<DKSectionHeader text="Header Title" />

DKSpaceH

Space Horizontal

Props

| Property | Type | Required | Value | | -------- | ------- | -------- | ----- | | value | Integer | true | 10 |

Example

import { DKSpaceH } from "deskera-ui-library";

<DKSpaceH value="10" />

DKSpaceV

Space Horizontal

Props

| Property | Type | Required | Value | | -------- | ------- | -------- | ----- | | value | Integer | true | 10 |

Example

import { DKSpaceV } from "deskera-ui-library";

<DKSpaceV value="10" />

DKSpinner

Spinner

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | title | String | - | - | | className | String | - | - |

Example

import { DKSpinner } from "deskera-ui-library";

//only spinner
<DKSpinner />


//spinner with title
<DKSpinner title="Loading" />

DKStatus

Status

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | title | String | true | - | | className | String | - | - | | color | String | - | - |

Example

import { DKStatus } from "deskera-ui-library";

<DKStatus title="Pending" color="bg-red"/>

DKSubLabel

Sub label

Props

| Property | Type | Required | Value | | --------- | ------ | -------- | ----- | | text | String | true | - | | className | String | - | - |

Example

import { DKSubLabel } from "deskera-ui-library";

<DKSubLabel text="List of items"/>

DKTable

Table

Props

| Property | Type | Required | Value | | ---------- | ------------------------ | -------- | ----- | | header | [ {title, type, width} ] | true | - | | values | [ val1, val2, .... ]] | true | - | | isUpdating | Boolean | - | - | | className | String | - | - |

Event

| Event | Arguments | Description | | ------------- | --------- | ---------------------------- | | onRowClick | | Emitted when click on row | | onAction | | Emitted when click on action | | onColumnShift | | Emitted when column change | | onSort | | Emitted when click on sort |

Example

import { DKTable } from "deskera-ui-library";

<DKTable header="[{ title: "Name", width: 14.2, ... }]" values="["James",...]"/>

DKTextarea

Text area

Props

| Property | Type | Required | Value | | ----------- | --------------------------- | -------- | ----- | | placeHolder | String | - | - | | value | any | - | - | | className | String | - | - | | isEditable | Boolean | - | - | | isUpperCase | Boolean | - | - | | type | Text/Number/Static/Password | - | - |

Event

| Event | Arguments | Description | | -------- | --------- | ------------------------ | | onChange | | Emitted when text change | | onClick | | Emitted when click on |

Example

import { DKTextarea } from "deskera-ui-library";

<DKTextarea  type="Text" placeHolder="Message" value="" onChange={(value) => {}}/>

DKTextField

Text Field

Props

| Property | Type | Required | Value | | ----------- | --------------------------- | -------- | ----- | | placeHolder | String | - | - | | value | any | - | - | | className | String | - | - | | isEditable | Boolean | - | - | | isUpperCase | Boolean | - | - | | type | Text/Number/Static/Password | - | - |

Event

| Event | Arguments | Description | | -------- | --------- | ------------------------ | | onChange | | Emitted when text change | | onClick | | Emitted when click on |

Example

import { DKTextField } from "deskera-ui-library";

<DKTextField  type="Text" placeHolder="Message" value="" onChange={(value) => {}}/>

DkInput

Input Field

Props

| Property | Type | Required | Value | | ---------------- | ------------ | -------- | ----- | | className | String | - | - | | type | INPUT_TYPES | - | - | | name | String | - | - | | value | String | - | - | | placeholder | String | - | - | | required | Boolean | - | - | | needHeader | Boolean | - | - | | readonly | Boolean | - | - | | icon | String(src) | - | - | | canValidate | Boolean | - | - | | direction | String | - | - | | style | {...} | - | - | | errorMessage | String | - | - | | autofocus | INPUT_TYPES | - | - | | options | ["Op1", ...] | - | - | | dropdownConfig | {...} | - | - | | datePickerConfig | {...} | - | - |

Event

| Event | Arguments | Description | | -------- | --------- | -------------------------------------- | | onChange | | Emitted when text change | | onClick | | Emitted when Input section is clicked | | onFocus | | Emitted when text field receives focus |

Example

import { DKInput } from "deskera-ui-library";

<DKInput name="fullName" value="" onChange={(value) => {}}/>

 dropdownConfig:
 {
   data?: [],
   allowSearch?: boolean,
   searchApiConfig?: {
     method?: "POST"/"GET"...,
     getUrl: (searchValue) => string,
     getPayload: (searchValue) => {...payload},
     dataParser: (response) => data
     debounceTime?: number
   },
   canEdit?: boolean,
   canDelete?: boolean,
   button?: {
     title: string,
     icon: string,
     className: string,
     style: {...},
     onClick: () => {}
   },
   renderer?: (value) => {},
   onSelect?: (index, value) => {},
   onEdit?: (index, value) => {},
   onDelete?: (index, value) => {}
 }

 datePickerConfig:
 {
   isDateRange?: boolean,
   className?: string,
   startDate?: date,
   endDate?: date,
   color?: string,
   needDualRangePicker?: boolean
 }

Toggle

Toggle

Props

| Property | Type | Required | Value | | --------- | ------- | -------- | ----- | | isOn | Boolean | - | - | | className | String | - | - |

Event

| Event | Arguments | Description | | -------- | --------- | ---------------------------- | | onChange | | Emitted when click on button |

Example

import { Toggle } from "deskera-ui-library";

<Toggle isOn={`true`}/>

DKDataGrid

Data Grid

Props

| Property | Type | Required | Value | | ----------------- | ---------------------------------------- | -------- | ---------- | | columns | {key, name, type, width, options} | - | - | | rows | {key: value} | - | - | | allowRowEdit | Boolean | - | - | | allowRowAdd | Boolean | - | - | | allowBottomRowAdd | Boolean | - | - | | allowColumnAdd | Boolean | - | - | | allowColumnShift | Boolean | - | - | | allowSearch | Boolean | - | - | | allowFilter | Boolean | - | - | | allowShare | Boolean | - | - | | showHeader | Boolean | - | - | | isAllRowSelected | Boolean | - | - | | dateFormat | String | - | - | | currentPage | Number | - | - | | totalPageCount | Number | - | - | | filterData | {query: [{key, condition, value}]} | - | - | | filterOperator | String | - | "and"/"or" | | addButton | {title, icon, className, style, onClick} | - | - | | updating | Boolean | - | - | | updatingView | Div | - | - | | contextMenu | [{title, icon, className, onClick}] | - | - |

Row properties

| Property | Type | Required | Value | | -------------- | ----------------------------------- | -------- | ----- | | rowContextMenu | [{title, icon, className, onClick}] | - | - | | rowButtons | [{title, icon, className, onClick}] | - | - | | allowRowEdit | Boolean | - | - |

Event

| Event | Arguments | Description | | ----------------- | ---------------------------------------- | ------------------------------------------------------------------ | | onRowUpdate | rowIndex, rowData, columnKey, columnData | Emitted when change of row | | onColumnUpdate | columnIndex, columnData, property | Emitted when change of coloumn | | onRowAdd | rowData | Emitted when change of add row | | onColumnAdd | columnData | Emitted when change of add column | | onColumnDelete | columnIndex, columnData | Emitted when column delete | | onColumnShift | newIndex, oldIndex | Emitted when column shift | | onFilter | query: [{}], logicalOperator: string | Emitted when on filter | | onShare | | Emitted when on filter | | onSearch | searchText | Emitted when on search | | onRowClick | rowIndex, rowData | Emitted when click on row | | onRowOpenClick | rowIndex, rowData | Emitted when click on row | | onRowSelect | rowIndex, rowData | Emitted when click on row | | onAllRowSelect | | Emitted when click on row | | onPageChange | pageNo | (Enables new paginator UI) Emitted when click on page in paginator | | onPrevPageTapped | | Emitted when click on row | | onNextPageTapped | | Emitted when click on row | | onDataSourceClick | columnName | Emitted when click on data source |

Example

import { DKDataGrid } from "deskera-ui-library";

<DKDataGrid columns=[{
  key: "name",
  name: "Name",
  type: "Text",
  width: 10.2,
  systemField: false,
  editable: true,
  hidden: false,
  uiVisible: false,
  required: false,
  allowAddOption: false,}, ....]
  rows=[{name: "Zahir Rout"},...]/>

DKCalendar

Calendar

Props

| Property | Type | Required | Value | | ----------------- | -------- | -------- | ----- | | selectedDate | Date | - | - | | month | number | - | - | | year | number | - | - | | selectedDate | String[] | - | - | | isDateRange | Boolean | - | - | | selectedStartDate | Date | - | - | | selectedEndDate | Date | - | - |

Event

| Event | Arguments | Description | | ----------------- | --------- | ----------------------- | | onSelectDateRange | | Emitted when data range |

Example

import { DKCalendar } from "deskera-ui-library";

<DKCalendar selectedDate={value} onSelectDate={(date) => {}} />

DKDateRangePicker

Dual Range Calendar

Props

| Property | Type | Required | Value | | ----------------- | -------------- | -------- | ----- | | startDate | Date | - | - | | selectedStartDate | Date | - | - | | selectedEndDate | Date | - | - | | className | string | - | - | | style | {...} | - | - | | color | string(rgba()) | - | - | | showPresetList | boolean | - | - |

Event

| Event | Arguments | Description | | ----------------- | ------------------ | ----------------------- | | onSelectDateRange | startDate, endDate | Emitted when data range |

Example

import { DKDateRangePicker } from "deskera-ui-library";

<DKDateRangePicker startDate={value} onSelectDate={(start, end) => {}} />

showLoader

Show loader

Props

| Property | Type | Required | Value | | -------- | ------ | -------- | ----- | | title | String | - | - |

Example

import { showLoader } from "deskera-ui-library";

showLoader("Loading...")

removeLoader

Remove loader

Example

import { removeLoader } from "deskera-ui-library";

removeLoader()

showToast

Show toast

Props

| Property | Type | Required | Value | | --------- | ------------------------------- | -------- | ----- | | message | String | - | - | | type | default,success,failure,warning | - | - | | direction | top,bottom | - | - |

Example

import { showToast } from "deskera-ui-library";

showToast("Please enter valid email", "failure", "top")

DataEntryPopup

Data Entry Popup

Props

| Property | Type | Required | Value | | ------------ | ----- | -------- | ----- | | formElements | Array | - | - |

Event

| Event | Arguments | Description | | -------- | --------- | ----------------------------------- | | onCancel | | Emitted when click on cancel button | | onSubmit | | Emitted when click on submit button |

Example

import { DataEntryPopup } from "deskera-ui-library";

<DataEntryPopup formElements=[{name: "Email", floatLabel: false, required: true, type: 'email', value: "", requestKey: "email"}, ...], />

DKSelectBox

Select Box

Props

| Property | Type | Required | Value | | ----------- | ------- | -------- | ----- | | name | String | true | - | | value | any | - | - | | options | any | - | - | | description | String | - | - | | className | String | - | - | | invalid | Boolean | - | - | | required | Boolean | - | - |

Event

| Event | Arguments | Description | | -------- | --------- | ------------------------ | | onSelect | | Emitted when it selected |

Example

import { DKSelectBox } from "deskera-ui-library";

<DKSelectBox  name="Please select"  options=["val1", "val2", ...] value=""/>

FormPopup

Form Popup

Props

| Property | Type | Required | Value | | ------------ | ------ | -------- | ----- | | formElements | Object | true | - |

Event

| Event | Arguments | Description | | -------- | --------- | ----------------------------------- | | onCancel | | Emitted when click on cancel button | | onSubmit | | Emitted when click on submit button |

Example

import { FormPopup } from "deskera-ui-library";

<FormPopup  formElements=[{name: "Email", floatLabel: false, required: true, type: 'email', value: "", requestKey: "email"}, ...]/>

Border

// Border
.border-none
.border-s
.border-m
.border-red
.border-green
.border-orange
.border-blue

// Border Radius
.border-radius-s
.border-radius-m
.border-radius-r
.border-radius-l
.border-radius-xxl
.border-radius-none

Colors

// Background color
.bg-menu
.bg-dark-gray
.bg-gray
.bg-gray1
.bg-gray2
.bg-gray3
.bg-gray4
.bg-gray5
.bg-line
.bg-line-2
.bg-red
.bg-yellow
.bg-green
.bg-white
.bg-blue
.bg-orange
.bg-transparent
.bg-whats-app
.bg-telegram
.bg-india-shield
.bg-deskera
.bg-erp
.bg-crm
.bg-people
.bg-aio
.bg-deskera-secondary
.bg-erp-secondary
.bg-crm-secondary
.bg-people-secondary
.bg-aio-secondary
.bg-chip-gray
.bg-chip-green
.bg-chip-blue
.bg-chip-red
.bg-chip-orange

// Text color
.text-gray
.text-dark-gray
.text-white
.text-royalblue
.text-green
.text-orange
.text-blue
.text-red
.text-cut
.text-line-through

Common

.main-holder
.app-font-family
.transparent-background
.transparent-background-light
.popup-window

// Position
.position-absolute
.position-relative

// Display
.border-box
.display-block
.display-none
.circle

// Responsive
.display-only-web
.display-only-mobile
.scroll-y-only-web

.listPickerBG
.listPickerBG:hover
::-webkit-scrollbar
.hide-scroll-bar

// Responsive MR, ML
.pr-r-only-web
.ml-l-only-web
.main-holder-p-horizontal
.main-holder-p-vertical

.blur
.unselectable

Cursor

.cursor-hand
.cursor-move
.cursor-col-resize

DataGrid

.data-grid-right-border
.data-grid-bottom-border
.data-grid-top-border
.data-grid-header
.data-grid-header:hover
.data-grid-selected-bg
.data-grid-badge-color-1
.data-grid-badge-color-2
.data-grid-badge-color-3
.data-grid-badge-color-4
.data-grid-badge-color-5
.data-grid-badge-color-6
.data-grid-badge-color-7
.data-grid-badge-color-8
.data-grid-badge-color-9
.data-grid-badge-color-10
.data-grid-filter-arrow

Flex

.row
.row-reverse
.column
.row-responsive
.flex-wrap
.flex-1

.justify-content-around
.justify-content-center
.justify-content-start
.justify-content-end
.justify-content-between

.align-items-center
.align-items-baseline
.align-items-start
.align-items-end
.align-items-stretch

.align-self-center
.align-self-start
.align-self-end

.justify-self-center
.justify-self-start
.justify-self-end

Font

.fs-r
.fs-xs
.fs-s
.fs-m
.fs-l
.fs-xl
.fs-xl-2
.fs-xxl
.fs-xxxl

// Font weight
.fw-l
.fw-r
.fw-m
.fw-b
.fw-h

// Text alignment
.text-wrap-none
.text-wrap
.text-trailing
.text-align-left
.text-align-center
.text-align-right
.text-align-justify

Icon

.ic-r
.ic-xs
.ic-xs-2
.ic-s
.ic-s-2
.ic-m
.ic-r-2
.ic-r-3
.ic-l
.ic-xl
.ic-contact-r

Zindex

.z-index-1
.z-index-2
.z-index-3
.z-index-4
.z-index-5
.z-index-6

Text Field

.textField
.textField:focus
.textField-warning
.textField-invalid
.TextFieldFilter
.TextFieldFilterError
.textarea-resize
.textarea-resize

Sizes

.screen-width
.screen-height
.parent-width
.parent-height
.parent-size
.width-auto
.width-80
.width-90

Shadow

.shadow-s
.shadow-m
.shadow-l
.shadow-red-m

Padding

 // Padding - r
.p-r
.p-h-r
.p-v-r
.pl-r
.pr-r
.pt-r
.pb-r

 // Padding - xs
.p-xs
.p-h-xs
.p-v-xs
.pl-xs
.pr-xs
.pt-xs
.pb-xs

 // Padding - s
.p-s
.p-h-s
.p-v-s
.pl-s
.pr-s
.pt-s
.pb-s

 // Padding - m
.p-m
.p-h-m
.p-v-m
.pl-m
.pr-m
.pt-m
.pb-m

 // Padding - l
.p-l
.p-h-l
.p-v-l
.pl-l
.pr-l
.pt-l
.pb-l

 // Padding - xl
.p-xl
.p-h-xl
.p-v-xl
.pl-xl
.pr-xl
.pt-xl
.pb-xl

 // Padding - xxl
.p-xxl
.p-h-xxl
.p-v-xxl
.pl-xxl
.pr-xxl
.pt-xxl
.pb-xxl

Margin

 // Margin - r
.m-r
.m-h-r
.m-v-r
.ml-r
.mr-r
.mt-r
.mb-r

 // Margin - xs
.m-xs
.m-h-xs
.m-v-xs
.ml-xs
.mr-xs
.mt-xs
.mb-xs

 // Margin - s
.m-s
.m-h-s
.m-v-s
.ml-s
.mr-s
.mt-s
.mb-s

 // Margin - m
.m-m
.m-h-m
.m-v-m
.ml-m
.mr-m
.mt-m
.mb-m

 //Margin - l
.m-l
.m-h-l
.m-v-l
.ml-l
.mr-l
.mt-l
.mb-l

 // Margin - xl
.m-xl
.m-h-xl
.m-v-xl
.ml-xl
.mr-xl
.mt-xl
.mb-xl

 // Margin - xxl
.m-xxl
.m-h-xxl
.m-v-xxl
.ml-xxl
.mr-xxl
.mt-xxl
.mb-xxl