walari v0.1.0

AARURAA COMPONENTS

DATA GRID

Rendering a basic grid

import * as React from 'react';
import { Grid } from 'src/components/grid/base';


<Grid ref={grid => this.gridIns = grid}> </Grid>

Adding DataSource to the grid

Datasource can be collection of javascript objects or instance of a DataManager.

import * as React from 'react';
import { Grid } from 'src/components/grid/base';
import { DataManager } from 'src/common/datamanager/data';


<Grid ref={grid => this.gridIns = grid} dataSource={new DataManager([])}> </Grid>

OR

<Grid ref={grid => this.gridIns = grid} dataSource={new DataManager({url: 'https://walari-api-dev.herokuapp.com/v1/gridData'})}> </Grid>

Adding Column definition to the grid

Columns definition can be array of the Column object.

import * as React from 'react';
import { Grid } from 'src/components/grid/base';
import { DataManager } from 'src/common/datamanager/data';
import { Column } from 'src/components/grid/base/model/column';


<Grid ref={grid => this.gridIns = grid} dataSource={new DataManager([])} columns={[new Column({field: 'a'})]}> </Grid>

Features available in the Grid

• Text Wrapping
• Row/Cell Selection
• Paging
• Sorting
• Filtering
• Grouping
• Editing
• Resizing
• Column Reordering
• Grid Lines
• Stacked Header
• Toolbar
• PDF Exporting
• Aggregation
• Child Grid

Text Wrapping

Text Wrapping feature can be enabled by using the allowTextWrap option in grid.

The default value is false.

import * as React from 'react';
import { Grid } from 'src/components/grid/base';
import { DataManager } from 'src/common/datamanager/data';
import { Column } from 'src/components/grid/base/model/column';


<Grid ref={grid => this.gridIns = grid}
    dataSource={new DataManager([])}
    columns={[new Column({field: 'a'})]}
    allowTextWrap={true}
/>

Row/Cell Selection

Selection feature can be enabled by using the allowSelection option in grid.

The default value is true.

The selecton feature has multiple options, it can be configure using selectionOptions property of the grid.

import * as React from 'react';
import { Grid } from 'src/components/grid/base';
import { DataManager } from 'src/common/datamanager/data';
import { Column } from 'src/components/grid/base/model/column';


<Grid ref={grid => this.gridIns = grid}
    dataSource={new DataManager([])}
    columns={[new Column({field: 'a'})]}
    allowSelection={true}
    selectionOptions={{ mode: 'row', type: 'single' }}
/>

DIALOG

Rendering a basic dialog

import * as React from 'react';
import { Dialog } from 'src/components/popup/dialog';

<Dialog ></Dialog>

Features available in the Dialog

• Headder
• Footer
• Dialog Position
• Sizing

Available Properties

interface IDialog{
className?: string;
dialogWidth?: 'dialog-sm' | 'dialog-md' | 'dialog-lg' | 'dialog-xl' | 'mobile';
header?: any;
footer?: any;
needButtons?: boolean;
type?: string;
overlayClick?: any;
onClose?: any;
success?: any;
height?: string | number;
width?: string;
needScrollClass?: boolean;
successName?: string;
clicked?: boolean;
showSpinner?: boolean;
}

Header :

header?: any;

<Dialog header={() => <p>DIALOG HEADING</p>}> </Dialog>

• Write anything in header properties, that shows in dialog header

Footer :

  <Dialog needButtons={true} successName={'Save'} onClose={} success={}> </Dialog>

needButtons: true;

• This needButtons property must be true If Dialog having footer content

footer?: any;

• This will be the footer content

onClose?: any;

• This triggers Close event

success?: any;

• This will triggers Success event

successName?: string;

• This will be the name of the Success Button (eg: "SAVE")
• Success Name is not given by default OK will be the successor name

clicked?: boolean;

• This is used for show loading when clicking success button , it stops when completely success event finished.

Dialog Position :

type?: string;

<Dialog type={'topDialog'} > </Dialog>

• Type should be one of these ( fullDialog | topDialog | overFlowDialog | default )
• This will be define Dialog Position
• If we not give anything bydefault type will be default (type:default)

Sizing :

dialogWidth?: 'dialog-sm' | 'dialog-md' | 'dialog-lg' | 'dialog-xl' | 'mobile';
height?: string | number;
width?: string;

<Dialog dialogWidth={'dialog-md'} height={200} width={'500'}> </Dialog>

dialogWidth?:'dialog-sm' | 'dialog-md' | 'dialog-lg' | 'dialog-xl' | 'mobile';

• Dialog width property defines the size of the dialog
• it should be any one of these above string

height?: string | number; width?: string;

• Height and width properties also needs to set default height and width
• These are in px (pixels).

LISTVIEW

Rendering a basic ListView

import * as React from 'react';
import { ListView } from 'src/components/listview/listview';
<ListView ></ListView>

Features

• Header
• Content

Available Properties

- lists?: IList[];
- showCheckBox?: boolean;
- enableHover?: boolean;
- dataSource?: object[];
- headerText?: string;
- headerTemplate?: Function;
- listTemplate?: Function;
- fields?: IFields;
- selectionOptions?: { type: 'single' | 'multiple', mode?: 'checkboxOnly' | 'normal' };
- allowSorting?: boolean;
- allowSelection?: boolean;
- allowFiltering?: boolean;
- height?: number | string;
- width?: number | string;
- selectedItems?: number[];
- onSelect?: Function;
- isToggle?: boolean;
- offset?: number;
- isSelect?: boolean;
- className?: string;
- rowDataBound?: Function;
- icon?: any;
- iconOnClick?: Function;

Header :

headerText?: string;

- Write anything in header properties, that shows in dialog header

headerTemplate?: Function;

- Write html element in header properties, that shows in dialog header

Content :

dataSource?: object[];

• This will be the list data

showCheckBox?: boolean;

• This will be true, if check box show in list

enableHover?: boolean;

• If we need hover color change

listTemplate?: Function;

• Print list text with required html element

fields?: IFields;

• key: This will shown in the list text
• value: Value of the selected list

selectionOptions(type, mode);

• type: single - Can only one list
• type: multiple - Can select multiple lists
• mode: checkbox - when select list, checkbox also selected

allowSelection?: boolean;

• If we need selection in list, then must be true

height?: number | string;

• If list will be stand in particular height

width?: number | string;

• If list will be stand in particular width

selectedItems?: number[];

• If we need select some list default, then we give values of the list by array
• selected items are get from this

onSelect?: Function;

• Trigger selection event

isToggle?: boolean;

• Enable toggle click for selection

offset?: number;

• sum of the window innerheight and offset is give to the list view

isSelect?: boolean;

• selected list has this as true

icon?: any;

• show icon in list

iconOnClick?: Function;

• Trigger event during click on icon