Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. cyclops24
    C
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    cyclops24

    @cyclops24

    1
    Reputation
    29
    Posts
    1137
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    cyclops24 Follow

    Posts made by cyclops24

    • RE: manage splitterSide for use it as reusable component

      Thanks @Fran-Diox It’s fixed man. :wink:

      posted in Onsen UI
      C
      cyclops24
    • 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

      posted in React
      C
      cyclops24
    • 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?

      posted in Onsen UI
      C
      cyclops24
    • 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.

      posted in React
      C
      cyclops24
    • RE: manage splitterSide for use it as reusable component

      Thanks @munsterlander , @Fran-Diox for your reply,
      @Fran-Diox unfortunately resetPage not working when return Warning: 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 return TypeError: enterPage is undefined. :cry:

      posted in Onsen UI
      C
      cyclops24
    • RE: manage splitterSide for use it as reusable component

      Guys I need your help. :cry:

      posted in Onsen UI
      C
      cyclops24
    • 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 with this.props.role.
      Please guide me man.

      posted in Monaca & Onsen UI Articles
      C
      cyclops24
    • 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 is uncaught exception: Splitter side is locked.(unknown)?

      posted in Onsen UI
      C
      cyclops24
    • 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?

      posted in Onsen UI
      C
      cyclops24
    • 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;
      
      posted in Onsen UI
      C
      cyclops24