diff --git a/src/components/home/HomeComponent.tsx b/src/components/home/HomeComponent.tsx index 9c973b4..b58c748 100644 --- a/src/components/home/HomeComponent.tsx +++ b/src/components/home/HomeComponent.tsx @@ -7,7 +7,10 @@ import { connect } from 'react-redux' import { push } from 'react-router-redux' import { getTranslate, getActiveLanguage } from 'react-localize-redux' import config from 'src/config' +import classNames from 'classnames' +import { withStyles } from 'material-ui/styles' +import Drawer from 'material-ui/Drawer' import Menu from 'material-ui/Menu' import { MenuList, MenuItem } from 'material-ui/Menu' import { ListItemIcon, ListItemText } from 'material-ui/List' @@ -18,6 +21,11 @@ import SvgFeedback from 'material-ui-icons/Feedback' import SvgSettings from 'material-ui-icons/Settings' import SvgAccountCircle from 'material-ui-icons/AccountCircle' import SvgPeople from 'material-ui-icons/People' +import List from 'material-ui/List' +import Typography from 'material-ui/Typography' +import IconButton from 'material-ui/IconButton' +import Hidden from 'material-ui/Hidden' +import MenuIcon from 'material-ui-icons/Menu' // - Import app components import Sidebar from 'components/sidebar' @@ -48,67 +56,115 @@ import { import { IHomeComponentProps } from './IHomeComponentProps' import { IHomeComponentState } from './IHomeComponentState' +const drawerWidth = 240 +const styles = (theme: any) => ({ + root: { + width: '100%', + marginTop: theme.spacing.unit * 3, + zIndex: 1, + overflow: 'hidden', + }, + appFrame: { + position: 'relative', + display: 'flex', + width: '100%', + height: '100%', + }, + navIconHide: { + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + drawerHeader: theme.mixins.toolbar, + drawerPaper: { + width: drawerWidth, + [theme.breakpoints.up('md')]: { + width: drawerWidth, + position: 'relative', + height: '100%', + }, + }, + drawerPaperLarge: { + width: drawerWidth, + [theme.breakpoints.up('md')]: { + width: drawerWidth, + height: '100%', + }, + top: 70, + backgroundColor: 'transparent', + borderRight: 0 + }, + menu: { + height: '100%', + backgroundColor: '#EEEEEE' + }, + content: { + backgroundColor: 'transparent', + width: '100%', + flexGrow: 1, + padding: theme.spacing.unit * 1, + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + height: 'calc(100% - 56px)', + marginTop: 56, + [theme.breakpoints.up('sm')]: { + height: 'calc(100% - 64px)', + marginTop: 64, + }, + }, + 'content-left': { + marginLeft: 0, + }, + 'content-right': { + marginRight: 0, + }, + contentShift: { + transition: theme.transitions.create('margin', { + easing: theme.transitions.easing.easeOut, + duration: theme.transitions.duration.enteringScreen, + }), + }, + 'contentShift-left': { + marginLeft: 0, + [theme.breakpoints.up('md')]: { + marginLeft: drawerWidth + } + }, + 'contentShift-right': { + marginRight: 0, + [theme.breakpoints.up('md')]: { + marginRight: drawerWidth + } + } +}) + // - Create Home component class export class HomeComponent extends Component { // Constructor - constructor (props: IHomeComponentProps) { + constructor(props: IHomeComponentProps) { super(props) // Default state this.state = { - sidebarOpen: () => _, - sidebarStatus: true, - sidebarOverlay: false + drawerOpen: false } // Binding function to `this` - this.sidebar = this.sidebar.bind(this) - this.sidebarStatus = this.sidebarStatus.bind(this) - this.sidebarOverlay = this.sidebarOverlay.bind(this) - this.handleCloseSidebar = this.handleCloseSidebar.bind(this) } /** - * handle close sidebar + * Handle drawer toggle */ - handleCloseSidebar = () => { - this.state.sidebarOpen!(false, 'overlay') + handleDrawerToggle = () => { + console.trace('toggle') + this.setState({ drawerOpen: !this.state.drawerOpen }) } - /** - * Change sidebar overlay status - * @param {boolean} status if is true, the sidebar is on overlay status - */ - sidebarOverlay = (status: boolean) => { - this.setState({ - sidebarOverlay: status - }) - } - - /** - * Pass the function to change sidebar status - * @param {boolean} open is a function callback to change sidebar status out of sidebar component - */ - sidebar = (open: (status: boolean, source: string) => void) => { - - this.setState({ - sidebarOpen: open - }) - } - - /** - * Change sidebar status if is open or not - * @param {boolean} status is true, if the sidebar is open - */ - sidebarStatus = (status: boolean) => { - this.setState({ - sidebarStatus: status - }) - } - - componentWillMount () { + componentWillMount() { const { global, clearData, loadData, authed, defaultDataEnable, isVerifide, goTo } = this.props if (!authed) { goTo!('/login') @@ -132,76 +188,106 @@ export class HomeComponent extends Component + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}> + + + + + + + ) + + const anchor = theme.direction === 'rtl' ? 'right' : 'left' return ( -
- - - - - {this.state.sidebarOverlay - ?
- - - - - {config.settings.appName}} /> - -
- : '' - } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - showSendFeedback!()} style={{ color: 'rgb(117, 117, 117)' }}> - - - - - - - - - +
+
+ + + +
+
+ + + {drawer} + +
+ + + + +
+ + {drawer} + +
+ + +
- - - +
+
) @@ -280,4 +366,4 @@ const mapStateToProps = (state: any, ownProps: IHomeComponentProps) => { } // - Connect component to redux store -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(HomeComponent as any)) as typeof HomeComponent +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles as any, { withTheme: true })(HomeComponent as any) as any)) as typeof HomeComponent diff --git a/src/components/home/IHomeComponentProps.ts b/src/components/home/IHomeComponentProps.ts index ba355d6..d6b92eb 100644 --- a/src/components/home/IHomeComponentProps.ts +++ b/src/components/home/IHomeComponentProps.ts @@ -113,4 +113,14 @@ export interface IHomeComponentProps { */ translate?: (state: any) => any + /** + * Styles + */ + classes?: any + + /** + * Theme + */ + theme?: any + } diff --git a/src/components/home/IHomeComponentState.ts b/src/components/home/IHomeComponentState.ts index 83b6af1..d8a9303 100644 --- a/src/components/home/IHomeComponentState.ts +++ b/src/components/home/IHomeComponentState.ts @@ -2,26 +2,7 @@ export interface IHomeComponentState { /** - * Change sidebar status to {open(status:true)/close(status:false)} - * - * @type {(status: boolean, state: string)} - * @memberof IHomeComponentState + * Whether drawer is open */ - sidebarOpen: (status: boolean, source: string) => void - - /** - * Sidebar status - * - * @type {boolean} - * @memberof IHomeComponentState - */ - sidebarStatus: boolean - - /** - * Sidebar overlay status - * - * @type {boolean} - * @memberof IHomeComponentState - */ - sidebarOverlay: boolean + drawerOpen: boolean } diff --git a/src/components/homeHeader/HomeHeaderComponent.tsx b/src/components/homeHeader/HomeHeaderComponent.tsx index 09f0249..2aa636c 100644 --- a/src/components/homeHeader/HomeHeaderComponent.tsx +++ b/src/components/homeHeader/HomeHeaderComponent.tsx @@ -2,6 +2,8 @@ import React, { Component } from 'react' import { NavLink } from 'react-router-dom' import { connect } from 'react-redux' + +// - Material UI import SvgDehaze from 'material-ui-icons/Dehaze' import { grey, blue } from 'material-ui/colors' import Toolbar from 'material-ui/Toolbar' @@ -10,8 +12,8 @@ import Popover from 'material-ui/Popover' import AppBar from 'material-ui/AppBar' import Menu, { MenuList, MenuItem } from 'material-ui/Menu' import Paper from 'material-ui/Paper' +import Hidden from 'material-ui/Hidden' import NotificationsIcon from 'material-ui-icons/Notifications' -import EventListener, { withOptions } from 'react-event-listener' import Tooltip from 'material-ui/Tooltip' import Typography from 'material-ui/Typography' import { Manager, Target, Popper } from 'react-popper' @@ -92,13 +94,8 @@ export class HomeHeaderComponent extends Component { - if (this.props.sidebarStatus) { - this.props.sidebar!(false, 'onToggle') - - } else { - this.props.sidebar!(true, 'onToggle') - - } + const {onToggleDrawer} = this.props + onToggleDrawer() } /** @@ -153,29 +150,19 @@ export class HomeHeaderComponent extends Component { - // TODO: Handle key up on press ESC to close menu - } - /** * Handle resize event for window to manipulate home header status * @param {event} evt is the event is passed by winodw resize event */ handleResize = (event: any) => { - + const {drawerStatus} = this.props // Set initial state let width = window.innerWidth - if (width >= 600 && !this.state.showTitle) { - this.setState({ - showTitle: true - }) + if (width >= 600 && !drawerStatus) { + this.onToggleSidebar() + } else if (width < 600) { - } else if (width < 600 && this.state.showTitle) { - - this.setState({ - showTitle: false - }) } } @@ -190,11 +177,6 @@ export class HomeHeaderComponent extends Component - {/* Left side */} @@ -205,7 +187,9 @@ export class HomeHeaderComponent extends Component
- {this.state.showTitle ?
{this.props.title}
: ''} + +
{this.props.title}
+
{/* Notification */} diff --git a/src/components/homeHeader/IHomeHeaderComponentProps.ts b/src/components/homeHeader/IHomeHeaderComponentProps.ts index 4815f9f..0a3e410 100644 --- a/src/components/homeHeader/IHomeHeaderComponentProps.ts +++ b/src/components/homeHeader/IHomeHeaderComponentProps.ts @@ -7,7 +7,7 @@ export interface IHomeHeaderComponentProps { * @type {boolean} * @memberof IHomeHeaderComponentProps */ - sidebarStatus?: boolean + drawerStatus: boolean /** * Logout user @@ -59,7 +59,7 @@ export interface IHomeHeaderComponentProps { * * @memberof IHomeHeaderComponentProps */ - sidebar?: (status: boolean, source: string) => void + onToggleDrawer: () => void /** * Material ui theme style diff --git a/src/components/people/PeopleComponent.tsx b/src/components/people/PeopleComponent.tsx index d976cef..f40540f 100644 --- a/src/components/people/PeopleComponent.tsx +++ b/src/components/people/PeopleComponent.tsx @@ -112,8 +112,7 @@ export class PeopleComponent extends Component { } />
+
)} /> +