Web Tester (#282)
* new web project
* added packages
* added webpack
* tester errors
* added public files
* checkbox works
* react hack
* changed name
* readme
* fixed readme
* pressability and removed testing deps
* removed deps
* removed service worker
* deleted unnecessary files
* updated readme
* changes
* Change files
* Revert "Change files"
This reverts commit de3ea44aae
.
revert changes
* Change files
Co-authored-by: Gulnaz Sayed <t-gusaye@microsoft.com>
This commit is contained in:
Родитель
ce089b370e
Коммит
bac059cfd3
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
|
@ -0,0 +1,16 @@
|
|||
## Launch `FluentUI Web Tester` app
|
||||
|
||||
1. Make sure you have followed the Getting Started instructions [here](../../README.md) to install packages and build the entire repository.
|
||||
|
||||
2. Then go into `apps\web` folder:
|
||||
|
||||
```
|
||||
cd apps/web
|
||||
```
|
||||
|
||||
4. Launch the FluentUI Web Tester app:
|
||||
|
||||
```
|
||||
yarn web
|
||||
```
|
||||
5. Go to `localhost:8080` in your browser of choice and you will see the FluentUI Checkbox component show up.
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fluentui-react-native/checkbox": "0.3.50",
|
||||
"@types/jest": "^24.0.0",
|
||||
"@types/node": "^12.0.0",
|
||||
"@types/react": "^16.9.0",
|
||||
"@types/react-dom": "^16.9.0",
|
||||
"react": "16.11.0",
|
||||
"react-art": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-native": "0.62.2",
|
||||
"react-native-web": "^0.12.3",
|
||||
"typescript": "3.8.3",
|
||||
"webpack": "4.42.0"
|
||||
},
|
||||
"scripts": {
|
||||
"web": "webpack-dev-server"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-native": "0.62.2",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"ts-loader": "^7.0.5",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "3.10.3"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
import { Checkbox } from '@fluentui-react-native/checkbox';
|
||||
import React from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<View>
|
||||
<Text>hello from react native.</Text>
|
||||
<Checkbox label="FluentUI Checkbox" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
|
@ -0,0 +1,9 @@
|
|||
import { AppRegistry } from 'react-native';
|
||||
import App from './App';
|
||||
|
||||
AppRegistry.registerComponent('App', () => App);
|
||||
|
||||
AppRegistry.runApplication('App', {
|
||||
initialProp: {},
|
||||
rootTag: document.getElementById('root')
|
||||
});
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"src/*": ["./src/*"],
|
||||
"*": ["*", "*.web"],
|
||||
},
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"extends": ["tslint-react-recommended"],
|
||||
"rules": {
|
||||
"ordered-imports": [true],
|
||||
"quotemark": [true, "single", "jsx-single", "avoid-escape"],
|
||||
"semicolon": [true, "never"],
|
||||
"member-access": [false],
|
||||
"member-ordering": [false],
|
||||
"trailing-comma": [
|
||||
true,
|
||||
{
|
||||
"singleline": "never",
|
||||
"multiline": "always"
|
||||
}
|
||||
],
|
||||
"no-empty": false,
|
||||
"no-submodule-imports": false,
|
||||
"no-implicit-dependencies": false,
|
||||
"no-constant-condition": false,
|
||||
"triple-equals": [true, "allow-undefined-check"],
|
||||
"ter-indent": [
|
||||
true,
|
||||
2,
|
||||
{
|
||||
"SwitchCase": 1
|
||||
}
|
||||
],
|
||||
"no-duplicate-imports": false,
|
||||
"jsx-alignment": true,
|
||||
"jsx-no-bind": true,
|
||||
"jsx-no-lambda": true,
|
||||
"max-classes-per-file": [false]
|
||||
}
|
||||
}
|
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 3.1 KiB |
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-react-app" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>FluentUI Web Tester</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
|
@ -0,0 +1,47 @@
|
|||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const rootDir = path.join(__dirname, '..');
|
||||
const webpackEnv = process.env.NODE_ENV || 'development';
|
||||
|
||||
module.exports = {
|
||||
mode: webpackEnv,
|
||||
entry: {
|
||||
app: path.join(rootDir, './web/src/index.tsx'),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(rootDir, 'dist'),
|
||||
filename: 'app-[hash].bundle.js',
|
||||
},
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(tsx|ts|jsx|js|mjs)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'ts-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(__dirname, './web/index.html'),
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
resolve: {
|
||||
extensions: [
|
||||
'.web.tsx',
|
||||
'.web.ts',
|
||||
'.tsx',
|
||||
'.ts',
|
||||
'.web.jsx',
|
||||
'.web.js',
|
||||
'.jsx',
|
||||
'.js',
|
||||
], // read files in following order
|
||||
alias: Object.assign({
|
||||
'react-native$': 'react-native-web',
|
||||
}),
|
||||
},
|
||||
};
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui/react-native",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:49.841Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/adapters",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:51.176Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/button",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:00.316Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/callout",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:02.980Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Change files",
|
||||
"packageName": "@fluentui-react-native/checkbox",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:05.873Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/focus-trap-zone",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:07.884Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/interactive-hooks",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:53.274Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/link",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:09.862Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/memo-cache",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:29.551Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Change files",
|
||||
"packageName": "@fluentui-react-native/persona",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:11.804Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/persona-coin",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:13.549Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/pressable",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:15.007Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/radio-group",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:16.609Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/separator",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:18.075Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Change files",
|
||||
"packageName": "@fluentui-react-native/text",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:20.080Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@fluentui-react-native/tokens",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:54.648Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/foundation-composable",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:21.939Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/foundation-compose",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:23.268Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/foundation-settings",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:24.823Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/foundation-tokens",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:26.228Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/immutable-merge",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:27.768Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/theme-registry",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:42.064Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/themed-settings",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:44.207Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/themed-stylesheet",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:45.645Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/theming-ramp",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:46.867Z"
|
||||
}
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "none",
|
||||
"comment": "Revert \"Change files\"",
|
||||
"packageName": "@uifabricshared/theming-react-native",
|
||||
"email": "email not defined",
|
||||
"dependentChangeType": "none",
|
||||
"date": "2020-07-02T20:35:48.124Z"
|
||||
}
|
|
@ -32,7 +32,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"beachball": "^1.30.2",
|
||||
"lerna": "^3.16.4"
|
||||
"lerna": "^3.16.4",
|
||||
"react-dom": "^16.13.1"
|
||||
},
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
|
|
|
@ -10,13 +10,14 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
import { Platform, UIManager } from 'react-native';
|
||||
import { normalizeRect, Rect, HostComponent } from './InternalTypes';
|
||||
import { PressabilityEventHandlers, PressabilityConfig } from './Pressability.types';
|
||||
|
||||
import { isHoverEnabled } from './HoverState';
|
||||
import invariant from 'invariant';
|
||||
import { BlurEvent, FocusEvent, PressEvent, MouseEvent } from './CoreEventTypes';
|
||||
import * as React from 'react';
|
||||
import { Platform, UIManager } from 'react-native';
|
||||
import { BlurEvent, FocusEvent, MouseEvent, PressEvent } from './CoreEventTypes';
|
||||
import { isHoverEnabled } from './HoverState';
|
||||
import { HostComponent, normalizeRect, Rect } from './InternalTypes';
|
||||
import { PressabilityConfig, PressabilityEventHandlers } from './Pressability.types';
|
||||
|
||||
|
||||
type TouchState =
|
||||
| 'NOT_RESPONDER'
|
||||
|
@ -394,42 +395,42 @@ export class Pressability {
|
|||
Platform.OS === 'ios' || Platform.OS === 'android'
|
||||
? null
|
||||
: {
|
||||
onMouseEnter: (event: MouseEvent): void => {
|
||||
if (isHoverEnabled()) {
|
||||
this._isHovered = true;
|
||||
this._cancelHoverOutDelayTimeout();
|
||||
const { onHoverIn } = this._config;
|
||||
if (onHoverIn != null) {
|
||||
const delayHoverIn = normalizeDelay(this._config.delayHoverIn);
|
||||
if (delayHoverIn > 0) {
|
||||
this._hoverInDelayTimeout = setTimeout(() => {
|
||||
onHoverIn(event);
|
||||
}, delayHoverIn);
|
||||
} else {
|
||||
onMouseEnter: (event: MouseEvent): void => {
|
||||
if (isHoverEnabled()) {
|
||||
this._isHovered = true;
|
||||
this._cancelHoverOutDelayTimeout();
|
||||
const { onHoverIn } = this._config;
|
||||
if (onHoverIn != null) {
|
||||
const delayHoverIn = normalizeDelay(this._config.delayHoverIn);
|
||||
if (delayHoverIn > 0) {
|
||||
this._hoverInDelayTimeout = setTimeout(() => {
|
||||
onHoverIn(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onMouseLeave: (event: MouseEvent): void => {
|
||||
if (this._isHovered) {
|
||||
this._isHovered = false;
|
||||
this._cancelHoverInDelayTimeout();
|
||||
const { onHoverOut } = this._config;
|
||||
if (onHoverOut != null) {
|
||||
const delayHoverOut = normalizeDelay(this._config.delayHoverOut);
|
||||
if (delayHoverOut > 0) {
|
||||
this._hoverInDelayTimeout = setTimeout(() => {
|
||||
onHoverOut(event);
|
||||
}, delayHoverOut);
|
||||
} else {
|
||||
onHoverOut(event);
|
||||
}
|
||||
}, delayHoverIn);
|
||||
} else {
|
||||
onHoverIn(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
onMouseLeave: (event: MouseEvent): void => {
|
||||
if (this._isHovered) {
|
||||
this._isHovered = false;
|
||||
this._cancelHoverInDelayTimeout();
|
||||
const { onHoverOut } = this._config;
|
||||
if (onHoverOut != null) {
|
||||
const delayHoverOut = normalizeDelay(this._config.delayHoverOut);
|
||||
if (delayHoverOut > 0) {
|
||||
this._hoverInDelayTimeout = setTimeout(() => {
|
||||
onHoverOut(event);
|
||||
}, delayHoverOut);
|
||||
} else {
|
||||
onHoverOut(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
...focusEventHandlers,
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
"just-scripts": "^0.38.0",
|
||||
"prettier": "~1.17.0",
|
||||
"typescript": "3.8.3",
|
||||
"webpack": "^4.29.5",
|
||||
"webpack": "^4.42.0",
|
||||
"webpack-bundle-analyzer": "^3.0.4",
|
||||
"webpack-cli": "3.2.3",
|
||||
"webpack-dev-server": "3.1.14",
|
||||
|
|
855
yarn.lock
855
yarn.lock
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче