When specifying a handler on a React DOM component via its props, the handler is actually executed on the document, not on the actual element itself. Since the ContentDialog eats all input events, the input event never makes it to the document and therefore no input events can be handled.

Hey All,

Any chance we can get some of the other controls in react-winjs?

• MediaPlayer
• ScrollViewer

Would be great if they can be included, and possibly update the documentation with a sample usage?

Thoughts?

I'm trying the following:

<ReactWinJS.SplitViewPaneToggle
          aria-controls="foo"
          aria-label="Menu"
          paneOpened={paneOpened}
          onInvoked={onPaneToggle} />

And the resulting DOM node looks like this:

<button data-reactid=".0.0.1" class="win-splitviewpanetoggle win-disposable" type="button" aria-expanded="false" aria-controls="foo"></button>

The property aria-label is missing, which means I have no way of providing a label for the button for accessibility.

The Live Component Library link leads to a broken page.

Hi,

I am facing a problem with Winjs and React Router when using the SplitView component.

Those are my components:

<Router>
  <App />
<Router>

``` app.js
<MySplitView>
  <Route exact path="/" component={Home}/>
</MySplitView>

```mySplitView.js
<Winjs.SplitView
  style={{height: "calc(100% - 48px)"}}
  paneComponent={<div>Navigation</div>}
  contentComponent={<div>{this.props.children}</div>}
  onAfterClose={this.handleAfterClose}
  closedDisplayMode="inline"
  openedDisplayMode="inline"
  paneOpened={this.state.paneOpened}/>

The error message is:
"TypeError: _ref2 is undefined
computeMatch"

