Hi! In the search for an alternative to ionic, we've recently stumbled upon Touchstone. I must say, I'm impressed and would really like to embrace React by using Touchstone in our mobile apps.

However, for actually using Touchstone in future production apps, it's important for us to know if you guys are planning to put more work into this. So, is there a roadmap or are there perhaps already some projected timelines?

Furthermore, the only thing we can see here from the outside is the activity on these repos. Are you internally working on Touchstone in a private repo?

Is this framework responsive such that both tablet and mobile designs can be accounted for in the same app, with media queries governing the necessary layout changes? This is where Ionic failed imo.

Hey @JedWatson,

I just wanted to confirm that this.views is meant to be exposed on the App object? See here.

I refactored that part of the code because we had 3 different definitions of views in the scope.

I wanted to use UI.LabelTextArea with react-form-data, but that needs that all input fields have names. That possibility was not added to UI.LabelTextArea.

Alternative solution would also be to pass all attributes on UI.LabelTextArea to the textarea itself via spread.

Any preferences?

PS: I also removed not used proptypes.

1. Add DatePicker, DatePickerPopup components.
2. Add LabelValue component, used as the field of DatePickerPopup in a form.
3. Improve Popup component: now it could be arbitrary width.

We handle tap events with react-tappable, which fires an event after detecting a touchstart / touchend combination. Sometimes, WebKit also fires a click event after 300ms. This is automatically blocked from firing additional tap events on other tappable elements.

Unfortunately other components that natively respond to the click event may still do so during a view transition, incorrectly focusing a field or causing other unexpected behaviour.

Probably the best workaround for this is to display a blocking element (transparent div) over the entire UI during transitions that captures the subsequent click event, although I'd love to hear any other ideas on how we can handle this.

Just submitting the work I had already started few days ago, also took the change to move the dependencies into peerDependencies so we don't have to force host projects into a specific react version.

Upgrade went smoothly as described by #95 already, there isn't much differences between both, but I believe this one has less changes.

There is still warnings with ReactCSSTransitionGroup Failed propType: transitionEnterTimeout wasn't supplied to ReactCSSTransitionGroup that couldn't be fixed because it breaks the animations/transitions.

The touchstone starter and tasks projects need also to be updated to work correctly after this change.

fixes #89 #95

Thanks

When accessing demo.touchstonejs.io using safari on iPhone, there is no transition when clicking a list item to show the detail view. It works well when back from detail to list.

Hi,

I am trying to build the new version of my app with touchstone and I am loving it so far. I am completely aware that it is still in a very early stage. I wanted to swiper.js in order to build a subnavigation for on of my views. Unfortunately the swiper.js containers do not seem to work with the Flexlayout.

Is there a plan to build a swiper component for touchstone itself? If not I am willing to build one, based on swiper.js if others are interested and somebody can lead me into the right direction.

Here is my current approach:

module.exports = React.createClass({
    displayName: "swiper_view",
    getInitialState: function(){
        return {
            activeSlide: 0
        }
    },
    componentDidMount: function() {
        var self = this;
        this.swiper = new Swiper (this.refs.swiper.getDOMNode(), {
            direction: 'horizontal',
            loop: false,
            onSlideChangeEnd: self._onSlideChangeEnd
        });
    },
    _onSlideChangeEnd: function(swiper){
       this.setState({activeSlide: swiper.activeIndex});
    },
    _handleToggle: function(slide){
        this.swiper.slideTo(slide);
    },
    render: function(){
        return (
            <UI.FlexLayout className={this.props.viewClassName}>
                <UI.Headerbar label="Swiper Container" />
                <UI.Headerbar height="36px" className="Subheader">
                    <UI.Toggle value={this.state.activeSlide} onChange={this._handleToggle} options={[
                        { label: 'Slide 1', value: 0 },
                        { label: 'Slide 2', value: 1 },
                        { label: 'Slide 3', value: 2 }
                    ]} />
                </UI.Headerbar>
                <UI.FlexBlock grow>
                    <div className="swiper-container" ref="swiper">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <UI.FlexBlock scrollable grow >
                                    This is the main container that should show content and be scrollable!
                                    Content can be very long!
                                </UI.FlexBlock>
                            </div>
                            <div className="swiper-slide">
                                <UI.FlexBlock scrollable grow >
                                    This is the content of the second slide, which can be reached by clicking on the
                                    subnavigation or swiping on the screen.
                                    <br /><br /> <br /><br /><br /> <br />
                                    Now more content
                                    <br /><br /> <br /><br /><br /> <br />
                                    And more!
                                </UI.FlexBlock>
                            </div>
                            <div className="swiper-slide">
                                <UI.FlexBlock scrollable grow >
                                    Last Slide
                                </UI.FlexBlock>
                            </div>
                        </div>
                    </div>
                   <UI.Footerbar height="50px" type="default">
                      <UI.FooterbarButton icon="ion-trophy" disabled />
                      <UI.FooterbarButton icon="ion-earth" />
                      <UI.FooterbarButton icon="ion-bag" />
                      <UI.FooterbarButton icon="ion-ios7-person" />
                      <UI.FooterbarButton icon="ion-more" />
                  </UI.Footerbar>
                </UI.FlexBlock>
            </UI.FlexLayout>
        );
    }
});

