Arms_v2.8_webui NPM

Overview

arms_v2.8_webui is a package which allows the User to use the custom controls by importing it into the Application. for example, we can import the various reusable controls like Input, Label, Combobox etc just importing the following in the web application.

Pre-requisites

NodeJS to be installed in the system.

How to install the package?

In the root folder of the application, execute 'npm install arms_v2.8_webui' command to install the Node package.

```bash
npm install arms_v2.8_webui

Usage

AgGrid

Control Details:

The AgGrid also supports custom column headers and adding custom controls.for example, if we need to add a custom DropDown control, we can give

Set the default Column Definition.

const defaultColDef = {
  flex: 1,
  cellStyle: (params) => ({
    display: "flex",
    alignItems: "center",
  }),
};

Define array object for Column Group, Column Definition and sample object.

const columnGroup = [];
const columnDefs = [];
const sampleOb = {};

Return row from the AgGrid component.

Now, the column group headers are also customizable. In the column definitions below, if we need to show checkbox for selecting all rows and checkbox for selecting a single row, we can assign 'rowHeader: true 'for which ever column we want to show the checkbox and also provide custom widths for each column headers.

import { AgGrid } from "arms_v2.8_webui";

This grid also supports column filters and column grouping . In the example shown below, we are grouping 'Make' and 'Model' columns under 'Car Info' group, 'Price' ,'Years' and 'Colors' under 'Other Info' group. We can provide date or text or number filters for the column which should have a filter.

Props:

Prop Type Default Description

setAlwaysShowVerticalScroll={true} Boolean true Set the setAlwaysShowVerticalScroll to true into the AgGrid as deafult. onRowDoubleClicked={props.onRowDoubleClicked} Function N/A Function called after the row has been completely loaded of the AgGrid to use as props. suppressRowClickSelection={true} Boolean true Set the suppressRowClickSelection to true into the AgGrid as deafult. frameworkComponents={props.frameworkComponents} Components N/A Components of framework Components passed as props. defaultColDef={defaultColDef} Object N/A defaultColDef of the AgGrid to use. rowData={props.rowData} List N/A List of row data passed as props. onGridReady={onGridReady} Function N/A Function called after the row has been completely loaded. rowSelection={rowSelection} Function N/A Function called after the row has been completely loaded. rowClassRules={rowClassRules} Function N/A Function called after the row has been completely loaded. disableEditrowIndex={"5"} Integer No of Row Count Set the disableEditrowIndex to total row count into the AgGrid as deafult. headerHeight={props.colHeight} Function N/A Function called after the row has been completely loaded. rowHeight={24} Integer 24 Set the rowHeight to 25 into the AgGrid as deafult. columnDefs={columnDefs} Object N/A columnDefs of the AgGrid to use. filter={true} Boolean true Set the filter to true into the AgGrid as deafult. gridOptions={gridOptions} Object N/A gridOptions of the AgGrid to use. pagination={true} To add enable pagination in AgGrid paginationPageSize={100} to add page Size in Aggrid onRowClicked Signle Rowclick {...props} Object N/A Object of the AgGrid to use as props.

const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxter", price: 72000 },
];

const columnDefs = [
  { headerName: "Make", field: "make", group: "company" },
  { headerName: "Model", field: "model", group: "details" },
  { headerName: "Price", field: "price", group: "details" },
  { headerName: "Years", field: "year", group: "details" },
  { headerName: "Colors", field: "color", group: "details" },
];
// without column headers
const rowData = [
  { make: "Toyota", model: "Celica", price: 35000 },
  { make: "Ford", model: "Mondeo", price: 32000 },
  { make: "Porsche", model: "Boxter", price: 72000 },
];

const columnDefs = [
  { headerName: "Make", field: "make" },
  { headerName: "Model", field: "model" },
  { headerName: "Price", field: "price" },
];

const columns = [
    { headerName: "PAXType", field: "PAXType", width: 160 },
    {
      headerName: "Male",
      field: "Male",
      width: 65,
      filter:true    // To add filter to cloum
      editable: true, // To edit cell of cloum
      sortable: true,  // To sort colum
      unSortIcon: true,  // To visible sort Icon
      cellStyle: {
        height: "100%",
        display: "flex ",
        "justify-content": "center",
        "align-items": "center ",
        "font-size": "12px",
      },
    },
  }];

We can provide custom styling for this control as

let Style = {
  width: "100%",
  height: "165px",
};
<AgGrid columnDefs={columnDefs} rowData={rowData} style={Style} />;
//The control automatically generates the column headers.In this example(make,model,price) and places the data under it-with/without header data.
<AGrid
  columnData={columns}
  rowData={PaxDetailsSpread}
  disableEditrowIndex={"5"}
/>;
//The control automatically generates the columnData along with headers and rowData.In this example(headerName: "Male",editable: true and cellStyle,sortable: true,unSortIcon: true,) and places the data under it-with/without editable. sortable and unSortIcon to true to the row data based on the header name.
<AgGrid
//The control set the filter true ad default and set gridOptions icons menu as above styling object of menu, asc and desc.
/>;

Button

Button have pre-defined styling, i,e, height, width, color scheme Button comes with pre-defined size as width "70px" and height as "22px" When no props are passed while defining component by default Button selected as theme as midblue, screen as normal, state as normal/active, shade as primary The Button provides support for external css by sending props as className=""

Customization for default Button- 1. bgColor: "#4F81BD" - this prop is used to change color of button, 2. color: "white" - this prop is used to change color of text of button, 3. textTransform: "none", 4. outline: "none", 5. fontSize: "11px" - this prop is used to change fontSize of button, 6. boxShadow: "none", 7. border: '1px solid #FFFFFF', 8. lineHeight: 'normal', 9. hoverBgColor: "#4F81BD", 10. rootMinWidth: "10px", 11. borderRadius: '0px', 12. fontFamily: "Segoe UI" - this prop is used to change fontFamily of button,

Sample declarations as follow- theme - We have 2 theme as per xd file "midblue" and "darkblue"

screen - We have 2 screen as per xd file "normal" and "mandatory"

state - We have 3 state as per xd file "normal"/"active", "inactive"/"disabled", "readonly"

shade - We have 3 shade as per xd file "primary","seconday","alternate"

Button text can also be set by sending props as
1. For Primary shade - Theme : "midblue" Screen : "normal"

OK
OK OK OK OK

Theme : "darkblue" Screen : "normal"

OK OK OK OK OK

Theme : "midblue" Screen : "mandatory"

OK OK OK OK OK

Theme : "darkblue" Screen : "mandatory"

OK OK OK OK OK

For secondary shade -

Theme : "midblue" Screen : "normal"

OK OK OK OK OK

Theme : "darkblue" Screen : "normal"

OK OK OK OK OK

Theme : "midblue" Screen : "mandatory"

OK OK OK OK OK

Theme : "darkblue" Screen : "mandatory"

OK OK OK OK OK

For alternate shade -

Theme : "midblue" Screen : "normal"

OK OK OK OK OK

Theme : "darkblue" Screen : "normal"

OK OK OK OK OK

Theme : "midblue" Screen : "mandatory"

OK OK OK OK OK

Theme : "darkblue" Screen : "mandatory"

OK OK OK OK OK

This component is fully customizable via CSS properties. The following props will help to customise this component.

width : width : width of the component. Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 150px or 50em b. percentage - Percentage value e.g. 100% c. auto - Browser will calculate the width for the element e.g. auto d. inherit - Component will inherit the width from its parent element e.g. inherit
1. height : height : height of the component. Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 50px or 30em b. percentage - Percentage value e.g. 100% c. auto - Browser will calculate the width for the element e.g. auto d. inherit - Component will inherit the width from its parent element e.g. inherit
2. padding : padding : defines the padding space on all sides of an element : This property helps to give height to the track. Values for this property can be expressed with one, two, three or four values i. padding: all; ii. padding: top_bottom left_right; iii. padding: top right_left bottom; iv. padding: top right bottom left; Valid values as follows: a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3% c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px d. inherit - Component will inherit the padding from its parent element e.g. inherit
3. margin : margin : defines the margin on all sides of an element. Values for this property can be expressed with one, two, three or four values, it is preferable to use one value. i. margin: all; ii. margin: top_bottom left_right; iii. margin: top right_left bottom; iv. margin: top right bottom left; Valid values as follows: a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3% c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px d. inherit - Component will inherit the padding from its parent element e.g. inherit

Calender

import { Calender } from "arms_v2.8_webui";

Props:

Prop Type Default Description

name = {props.name} String Name of the Calender to use. type="date" String date onChange = {props.onChange} Function Function called after the Calender has been completely loaded. value = {props.value} String Value of the Calender to use.

<Calender label="Date Range" />

There is a default styling provided to the control which is outline:'none', width: "125px", marginLeft:'10px', marginRight:'10px', marginTop:'2px', height:'22px', backgroundColor: "rgb(255, 255, 255)", color: "black",

CheckBox

As per the new definition, we have a theme, screen, and state. we have 2 themes i.e. midblue and darkblue. By default midblue. we have 2 screens i.e. normal and mandatory. By default normal. we have 3 states i.e. normal/active, disabled/inactive, and readonly. By default normal/active.

All styling is pre-defined as per the new definition.

Properties: 1. label: Gives label to your checkbox. 2. option or options: accept an array of JS objects to render the radio button. 3. labelKey: allows selecting label key from JS object which needs to bind a label to each checkbox from buttons or options. By default - label. 4. valueKey: allows selecting value key from JS object which needs to bind a value to each checkbox from buttons or options. By default - value. 5. checked: allows assign value to check from any state or variable. 6. onChange: accepts event handling function. 7. className: override or extend the styles applied to the component

CheckBox can be created from Array of JS objects which can be retrieve from database or use as an individual component. Sample declarations are as follow- const checkState, setCheckState = React.useState('c');

const checkOptions = {"SOMELABEL": "SNICKERS", "SOMEID": false }, {"SOMELABEL": "MARS", "SOMEID": true }, {"SOMELABEL": "BOUNTY", "SOMEID": false }; const checkStateObj, setCheckStateObj = React.useState(checkOptions); const handleCheckBoxObjects = (e) => { let actionObj = checkStateObj.map(d => d); actionObj.map(d => { if(d.SOMELABEL === e.target.name){ d.SOMEID = e.target.checked; } return d; }) setCheckStateObj(...actionObj); }; This is a array of JS objects.

CheckBox defination without any considaration will provide theme=midblue, screen=normal and state=active.

Theme: midblue Screen: normal 1. Normal/Active(Default)- <CheckBox theme="midblue" screen="normal" normal label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="midblue" screen="normal" active label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Disabled- <CheckBox theme="midblue" screen="normal" inactive label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="midblue" screen="normal" disabled label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />
Readonly- <CheckBox theme="midblue" screen="normal" readonly label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Screen: mandatory 1. Normal/Active(Default)- <CheckBox theme="midblue" screen="mandatory" normal label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="midblue" screen="mandatory" active label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Disabled- <CheckBox theme="midblue" screen="mandatory" inactive label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="midblue" screen="mandatory" disabled label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />
Readonly- <CheckBox theme="midblue" screen="mandatory" readonly label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Theme: darkblue Screen: normal 1. Normal/Active(Default)- <CheckBox theme="darkblue" screen="normal" normal label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="darkblue" screen="normal" active label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Disabled- <CheckBox theme="darkblue" screen="normal" inactive label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="darkblue" screen="normal" disabled label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />
Readonly- <CheckBox theme="darkblue" screen="normal" readonly label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Screen: mandatory 1. Normal/Active(Default)- <CheckBox theme="darkblue" screen="mandatory" normal label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="darkblue" screen="mandatory" active label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Disabled- <CheckBox theme="darkblue" screen="mandatory" inactive label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} /> or <CheckBox theme="darkblue" screen="mandatory" disabled label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />
Readonly- <CheckBox theme="darkblue" screen="mandatory" readonly label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Customization: The component can be customized by external CSS by providing className <CheckBox className={"orange-lemon"} label="Subscription" checked={checkState === "b" ? false : true} onChange={(e) => setCheckState(e.target.checked ? "c" : "b")} />

Customization can be done by changing CSS properties value passed through props. Following are the props accepted by the components. rootpadding, rootmargin, rootborder, rootcolor, width, height, svgcolor, border, bgColor, labelfontsize, labelColor, typofontSize, spacing, marginLeft, marginRight

Close Button

import { CloseButton } from "arms_v2.8_webui";

Props:

Prop Type Default Description

style={props.style} Object Style object of the CloseButton to use. onClick = {props.onClick} Function Function called after the CloseButton has been completely loaded.

In the render method, call the component as

let closeButtonStyle = {
  color: 'white',
  width:'13px',
  height:'13px',
  marginTop:'8px',
  cursor: 'pointer'
}

<CloseButton style={closeButtonStyle} /> // closeButtonStyle is the style we are giving to the component.
<CloseButton style={closeButtonStyle} onClick={onClickHandler}/> // onClickHandler is the click event handler.

ComboBox

As per new defination we have theme, screen, state. we have 2 themes i.e. midblue and darkblue. By default midblue. we have 2 screens i.e. normal and mandatory. By default normal. we have 3 states i.e. normal/active, disabled/inactive and readonly. By default normal/active.

All styling are pre-defined as per new defination.

Properties: 1. placeholder: helps to show helper text when no options is selected. 2. options: accepts array of JS object to render options in combo box. 3. labelKey: allows to select label key from JS object which needs to bind label of options. 4. valueKey: allows to select value key from JS object which needs to bind value of options. 5. value: allows to pre select the options and can be change the value when needed with help of onChange or with some other logic. 6. onChange: accepts event handling function. 7. className: override or extend the styles applied to the component 8. multiselect: allows select multiple options. a. checkmarks: allows checkbox brfore each options. Works together with multiselect. b. multiLabel: allows to show multiple data columns in the options. i. multiLabelKeys: accepts array of strings which are keys which refer to options(pt. 2) object to fill the option list. e.g. multilabelKeys={"GameTitle", "Rating", "Like", "DisLike"} ii. multiLabelGridRatio: provides ratio to the grid where data is displayed by default is equal space for all columns. e.g. multiLabelGridRatio="70% 10% 10% 10%" for 4 column data

Sample declarations as follow- const cdata = { value: "oliver hansen", listname: "OLIVER HANSEN", displayValue: "Oliver Hansen", status: "offline" }, { value: "van henry", listname: "VAN HENRY", displayValue: "Van Henry", status: "online" }, { value: "april tucker", listname: "APRIL TUCKER", displayValue: "April Tucker", status: "offline" }, { value: "ralph hubbard", listname: "RALPH HUBBARD", displayValue: "Ralph Hubbard", status: "online" }, { value: "carlos abbott", listname: "CARLOS ABBOTT", displayValue: "Carlos Abbott", status: "offline" }, ;

const name, setName = React.useState([]);

const handleChange1 = (event) => { const { target: { value }, } = event; const key = "value"; const lastValue = value.pop(); if (value.length > 0) { const objRemove = value.find(i => ikey === lastValue); if (!objRemove) { const obj = cdata.find(i => ikey === lastValue); obj && value.push(obj); setName(...value); } else { setName([...value.filter(i => ikey !== lastValue)]); } } else { value.push(cdata.find(i => ikey === lastValue)); setName(...value) } };

This is a array of JS objects.

Radio button defination without any considaration will provide theme=midblue, screen=normal and state=active. <ComboBox multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Theme: midblue Screen: normal 1. Normal/Active(Dafault)- <ComboBox theme="midblue" screen="normal" active multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="midblue" screen="normal" normal multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Disabled- <ComboBox theme="midblue" screen="normal" inactive multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="midblue" screen="normal" disabled multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />
Readonly- <ComboBox theme="midblue" screen="normal" readonly multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Screen: mandatory 1. Normal/Active(Dafault)- <ComboBox theme="midblue" screen="mandatory" active multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="midblue" screen="mandatory" normal multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Disabled- <ComboBox theme="midblue" screen="mandatory" inactive multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="midblue" screen="mandatory" disabled multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />
Readonly- <ComboBox theme="midblue" screen="mandatory" readonly multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Theme: darkblue Screen: normal 1. Normal/Active(Dafault)- <ComboBox theme="darkblue" screen="normal" active multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="darkblue" screen="normal" normal multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Disabled- <ComboBox theme="darkblue" screen="normal" inactive multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="darkblue" screen="normal" disabled multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />
Readonly- <ComboBox theme="darkblue" screen="normal" readonly multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Screen: mandatory 1. Normal/Active(Dafault)- <ComboBox theme="darkblue" screen="mandatory" active multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="darkblue" screen="mandatory" normal multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Disabled- <ComboBox theme="darkblue" screen="mandatory" inactive multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" /> or <ComboBox theme="darkblue" screen="mandatory" disabled multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />
Readonly- <ComboBox theme="darkblue" screen="mandatory" readonly multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Customization: Component can be customized by external CSS by providing className <ComboBox className="orange-lemon" multiselect checkmarks options={cdata} value={name} onChange={(e) => handleChange1(e)} placeholder="select one" />

Sample Declaration for Multi Column <ComboBox multiselect multiLabel checkmarks options={} value={} labelKey="" valueKey="" onChange={} textAlign="left" width="250px" mandatory placeholder="select one" multiLabelKeys={"GameTitle", "Rating", "Like", "DisLike"} multiLabelGridRatio="70% 10% 10% 10%" />

Input(TextBox/TextField)

Input is a component used to get the input values from the user. It can be text, number , password etc. If no props type is passed by default type it is text. The input can be completley customisable as per xd file

Styling for default input field
1. outline: "none",
2. border: "none",
3. bgcolor: "white",
4. borderRadius: '0px',
5. marginTop: "0.3px",
6. marginBottom: "0px",
7. width: "100%",
8. padding: "0px 5px",
9. ibrHeight: "22px",
10. ibrColor: "black",
11. inputPadding: "0px 0px 0px 5px",
12. inputTop: "1px",
13. disableBorder: "none",
14. disableOutline: "none",
15. disableBgColor: "lightDark",
16. svgbgcolor: 'none',

Properties of input component - ibrHeight - this can be given in pixels to change the height of input component width - this can be given in pixels to change the width of input component padding - this can be given in pixels to change the padding of input component fontSize - this can be given in pixels to change the fontsize of input component fontFamily - this can be given in pixels to change the fontfamily of input component textColor - this can be given in pixels to change the textcolor of input component ibrbgColor - this can be given in pixels to change the background color of input component placeholder - this can be given as props to give placeholder need to give as string placeholder="Enter text"
required - this prop is used to make input component field needs to be fill to submit form value - this prop is used to give prevalue to the input type text component which can not be changed defaultValue - this prop is used to give defaultvalue to input type text

Disabled- helps you to disable the component - in this state you can not operate the Input component
Readonly- helps you to make Input component read only mode.
Normal/Active(Dafault)- helps you to make Input component active mode.

Sample declarations as follow- Theme is Midblue/Darkblue

Default theme is "Midblue" and state is "active" Declaration -
Type props declaration : (default value)

Sample declartion for input component is as below -

theme - We have 2 theme as per xd file "midblue" and "darkblue"

screen - We have 2 screen as per xd file "normal" and "mandatory"

state - We have 3 state as per xd file "normal"/"active", "inactive"/"disabled", "readonly" "normal"/"active" - Helps you to make component active mode. "inactive"/"disabled" - Helps you to make component disbled mode here you can not change the value of input component. "readonly" - Helps you to make component readonly mode here you can not change the value of input component.

Theme="midblue" Screen="normal"

Theme="midblue" Screen="mandatory"

Theme="darkblue" Screen="normal"

Theme="darkblue" Screen="mandatory"

Declaration to get value as default and store for input type as number:
const value , setValue = useState(''); const handleChange = (e,data) =>{ if(data === 0 || data) setValue(data) else setValue(e.target.value) }

For giving max limit of chracters to input type "text": inputProps={{ maxLength: 6 }}
example of declaration is to set max limit of characters is - <Input normal inputProps={{ maxLength: 6 }} theme="midblue" screen="normal"/>
For giving minimum and maximum range for input type as "number": Declaration for setting max and min range : const min = 0; const max = 10; const value,setValue = useState('') const handleChange=(e,data)=> { if (data > max) data = max; if (data < min) data = min; if(data===0 || data) setValue(data) else setValue(e.target.value) }
```
  <Input type="number" value={value} onChange={handleChange}/>
