nsd-preact-material-middleware v0.0.18
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
NsdHeaderPropsdrawer
NsdDrawerPropsloading
NsdLoadingPropscurrentUser
User?onItemClick
function (item: DrawerItem, index: (number | string)): void?linkTo
function (path: string): voidchildren
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 workProps.header
NsdHeaderProps header options passed to header.Props.drawer
NsdDrawerProps drawer options passed to drawerProps.linkTo
Function function that will be itemProps.loading
NsdLoadingProps loading options passed to drawerProps.currentUser
User The logged in user,Props.children
React.Node react children to show in interior of react componentProps.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
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 (): voidopen
booleanitems
Array<DrawerItem>onItemClick
function (item: DrawerItem, itemIndex: (number | string)): void?showSubItems
boolean?hasChildren
booleancurrentUser
User?resetDrawer
function (): void?
NsdDrawer
Drawer Component to load Items
Parameters
Props
NsdDrawerProps Drawer options passed to drawerProps.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} itemsProps.showSubItems
boolean ???? not sure right nowProps.hasChildren
hasChildren If true will show a back to home option above the currentUserr fullName in the drawerProps.currentUser
User Current logged in user. Will user the full name in the drawerProps.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