Tags: winjs/react-winjs
Tags
ReactWinJS components now have prop types
Compatible with WinJS 4.0.0-preview
The primary change is that most ReactWinJS props now have a prop type
associated with them so warnings will be printed when passing the wrong
data type to a prop.
Other changes:
- Bug fix: AutoSuggestBox and SearchBox now support onResultSuggestionChosen
ce84b61
- ReactWinJS.reactRenderer was enhanced to work in more scenarios
252cb38
Also, 92fb0a3 exposed experimental APIs for wrapping
your own WinJS-style controls as React components:
- defineControl: function for wrapping a WinJS-style control as a React component
- PropHandlers: Each prop handler describes how a React prop maps onto a WinJS control
(e.g. is it a property? is it an event?)
- defaultPropHandlers: An object representing the prop handlers for props that every
ReactWinJS component supports (e.g. className, style)
Here's an example of what it would look like to use these APIs to wrap the WinJS.UI.SplitView
as a React component (MySplitView):
var MySplitView = ReactWinJS.defineControl({
displayName: "MySplitView",
winjsControl: WinJS.UI.SplitView,
propHandlers: merge(ReactWinJS.defaultPropHandlers, {
hiddenDisplayMode: ReactWinJS.PropHandlers.property(React.PropTypes.oneOf(["inline", "none"])),
onAfterHide: ReactWinJS.PropHandlers.event,
onAfterShow: ReactWinJS.PropHandlers.event,
onBeforeHide: ReactWinJS.PropHandlers.event,
onBeforeShow: ReactWinJS.PropHandlers.event,
paneHidden: ReactWinJS.PropHandlers.property(React.PropTypes.bool),
panePlacement: ReactWinJS.PropHandlers.property(React.PropTypes.oneOf(["bottom", "left", "right", "top"])),
shownDisplayMode: ReactWinJS.PropHandlers.property(React.PropTypes.oneOf(["inline", "overlay"])),
paneComponent: ReactWinJS.PropHandlers.mountTo(function (winjsComponent) {
return winjsComponent.winControl.paneElement;
}),
contentComponent: ReactWinJS.PropHandlers.mountTo(function (winjsComponent) {
return winjsComponent.winControl.contentElement;
})
})
});
MySplitView is equivalent to ReactWinJS.SplitView.
Bug fixes and enhanced style prop
Compatible with WinJS 4.0.0-preview
In addition to accepting strings, the style prop on react-winjs
components is now intelligent about its handling of numbers
and falsy values (similar to React's handling of the style prop).
- Numbers. In general, "px" is appended to the number. For style
properties which are unitless, the number is left as is.
- Falsy values. Falsy values (except 0) are treated as the
empty string thus clearing the inline style property.
- Fixed issue when BackButton causes the page to rerender
7de4f08
- Fixed #4: ListView broken when rendered inside of a
Hub.Section