pors / reactionic Goto Github PK

Has anyone experience having a duplicate buttons on the IonNavBar while browsing ?
I used different IonButton as leftButton for IonNavBar. While browsing back and forth, the buttons just start to duplicate instead of just having one.
I will make an example soon. Just wonder if anyone came across this situation.

This would be really useful, I don't see why we can't pass down this instead of customClasses which just seams odd.

This is awesome, thanks for sharing.

Was wondering what version of Ionic you built this from, 1.2.4 or the 2.0.0 beta or did you fork the old Meteoric code? Would be awesome if it was based on the latest Ionic 2 release that is based on Angular 2 as this would be closer to React in concept and one could use the latest CSS and icons from the Ionic 2 release, which has added a ton of new features.

Here are the Ionic 2 list of components: http://ionicframework.com/docs/v2/components/#overview

See https://github.com/meteoric/meteor-ionic/tree/master/components/ionPopup and http://ionicframework.com/docs/api/service/$ionicPopup/

Currently these props have to be set in the application, but this should be done by the library itself as a part of the IonBody state.

See https://github.com/meteoric/meteor-ionic/tree/master/components/ionSideMenu and http://ionicframework.com/docs/api/directive/ionSideMenus/

Do we plan to add any of them?

See http://guide.meteor.com/v1.3/build-tool.html#css-importing-from-package

So, even if you tap OK on a prompt popup the next time that the popup comes up it will still have the previous input value.

@pors I would just fix this, but I wanted to have a discussion first about how to appropriately accomplish this. Are all users going to want this this.state.inputValue cleared on OK? How about on cancel? Or do we want to make it customizable and somehow allow the onOK and onCancel handlers have access to clearing this.state.inputValue? If that is the case what is best way to allow this to happen?

Or should I just not use the built in type: 'prompt' and write a more explicit popup object to pass to this.context.ionUpdatePopup with a specific template that allows me to control what I want more?

Hi @pors ,

First thanks for extending ionic community by your new born project but I think if you based this project on meteoric124 it's more better because I check your project and it has so many native or UI bugs (bugs on real android device) because these bugs not solved on main meteoric repository from Nick Wientge but many of them fixed in meteoric124 fork from Joey Andres (for example these bugs still exist on you project but fixed on meteoric124 fork some month ago) and also many complex feature like ion-infinite-scroll, ion-delete-button, ion-reorder-button and more done there.

Also many page load improvement and analysis like this and this by remove unnecessary ionIcon and deprecate that happened there.

I suggest you to communicate with @JoeyAndres and share experience between yourselves.
All of us have a same enemy (angular 😄 ) and same problem or task because both team try to port angular based ionic to non-angular. Meteoric124 use blaze and meteor based approach for solve problems but React-Ionic use react for solve them.

The structure below is what I landed on after playing around. It's not entirely clear where to put your reactive data source (Meteor users).

If your app right now is x, think of this package as wrapping your app into x' = reactionic(x). All of your reactivity should go under the IonBody coming from this package.

<Router history={browserHistory}>
 <Route path="/" component={IonApp /*contains IonBody in it*/}>
   <Route component={ReactiveMeteorContainerComponentLayout}>
    <IndexRoute component={MainPostsListView}/>
    <Route path="/posts/:id" component={PostsDetailView}/>
    <Route path="/messages" component={MessagesListView}/>
    <Route path="/messages/:id" component={MessagesDetailView}/>
    <Route path="*" component={Missing}/>
   </Route>
 </Route>
</Router>

If there's a better pattern, please share it here. Putting reactivity in the IonApp layer results in unnecessary lifecycle reruns.

Not in Meteoric, but it's helpful to implement it as a component with state, see http://ionicframework.com/docs/components/#range

Some context definitions a needed in any app at the top level. Needs to be documented.

https://facebook.github.io/react/docs/context.html seems like a better fit for libraries. We don't want app builders to have to take care of propagating internal props.

See https://github.com/meteoric/meteor-ionic/tree/master/components/ionActionSheet and http://ionicframework.com/docs/api/service/$ionicActionSheet/

