javascript - manage splitterSide for use it as reusable component -
hi guys want create new sidemenu component based on onsenui splitterside demo try don't know how can manage sates , props. i'm new in react.js. can me improve (fix) this?
this component code now:
import react, { proptypes, component } 'react'; import { page, icon, list, listitem, splitter, splitterside, splittercontent} 'react-onsenui'; import page1 '../pages/page1.jsx'; import page2 '../pages/page2.jsx'; class sidemenu extends component { constructor(props) { super(props); this.hide = this.hide.bind(this); this.show = this.show.bind(this); this.page1 = this.page1.bind(this); this.page2 = this.page2.bind(this); }; hide() { this.props.isopen = false; }; show() { this.props.isopen = true; }; goto_page1() { this.props.navigator.resetpage({ component: page1, key: 'page1_index' }); }; goto_page2() { this.props.navigator.resetpage({ component: page2, key: 'page2_index' }); }; render() { return ( <splitter> <splitterside style={{ boxshadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }} side='left' width={200} collapse={true} isswipeable={true} isopen={this.props.isopen} onclose={this.hide} onopen={this.show} > <page> <list datasource={['page one', 'page two']} renderrow={(title) => { switch(title) { case "page one": return ( <listitem key={title} onclick={this.goto_page1} tappable> <div>{title}</div> </listitem> ); break; case "page two": return ( <listitem key={title} onclick={this.goto_page2} tappable> <div>{title}></div> </listitem> ); break; default: return ( <listitem key={title} onclick={this.hide} tappable> <div>{title}</div> </listitem> ); break; } }} /> </page> </splitterside> <splittercontent> {this.props.children} </splittercontent> </splitter> ); } } sidemenu.proptypes = { navigator: proptypes.object }; export default sidemenu; and page1 code:
import react, { proptypes, component } 'react'; import { page, toolbar, toolbarbutton, icon} 'react-onsenui'; import sidemenu '../components/sidemenu.jsx'; class page1 extends component { constructor(props) { super(props); this.rendertoolbar = this.rendertoolbar.bind(this); this.hide = this.hide.bind(this); this.show = this.show.bind(this); this.state = { isopen: false }; }; rendertoolbar() { return ( <toolbar> <div classname='left'> <toolbarbutton onclick={this.show}> <icon icon='ion-navicon, material:md-menu' /> </toolbarbutton> </div> <div classname='center'>page 1 title</div> </toolbar> ); }; hide() { this.setstate({isopen: false}); }; show() { this.setstate({isopen: true}); }; render() { return ( <sidemenu navigator={this.props.navigator} isopen={this.state.isopen}> <page rendertoolbar={this.rendertoolbar}> page content here </page> </sidemenu> ); } } page1.proptypes = { navigator: proptypes.object }; export default page1; is code style correct? (is props states valid?)
how prevent 2 time declaration of show , hide function?
new version:
i change code bellow idea or improvement??
import { meteor } 'meteor/meteor'; import react, { proptypes, component } 'react'; import { page, icon, list, listitem, splitter, splitterside, splittercontent, toolbar, toolbarbutton, modal} 'react-onsenui'; import { random } 'meteor/random'; import page1 '../pages/page1.jsx'; import page2 '../pages/page2.jsx'; class sidemenu extends component { constructor(props) { super(props); this.rendertoolbar = this.rendertoolbar.bind(this); this.hide = this.hide.bind(this); this.show = this.show.bind(this); this.goto_page1 = this.goto_page1.bind(this); this.goto_page2 = this.goto_page2.bind(this); this.state = { isopen: false }; }; rendertoolbar() { return ( <toolbar> <div classname='left'> <toolbarbutton onclick={this.show}> <icon icon='ion-navicon, material:md-menu' /> </toolbarbutton> </div> <div classname='center'>{this.props.pagetitle}</div> </toolbar> ); }; hide() { this.setstate({isopen: false}); }; show() { this.setstate({isopen: true}); }; goto_page1() { this.props.navigator.resetpage({ component: page1, key: 'page1_index' }); }; goto_page2() { this.props.navigator.resetpage({ component: page2, key: 'page2_index' }); }; render() { return ( <splitter> <splitterside style={{ boxshadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)' }} side='left' width={200} collapse={true} isswipeable={true} isopen={this.state.isopen} onclose={this.hide} onopen={this.show} > <page> <list datasource={[ 'page one', 'page two']} renderrow={(title) => { switch(title) { case "page one": return ( <listitem key={title} onclick={this.goto_page1} tappable> <div classname='left'>{title}</div> </listitem> ); break; case "page two": return ( <listitem key={title} onclick={this.goto_page2} tappable> <div classname='left'>{title}</div> </listitem> ); break; default: return ( <listitem key={title} onclick={this.hide} tappable> <div classname='left'>{title}</div> </listitem> ); break; } }} /> </page> </splitterside> <splittercontent> <page rendertoolbar={this.rendertoolbar} > {this.props.children} </page> </splittercontent> </splitter> ); } } sidemenu.proptypes = { navigator: proptypes.object.isrequired, pagetitle: proptypes.string.isrequired }; export default sidemenu; i change page1 to:
import react, { proptypes, component } 'react'; import { icon, list, listitem, listheader} 'react-onsenui'; import sidemenu '../components/sidemenu.jsx'; class page1 extends component { render() { return ( <sidemenu navigator={this.props.navigator} pagetitle="page 1 title"> page content here </sidemenu> ); } } page1.proptypes = { navigator: proptypes.object }; export default page1;
how prevent 2 time declaration of show , hide function?
you use methods way:
<yourcomponent method={ () => this.hide() } and won't need binding in c-tor.
or use library called "autobind-decorator” , add @autobind before each class:
@autobind class yourcomponent extends react.component {….}
Comments
Post a Comment