And when using the `Switch` component from `react-router' I get a diffrent error regarding the context:
"TypeError: this.context.router is undefined"

So, I suggest that the SplitView component does not initialize the context correctly. 

Ported from rigdern/react-winjs#2. @joewood said:

It's very common for React based projects to use a commonjs build system, such as browserify or webpack. WinJS would be more efficient to adopt if it had a modular build system that supported commonjs out of the box. This would minimize the size cost of incorporating all of WinJS, when only one or two components use it. Also see winjs/winjs#571.

Some suggestions how this would work:

• Each React component defined in a separate file, using defineControl etc...
• Each react-winjs component defined using commonjs and dependent only on the winjs modules that it uses
• Using webpack allows incorporation of CSS and will automatically convert AMD modules
• Using browserify would mean needing to use deamdify into the build to convert AMD->CommonJS

Appbar renders as empty in the latest build. The underlying .winControl gets the commands but they aren't visible.

I only need the SemanticZoom feature in my react app. I am handling the list rendering myself, so I dont' need WinJS.Binding.List (imho it has no place in react apps anyway).
So I wonder if the functionality of the SemanticZoom could be easily factored out from WinJS as a pure react component in this way:

<SemanticZoom>
  <div className="zoomedInDiv"></div>
  <div className="zoomedOutDiv"></div>
</SemanticZoom>

I remember, the SemanticZoom interface was pretty simple actually.

Getting my head around react was not that difficult. However I struggle a bit how to write a react app based on the single page WinJS app template.
I guess the navigator would be another component. And every page would be a component too or an app again?
Any ideas?

From what I saw there are some example projects which are using webpack. I successfully compiled and run the code but inside a browser.
How can I use react-winjs but compiled for UWP ?
Thank you

Proposed new line:

var React = require('react/addons');

var WinJS = WinJS || require('winjs').WinJS;

var ReactWinJS = {};

Can you provide some guidelines on compiling the react-winjs JSX files to native JavaScript using gulp? I'm using ASP.NET MVC6 application created in Visual Studio 2015.

Hi,

I noticed that while here in the code you have updated to use the latest react (I did not find any React.findDOMNode calls in react-winjs.js) the package on npm is old and still has calls which are icompatible with the lastest version of react.

The package was last published seven months ago. https://www.npmjs.com/package/react-winjs Could you please update the package and publish a new version ASAP?

In the code sample for flyout, it reads:

...
// In an event handler: 
this.refs.flyout.show(anchorElement);

It's missing winControl:

// In an event handler:
this.refs.flyout.winControl.show(anchorElement);

Can any of the maintainers clarify whether this project is maintained? It hasn't been updated to React 0.14, and it has pending pull requests that have been sitting there for months...

What I mean by that is that all the BindingList stuff could go. Just plain react components

<SemanticZoom>
  <ListView items={this.props.zoomedInItems}/>
  <FlipView items={this.props.zoomedOutItems}/>
</SemanticZoom>

<ListView items={}>
  <MyTemplateRenderer {...props}/>
</ListView>

<Hub>
  <HubSection header={<MyHubHeader/>}/>
  <HubSection header="2nd seciont"/>
</Hub>

Any plans?

The react-winjs need a facelift. The examples and showcase look very ugly for what a decent UI framework like WinJS can do. Look at Material Design and how neatly they have presented all the controls and most importantly the beauty of those controls.

This is how the showcase looks on my browser:

In scenarios like ListView when virtualization is enabled, there will be two different virtualization techniques at work, winjs trying to re-use the element and react too, how is this case handled ?

The app bar hosts a variety of stuff, allows animations and things to happen, maybe the app bar class can be like a dialog ? which you initialize once and then anything you write in the app-bar is actually just updating the one single global copy mounted in dom ? this will allow awesome animations and more composability on < windows 10 devices.

I am developing the app with ES6, so I need to use 0.13.x (as 0.12.x does not support ES6). And also some dependencies, such as react-router does not support 0.12.x in it package.json and it causes problems:

npm ERR! peerinvalid The package react does not satisfy its siblings' peerDepend
encies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer [email protected] wants react@^0.12.2

To resolve this issue, as @fmpublic suggested, we should use range for "react" instead. So everyone is happy 💃 .

In winjs, with PageControl, there is a page transition animation, which looks really nice. Is there any way to imply it with react-winjs?

Hey @jdalton,

Ok silly question - especially since my username is behind all of the .d.ts nuget packages under*.Typings.DefinitelyTyped, but how can I get a specific version of the winjs.d.ts to run it through the winjs-control-apis tool?

I think we need to make an alternative solution to use data-win-res with React.
Actually, we can use WinJS.Resource.getString('string_name').value

(<p>{WinJS.Resource.getString('string_name').value}</p>)

But I think it's quite long and not straight-forward. If you guys agree, I think we can make it shorter for react-winjs, like this:

(<p>ReactWinJS.getString('string_name')}</p>)

What do you think?

Ported from rigdern/react-winjs#1. @joewood said:

I've been looking at react-native, to see how it would be incorporated into WinRT.
In the iOS code, the ListView component (which is an iOS TableView) has a renderRow property, which points to a function that returns the a virtual DOM element for the supplied row data.
Could the WinJS ListView class do the same thing? This will mean only materializing the virtual DOM if the data has changed (or if it's being mounted).

When try to install react via npm and build it with webpack and take React via require in jsx component it transpiled in js but in win10 my React is undefined.

Hey @AlbertKn,

Why was the WIKI documentation page removed?

Hey All,

First I'd like to say thanks for creating this. While I'm not particularly excited with the "magic" I don't yet understand on the layers of abstraction added, I am very interested in how much easier it is to reason about building WinJS apps using React...

I am struggling to debug the following scenario.

I've created a SearchHub component (think of this component as very similar to the example search movies http://winjs.github.io/react-winjs/examples/movies/index.html component).

The biggest difference is I'm trying to place it inside of a Pivot control.

When the app first loads up and I search, it fills out the ListView great. I click on the item to navigate to the details view. When I come back the ListView is not re-rendering and is blank...

My first issue was due to React state problem, but I've worked out the state correctly. If I use the SearchHub component by itself it correctly re-renders the ListView on back navigation. However once placed inside a PivotItem back navigation does not appear to correctly render the ListView.

Correctly renders search/listView on back navigation from details page

return (
                // <Pivot style={pivotStyle}>
                //     <Pivot.Item key="search" header="Search">
                        <SearchHub search={this.state.search} />
                //     </Pivot.Item>
                //     <Pivot.Item key="featured" header="Featured">
                //         <FeaturedHub />
                //     </Pivot.Item>
                // </Pivot>
    }

Does NOT render search/listView on back navigation from details page

return (
                <Pivot style={pivotStyle}>
                    <Pivot.Item key="search" header="Search">
                        <SearchHub search={this.state.search} />
                    </Pivot.Item>
                    <Pivot.Item key="featured" header="Featured">
                        <FeaturedHub />
                    </Pivot.Item>
                </Pivot>
    }

Any thoughts or tips on how to debug this?

I appreciate some guidelines on integrating typescript + winjs + react and a gulp package to compile the TSX files (typescript files for ReactJS) to JavaScript.

Hey,

Just an FYI: I was originally developing an app using JSPM and this library, but yesterday on NPM Facebook published version 0.14 which introduces some breaking changes...

https://www.npmjs.com/package/react
https://www.npmjs.com/package/react-dom

I was able to work around my broken app by adjusting JSPM config to stay with the React 0.13.

I'm not sure how the migration path would look on this project, but wanted to let you guys know.

Love it so far :)

If I try something like the given example

        <ReactWinJS.Hub
            style={{height: "500px"}}
            onHeaderInvoked={this.handleHeaderInvoked}>

            <ReactWinJS.Hub.Section key="sectionC" header="The tail">
                <div>Because it's only purpose is to show how to create a hub.</div>
            </ReactWinJS.Hub.Section>
        </ReactWinJS.Hub>

everything is great.

However, if I try to use a <ReactWinJS.ListView> instead of the

                    this._batchingViewUpdates = Promise.any([this._batchingViewUpdatesSignal.promise, Scheduler.schedulePromiseHigh(null, "WinJS.UI.ListView._updateView")]).then(function () {
                        if (that._isZombie()) { return; }

componentDidMount() {
    this.hub = new WinJS.UI.Hub(this.getDOMNode(), {});
    this.hub.sections = new WinJS.Binding.List(
        [this.props.children]
            .filter(x=>!!x)
            .map(c => {
                let section = new WinJS.UI.HubSection();
                section.isHeaderStatic = true;
                section.header = c.key;
                React.render(c, section.contentElement);
                return section;
            })
    );
},

The above is a screenshot when React Inspector was used in chrome devtools, I'd expect the above to look like

<SplitView>
    <Pane>...</Pane>
    <Content>
        <AppCanvas>
           <Locations>
              <Location>
                  <Pivot>
                    <Pivot.Item> 
                       <h1>Hello World</h1>
                    </Pivot.Item>
                  </Pivot>
              </Location
           </Locations>
        </AppCanvas>
    </Content>
</SplitView>

I wonder why most things are uprooted and rendered on top level instead of the react way ?

Can it even be done ?
I tried to use this as the following.

class PouchDBDataSource{
  constructor(database, queryOptions){
    this._queryOptions = queryOptions;
    this._database     = database;
  } 

  itemsFromIndex(requestIndex, countBefore, countAfter){
    let offset = requestIndex - countBefore;
    let limit  = (countAfter - countBefore);
    let preparedQuery = _.assign({
      limit: limit,
      skip : offset
    }, this._queryOptions);
    console.log(preparedQuery);
    return this._database.query('contact_index/by_name', preparedQuery)
      .then(dbResultToRenderableArray, logErrorAndReturnArray);
  }

  getCount(){
    console.log("Count called");
    return Promise.resolve(312); // hardcoded atm.
  }
};

// and then injected it like 
let dataSource = new WinJS.UI.VirtualizedDataSource( new PouchDBDataSource( someDb, {
  include_docs: true
});

<ListView 
   itemRenderer: someRenderer,
   itemDataSource: dataSource,
   layout: {{ type: WinJS.UI.ListView }}
/>

Doesnt seem to work for me, no errors logged (nothing happened at all). Trying a static list worked just fine.