ADCAT UI Component Library
Author: Indrajeet Ambadekar
Installation:
npm install -S react-ultralite-ui
For a better experience, use fontawesome as well
Available Components:
- Input fields Number field, Text field , date field
- Select Field
- Progress Bar
- Modal
- Toggle Switch
- CheckBox
- Sliding Drawer (Right-to-Left motion)
- Text input with auto suggest
- Accordion (Top-to-Bottom motion)
Please refer the below content to understand the usage of available components in detail:
Input Field
Usage:
import {InputField} from "adcat-ui";
<InputField
type="text"
className="text-field" // your classname
label="User name"
name="username"
value={uname}
placeholder="Enter user name"
onChange={(value) => {
setTestStr(value); //use a set-state or custom callback.
}}
textStyle="uppercase" // optional. `uppercase` returns string in uppercase
iconLeft={<i className="fas fa-user" />}
iconRight={<i className="fas fa-user" />}
/>
Parameters:
Attribute |
Description |
Mandatory |
type |
"text" / "Number" / "email" / "password" / "date" |
YES |
className |
user defined string |
NO |
label |
custom string or '' |
YES |
name |
custom string |
YES |
value |
javascript variable |
YES |
disabled |
boolean true/false |
NO |
onChange |
callback that returns the value of input |
NO |
onFocus |
callback that returns the javascript event on focus |
NO |
onBlur |
callback that returns the javascript event on blur |
NO |
onKeyPress |
callback that returns the javascript event on Key Press |
NO |
onKeyUp |
callback that returns the javascript event on Key Up |
NO |
onKeyDown |
callback that returns the javascript event on Key Down |
NO |
autoFocus |
boolean true/false |
NO |
iconLeft |
provide jsx to display font-awesome icon or image on the left end of input |
NO |
iconRight |
provide jsx to display font-awesome icon or image on the left end of input |
NO |
data-testid |
incase you want to add a test id for jest/enzyme/react-testing-library |
NO |
Select Field
Usage:
import {SelectField} from "adcat-ui";
<SelectField
noDefault={false}
value={maritalStatus}
onChange={(value) => setMaritalStatus(value)}
className="select-field"
label="Marital status"
>
<option value="SINGLE">Single</option>
<option value="MARRIED">Married</option>
<option value="WIDOW">Widow</option>
<option value="DIVORCED">Divorced</option>
</SelectField>
Parameters:
Attribute |
Description |
Mandatory |
noDefault |
Type: Boolean (true/false). Setting this to false adds and empty option with empty value to use as placeholder. setting this to true removes the empty option and user defined options are displayed |
NO (Default false ) |
className |
user defined string |
NO |
label |
custom string or '' |
YES |
onChange |
callback that returns the value of input |
NO |
data-testid |
incase you want to add a test id for jest/enzyme/react-testing-library |
NO |
**Note:
`option` children with value and content are mandatory for this component
TextBox
Usage:
import {TextBox} from "adcat-ui";
<TextBox
className="address-box"
name="address-box"
value={addressOfResidence || ''}
onChange={(value) =>
// dom something with the `value`
}
label="Address of residence"
rows={2}
textAreaStyles={{ resize: 'vertical' }}
labelStyles={{ color: 'red' }}
wrapperStyles={{ backgroundColor: 'red' }}
>
</TextBox>
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
label |
custom string or '' |
YES |
name |
custom string |
YES |
value |
javascript variable |
YES |
disabled |
boolean true/false |
NO |
onChange |
callback that returns the value of input |
NO |
onFocus |
callback that returns the javascript event on focus |
NO |
onBlur |
callback that returns the javascript event on blur |
NO |
onKeyPress |
callback that returns the javascript event on Key Press |
NO |
onKeyUp |
callback that returns the javascript event on Key Up |
NO |
onKeyDown |
callback that returns the javascript event on Key Down |
NO |
rows |
Specifies the visible number of lines in a text area |
NO |
cols |
Specifies the visible width of a text area |
NO |
textAreaStyles |
Text Area Styles (Object) |
NO |
labelStyles |
Label Styles (Object) |
NO |
wrapperStyles |
Wrapper Styles (Object) |
NO |
Progress Bar
Usage:
import {ProgressBar} from "adcat-ui";
<ProgressBar
className="upload-progress"
value={50} // maximum 100. takes value as percentage eg:(40% / 50%)
height={20}
fillLabel={`Floating value that moves with value`}
label={`Fixed value displayed at end of progress bar`}
bgColor="#ececec"
/>
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
label |
Fixed value displayed at end of progress bar |
YES |
fillLabel |
Floating value that moves with value |
YES |
bgColor |
hex color code |
YES |
height |
Height in pixels for the progress bar |
YES |
value |
between 0 and 100 |
YES |
Modal
Usage:
import {UiModal} from "adcat-ui";
<UiModal id="modal-id" isShowing={modalFlag} hide={togglePwdModal}>
// html goes here
</UiModal>
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
id |
unique id for modal indetification |
YES |
isShowing |
Boolean (true/false) |
YES |
hide |
callback function to dismiss the dialog by setting the value of isShowing attribute to false |
YES |
Toggle Switch
Usage:
import {Switch} from "adcat-ui";
<Switch
name={`unique-name`}
onChange={(value) => {
toggleAccount(value);
}}
checked={flag}
></Switch>
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
name |
unique name for switch indetification |
YES |
checked |
Boolean (true/false) |
YES |
disabled |
Boolean (true/false) |
NO |
onChange |
callback that returns the opposite value of input |
YES |
CheckBox
Usage:
import {Checkbox} from "adcat-ui";
<Checkbox
className="item-select"
checked={flag}
onChange={(value) => handleClick(value)}
/>
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
checked |
Boolean (true/false) |
YES |
disabled |
Boolean (true/false) |
NO |
onChange |
callback that returns the opposite value of input |
YES |
Sliding Drawer
Usage:
import {SlideDrawer} from "adcat-ui";
<SlideDrawer
show={flag}
id="info-drawer"
handleClose={dismissDialog}
>
// HTML goes here
</SlideDrawer>
SlideDrawer opens RTL(right-to-left)
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
id |
unique id for drawer indetification |
YES |
show |
Boolean (true/false) |
YES |
handleClose |
callback function to dismiss the drawer by setting the value of show attribute to false |
YES |
Accordion
Usage:
import {Accordian} from "adcat-ui";
<Accordion
title={<div className="accordian-heading">According Heading</div>}
>
// HTML goes here
</Accordion>
Parameters:
Attribute |
Description |
Mandatory |
className |
user defined string |
NO |
title |
string or jsx |
YES |
openIcon |
custom icon(image/svg/fontawesome-icon) to open the accordian |
NO |
collapseIcon |
custom icon(image/svg/fontawesome-icon) to collapse the accordian |
NO |
Text input with auto suggest
Usage:
import {AutoComplete} from "adcat-ui";
<AutoComplete
dataSet={suggestedUsers} //array
onChange={(value) => setSearchParams(value)}
onKeyUp={(event) => {
if (event.keyCode === 13 || event.keyCode === 32) {
_fetchUsers();
}
}}
label="Search users by name/email/username"
onSelect={(item) => _selectUser(item)} // callback to select item
iconLeft={<i className="fas fa-users" />} // optional image/svg/fontawesome-icon
iconRight={ // optional image/svg/fontawesome-icon
<i
className="fas fa-times"
onClick={() => {
setSuggUsers([]);
setSearchParams("");
}}
/>
}
autoFocus={true}
placeholder="John Doe"
value={searchParams}
renderItem={(x) => ( // jsx to display suggestion list
<div className="sugg-user-row">
<div className="grid" md={1}>
<div className="content">
<i className="fas fa-user" />
</div>
</div>
<div className="grid" md={11}>
<div className="content">
<div className="user-name">
{x.firstname} {x.lastname} [email: {x.email}]
</div>
</div>
</div>
</div>
)}
/>