```

##                                                   Label
-----------------------------------------------------------------------------------------------------
As per the new definition, we have a theme, screen, and state.
we have 2 themes i.e. midblue and darkblue. By default midblue.
we have 2 screens i.e. normal and mandatory. By default normal.
we have 3 states i.e. normal/active, disabled/inactive, and readonly. By default normal/active.

All styling is pre-defined as per the new definition.

Properties:
1. text: display text as a Label Component.
2. className: override or extend the styles applied to the component.
3. myForName: attribute specifies which form element a label is bound to.

Sample declarations are as follow-

Label defination without any consideration will provide theme=midblue, screen=normal and state=active.
<Label text="Blah Blah Blah" />


Theme: midblue
Screen: normal
1. Normal/Active(Default)-
<Label theme="midblue" screen="normal" active text="Blah Blah Blah"/>
or
<Label theme="midblue" screen="normal" normal text="Blah Blah Blah"/>

2. Disabled-
<Label theme="midblue" screen="normal" inactive text="Blah Blah Blah"/>
or
<Label theme="midblue" screen="normal" disabled text="Blah Blah Blah"/>

3. Readonly-
<Label theme="midblue" screen="normal" readonly text="Blah Blah Blah"/>

Screen: mandatory
1. Normal/Active(Default)-
<Label theme="midblue" screen="mandatory" active text="Blah Blah Blah"/>
or
<Label theme="midblue" screen="mandatory" normal text="Blah Blah Blah"/>

2. Disabled-
<Label theme="midblue" screen="mandatory" inactive text="Blah Blah Blah"/>
or
<Label theme="midblue" screen="mandatory" disabled text="Blah Blah Blah"/>

3. Readonly-
<Label theme="midblue" screen="mandatory" readonly text="Blah Blah Blah"/>


Theme: darkblue
Screen: normal
1. Normal/Active(Default)-
<Label theme="darkblue" screen="normal" active text="Blah Blah Blah"/>
or
<Label theme="darkblue" screen="normal" normal text="Blah Blah Blah"/>

2. Disabled-
<Label theme="darkblue" screen="normal" inactive text="Blah Blah Blah"/>
or
<Label theme="darkblue" screen="normal" disabled text="Blah Blah Blah"/>

3. Readonly-
<Label theme="darkblue" screen="normal" readonly text="Blah Blah Blah"/>

Screen: mandatory
1. Normal/Active(Default)-
<Label theme="darkblue" screen="mandatory" active text="Blah Blah Blah"/>
or
<Label theme="darkblue" screen="mandatory" normal text="Blah Blah Blah"/>

2. Disabled-
<Label theme="darkblue" screen="mandatory" inactive text="Blah Blah Blah"/>
or
<Label theme="darkblue" screen="mandatory" disabled text="Blah Blah Blah"/>

3. Readonly-
<Label theme="darkblue" screen="mandatory" readonly text="Blah Blah Blah"/>


## LineChart

```javascript
import { LineChart } from "arms_v2.8_webui";

