microsoft
/
react-native-windows
зеркало из https://github.com/microsoft/react-native-windows.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Hook up some basic formatting configuration for vscode (#2655) 

* Hook up some basic formatting configuration for vscode

* Replace tslint with eslint

* Format on save

* Fix a bunch of eslint errors

* Dont run lint on already build files

* lint now enforces LF to match community
This commit is contained in:
acoates-ms 2019-07-01 12:38:12 -07:00 коммит произвёл GitHub
Родитель 572092597a
Коммит 388743e157
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
59 изменённых файлов: 2938 добавлений и 12199 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

87
.clang-format Normal file
Просмотреть файл

@ -0,0 +1,87 @@
---
AccessModifierOffset: -1
AlignAfterOpenBracket: AlwaysBreak
AlignConsecutiveAssignments: false
AlignConsecutiveDeclarations: false
AlignEscapedNewlinesLeft: true
AlignOperands: false
AlignTrailingComments: false
AllowAllParametersOfDeclarationOnNextLine: false
AllowShortBlocksOnASingleLine: false
AllowShortCaseLabelsOnASingleLine: false
AllowShortFunctionsOnASingleLine: Empty
AllowShortIfStatementsOnASingleLine: false
AllowShortLoopsOnASingleLine: false
AlwaysBreakAfterReturnType: None
AlwaysBreakBeforeMultilineStrings: true
AlwaysBreakTemplateDeclarations: true
BinPackArguments: false
BinPackParameters: false
BraceWrapping:
AfterClass: false
AfterControlStatement: false
AfterEnum: false
AfterFunction: false
AfterNamespace: false
AfterObjCDeclaration: false
AfterStruct: false
AfterUnion: false
BeforeCatch: false
BeforeElse: false
IndentBraces: false
BreakBeforeBinaryOperators: None
BreakBeforeBraces: Attach
BreakBeforeTernaryOperators: true
BreakConstructorInitializersBeforeComma: false
BreakAfterJavaFieldAnnotations: false
BreakStringLiterals: false
ColumnLimit: 80
CommentPragmas: '^ IWYU pragma:'
ConstructorInitializerAllOnOneLineOrOnePerLine: true
ConstructorInitializerIndentWidth: 4
ContinuationIndentWidth: 4
Cpp11BracedListStyle: true
DerivePointerAlignment: false
DisableFormat: false
ForEachMacros: [ FOR_EACH_RANGE, FOR_EACH, ]
IncludeCategories:
- Regex: '^<.*\.h(pp)?>'
Priority: 1
- Regex: '^<.*'
Priority: 2
- Regex: '.*'
Priority: 3
IndentCaseLabels: true
IndentWidth: 2
IndentWrappedFunctionNames: false
KeepEmptyLinesAtTheStartOfBlocks: false
MacroBlockBegin: ''
MacroBlockEnd: ''
MaxEmptyLinesToKeep: 1
NamespaceIndentation: None
ObjCBlockIndentWidth: 2
ObjCSpaceAfterProperty: true
ObjCSpaceBeforeProtocolList: true
PenaltyBreakBeforeFirstCallParameter: 1
PenaltyBreakComment: 300
PenaltyBreakFirstLessLess: 120
PenaltyBreakString: 1000
PenaltyExcessCharacter: 1000000
PenaltyReturnTypeOnItsOwnLine: 200
PointerAlignment: Right
ReflowComments: true
SortIncludes: true
SpaceAfterCStyleCast: false
SpaceBeforeAssignmentOperators: true
SpaceBeforeParens: ControlStatements
SpaceInEmptyParentheses: false
SpacesBeforeTrailingComments: 1
SpacesInAngles: false
SpacesInContainerLiterals: true
SpacesInCStyleCastParentheses: false
SpacesInParentheses: false
SpacesInSquareBrackets: false
Standard: Cpp11
TabWidth: 8
UseTab: Never
...

4
.gitattributes поставляемый
Просмотреть файл

@ -27,6 +27,10 @@
*.props text eol=crlf
*.filters text eol=crlf
*.js text eol=lf
*.jsx text eol=lf
*.ts text eol=lf
*.tsx text eol=lf
*.ps1 text eol=lf
.editorconfig text eol=lf
.gitattributes text eol=lf

1
.gitignore поставляемый
Просмотреть файл

@ -118,7 +118,6 @@ packages/
#Other files
*.DotSettings
.vs/
.vscode/
*project.lock.json
jsconfig.json
package-lock.json

7
.prettierrc Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"requirePragma": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": false,
"jsxBracketSameLine": true
}

7
.vscode/extensions.json поставляемый Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"recommendations": [
"xaver.clang-format",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint"
]
}

43
.vscode/settings.json поставляемый Normal file
Просмотреть файл

@ -0,0 +1,43 @@
{
"files.exclude": {
"**/.git": true
},
"search.exclude": {
"**/node_modules": true,
"**/lib": true,
"**/dist": true
},
"editor.formatOnSave": true,
// turn off formatting for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
"eslint.packageManager": "yarn",
"eslint.autoFixOnSave": true,
"eslint.enable": true,
"eslint.validate": [
{"language": "javascript", "autoFix": true},
{"language": "javascriptreact", "autoFix": true},
{"language": "typescript", "autoFix": true},
{"language": "typescriptreact", "autoFix": true}
],
"eslint.options": {
"configFile": "./vnext/.eslintrc.js"
},
// These should run through eslint
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]
}

3
vnext/.eslintignore Normal file
Просмотреть файл

@ -0,0 +1,3 @@
/lib
/local-cli/generator-windows/templates/App.windows.js
/node_modules

5
vnext/.eslintrc.js Normal file
Просмотреть файл

@ -0,0 +1,5 @@
module.exports = {
extends: "@react-native-community",
rules:{
"react-native/no-inline-styles" : 0,
}};

2
vnext/IntegrationTests/DummyTest.js
Просмотреть файл

