zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-05-13 19:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

[change] Remove NetInfo

Browse Source 
Ref #1352
Ref https://github.com/facebook/react-native/issues/23313
This commit is contained in:
Nicolas Gallagher
2019-06-28 11:08:58 -07:00
parent add0e0cb7e
commit 89bc074327
6 changed files with 0 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -182,7 +182,6 @@ React Native v0.55
| NativeEventEmitter | ✓ | |
| NativeMethodsMixin | ✓ | |
| NativeModules | (✓) | Mocked. Missing ability to load native modules. |
| NetInfo | ✓ | Missing functionality to detect expensive connections as there are no equivalent web APIs. |
| PanResponder | ✓ | |
| PixelRatio | ✓ | |
| Platform | ✓ | |

1
packages/babel-plugin-react-native-web/src/moduleMap.js
View File

@@ -30,7 +30,6 @@ module.exports = {
Modal: true,
NativeEventEmitter: true,
NativeModules: true,
NetInfo: true,
PanResponder: true,
PermissionsAndroid: true,
Picker: true,

67
packages/react-native-web/src/exports/NetInfo/__tests__/index-test.js vendored
View File

@@ -1,67 +0,0 @@
/* eslint-env jasmine, jest */
import NetInfo from '..';
const handler = () => {};
describe('apis/NetInfo', () => {
describe('getConnectionInfo', () => {
test('fills out basic fields', done => {
NetInfo.getConnectionInfo().then(result => {
expect(result.effectiveType).toBeDefined();
expect(result.type).toBeDefined();
done();
});
});
});
describe('addEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
expect(() => NetInfo.addEventListener('foo', handler)).toThrow();
});
});
describe('removeEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
expect(() => NetInfo.removeEventListener('foo', handler)).toThrow();
});
test('throws if the handler is not registered', () => {
expect(() => NetInfo.removeEventListener('connectionChange', handler)).toThrow();
});
});
describe('isConnected', () => {
afterEach(() => {
try {
NetInfo.isConnected.removeEventListener('connectionChange', handler);
} catch (e) {}
});
describe('fetch', () => {
test('returns a boolean', done => {
NetInfo.isConnected.fetch().then(isConnected => {
expect(isConnected).toBe(true);
done();
});
});
});
describe('addEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
expect(() => NetInfo.isConnected.addEventListener('foo', handler)).toThrow();
});
});
describe('removeEventListener', () => {
test('throws if the provided "eventType" is not supported', () => {
NetInfo.isConnected.addEventListener('connectionChange', handler);
expect(() => NetInfo.isConnected.removeEventListener('foo', handler)).toThrow();
});
test('throws if the handler is not registered', () => {
expect(() =>
NetInfo.isConnected.removeEventListener('connectionChange', handler)
).toThrow();
});
});
});
});

169
packages/react-native-web/src/exports/NetInfo/index.js vendored
View File

@@ -1,169 +0,0 @@
/**
* Copyright (c) Nicolas Gallagher.
* 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.
*
* @flow
*/
import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
import findIndex from 'array-find-index';
import invariant from 'fbjs/lib/invariant';
const connection =
ExecutionEnvironment.canUseDOM &&
(window.navigator.connection ||
window.navigator.mozConnection ||
window.navigator.webkitConnection);
// Prevent the underlying event handlers from leaking and include additional
// properties available in browsers
const getConnectionInfoObject = () => {
const result = {
effectiveType: 'unknown',
type: 'unknown'
};
if (!connection) {
return result;
}
for (const prop in connection) {
const value = connection[prop];
if (typeof value !== 'function' && value != null) {
result[prop] = value;
}
}
return result;
};
// Map React Native events to browser equivalents
const eventTypesMap = {
change: 'change',
connectionChange: 'change'
};
const eventTypes = Object.keys(eventTypesMap);
const connectionListeners = [];
const netInfoListeners = [];
/**
* Navigator online: https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
* Network Connection API: https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation
*/
const NetInfo = {
addEventListener(type: string, handler: Function): { remove: () => void } {
invariant(eventTypes.indexOf(type) !== -1, 'Trying to subscribe to unknown event: "%s"', type);
if (type === 'change') {
console.warn('Listening to event `change` is deprecated. Use `connectionChange` instead.');
}
if (!connection) {
console.error(
'Network Connection API is not supported. Not listening for connection type changes.'
);
return {
remove: () => {}
};
}
const wrappedHandler = () => handler(getConnectionInfoObject());
netInfoListeners.push([handler, wrappedHandler]);
connection.addEventListener(eventTypesMap[type], wrappedHandler);
return {
remove: () => NetInfo.removeEventListener(eventTypesMap[type], handler)
};
},
removeEventListener(type: string, handler: Function): void {
invariant(
eventTypes.indexOf(type) !== -1,
'Trying to unsubscribe from unknown event: "%s"',
type
);
if (type === 'change') {
console.warn('Listening to event `change` is deprecated. Use `connectionChange` instead.');
}
const listenerIndex = findIndex(netInfoListeners, pair => pair[0] === handler);
invariant(listenerIndex !== -1, 'Trying to remove NetInfo listener for unregistered handler');
const [, wrappedHandler] = netInfoListeners[listenerIndex];
connection.removeEventListener(eventTypesMap[type], wrappedHandler);
netInfoListeners.splice(listenerIndex, 1);
},
fetch(): Promise<any> {
console.warn('`fetch` is deprecated. Use `getConnectionInfo` instead.');
return new Promise((resolve, reject) => {
try {
resolve(connection.type);
} catch (err) {
resolve('unknown');
}
});
},
getConnectionInfo(): Promise<Object> {
return new Promise((resolve, reject) => {
resolve(getConnectionInfoObject());
});
},
isConnected: {
addEventListener(type: string, handler: Function): { remove: () => void } {
invariant(
eventTypes.indexOf(type) !== -1,
'Trying to subscribe to unknown event: "%s"',
type
);
if (type === 'change') {
console.warn('Listening to event `change` is deprecated. Use `connectionChange` instead.');
}
const onlineCallback = () => handler(true);
const offlineCallback = () => handler(false);
connectionListeners.push([handler, onlineCallback, offlineCallback]);
window.addEventListener('online', onlineCallback, false);
window.addEventListener('offline', offlineCallback, false);
return {
remove: () => NetInfo.isConnected.removeEventListener(eventTypesMap[type], handler)
};
},
removeEventListener(type: string, handler: Function): void {
invariant(
eventTypes.indexOf(type) !== -1,
'Trying to subscribe to unknown event: "%s"',
type
);
if (type === 'change') {
console.warn('Listening to event `change` is deprecated. Use `connectionChange` instead.');
}
const listenerIndex = findIndex(connectionListeners, pair => pair[0] === handler);
invariant(
listenerIndex !== -1,
'Trying to remove NetInfo connection listener for unregistered handler'
);
const [, onlineCallback, offlineCallback] = connectionListeners[listenerIndex];
window.removeEventListener('online', onlineCallback, false);
window.removeEventListener('offline', offlineCallback, false);
connectionListeners.splice(listenerIndex, 1);
},
fetch(): Promise<boolean> {
return new Promise((resolve, reject) => {
try {
resolve(window.navigator.onLine);
} catch (err) {
resolve(true);
}
});
}
}
};
export default NetInfo;

