2016-02-09 01:07:12 +03:00
import React from 'react' ;
import { AppBar , Checkbox , Dropdown , IconButton , RadioGroup , RadioButton } from '../../components' ;
import { Layout , NavDrawer , Panel , Sidebar } from '../../components' ;
const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' ;
const drawerItems = dummyText . split ( /\s/ ) . map ( function ( word , index ) {
return ( < li key = { index } > { word } < / l i > ) ;
} ) ;
const sidebarWidths = [
{ value : 4 , label : '4 incr' } ,
{ value : 5 , label : '5 incr' } ,
{ value : 6 , label : '6 incr' } ,
{ value : 7 , label : '7 incr' } ,
{ value : 8 , label : '8 incr' } ,
{ value : 9 , label : '9 incr' } ,
{ value : 10 , label : '10 incr' } ,
{ value : 25 , label : '25%' } ,
{ value : 33 , label : '33%' } ,
{ value : 50 , label : '50%' } ,
{ value : 66 , label : '66%' } ,
{ value : 75 , label : '75%' }
] ;
class LayoutTest extends React . Component {
state = {
permanentAt : 'lg' ,
drawerOpen : false ,
drawerPinned : false ,
sidebarPinned : false ,
sidebarWidth : 5 ,
loremIpsums : 1
} ;
toggleDrawer = ( event ) => {
event . stopPropagation ( ) ;
this . setState ( { drawerOpen : ! this . state . drawerOpen } ) ;
} ;
toggleDrawerPinned = ( ) => {
this . setState ( { drawerPinned : ! this . state . drawerPinned } ) ;
} ;
changeDrawerPermanentAt = ( value ) => {
this . setState ( { permanentAt : value } ) ;
} ;
toggleSidebar = ( value ) => {
this . setState ( { sidebarPinned : ( value === true ) } ) ;
} ;
changeSidebarWidth = ( value ) => {
this . setState ( { sidebarWidth : value } ) ;
} ;
fewer = ( event ) => {
event . preventDefault ( ) ;
this . setState ( { loremIpsums : Math . max ( 0 , this . state . loremIpsums - 1 ) } ) ;
} ;
more = ( event ) => {
event . preventDefault ( ) ;
this . setState ( { loremIpsums : this . state . loremIpsums + 1 } ) ;
} ;
render ( ) {
const rng = Array . from ( new Array ( this . state . loremIpsums ) , ( x , i ) => i ) ;
return (
< section >
< h5 > Layout < / h 5 >
< div style = { { width : '100%' , height : '60rem' , margin : '1.8rem 0' } } >
< Layout >
< NavDrawer active = { this . state . drawerOpen } pinned = { this . state . drawerPinned } permanentAt = { this . state . permanentAt } onOverlayClick = { this . toggleDrawer } >
2016-08-29 08:33:45 +03:00
< AppBar title = 'Drawer' / >
2016-02-09 01:07:12 +03:00
< ul style = { { listStyle : 'none' , overflowY : 'auto' , flex : 1 , padding : '1.6rem' } } >
{ drawerItems }
< / u l >
< / N a v D r a w e r >
< Panel >
2016-08-29 08:33:45 +03:00
< AppBar leftIcon = 'menu' onLeftIconClick = { this . toggleDrawer } / >
2016-02-09 01:07:12 +03:00
< div style = { { flex : 1 , overflowY : 'auto' } } >
< div style = { { display : 'flex' , flexDirection : 'row' } } >
< section style = { { margin : '1.8rem' } } >
< h5 > NavDrawer State < / h 5 >
< p > Drawer becomes permanent when window is ... . < / p >
< RadioGroup name = 'permanentAt' value = { this . state . permanentAt } onChange = { this . changeDrawerPermanentAt } >
< RadioButton label = 'Small' value = 'sm' / >
< RadioButton label = 'Medium' value = 'md' / >
< RadioButton label = 'Large' value = 'lg' / >
< RadioButton label = 'Extra Large' value = 'xl' / >
2016-05-22 20:43:25 +03:00
< RadioButton label = 'Never' value = { undefined } / >
2016-02-09 01:07:12 +03:00
< / R a d i o G r o u p >
< Checkbox label = 'Pin drawer' checked = { this . state . drawerPinned } onChange = { this . toggleDrawerPinned } / >
< / s e c t i o n >
< section style = { { margin : '1.8rem' } } >
< h5 > Sidebar State < / h 5 >
< RadioGroup name = 'sidebarPinned' value = { this . state . sidebarPinned } onChange = { this . toggleSidebar } >
< RadioButton label = 'Pinned' value / >
< RadioButton label = 'Unpinned' value = { false } / >
< / R a d i o G r o u p >
< h5 > Sidebar Width < / h 5 >
< Dropdown
auto
onChange = { this . changeSidebarWidth }
source = { sidebarWidths }
value = { this . state . sidebarWidth }
/ >
< / s e c t i o n >
< / d i v >
< section style = { { margin : '1.8rem' } } >
< h5 > Scrollable Content < / h 5 >
< p >
The center pane should scroll independently from
the sides . Show
[ < a href = '#' onClick = { this . fewer } > - < / a > ]
{ ` ${ this . state . loremIpsums } ` }
[ < a href = '#' onClick = { this . more } > + < / a > ] p a r a g r a p h ( s ) b e l o w t h i s o n e .
< / p >
{ rng . map ( ( x , i ) => < p key = { i } > { dummyText } < / p > ) }
< / s e c t i o n >
< / d i v >
< / P a n e l >
< Sidebar pinned = { this . state . sidebarPinned } width = { Number ( this . state . sidebarWidth ) } >
< div > < IconButton icon = 'close' onClick = { this . toggleSidebar } / > < / d i v >
< div style = { { flex : 1 , margin : '1.8rem' } } >
< h5 > Sidebar < / h 5 >
< p >
Sidebar content should be secondary to the main content on a page .
< / p >
< p >
The width of the sidebar can be set either in < em > increments < / e m >
( where 1 increment = height of the app bar ) or in percentages .
< / p >
< p >
As per the spec , the right sidebar expands to cover the entire
screen at small screen sizes .
< / p >
< / d i v >
< / S i d e b a r >
< / L a y o u t >
< / d i v >
< / s e c t i o n >
) ;
}
}
export default LayoutTest ;