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 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

• title string
• openDrawer function (): void
• currentUser User?

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

• id number
• title string?
• icons string?
• path string
• subItems Array<DrawerItem>?

##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