@ -14,7 +14,7 @@ const {
} = ReactNative;
const {
TestModule
TestModule,
} = ReactNative.NativeModules;
class DummyTest extends React.Component {

49
vnext/IntegrationTests/XHRTest.js
Просмотреть файл

@ -1,19 +1,17 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
'use strict';
const React = require('react');
const ReactNative = require('react-native');
const {
AppRegistry,
View,
} = ReactNative;
const {Alert, AppRegistry, View} = ReactNative;
const {
TestModule
} = ReactNative.NativeModules;
const {TestModule} = ReactNative.NativeModules;
class XHRTest extends React.Component<{}, Object> {
state: Object = {
@ -43,8 +41,10 @@ class XHRTest extends React.Component<{}, Object> {
const onreadystatechange = () => {
if (xhr.readyState === xhr.HEADERS_RECEIVED) {
const contentLength =
parseInt(xhr.getResponseHeader('Content-Length'), 10);
const contentLength = parseInt(
xhr.getResponseHeader('Content-Length'),
10,
);
this.setState({
contentLength,
responseLength: 0,
@ -55,12 +55,6 @@ class XHRTest extends React.Component<{}, Object> {
});
}
};
const onprogress = (event) => {
this.setState({
progressTotal: event.total,
progressLoaded: event.loaded,
});
};
if (this.state.readystateHandler) {
xhr.onreadystatechange = onreadystatechange;
@ -73,23 +67,21 @@ class XHRTest extends React.Component<{}, Object> {
xhr.responseType = 'arraybuffer';
}
xhr.onload = () => {
this.setState({ downloading: false });
this.setState({downloading: false});
if (this.cancelled) {
this.cancelled = false;
return;
}
if (xhr.status === 200) {
let responseType =
`Response is a string, ${xhr.response.length} characters long.`;
let responseType = `Response is a string, ${xhr.response.length} characters long.`;
if (xhr.response instanceof ArrayBuffer) {
responseType =
`Response is an ArrayBuffer, ${xhr.response.byteLength} bytes long.`;
responseType = `Response is an ArrayBuffer, ${xhr.response.byteLength} bytes long.`;
}
Alert.alert('Download complete!', responseType);
} else if (xhr.status !== 0) {
Alert.alert(
'Error',
`Server returned HTTP status of ${xhr.status}: ${xhr.responseText}`
`Server returned HTTP status of ${xhr.status}: ${xhr.responseText}`,
);
} else {
Alert.alert('Error', xhr.responseText);
@ -100,8 +92,8 @@ class XHRTest extends React.Component<{}, Object> {
xhr.setRequestHeader('Accept-Encoding', '');
xhr.send();
this.setState({ downloading: true });
}
this.setState({downloading: true});
};
componentDidMount() {
try {
@ -114,11 +106,8 @@ class XHRTest extends React.Component<{}, Object> {
}
render() {
return (
<View />
);
return <View />;
}
}
AppRegistry.registerComponent('XHRTest', () => XHRTest);

37
vnext/Libraries/Components/AccessibilityInfo/AccessibilityInfo.windesktop.js
Просмотреть файл

@ -1,19 +1,20 @@
// Copyright (c) Facebook, Inc. and its affiliates.
//
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
//
// Portions copyright for react-native-windows:
//
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Portions copyright for react-native-windows:
*
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
'use strict';
var NativeModules = require('NativeModules');
var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
var RCTAccessibilityInfo = NativeModules.AccessibilityInfo;
var TOUCH_EXPLORATION_EVENT = 'touchExplorationDidChange';
type ChangeEventName = $Enum<{
@ -23,7 +24,6 @@ type ChangeEventName = $Enum<{
var _subscriptions = new Map();
var AccessibilityInfo = {
fetch: function(): Promise {
return new Promise((resolve, reject) => {
// TODO Hx: Implement this module.
@ -31,23 +31,23 @@ var AccessibilityInfo = {
});
},
addEventListener: function (
addEventListener: function(
eventName: ChangeEventName,
handler: Function
handler: Function,
): void {
// TODO Hx: Implement this module.
var listener = RCTDeviceEventEmitter.addListener(
TOUCH_EXPLORATION_EVENT,
(enabled) => {
enabled => {
handler(enabled);
}
},
);
_subscriptions.set(handler, listener);
},
removeEventListener: function(
eventName: ChangeEventName,
handler: Function
handler: Function,
): void {
// TODO Hx: Implement this module.
var listener = _subscriptions.get(handler);
@ -57,7 +57,6 @@ var AccessibilityInfo = {
listener.remove();
_subscriptions.delete(handler);
},
};
module.exports = AccessibilityInfo;

2
vnext/Libraries/Components/TextInput/TextInput.uwp.js
Просмотреть файл

@ -452,4 +452,4 @@ const styles = StyleSheet.create({
},
});
module.exports = TextInput;
module.exports = TextInput;

64
vnext/Libraries/Components/WebView/WebView.uwp.js
Просмотреть файл

@ -1,12 +1,16 @@
// Copyright (c) Facebook, Inc. and its affiliates.
//
// This source code is licensed under the MIT license found in the
// LICENSE file in the root directory of this source tree.
//
// Portions copyright for react-native-windows:
//
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Portions copyright for react-native-windows:
*
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
'use strict';
@ -34,7 +38,6 @@ var WebViewState = keyMirror({
* Renders a native WebView.
*/
var WebView = createReactClass({
getInitialState: function() {
return {
viewState: WebViewState.IDLE,
@ -45,7 +48,7 @@ var WebView = createReactClass({
getDefaultProps: function() {
return {
javaScriptEnabled : true,
javaScriptEnabled: true,
};
},
@ -62,17 +65,24 @@ var WebView = createReactClass({
otherView = this.props.renderLoading && this.props.renderLoading();
} else if (this.state.viewState === WebViewState.ERROR) {
var errorEvent = this.state.lastErrorEvent;
otherView = this.props.renderError && this.props.renderError(
errorEvent.domain,
errorEvent.code,
errorEvent.description);
otherView =
this.props.renderError &&
this.props.renderError(
errorEvent.domain,
errorEvent.code,
errorEvent.description,
);
} else if (this.state.viewState !== WebViewState.IDLE) {
console.error('RCTWebView invalid state encountered: ' + this.state.loading);
console.error(
'RCTWebView invalid state encountered: ' + this.state.loading,
);
}
var webViewStyles = [styles.container, this.props.style];
if (this.state.viewState === WebViewState.LOADING ||
this.state.viewState === WebViewState.ERROR) {
if (
this.state.viewState === WebViewState.LOADING ||
this.state.viewState === WebViewState.ERROR
) {
// if we're in either LOADING or ERROR states, don't show the webView
webViewStyles.push(styles.hidden);
}
@ -84,7 +94,7 @@ var WebView = createReactClass({
source.uri = this.props.url;
}
var webView =
var webView = (
<RCTWebView
ref={RCT_WEBVIEW_REF}
key="webViewKey"
@ -94,12 +104,15 @@ var WebView = createReactClass({
javaScriptEnabled={this.props.javaScriptEnabled}
indexedDbEnabled={this.props.indexedDbEnabled}
contentInset={this.props.contentInset}
automaticallyAdjustContentInsets={this.props.automaticallyAdjustContentInsets}
automaticallyAdjustContentInsets={
this.props.automaticallyAdjustContentInsets
}
onLoadingStart={this.onLoadingStart}
onLoadingFinish={this.onLoadingFinish}
onLoadingError={this.onLoadingError}
testID={this.props.testID}
/>;
/>
);
return (
<View style={styles.container}>
@ -113,7 +126,7 @@ var WebView = createReactClass({
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goForward,
null
null,
);
},
@ -121,7 +134,7 @@ var WebView = createReactClass({
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.goBack,
null
null,
);
},
@ -129,7 +142,7 @@ var WebView = createReactClass({
UIManager.dispatchViewManagerCommand(
this.getWebViewHandle(),
UIManager.RCTWebView.Commands.reload,
null
null,
);
},
@ -144,6 +157,7 @@ var WebView = createReactClass({
},
getWebViewHandle: function() {
// eslint-disable-next-line react/no-string-refs
return ReactNative.findNodeHandle(this.refs[RCT_WEBVIEW_REF]);
},
@ -162,7 +176,7 @@ var WebView = createReactClass({
this.setState({
lastErrorEvent: event.nativeEvent,
viewState: WebViewState.ERROR
viewState: WebViewState.ERROR,
});
},

6
vnext/Libraries/Image/Image.uwp.js
Просмотреть файл

@ -50,9 +50,7 @@ async function queryCache(
return await ImageViewManager.queryCache(urls);
}
declare class ImageComponentType extends ReactNative.NativeComponent<
ImagePropsType,
> {
declare class ImageComponentType extends ReactNative.NativeComponent<ImagePropsType> {
static getSize: typeof getSize;
static prefetch: typeof prefetch;
static queryCache: typeof queryCache;
@ -179,4 +177,4 @@ const styles = StyleSheet.create({
/* $FlowFixMe(>=0.89.0 site=react_native_ios_fb) This comment suppresses an
* error found when Flow v0.89 was deployed. To see the error, delete this
* comment and run Flow. */
module.exports = (Image: Class<ImageComponentType>);
module.exports = (Image: Class<ImageComponentType>);

2
vnext/Libraries/Networking/RCTNetworking.uwp.js
Просмотреть файл

@ -88,4 +88,4 @@ if (__DEV__ && !RCTNetworkingNative) {
RCTNetworking = new RCTNetworking();
}
module.exports = RCTNetworking;
module.exports = RCTNetworking;

30
vnext/Libraries/Utilities/BackHandler.uwp.js
Просмотреть файл

@ -1,17 +1,15 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
'use strict';
// TODO Hx: Implement.
type BackPressEventName = $Enum<{
backPress: string,
}>;
var _backPressSubscriptions = new Set();
function emptyFunction() { }
function emptyFunction() {}
/**
* Detect hardware button presses for back navigation.
@ -45,13 +43,13 @@ function emptyFunction() { }
*/
var BackHandler = {
exitApp: emptyFunction,
addEventListener() {
return {
remove: emptyFunction,
};
},
removeEventListener: emptyFunction,
exitApp: emptyFunction,
addEventListener() {
return {
remove: emptyFunction,
};
},
removeEventListener: emptyFunction,
};
module.exports = BackHandler;

32
vnext/Libraries/Utilities/BackHandler.windesktop.js
Просмотреть файл

@ -1,18 +1,14 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
'use strict';
// TODO Hx: Implement.
type BackPressEventName = $Enum<{
backPress: string,
}>;
var _backPressSubscriptions = new Set();
function emptyFunction() { }
function emptyFunction() {}
/**
* Detect hardware button presses for back navigation.
@ -46,13 +42,13 @@ function emptyFunction() { }
*/
var BackHandler = {
exitApp: emptyFunction,
addEventListener() {
return {
remove: emptyFunction,
};
},
removeEventListener: emptyFunction,
exitApp: emptyFunction,
addEventListener() {
return {
remove: emptyFunction,
};
},
removeEventListener: emptyFunction,
};
module.exports = BackHandler;

6
vnext/Libraries/YellowBox/UI/YellowBoxInspectorSourceMapStatus.windesktop.js
Просмотреть файл

@ -2,6 +2,6 @@
// Licensed under the MIT License.
'use strict';
var React = require("react");
var react_native_1 = require("react-native");
module.exports = function (props) { return React.createElement(react_native_1.Text, null, props.status); };
var React = require('react');
var react_native_1 = require('react-native');
module.exports = function (props) { return React.createElement(react_native_1.Text, null, props.status); };

20
vnext/Scripts/build-windows.js
Просмотреть файл

@ -6,18 +6,18 @@ const {runBuildCommand} = require('../../../packages/sdx-build-tools/lib/utils/r
const path = require('path');
const fs = require('fs');
if (!process.env.VCINSTALLDIR) throw new Error('Cannot find Visual Studio.');
if (!process.env.VCINSTALLDIR) {throw new Error('Cannot find Visual Studio.');}
const msbuildPath = path.join(process.env.VCINSTALLDIR, 'MSBuild/15.0/Bin/msbuild.exe');
if (!fs.existsSync(msbuildPath)) throw new Error('Unable to find msbuild');
if (!fs.existsSync(msbuildPath)) {throw new Error('Unable to find msbuild');}
const vstestPath = path.join(process.env.VCINSTALLDIR, 'Common7/IDE/CommonExtensions/Microsoft/TestWindow/vstest.console.exe');
if (!fs.existsSync(vstestPath)) throw new Error('Unable to find vstest.console.exe');
if (!fs.existsSync(vstestPath)) {throw new Error('Unable to find vstest.console.exe');}
let BuildPlatform = process.env.BuildPlatform;
if (!BuildPlatform) BuildPlatform = 'x64';
if (!BuildPlatform) {BuildPlatform = 'x64';}
let BuildConfiguration = process.env.BuildConfiguration;
if (!BuildConfiguration) BuildConfiguration = 'Debug';
if (!BuildConfiguration) {BuildConfiguration = 'Debug';}
runBuildCommand('nuget', [
'restore',
@ -26,7 +26,7 @@ runBuildCommand('nuget', [
'packages',
'-Verbosity',
'Detailed',
'-NonInteractive'
'-NonInteractive',
]);
runBuildCommand(msbuildPath, [
@ -36,17 +36,17 @@ runBuildCommand(msbuildPath, [
'/p:SolutionDir=' + path.resolve(__dirname, '..') + path.sep,
`/p:platform=${BuildPlatform}`,
`/p:configuration=${BuildConfiguration}`,
'/m'
'/m',
]);
const utTestDll = path.resolve(__dirname, `../target/${BuildPlatform}/${BuildConfiguration}/React.Windows.Desktop.UnitTests/React.Windows.Desktop.UnitTests.dll`)
const utTestDll = path.resolve(__dirname, `../target/${BuildPlatform}/${BuildConfiguration}/React.Windows.Desktop.UnitTests/React.Windows.Desktop.UnitTests.dll`);
runBuildCommand(vstestPath, [
utTestDll,
'/InIsolation',
`/Platform:${BuildPlatform}`
`/Platform:${BuildPlatform}`,
]);
process.env.RNDesktopUTDLL = path.resolve(__dirname, `../target/${BuildPlatform}/${BuildConfiguration}/React.Windows.Desktop.IntegrationTests/React.Windows.Desktop.IntegrationTests.dll`)
process.env.RNDesktopUTDLL = path.resolve(__dirname, `../target/${BuildPlatform}/${BuildConfiguration}/React.Windows.Desktop.IntegrationTests/React.Windows.Desktop.IntegrationTests.dll`);
require('../Scripts/run-desktop-integration-tests');

2
vnext/Scripts/just.js
Просмотреть файл

@ -14,7 +14,7 @@ function just(cmd) {
...(cmd ? [cmd] : []),
'--config',
path.resolve(__dirname, 'just-task.js'),
...process.argv.slice(startIndex)
...process.argv.slice(startIndex),
];
require('just-task/lib/cli.js');

2
vnext/Scripts/postInstall.js
Просмотреть файл

@ -22,4 +22,4 @@ if (replaceDep) {
delete pkgJson.rnDepVersion;
fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
}
}

2
vnext/Scripts/preInstall.js
Просмотреть файл

@ -31,4 +31,4 @@ if (replaceDep) {
}
fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
}
}
}

8
vnext/Scripts/react-windows-constants.js поставляемый
Просмотреть файл

@ -13,19 +13,19 @@ let constants = {
/**
* This is the repo id for ISS\react-native
*/
repoId: "b8bb01d6-6226-4852-a03d-cd1cbc9efc48",
repoId: 'b8bb01d6-6226-4852-a03d-cd1cbc9efc48',
/**
* Environment variable set during the build that data will be POST to.
* @type string
*/
vsoApiUrl: process.env.VSO_API_URL ? process.env.VSO_API_URL : "https://office.visualstudio.com/DefaultCollection/_apis",
vsoApiUrl: process.env.VSO_API_URL ? process.env.VSO_API_URL : 'https://office.visualstudio.com/DefaultCollection/_apis',
};
if (!constants.paToken)
throw new Error("Personal access token must be set to VSO_AUTHTOKEN before running this script");
{throw new Error('Personal access token must be set to VSO_AUTHTOKEN before running this script');}
module.exports = constants
module.exports = constants;

2
vnext/Scripts/replaceRNDependency.js
Просмотреть файл

@ -6,4 +6,4 @@ const pkgJsonPath = path.resolve(__dirname, '../package.json');
let pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
pkgJson.rnDepVersion = pkgJson.devDependencies['react-native'];
pkgJson.devDependencies['react-native'] = `https://github.com/Microsoft/react-native/archive/v${pkgJson.devDependencies['react-native']}.tar.gz`;
fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
fs.writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 2));

18
vnext/Scripts/run-desktop-integration-tests.js
Просмотреть файл

@ -8,13 +8,13 @@ const path = require('path');
const fs = require('fs');
const {spawn} = require('child_process');
if (!process.env.VCINSTALLDIR) throw new Error('Cannot find Visual Studio.');
if (!process.env.VCINSTALLDIR) {throw new Error('Cannot find Visual Studio.');}
const vstestPath = path.join(
process.env.VCINSTALLDIR,
'Common7/IDE/CommonExtensions/Microsoft/TestWindow/vstest.console.exe');
if (!fs.existsSync(vstestPath))
throw new Error('Unable to find vstest.console.exe');
{throw new Error('Unable to find vstest.console.exe');}
console.log(JSON.stringify(process.argv));
@ -29,14 +29,14 @@ if (process.argv.length === 3) {
}
let BuildPlatform = process.env.BuildPlatform;
if (!BuildPlatform) BuildPlatform = 'x64';
if (!BuildPlatform) {BuildPlatform = 'x64';}
let BuildConfiguration = process.env.BuildConfiguration;
if (!BuildConfiguration) BuildConfiguration = 'Debug';
if (!BuildConfiguration) {BuildConfiguration = 'Debug';}
const serverEntries = {
metroServer: null,
websocketServer: null
websocketServer: null,
};
function launchMetroServer() {
@ -54,7 +54,7 @@ function launchMetroServer() {
});
serverEntries.metroServer.on('error', (err) => {
console.error('Metro process failed!' + err.toString());
reject(err)
reject(err);
});
serverEntries.metroServer.on('exit', (code) => {
@ -73,7 +73,7 @@ function launchWebsocketServer() {
serverEntries.websocketServer = spawn(
'node',
[
'../node_modules/react-native/IntegrationTests/websocket_integration_test_server.js'
'../node_modules/react-native/IntegrationTests/websocket_integration_test_server.js',
],
{cwd: __dirname});
@ -83,7 +83,7 @@ function launchWebsocketServer() {
resolve();
}
});
serverEntries.websocketServer.on('error', (err) => {reject(err)})
serverEntries.websocketServer.on('error', (err) => {reject(err);});
serverEntries.websocketServer.on('exit', (code) => {
if (code !== 0) {
@ -99,7 +99,7 @@ launchMetroServer().then(launchWebsocketServer).then(() => {
console.log('Running IntegrationTests');
runBuildCommand(vstestPath, [
dllPath,
'/InIsolation', `/Platform:${BuildPlatform}`
'/InIsolation', `/Platform:${BuildPlatform}`,
]);
console.log('Killing test servers');
serverEntries.metroServer.kill();

10
vnext/Scripts/update-facebook-master.js
Просмотреть файл

@ -5,8 +5,8 @@
const execSync = require('child_process').execSync;
console.log(execSync("git remote add fb-github https://github.com/facebook/react-native.git"));
console.log(execSync("git fetch fb-github"));
console.log(execSync("git checkout -b facebook/master --track origin/facebook/master"));
console.log(execSync("git pull fb-github master"));
console.log(execSync("git push origin facebook/master"));
console.log(execSync('git remote add fb-github https://github.com/facebook/react-native.git'));
console.log(execSync('git fetch fb-github'));
console.log(execSync('git checkout -b facebook/master --track origin/facebook/master'));
console.log(execSync('git pull fb-github master'));
console.log(execSync('git push origin facebook/master'));

6
vnext/Scripts/utils.js
Просмотреть файл

@ -20,6 +20,6 @@ module.exports = {
return currentDir;
}
currentDir = path.resolve(currentDir, '..');
} while (currentDir !== root)
}
}
} while (currentDir !== root);
},
};

10
vnext/Universal.SampleApp/ReadingPaneSamples/CallbackTest.index.uwp.js
Просмотреть файл

@ -7,7 +7,7 @@ import {
NativeModules,
StyleSheet,
Text,
View
View,
} from 'react-native';
export default class Bootstrap extends Component {
@ -15,18 +15,18 @@ export default class Bootstrap extends Component {
super();
this.state = {
subject: "Loading...",
msgs: Array(0)
subject: 'Loading...',
msgs: Array(0),
};
NativeModules.ReadingPane.CurrentConversation((js) => this.LoadedConversation(js))
NativeModules.ReadingPane.CurrentConversation((js) => this.LoadedConversation(js));
}
LoadedConversation(js)
{
this.setState({
subject: js.Subject,
msgs: js.Messages
msgs: js.Messages,
});
}

859
vnext/Universal.SampleApp/ReadingPaneSamples/TicTacToe.index.uwp.js
Просмотреть файл

@ -1,500 +1,515 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import {
AppRegistry,
NativeModules,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
NativeEventEmitter,
Alert,
AppRegistry,
NativeModules,
StyleSheet,
Text,
TouchableWithoutFeedback,
View,
NativeEventEmitter,
} from 'react-native';
class Square extends Component {
render() {
let styleColor = styles.emptySquare;
if (this.props.value == 'X') // X is blue
styleColor = styles.XSquare;
else if (this.props.value == 'O') // O is green
styleColor = styles.OSquare;
let styleBoard = styles.emptySquare;
if (this.props.enabled) {
if (this.props.xIsNext)
styleBoard = styles.EnabledBoardX;
else
styleBoard = styles.EnabledBoardO;
// styleBoard = styles.EnabledBoard;
}
return (
<TouchableWithoutFeedback onPress={() => this.props.onPress() } >
<View style = {
[styles.square, styleColor, styleBoard] }
underlayColor = '#f1c40f' >
</View>
</TouchableWithoutFeedback>
);
render() {
let styleColor = styles.emptySquare;
if (this.props.value === 'X') {
// X is blue
styleColor = styles.XSquare;
} else if (this.props.value === 'O') {
// O is green
styleColor = styles.OSquare;
}
let styleBoard = styles.emptySquare;
if (this.props.enabled) {
if (this.props.xIsNext) {
styleBoard = styles.EnabledBoardX;
} else {
styleBoard = styles.EnabledBoardO;
}
// styleBoard = styles.EnabledBoard;
}
return (
<TouchableWithoutFeedback onPress={() => this.props.onPress()}>
<View
style={[styles.square, styleColor, styleBoard]}
underlayColor="#f1c40f"
/>
</TouchableWithoutFeedback>
);
}
}
class SmallBoard extends Component {
renderSquare(i) {
return <Square
value = { this.props.squares[i] }
enabled = { this.props.enabled }
xIsNext = { this.props.xIsNext }
onPress = {
() => this.props.onPress(i) }
/>
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
enabled={this.props.enabled}
xIsNext={this.props.xIsNext}
onPress={() => this.props.onPress(i)}
/>
);
}
render() {
let status; // = this.props.board;
if (this.props.winner) {
status = 'Winner!';
} //: ' + NameFromInternal(winner);
else if (this.props.enabled) {
status = 'Next play';
}
render() {
let status; // = this.props.board;
if (this.props.winner)
status = 'Winner!' //: ' + NameFromInternal(winner);
else if (this.props.enabled)
status = 'Next play';
return (
<View style = {{ flexDirection: 'column', padding: 3 }} >
<Text style = {{ fontSize: 8, height: 10 }} >
{ status }
</Text>
<View style = {{ flexDirection: 'row' }} >
{ this.renderSquare(0) }
{ this.renderSquare(1) }
{ this.renderSquare(2) }
</View>
<View style = {{ flexDirection: 'row' }} >
{ this.renderSquare(3) }
{ this.renderSquare(4) }
{ this.renderSquare(5) }
</View>
<View style = {{ flexDirection: 'row' }} >
{ this.renderSquare(6) }
{ this.renderSquare(7) }
{ this.renderSquare(8) }
</View>
</View>
);
}
return (
<View style={{flexDirection: 'column', padding: 3}}>
<Text style={{fontSize: 8, height: 10}}>{status}</Text>
<View style={{flexDirection: 'row'}}>
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</View>
<View style={{flexDirection: 'row'}}>
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</View>
<View style={{flexDirection: 'row'}}>
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</View>
</View>
);
}
}
class BigBoard extends Component {
constructor() {
super();
constructor() {
super();
const squares = Array(9).fill(null);
const squares = Array(9).fill(null);
this.state = {
zzhistory: [{
squares: Array(9).fill(null)
}],
allBoards: [
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
{ squares: squares.slice(), },
],
winners: Array(9).fill(false),
gameWinner: null,
allBoardsz: Array(9).fill({ squares: Array(9).fill(squares.slice()) }),
noMovesYet: true,
xIsNext: true,
iAmX: true,
lastBoard: -1,
lastI: -1,
BluePlayer: "", // X
BluePlayerFriendly: "",
GreenPlayer: "", // O
GreenPlayerFriendly: "",
this.state = {
zzhistory: [
{
squares: Array(9).fill(null),
},
],
allBoards: [
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
{squares: squares.slice()},
],
winners: Array(9).fill(false),
gameWinner: null,
allBoardsz: Array(9).fill({squares: Array(9).fill(squares.slice())}),
noMovesYet: true,
xIsNext: true,
iAmX: true,
lastBoard: -1,
lastI: -1,
BluePlayer: '', // X
BluePlayerFriendly: '',
GreenPlayer: '', // O
GreenPlayerFriendly: '',
subject: "Loading...",
msgs: Array(0),
subject: 'Loading...',
msgs: Array(0),
inited: false,
};
inited: false,
};
NativeModules.ReadingPane.CurrentConversation((js) => this.LoadedConversation(js));
NativeModules.ReadingPane.CurrentConversation(js =>
this.LoadedConversation(js),
);
const rpEmitter = new NativeEventEmitter(NativeModules.ReadingPane);
rpEmitter.addListener("readingPaneChanged", () => this.ReadingPaneChanged());
const rpEmitter = new NativeEventEmitter(NativeModules.ReadingPane);
rpEmitter.addListener('readingPaneChanged', () =>
this.ReadingPaneChanged(),
);
}
ReadingPaneChanged() {
NativeModules.ReadingPane.CurrentConversation(js =>
this.LoadedConversation(js),
);
}
LoadedConversation(js) {
if (js.result === false) {
return;
}
ReadingPaneChanged() {
NativeModules.ReadingPane.CurrentConversation((js) => this.LoadedConversation(js));
if (!this.state.inited) {
let start = CalcStartState(js);
this.setState(start);
}
LoadedConversation(js) {
if (js.result == false) {
return;
}
this.setState({
subject: js.Subject,
msgs: js.Messages,
});
}
if (!this.state.inited) {
let start = CalcStartState(js);
this.setState(start);
}
this.setState({
subject: js.Subject,
msgs: js.Messages
});
handleClick(board, i) {
if (this.state.lastI !== -1 && this.state.lastI !== board) {
return;
}
handleClick(board, i) {
if (this.state.lastI != -1 && this.state.lastI != board)
return;
const current = this.state.allBoards[board];
const squares = current.squares.slice();
if (this.state.gameWinner || squares[i])
return;
squares[i] = this.state.xIsNext ? 'X' : 'O';
const localAllBoards = this.state.allBoards.slice();
localAllBoards[board].squares[i] = this.state.xIsNext ? 'X' : 'O';
winnersState = calculateWinners(localAllBoards);
// setState is async so make a copy here, todo use setstate callback
let saveState = {
allBoards: localAllBoards,
winners: winnersState.winners,
gameWinner: winnersState.gameWinner,
lastI: i,
lastBoard: board,
xIsNext: !this.state.xIsNext,
BluePlayer: this.state.BluePlayer,
GreenPlayer: this.state.GreenPlayer,
}
this.setState({
allBoards: localAllBoards,
winners: winnersState.winners,
gameWinner: winnersState.gameWinner,
xIsNext: !this.state.xIsNext,
noMovesYet: false,
lastBoard: board,
lastI: i,
});
const boardState = ComputeBoardState(saveState);
NativeModules.ReadingPane.SendMail("<HTML><BODY>&lt;BoardState&gt;" + boardState + "&lt;/BoardState&gt;</BODY></HTML>");
const current = this.state.allBoards[board];
const squares = current.squares.slice();
if (this.state.gameWinner || squares[i]) {
return;
}
renderBoard(board) {
const current = this.state.allBoards[board];
const boardDesc = board + ' lB:' + this.state.lastBoard + ' lI:' + this.state.lastI;
let boardEnabled = this.state.lastI == -1 || this.state.lastI == board;
if (this.state.gameWinner != null)
boardEnabled = false;
return <SmallBoard squares = { current.squares }
board = { boardDesc }
enabled = { boardEnabled }
winner = { this.state.winners[board] }
xIsNext = { this.state.xIsNext }
onPress = {
(i) => this.handleClick(board, i) }
/>
squares[i] = this.state.xIsNext ? 'X' : 'O';
const localAllBoards = this.state.allBoards.slice();
localAllBoards[board].squares[i] = this.state.xIsNext ? 'X' : 'O';
const winnersState = calculateWinners(localAllBoards);
// setState is async so make a copy here, todo use setstate callback
let saveState = {
allBoards: localAllBoards,
winners: winnersState.winners,
gameWinner: winnersState.gameWinner,
lastI: i,
lastBoard: board,
xIsNext: !this.state.xIsNext,
BluePlayer: this.state.BluePlayer,
GreenPlayer: this.state.GreenPlayer,
};
this.setState({
allBoards: localAllBoards,
winners: winnersState.winners,
gameWinner: winnersState.gameWinner,
xIsNext: !this.state.xIsNext,
noMovesYet: false,
lastBoard: board,
lastI: i,
});
const boardState = ComputeBoardState(saveState);
NativeModules.ReadingPane.SendMail(
'<HTML><BODY>&lt;BoardState&gt;' +
boardState +
'&lt;/BoardState&gt;</BODY></HTML>',
);
}
renderBoard(board) {
const current = this.state.allBoards[board];
const boardDesc =
board + ' lB:' + this.state.lastBoard + ' lI:' + this.state.lastI;
let boardEnabled = this.state.lastI === -1 || this.state.lastI === board;
if (this.state.gameWinner != null) {
boardEnabled = false;
}
return (
<SmallBoard
squares={current.squares}
board={boardDesc}
enabled={boardEnabled}
winner={this.state.winners[board]}
xIsNext={this.state.xIsNext}
onPress={i => this.handleClick(board, i)}
/>
);
}
setBoard(text) {
const boardState = ParseBoardState(text);
if (boardState.fail) {
return;
}
this.setState({
allBoards: boardState.allBoards,
lastBoard: boardState.lastBoard,
lastI: boardState.lastI,
xIsNext: boardState.xIsNext,
});
return;
}
render() {
let status;
status = 'Next player: ' + NameFromInternal(this.state.xIsNext ? 'X' : 'O');
if (this.state.gameWinner) {
status =
'Winner:' +
(this.state.gameWinner === 'X'
? this.state.GreenPlayer
: this.state.BluePlayer);
} else if (this.state.noMovesYet) {
status = 'Click a square to start';
} else if (
(this.state.xIsNext && this.state.iAmX) ||
(!this.state.xIsNext && !this.state.iAmX)
) {
status = "It's your move!";
} else {
status =
'Waiting for ' +
(this.state.iAmX ? this.state.GreenPlayer : this.state.BluePlayer);
}
setBoard(text) {
const boardState = ParseBoardState(text);
if (boardState.fail)
return;
this.setState({
allBoards: boardState.allBoards,
lastBoard: boardState.lastBoard,
lastI: boardState.lastI,
xIsNext: boardState.xIsNext,
})
return;
}
let status2 = 'iAmX(blue):' + this.state.iAmX;
let status3 = 'Blue: ' + this.state.BluePlayer;
let status4 = 'Green:' + this.state.GreenPlayer;
render() {
let status, PlayerBlue, PlayerGreen;
status = 'Next player: ' + NameFromInternal(this.state.xIsNext ? 'X' : 'O');
if (this.state.gameWinner)
status = "Winner:" + (this.state.gameWinner == 'X' ? this.state.GreenPlayer : this.state.BluePlayer);
else if (this.state.noMovesYet)
status = 'Click a square to start';
else if ((this.state.xIsNext && this.state.iAmX) ||
(!this.state.xIsNext && !this.state.iAmX))
status = "It's your move!";
else
status = "Waiting for " + (this.state.iAmX ? this.state.GreenPlayer : this.state.BluePlayer);
//const boardState = ComputeBoardState(this.state.allBoards, this.state.lastBoard, this.state.lastI);
const boardState = ComputeBoardState(this.state);
let status2 = 'iAmX(blue):' + this.state.iAmX;
let status3 = 'Blue: ' + this.state.BluePlayer;
let status4 = 'Green:' + this.state.GreenPlayer;
//const boardState = ComputeBoardState(this.state.allBoards, this.state.lastBoard, this.state.lastI);
const boardState = ComputeBoardState(this.state);
return (
<View style = {{ flexDirection: 'row' }} >
<View style = {{ flexDirection: 'column', padding: 10, width: 180 }} >
<Text style = {{ fontSize: 10 }} > { status } </Text>
<Text style = {{ fontSize: 10 }} > </Text>
<Text style = {{ fontSize: 10 }} > { status2 } </Text>
{ /* Players */ }
<Text style = {{ fontSize: 10 }} > { status3 } </Text>
<Text style = {{ fontSize: 10 }} > { status4 } </Text>
{ /* Board state */ }
<View style = {{ height: 10 }} />
<Text style = {{ fontSize: 10 }} > Board State: </Text>
<Text style = {{ fontSize: 10 }} > { boardState } </Text>
</View>
<View style = {{ flexDirection: 'column' }} >
<View style = {{ flexDirection: 'row' }} >
{ this.renderBoard(0) }
{ this.renderBoard(1) }
{ this.renderBoard(2) }
</View>
<View style = {{ flexDirection: 'row' }} >
{ this.renderBoard(3) }
{ this.renderBoard(4) }
{ this.renderBoard(5) }
</View>
<View style = {{ flexDirection: 'row' }} >
{ this.renderBoard(6) }
{ this.renderBoard(7) }
{ this.renderBoard(8) }
</View>
</View>
</View>
);
}
return (
<View style={{flexDirection: 'row'}}>
<View style={{flexDirection: 'column', padding: 10, width: 180}}>
<Text style={{fontSize: 10}}> {status} </Text>
<Text style={{fontSize: 10}} />
<Text style={{fontSize: 10}}> {status2} </Text>
{/* Players */}
<Text style={{fontSize: 10}}> {status3} </Text>
<Text style={{fontSize: 10}}> {status4} </Text>
{/* Board state */}
<View style={{height: 10}} />
<Text style={{fontSize: 10}}> Board State: </Text>
<Text style={{fontSize: 10}}> {boardState} </Text>
</View>
<View style={{flexDirection: 'column'}}>
<View style={{flexDirection: 'row'}}>
{this.renderBoard(0)}
{this.renderBoard(1)}
{this.renderBoard(2)}
</View>
<View style={{flexDirection: 'row'}}>
{this.renderBoard(3)}
{this.renderBoard(4)}
{this.renderBoard(5)}
</View>
<View style={{flexDirection: 'row'}}>
{this.renderBoard(6)}
{this.renderBoard(7)}
{this.renderBoard(8)}
</View>
</View>
</View>
);
}
}
function CalcStartState(js) {
let green, greenFriendly, blue, blueFriendly;
// Find me:
let meEmail = js.Account.Email;
let meDisplay = js.Account.DisplayName;
// Find me:
let meEmail = js.Account.Email;
let meDisplay = js.Account.DisplayName;
let other = FindFirstOther(js, meEmail);
// Find latest board
let loadInfo = FindAndLoadBoard(js, meEmail);
let foundBoard = loadInfo.result;
// Find latest board
let loadInfo = FindAndLoadBoard(js, meEmail);
let foundBoard = loadInfo.result;
if (foundBoard) {
// If blank green, become player 2
if (loadInfo.BluePlayer != meEmail &&
loadInfo.GreenPlayer == "")
loadInfo.GreenPlayer = meEmail;
return {
allBoards: loadInfo.allBoards,
winners: loadInfo.winners,
gameWinner: loadInfo.gameWinner,
lastBoard: loadInfo.lastBoard,
lastI: loadInfo.lastI,
xIsNext: loadInfo.xIsNext,
GreenPlayer: loadInfo.GreenPlayer,
BluePlayer: loadInfo.BluePlayer,
iAmX: (loadInfo.BluePlayer == meEmail),
noMovesYet: false,
}
if (foundBoard) {
// If blank green, become player 2
if (loadInfo.BluePlayer !== meEmail && loadInfo.GreenPlayer === '') {
loadInfo.GreenPlayer = meEmail;
}
return {
BluePlayer: meEmail,
BluePlayerFriendly: meDisplay,
}
allBoards: loadInfo.allBoards,
winners: loadInfo.winners,
gameWinner: loadInfo.gameWinner,
lastBoard: loadInfo.lastBoard,
lastI: loadInfo.lastI,
xIsNext: loadInfo.xIsNext,
GreenPlayer: loadInfo.GreenPlayer,
BluePlayer: loadInfo.BluePlayer,
iAmX: loadInfo.BluePlayer === meEmail,
noMovesYet: false,
};
}
return {
BluePlayer: meEmail,
BluePlayerFriendly: meDisplay,
};
}
function calculateWinners(allBoards) {
let winners = Array(9).fill(false);
let gameWinner = null;
for (let i = 0; i < 9; i++) {
let winner = calculateWinner(allBoards[i].squares);
winners[i] = winner != null;
if (winners[i])
gameWinner = winner;
let winners = Array(9).fill(false);
let gameWinner = null;
for (let i = 0; i < 9; i++) {
let winner = calculateWinner(allBoards[i].squares);
winners[i] = winner != null;
if (winners[i]) {
gameWinner = winner;
}
}
return { winners: winners, gameWinner: gameWinner };
return {winners: winners, gameWinner: gameWinner};
}
function htmlDecode(str) {
var map = { amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'" }
str = str.replace(/&([^;]+);/g, (m, c) => map[c]);
str = str.replace("<span>", "");
return str;
var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"};
str = str.replace(/&([^;]+);/g, (m, c) => map[c]);
str = str.replace('<span>', '');
return str;
}
function FindAndLoadBoard(js, meEmail) {
// Look for Board data
for (let i = 0; i < js.Messages.length; i++) {
let msgBody = htmlDecode(js.Messages[i].HTMLBodyBytes);
let start = msgBody.indexOf("<BoardState>");
if (start != -1) {
let end = msgBody.indexOf("</BoardState>", start);
var boardState = msgBody.substring(start + 12).substring(0, end - start - 12);
function FindAndLoadBoard(js) {
// Look for Board data
for (let i = 0; i < js.Messages.length; i++) {
let msgBody = htmlDecode(js.Messages[i].HTMLBodyBytes);
let start = msgBody.indexOf('<BoardState>');
if (start !== -1) {
let end = msgBody.indexOf('</BoardState>', start);
var boardState = msgBody
.substring(start + 12)
.substring(0, end - start - 12);
try {
let s = ParseBoardState(boardState);
return s;
} catch (e) {
return { result: false, };
}
}
try {
let s = ParseBoardState(boardState);
return s;
} catch (e) {
return {result: false};
}
}
}
return { result: false, };
}
function FindFirstOther(js, meEmail) {
for (let i = 0; i < js.Recipients.length; i++) {
let r = js.Recipients[i];
if (r.Email != meEmail)
return {
DisplayName: r.DisplayName,
Email: r.Email,
result: true,
};
}
return { result: false, };
return {result: false};
}
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
}
return null;
}
return null;
}
function NameFromInternal(internal) {
if (internal === 'X')
return 'Blue';
if (internal === 'O')
return 'Green';
return null;
}
function encode4(s1, s2, s3, s4) {
const Xs = (s1 == 'X' ? 1 << 0 : 0)
if (internal === 'X') {
return 'Blue';
}
if (internal === 'O') {
return 'Green';
}
return null;
}
function ComputeBoardState(state) {
let json = JSON.stringify({
allBoards: state.allBoards,
lastIndex: state.lastI,
lastBoard: state.lastBoard,
xIsNext: state.xIsNext,
X: state.BluePlayer,
O: state.GreenPlayer
})
return json;
let json = JSON.stringify({
allBoards: state.allBoards,
lastIndex: state.lastI,
lastBoard: state.lastBoard,
xIsNext: state.xIsNext,
X: state.BluePlayer,
O: state.GreenPlayer,
});
return json;
}
function ParseBoardState(text) {
let boardState = JSON.parse(text);
let winnersState = calculateWinners(boardState.allBoards);
return {
allBoards: boardState.allBoards,
lastBoard: boardState.lastBoard,
lastI: boardState.lastIndex,
xIsNext: boardState.xIsNext,
BluePlayer: boardState.X,
GreenPlayer: boardState.O,
winners: winnersState.winners,
gameWinner: winnersState.gameWinner,
result: true
}
let boardState = JSON.parse(text);
let winnersState = calculateWinners(boardState.allBoards);
return {
allBoards: boardState.allBoards,
lastBoard: boardState.lastBoard,
lastI: boardState.lastIndex,
xIsNext: boardState.xIsNext,
BluePlayer: boardState.X,
GreenPlayer: boardState.O,
winners: winnersState.winners,
gameWinner: winnersState.gameWinner,
result: true,
};
}
export default class Bootstrap extends Component {
_handleButtonPress = () => {
Alert.alert(
'Button pressed!',
'You did it!',
);
};
_handleButtonPress = () => {
Alert.alert('Button pressed!', 'You did it!');
};
render() {
return (
<View style = { styles.container } >
<BigBoard/>
</View>
);
}
render() {
return (
<View style={styles.container}>
<BigBoard />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
// backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
square: {
borderWidth: 2,
borderColor: 'black',
height: 18,
marginRight: -2,
marginTop: -2,
padding: 0,
width: 18,
backgroundColor: 'white'
},
emptySquare: {},
XSquare: {
backgroundColor: 'blue',
},
OSquare: {
backgroundColor: 'green',
},
EnabledBoard: {
borderColor: 'green',
},
EnabledBoardX: {
borderColor: 'blue',
},
EnabledBoardO: {
borderColor: 'green',
},
square: {
borderWidth: 2,
borderColor: 'black',
height: 18,
marginRight: -2,
marginTop: -2,
padding: 0,
width: 18,
backgroundColor: 'white',
},
emptySquare: {},
XSquare: {
backgroundColor: 'blue',
},
OSquare: {
backgroundColor: 'green',
},
EnabledBoard: {
borderColor: 'green',
},
EnabledBoardX: {
borderColor: 'blue',
},
EnabledBoardO: {
borderColor: 'green',
},
});
AppRegistry.registerComponent('Bootstrap', () => Bootstrap);
AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

8
vnext/Universal.SampleApp/accessible.uwp.js
Просмотреть файл

@ -10,7 +10,7 @@ import {
StyleSheet,
Text,
TextInput,
View
View,
} from 'react-native';
export default class Bootstrap extends Component {
@ -44,20 +44,20 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'lightgray'
backgroundColor: 'lightgray',
},
item: {
margin: 10,
backgroundColor: 'lightpink',
borderColor: 'indianred',
borderWidth: 2,
justifyContent: 'center'
justifyContent: 'center',
},
text: {
fontSize: 20,
textAlign: 'center',
color: 'black',
margin: 10
margin: 10,
},
});

10184
vnext/Universal.SampleApp/bundle.js
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

2
vnext/Universal.SampleApp/click.uwp.js
Просмотреть файл

@ -14,7 +14,7 @@ import {
export default class Bootstrap extends Component {
state = {
ticker: 0
ticker: 0,
};
onSmallIncrement = () => {

207
vnext/Universal.SampleApp/control.uwp.js
Просмотреть файл

@ -2,11 +2,11 @@
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
* @format
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import {
ActivityIndicator,
AppRegistry,
ScrollView,
Switch,
@ -14,50 +14,100 @@ import {
TextInput,
View,
} from 'react-native';
import {
CheckBox,
DatePicker,
Picker,
} from 'react-native-windows';
import {CheckBox, DatePicker, Picker} from 'react-native-windows';
export default class Bootstrap extends Component {
constructor(props) {
super(props);
this.state = { padding: 15, margin: 5 };
this.state = {padding: 15, margin: 5};
}
render() {
return (
<View accessible={true} style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ backgroundColor: 'orange', margin: 5, height: 100 }}>
<ScrollView style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}>
<View
accessible={true}
style={{
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{backgroundColor: 'orange', margin: 5, height: 100}}>
<ScrollView
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}>
<Text>first</Text>
<Text>second</Text>
</ScrollView>
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<View style={{ height: 25, width: 75, backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<DatePicker style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Picker style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Switch style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<CheckBox style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<TextInput style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}
placeholder={"type something ..."}
placeholderTextColor={"maroon"}
<View style={{backgroundColor: 'orange', margin: 5}}>
<View
style={{
height: 25,
width: 75,
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Text style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}>
<View style={{backgroundColor: 'orange', margin: 5}}>
<DatePicker
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Picker
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Switch
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<CheckBox
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<TextInput
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
placeholder={'type something ...'}
placeholderTextColor={'maroon'}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Text
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}>
type nothing ...
</Text>
</View>
@ -67,30 +117,79 @@ export default class Bootstrap extends Component {
fullrender() {
return (
<View accessible={true} style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<View style={{ height: 25, width: 75, backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<DatePicker style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Picker style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Switch style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<CheckBox style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<TextInput style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}
placeholder={"type something ..."}
placeholderTextColor={"maroon"}
<View
accessible={true}
style={{
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{backgroundColor: 'orange', margin: 5}}>
<View
style={{
height: 25,
width: 75,
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Text style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}>
<View style={{backgroundColor: 'orange', margin: 5}}>
<DatePicker
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Picker
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Switch
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<CheckBox
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<TextInput
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
placeholder={'type something ...'}
placeholderTextColor={'maroon'}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Text
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}>
type nothing ...
</Text>
</View>

109
vnext/Universal.SampleApp/flexbox.uwp.js
Просмотреть файл

@ -1,15 +1,12 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
Button,
StyleSheet,
Text,
View,
TouchableWithoutFeedback,
} from 'react-native';
import React, {Component} from 'react';
import {AppRegistry, Button, StyleSheet, Text, View} from 'react-native';
export default class FlexboxLayoutPlayground extends Component {
constructor(props) {
@ -24,26 +21,23 @@ export default class FlexboxLayoutPlayground extends Component {
}
_onClick() {
state = this.state;
const state = this.state;
if (state.currentAlignStyle === styles.endAlignStyle) {
state.currentAlignStyle = styles.emptyStyle;
}
else {
} else {
state.currentAlignStyle = styles.endAlignStyle;
}
if (state.currentAbsoluteStyle === styles.absoluteTest1) {
state.currentAbsoluteStyle = styles.absoluteTest2;
}
else {
} else {
state.currentAbsoluteStyle = styles.absoluteTest1;
}
if (state.currentWidthStyle === styles.widthTest1) {
state.currentWidthStyle = styles.widthTest2;
}
else {
} else {
state.currentWidthStyle = styles.widthTest1;
}
@ -55,7 +49,6 @@ export default class FlexboxLayoutPlayground extends Component {
// TODO: Should be ScrollView
<View style={styles.root}>
<View style={styles.mainContainer}>
<View style={styles.section}>
<Text>Direction: Row</Text>
<View style={styles.containerRow}>
@ -97,10 +90,8 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.box} />
</View>
</View>
</View>
<View style={styles.mainContainer}>
</View>
<View style={styles.mainContainer}>
<View style={styles.section}>
<Text>Justify: SpaceBetween</Text>
<View style={styles.containerJustifySpaceBetween}>
@ -147,10 +138,8 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.box} />
</View>
</View>
</View>
<View style={styles.mainContainer}>
</View>
<View style={styles.mainContainer}>
<View style={styles.section}>
<Text>AlignItems: FlexStart</Text>
<View style={styles.containerAlignItemsFlexStart}>
@ -190,10 +179,8 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.section}>
<Text style={styles.todoLabel}>TODO: FlexEnd, Stretch, Center</Text>
</View>
</View>
<View style={styles.mainContainer}>
</View>
<View style={styles.mainContainer}>
<View style={styles.section}>
<Text>AlignContent: FlexEnd</Text>
<View style={styles.containerAlignContentFlexEnd}>
@ -206,7 +193,9 @@ export default class FlexboxLayoutPlayground extends Component {
</View>
<View style={styles.section}>
<Text style={styles.todoLabel}>TODO: FlexStart, Center, Stretch, SpaceBetween, SpaceAround</Text>
<Text style={styles.todoLabel}>
TODO: FlexStart, Center, Stretch, SpaceBetween, SpaceAround
</Text>
</View>
<View style={styles.section}>
@ -232,10 +221,8 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.boxWithGrow2} />
</View>
</View>
</View>
<View style={styles.mainContainer}>
</View>
<View style={styles.mainContainer}>
<View style={styles.section}>
<Text>FlexShrink: Right Box</Text>
<View style={styles.containerRow}>
@ -264,10 +251,10 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.section}>
<Text>FlexBasis: Percent</Text>
<View style={styles.containerRow}>
<View style={styles.boxWithFlexBasisPercent} />
<View style={styles.boxWithFlexBasisPercent} />
<View style={styles.boxWithFlexBasisPercent} />
<View style={styles.containerRow}>
<View style={styles.boxWithFlexBasisPercent} />
<View style={styles.boxWithFlexBasisPercent} />
<View style={styles.boxWithFlexBasisPercent} />
</View>
</View>
@ -277,10 +264,8 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.absoluteBox} />
</View>
</View>
</View>
<View style={styles.mainContainer}>
</View>
<View style={styles.mainContainer}>
<View style={styles.section}>
<Text>Align: Stretch With Right Box MaxHeight</Text>
<View style={styles.containerAlignItemsStretch}>
@ -309,27 +294,34 @@ export default class FlexboxLayoutPlayground extends Component {
<View style={styles.boxNoMargin} />
</View>
</View>
</View>
<View style={styles.mainContainer}>
<View>
<Text style={{flexWrap: 'wrap'}}>
Native control under React view, make sure margin is not double counted.
It is being double counted if the button's right and bottom edges touch
the edge of the rect behind it.
Native control under React view, make sure margin is not double
counted. It is being double counted if the button's right and
bottom edges touch the edge of the rect behind it.
</Text>
<View style={{padding: 5}} >
<View style={{padding: 5}}>
<Text>Click to switch styles</Text>
<Button title="Click" onPress={() => {this._onClick()}} />
<Button
title="Click"
onPress={() => {
this._onClick();
}}
/>
</View>
<View style={{backgroundColor: '#EEEEFF', alignItems: 'flex-end'}}>
<Button style={{margin: 5}} title="Text" onPress={this._onClick} />
<Button
style={{margin: 5}}
title="Text"
onPress={this._onClick}
/>
</View>
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={this.state.currentAlignStyle}>
<View style={styles.box} />
</View>
@ -343,12 +335,11 @@ export default class FlexboxLayoutPlayground extends Component {
</View>
</View>
</View>
</View>
</View>
);
}
};
}
const styles = StyleSheet.create({
endAlignStyle: {
@ -381,11 +372,7 @@ const styles = StyleSheet.create({
backgroundColor: '#660000',
},
emptyStyle: {
},
emptyStyle: {},
nativeStackPanel: {
borderWidth: 5,
@ -417,7 +404,7 @@ const styles = StyleSheet.create({
borderColor: '#000000',
margin: 10,
},
section : {
section: {
flex: 1,
flexDirection: 'column',
},
@ -668,7 +655,7 @@ const styles = StyleSheet.create({
width: 50,
height: 50,
backgroundColor: '#333333',
}
},
});
AppRegistry.registerComponent('Bootstrap', () => FlexboxLayoutPlayground);

90
vnext/Universal.SampleApp/geosample.js
Просмотреть файл

@ -1,7 +1,11 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
@ -11,8 +15,7 @@ import {
} from 'react-native';
export default class Bootstrap extends Component {
constructor(props)
{
constructor(props) {
super(props);
this.state = {
lat: '?',
@ -25,55 +28,56 @@ export default class Bootstrap extends Component {
this.watchID = -1;
}
ResetState()
{
ResetState() {
this.setState({
lat: '?',
long: '?',
timestamp: '?',
lastError: '?'
})
lastError: '?',
});
}
OnRequestAuth()
{
OnRequestAuth() {
// Instead of importing the Geolocation module, use browser polyfill
navigator.geolocation.requestAuthorization();
this.ResetState();
this.setState({lastCmd: "RequestAuth"});
this.setState({lastCmd: 'RequestAuth'});
}
OnGetCurrentPos()
{
OnGetCurrentPos() {
// Instead of importing the Geolocation module, use browser polyfill
navigator.geolocation.getCurrentPosition(
(result) => { this.OnPosChanged(result); },
(error) => { this.setState({lastError: error}); }
result => {
this.OnPosChanged(result);
},
error => {
this.setState({lastError: error});
},
);
this.ResetState();
this.setState({lastCmd: "GetCurrentPos"});
this.setState({lastCmd: 'GetCurrentPos'});
}
OnStartWatching()
{
this.watchID = navigator.geolocation.watchPosition((pos) => { this.OnPosChanged(pos) });
OnStartWatching() {
this.watchID = navigator.geolocation.watchPosition(pos => {
this.OnPosChanged(pos);
});
this.ResetState();
this.setState({lastCmd: "StartWatching"});
this.setState({lastCmd: 'StartWatching'});
}
OnStopWatching()
{
if (this.watchID != -1)
OnStopWatching() {
if (this.watchID !== -1) {
navigator.geolocation.clearWatch(this.watchID);
}
this.watchID = -1;
this.ResetState();
this.setState({lastCmd: "StopWatching"});
this.setState({lastCmd: 'StopWatching'});
}
OnPosChanged(pos)
{
OnPosChanged(pos) {
this.setState({
lat: pos.coords.latitude,
long: pos.coords.longitude,
@ -84,41 +88,31 @@ export default class Bootstrap extends Component {
render() {
return (
<View style={styles.container}>
<TouchableWithoutFeedback onPress={() => this.OnRequestAuth() }>
<TouchableWithoutFeedback onPress={() => this.OnRequestAuth()}>
<View style={styles.fauxbutton}>
<Text style={{textAlign: 'center'}}>Request Auth</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.OnGetCurrentPos() }>
<TouchableWithoutFeedback onPress={() => this.OnGetCurrentPos()}>
<View style={styles.fauxbutton}>
<Text style={{textAlign: 'center'}}>GetCurrentPosition</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.OnStartWatching() }>
<TouchableWithoutFeedback onPress={() => this.OnStartWatching()}>
<View style={styles.fauxbutton}>
<Text style={{textAlign: 'center'}}>StartWatching</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.OnStopWatching() }>
<TouchableWithoutFeedback onPress={() => this.OnStopWatching()}>
<View style={styles.fauxbutton}>
<Text style={{textAlign: 'center'}}>StopWatching</Text>
</View>
</TouchableWithoutFeedback>
<Text style={styles.stuff}>
Lat: {this.state.lat}
</Text>
<Text style={styles.stuff}>
Long: {this.state.long}
</Text>
<Text style={styles.stuff}>
timestamp: {this.state.timestamp}
</Text>
<Text style={styles.stuff}>
lastcmd: {this.state.lastCmd}
</Text>
<Text style={styles.stuff}>
lastError: {this.state.lastError}
</Text>
<Text style={styles.stuff}>Lat: {this.state.lat}</Text>
<Text style={styles.stuff}>Long: {this.state.long}</Text>
<Text style={styles.stuff}>timestamp: {this.state.timestamp}</Text>
<Text style={styles.stuff}>lastcmd: {this.state.lastCmd}</Text>
<Text style={styles.stuff}>lastError: {this.state.lastError}</Text>
</View>
);
}
@ -140,8 +134,8 @@ const styles = StyleSheet.create({
backgroundColor: 'red',
width: 150,
borderWidth: 1,
borderColor: 'black'
}
borderColor: 'black',
},
});
AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

18
vnext/Universal.SampleApp/image.uwp.js
Просмотреть файл

@ -12,7 +12,7 @@ import {
View,
Text,
Switch,
StyleSheet
StyleSheet,
} from 'react-native';
const largeImageUri = 'https://cdn.freebiesupply.com/logos/large/2x/react-logo-png-transparent.png';
@ -22,7 +22,7 @@ export default class Bootstrap extends Component {
state = {
selectedResizeMode: 'center',
useLargeImage: false,
imageUrl: 'http://facebook.github.io/react-native/img/header_logo.png'
imageUrl: 'http://facebook.github.io/react-native/img/header_logo.png',
};
switchImageUrl = () => {
@ -57,7 +57,7 @@ export default class Bootstrap extends Component {
<View style={styles.imageContainer}>
<Image style={styles.image} source={{ uri: this.state.imageUrl }} resizeMode={this.state.selectedResizeMode}/>
</View>
</View>
);
}
@ -68,27 +68,27 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 5
marginBottom: 5,
},
rowContainer: {
flexDirection: 'row',
alignItems: 'center'
alignItems: 'center',
},
imageContainer: {
marginTop: 5,
backgroundColor: 'orange',
height: '50%',
width: '75%'
width: '75%',
},
image: {
height: '100%',
width: '100%'
width: '100%',
},
title: {
fontWeight: 'bold',
margin: 5,
width: 80
}
width: 80,
},
});
AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

788
vnext/Universal.SampleApp/index.uwp.js
Просмотреть файл

@ -1,7 +1,11 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import {
AppRegistry,
Button,
@ -12,35 +16,36 @@ import {
View,
WebView,
Image,
Linking,
TextInput,
TouchableHighlight,
ActivityIndicator
ActivityIndicator,
} from 'react-native';
import {
CheckBox,
DatePicker,
Popup,
Picker
} from 'react-native-windows';
import {CheckBox, DatePicker, Popup, Picker} from 'react-native-windows';
class TicTacButton extends Component {
constructor(props) {
super(props);
this._onPress = this._onPress.bind(this);
this.state = { text: '?' };
this.state = {text: '?'};
}
render() {
return (
<Button onPress={this._onPress} title={this.state.text} accessibilityLabel={this.state.text} />
<Button
onPress={this._onPress}
title={this.state.text}
accessibilityLabel={this.state.text}
/>
);
}
_onPress(e) {
if (this.state.text == 'X')
this.setState({ text: 'o' });
else
this.setState({ text: 'X' });
if (this.state.text === 'X') {
this.setState({text: 'o'});
} else {
this.setState({text: 'X'});
}
}
}
@ -54,31 +59,40 @@ class PopupButton extends Component {
buttonTitle: 'Open Flyout',
isFlyoutVisible: false,
popupCheckBoxState: true,
isLightDismissEnabled: false
isLightDismissEnabled: false,
};
}
render() {
return (
<View style={{ flexDirection: 'row', padding: 20 }}>
<Text style={{ padding: 5 }}>isLightDismissEnabled: </Text>
<View style={{flexDirection: 'row', padding: 20}}>
<Text style={{padding: 5}}>isLightDismissEnabled: </Text>
<CheckBox
checked={this.state.isLightDismissEnabled}
onValueChange={value => this.setState({ isLightDismissEnabled: value })} />
<Button onPress={this._onPress} title={this.state.buttonTitle} accessibilityLabel={this.state.buttonTitle}/>
onValueChange={value => this.setState({isLightDismissEnabled: value})}
/>
<Button
onPress={this._onPress}
title={this.state.buttonTitle}
accessibilityLabel={this.state.buttonTitle}
/>
<Popup
isOpen={this.state.isFlyoutVisible}
isLightDismissEnabled={this.state.isLightDismissEnabled}
verticalOffset={50}
horizontalOffset={350}
onDismiss={this._onPopupDismissed}
>
<View style={{ backgroundColor: 'lightgray', width: 200, height: 300 }}>
<Text style={{ justifyContent: 'center', paddingTop: 10 }}>This is a flyout</Text>
onDismiss={this._onPopupDismissed}>
<View style={{backgroundColor: 'lightgray', width: 200, height: 300}}>
<Text style={{justifyContent: 'center', paddingTop: 10}}>
This is a flyout
</Text>
<CheckBox
style={{ justifyContent: 'center', padding: 20 }}
style={{justifyContent: 'center', padding: 20}}
checked={this.state.popupCheckBoxState}
onValueChange={value => this.setState({ popupCheckBoxState: value })} />
onValueChange={value =>
this.setState({popupCheckBoxState: value})
}
/>
<Button onPress={this._onPopupButtonPressed} title="Close" />
</View>
</Popup>
@ -87,18 +101,19 @@ class PopupButton extends Component {
}
openPopup() {
this.setState({ buttonTitle: 'Close Flyout', isFlyoutVisible: true });
this.setState({buttonTitle: 'Close Flyout', isFlyoutVisible: true});
}
closePopup() {
this.setState({ buttonTitle: 'Open Flyout', isFlyoutVisible: false });
this.setState({buttonTitle: 'Open Flyout', isFlyoutVisible: false});
}
_onPress(e) {
if (this.state.isFlyoutVisible)
if (this.state.isFlyoutVisible) {
this.closePopup();
else
} else {
this.openPopup();
}
}
_onPopupButtonPressed(e) {
@ -114,7 +129,7 @@ export default class Bootstrap extends Component {
state = {
checkBoxIsOn: true,
switchIsOn: true,
pickerSelectedValue: "key1",
pickerSelectedValue: 'key1',
pickerSelectedIndex: 0,
datePickerSelectedValue: new Date(),
};
@ -123,231 +138,598 @@ export default class Bootstrap extends Component {
return (
<ScrollView>
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native
</Text>
<Text style={styles.welcome}>Welcome to React Native</Text>
<Text style={styles.instructions}>
To get started, edit index.uwp.js
</Text>
<Text>
Nested text
<Text style={{color: '#3333ff'}}> starts right here! <Text style={{color: '#ff3333'}}>(But wait, here is more!)</Text></Text>
</Text>
<Text>ScrollView:</Text>
<ScrollView style={{width: 200, height: 200}}
onScroll={() => { console.log('onScroll!'); }}
onScrollBeginDrag={() => { console.log('onScroll begin drag!'); }}
onScrollEndDrag={() => { console.log('onScroll end drag!'); }}
>
<Text>Foo</Text>
<Text>Foo2</Text>
<Text>Foo3</Text>
<Text>Foo4</Text>
<Text>Foo5</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<View style={{height:500}}>
</Text>
<Text>
Nested text
<Text style={{color: '#3333ff'}}>
{' '}
starts right here!{' '}
<Text style={{color: '#ff3333'}}>(But wait, here is more!)</Text>
</Text>
</Text>
<Text>ScrollView:</Text>
<ScrollView
style={{width: 200, height: 200}}
onScroll={() => {
console.log('onScroll!');
}}
onScrollBeginDrag={() => {
console.log('onScroll begin drag!');
}}
onScrollEndDrag={() => {
console.log('onScroll end drag!');
}}>
<Text>Foo</Text>
</View>
</ScrollView>
<TicTacButton/>
<ActivityIndicator size='large' color="green"></ActivityIndicator>
<Text style={{marginTop: 15}}>Big Border & Clipping Tests:</Text>
<View style={{ flexDirection: 'row' }}>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<Text>Foo2</Text>
<Text>Foo3</Text>
<Text>Foo4</Text>
<Text>Foo5</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<Text>Foo</Text>
<View style={{height: 500}}>
<Text>Foo</Text>
</View>
</ScrollView>
<TicTacButton />
<ActivityIndicator size="large" color="green" />
<Text style={{marginTop: 15}}>Big Border & Clipping Tests:</Text>
<View style={{flexDirection: 'row'}}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>accessible</Text>
<View accessible={true} acceptsKeyboardFocus={true} accessibilityLabel="Empty Rectangle" style={{ backgroundColor: 'yellow', borderWidth: 1, borderColor: 'brown', width: 60, height: 60, margin: 10 }} />
<View
accessible={true}
acceptsKeyboardFocus={true}
accessibilityLabel="Empty Rectangle"
style={{
backgroundColor: 'yellow',
borderWidth: 1,
borderColor: 'brown',
width: 60,
height: 60,
margin: 10,
}}
/>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>no border</Text>
<View style={{ backgroundColor: 'orange', borderWidth: 4, width: 60, height: 60, margin: 10 }} />
<View
style={{
backgroundColor: 'orange',
borderWidth: 4,
width: 60,
height: 60,
margin: 10,
}}
/>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>no back</Text>
<View style={{ borderWidth: 4, borderColor: 'black', width: 60, height: 60, margin: 10 }} />
<View
style={{
borderWidth: 4,
borderColor: 'black',
width: 60,
height: 60,
margin: 10,
}}
/>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>normal</Text>
<View style={{ backgroundColor: 'orange', borderColor: 'black', borderWidth: 4, width: 60, height: 60, margin: 10 }} />
<View
style={{
backgroundColor: 'orange',
borderColor: 'black',
borderWidth: 4,
width: 60,
height: 60,
margin: 10,
}}
/>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>no clip</Text>
<View style={{backgroundColor: 'orange', borderColor: 'black', borderWidth: 4, borderTopStartRadius: 10.0, borderTopEndRadius: 15.0, borderBottomStartRadius: 20.0, borderBottomEndRadius: 25.0, width: 60, height: 60, margin: 10}}>
<View style={{backgroundColor: 'green', width: 52, height: 52}} />
<View
style={{
backgroundColor: 'orange',
borderColor: 'black',
borderWidth: 4,
borderTopStartRadius: 10.0,
borderTopEndRadius: 15.0,
borderBottomStartRadius: 20.0,
borderBottomEndRadius: 25.0,
width: 60,
height: 60,
margin: 10,
}}>
<View
style={{backgroundColor: 'green', width: 52, height: 52}}
/>
</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>no clip</Text>
<View style={{backgroundColor: 'orange', borderColor: 'black', borderWidth: 4, borderTopStartRadius: 10.0, borderTopEndRadius: 15.0, borderBottomStartRadius: 20.0, borderBottomEndRadius: 25.0, width: 60, height: 60, margin: 10}}>
<View style={{backgroundColor: 'green', width: 30, height: 15, left: -10, top: 0}}/>
<View style={{backgroundColor: 'blue', width: 15, height: 40, left: 0, top: 5}}/>
<View style={{backgroundColor: 'crimson', width: 40, height: 40, left: 25, top: -50}}/>
<View
style={{
backgroundColor: 'orange',
borderColor: 'black',
borderWidth: 4,
borderTopStartRadius: 10.0,
borderTopEndRadius: 15.0,
borderBottomStartRadius: 20.0,
borderBottomEndRadius: 25.0,
width: 60,
height: 60,
margin: 10,
}}>
<View
style={{
backgroundColor: 'green',
width: 30,
height: 15,
left: -10,
top: 0,
}}
/>
<View
style={{
backgroundColor: 'blue',
width: 15,
height: 40,
left: 0,
top: 5,
}}
/>
<View
style={{
backgroundColor: 'crimson',
width: 40,
height: 40,
left: 25,
top: -50,
}}
/>
</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>no clip</Text>
<View style={{backgroundColor: 'orange', borderColor: 'black', borderWidth: 4, borderTopStartRadius: 10.0, borderTopEndRadius: 15.0, borderBottomStartRadius: 20.0, borderBottomEndRadius: 25.0, width: 60, height: 60, margin: 10, overflow: 'visible'}}>
<View style={{backgroundColor: 'green', width: 30, height: 15, left: -10, top: 0}}/>
<View style={{backgroundColor: 'blue', width: 15, height: 40, left: 0, top: 5}}/>
<View style={{backgroundColor: 'crimson', width: 40, height: 40, left: 25, top: -50}}/>
<View
style={{
backgroundColor: 'orange',
borderColor: 'black',
borderWidth: 4,
borderTopStartRadius: 10.0,
borderTopEndRadius: 15.0,
borderBottomStartRadius: 20.0,
borderBottomEndRadius: 25.0,
width: 60,
height: 60,
margin: 10,
overflow: 'visible',
}}>
<View
style={{
backgroundColor: 'green',
width: 30,
height: 15,
left: -10,
top: 0,
}}
/>
<View
style={{
backgroundColor: 'blue',
width: 15,
height: 40,
left: 0,
top: 5,
}}
/>
<View
style={{
backgroundColor: 'crimson',
width: 40,
height: 40,
left: 25,
top: -50,
}}
/>
</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
</View>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>clipped</Text>
<View style={{backgroundColor: 'orange', borderColor: 'black', borderWidth: 4, borderTopStartRadius: 10.0, borderTopEndRadius: 15.0, borderBottomStartRadius: 20.0, borderBottomEndRadius: 25.0, width: 60, height: 60, margin: 10, overflow: 'hidden'}}>
<View style={{backgroundColor: 'green', width: 30, height: 15, left: -10, top: 0}}/>
<View style={{backgroundColor: 'blue', width: 15, height: 40, left: 0, top: 5}}/>
<View style={{backgroundColor: 'crimson', width: 40, height: 40, left: 25, top: -50}}/>
<View
style={{
backgroundColor: 'orange',
borderColor: 'black',
borderWidth: 4,
borderTopStartRadius: 10.0,
borderTopEndRadius: 15.0,
borderBottomStartRadius: 20.0,
borderBottomEndRadius: 25.0,
width: 60,
height: 60,
margin: 10,
overflow: 'hidden',
}}>
<View
style={{
backgroundColor: 'green',
width: 30,
height: 15,
left: -10,
top: 0,
}}
/>
<View
style={{
backgroundColor: 'blue',
width: 15,
height: 40,
left: 0,
top: 5,
}}
/>
<View
style={{
backgroundColor: 'crimson',
width: 40,
height: 40,
left: 25,
top: -50,
}}
/>
</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>circle</Text>
<View style={{backgroundColor: 'orange', borderRadius: 30, width: 60, height: 60, margin: 10, overflow: 'hidden'}}>
<View style={{backgroundColor: 'purple', width: 60, height: 60}} />
<View
style={{
backgroundColor: 'orange',
borderRadius: 30,
width: 60,
height: 60,
margin: 10,
overflow: 'hidden',
}}>
<View
style={{backgroundColor: 'purple', width: 60, height: 60}}
/>
</View>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center' }}>
<View style={{flexDirection: 'column', alignItems: 'center'}}>
<Text>circle</Text>
<View style={{ backgroundColor: 'orange', borderRadius: 30, width: 60, height: 60, margin: 10 }} acceptsKeyboardFocus={true}>
<View style={{backgroundColor: 'magenta', width: 60, height: 60}} />
<View
style={{
backgroundColor: 'orange',
borderRadius: 30,
width: 60,
height: 60,
margin: 10,
}}
acceptsKeyboardFocus={true}>
<View
style={{backgroundColor: 'magenta', width: 60, height: 60}}
/>
</View>
</View>
</View>
<Text style={{marginTop: 5}}>Border Tests:</Text>
<View style={{flexDirection: 'row'}}>
<View style={{borderColor: 'red', borderWidth: 1, borderTopStartRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderTopEndRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderBottomStartRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderBottomEndRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderRadius: 10.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderRadius: 10.0, borderTopStartRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderRadius: 10.0, borderTopEndRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderRadius: 10.0, borderBottomStartRadius: 5.0, width:40, height:40, margin:4}} />
<View style={{borderColor: 'red', borderWidth: 1, borderRadius: 10.0, borderBottomEndRadius: 5.0, width:40, height:40, margin:4}} />
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderTopStartRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderTopEndRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderBottomStartRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderBottomEndRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderRadius: 10.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderRadius: 10.0,
borderTopStartRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderRadius: 10.0,
borderTopEndRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderRadius: 10.0,
borderBottomStartRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
<View
style={{
borderColor: 'red',
borderWidth: 1,
borderRadius: 10.0,
borderBottomEndRadius: 5.0,
width: 40,
height: 40,
margin: 4,
}}
/>
</View>
<Text style={{margin: 5, marginTop: 10}}>Position Tests:</Text>
<View style={{width: 500, height: 100, backgroundColor: 'lightblue'}}>
<View style={{backgroundColor: 'blue', width: 100, height: 40, position: 'absolute', left: '50%'}}/>
<View style={{backgroundColor: 'red', width: 100, height: 40, position: 'absolute', top: '25%'}}/>
<View style={{backgroundColor: 'green', width: 100, height: 40, position: 'absolute', bottom: '5%'}}/>
<View style={{backgroundColor: 'yellow', width: 100, height: 40, position: 'absolute', right: '50%'}}/>
<View style={{backgroundColor: 'aqua', width: '50%', height: 40, position: 'absolute', left: 20, top: 30}}/>
<View style={{backgroundColor: 'orange', width: 50, height: 50, position: 'absolute', right: 10, bottom: 10}}/>
<View
style={{
backgroundColor: 'blue',
width: 100,
height: 40,
position: 'absolute',
left: '50%',
}}
/>
<View
style={{
backgroundColor: 'red',
width: 100,
height: 40,
position: 'absolute',
top: '25%',
}}
/>
<View
style={{
backgroundColor: 'green',
width: 100,
height: 40,
position: 'absolute',
bottom: '5%',
}}
/>
<View
style={{
backgroundColor: 'yellow',
width: 100,
height: 40,
position: 'absolute',
right: '50%',
}}
/>
<View
style={{
backgroundColor: 'aqua',
width: '50%',
height: 40,
position: 'absolute',
left: 20,
top: 30,
}}
/>
<View
style={{
backgroundColor: 'orange',
width: 50,
height: 50,
position: 'absolute',
right: 10,
bottom: 10,
}}
/>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
<Picker style={{ width: 100 }} selectedValue={this.state.pickerSelectedValue} onValueChange={this.pickerValueChange} accessibilityLabel="test picker" testID="pickerID">
<View
style={{flexDirection: 'row', alignItems: 'center', padding: 10}}>
<Picker
style={{width: 100}}
selectedValue={this.state.pickerSelectedValue}
onValueChange={this.pickerValueChange}
accessibilityLabel="test picker"
testID="pickerID">
<Picker.Item label="item 1" color="blue" value="key0" />
<Picker.Item label="item 2" value="key1" />
</Picker>
<Text style={{ margin: 6 }}>selectedIndex: {this.state.pickerSelectedIndex} selectedValue: {this.state.pickerSelectedValue}</Text>
<Button title="Clear selection" onPress={this.pickerClearSelection} />
<Text style={{margin: 6}}>
selectedIndex: {this.state.pickerSelectedIndex} selectedValue:{' '}
{this.state.pickerSelectedValue}
</Text>
<Button
title="Clear selection"
onPress={this.pickerClearSelection}
/>
</View>
<View style={{ alignItems: 'center', padding: 10 }}>
<View style={{alignItems: 'center', padding: 10}}>
<Text>Test Popup: </Text>
<PopupButton />
</View>
<View style={{ backgroundColor: 'blue', marginTop: 15 }}>
<View style={{backgroundColor: 'blue', marginTop: 15}}>
<Image
style={{ width: 50, height: 50 }}
source={{ uri: 'http://facebook.github.io/react-native/img/header_logo.png' }}
onLoadStart={() => { console.log('image onLoadStart!'); }}
onLoad={() => { console.log('image onLoad!'); }}
onLoadEnd={() => { console.log('image onLoadEnd!'); }}
onError={() => { console.log('image onError!'); }}
style={{width: 50, height: 50}}
source={{
uri:
'http://facebook.github.io/react-native/img/header_logo.png',
}}
onLoadStart={() => {
console.log('image onLoadStart!');
}}
onLoad={() => {
console.log('image onLoad!');
}}
onLoadEnd={() => {
console.log('image onLoadEnd!');
}}
onError={() => {
console.log('image onError!');
}}
/>
</View>
<View style={{ backgroundColor: 'yellow', marginTop: 15 }}>
<View style={{backgroundColor: 'yellow', marginTop: 15}}>
<Image
style={{ width: 66, height: 58 }}
source={{ width: 66, height: 58,
uri:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=="
style={{width: 66, height: 58}}
source={{
width: 66,
height: 58,
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>
/>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<View
style={{flexDirection: 'row', alignItems: 'center', marginTop: 15}}>
<CheckBox
onValueChange={value => this.setState({ checkBoxIsOn: value })}
onValueChange={value => this.setState({checkBoxIsOn: value})}
defaultChecked={true}
checked={this.state.checkBoxIsOn} />
<Text>Checkbox {this.state.checkBoxIsOn ? "ON" : "OFF"}</Text>
checked={this.state.checkBoxIsOn}
/>
<Text>Checkbox {this.state.checkBoxIsOn ? 'ON' : 'OFF'}</Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<View
style={{flexDirection: 'row', alignItems: 'center', marginTop: 15}}>
<Switch
onValueChange={value => this.setState({ switchIsOn: value })}
onValueChange={value => this.setState({switchIsOn: value})}
defaultChecked={true}
value={this.state.switchIsOn} />
<Text>Switch {this.state.switchIsOn ? "ON" : "OFF"}</Text>
value={this.state.switchIsOn}
/>
<Text>Switch {this.state.switchIsOn ? 'ON' : 'OFF'}</Text>
</View>
<View style={{ padding: 10 }}>
<View style={{padding: 10}}>
<View>
<TouchableHighlight style={{ height: 30 }} onPress={this.focusTextInputPressed} underlayColor={'transparent'}>
<View style={[this.state.highlightPressed ? styles.selected : {}]}>
<TouchableHighlight
style={{height: 30}}
onPress={this.focusTextInputPressed}
underlayColor={'transparent'}>
<View
style={[this.state.highlightPressed ? styles.selected : {}]}>
<Text>Click to focus textbox</Text>
</View>
</TouchableHighlight>
</View>
<View>
<TouchableHighlight style={{ height: 30 }} onPress={this.blurTextInputPressed} underlayColor={'transparent'}>
<View style={[this.state.highlightPressed ? styles.selected : {}]}>
<TouchableHighlight
style={{height: 30}}
onPress={this.blurTextInputPressed}
underlayColor={'transparent'}>
<View
style={[this.state.highlightPressed ? styles.selected : {}]}>
<Text>Click to remove focus from textbox</Text>
</View>
</TouchableHighlight>
</View>
<View>
<TouchableHighlight style={{ height: 30 }} onPress={this.clearTextInputPressed} underlayColor={'transparent'}>
<View style={[this.state.highlightPressed ? styles.selected : {}]}>
<TouchableHighlight
style={{height: 30}}
onPress={this.clearTextInputPressed}
underlayColor={'transparent'}>
<View
style={[this.state.highlightPressed ? styles.selected : {}]}>
<Text>Click to clear textbox</Text>
</View>
</TouchableHighlight>
</View>
<TextInput
ref={c => (this._input = c)}
defaultValue={"Test"}
placeholderTextColor={"hotpink"}
defaultValue={'Test'}
placeholderTextColor={'hotpink'}
onChangeText={this.changeTextHandler}
onFocus={this.focusTextInputHandler}
onBlur={this.blurTextInputHandler}
onSelectionChange={this.selectionChangeTextInputHandler}
onEndEditing={this.endEditingTextInputHandler}
onContentSizeChange={this.contentSizeChangeTextInputHandler}
selectionColor={"red"}
selectionColor={'red'}
clearTextOnFocus={false}
selectTextOnFocus={true}
style={{ height: 30 }}
style={{height: 30}}
/>
<TextInput
ref={c => (this._input = c)}
defaultValue={"Test"}
placeholderTextColor={"hotpink"}
defaultValue={'Test'}
placeholderTextColor={'hotpink'}
onChangeText={this.changeTextHandler}
onFocus={this.focusTextInputHandler}
onBlur={this.blurTextInputHandler}
onSelectionChange={this.selectionChangeTextInputHandler}
onEndEditing={this.endEditingTextInputHandler}
onContentSizeChange={this.contentSizeChangeTextInputHandler}
selectionColor={"red"}
style={{ height: 30 }}
selectionColor={'red'}
style={{height: 30}}
/>
</View>
<WebView
style={{ width: 350, height: 500 }}
source={{ uri: 'https://login.live.com' }}
style={{width: 350, height: 500}}
source={{uri: 'https://login.live.com'}}
/>
<View style={{ padding: 10 }}>
<View style={{padding: 10}}>
<Text>Test DatePicker</Text>
<Text>Date selected: {this.state.datePickerSelectedValue.toString()}</Text>
<Text>
Date selected: {this.state.datePickerSelectedValue.toString()}
</Text>
<DatePicker
placeholderText='select start date'
dateFormat='longdate'
dayOfWeekFormat='{dayofweek.abbreviated(3)}'
style={{ width: 300 }}
placeholderText="select start date"
dateFormat="longdate"
dayOfWeekFormat="{dayofweek.abbreviated(3)}"
style={{width: 300}}
onDateChange={this.datePickerValueChange}
/>
</View>
@ -357,77 +739,87 @@ export default class Bootstrap extends Component {
}
throwException = () => {
throw "This is a test exception";
}
throw 'This is a test exception';
};
mouseEnter = () => {
this.setState({ mouseEntered: true })
}
this.setState({mouseEntered: true});
};
mouseLeave = () => {
this.setState({ mouseEntered: false })
}
this.setState({mouseEntered: false});
};
pickerValueChange = (value, index) => {
this.setState({ pickerSelectedValue: value, pickerSelectedIndex: index });
}
this.setState({pickerSelectedValue: value, pickerSelectedIndex: index});
};
pickerClearSelection = () => {
this.setState({ pickerSelectedValue: undefined, pickerSelectedIndex: -1 });
}
this.setState({pickerSelectedValue: undefined, pickerSelectedIndex: -1});
};
highlightTextPressed = () => {
this.setState({ highlightPressed: !this.state.highlightPressed });
this.setState({highlightPressed: !this.state.highlightPressed});
Linking.canOpenURL("https://www.microsoft.com")
Linking.canOpenURL('https://www.microsoft.com')
.then(canOpen => {
if (canOpen)
Linking.openURL("https://www.microsoft.com");
if (canOpen) {
Linking.openURL('https://www.microsoft.com');
}
})
.catch(() => {
console.error("exception from Linking.canOpenURL");
})
}
console.error('exception from Linking.canOpenURL');
});
};
focusTextInputPressed = () => {
this._input.focus();
}
};
blurTextInputPressed = () => {
this._input.blur();
}
};
clearTextInputPressed = () => {
this._input.clear();
}
};
changeTextHandler = (text) => {
changeTextHandler = text => {
console.log(text);
}
};
focusTextInputHandler = () => {
console.log("textbox focused");
}
console.log('textbox focused');
};
blurTextInputHandler = () => {
console.log("textbox blurred");
}
console.log('textbox blurred');
};
selectionChangeTextInputHandler = (event) => {
console.log("selection start: " + event.nativeEvent.selection.start + ", end: " + event.nativeEvent.selection.end);
}
selectionChangeTextInputHandler = event => {
console.log(
'selection start: ' +
event.nativeEvent.selection.start +
', end: ' +
event.nativeEvent.selection.end,
);
};
endEditingTextInputHandler = (event) => {
endEditingTextInputHandler = event => {
console.log(event.nativeEvent.text);
}
};
contentSizeChangeTextInputHandler = (event) => {
console.log("new size width: " + event.nativeEvent.contentSize.width + ", height: " + event.nativeEvent.contentSize.height);
}
contentSizeChangeTextInputHandler = event => {
console.log(
'new size width: ' +
event.nativeEvent.contentSize.width +
', height: ' +
event.nativeEvent.contentSize.height,
);
};
datePickerValueChange = (date) => {
this.setState({ datePickerSelectedValue: date });
}
datePickerValueChange = date => {
this.setState({datePickerSelectedValue: date});
};
}
const styles = StyleSheet.create({

122
vnext/Universal.SampleApp/mouse.uwp.js
Просмотреть файл

@ -1,38 +1,61 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View,
Button,
Text,
TouchableHighlight
TouchableHighlight,
} from 'react-native';
export default class Bootstrap extends Component {
constructor() {
super();
this.state = {clicked: 0, mouseEntered0: false, mouseEntered1: false, mouseEntered2: false};
this.state = {
clicked: 0,
mouseEntered0: false,
mouseEntered1: false,
mouseEntered2: false,
};
}
render() {
return (
<View style={styles.container} onMouseEnter={this.mouseEnter0} onMouseLeave={this.mouseLeave0}>
<View onMouseEnter={this.mouseEnter1} onMouseLeave={this.mouseLeave1} style={{ backgroundColor: this.state.mouseEntered1 ? 'yellow' : 'green'}}>
<TouchableHighlight onMouseEnter={this.mouseEnter2}
onMouseLeave={this.mouseLeave2}
onPress={this.press}
onPressIn={this.pressIn}
onPressOut={this.pressOut}
style={{ backgroundColor: this.state.mouseEntered2 ? 'blue' : 'transparent'}}>
<View
style={styles.container}
onMouseEnter={this.mouseEnter0}
onMouseLeave={this.mouseLeave0}>
<View
onMouseEnter={this.mouseEnter1}
onMouseLeave={this.mouseLeave1}
style={{
backgroundColor: this.state.mouseEntered1 ? 'yellow' : 'green',
}}>
<TouchableHighlight
onMouseEnter={this.mouseEnter2}
onMouseLeave={this.mouseLeave2}
onPress={this.press}
onPressIn={this.pressIn}
onPressOut={this.pressOut}
style={{
backgroundColor: this.state.mouseEntered2
? 'blue'
: 'transparent',
}}>
<Text>World</Text>
</TouchableHighlight>
<Text>Hello</Text>
</View>
<View style={{backgroundColor: this.state.mouseEntered0 ? 'green' : 'transparent'}}>
<View
style={{
backgroundColor: this.state.mouseEntered0 ? 'green' : 'transparent',
}}>
<Text>Mousey</Text>
</View>
</View>
@ -41,53 +64,42 @@ export default class Bootstrap extends Component {
click = () => {
this.setState({clicked: this.state.clicked + 1});
}
mouseEnter0 = () =>
{
this.setState({mouseEntered0: true})
}
};
mouseEnter0 = () => {
this.setState({mouseEntered0: true});
};
mouseLeave0 = () =>
{
this.setState({mouseEntered0: false})
}
mouseLeave0 = () => {
this.setState({mouseEntered0: false});
};
mouseEnter1 = () =>
{
this.setState({mouseEntered1: true})
}
mouseEnter1 = () => {
this.setState({mouseEntered1: true});
};
mouseLeave1 = () =>
{
this.setState({mouseEntered1: false})
}
mouseEnter2 = (event) =>
{
mouseLeave1 = () => {
this.setState({mouseEntered1: false});
};
mouseEnter2 = event => {
console.log(event);
this.setState({mouseEntered2: true})
}
this.setState({mouseEntered2: true});
};
mouseLeave2 = () =>
{
this.setState({mouseEntered2: false})
}
press = (event) =>
{
console.log("press")
mouseLeave2 = () => {
this.setState({mouseEntered2: false});
};
press = event => {
console.log('press');
console.log(event);
}
pressIn = (event) =>
{
console.log("pressin")
};
pressIn = event => {
console.log('pressin');
console.log(event);
}
pressOut = (event) =>
{
console.log("pressout")
};
pressOut = event => {
console.log('pressout');
console.log(event);
}
};
}
const styles = StyleSheet.create({

19
vnext/Universal.SampleApp/simple.uwp.js
Просмотреть файл

@ -1,21 +1,20 @@
/**
* Sample React Native App
* https://github.com/facebook/react-native
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
} from 'react-native';
import React, {Component} from 'react';
import {AppRegistry, View} from 'react-native';
export default class Bootstrap extends Component {
render() {
return (
<View accessible={true} style={{ borderRadius: 30, width: 60, height: 60, margin: 10 }}>
<View style={{ backgroundColor: 'magenta', width: 60, height: 60 }} />
<View
accessible={true}
style={{borderRadius: 30, width: 60, height: 60, margin: 10}}>
<View style={{backgroundColor: 'magenta', width: 60, height: 60}} />
</View>
);
}

8
vnext/Universal.SampleApp/test.uwp.js
Просмотреть файл

@ -10,7 +10,7 @@ import {
StyleSheet,
Text,
TextInput,
View
View,
} from 'react-native';
export default class Bootstrap extends Component {
@ -40,20 +40,20 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'lightgray'
backgroundColor: 'lightgray',
},
item: {
margin: 10,
backgroundColor: 'lightpink',
borderColor: 'indianred',
borderWidth: 2,
justifyContent: 'center'
justifyContent: 'center',
},
text: {
fontSize: 20,
textAlign: 'center',
color: 'black',
margin: 10
margin: 10,
},
});

185
vnext/Universal.SampleApp/view.uwp.js
Просмотреть файл

@ -1,34 +1,29 @@
/**
* Sample React Native App
* https://github.com/facebook/react-native
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
* @flow
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import {
ActivityIndicator,
AppRegistry,
ScrollView,
StyleSheet,
Switch,
Text,
TextInput,
View,
} from 'react-native';
import {
CheckBox,
DatePicker,
Picker,
} from 'react-native-windows';
import {CheckBox, DatePicker, Picker} from 'react-native-windows';
export default class Bootstrap extends Component {
constructor(props) {
super(props);
this.state = { focusable: true, hasBorder: true, radius: true };
this.state = {focusable: true, hasBorder: true, radius: true};
}
render() {
styles = StyleSheet.create({
const styles = StyleSheet.create({
noBorder: {
margin: 20,
padding: 15,
@ -60,35 +55,53 @@ export default class Bootstrap extends Component {
});
return (
<View style={{ flex: 1, flexDirection: 'column', alignSelf: 'center', alignItems: 'center', justifyContent: 'center', width: 250, backgroundColor: 'azure', paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
<View
style={{
flex: 1,
flexDirection: 'column',
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
width: 250,
backgroundColor: 'azure',
paddingHorizontal: 20,
}}>
<View style={{flexDirection: 'row', alignSelf: 'flex-start'}}>
<CheckBox
onValueChange={value => this.setState({ focusable: value })}
checked={this.state.focusable} />
onValueChange={value => this.setState({focusable: value})}
checked={this.state.focusable}
/>
<Text>acceptsKeyboardFocus</Text>
</View>
<View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
<View style={{flexDirection: 'row', alignSelf: 'flex-start'}}>
<CheckBox
onValueChange={value => this.setState({ hasBorder: value })}
checked={this.state.hasBorder} />
onValueChange={value => this.setState({hasBorder: value})}
checked={this.state.hasBorder}
/>
<Text>hasBorder</Text>
</View>
<View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
<View style={{flexDirection: 'row', alignSelf: 'flex-start'}}>
<CheckBox
onValueChange={value => this.setState({ radius: value })}
checked={this.state.radius} />
onValueChange={value => this.setState({radius: value})}
checked={this.state.radius}
/>
<Text>hasRadius</Text>
</View>
<View enableFocusRing={true} acceptsKeyboardFocus={this.state.focusable ? true : false}
style={
!this.state.hasBorder
? (this.state.radius ? styles.radial : styles.noBorder)
: (this.state.radius ? styles.outerBorder : styles.innerBorder)
}>
<View
enableFocusRing={true}
acceptsKeyboardFocus={this.state.focusable ? true : false}
style={
!this.state.hasBorder
? this.state.radius
? styles.radial
: styles.noBorder
: this.state.radius
? styles.outerBorder
: styles.innerBorder
}>
<Text>The text!</Text>
</View>
</View>
@ -97,45 +110,105 @@ export default class Bootstrap extends Component {
fullrender() {
return (
<View accessible={true} style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<View
accessible={true}
style={{
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{flexDirection: 'row', alignItems: 'center', marginTop: 15}}>
<CheckBox
onValueChange={value => this.setState({ focusable: value })}
checked={this.state.focusable} />
onValueChange={value => this.setState({focusable: value})}
checked={this.state.focusable}
/>
<Text>acceptsKeyboardFocus</Text>
</View>
<View enableFocusRing={true} acceptsKeyboardFocus={this.state.focusable ? true : false} style={{ padding: 15, backgroundColor: 'lime', borderColor: 'navy', borderWidth: 2, borderRadius: 0 }}>
<View
enableFocusRing={true}
acceptsKeyboardFocus={this.state.focusable ? true : false}
style={{
padding: 15,
backgroundColor: 'lime',
borderColor: 'navy',
borderWidth: 2,
borderRadius: 0,
}}>
<Text>TEXT</Text>
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<View style={{ height: 25, width: 75, backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<DatePicker style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Picker style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Switch style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<CheckBox style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }} />
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<TextInput style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}
placeholder={"type something ..."}
placeholderTextColor={"maroon"}
<View style={{backgroundColor: 'orange', margin: 5}}>
<View
style={{
height: 25,
width: 75,
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{ backgroundColor: 'orange', margin: 5 }}>
<Text style={{ backgroundColor: 'lime', padding: this.state.padding, margin: this.state.margin }}>
<View style={{backgroundColor: 'orange', margin: 5}}>
<DatePicker
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Picker
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Switch
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<CheckBox
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<TextInput
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}
placeholder={'type something ...'}
placeholderTextColor={'maroon'}
/>
</View>
<View style={{backgroundColor: 'orange', margin: 5}}>
<Text
style={{
backgroundColor: 'lime',
padding: this.state.padding,
margin: this.state.margin,
}}>
type nothing ...
</Text>
</View>
</View>
);
}
};
}
AppRegistry.registerComponent('Bootstrap', () => Bootstrap);

2
vnext/index.js
Просмотреть файл

@ -2,4 +2,4 @@
// Licensed under the MIT License.
'use strict';
module.exports = require('./lib/index.js');
module.exports = require('./lib/index.js');

2
vnext/index.uwp.js
Просмотреть файл

@ -2,4 +2,4 @@
// Licensed under the MIT License.
'use strict';
module.exports = require('./lib/index.uwp.js');
module.exports = require('./lib/index.uwp.js');

27
vnext/jest/hasteImpl.js
Просмотреть файл

@ -1,22 +1,22 @@
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
*/
'use strict';
const { realpathSync } = require('fs');
const {realpathSync} = require('fs');
const path = require('path');
const utils = require('../Scripts/utils');
const rnProjectRoot = utils.getDirectoryNameOfFileAbove(__dirname, 'app.json');
const rnRoot = realpathSync(
rnProjectRoot ?
path.resolve(rnProjectRoot, './node_modules/react-native') :
path.resolve(__dirname, '../node_modules/react-native')
rnProjectRoot
? path.resolve(rnProjectRoot, './node_modules/react-native')
: path.resolve(__dirname, '../node_modules/react-native'),
);
function createHaste(pluginRoots, pluginNameReducers) {
const path = require('path');
const ROOTS = [rnRoot + path.sep, ...pluginRoots];
const IGNORE_PATTERNS /*: Array<RegExp> */ = [
@ -49,13 +49,16 @@ function createHaste(pluginRoots, pluginNameReducers) {
* @return {string|void} hasteName for module at filePath; or undefined if
* filePath is not a haste module
*/
getHasteName(filePath /*: string */, sourceCode /*: ?string */) /*: string | void */ {
getHasteName(
filePath /*: string */,
sourceCode /*: ?string */,
) /*: string | void */ {
if (!isHastePath(filePath)) {
return undefined;
}
const hasteName = NAME_REDUCERS.reduce(
(name, [pattern, replacement]) => name.replace(pattern, replacement),
filePath
filePath,
);
return hasteName;
@ -81,5 +84,5 @@ function createHaste(pluginRoots, pluginNameReducers) {
module.exports = createHaste(
[path.resolve(__dirname, '..') + path.sep],
[[/^(.*)\.(uwp)$/, '$1'], [/^(.*)\.(windesktop)$/, '$1']]
[[/^(.*)\.(uwp)$/, '$1'], [/^(.*)\.(windesktop)$/, '$1']],
);

8
vnext/just-task.js
Просмотреть файл

@ -3,15 +3,15 @@
// @ts-check
const path = require('path');
const { task, series, condition, option, argv, tscTask, tslintTask, cleanTask } = require('just-scripts');
const { task, series, condition, option, argv, tscTask, eslintTask, cleanTask } = require('just-scripts');
const libPath = path.resolve(process.cwd(), 'lib');
const srcPath = path.resolve(process.cwd(), 'src');
option('production');
option('clean');
task('tslint', () => {
return tslintTask();
task('eslint', () => {
return eslintTask();
});
task('ts', () => {
return tscTask({
@ -30,7 +30,7 @@ task(
'build',
series(
condition('clean', () => argv().clean),
'tslint',
'eslint',
'ts'
)
);

8
vnext/local-cli/generator-common/index.js
Просмотреть файл

@ -51,11 +51,11 @@ function upgradeFileContentChangedCallback(
console.log(
`${chalk.bold(relativeDestPath)} ` +
`has changed in the new version.\nDo you want to keep your ${relativeDestPath} or replace it with the ` +
`latest version?\nIf you ever made any changes ` +
`to this file, you'll probably want to keep it.\n` +
'latest version?\nIf you ever made any changes ' +
'to this file, you\'ll probably want to keep it.\n' +
`You can see the new version here: ${absoluteSrcFilePath}\n` +
`Do you want to replace ${relativeDestPath}? ` +
`Answer y to replace, n to keep your version: `
'Answer y to replace, n to keep your version: '
);
const answer = prompt();
if (answer === 'y') {
@ -74,5 +74,5 @@ function upgradeFileContentChangedCallback(
}
module.exports = {
createDir, copyAndReplaceWithChangedCallback, copyAndReplaceAll
createDir, copyAndReplaceWithChangedCallback, copyAndReplaceAll,
};

10
vnext/local-cli/generator-windows/index.js
Просмотреть файл

@ -9,7 +9,7 @@ const os = require('os');
const {
createDir,
copyAndReplaceAll,
copyAndReplaceWithChangedCallback
copyAndReplaceWithChangedCallback,
} = require('../generator-common');
const windowsDir = 'windows';
@ -25,7 +25,7 @@ function generateCertificate(srcPath, destPath, newProjectName, currentUser) {
'$pwd = ConvertTo-SecureString -String password -Force -AsPlainText',
`New-Item -ErrorAction Ignore -ItemType directory -Path ${path.join(windowsDir, newProjectName)}`,
`Export-PfxCertificate -Cert "cert:\\CurrentUser\\My\\$($cert.Thumbprint)" -FilePath ${path.join(windowsDir, newProjectName, newProjectName)}_TemporaryKey.pfx -Password $pwd`,
'$cert.Thumbprint'
'$cert.Thumbprint',
];
const certGenProcess = childProcess.spawnSync('powershell', ['-command', certGenCommand.join(';')]);
@ -83,7 +83,7 @@ function copyProjectTemplateAndReplace(
'<%=projectGuid%>': projectGuid,
'<%=packageGuid%>': packageGuid,
'<%=currentUser%>': currentUser,
'<%=certificateThumbprint%>': certificateThumbprint ? `<PackageCertificateThumbprint>${certificateThumbprint}</PackageCertificateThumbprint>` : ''
'<%=certificateThumbprint%>': certificateThumbprint ? `<PackageCertificateThumbprint>${certificateThumbprint}</PackageCertificateThumbprint>` : '',
};
[
@ -129,10 +129,10 @@ function installDependencies(options) {
// Install dependencies using correct package manager
const isYarn = fs.existsSync(path.join(cwd, 'yarn.lock'));
const execOptions = options && options.verbose ? { stdio: 'inherit' } : {};
childProcess.execSync(isYarn ? `yarn` : `npm i`, execOptions);
childProcess.execSync(isYarn ? 'yarn' : 'npm i', execOptions);
}
module.exports = {
copyProjectTemplateAndReplace,
installDependencies
installDependencies,
};

1
vnext/local-cli/generator-windows/templates/App.windows.js
Просмотреть файл

@ -1,6 +1,7 @@
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @format
*/
import React, { Component } from 'react';

2
vnext/local-cli/index.js
Просмотреть файл

@ -1,5 +1,5 @@
'use strict';
module.exports = [
require('./runWindows/runWindows')
require('./runWindows/runWindows'),
];

4
vnext/local-cli/runWindows/runWindows.js
Просмотреть файл

@ -97,6 +97,6 @@ module.exports = {
default: false,
}, {
command: '--no-packager',
description: 'Do not launch packager while building'
}]
description: 'Do not launch packager while building',
}],
};

2
vnext/local-cli/runWindows/utils/build.js
Просмотреть файл

@ -35,5 +35,5 @@ function getSolutionFile(options) {
module.exports = {
buildSolution,
getSolutionFile,
restoreNuGetPackages
restoreNuGetPackages,
};

4
vnext/local-cli/runWindows/utils/checkRequirements.js
Просмотреть файл

@ -11,8 +11,8 @@ const REQUIRED_VERSIONS = {
msbuild: '14.0',
visualstudio: '14.0',
windowssdk: '10.0',
phonesdk: '10.0'
}
phonesdk: '10.0',
},
};
function shortenVersion (version) {

4
vnext/local-cli/runWindows/utils/deploy.js
Просмотреть файл

@ -131,7 +131,7 @@ function launchServer(options) {
const opts = {
cwd: options.root,
detached: true,
stdio: options.verbose ? 'inherit' : 'ignore'
stdio: options.verbose ? 'inherit' : 'ignore',
};
return Promise.resolve(spawn('cmd.exe', ['/C', 'start', launchPackagerScript], opts));
@ -140,5 +140,5 @@ function launchServer(options) {
module.exports = {
deployToDesktop,
deployToDevice,
startServerInNewWindow
startServerInNewWindow,
};

84
vnext/local-cli/runWindows/utils/msbuildtools.js
Просмотреть файл

@ -1,3 +1,8 @@
/**
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License.
* @format
*/
'use strict';
const EOL = require('os').EOL;
@ -18,8 +23,14 @@ class MSBuildTools {
}
cleanProject(slnFile) {
const cmd = `"${path.join(this.path, 'msbuild.exe')}" "${slnFile}" t/:Clean`;
const results = child_process.execSync(cmd).toString().split(EOL);
const cmd = `"${path.join(
this.path,
'msbuild.exe',
)}" "${slnFile}" t/:Clean`;
const results = child_process
.execSync(cmd)
.toString()
.split(EOL);
results.forEach(result => console.log(chalk.white(result)));
}
@ -34,7 +45,7 @@ class MSBuildTools {
'/nologo',
`/p:Configuration=${buildType}`,
`/p:Platform=${buildArch}`,
'/p:AppxBundle=Never'
'/p:AppxBundle=Never',
];
// Set platform toolset for VS 2017 (this way we can keep the base sln file working for VS 2015)
@ -50,7 +61,7 @@ class MSBuildTools {
}
if (config) {
Object.keys(config).forEach(function (key) {
Object.keys(config).forEach(function(key) {
args.push(`/p:${key}=${config[key]}`);
});
}
@ -62,27 +73,42 @@ class MSBuildTools {
return;
}
const cmd = `"${path.join(this.path, 'msbuild.exe')}" ` + ['"' + slnFile + '"'].concat(args).join(' ');
const cmd =
`"${path.join(this.path, 'msbuild.exe')}" ` +
['"' + slnFile + '"'].concat(args).join(' ');
// Always inherit from stdio as we're controlling verbosity output above.
child_process.execSync(cmd, { stdio: 'inherit' });
child_process.execSync(cmd, {stdio: 'inherit'});
}
}
function checkMSBuildVersion(version) {
let toolsPath = null;
// This path is maintained and VS has promised to keep it valid.
const vsWherePath = path.join(process.env['ProgramFiles(x86)'], '/Microsoft Visual Studio/Installer/vswhere.exe');
const vsWherePath = path.join(
process.env['ProgramFiles(x86)'],
'/Microsoft Visual Studio/Installer/vswhere.exe',
);
// Check if vswhere is present and try to find MSBuild.
if (fs.existsSync(vsWherePath)) {
const vsPath = child_process.execSync(`"${vsWherePath}" -latest -products * Microsoft.Component.MSBuild -property installationPath`).toString().split(EOL)[0];
const vsPath = child_process
.execSync(
`"${vsWherePath}" -latest -products * Microsoft.Component.MSBuild -property installationPath`,
)
.toString()
.split(EOL)[0];
// VS 2019 changed path naming convention
const vsVersion = (version == '16.0') ? 'Current' : version;
const vsVersion = version === '16.0' ? 'Current' : version;
// look for the specified version of msbuild
const msBuildPath = path.join(vsPath, 'MSBuild', vsVersion, 'Bin/MSBuild.exe');
const msBuildPath = path.join(
vsPath,
'MSBuild',
vsVersion,
'Bin/MSBuild.exe',
);
toolsPath = fs.existsSync(msBuildPath) ? path.dirname(msBuildPath) : null;
} else {
@ -94,7 +120,10 @@ function checkMSBuildVersion(version) {
if (toolsPathOutput) {
toolsPathOutput = toolsPathOutput[1];
// Win10 on .NET Native uses x86 arch compiler, if using x64 Node, use x86 tools
if ((version === '15.0' || version === '14.0' && toolsPath.indexOf('amd64') > -1)) {
if (
version === '15.0' ||
(version === '14.0' && toolsPath.indexOf('amd64') > -1)
) {
toolsPathOutput = path.resolve(toolsPathOutput, '..');
}
toolsPath = toolsPathOutput;
@ -108,13 +137,12 @@ function checkMSBuildVersion(version) {
if (toolsPath) {
console.log(chalk.green(`Found MSBuild v${version} at ${toolsPath}`));
return new MSBuildTools(version, toolsPath);
}
else {
} else {
return null;
}
}
module.exports.findAvailableVersion = function () {
module.exports.findAvailableVersion = function() {
const versions = MSBUILD_VERSIONS.map(checkMSBuildVersion);
const msbuildTools = versions.find(Boolean);
@ -125,29 +153,35 @@ module.exports.findAvailableVersion = function () {
return msbuildTools;
};
module.exports.findAllAvailableVersions = function () {
module.exports.findAllAvailableVersions = function() {
console.log(chalk.green('Searching for available MSBuild versions...'));
return MSBUILD_VERSIONS
.map(checkMSBuildVersion)
.filter(item => !!item);
return MSBUILD_VERSIONS.map(checkMSBuildVersion).filter(item => !!item);
};
module.exports.getAllAvailableUAPVersions = function () {
module.exports.getAllAvailableUAPVersions = function() {
const results = [];
const programFilesFolder = process.env['ProgramFiles(x86)'] || process.env.ProgramFiles;
const programFilesFolder =
process.env['ProgramFiles(x86)'] || process.env.ProgramFiles;
// No Program Files folder found, so we won't be able to find UAP SDK
if (!programFilesFolder) {
return results;
}
const uapFolderPath = path.join(programFilesFolder, 'Windows Kits', '10', 'Platforms', 'UAP');
const uapFolderPath = path.join(
programFilesFolder,
'Windows Kits',
'10',
'Platforms',
'UAP',
);
// No UAP SDK exists on this machine
if (!shell.test('-e', uapFolderPath)) {
return results;
}
shell.ls(uapFolderPath)
shell
.ls(uapFolderPath)
.filter(uapDir => shell.test('-d', path.join(uapFolderPath, uapDir)))
.map(Version.tryParse)
.forEach(version => version && results.push(version));

2
vnext/local-cli/runWindows/utils/winappdeploytool.js
Просмотреть файл

@ -100,7 +100,7 @@ class WinAppDeployTool {
shouldUpdate ? 'update' : 'install',
'-file',
pathToAppxPackage, '-ip',
targetDevice.__ip
targetDevice.__ip,
];
if (pin) {

21
vnext/package.json
Просмотреть файл

@ -15,6 +15,8 @@
"build": "just-scripts build",
"clean": "just-scripts clean",
"start": "node Scripts/cli.js start",
"lint": "just-scripts eslint",
"lint:fix": "eslint ./**/*.js --fix",
"watch": "tsc -w"
},
"disabledTasks": [
@ -47,29 +49,30 @@
"create-react-class": "^15.6.3",
"fbjs": "^1.0.0",
"prop-types": "^15.5.8",
"react-timer-mixin": "^0.13.2",
"react-native-local-cli": "^1.0.0-alpha.5",
"react-timer-mixin": "^0.13.2",
"regenerator-runtime": "^0.13.2",
"username": "^3.0.0",
"shelljs": "^0.7.8",
"username": "^3.0.0",
"uuid": "^2.0.1",
"xml-parser": "^1.2.1"
},
"devDependencies": {
"@react-native-community/eslint-config": "^0.0.5",
"@types/es6-collections": "^0.5.29",
"@types/es6-promise": "0.0.32",
"@types/react": "16.8.15",
"@types/react-native": "~0.57.51",
"just-scripts": "^0.20.0",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "2.6.2",
"just-scripts": "^0.23.0",
"prettier": "^1.18.2",
"react": "16.8.3",
"tslint": "^5.11.0",
"tslint-microsoft-contrib": "^5.0.1",
"tslint-react": "^4",
"typescript": "3.5.1",
"react-native": "0.59.0-microsoft.8"
"react-native": "0.59.0-microsoft.8",
"typescript": "3.5.1"
},
"peerDependencies": {
"react": "16.8.3",
"react-native": "^0.59.0 || 0.59.0-microsoft.8 || https://github.com/microsoft/react-native/archive/v0.59.0-microsoft.8.tar.gz"
}
}
}

6
vnext/rn-cli.config.js
Просмотреть файл

@ -47,16 +47,16 @@ if (fs.existsSync(path.resolve(__dirname, '../../scripts/metro-resources.js')))
platforms,
providesModuleNodeModules: ['react-native', 'react-native-windows'],
},
projectRoot: utils.getDirectoryNameOfFileAbove(__dirname, 'app.json') || __dirname
projectRoot: utils.getDirectoryNameOfFileAbove(__dirname, 'app.json') || __dirname,
};
}
config.extraNodeModules['SnapshotViewIOS'] = path.resolve(__dirname, 'Libraries/RCTTest/SnapshotViewIOS');
config.extraNodeModules.SnapshotViewIOS = path.resolve(__dirname, 'Libraries/RCTTest/SnapshotViewIOS');
config.resolver.hasteImplModulePath = path.resolve(__dirname, 'jest/hasteImpl.js');
// Check that we have built our JS files before running the bundler, otherwise we'll get a harder to diagnose "Unable to resolve module" error
if (!fs.existsSync(path.resolve(__dirname, 'lib/Libraries/Components/AccessibilityInfo/AccessibilityInfo.uwp.js'))) {
throw new Error(`\nThis package must be built before running the bundler. Did you mean to run "yarn build" first?\n`);
throw new Error('\nThis package must be built before running the bundler. Did you mean to run "yarn build" first?\n');
}
module.exports = config;

133
vnext/tslint.json
Просмотреть файл

@ -1,133 +0,0 @@
{
"extends": ["tslint-react"],
"rules": {
"deprecation": true,
"no-banned-terms": true,
"no-delete-expression": true,
"no-document-domain": true,
"no-document-write": true,
"no-disable-auto-sanitization": true,
"no-exec-script": true,
"no-function-constructor-with-string-args": true,
"no-octal-literal": true,
"no-http-string": true,
"no-inner-html": true,
"no-reserved-keywords": true,
"no-string-based-set-immediate": true,
"no-string-based-set-interval": true,
"no-string-based-set-timeout": true,
"react-no-dangerous-html": true,
"function-name": [
true,
{
"method-regex": "^[a-z][\\w\\d]+$",
"private-method-regex": "^_[a-z][\\w\\d]+$",
"protected-method-regex": "^[_]?[a-z][\\w\\d]+$",
"static-method-regex": "^[a-z][\\w\\d]+$",
"function-regex": "^[_]?[a-z][\\w\\d]+$"
}
],
"jsx-curly-spacing": {
"when": "always"
},
"jsx-no-bind": true,
"jsx-boolean-value": ["never"],
"jsx-equals-spacing": "never",
"jsx-key": true,
"jsx-no-lambda": true,
"jsx-self-close": true,
"jsx-wrap-multiline": false,
"jsx-no-multiline-js": false,
"jsx-no-string-ref": true,
"jsx-ban-props": [false, ["style", "Use className and provide css rules instead of using inline styles."]],
"no-duplicate-variable": true,
"use-isnan": true,
"triple-equals": [true],
"max-line-length": [
true,
{
"limit": 140,
"ignore-pattern": "require\\(|https?:\\/\\/"
}
],
"no-arg": true,
"radix": true,
"typedef": [true, "call-signature", "parameter", "arrow-parameter", "property-declaration"],
"prefer-const": true,
"quotemark": [true, "single", "jsx-double", "avoid-escape"],
"no-inferrable-types": [true, "ignore-params"],
"no-null-keyword": false,
"export-name": false,
"trailing-comma": [false],
"whitespace": [false],
"no-switch-case-fall-through": false,
"variable-name": [true, "check-format", "allow-leading-underscore", "allow-pascal-case", "ban-keywords"],
"class-name": true,
"comment-format": [true, "check-space"],
"curly": true,
"eofline": false,
"forin": true,
"indent": [true, "spaces", 2],
"interface-name": [true, "always-prefix"],
"label-position": true,
"member-access": true,
"member-ordering": [
true,
{
"order": [
"public-static-field",
"protected-static-field",
"private-static-field",
"public-instance-field",
"protected-instance-field",
"private-instance-field",
"public-static-method",
"protected-static-method",
"private-static-method",
"public-constructor",
"public-instance-method",
"protected-constructor",
"protected-instance-method",
"private-constructor",
"private-instance-method"
]
}
],
"missing-optional-annotation": true,
"no-any": true,
"no-bitwise": true,
"no-consecutive-blank-lines": true,
"no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
"no-constant-condition": true,
"no-construct": true,
"no-debugger": true,
"no-duplicate-switch-case": true,
"no-duplicate-parameter-names": true,
"no-empty": true,
"no-eval": true,
"no-function-expression": true,
"no-internal-module": true,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-trailing-whitespace": true,
"no-unnecessary-semicolons": true,
"no-unused-expression": false,
"no-unused-variable": false, // defer to typescript's no unused local instead
"no-with-statement": true,
"no-var-keyword": true,
"object-literal-sort-keys": false,
"one-line": [true, "check-open-brace", "check-catch", "check-else", "check-whitespace"],
"semicolon": [true, "always", "ignore-bound-class-methods"],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}
],
"use-named-parameter": true
}
}

1751
vnext/yarn.lock
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу