Thanks @Fran-Diox It’s fixed man. :wink:
cyclops24
@cyclops24
Posts made by cyclops24
-
RE: manage splitterSide for use it as reusable component
-
RE: Navigator
@eknoes Thanks man. You save me.
If you have time please see this other question too:
https://community.onsen.io/topic/1009/manage-splitterside-for-use-it-as-reusable-component -
RE: manage splitterSide for use it as reusable component
@argelius , @munsterlander , @Fran-Diox , @eknoes
I finally success to reproduce my issue here for provide others check that.
You can see this CodePen:
https://codepen.io/anon/pen/ObRzLB?editors=0011
Open console and see this error:TypeError: enterPage is undefined
Any Suggestion? Is it a bug or my code is wrong?
-
RE: Navigator
Thanks @munsterlander for your attention. So I’m waiting for @argelius and other guys for reply.
I think OnsenUI React version needs some more docs and example. -
RE: manage splitterSide for use it as reusable component
Thanks @munsterlander , @Fran-Diox for your reply,
@Fran-Diox unfortunatelyresetPage
not working when returnWarning: flattenChildren(...): Encountered two children with the same key,...
I test almost anything but still my SideMenu not working well after some page changes.
I don’t know why but sometimes also it’s returnTypeError: enterPage is undefined
. :cry: -
RE: manage splitterSide for use it as reusable component
Guys I need your help. :cry:
-
RE: Navigation and Tabs in the Onsen UI React Extension
Hi @argelius , @munsterlander,
Is it possible to pass some props to component through navigator?
For example:navigator.pushPage({ component: login, key: 'Login_Index', role: role });
And access
role
withthis.props.role
.
Please guide me man. -
RE: manage splitterSide for use it as reusable component
@argelius @Fran-Diox @munsterlander guys can you help me to fix this issue?
Warning: flattenChildren(...): Encountered two children with the same key, `Page1_Index`. Child keys must be unique; when two children share a key, only the first child will be used. in ons-navigator (created by Navigator) in Navigator (created by App) in Appmodules.js:48127:9 uncaught exception: Splitter side is locked.(unknown)
Why children with same key exist when I use
navigator.resetPage
? Is it a bug?
What isuncaught exception: Splitter side is locked.(unknown)
? -
RE: manage splitterSide for use it as reusable component
new version (previous reply) return this error:
Warning: flattenChildren(...): Encountered two children with the same key, `Page1_Index`. Child keys must be unique; when two children share a key, only the first child will be used. in ons-navigator (created by Navigator) in Navigator (created by App) in Appmodules.js:48127:9 uncaught exception: Splitter side is locked.(unknown)
Any suggestion?
-
RE: manage splitterSide for use it as reusable component
I change my code as bellow any idea or improvement??
import { Meteor } from 'meteor/meteor'; import React, { PropTypes, Component } from 'react'; import { Page, Icon, List, ListItem, Splitter, SplitterSide, SplitterContent, Toolbar, ToolbarButton, Modal} from 'react-onsenui'; import { Random } from 'meteor/random'; import page1 from '../pages/page1.jsx'; import page2 from '../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 also change my Page1 to:
import React, { PropTypes, Component } from 'react'; import { Icon, List, ListItem, ListHeader} from 'react-onsenui'; import SideMenu from '../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;