deskera-ui-library v0.1.376

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