The Problem with it is, that within the different slides, the scrolling flexbox is not working. Even if there is more content I cant scroll, although the scrollbar is visible.

I hope you don't mind me using your issue list as a placeholder for the things I'd like to see! Regarding forms there needs to be:

• Textfield
• Textarea
• Checkbox/toggle
• Select & multiselect
• Date and Time
• Disabled/readonly states

Is this on your hitlist? Would be good to see a roadmap on the wiki too. I'll be free in the new year to spend some time on this I think and having a list of priorities might be handy.

Hi, has anyone played with Touchstone on iPad much yet? Ive noticed an ugly artefact when using native keyboards such that after they slide away, content becomes clipped (about half a screens worth) and doesn't redraw until you touch the screen/change orientation etc.

I'll investigate the issue some more but wanted to mention it now incase it's a known issue.

To reproduce; load the touchstone sample app onto an iPad (mine was a 4th Gen - late 2012), go to the 'Form Fields' section and click an input, click on the screen to make the keyboard go away, clipping bug should be visible.

Hello touchstonejs team,

I''d like to report you an error when I compiled the starter project and then run it in my Android phone (LG G3 Android 5.0). I noticed this following error in my Chrome Developer inspect window, when my phone running the app: This error prevents the app from changing its UI elements when receiving touches ( such as displaying other view when I touched Forms, Control, Transitions tab menu).

System Environment:

• Build Machine: PC run Linux Ubuntu 16.04
• Cordova's version: 6.3.1
• Phone: LG G3 runs Android 5.0

As a user, when there is a popup open, it feels like I should be able to "abort" the popup by tapping in outside the popup (the backdrop). For some popups, this may be the right behaviour, and for some other popups (which want to force the user to take some action before moving on) this may not be the right behaviour.

For example, when using the DatePickerPopup, it really feels like I should be able to tap the backdrop to express "I don't want to pick a different date - the currently selected date is fine and I don't want to be in this popup". Every time I'm testing my app, I feel the urge to click outside the popup to cancel the date selection and keep the current date, but after that fails to have the desired effect I have to click back on the currently selected date to close the popup. But for a popup where the user is asked to save the current data before quitting, or quit and lose all unsaved data, you really want the user to pick one of the available options instead of "aborting" - a somewhat ambiguous outcome.

Since closing the popup when tapping the backdrop is desired behaviour in some cases, but not in others, it seems like the best course of action is to make it Tappable, but allow the developer to bind (or not bind) a function to the onTap of the Tappable, by passing in the function as some appropriately named prop of the Popup.

Would a PR for such a change be well-received? If so, what should the name of the new Popup prop be - onTapBackdrop?

The demo on http://touchstonejs.io/ (not http://demo.touchstonejs.io/ which I guess is not up to date) is completely broken. This is what I see in the console:

Download the React DevTools for a better development experience: https://fb.me/react-devtools
site.js:22633 Warning: Unknown DOM property frameborder. Did you mean frameBorder?
site.js:22633 Warning: Unknown DOM property novalidate. Did you mean noValidate?
touchstonejs.github.io/:51 GET http://touchstonejs.github.io/touchstonejs-starter/cordova.js 
app.js:7167 Uncaught TypeError: Cannot set property 'id' of undefined(anonymous function) @ app.js:7167(anonymous function) @ app.js:7166(anonymous function) @ app.js:1359(anonymous function) @ app.js:2427loadFunc @ app.js:2299readystatechange @ app.js:2229
app.js:3797 Link to "tabs:list-complex" using transition "show-from-right" with props  undefined
app.js:7828 Uncaught TypeError: Cannot read property 'category' of undefined

Thank you!

I can't update my React version because React has changed its major version (0.14.8 to 15.0.1), which doesn't match the react peerDependency spec: "^0.14.0".

For example, if I wanted to use jQuery, loDash, or Underscore. I think the standard way to include them would be to ..

npm install --save jquery npm install --save underscore npm install --save lodash

Which would add it to the package.json . But for some reason, after doing this, it still isn't accessible.

Out of curiosity, is there something within TouchStoneJS that is overriding this?

Here is my related SO post : http://stackoverflow.com/questions/36405506/how-can-i-properly-require-a-library-via-require-npm