The default styling given for this component is marginTop:'5px', marginLeft: '5px', fontSize: '11px', color: '#0f243e',

Return the actual Typography as Label input.

<LineChart
  title={"WEIGHT Vs INDEX Vs CG GRAPH"}
  slantlines={this.slantlines}
  xDashAxisValues={updatedArr}
  xDashAxisRange={[newArr[0], newArr[newArr.length - 4]]}
  xAxis={{
    min: this.xAxisMin[0],
    max: this.xAxisMax[0],
    gap: this.xAxisGap[0],
  }}
  yAxis={{
    min: this.yAxisMin[0],
    max: this.yAxisMax[0],
    gap: this.yAxisGap[0],
  }}
  mainLine={this.mainLine}
/>

Props:

Prop Type Default Description

style={props.style} Object Style object of the Label to use.
title={"WEIGHT Vs INDEX Vs CG GRAPH"} String "WEIGHT Vs INDEX Vs CG GRAPH" title of the LineChart to use as default.
slantlines = {this.slantlines}
xDashAxisValues = {updatedArr}
xDashAxisRange = {[newArr[0], newArr[newArr.length - 4]]}
xAxis = {{
    min: this.xAxisMin[0],
    max: this.xAxisMax[0],
    gap: this.xAxisGap[0],
  }}