2
packages/react-native-web/src/index.js vendored
View File

@@ -24,7 +24,6 @@ import InteractionManager from './exports/InteractionManager';
import LayoutAnimation from './exports/LayoutAnimation';
import Linking from './exports/Linking';
import NativeEventEmitter from './exports/NativeEventEmitter';
import NetInfo from './exports/NetInfo';
import PanResponder from './exports/PanResponder';
import PixelRatio from './exports/PixelRatio';
import Platform from './exports/Platform';
@@ -123,7 +122,6 @@ export {
LayoutAnimation,
Linking,
NativeEventEmitter,
NetInfo,
PanResponder,
PixelRatio,
Platform,

123
packages/website/storybook/2-apis/NetInfo/NetInfoScreen.js
View File

@@ -1,123 +0,0 @@
/**
* @flow
*/
import React from 'react';
import UIExplorer, {
AppText,
Code,
Description,
DocItem,
ExternalLink,
Section,
storiesOf
} from '../../ui-explorer';
const NetInfoScreen = () => (
<UIExplorer title="NetInfo" url="2-apis/NetInfo">
<Description>
<AppText>
NetInfo asynchronously determines the online/offline status and additional connection
information (where available) of the application.
</AppText>
<AppText>
Note that connection type information is limited to how well the browser supports the{' '}
<ExternalLink href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation">
NetworkInformation API
</ExternalLink>. Connection types will be <Code>unknown</Code> when support is missing.
</AppText>
</Description>
<Section title="Types">
<DocItem
description={
<AppText>
One of <Code>bluebooth</Code>, <Code>cellular</Code>, <Code>ethernet</Code>,{' '}
<Code>mixed</Code>, <Code>mixed</Code>, <Code>none</Code>, <Code>other</Code>,{' '}
<Code>unknown</Code>, <Code>wifi</Code>, <Code>wimax</Code>
</AppText>
}
name="ConnectionType"
/>
<DocItem
description={
<AppText>
One of <Code>slow-2g</Code>, <Code>2g</Code>, <Code>3g</Code>, <Code>4g</Code>,{' '}
<Code>unknown</Code>.
</AppText>
}
name="EffectiveConnectionType"
/>
<DocItem
description={
<Code>{`{
effectiveType: EffectiveConnectionType;
type: ConnectionType;
downlink?: number;
downlinkMax?: number;
rtt?: number;
}`}</Code>
}
name="ConnectionEventType"
/>
</Section>
<Section title="Methods">
<DocItem
description={
<AppText>
Adds an event handler. The <Code>connectionChange</Code> event fires when the network
status changes. The argument to the event handler is an object of type{' '}
<Code>ConnectionEventType</Code>.
</AppText>
}
example={{
code: `NetInfo.addEventListener('connectionChange', ({ effectiveType, type }) => {
console.log('Effective connection type:', effectiveType);
console.log('Connection type:', type);
})`
}}
name="static addEventListener"
typeInfo="(eventName, handler) => void"
/>
<DocItem
description={
<AppText>
Returns a promise that resolves with an object of type <Code>ConnectionEventType</Code>.
</AppText>
}
example={{
code: `NetInfo.getConnectionInfo().then(({ effectiveType, type }) => {
console.log('Effective connection type:', effectiveType);
console.log('Connection type:', type);
});`
}}
name="static getConnectionInfo"
typeInfo="() => Promise<ConnectionEventType>"
/>
<DocItem
description="Removes the listener for network status changes."
name="static removeEventListener"
typeInfo="(eventName, handler) => void"
/>
</Section>
<Section title="Properties">
<DocItem
description="An object with similar methods as above but the listener receives a boolean which represents the internet connectivity. Use this if you are only interested with whether the device has internet connectivity."
example={{
code: `NetInfo.isConnected.fetch().then((isConnected) => {
console.log('Connection status:', (isConnected ? 'online' : 'offline'));
});`
}}
name="isConnected"
typeInfo="ObjectExpression"
/>
</Section>
</UIExplorer>
);
storiesOf('APIs', module).add('NetInfo', NetInfoScreen);