/
Component and Component list

Component and Component list

Owned by Murali M
Last updated: May 12, 2020
7 min read

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props), and returns a React element that describes how a section of the UI (User Interface) should appear.

Below the screen, we can see a number of components presented in the single page.

Components are divided into 3 category

  1. Atoms - Small components are called atoms.

2. Molecules - Collection of atoms called molecules.

3. Containers - Whichever component connect with redux we will be called containers.

Note: we will support the user to create own atoms, molecules, and containers, but we should make sure it's not there in Egov framework, if you feel its common more than 2 modules please raise a pull request to the framework.

Below the screenshot, you can see the local components belong to the trade license.

List of Atoms

  1. Phone number

{ "uiFramework":"custom-molecules", "componentPath":"TextfieldWithIcon", "props":{ "label":"Phone", "type":"mobilenumber", "margin":"normal", "fullWidth":true, "autoFocus":true, "required":true, "iconObj":{ "position":"end", "iconName":"phone" } }, "required":true, "jsonPath":"body.mihy.phonenumber", "pattern":"^([0-9]){10}$" }

2. AppBar

{ uiFramework: "custom-atoms", componentPath: "AppBar", props: { position: "static" }, children: { mihyToolbar: { uiFramework: "custom-atoms", componentPath: "Toolbar", props: { variant: "regular", style: { width: "maxContent" }, }, children: { mihyButton: { uiFrameWork: "custom-atoms", componentPath: "Button", props: { }, children: { mihyIcon: { uiFramework: "custom-atoms", componentPath: "Icon", props: { iconName: "menu", autoFocus: true, } } } }, mihyTypography: { uiFramework: "custom-atoms", componentPath: "Typegraphy", children: { mihyLoginButtonText: getLabel({ label: "Home" }) }, props: { variant: "h6", color: "inherit", style: { fontSize: "large", flexGrow: 1 } } }, mihyTypography1: { uiFramework: "custom-atoms", componentPath: "Typegraphy", children: { mihyButton: { uiFrameWork: "custom-atoms", componentPath: "Button", props: { }, children: { mihyIcon: { uiFramework: "custom-atoms", componentPath: "Icon", props: { iconName: "email", autoFocus: true, } } } } }, props: { variant: "h6", color: "inherit" } } } } } }

 

3. Button