yAxis ={" "}
{{ min: this.yAxisMin[0], max: this.yAxisMax[0], gap: this.yAxisGap[0] }}
mainLine = {this.mainLine}
fontVariant = props.variant String body2 Variant name of the Label to use.

We can also provide custom styling from where the control is called...

let labelStyle = {
  margin: "5px 150px 10px 10px",
  color: "white",
  fontSize: "12px",
};

In the render method, call the component as We can also provide text value, variant type and css style as props to the control. for example

<LineChart3 style={labelStyle} title={"WEIGHT Vs INDEX Vs CG GRAPH"} /> // renders the LineChart control with labelStyle is the style, title value as 'WEIGHT Vs INDEX Vs CG GRAPH'.

TabGroup(Tab Control)

import { TabGroup } from "arms_v2.8_webui";

Check for passing props style are passed or not, if not passed set the default css style as below.

let cssStyles = props.style ? props.style : "";

The default styling given for this component is background: "#B8CCE4", color: "#0F243E", minHeight: "36px !important", "&:hover": { // background: "#0F243E !important", // color: "#fff !important", }, "&:focus": { outline: "none", borderRadius: "0", }, "&.MuiButtonBase-root": { background: "#B8CCE4", color: "#0F243E", marginRight: "2px", minHeight: "36px !important", padding: "0 0 0 10px", }, "&.Mui-selected": { background: "#0F243E", color: "#fff !important", }, minHeight: "36px !important", }, defaultTab: { background: "#B8CCE4", color: "#0F243E", minHeight: "36px !important", "&:hover": { background: "#0F243E !important", color: "#fff !important", }, "&:focus": { outline: "none", borderRadius: "0", }, "&.MuiButtonBase-root": { background: "#B8CCE4", color: "#0F243E", marginRight: "2px", minHeight: "36px !important", padding: "0 10px", }, "&.Mui-selected": { background: "#0F243E", color: "#fff !important", }, "& .MuiTabPanel-root": { padding: 0, }, },

Props:

Prop Type Default Description

style={props.style} Object N/A Style object of the TabGroup to use. defaultLabels={defaultLabels} List N/A Key Value pair like {label:"DashBoard", value:0} of the TabGroup option to use. dataList={dataList} List N/A List map of the TabGroup option to use. customContent={customContent} List N/A List map of the TabGroup option to use. defaultContent={defaultContent} List N/A List map of the TabGroup option to use. isDashboard="true" String true Set the isDashboard value to "true" of the TabGroup as deafult.. OnCloseClick={(i) => closeTab(i)} Function N/A Function called after the TabGroup has been completely loaded.

let Style = {
  width: "100px",
  height: "30px",
};
let customContent = (
  <TrimSheet
    seatData={seatData}
    paxData={paxData}
    linkedFlight={linkedFlight}
    userDetails={user}
  />
);
const defaultLabels = [
  { label: "DashBoard", value: 0, isStikcy: "sticky", left: "0" },
];

const defaultContent = [{ value: 0, content: defaultContent1 }];

In the render method, call the component as

<TabGroup
    defaultLabels={defaultLabels}
    dataList={dataList}
    customContent={customContent}
    defaultContent={defaultContent}
    isDashboard="true"
    OnCloseClick={(i) => closeTab(i)}
    style={{ marginTop: "180" }}
  />
<TabGroup /> // renders the plain TabGroup control.
<TabGroup style={Style} />// renders the TabGroup control with Style.
<TabGroup defaultLabels='Tab Name' /> // renders the TabGroup with the defaultLabels as 'Tab Name'
<TabGroup dataList={dataList} OnCloseClick={closeTab} /> // renders a TabGroup with the event handler for the Click event.
<TabGroup disabled />// renders the TabGroup control with disabled as props to the control.
<TabGroup customContent={customContent} defaultContent={defaultContent} />
{/* renders the TabGroup control with defaultContent as 'defaultContent' and customContent  as 'customContent'*/}
<TabGroup
  defaultLabels={defaultLabels}
  customContent={customContent}
  defaultContent={defaultContent}
 />
{/* renders the TabGroup control with defaultLabels as 'DashBoard',isStikcy: "sticky", left: "0" to display the static tab into the TabGroup default label as default.*/}

TextArea

TextArea have pre-defined styling, i,e, height, width, color scheme, fill TextArea comes with pre-defined size i.e., medium, small When no props are passed while defining component by default CheckBox selected as "Active"

Customization for default CheckBox- 1.outline: "none", 2.bgcolor: "white", 3.border: "0px solid", 4.padding: "20px", 5.textareawidth: "182px", 6.resize: "both", 7.overflow: "auto", 8.textfontSize: "11px", 9.textbgcolor: "white", 10.textareaheight: "78px", 11.textfontFamily: "SegoeUI", 12.textcolor: "black", 13.textareaRadius: "0px",

In order to increase size of checkbox through props-
1.textfontSize 2.textfontFamily 3.textbgcolor 4.textcolor 5.textareaRadius 6.textareawidth 7.textareaheight 8.defaultValue 9.boxheight 10.placeholder 11.textfontWeight

Sample declarations as follow- 1.
2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12.

This component is fully customizable via CSS properties. The following props will help to customise this component.

width : width : width of the component. Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 150px or 50em b. percentage - Percentage value e.g. 100% c. auto - Browser will calculate the width for the element e.g. auto d. inherit - Component will inherit the width from its parent element e.g. inherit
1. height : height : height of the component. Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 50px or 30em b. percentage - Percentage value e.g. 100% c. auto - Browser will calculate the width for the element e.g. auto d. inherit - Component will inherit the width from its parent element e.g. inherit
2. padding : padding : defines the padding space on all sides of an element : This property helps to give height to the track. Values for this property can be expressed with one, two, three or four values i. padding: all; ii. padding: top_bottom left_right; iii. padding: top right_left bottom; iv. padding: top right bottom left; Valid values as follows: a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3% c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px d. inherit - Component will inherit the padding from its parent element e.g. inherit
3. margin : margin : defines the margin on all sides of an element. Values for this property can be expressed with one, two, three or four values, it is preferable to use one value. i. margin: all; ii. margin: top_bottom left_right; iii. margin: top right_left bottom; iv. margin: top right bottom left; Valid values as follows: a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3% c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px d. inherit - Component will inherit the padding from its parent element e.g. inherit
4. spacing : gap : defines space between checkobx and label Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 150px or 50em

Disabled- helps you to disable the component - in this state you can not operate the textarea
Readonly- helps you to make component read only mode.
Normal/Active(Dafault)- helps you to make component active mode.

Switch

Switch have pre-defined styling, i,e, height, width, color scheme, fill Switch comes with pre-defined size i.e., medium, small When no props are passed while defining component by default Button selected as "Active"

Customization for default Button- 1.thumbHeight: "9px", 2.thumbWidth: "9px", 3.height: "12px", 4.width: "22px", 5.padding: "0px", 6.margin: "0px", 7.startTransition: "translate(0.5px,0.5px)", 8.endTransition: "translate(10.5px,0.5px)", 9.trackOff: "#FFFFFF", 10.trackOn: "#E5EDF8", 11.thumbOn: "#366092", 12.thumbOff: "#366092", 13.border: "1px solid #95B3D7", 14.thumbBorder: "1px solid #366092", 15.pointerEvents: "auto", 16.rippleColor:"none"

Properties of switch - 1.checked - to check the switch component 2.defaultChecked - to by default check the switch component

To get checked state of element - const checked, setChecked = React.useState(true);

const handleChange = (event) => { setChecked(event.target.checked); };

theme : We have 2 theme as per xd file "midblue" and "darkblue"
screen : We have 2 screen as per xd file "normal" and "mandatory"
state : We have 3 state as per xd file "normal"/"active", "inactive"/"disabled", "readonly" "normal"/"active" - Helps you to make component active mode. "inactive"/"disabled" - Helps you to make component disbled mode here you can not change the value of input component. "readonly" - Helps you to make component readonly mode here you can not change the value of input component.

Sample declarations as follow -

Theme - "Midblue" Screen - "Normal"

  <Switch normal theme="midblue" screen="normal"  />
  <Switch active theme="midblue" screen="normal" />
  <Switch inactive theme="midblue" screen="normal" />
  <Switch disabled theme="midblue" screen="normal" />
  <Switch readonly theme="midblue" screen="normal" />

Theme - "Midblue" Screen - "Mandatory"

  <Switch normal theme="midblue" screen="mandatory" />
  <Switch active theme="midblue" screen="mandatory" />
  <Switch inactive theme="midblue" screen="mandatory" />
  <Switch disabled theme="midblue" screen="mandatory" />
  <Switch readonly theme="midblue" screen="mandatory" />

Theme - "Darkblue" Screen - "Normal"

  <Switch normal theme="darkblue" screen="normal" />
  <Switch active theme="darkblue" screen="normal" />
  <Switch inactive theme="darkblue" screen="normal" />
  <Switch disabled theme="darkblue" screen="normal" />
  <Switch readonly theme="darkblue" screen="normal" />

Theme - "Darkblue" Screen - "Mandatory"

  <Switch normal theme="darkblue" screen="mandatory" />
  <Switch active theme="darkblue" screen="mandatory" />
  <Switch inactive theme="darkblue" screen="mandatory" />
  <Switch disabled theme="darkblue" screen="mandatory" />
  <Switch readonly theme="darkblue" screen="mandatory" />

width : width : width of the component. Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 150px or 50em b. percentage - Percentage value e.g. 100% c. auto - Browser will calculate the width for the element e.g. auto d. inherit - Component will inherit the width from its parent element e.g. inherit
1. height : height : height of the component. Valid values as follows: a. fixed - Fixed value expressed in pixels, em's, etc. e.g. 50px or 30em b. percentage - Percentage value e.g. 100% c. auto - Browser will calculate the width for the element e.g. auto d. inherit - Component will inherit the width from its parent element e.g. inherit
2. padding : padding : defines the padding space on all sides of an element : This property helps to give height to the track. Values for this property can be expressed with one, two, three or four values i. padding: all; ii. padding: top_bottom left_right; iii. padding: top right_left bottom; iv. padding: top right bottom left; Valid values as follows: a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3% c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px d. inherit - Component will inherit the padding from its parent element e.g. inherit
3. margin : margin : defines the margin on all sides of an element. Values for this property can be expressed with one, two, three or four values, it is preferable to use one value. i. margin: all; ii. margin: top_bottom left_right; iii. margin: top right_left bottom; iv. margin: top right bottom left; Valid values as follows: a. fixed - Fixed value expressed in px, em, ... e.g. 5px or 4em 5px or 2px 5px 10px or 4px 5px 2px 3px b. percentage - Percentage value e.g. 8% or 4% 5% or 2% 5% 8% or 4% 5% 2% 3% c. fixed and percentage - (in combination) Combination of fixed and percentage values e.g. 4% 5px or 2em 5% 8px or 4px 5em 2% 3px d. inherit - Component will inherit the padding from its parent element e.g. inherit

Slider

import { Slider } from "arms_v2.8_webui";

Check for props style are passed or not, if not passed set the default css style as below.

let cssStyles = props.style ? props.style : "";

The default styling given for this component is color: style && style.color ? style.color : "#181D1F", width: style && style.width ? style.width : "100px", marginLeft: 20,

There is a default styling provided to the slider thumb which is '& .MuiSlider-thumb': { borderRadius: style && style.thumbRadius && style.thumbRadius , },

There is a default styling provided to the slider rail which is "& .MuiSlider-rail": { height: style && style.sliderThickness ? style.sliderThickness : '5px' }, "& .MuiSlider-track": { height: style && style.sliderThickness ? style.sliderThickness : '5px' },

We can also provide custom styling from where the control is called...

let Style = {
  width: "300px",
  color: "green",
  thumbRadius: "2px",
  sliderThickness: "5px",
};

In the render method, call the component as

<Slider value={state} onChange={ClickEventHandler}/> // renders the plain Slider control.
<Slider value={state} onChange={ClickEventHandler} style={Style}/>// renders the Slider control with Style.
<Slider value={state} onChange={ClickEventHandler} min={1} max={10}/> // renders the Slider with min and max values'
<CheckBox value={state} onChange={ClickEventHandler} min={1} max={10} step={1}/> // renders the Slider with min, max and step values.
<CheckBox value={state} onChange={ClickEventHandler} max={10} step={1} style={Style}/> // renders the Slider with min, max, step values and Style.

Listbox

import { Listbox } from "arms_v2.8_webui";

The default styling given for this component is width: props.width ? props.width : '200px', height: props.height ? props.height : '250px', overflow: 'auto', padding: '10px', border: '1px solid black',

## Props:

Prop Type Default Description

---

We can also provide sample data for listbox data as

```javascript
 const Data = [
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    { id: 4, title: 'Item 4' },
    { id: 5, title: 'Item 5' },
  ]
```

In the render method, call the component as

```javascript
 <Listbox data={Data} /> // renders the listBox control with data as props.
 <Listbox data={Data} style={Style} /> // renders the listBox control with Style.
 <Listbox data={Data} onclick={SelectItem} /> // renders a listbox with the data and a event handler for the Click event.
 <Listbox data={Data} onclick={SelectItem} checked={checked} /> // renders listbox control with checked props which have set values and see which item is selected.

```
\*/

AutoComplete

Component comes with 2 types i.e.

Combo Box
Text field (Default if you don’t pass any props value)

And in four state styling 1: - Active (Default if you don’t pass any props value) ( props => active) We get dropdown list and we select single value.
2:- Read ( props => read) We get only text field not dropdown list. 3:- Disable ( props => disable) Dropdown List and text field are disable.
4: - Mandatory ( props => mandatory) We get dropdown list and we select single value.

With props =>

const names = 'Iloerv Hsnene', 'Avn Hrney', 'Rpali Tekcur', ;

<AutoComplete type="active" select="combobox" options={names} />

Without props =>

<AutoComplete />

Props : - type = “ active“ , ”disable” , ”read ”, ” mandatory” , select = “combobox”, ”text" , options = { “ Here we passing list object”}

Dialog

Dialog component have pre-defined styling, i,e, height, width, color scheme. When no props are passed while defining component By default Dialog component will consider type='ERROR'

Give the Button Array which display on Dialog. defaultStyling for Button are as follows: 1. bgColor: rgb(77,73,152), 2. color: white, 3. textTransform: none, 4. outline: none, 5. cursor: pointer, 6. width: 70px, 7. height: 22px, 8. fontSize: 12px, 9. boxShadow: none, 10. padding: 6px 12px, 11. border: 1px solid, 12. lineHeight: 1.5px, 13. borderColor: #0063cc, 14. hoverBgColor: rgb(70, 160, 184), 15. rootMinWidth: 10px, 16. brRadius:0px

sample declaration for button const button={text:'',value:'true'||'false',className:'',bgColor:'red',etc},{text:'',value:'true'||'false',className:'',bgColor:'red',etc},etc

const message=Data saved sucessfully. -we can pass multiple messages.

Component sample declaration : 1. 2. 3. 4. 5. 6.

    -onClose : used for close the dialog box.
    -onConfirm : return the value=true||false when customer is clicking on Respective button.
    -open : after clicking on popup button it display the Dialogbox
    -Type :
              1.Type: SUCCESS-
              the component will give pop up in which there is title which is customizable, get success symbol and confirmation box to click ok or close window
              2. Type: ERROR-
              the component will give pop up in which there is title which is customizable, get error symbol and confirmation box to click ok or close window
              3. Type: CAUTION -
              the component will give pop up in which there is title which is customizable, get caution symbol and confirmation box to click ok or close window
              4. Type: CONFIRMATION -
              the component will give pop up in which there is title which is customizable, get confirmation symbol and confirmation box to click yes and no or the component can be close window
              5. Type: INFORMATION -
              the component will give pop up in which there is title which is customizable, get information symbol and confirmation box to click ok or close window

              6. Type:CUSTOM -
              The custom type is fully customizable where we can add the button, adjust the size of header, add images as per requirement. Also the cross button is completely customizable if it did not need then we can remove it.
              The dialog box can also be added by sending it through props as customToolBar
              In the dialog box we can handle the cross button action on any customized button by creating funcation for it
              The dialog box width of top can be adjusted by titlePadding through props
              The component will give pop up in which there is title which is customizable and if the size of header/title is increase it will handel it, close window once click on close
              eg.  <DialogBox message={message} onClose={onClose} onConfirm={onConfirm} open={open} type="CUSTOM"  title="ARMS® – CRITICAL WARNING " listButtons brRadius="2px" />

    -button : this buttons display on Dialog Box
    -title : Display the Title
    -message : Display the Message on Dialog Box

This component is fully customizable via CSS properties.

Following properties are customizable passed through props. 1. backDropBgColor: rgba(0,0,0,0.4) 2. paperHeight: 180px 3. paperWidth: 400px 4. paperOverflowY: unset 5. paperBgColor: #0F243E 6. paperBorder: 1px solid #A70111 7. titleBgColor : #FFFFFF 8. titleBorder: 5px solid #A70111 9. titleColor : white 10. titleFontFamily: SegoeUI-Bold 11. 1titleFontSize: 11px 12. titleHeight: 31.5px 14. contentDisplay: flex 15. contentJC: center 16. contentAI: center 17. contentPadding: 3px 18. contentMargin: 0px 19. typoWidth: 315.6px 20. typoLS: 0px 21. typoFontFamily: inherit 22. typoFontSize: 11px 23. typoColor: #FFFFFF 24. typoLh: 01 25. actionP: 10px 26. actionJC: center 27. containerH: 100% 28. containerOutline:0 29. titlePadding: 0

Date Picker

The date picker, let the user select a date.

                            Date Picker

Declaration: <DatePicker value={date} onChange={(newDate) => { setDate(newDate); }} /> Parameters: 1. inputFormat - helps to set date format. Default date format: dd-MM-yyyy. 2. popperClassName - Helps to add external class for the calendar dialog. 3. inputClassName - Hel