Like the angular version
[http://ionicframework.com/docs/api/directive/ionSideMenu/]

<IonSideMenu width={myWidth}>
</IonSideMenu>

Would be nice if react 15 is also supported.
Thanks!

Warnings in console with latests react-dom

Anything we need to do to fix it from here?

Unknown props customClasses, leftButton, rightButton, history, location, params, route, routeParams, routes, pageList, isFetching, navigate on tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in span (created by ReactTransitionGroup)
in ReactTransitionGroup (created by ReactCSSTransitionGroup)
in ReactCSSTransitionGroup (created by RouteCSSTransitionGroup)
in RouteCSSTransitionGroup (created by IonNavBar)
in div (created by IonNavBar)
in IonNavBar (created by Layout)
in div (created by IonSideMenuContent)
in IonSideMenuContent (created by Layout)
in div (created by IonSideMenuContainer)
in IonSideMenuContainer (created by Layout)
in Layout (created by Connect(Layout))
in Connect(Layout) (created by RouterContext)
in div (created by IonBody)
in IonBody (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router (created by AppRouter)
in AppRouter
in Provider

https://github.com/facebook/react/releases

I've been working on an app and thought this animation would be nice but it doesn't appear to be available.

http://ionicframework.com/docs/api/directive/navDirection/

And you wouldn't necessarily need to be constrained by the Ionic transitions. You could even have other values be settable to ionNavDirection. For instance something like https://davidwalsh.name/demo/css-flip.php

Also, I would take a crack a making it happen but that layer of UI I no experience. In playing around I was able to get something working but it just doesn't look very good and complete. Anyway, just leaving this issue here to track it for something to get done down the road..

Hi,

I am just figuring out how to build a simple meteor+ionic+react app with your package.
It's my first ionic as well as react app so far.
Looking at the kitchen demo I am asking my self how I could call an event handler (save data) located in my page component after a user clicks a IonNavBar Button ("save").
The data is located in the page component so I think the save handler should be located there as well.
However, the NavBarButton is in the layout component. Writing my data save logic in the layout component feels wrong and moving the IonNavBar Button into the page as well.

What would you do?
Best,
Carsten

Would be interested in popping in to ask questions and potentially contribute to the community and code, a chat room would help with that.

In ios, when you focus on a input, the page scrolls.

In android, when you focus on a input, it shows you a white screen and you can't see what are you typing.

IonContent updates the class it will apply to its <div> via the context globals coming from IonBody (ie. this.context.ionHasSubHeaderetc.). These globals are set by the respective components (ie. IonSubHeaderBar etc.) via the ionUpdateHasX context global. This paradigm is good in theory however I think it is leading to some issues.

I have an app (https://github.com/johnslemmer/todos-reactionic-meteor) that navigates between pages that have subheader bars. What I'm seeing is that when I'm going from page A to B (both of which have subheader bars) the componentWillMount method gets called on page B (which calls to ionUpdateHasX setting subheader to true) and then the componentWillUnmount method gets called on page A (which sets subheader to false). Then when page B finally renders some of the content is not visible under the sub header bar because class="has-subheader" is not added to the <div>.

A few questions for discussion:

• Is this recreateable by someone else? I'm simultaneously working on upgrading to React 15 and want to make sure that isn't causing this issue. I don't think it is but it is worth checking.
• Is this more of a React issue that willUnmount and willMount are being called in an incorrect order? I tried googling around for this and didn't really find good info.
• Or is this more of a design paradigm that needs changing in reactionic itself? Like headers and footers being passed as properties to IonContent so it can just know then when it renders whether those things are present (I don't love this idea because I really do like the elegance of things being save at the IonBody level). Added bonus if this gets implemented then IonContent will be usable multiple times within an app (like both for the main content and maybe side menu content).
• Does this also call into question that context shouldn't be used as much as it is in reactionic. I read this https://facebook.github.io/react/docs/context.html#when-not-to-use-context and thought that maybe more things should be passed around in props where it makes sense. It seems messier but probably less buggy.
• Or should my example app change to have intermediate Layout component and another layer in my react router routes so that the subheader doesn't get re-rendered if you are staying on the same style of page (ie. a page that has a subheader). I think this is why we aren't seeing the same issue with has-header.

NOTE: I'm assuming this applies to footer and subfooter as well. Maybe even tabs too.

I observed index page will slip in iOS when index page is not list page.
The issue also can be reproduced in Kitchen sink demo.

//brevity
<IonSideMenus>
  <IonSideMenu side="left"></IonSideMenu>
</IonSideMenus>
<IonSideMenuContent/>

I am not including the right side menu, but I can still drag the main view content from the right, revealing an empty screen. Anyone else got that problem?

I'd like to suggest a future upgrade to full ES6 and to class foo extends React.Component from var foo = React.createClass at some time in the future.

"Facebook does suggest the future removal of React.createClass completely in favour of ES6 classes. For now, use what makes sense, they’re both just syntax with different semantics that do the same thing - they’re both classes!"
https://toddmotto.com/react-create-class-versus-component/

Hi,

I'm trying to use the IonSideNav set of components, however, I'm getting the above error when I try to use it.

Here's an example of the code from my App component (let me know if I need to include anything else):

    <IonBody location={this.props.location} >
        <IonSideMenuContainer>
          <IonSideMenus>
            <IonSideMenu>...</IonSideMenu>
          </IonSideMenus>
          <IonSideMenuContent>
              <IonNavBar customClasses="bar-light"
                 title="My App"
                 leftButton={this.navButton()} />
               <IonNavView>
                <IonView>
                  {this.props.children}
                </IonView>
              </IonNavView>
          </IonSideMenuContent>
        </IonSideMenuContainer>
      </IonBody>

It would be very helpful to have a simple example of the correct way to load data.
I was able to use react-komposer and everything was fine until I tried to add an ionShowLoading
Although what I did works ... the console show react to be very unhappy.
warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved tocomponentWillMount.

Here is what my container looks like.

import { composeWithTracker } from 'react-komposer';
import { Data } from '/lib/imports/collection';
import  About  from '../components/about.jsx';
import theApp from '/client/imports/theApp';

import { Meteor } from 'meteor/meteor';
var showing = false;

const composer = (props, onReady) => {
  const handleData = Meteor.subscribe('theData');
  if (handleData.ready()) {
    const data = Data.find({}).fetch();
    if(showing){
       theApp.ionShowLoading(false)
       showing = false;
    }
    onReady(null, { props, data });
  } else {
      if(!showing){
        theApp.ionShowLoading(true, {
                                backdrop:true,
                                delay:0,
                                customTemplate:null
                                });
       showing = true;
  }
  }
};

export default composeWithTracker(composer)(About);

Just like how they do it here:
http://ionicframework.com/docs/api/directive/ionTabs/

I'm curious how to fit this in to get animations, using your example code I'm finding it troublesome to get it all together. Any suggestions?

See meteoric/meteor-ionic#378

Has anyone successfully done this with the Flow Router?

{ path:'/clubs/:clubId', component:Clubview, title:'Clubvi'}

lead to

IonicLayout.jsx:60Uncaught TypeError: Cannot read property 'headerTitle' of undefined

:/

When you click on an ion-item, it becomes grey for a moment as a click response, as you can see in the ionic docs . I think clicking on a list item without that sort of feedback feels strange. Sometimes you can't even be sure which exact item you clicked on. This should therefore be implemented.

Could we get a mention in the Readme for this:
https://github.com/studiointeract/accounts-ionic

I keep getting these notices in the console log,

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

I`m so appreciate your this work.

I have a question about route, for looking kitchensink demo, I noticed every route switch no request, can i use lazyload to load other pages?

Thank you.

Ionic uses this file to apply the drag to the checkbox.
https://github.com/driftyco/ionic/blob/master/js/views/toggleView.js

And this file to detect the gestures.
https://github.com/driftyco/ionic/blob/master/js/utils/gestures.js

Hey,
I'm trying to overwrite the scss color vars via. the app.scss before the import, but this doesn't seem to work. Is there any way to get this working?
I had been doing that in the past with meteoric.

https://github.com/driftyco/ionic/blob/master/scss/_variables.scss

See https://github.com/meteoric/meteor-ionic/tree/master/components/ionPopover and http://ionicframework.com/docs/api/service/$ionicPopover/

Noticed this.props.history in the guide

var backButton = (
  <IonNavBackButton icon="ion-ios-arrow-back"
                    color=""
                    type="clear"
                    history={this.props.history}
                    customClasses="button-stage"
  />
);

What does that do? Not seeing any reference in the src.

Finish the Guide

Next to the demo kitchen sink app it would be cool to have one or more example apps. Some ideas:

• Todo app
• Contacts
• Product hunt
• Other ideas?

If anyone would like to give it a shot, that'd be awesome!

See https://github.com/meteoric/meteor-ionic/tree/master/components/ionList and http://ionicframework.com/docs/api/directive/ionList/

instead of going back in the iframe only. I can't reproduce it. If someone can, please let me know.

Hi,

I was just debugging a little bit, because my header and tabs are missing the has(Header|Tabs)* classes. When I look into the IonContent.js this depends on the context.
('has-header': this.context.ionHasHeader)
However, this context is never (nowhere) set as far as I can see. E.g. in IonNavBar component mount there is the:
this.context.ionUpdateHasX('ionHasHeader', true);
Behind this there is a function in IonBody that just sets the state in IonBody:
this.setState({ [hasX]: value });

In the end the state of IonBody seems correct, however the context is never provided in any child component.

Could this be a bug?
Best,
Carsten

Not in meteoric, but it's helpful to implement it as a component with state, see http://ionicframework.com/docs/components/#select

Create a branch and use sccs files from https://github.com/driftyco/ionic/tree/2.0/ionic to get a feel for how difficult this might be.

In React context does not always get filtered down to children if it isn't tied to a change in state or properties. This can potentially lead to bugs within reactionic because context is used heavily to pass around information about the state of headers, footers, etc.

Read this and this

One example of this can be found with this code. When the initial login screen comes up, and you do a hard refresh the has-header context information will be inaccurate and the content will slide behind the header.

I believe this issue will also show itself more when there are components that return false from React's componentShouldUpdate between IonBody and the component that wants to access context. I believe MeteorDataContainer (the component created when createContainer is called from Meteor's react-meteor-data) is one of those components that will cause this issue to be seen more often.

I'm not sure of a solution, but wanted to track the bug. I've made some attempts to try and address this, but it didn't quite work.

In general, it would be much better just passing down props, i.e. onClick, className, etc...