- Notifications
You must be signed in to change notification settings - Fork0
Materialize UI implementation of react-openfin
License
openfin-js-app/react-openfin-mat-impl
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Reusable openfin react components implemented via React Material UI
npm i react-openfin-mat-impl or yarn add react-openfin-mat-implThis section, we will cover all reusable components provided byreact-openfin-mat-impl
Now, react-openfin has be initialized, route naming pattern has been specified. It is time to render something inOpenfin, like headers drawer sidebar, tabs, theme switcher etc. Should we build it ? Do not worry,react-openfin-mat-implprovided a set reusable components already. It is very easy to use and powerful.
Everything is a component, but it doesn't means we could design components at freely.
For code readability, we split components into three categories.
- Layout components - lyt
- View components - view
- Components - comp
There is a hierarchy of these three types of components. Lyt can contain anything it want, view can only contain views or comps.Comp can only include comps.
Besides that, from style maintaining perspective, lyt can be an entry comp, it should take whole space of the bodyelement or the screen and provide a complete set of buzi logics. However view might not be an entry comp, view componentshould only at most take whole space of its parent and provide part of the buzi logics. Comp should the smallest or smallerreusable components provides.
react-openfin-mat-impl will follow this category and provide reusable components of different categories.
| Category | Entry components | Set of logics provided | Reusable |
|---|---|---|---|
| Layout | Yes | Complete | No |
| View | No | Partial | Yes |
| Comp | No | Smallest or smaller | Yes |
- Loading Layout
- Dashboard Layout
- Child Window Layout
- Notification Layout
- LaunchBar Layout
LoadingLytis a layout component that will be rendered at screen center while the application starting.Inside it, name, description, app logo, company logo will be rendered. Thus most of these variables need to be specified on it props.Name and description will be loaded via fieldsappNameorappDescofpublic/locales/(language)/langding.json
import*asReactfrom'react';import{LoadingLyt}from'react-openfin-mat-impl';importappLogofrom'../assets/svg/app.svg';importcompanyLogofrom'../assets/svg/company.svg';constLoading:React.FunctionComponent<{}>=({})=>(<LoadingLytappLogo={appLogo}companyLogo={companyLogo}version={process.env.REACT_APP_VERSION}/>)
| Name | Type | Description |
|---|---|---|
| appLogo | string | app img base url |
| companyLogo | string | company img base url |
| version | string | version string to be renderred on the loading layout |
DashboardLytis a layout component that serves as the container on main view with a header, sidebar.Therefore, among props will contain the fields relating to the header and sidebar comp.
import*asReactfrom'react';import{useContext}from'react';import{DashboardLyt}from'react-openfin-mat-impl';importappLogofrom'../assets/svg/app.svg';exportconstDashboard:React.FunctionComponent<{}>=({...rest})=>{const{actions:{ onNewSnackBar}}=useContext(ApplicationContext);consthandleLogoutBtnClick=()=>{onNewSnackBar({variant:'rose',message:'User clicked the logout btn',// README// vertical and horizontal fields are optionalvertical:'top',horizontal:'right',})}return(<DashboardLytappLogo={appLogo}routes={dashboardRoutes}menuItems={[{icon:<ExitToAppIcon/>,label:'staticMenu.logout',onClick:handleLogoutBtnClick,}]}headerPrefixElements={<ClientPrefix{...rest}/>}{...rest}/>)}
| Name | Type | Description |
|---|---|---|
| appLogo | string | app img base url |
| routes | RouteItem[] | sub routes of dashboard path, ansample will be provided |
| sidebarBgUrl | optional string | the url of the sidebar background image if you wanna override |
| menuItems | optional ISideBarMenuItem[] | static sidebar item besides route items, a sample is also provided |
| hideSwitchToLaunchbar | optional boolean | will hide the button to switch to launchbar if set to true |
| headerPrefixElements | optional ReactNode | prefix nodes upon headers, anexample also provided |
| headerSuffixElements | optional ReactNode | suffix nodes upon headers, similar to prefix nodes |
ChildWindowLytis a layout component that serves as the container on each child window with a header.Therefore, among props will contain the fields relating to the header comp.
import*asReactfrom'react';import{ChildWindowLyt}from'react-openfin-mat-impl';importappLogofrom'../assets/svg/app.svg';exportconstChildWindow:React.FunctionComponent<{}>=({...rest})=>{return(<ChildWindowLytappLogo={appLogo}routes={childrenRoutes}{...rest}/>)}
| Name | Type | Description |
|---|---|---|
| appLogo | string | app img base url |
| routes | RouteItem[] | sub routes of child path, ansample will be provided |
| headerPrefixElements | optional ReactNode | prefix nodes upon headers, anexample also provided |
| headerSuffixElements | optional ReactNode | suffix nodes upon headers, similar to prefix nodes |
NotificationLytis a layout component that serves as the container of each notification window.
import*asReactfrom'react';import{NotificationLyt}from'react-openfin-mat-impl';exportconstNotification:React.FunctionComponent<{}>=({})=>{return(<NotificationLytroutes={notificationRoutes}/>)}
| Name | Type | Description |
|---|---|---|
| routes | RouteItem[] | sub routes of notification path, ansample will be provided |
LaunchBarLyt provides a scroller bar from which a new child window could be opened. The launchBar could be collapsedinto a smaller size for better user experiences. And the first item on the bar is a place holder like header of thelaunchBar, like user can drag upon it to move the bar. Moreover there is a prop called firstAppBar via which appdeveloper could customize the launch bar item.
import*asReactfrom'react';import{LaunchBarLyt}from'react-openfin-mat-impl';importappLogofrom'../assets/svg/app.svg';importlaunchBarItemsfrom'../constants/launchBarItems';exportconstLaunchBar:React.FunctionComponent<{}>=({})=>{return(<LaunchBarLytappLogo={appLogo}items={launchBarItems}/>)}
| Name | Type | Description |
|---|---|---|
| appLogo | string | app img base url |
| items | ILaunchBarItem[] | the constant items for launchBar,sample |
| firstAppBar | optional ReactNode | app img base url |
The schema and details of ILaunchBarItem will be covered in the next section.
- Config View
- Report View
A config view which render the all items of the config service provided byreact-openfin. And its item should beconfigured via the constants introduced in next constant section.
import*asReactfrom'react';import{IConfigTab,MuiTheme,FieldType}from'react-openfin';importSettingIconfrom'@material-ui/icons/Settings';importlistCheckedSvgfrom'../assets/svg/other/check-box.svg';importlistCheckedDarkSvgfrom'../assets/svg/other/list-checked-dark.svg';constconfigTabs:IConfigTab[]=[{_order:2,_label:'sample.label',_name:'sample',_svgUrl:listCheckedSvg,_svgUrl_dark:listCheckedDarkSvg,_icon:SettingIcon,_fields:[{_type:FieldType.SUBHEADING,_label:'sample.vals.label',_cols:12,},{_type:FieldType.SUBHEADING,_label:'sample.vals.string.label',_cols:4,},{_type:FieldType.STRING,_label:'sample.vals.string.field',_name:'strValue',_defaultValue:"",_cols:8,},{_type:FieldType.SUBHEADING,_label:'sample.vals.currency.label',_cols:4,},{_type:FieldType.CURRENCY,_label:'sample.vals.currency.field',_name:'crrValue',_defaultValue:123456789,_cols:8,},{_type:FieldType.SUBHEADING,_label:'sample.vals.date.label',_cols:4,},{_type:FieldType.DATE,_label:'sample.vals.date.field',_name:'dateValue',_defaultValue:newDate(),_cols:8,},{_type:FieldType.SUBHEADING,_label:'sample.vals.time.label',_cols:4,},{_type:FieldType.TIME,_label:'sample.vals.time.field',_name:'timeValue',_defaultValue:newDate(),_cols:8,},{_type:FieldType.SUBHEADING,_label:'sample.vals.dateTime.label',_cols:4,},{_type:FieldType.DATETIME,_label:'sample.vals.dateTime.field',_name:'datetimeValue',_defaultValue:newDate(),_cols:8,},{_type:FieldType.SUBHEADING,_label:'sample.vals.customField.label',_cols:12,},{_type:FieldType.CUSTOM_FIELD,_label:'sample.vals.customField.field',_custom:<ConfigJsonField/>,_cols:12,_rows:6,}]}];exportconstMyConfigView:React.FunctionComponent<{}>=({})=>{return(<ConfigViewtabs={configTabs}/>)}
| Name | Type | Description |
|---|---|---|
| tabs | IConfigTab[] | the constant items for launchBar,sample |
The schema and details of IConfigTab will be covered in the next section.
Report View is a reusable view to render essentials variables seized fromOpenfin, like openfin runtime version,username, machineName, hardware infos and etc.s
import{ReportView}from'react-openfin-mat-impl';
Not props required
| Name | Type | Description |
|---|---|---|
| n/a | n/a | n/a |
Basically,react-openfin-mat-impl provides two sets of components, one for app developer to directly use. Andanother set of components internal used to build other components like layout components.
- Exported reusable components
- ConfigAboutField - A about view of the infos relating to the app
- ConfigJsonField - A json view of config state maintained byreact-openfin, generally for debuing purpose
- ConfigLangField - A switcher to change language maintained byreact-openfin
- ConfigThemeField - A theme switcher to change theme between light and dark.
- Internal use components
- ConfigField
- Header
- HeaderLinks
- HeaderThemeSwitcher
- Sidebar
- SnackbarContent
- OfflineOverlay
A about view of the infos relating to the app
import*asReactfrom'react';import{IConfigTab}from'react-openfin';import{ConfigAboutField,FieldType}from'react-openfin-mat-impl';importSettingIconfrom'@material-ui/icons/Settings';importappSvgfrom'../assets/svg/app.svg';importcompanySvgfrom'../assets/svg/company.svg';importinfomationSvgfrom'../assets/svg/support/information.svg';importinfomationDarkSvgfrom'../assets/svg/support/information-dark.svg';constconfigTabs:IConfigTab[]=[{_order:1,_label:'about.label',_name:'about',_svgUrl:infomationSvg,_svgUrl_dark:infomationDarkSvg,_icon:SettingIcon,_fields:[{_type:FieldType.CUSTOM_FIELD,_label:'About openfin starter',_custom:<ConfigAboutFieldappLogo={appSvg}companyLogo={companySvg}/>,_cols:12,_rows:12,}]},];
| Name | Type | Description |
|---|---|---|
| appLogo | string | app img base url |
| companyLogo | string | company img base url |
These three components can build directly used and no required props needed at all. And they are designed to render theconfig item ofreact-openfin.
For instance, please refersrc/constants/configTabs.tsxfor details.
TODO: provide the documentation of this part in next release
About
Materialize UI implementation of react-openfin
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.