{ componentPath: "Button", props: { Buttoncolor: "primary"“ secondary”“ inherit”“ default”, fullWidth: true, href: “https: //www.googole.com”, size: ”small”“ medium”“ large”, Variant: “contained”“ text”“ outlined”, disabled: “true” }, children: { mihyLoginButtonText: getLabel({ label: "Let's go" }) }, onClickDefination: { action: "submit", method: "get", endPoint: "afbc.com", purpose: "authLogin", redirectionUrl: "/" } }

4. Card

getCommonCard({ name: "card name", mihyloginDiv: { uiFramework: "custom-atoms", componentPath: "Div", children: { className: "text-center", Props: { color: "#FFFF", justifyContent: "center", boxShadow: "0 1 px 4 px 0 rgpa(0, 0, 0, 0.14)" }, gridDefination: { xs: 12 } })

 

5. CardContent

{ componentPath: "CardContent", children; } 

 

6. TextField

{ "id":"person-name", "type":"textfield", "jsonPath":"otp.name", "required":true, "floatingLabelText":"NAME", "hintText":"CORE_COMMON_NAME_PLACEHOLDER", "placeholder":"Name", "disabled":"flase", "Value":" ", "variant":"outline" }

 

7. Typography

{ componentPath: "Typography", children: { mihyLoginHeaderText: getLabel({ label: "Login" }) }, props: { align: "center", variant: "title", Style: { color: "primary" } } }

8. HTML Elements

{ uiFramework: "custom-atoms", componentPath: "Div", children: { selectButton: { componentPath: "Button", props: { variant: "contained", color: "primary", className: "hrmsCityPickerButton" }, children: { previousButtonLabel: getLabel({ labelName: "SELECT", labelKey: "HR_CITY_SELECT_LABEL" }) }, onClickDefination: { action: "condition", callBack: createEmployee } } } }

9. Form

{ uiFramework: "custom-atoms", componentPath: "Form", props: { className: "common-div-css", id: "billSearch" } children: { headerDiv: { uiFramework: "custom-atoms", componentPath: "Container", children: { header: { gridDefination: { xs: 12, sm: 6 }, ...header } } } } }

 10. Iframe

{ componentPath: "Iframe", props: { src: "https://uttarakhand-uat.egovernments.org/" } }

11. Icon button

{ "uiFramework":"custom-atoms", "componentPath":"Icon", "props":{ "iconName":"close" } }

12. Container

{ uiFramework: "custom-atoms", componentPath: "Container", children: { header: { gridDefination: { xs: 12, sm: 6 }, ...header } } }

13. MenuButton

{ "uiFramework":"custom-atoms", "componentPath":"MenuButton", "props":{ "data":{ "label":"Download", "leftIcon":"cloud_download", "rightIcon":"arrow_drop_down", "props":{ "variant":"outlined", "style":{ "marginLeft":10 } }, "menu":[ //menu items ] } } }

14. Item 

{ uiFramework: "custom-atoms", componentPath: "Item", props: { sm: 4, xs: 12 }, Children: { { mihyloginDiv: { uiFramework: "custom-atoms", componentPath: "Div", props: { className: "text-center" }, children: { mihyLoginUsername: { uiFramework: "custom-molecules", componentPath: "TextfieldWithIcon", props: { label: "Email", margin: "normal", fullWidth: true, autoFocus: true, required: true, iconObj: { position: "end", iconName: "email" } }, required: true, jsonPath: "body.mihy.username", pattern: "^([a-zA-Z0-9@.])+$" }, } }

14. Break

{ "uiFramework":"custom-atoms", "componentPath":"Break" }

15. UploadFile  

<UploadFile buttonProps={{ variant: "outlined", color: "primary", onClick: onButtonClick, }} handleFileUpload={handleFileUpload} inputProps={{ multiple: false, ...inputProps }} classes={classes} buttonLabel={buttonLabel} />;

16. Uploaded Document

<UploadedDocument document={document} removeDocument={removeDocument} />;

 17. ApplicationNo:

{ uiFramework: "custom-atoms-local", moduleName: "egov-tradelicence", componentPath: "ApplicationNoContainer", props: { number: applicationNumber } }

 

 

18. MenuButton:

{ uiFramework: "custom-atoms-local", moduleName: "egov-tradelicence", componentPath: "MenuButton", props: { data: { label: "Download", leftIcon: "cloud_download", rightIcon: "arrow_drop_down", props: { variant: "outlined", style: { marginLeft: 10 } }, menu: downloadMenu } } }

19. Asterix:

{ "uiFramework":"custom-atoms-local", "moduleName":"egov-tradelicence", "componentPath":"Asteric" }

 

List of Molecules

  1. TextFieldWithIcon:

{ "uiFramework":"custom-molecules", "componentPath":"TextfieldWithIcon", "props":{ "label":"Email", "margin":"normal", "fullWidth":true, "autoFocus":true, "required":true, "iconObj":{ "position":"end", "iconName":"email" } }, "required":true, "jsonPath":"body.mihy.username", "pattern":"^([a-zA-Z0-9@.])+$" }

2. Landing Page Cards

{ "uiFramework":"custom-molecules", "componentPath":"LandingPage", "props":{ "items":"cardItems", "history":{ } } }

3. SingleApplication

{ "uiFramework":"custom-molecules", "componentPath":"SingleApplication", "visible":true, "props":{ "applicationName":{ "label":"TL_COMMON_TABLE_COL_TRD_NAME", "jsonPath":"tradeName" }, "applicationNumber":{ "label":"TL_COMMON_TABLE_COL_APP_NO", "jsonPath":"applicationNumber" } } }

4. DocumentList:

{ "uiFramework":"custom-molecules", "componentPath":"DocumentList", "props":{ "documents":[ { "name":"Upload Document" } ] } }

 

 

5. UploadMultipleFiles:

export const getUploadFilesMultiple = jsonPath => { return: { uiFramework: "custom-molecules", componentPath: "UploadMultipleFiles", props: { maxFiles: 4, jsonPath: jsonPath, inputProps: { accept: "image/*, .pdf, .png, .jpeg" }, buttonLabel: "UPLOAD FILES", maxFileSize: 5000, moduleName: "TL" } };

6. Stepper

{ componentPath: "Stepper", uiFramework: "custom-molecules", props: { steps: stepsData, ...stpperProps.props } }

 

7. Search Results:

{   uiFramework: "custom-molecules",   componentPath: "Table",   visible: false,   props: {     columns: [       getTextToLocalMapping("Application No"),       getTextToLocalMapping("License No"),       getTextToLocalMapping("Trade Name"),       getTextToLocalMapping("Owner Name"),       getTextToLocalMapping("Application Date"),       {         name: getTextToLocalMapping("Status"),         options: {           filter: false,           customBodyRender: value => (             <span               style={                 value === "APPROVED" ? { color: "green" } : { color: "red" }               }             >               {getTextToLocalMapping(value)}             </span>           )         }       },         {         name: "tenantId",         options: {           display: false         }       }     ],     title: getTextToLocalMapping(       "Search Results for Trade License Applications"     ),     options: {       filter: false,       download: false,       responsive: "stacked",       selectableRows: false,       hover: true,       rowsPerPageOptions: [10, 15, 20],       onRowClick: (row, index) => {         onRowClick(row);       }     },     customSortColumn: {       column: "Application Date",       sortingFn: (data, i, sortDateOrder) => {         const epochDates = data.reduce((acc, curr) => {           acc.push([...curr, getEpochForDate(curr[4], "dayend")]);           return acc;         }, []);         const order = sortDateOrder === "asc" ? true : false;         const finalData = sortByEpoch(epochDates, !order).map(item => {           item.pop();           return item;         });         return { data: finalData, currentOrder: !order ? "asc" : "desc" };       }     }   } }

 

List of Containers

  1. Auto Suggest Container:

{ "uiFramework":"custom-containers-local", "moduleName":"egov-tradelicence", "componentPath":"AutosuggestContainer", "jsonPath":"Licenses[0].tradeLicenseDetail.tradeUnits[0].tradeType", "required":true, "gridDefination":{ "xs":12, "sm":4 }, "props":{ "style":{ "width":"100%", "cursor":"pointer" }, "label":{ "labelName":"Trade Sub-Type", "labelKey":"TL_NEW_TRADE_DETAILS_TRADE_SUBTYPE_LABEL" }, "placeholder":{ "labelName":"Select Trade Sub-Type", "labelKey":"TL_NEW_TRADE_DETAILS_TRADE_SUBTYPE_PLACEHOLDER" }, "jsonPath":"Licenses[0].tradeLicenseDetail.tradeUnits[0].tradeType", "sourceJsonPath":"applyScreenMdmsData.TradeLicense.TradeSubCategoryTransformed", "setDataInField":true, "labelsFromLocalisation":true, "localePrefix":{ "moduleName":"TRADELICENSE", "masterName":"TRADETYPE" }, "fullwidth":true, "required":true, "inputLabelProps":{ "shrink":true } } }

2. Dialog Container

{ uiFramework: "custom-containers-local", moduleName: "egov-tradelicence", componentPath: "DialogContainer", props: { open: false, maxWidth: "sm", screenKey: "pay" }, children: { popup: adhocPopup } }

3. DocumentListContainer

{ "uiFramework":"custom-containers-local", "moduleName":"egov-tradelicence", "componentPath":"DocumentListContainer", "props":{ "buttonLabel":{ "labelName":"UPLOAD FILE", "labelKey":"TL_BUTTON_UPLOAD FILE" }, "description":{ "labelName":"Only .jpg and .pdf files. 6MB max file size.", "labelKey":"TL_UPLOAD_RESTRICTIONS" }, "inputProps":{ "accept":"image/*, .pdf, .png, .jpeg" }, "documentTypePrefix":"TL_", "maxFileSize":6000 } }

4. DownloadFileContainer:

{ "uiFramework":"custom-containers-local", "moduleName":"egov-tradelicence", "componentPath":"DownloadFileContainer", "props":{ "sourceJsonPath":"LicensesTemp[0].reviewDocData", "className":"review-documents" } }

5. Payment Redirect Page

{ "uiFramework":"custom-containers-local", "moduleName":"egov-tradelicence", "componentPath":"PaymentRedirectPage", "props":{ "className":"payment-redirect-page" } }

6. View Breakup Container:

{ "uiFramework":"custom-containers-local", "moduleName":"egov-tradelicence", "componentPath":"ViewBreakupContainer", "props":{ "open":false, "maxWidth":"md", "screenKey":"apply" } }

7. ApplicationNoContainer:

{ uiFramework: "custom-atoms-local", moduleName: "egov-common", componentPath: "ApplicationNoContainer", props: { number: getQueryArg(window.location.href, "consumerCode"), label: "Consumer Code.:" } }

 

Note: Many of the components(atoms, molecules, and containers) are local in the module, we need to plan for moving into the framework.

Related content