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