nsd-preact-material-middleware
This is a library that opiniates preact-material-components. Also included is an application wrapper with opiniated use and style.
Install
npm install nsd-preact-material-middleware
Usage
default use
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { AppWrapper } from "nsd-preact-material-middleware";
const testDrawer = {
hasChildren: false,
open: false,
items: [
{
id: 1,
icon: "settings",
index: 1,
title: "Main Setting",
path: "settings",
subItems: [
{
id: 2,
index: 1,
title: "Sub Setting",
path: "settings/subSetting"
}
]
},
{
id: 3,
icon: "perm_identity",
index: 1,
title: "User",
path: "settings",
subItems: [
{
parentId: 3,
id: 4,
index: 1,
title: "Details",
path: "settings/subSetting"
}
]
}
]
};
//Top section was props Actual usage below.
class TestRouter extends Component {
constructor(props: Props) {
super(props);
this.state = this.initialState();
}
initialState = () => {
return {
currentUser: {
fullName: "Eddy Hernandez"
},
header: {
openDrawer: this.openDrawer,
title: "TestTitle"
},
drawer: {
...testDrawer,
...{
closeDrawer: this.closeDrawer,
linkTo: this.linkTo,
onItemClick: this.onDrawerItemClick,
resetDrawer: this.resetDrawer
}
},
loading: {
show: false
}
};
};
linkTo = (path: string) => {};
loadSubitems = (item) => {
if (item.subItems)
this.setState((prevState) => {
return {
drawer: {
...prevState.drawer,
...{ items: item.subItems, hasChildren: true }
}
};
});
};
closeDrawer = () => {
this.setState((prevState) => {
return {
drawer: this.initialState().drawer
};
});
};
openDrawer = () => {
this.setState((prevState) => {
return { drawer: { ...this.state.drawer, open: true } };
});
};
resetDrawer = () => {
this.setState((prevState) => {
return {
drawer: { ...this.initialState().drawer, open: true }
};
});
};
onDrawerItemClick = (item) => {
item.subItems && this.loadSubitems(item);
item.parentId && this.resetDrawer();
};
render() {
const { header, drawer, currentUser, loading } = this.state;
return (
<AppWrapper
currentUser={currentUser}
header={header}
drawer={drawer}
loading={loading}
openDrawer={true}
title={"Test Application"}
linkTo={this.linkTo}
>
{/*put Router Here*/}
</AppWrapper>
);
}
}
ReactDOM.render(<TestRouter />, document.body);
API
Table of Contents
- User
- fullName
- NsdWrapperProps
- AppWrapper
- NsdHeaderProps
- NsdHeader
- NsdDrawerProps
- NsdDrawer
- NsdDrawerItems
- DrawerItem
User
User Type of the logged in user(is required)
Type: {fullName: string}
Properties
-
fullName
string
fullName
The display name to show throughout the application
NsdWrapperProps
Props required for the AppWrapper component to work
Type: {header: NsdHeaderProps, drawer: NsdDrawerProps, loading: NsdLoadingProps, currentUser: User?, onItemClick: function (item: DrawerItem, index: (number | string)): void?, linkTo: function (path: string): void, children: any?}
Properties
-
header
NsdHeaderProps -
drawer
NsdDrawerProps -
loading
NsdLoadingProps -
currentUser
User? -
onItemClick
function (item: DrawerItem, index: (number | string)): void? -
linkTo
function (path: string): void -
children
any?
AppWrapper
Application wrapper that utilizes available components to build an application wrapper. example usage <AppWrapper {...props}>
Parameters
-
Props
NsdWrapperProps Default props passed for the Component to work-
Props.header
NsdHeaderProps header options passed to header. -
Props.drawer
NsdDrawerProps drawer options passed to drawer -
Props.linkTo
Function function that will be item -
Props.loading
NsdLoadingProps loading options passed to drawer -
Props.currentUser
User The logged in user, -
Props.children
React.Node react children to show in interior of react component -
Props.onItemClick
Function function to occur when the item in items is clicked
-
NsdHeaderProps
NsdHeaderProps
Type: {title: string, openDrawer: function (): void, currentUser: User?}
Properties
NsdHeader
Parameters
-
Props
NsdHeaderProps options passed into header-
Props.title
string Title to show in the application -
Props.openDrawer
Function function to use to change the state of the drawer example opneDrawer:()=>{ this.setstate((prevState)=>{ return {drawer.open:true} }) } -
Props.currentUser
User User to show in the current user dialog(TODO:Not implemented yet)
-
NsdDrawerProps
Type: {closeDrawer: function (): void, open: boolean, items: Array<DrawerItem>, onItemClick: function (item: DrawerItem, itemIndex: (number | string)): void?, showSubItems: boolean?, hasChildren: boolean, currentUser: User?, resetDrawer: function (): void?}
Properties
-
closeDrawer
function (): void -
open
boolean -
items
Array<DrawerItem> -
onItemClick
function (item: DrawerItem, itemIndex: (number | string)): void? -
showSubItems
boolean? -
hasChildren
boolean -
currentUser
User? -
resetDrawer
function (): void?
NsdDrawer
Drawer Component to load Items
Parameters
-
Props
NsdDrawerProps Drawer options passed to drawer-
Props.open
boolean The state of the drawer open. -
Props.closeDrawer
Function Action to take when drawer is close(Change the state of drawer.open to false) -
Props.items
Array<DrawerItem> Array of @type {DrawerItem} -
Props.onItemClick
Function Pass through function passed to @param {NsdDrawerItems} items -
Props.showSubItems
boolean ???? not sure right now -
Props.hasChildren
hasChildren If true will show a back to home option above the currentUserr fullName in the drawer -
Props.currentUser
User Current logged in user. Will user the full name in the drawer -
Props.resetDrawer
Function Function that will happen if hasChildren = true and the back to home option is pressed (this is where you would reset the drawer to initial state)
-
NsdDrawerItems
NsdDrawerItems
Parameters
-
$0
any$0.items
$0.showSubItems
$0.onItemClick
DrawerItem
Type: {id: number, title: string?, icons: string?, path: string, subItems: Array<DrawerItem>?}
Properties
##ChangeLog 0.0.18 -Fixed Internet explorer 11 icons not showing
0.0.16 -Moved Changelog to bottom of readme
0.0.15 -Fix Badges in npm readme (accidentrly deleted)
0.0.14 -Fixed undefined type in drawer -Updated preact-material-components library -Partially started guide using documentation.js(https://http://documentation.js.org/)
0.0.8 -Clean up (actually works...I think) -Implemented flow
TODO LIST: -Create a guide-Working Progress -Create GitHub repository