From 88f9f7f9279031417a3964c5567a2b77577fbf99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristian=20Fallr=C3=B8?= Date: Fri, 1 Mar 2019 14:08:34 +0000 Subject: [PATCH] Update: React Native version, eslint, babel, Android SDK, bugfixes for text styles. --- .babelrc | 3 - .eslintrc | 58 ---------- .eslintrc.js | 94 +++++++++++++++ .gitignore | 2 + .../__mocks__/react-native-mapbox-gl.mock.js | 10 +- __tests__/__mocks__/react-native.mock.js | 2 +- __tests__/interface.test.js | 2 +- __tests__/modules/offline/OfflinePack.test.js | 3 +- .../modules/offline/offlineManager.test.js | 13 ++- .../modules/snapshot/SnapshotOptions.test.js | 9 +- .../modules/snapshot/snapshotManager.test.js | 2 +- __tests__/utils/BridgeValue.test.js | 55 ++++----- __tests__/utils/MapboxStyleSheet.test.js | 102 ++++++++--------- __tests__/utils/filterUtils.test.js | 28 ++--- .../org.eclipse.buildship.core.prefs | 2 + android/rctmgl/build.gradle | 2 +- .../components/styles/RCTMGLStyleFactory.java | 2 +- babel.config.js | 15 +++ example/.babelrc | 3 - example/babel.config.js | 15 +++ .../project.pbxproj | 5 +- example/package.json | 19 +++- example/src/App.js | 25 ++-- example/src/MapboxClient.js | 1 + .../components/ChoroplethLayerByZoomLevel.js | 10 +- example/src/components/CreateOfflineRegion.js | 17 ++- example/src/components/CustomIcon.js | 22 ++-- example/src/components/CustomVectorSource.js | 10 +- .../src/components/DataDrivenCircleColors.js | 10 +- example/src/components/DriveTheLine.js | 48 ++++---- example/src/components/EarthQuakes.js | 12 +- example/src/components/FitBounds.js | 15 +-- example/src/components/FlyTo.js | 21 ++-- example/src/components/GeoJSONSource.js | 12 +- example/src/components/GetCenter.js | 12 +- example/src/components/GetZoom.js | 8 +- example/src/components/ImageOverlay.js | 17 +-- example/src/components/IndoorBuilding.js | 28 ++--- example/src/components/PointInMapView.js | 8 +- example/src/components/QueryAtPoint.js | 20 ++-- example/src/components/QueryWithRect.js | 25 ++-- example/src/components/SetBearing.js | 17 +-- example/src/components/SetPitch.js | 17 +-- .../SetUserLocationVerticalAlignment.js | 13 ++- .../src/components/SetUserTrackingModes.js | 23 ++-- example/src/components/ShapeSourceIcon.js | 14 ++- example/src/components/ShowClick.js | 11 +- example/src/components/ShowMap.js | 13 ++- example/src/components/ShowPointAnnotation.js | 34 +++--- example/src/components/ShowRegionDidChange.js | 29 ++--- example/src/components/TakeSnapshot.js | 19 ++-- example/src/components/TakeSnapshotWithMap.js | 23 ++-- example/src/components/TwoByTwo.js | 11 +- example/src/components/UserLocationChange.js | 6 +- .../src/components/WatercolorRasterTiles.js | 21 ++-- example/src/components/YoYo.js | 14 +-- example/src/components/common/Bubble.js | 6 +- example/src/components/common/MapHeader.js | 7 +- example/src/components/common/Page.js | 8 +- .../src/components/common/PulseCircleLayer.js | 12 +- example/src/components/common/TabBarPage.js | 17 ++- example/src/styles/sheet.js | 4 +- example/src/utils/RouteSimulator.js | 4 +- example/src/utils/config.js | 2 +- example/src/utils/index.js | 2 +- ios/RCTMGL/RCTMGLStyle.m | 2 +- ios/RCTMGL/RCTMGLStyleValue.m | 2 + ios/RCTMGL/RCTMGLUtils.h | 1 + ios/RCTMGL/RCTMGLUtils.m | 5 + javascript/components/AbstractLayer.js | 5 +- javascript/components/BackgroundLayer.js | 9 +- javascript/components/Callout.js | 3 +- javascript/components/CircleLayer.js | 9 +- javascript/components/FillExtrusionLayer.js | 9 +- javascript/components/FillLayer.js | 9 +- javascript/components/ImageSource.js | 5 +- javascript/components/Light.js | 9 +- javascript/components/LineLayer.js | 9 +- javascript/components/MapView.js | 107 ++++++++++-------- javascript/components/PointAnnotation.js | 8 +- javascript/components/RasterLayer.js | 9 +- javascript/components/RasterSource.js | 5 +- javascript/components/ShapeSource.js | 14 +-- javascript/components/SymbolLayer.js | 9 +- javascript/components/VectorSource.js | 9 +- javascript/index.js | 21 ++-- .../offline/OfflineCreatePackOptions.js | 4 +- javascript/modules/offline/OfflinePack.js | 4 +- javascript/modules/offline/offlineManager.js | 13 ++- .../modules/snapshot/SnapshotOptions.js | 9 +- .../modules/snapshot/snapshotManager.js | 3 +- javascript/utils/BridgeValue.js | 23 ++-- javascript/utils/MapboxStyleSheet.js | 49 ++++---- javascript/utils/filterUtils.js | 6 +- javascript/utils/geoUtils.js | 2 +- javascript/utils/index.js | 16 ++- javascript/utils/styleMap.js | 6 +- package.json | 35 ++++-- 98 files changed, 838 insertions(+), 685 deletions(-) delete mode 100644 .babelrc delete mode 100644 .eslintrc create mode 100644 .eslintrc.js create mode 100644 android/rctmgl/.settings/org.eclipse.buildship.core.prefs create mode 100644 babel.config.js delete mode 100644 example/.babelrc create mode 100644 example/babel.config.js diff --git a/.babelrc b/.babelrc deleted file mode 100644 index a9ce1369e..000000000 --- a/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["react-native"] -} diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 889e17ec9..000000000 --- a/.eslintrc +++ /dev/null @@ -1,58 +0,0 @@ -{ - "parser": "babel-eslint", - "env": { - "es6": true, - "browser": true, - "jest": true, - "node": true - }, - "parserOptions": { - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "extends": ["eslint:recommended"], - "plugins": ["react", "import", "prettier"], - "settings": { - "import/core-modules": [ - "react", - "react-native", - "react-native/Libraries/Image/resolveAssetSource", - "prop-types" - ] - }, - "rules": { - "no-console": ["error", { allow: ["warn", "error"] }], - "semi": ["error", "always"], - - "react/jsx-no-duplicate-props": ["error"], - "react/jsx-no-undef": ["error"], - "react/jsx-uses-react": ["error"], - "react/jsx-uses-vars": ["error"], - "react/no-danger": ["error"], - "react/no-deprecated": ["error"], - "react/no-direct-mutation-state": ["error"], - "react/no-unknown-property": ["error"], - "react/prefer-es6-class": ["error", "always"], - "react/prop-types": ["error", { ignore: ["children"] }], - "react/react-in-jsx-scope": ["error"], - "react/require-render-return": ["error"], - - "import/default": ["error"], - "import/export": ["error"], - "import/named": ["error"], - "import/newline-after-import": ["error"], - "import/no-duplicates": ["error"], - "import/no-dynamic-require": ["error"], - "import/no-unresolved": ["error"], - "import/no-webpack-loader-syntax": ["error"], - - "prettier/prettier": ["error", { - "singleQuote": true, - "trailingComma": "all", - "jsxBracketSameLine": true, - "arrowParens": "always" - }] - } -} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 000000000..bf89c52d7 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,94 @@ +module.exports = { + "parser": "babel-eslint", + "plugins": [ + "react", + "react-native", + "prettier", + "fp", + "flowtype", + ], + "env": { + "jest": true + }, + "settings": { + "react": { + "version": require('./package.json').dependencies.react, + }, + "import/resolver": { + "node": { + "extensions": [ + ".js", + ".jsx" + ] + } + }, + "react": { + "pragma": "React", + "version": "16.6.1", + "flowVersion": "0.87" + }, + "parserOptions": { + "ecmaFeatures": { + "jsx": true, + "modules": true + } + } + }, + "globals": { + "fetch": true, + "FormData": true, + "requestAnimationFrame": true, + "cancelAnimationFrame": true, + "WebSocket": true, + "__DEV__": true, + "window": true, + "document": true, + "navigator": true, + "XMLSerializer": true, + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "airbnb-base", + "prettier", + "plugin:flowtype/recommended" + ], + "rules": { + "react/no-deprecated": "error", + "import/named": [2], + "import/no-named-default": [0], + "import/order": ["error", { "groups": ["builtin", "external", "parent", "sibling", "index"], "newlines-between": "always" }], + "import/exports-last": [0], + "import/no-useless-path-segments": [2], + "camelcase": [0], + "no-console": [0], + "import/prefer-default-export": "off", + "jsx-a11y/href-no-hash": "off", + "react/prop-types": [2], + "quotes": [2, "single"], + "eol-last": [0], + "no-continue": [1], + "class-methods-use-this": [1], + "no-bitwise": [1], + "prefer-destructuring": [1], + "consistent-return": [1], + "no-warning-comments": [2], + "no-mixed-requires": [0], + "no-return-assign": 0, + "no-underscore-dangle": [0], + "no-await-in-loop": 0, + "no-restricted-syntax": 0, + "no-use-before-define": ["error", { "functions": false }], + "no-unused-expressions": ["error", { "allowTaggedTemplates": true }], + "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }], + "prettier/prettier": [ + "error", + { + "singleQuote": true, + "trailingComma": "all", + "bracketSpacing": false + } + ], + "fp/no-mutating-methods": "warn" + } +}; diff --git a/.gitignore b/.gitignore index 05057e123..f56c75907 100644 --- a/.gitignore +++ b/.gitignore @@ -47,3 +47,5 @@ android/local.properties reactnativemapboxgl.iml .idea coverage +.project +*.core.prefs diff --git a/__tests__/__mocks__/react-native-mapbox-gl.mock.js b/__tests__/__mocks__/react-native-mapbox-gl.mock.js index e0cfc633d..b292651c2 100644 --- a/__tests__/__mocks__/react-native-mapbox-gl.mock.js +++ b/__tests__/__mocks__/react-native-mapbox-gl.mock.js @@ -1,8 +1,8 @@ -import { NativeModules } from 'react-native'; +import {NativeModules} from 'react-native'; function keyMirror(keys) { - let obj = {}; - keys.forEach((key) => (obj[key] = key)); + const obj = {}; + keys.forEach(key => (obj[key] = key)); return obj; } @@ -87,10 +87,10 @@ NativeModules.MGLModule = { }; NativeModules.MGLOfflineModule = { - createPack: (packOptions) => { + createPack: packOptions => { return Promise.resolve({ bounds: packOptions.bounds, - metadata: JSON.stringify({ name: packOptions.name }), + metadata: JSON.stringify({name: packOptions.name}), }); }, getPacks: () => Promise.resolve([]), diff --git a/__tests__/__mocks__/react-native.mock.js b/__tests__/__mocks__/react-native.mock.js index 08c840870..f9df44d8b 100644 --- a/__tests__/__mocks__/react-native.mock.js +++ b/__tests__/__mocks__/react-native.mock.js @@ -1,5 +1,5 @@ jest.mock('react-native/Libraries/Image/resolveAssetSource', () => { - return () => ({ uri: `asset://test.png` }); + return () => ({uri: 'asset://test.png'}); }); jest.mock('NativeEventEmitter', () => { diff --git a/__tests__/interface.test.js b/__tests__/interface.test.js index 172f9220c..70465bc49 100644 --- a/__tests__/interface.test.js +++ b/__tests__/interface.test.js @@ -74,6 +74,6 @@ describe('Public Interface', () => { // animated 'Animated', ]; - actualKeys.forEach((key) => expect(expectedKeys).toContain(key)); + actualKeys.forEach(key => expect(expectedKeys).toContain(key)); }); }); diff --git a/__tests__/modules/offline/OfflinePack.test.js b/__tests__/modules/offline/OfflinePack.test.js index d961a855b..204c2a9b0 100644 --- a/__tests__/modules/offline/OfflinePack.test.js +++ b/__tests__/modules/offline/OfflinePack.test.js @@ -1,4 +1,5 @@ -import { NativeModules } from 'react-native'; +import {NativeModules} from 'react-native'; + import OfflinePack from '../../../javascript/modules/offline/OfflinePack'; describe('OfflinePack', () => { diff --git a/__tests__/modules/offline/offlineManager.test.js b/__tests__/modules/offline/offlineManager.test.js index 9fbdac43b..fed3ef88c 100644 --- a/__tests__/modules/offline/offlineManager.test.js +++ b/__tests__/modules/offline/offlineManager.test.js @@ -1,6 +1,7 @@ -import { NativeModules, Platform } from 'react-native'; +import {NativeModules, Platform} from 'react-native'; + import MapboxGL from '../../../javascript'; -import { OfflineModuleEventEmitter } from '../../../javascript/modules/offline/offlineManager'; +import {OfflineModuleEventEmitter} from '../../../javascript/modules/offline/offlineManager'; describe('offlineManager', () => { const packOptions = { @@ -39,7 +40,7 @@ describe('offlineManager', () => { afterEach(async () => { const packs = await MapboxGL.offlineManager.getPacks(); - for (let pack of packs) { + for (const pack of packs) { await MapboxGL.offlineManager.deletePack(pack.name); } }); @@ -179,7 +180,7 @@ describe('offlineManager', () => { const name = `test-${Date.now()}`; const noop = () => {}; - const options = { ...packOptions, name: name }; + const options = {...packOptions, name}; await MapboxGL.offlineManager.createPack(options); await MapboxGL.offlineManager.subscribe(name, noop, noop); @@ -192,7 +193,7 @@ describe('offlineManager', () => { const name = `test-${Date.now()}`; const noop = () => {}; - const options = { ...packOptions, name: name }; + const options = {...packOptions, name}; await MapboxGL.offlineManager.createPack(options, noop, noop); expect(spy).not.toHaveBeenCalled(); @@ -208,7 +209,7 @@ describe('offlineManager', () => { const name = `test-${Date.now()}`; const noop = () => {}; - const options = { ...packOptions, name: name }; + const options = {...packOptions, name}; await MapboxGL.offlineManager.createPack(options); await MapboxGL.offlineManager.subscribe(name, noop, noop); diff --git a/__tests__/modules/snapshot/SnapshotOptions.test.js b/__tests__/modules/snapshot/SnapshotOptions.test.js index e4fd3bcfe..cef4d5bc3 100644 --- a/__tests__/modules/snapshot/SnapshotOptions.test.js +++ b/__tests__/modules/snapshot/SnapshotOptions.test.js @@ -1,4 +1,5 @@ -import { NativeModules } from 'react-native'; +import {NativeModules} from 'react-native'; + import SnapshotOptions from '../../../javascript/modules/snapshot/SnapshotOptions'; import { makePoint, @@ -8,12 +9,12 @@ import { describe('SnapshotOptions', () => { it('should throw error if no centerCoordinate or bounds are provided', () => { expect(() => new SnapshotOptions()).toThrow(); - expect(() => new SnapshotOptions({ styleURL: 'test' })).toThrow(); + expect(() => new SnapshotOptions({styleURL: 'test'})).toThrow(); }); it('should create options with valid defaults', () => { const centerCoordinate = [1, 2]; - const options = new SnapshotOptions({ centerCoordinate: centerCoordinate }); + const options = new SnapshotOptions({centerCoordinate}); expect(options.toJSON()).toEqual({ styleURL: NativeModules.MGLModule.StyleURL.Street, @@ -58,7 +59,7 @@ describe('SnapshotOptions', () => { }; const geoJSONBounds = JSON.stringify( - makeFeatureCollection(expectedOptions.bounds.map((c) => makePoint(c))), + makeFeatureCollection(expectedOptions.bounds.map(c => makePoint(c))), ); const options = new SnapshotOptions(expectedOptions); diff --git a/__tests__/modules/snapshot/snapshotManager.test.js b/__tests__/modules/snapshot/snapshotManager.test.js index 320015d05..950ffce01 100644 --- a/__tests__/modules/snapshot/snapshotManager.test.js +++ b/__tests__/modules/snapshot/snapshotManager.test.js @@ -2,7 +2,7 @@ import MapboxGL from '../../../javascript'; describe('snapshotManager', () => { it('should resolve uri', async () => { - const options = { centerCoordinate: [1, 2] }; + const options = {centerCoordinate: [1, 2]}; const uri = await MapboxGL.snapshotManager.takeSnap(options); expect(uri).toEqual('file://test.png'); }); diff --git a/__tests__/utils/BridgeValue.test.js b/__tests__/utils/BridgeValue.test.js index 379029284..09b51b8c1 100644 --- a/__tests__/utils/BridgeValue.test.js +++ b/__tests__/utils/BridgeValue.test.js @@ -5,7 +5,7 @@ describe('BridgeValue', () => { const bridgeValue = new BridgeValue([1, 2]); expect(bridgeValue.toJSON()).toEqual({ type: 'array', - value: [{ type: 'number', value: 1 }, { type: 'number', value: 2 }], + value: [{type: 'number', value: 1}, {type: 'number', value: 2}], }); }); @@ -14,8 +14,8 @@ describe('BridgeValue', () => { expect(bridgeValue.toJSON()).toEqual({ type: 'array', value: [ - { type: 'string', value: 'hello' }, - { type: 'string', value: 'world' }, + {type: 'string', value: 'hello'}, + {type: 'string', value: 'world'}, ], }); }); @@ -24,18 +24,15 @@ describe('BridgeValue', () => { const bridgeValue = new BridgeValue([true, false]); expect(bridgeValue.toJSON()).toEqual({ type: 'array', - value: [ - { type: 'boolean', value: true }, - { type: 'boolean', value: false }, - ], + value: [{type: 'boolean', value: true}, {type: 'boolean', value: false}], }); }); it('should convert to array of hashmaps', () => { const bridgeValue = new BridgeValue([ - { prop1: 1 }, - { prop2: 'value' }, - { prop3: false }, + {prop1: 1}, + {prop2: 'value'}, + {prop3: false}, ]); expect(bridgeValue.toJSON()).toEqual({ type: 'array', @@ -43,25 +40,22 @@ describe('BridgeValue', () => { { type: 'hashmap', value: [ - [{ type: 'string', value: 'prop1' }, { type: 'number', value: 1 }], + [{type: 'string', value: 'prop1'}, {type: 'number', value: 1}], ], }, { type: 'hashmap', value: [ [ - { type: 'string', value: 'prop2' }, - { type: 'string', value: 'value' }, + {type: 'string', value: 'prop2'}, + {type: 'string', value: 'value'}, ], ], }, { type: 'hashmap', value: [ - [ - { type: 'string', value: 'prop3' }, - { type: 'boolean', value: false }, - ], + [{type: 'string', value: 'prop3'}, {type: 'boolean', value: false}], ], }, ], @@ -73,14 +67,14 @@ describe('BridgeValue', () => { [1], ['value'], [true], - [{ prop: 'value' }], + [{prop: 'value'}], ]); expect(bridgeValue.toJSON()).toEqual({ type: 'array', value: [ - { type: 'array', value: [{ type: 'number', value: 1 }] }, - { type: 'array', value: [{ type: 'string', value: 'value' }] }, - { type: 'array', value: [{ type: 'boolean', value: true }] }, + {type: 'array', value: [{type: 'number', value: 1}]}, + {type: 'array', value: [{type: 'string', value: 'value'}]}, + {type: 'array', value: [{type: 'boolean', value: true}]}, { type: 'array', value: [ @@ -88,8 +82,8 @@ describe('BridgeValue', () => { type: 'hashmap', value: [ [ - { type: 'string', value: 'prop' }, - { type: 'string', value: 'value' }, + {type: 'string', value: 'prop'}, + {type: 'string', value: 'value'}, ], ], }, @@ -101,29 +95,26 @@ describe('BridgeValue', () => { it('should convert to number', () => { const bridgeValue = new BridgeValue(1); - expect(bridgeValue.toJSON()).toEqual({ type: 'number', value: 1 }); + expect(bridgeValue.toJSON()).toEqual({type: 'number', value: 1}); }); it('should convert to string', () => { const bridgeValue = new BridgeValue('value'); - expect(bridgeValue.toJSON()).toEqual({ type: 'string', value: 'value' }); + expect(bridgeValue.toJSON()).toEqual({type: 'string', value: 'value'}); }); it('should convert to boolean', () => { const bridgeValue = new BridgeValue(true); - expect(bridgeValue.toJSON()).toEqual({ type: 'boolean', value: true }); + expect(bridgeValue.toJSON()).toEqual({type: 'boolean', value: true}); }); it('should convert to hashmap', () => { - const bridgeValue = new BridgeValue({ prop1: 'value1', prop2: 2 }); + const bridgeValue = new BridgeValue({prop1: 'value1', prop2: 2}); expect(bridgeValue.toJSON()).toEqual({ type: 'hashmap', value: [ - [ - { type: 'string', value: 'prop1' }, - { type: 'string', value: 'value1' }, - ], - [{ type: 'string', value: 'prop2' }, { type: 'number', value: 2 }], + [{type: 'string', value: 'prop1'}, {type: 'string', value: 'value1'}], + [{type: 'string', value: 'prop2'}, {type: 'number', value: 2}], ], }); }); diff --git a/__tests__/utils/MapboxStyleSheet.test.js b/__tests__/utils/MapboxStyleSheet.test.js index 760b4408a..7117c4bcf 100644 --- a/__tests__/utils/MapboxStyleSheet.test.js +++ b/__tests__/utils/MapboxStyleSheet.test.js @@ -6,11 +6,11 @@ describe('MapboxStyleSheet', () => { it('should create constant item', () => { verifyStyleSheetsMatch( - { fillOpacity: 0.84 }, + {fillOpacity: 0.84}, { fillOpacity: { styletype: 'constant', - payload: { value: 0.84 }, + payload: {value: 0.84}, __MAPBOX_STYLE__: true, }, }, @@ -19,7 +19,7 @@ describe('MapboxStyleSheet', () => { it('should create transition item', () => { verifyStyleSheetsMatch( - { fillColorTransition: { delay: 10, duration: 200 } }, + {fillColorTransition: {delay: 10, duration: 200}}, { fillColorTransition: { styletype: 'transition', @@ -37,11 +37,11 @@ describe('MapboxStyleSheet', () => { it('should create image item', () => { verifyStyleSheetsMatch( - { fillPattern: 'test' }, + {fillPattern: 'test'}, { fillPattern: { styletype: 'constant', - payload: { value: 'test', image: true, shouldAddImage: false }, + payload: {value: 'test', image: true, shouldAddImage: false}, __MAPBOX_STYLE__: true, }, }, @@ -50,7 +50,7 @@ describe('MapboxStyleSheet', () => { it('should create asset image item for when we require images directly in JS', () => { verifyStyleSheetsMatch( - { fillPattern: 123 }, + {fillPattern: 123}, { fillPattern: { styletype: 'constant', @@ -67,11 +67,11 @@ describe('MapboxStyleSheet', () => { it('should create translate item from object', () => { verifyStyleSheetsMatch( - { fillTranslate: { x: 1, y: 2 } }, + {fillTranslate: {x: 1, y: 2}}, { fillTranslate: { styletype: 'translation', - payload: { value: [1, 2], iosType: 'vector' }, + payload: {value: [1, 2], iosType: 'vector'}, __MAPBOX_STYLE__: true, }, }, @@ -80,11 +80,11 @@ describe('MapboxStyleSheet', () => { it('should create translate item from array', () => { verifyStyleSheetsMatch( - { fillTranslate: [1, 2] }, + {fillTranslate: [1, 2]}, { fillTranslate: { styletype: 'translation', - payload: { value: [1, 2], iosType: 'vector' }, + payload: {value: [1, 2], iosType: 'vector'}, __MAPBOX_STYLE__: true, }, }, @@ -92,11 +92,11 @@ describe('MapboxStyleSheet', () => { }); it('should create camera function', () => { - const stops = { 1: 'blue', 2: 'green' }; + const stops = {1: 'blue', 2: 'green'}; const styleFunction = MapboxGL.StyleSheet.camera(stops, 'mode'); verifyStyleSheetsMatch( - { fillColor: styleFunction }, + {fillColor: styleFunction}, { fillColor: { __MAPBOX_STYLE__: true, @@ -106,12 +106,12 @@ describe('MapboxStyleSheet', () => { attributeName: undefined, stops: [ [ - { type: 'number', value: 1 }, - { styletype: 'color', payload: { value: BLUE_INT } }, + {type: 'number', value: 1}, + {styletype: 'color', payload: {value: BLUE_INT}}, ], [ - { type: 'number', value: 2 }, - { styletype: 'color', payload: { value: GREEN_INT } }, + {type: 'number', value: 2}, + {styletype: 'color', payload: {value: GREEN_INT}}, ], ], mode: 'mode', @@ -134,7 +134,7 @@ describe('MapboxStyleSheet', () => { ); verifyStyleSheetsMatch( - { fillColor: styleFunction }, + {fillColor: styleFunction}, { fillColor: { __MAPBOX_STYLE__: true, @@ -145,24 +145,24 @@ describe('MapboxStyleSheet', () => { attributeName: 'rating', stops: [ [ - { type: 'number', value: 1 }, + {type: 'number', value: 1}, { styletype: 'color', - payload: { value: BLUE_INT, propertyValue: 0 }, + payload: {value: BLUE_INT, propertyValue: 0}, }, ], [ - { type: 'number', value: 16 }, + {type: 'number', value: 16}, { styletype: 'color', - payload: { value: GREEN_INT, propertyValue: 3 }, + payload: {value: GREEN_INT, propertyValue: 3}, }, ], [ - { type: 'number', value: 20 }, + {type: 'number', value: 20}, { styletype: 'color', - payload: { value: BLUE_INT, propertyValue: 5 }, + payload: {value: BLUE_INT, propertyValue: 5}, }, ], ], @@ -173,11 +173,11 @@ describe('MapboxStyleSheet', () => { }); it('should create source object function', () => { - const stops = { bergan: 'blue', hudson: 'green' }; + const stops = {bergan: 'blue', hudson: 'green'}; const styleFunction = MapboxGL.StyleSheet.source(stops, 'county', 'mode'); verifyStyleSheetsMatch( - { fillColor: styleFunction }, + {fillColor: styleFunction}, { fillColor: { __MAPBOX_STYLE__: true, @@ -188,12 +188,12 @@ describe('MapboxStyleSheet', () => { attributeName: 'county', stops: [ [ - { type: 'string', value: 'bergan' }, - { styletype: 'color', payload: { value: BLUE_INT } }, + {type: 'string', value: 'bergan'}, + {styletype: 'color', payload: {value: BLUE_INT}}, ], [ - { type: 'string', value: 'hudson' }, - { styletype: 'color', payload: { value: GREEN_INT } }, + {type: 'string', value: 'hudson'}, + {styletype: 'color', payload: {value: GREEN_INT}}, ], ], }, // payload @@ -207,7 +207,7 @@ describe('MapboxStyleSheet', () => { const styleFunction = MapboxGL.StyleSheet.source(stops, 'county', 'mode'); verifyStyleSheetsMatch( - { fillColor: styleFunction }, + {fillColor: styleFunction}, { fillColor: { __MAPBOX_STYLE__: true, @@ -218,12 +218,12 @@ describe('MapboxStyleSheet', () => { attributeName: 'county', stops: [ [ - { type: 'string', value: 'bergan' }, - { styletype: 'color', payload: { value: BLUE_INT } }, + {type: 'string', value: 'bergan'}, + {styletype: 'color', payload: {value: BLUE_INT}}, ], [ - { type: 'string', value: 'hudson' }, - { styletype: 'color', payload: { value: GREEN_INT } }, + {type: 'string', value: 'hudson'}, + {styletype: 'color', payload: {value: GREEN_INT}}, ], ], }, @@ -241,12 +241,12 @@ describe('MapboxStyleSheet', () => { verifyStyleSheetsMatch(styles, { fillOpacity: { styletype: 'constant', - payload: { value: 0.84 }, + payload: {value: 0.84}, __MAPBOX_STYLE__: true, }, fillPattern: { styletype: 'constant', - payload: { value: 'test', image: true, shouldAddImage: false }, + payload: {value: 'test', image: true, shouldAddImage: false}, __MAPBOX_STYLE__: true, }, }); @@ -272,15 +272,15 @@ describe('MapboxStyleSheet', () => { attributeName: 'county', stops: [ [ - { type: 'string', value: 'bergan' }, - { styletype: 'color', payload: { value: BLUE_INT } }, + {type: 'string', value: 'bergan'}, + {styletype: 'color', payload: {value: BLUE_INT}}, ], ], }, }, fillOpacity: { styletype: 'constant', - payload: { value: 0.84 }, + payload: {value: 0.84}, __MAPBOX_STYLE__: true, }, }); @@ -302,24 +302,24 @@ describe('MapboxStyleSheet', () => { water: { fillColor: { styletype: 'color', - payload: { value: GREEN_INT }, + payload: {value: GREEN_INT}, __MAPBOX_STYLE__: true, }, fillOpacity: { styletype: 'constant', - payload: { value: 0.4 }, + payload: {value: 0.4}, __MAPBOX_STYLE__: true, }, }, building: { fillColor: { styletype: 'color', - payload: { value: BLUE_INT }, + payload: {value: BLUE_INT}, __MAPBOX_STYLE__: true, }, fillOpacity: { styletype: 'constant', - payload: { value: 0.84 }, + payload: {value: 0.84}, __MAPBOX_STYLE__: true, }, }, @@ -327,21 +327,21 @@ describe('MapboxStyleSheet', () => { }); it('should not recreate a stylesheet if it is already a stylesheet', () => { - const styleSheet = MapboxGL.StyleSheet.create({ fillOpacity: 0.84 }); + const styleSheet = MapboxGL.StyleSheet.create({fillOpacity: 0.84}); expect(styleSheet).toEqual(MapboxGL.StyleSheet.create(styleSheet)); }); it('should throw error for invalid property', () => { expect(() => { - MapboxGL.StyleSheet.create({ fakeProperty: 0.84 }); + MapboxGL.StyleSheet.create({fakeProperty: 0.84}); }).toThrow(); expect(() => { - MapboxGL.StyleSheet.create({ fakeProperty: { idk: '?' } }); + MapboxGL.StyleSheet.create({fakeProperty: {idk: '?'}}); }).toThrow(); expect(() => { - MapboxGL.StyleSheet.create({ building: { fakeProperty: 0.84 } }); + MapboxGL.StyleSheet.create({building: {fakeProperty: 0.84}}); }).toThrow(); }); @@ -370,7 +370,7 @@ describe('MapboxStyleSheet', () => { }); it('should add overrides to special case styles', () => { - expect(MapboxGL.StyleSheet.create({ textOffset: [2, 2] })).toEqual({ + expect(MapboxGL.StyleSheet.create({textOffset: [2, 2]})).toEqual({ textOffset: { __MAPBOX_STYLE__: true, styletype: 'constant', @@ -381,7 +381,7 @@ describe('MapboxStyleSheet', () => { }, }); - expect(MapboxGL.StyleSheet.create({ iconOffset: [2, 2] })).toEqual({ + expect(MapboxGL.StyleSheet.create({iconOffset: [2, 2]})).toEqual({ iconOffset: { __MAPBOX_STYLE__: true, styletype: 'constant', @@ -394,7 +394,7 @@ describe('MapboxStyleSheet', () => { }); it('should resolve style value from enum', () => { - expect(MapboxGL.StyleSheet.create({ lineCap: 'round' })).toEqual({ + expect(MapboxGL.StyleSheet.create({lineCap: 'round'})).toEqual({ lineCap: { __MAPBOX_STYLE__: true, styletype: 'constant', @@ -407,7 +407,7 @@ describe('MapboxStyleSheet', () => { it('should not try to resolve style value when using enum', () => { expect( - MapboxGL.StyleSheet.create({ lineCap: MapboxGL.LineCap.Round }), + MapboxGL.StyleSheet.create({lineCap: MapboxGL.LineCap.Round}), ).toEqual({ lineCap: { __MAPBOX_STYLE__: true, diff --git a/__tests__/utils/filterUtils.test.js b/__tests__/utils/filterUtils.test.js index f430dd5f0..9061a9c9d 100644 --- a/__tests__/utils/filterUtils.test.js +++ b/__tests__/utils/filterUtils.test.js @@ -1,4 +1,4 @@ -import { getFilter } from '../../javascript/utils/filterUtils'; +import {getFilter} from '../../javascript/utils/filterUtils'; import BridgeValue from '../../javascript/utils/BridgeValue'; const FilterItem = BridgeValue; @@ -7,9 +7,9 @@ describe('filterUtils', () => { it('should parse flat filter', () => { const filter = ['==', 'rating', 10]; expect(getFilter(filter)).toEqual([ - { type: 'string', value: '==' }, - { type: 'string', value: 'rating' }, - { type: 'number', value: 10 }, + {type: 'string', value: '=='}, + {type: 'string', value: 'rating'}, + {type: 'number', value: 10}, ]); }); @@ -21,16 +21,16 @@ describe('filterUtils', () => { ['==', 'enabled', true], ]; expect(getFilter(filter)).toEqual([ - { type: 'string', value: 'all' }, - { type: 'string', value: '==' }, - { type: 'string', value: 'class' }, - { type: 'string', value: 'street_limited' }, - { type: 'string', value: '>=' }, - { type: 'string', value: 'admin_level' }, - { type: 'number', value: 3 }, - { type: 'string', value: '==' }, - { type: 'string', value: 'enabled' }, - { type: 'boolean', value: true }, + {type: 'string', value: 'all'}, + {type: 'string', value: '=='}, + {type: 'string', value: 'class'}, + {type: 'string', value: 'street_limited'}, + {type: 'string', value: '>='}, + {type: 'string', value: 'admin_level'}, + {type: 'number', value: 3}, + {type: 'string', value: '=='}, + {type: 'string', value: 'enabled'}, + {type: 'boolean', value: true}, ]); }); diff --git a/android/rctmgl/.settings/org.eclipse.buildship.core.prefs b/android/rctmgl/.settings/org.eclipse.buildship.core.prefs new file mode 100644 index 000000000..e8895216f --- /dev/null +++ b/android/rctmgl/.settings/org.eclipse.buildship.core.prefs @@ -0,0 +1,2 @@ +connection.project.dir= +eclipse.preferences.version=1 diff --git a/android/rctmgl/build.gradle b/android/rctmgl/build.gradle index 6d93a2ce0..1cf8e1813 100644 --- a/android/rctmgl/build.gradle +++ b/android/rctmgl/build.gradle @@ -28,7 +28,7 @@ dependencies { // Mapbox SDK compile 'com.mapbox.mapboxsdk:mapbox-android-services:2.2.9' - compile('com.mapbox.mapboxsdk:mapbox-android-sdk:5.4.1@aar') { + compile('com.mapbox.mapboxsdk:mapbox-android-sdk:5.5.3@aar') { transitive=true } diff --git a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleFactory.java b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleFactory.java index 20d88ab55..602b95697 100644 --- a/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleFactory.java +++ b/android/rctmgl/src/main/java/com/mapbox/rctmgl/components/styles/RCTMGLStyleFactory.java @@ -1724,7 +1724,7 @@ protected PropertyValue getStopValue(String value) { } }; - layer.setProperties(PropertyFactory.textAnchor(styleValue.makeCameraFunction(styleValue.getInt("mode"), parser))); + layer.setProperties(PropertyFactory.textAnchor(styleValue.makeStyleFunction(parser))); } else { layer.setProperties(PropertyFactory.textAnchor(styleValue.getString(VALUE_KEY))); } diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 000000000..2df2b18b9 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,15 @@ +module.exports = { + presets: ['module:metro-react-native-babel-preset'], + plugins: [ + // Use @babel/preset-flow when + // https://github.com/babel/babel/issues/7233 is fixed + '@babel/plugin-transform-flow-strip-types', + ['@babel/plugin-proposal-class-properties', {loose: true}], + '@babel/plugin-transform-exponentiation-operator', + ], + env: { + production: { + plugins: ['transform-remove-console'], + }, + }, +}; diff --git a/example/.babelrc b/example/.babelrc deleted file mode 100644 index a9ce1369e..000000000 --- a/example/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["react-native"] -} diff --git a/example/babel.config.js b/example/babel.config.js new file mode 100644 index 000000000..2df2b18b9 --- /dev/null +++ b/example/babel.config.js @@ -0,0 +1,15 @@ +module.exports = { + presets: ['module:metro-react-native-babel-preset'], + plugins: [ + // Use @babel/preset-flow when + // https://github.com/babel/babel/issues/7233 is fixed + '@babel/plugin-transform-flow-strip-types', + ['@babel/plugin-proposal-class-properties', {loose: true}], + '@babel/plugin-transform-exponentiation-operator', + ], + env: { + production: { + plugins: ['transform-remove-console'], + }, + }, +}; diff --git a/example/ios/RNMapboxGLExample.xcodeproj/project.pbxproj b/example/ios/RNMapboxGLExample.xcodeproj/project.pbxproj index cde4b2dc2..cdb49a196 100644 --- a/example/ios/RNMapboxGLExample.xcodeproj/project.pbxproj +++ b/example/ios/RNMapboxGLExample.xcodeproj/project.pbxproj @@ -621,6 +621,7 @@ ORGANIZATIONNAME = Facebook; TargetAttributes = { 13B07F861A680F5B00A75B9A = { + DevelopmentTeam = E5WAB34727; LastSwiftMigration = 830; }; }; @@ -1018,7 +1019,7 @@ CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; DEAD_CODE_STRIPPING = NO; - DEVELOPMENT_TEAM = ""; + DEVELOPMENT_TEAM = E5WAB34727; FRAMEWORK_SEARCH_PATHS = ( "$(inherited)", "$(PROJECT_DIR)/../node_modules/@mapbox/react-native-mapbox-gl/ios", @@ -1052,7 +1053,7 @@ CLANG_ALLOW_NON_MODULAR_INCLUDES_IN_FRAMEWORK_MODULES = YES; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = 1; - DEVELOPMENT_TEAM = ""; + DEVELOPMENT_TEAM = E5WAB34727; FRAMEWORK_SEARCH_PATHS = ( "$(inherited)", "$(PROJECT_DIR)/../node_modules/@mapbox/react-native-mapbox-gl/ios", diff --git a/example/package.json b/example/package.json index 5e1ef9cfc..74fce41b2 100644 --- a/example/package.json +++ b/example/package.json @@ -1,6 +1,6 @@ { "name": "react-native-mapbox-gl-demo", - "version": "0.0.1", + "version": "1.0.0", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", @@ -13,7 +13,7 @@ }, "dependencies": { "@mapbox/geo-viewport": "^0.2.2", - "@mapbox/react-native-mapbox-gl": "file:../mapbox-react-native-mapbox-gl-6.1.3.tgz", + "@mapbox/react-native-mapbox-gl": "file:../mapbox-react-native-mapbox-gl-6.1.4.tgz", "@turf/along": "^4.7.3", "@turf/bearing": "^5.0.0", "@turf/distance": "^5.0.0", @@ -25,15 +25,24 @@ "moment": "^2.22.0", "npm": "^5.3.0", "prop-types": "^15.5.10", - "react": "16.0.0-alpha.12", - "react-native": "^0.53.0", + "react": "16.6.1", + "react-native": "0.57.5", "react-native-elements": "^0.16.0", "react-native-vector-icons": "^4.3.0", "url": "^0.11.0" }, "devDependencies": { - "babel-preset-react-native": "^4.0.0", + "@babel/core": "7.0.0", + "@babel/plugin-proposal-class-properties": "7.0.0", + "@babel/plugin-transform-exponentiation-operator": "7.0.0", + "@babel/plugin-transform-flow-strip-types": "7.0.0", + "@babel/plugin-transform-runtime": "7.0.0", + "@babel/runtime": "7.0.0", + "babel-core": "7.0.0-bridge.0", + "babel-jest": "23.4.2", + "babel-plugin-transform-remove-console": "6.9.0", "fs-extra": "^4.0.1", + "metro-react-native-babel-preset": "0.49.1", "minimatch": "^3.0.4", "node-watch": "^0.5.5", "rimraf": "^2.6.1" diff --git a/example/src/App.js b/example/src/App.js index 08bdabb3b..de0d55b0d 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -1,6 +1,5 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; - import { View, Text, @@ -9,21 +8,17 @@ import { Modal, TouchableOpacity, } from 'react-native'; +import {Icon} from 'react-native-elements'; -import { Icon } from 'react-native-elements'; - -// components +// Components import MapHeader from './components/common/MapHeader'; - -// styles +// Styles import sheet from './styles/sheet'; import colors from './styles/colors'; - -// utils -import { IS_ANDROID } from './utils'; +// Utils +import {IS_ANDROID} from './utils'; import config from './utils/config'; - -// examples +// Examples import ShowMap from './components/ShowMap'; import SetPitch from './components/SetPitch'; import SetBearing from './components/SetBearing'; @@ -172,14 +167,14 @@ class App extends React.Component { } onExamplePress(activeExamplePosition) { - this.setState({ activeExample: activeExamplePosition }); + this.setState({activeExample: activeExamplePosition}); } onCloseExample() { - this.setState({ activeExample: -1 }); + this.setState({activeExample: -1}); } - renderItem({ item, index }) { + renderItem({item, index}) { return ( this.onExamplePress(index)}> @@ -240,7 +235,7 @@ class App extends React.Component { item.label} + keyExtractor={item => item.label} renderItem={this.renderItem} /> diff --git a/example/src/MapboxClient.js b/example/src/MapboxClient.js index e9e366583..0fba8dd9a 100644 --- a/example/src/MapboxClient.js +++ b/example/src/MapboxClient.js @@ -1,4 +1,5 @@ import MapboxClient from 'mapbox'; + import config from './utils/config'; const client = new MapboxClient(config.get('accessToken')); diff --git a/example/src/components/ChoroplethLayerByZoomLevel.js b/example/src/components/ChoroplethLayerByZoomLevel.js index 52c092e30..3f9115de8 100644 --- a/example/src/components/ChoroplethLayerByZoomLevel.js +++ b/example/src/components/ChoroplethLayerByZoomLevel.js @@ -1,11 +1,11 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import Page from './common/Page'; -import sheet from '../styles/sheet'; - const styles = MapboxGL.StyleSheet.create({ statePopulation: { fillColor: MapboxGL.StyleSheet.source( @@ -58,10 +58,12 @@ class ChoroplethLayerByZoomLevel extends React.PureComponent { minZoomLevel={3} styleURL={MapboxGL.StyleURL.Light} centerCoordinate={[-98, 38.88]} - style={sheet.matchParent}> + style={sheet.matchParent} + > + url={'mapbox://mapbox.660ui7x6'} + > (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} onDidFinishLoadingMap={this.onDidFinishLoadingStyle} centerCoordinate={CENTER_COORD} @@ -153,7 +152,7 @@ class CreateOfflineRegion extends React.Component { {offlineRegionStatus !== null ? ( - + Download State:{' '} {this._getRegionDownloadState(offlineRegionStatus.state)} diff --git a/example/src/components/CustomIcon.js b/example/src/components/CustomIcon.js index 6a3710f4f..1be6a3cc4 100644 --- a/example/src/components/CustomIcon.js +++ b/example/src/components/CustomIcon.js @@ -1,14 +1,14 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; +import exampleIcon from '../assets/example.png'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import Page from './common/Page'; import Bubble from './common/Bubble'; -import sheet from '../styles/sheet'; -import exampleIcon from '../assets/example.png'; - const styles = MapboxGL.StyleSheet.create({ icon: { iconImage: exampleIcon, @@ -34,8 +34,8 @@ class CustomIcon extends React.Component { } async onPress(e) { - let feature = MapboxGL.geoUtils.makeFeature(e.geometry); - feature.id = '' + Date.now(); + const feature = MapboxGL.geoUtils.makeFeature(e.geometry); + feature.id = `${Date.now()}`; this.setState({ featureCollection: MapboxGL.geoUtils.addToFeatureCollection( @@ -55,15 +55,17 @@ class CustomIcon extends React.Component { (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} centerCoordinate={[-73.970895, 40.723279]} - style={sheet.matchParent}> + style={sheet.matchParent} + > + shape={this.state.featureCollection} + > + style={sheet.matchParent} + > + url={VECTOR_SOURCE_URL} + > + style={sheet.matchParent} + > + url={'mapbox://examples.8fgz4egr'} + > - this.setState({ currentPoint: currentPoint }), - ); + routeSimulator.addListener(currentPoint => this.setState({currentPoint})); routeSimulator.start(); - this.setState({ routeSimulator: routeSimulator }); + this.setState({routeSimulator}); + } + + componentDidMount() { + this.getDirections(); } - async componentDidMount() { + async getDirections() { const res = await MapboxClient.getDirections( [ { latitude: SF_OFFICE_COORDINATE[1], longitude: SF_OFFICE_COORDINATE[0], }, - { latitude: SF_ZOO_COORDINATE[1], longitude: SF_ZOO_COORDINATE[0] }, + {latitude: SF_ZOO_COORDINATE[1], longitude: SF_ZOO_COORDINATE[0]}, ], - { profile: 'walking', geometry: 'polyline' }, + {profile: 'walking', geometry: 'polyline'}, ); this.setState({ @@ -134,7 +135,7 @@ class DriveTheLine extends React.Component { return null; } - const nearestIndex = this.state.currentPoint.properties.nearestIndex; + const {nearestIndex} = this.state.currentPoint.properties; const coords = this.state.route.geometry.coordinates.filter( (c, i) => i <= nearestIndex, ); @@ -163,12 +164,13 @@ class DriveTheLine extends React.Component { backgroundColor = '#314ccd'; } - const style = [layerStyles.origin, { circleColor: backgroundColor }]; + const style = [layerStyles.origin, {circleColor: backgroundColor}]; return ( + shape={MapboxGL.geoUtils.makePoint(SF_OFFICE_COORDINATE)} + > ); @@ -196,10 +198,11 @@ class DriveTheLine extends React.Component { (this._map = c)} + ref={c => (this._map = c)} centerCoordinate={[-122.452652, 37.762963]} style={sheet.matchParent} - styleURL={MapboxGL.StyleURL.Dark}> + styleURL={MapboxGL.StyleURL.Dark} + > {this.renderOrigin()} {this.renderRoute()} @@ -208,7 +211,8 @@ class DriveTheLine extends React.Component { + shape={MapboxGL.geoUtils.makePoint(SF_ZOO_COORDINATE)} + > + styleURL={MapboxGL.StyleURL.Dark} + > + url="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson" + > + onOptionPress={this.onFitBounds} + > (this.map = ref)} + ref={ref => (this.map = ref)} zoomLevel={18} maxZoomLevel={19} centerCoordinate={[-74.135426, 40.795765]} diff --git a/example/src/components/FlyTo.js b/example/src/components/FlyTo.js index 3ea7883cd..29189434c 100644 --- a/example/src/components/FlyTo.js +++ b/example/src/components/FlyTo.js @@ -1,12 +1,12 @@ import React from 'react'; -import { Alert } from 'react-native'; +import {Alert} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import TabBarPage from './common/TabBarPage'; -import sheet from '../styles/sheet'; - const layerStyles = MapboxGL.StyleSheet.create({ building: { fillExtrusionOpacity: 1, @@ -17,7 +17,7 @@ const layerStyles = MapboxGL.StyleSheet.create({ 'height', MapboxGL.InterpolationMode.Exponential, ), - fillExtrusionColorTransition: { duration: 2000, delay: 0 }, + fillExtrusionColorTransition: {duration: 2000, delay: 0}, }, streets: { lineColor: 'blue', @@ -31,6 +31,7 @@ const layerStyles = MapboxGL.StyleSheet.create({ class FlyTo extends React.Component { static SF_OFFICE_LOCATION = [-122.400021, 37.789085]; + static DC_OFFICE_LOCATION = [-77.036086, 38.910233]; static propTypes = { @@ -41,8 +42,8 @@ class FlyTo extends React.Component { super(props); this._flyToOptions = [ - { label: 'SF', data: FlyTo.SF_OFFICE_LOCATION }, - { label: 'DC', data: FlyTo.DC_OFFICE_LOCATION }, + {label: 'SF', data: FlyTo.SF_OFFICE_LOCATION}, + {label: 'DC', data: FlyTo.DC_OFFICE_LOCATION}, ]; this.onFlyToPress = this.onFlyToPress.bind(this); @@ -63,13 +64,15 @@ class FlyTo extends React.Component { + onOptionPress={this.onFlyToPress} + > (this.map = ref)} - style={sheet.matchParent}> + ref={ref => (this.map = ref)} + style={sheet.matchParent} + > (this.map = ref)} + ref={ref => (this.map = ref)} style={sheet.matchParent} - styleURL={MapboxGL.StyleURL.Dark}> + styleURL={MapboxGL.StyleURL.Dark} + > (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} centerCoordinate={[-73.970895, 40.723279]} - style={{ flex: 1 }} + style={{flex: 1}} /> diff --git a/example/src/components/GetZoom.js b/example/src/components/GetZoom.js index 998e3fa16..6dc5a45bb 100644 --- a/example/src/components/GetZoom.js +++ b/example/src/components/GetZoom.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; import BaseExamplePropTypes from './common/BaseExamplePropTypes'; @@ -23,7 +23,7 @@ class GetZoom extends React.Component { async onRegionDidChange() { const zoom = await this._map.getZoom(); - this.setState({ zoom }); + this.setState({zoom}); } render() { @@ -32,10 +32,10 @@ class GetZoom extends React.Component { (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} centerCoordinate={[-73.970895, 40.723279]} - style={{ flex: 1 }} + style={{flex: 1}} /> diff --git a/example/src/components/ImageOverlay.js b/example/src/components/ImageOverlay.js index cba776a08..a35086fd1 100644 --- a/example/src/components/ImageOverlay.js +++ b/example/src/components/ImageOverlay.js @@ -1,15 +1,14 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; - import sheet from '../styles/sheet'; - import radar0 from '../assets/radar.png'; import radar1 from '../assets/radar1.png'; import radar2 from '../assets/radar2.png'; +import Page from './common/Page'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; + const frames = [radar0, radar1, radar2]; class ImageOverlay extends React.Component { @@ -40,7 +39,7 @@ class ImageOverlay extends React.Component { nextFrame = 0; } - this.setState({ radarFrameIndex: nextFrame }); + this.setState({radarFrameIndex: nextFrame}); this.heartbeat(); }); }, 500); @@ -65,14 +64,16 @@ class ImageOverlay extends React.Component { (this.map = ref)} + ref={ref => (this.map = ref)} style={sheet.matchParent} - styleURL={MapboxGL.StyleURL.Dark}> + styleURL={MapboxGL.StyleURL.Dark} + > + url={frames[this.state.radarFrameIndex]} + > diff --git a/example/src/components/IndoorBuilding.js b/example/src/components/IndoorBuilding.js index 0b02e45a4..d5a5da9a6 100644 --- a/example/src/components/IndoorBuilding.js +++ b/example/src/components/IndoorBuilding.js @@ -1,15 +1,15 @@ import React from 'react'; -import { View, StyleSheet } from 'react-native'; +import {View, StyleSheet} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import { Slider } from 'react-native-elements'; - -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; +import {Slider} from 'react-native-elements'; import sheet from '../styles/sheet'; import colors from '../styles/colors'; import indoorMapGeoJSON from '../assets/indoor_3d_map.json'; +import Page from './common/Page'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; + const styles = StyleSheet.create({ slider: { flex: 1, @@ -27,7 +27,7 @@ const layerStyles = MapboxGL.StyleSheet.create({ fillExtrusionHeight: MapboxGL.StyleSheet.identity('height'), fillExtrusionBase: MapboxGL.StyleSheet.identity('base_height'), fillExtrusionColor: MapboxGL.StyleSheet.identity('color'), - fillExtrusionColorTransition: { duration: 2000, delay: 0 }, + fillExtrusionColorTransition: {duration: 2000, delay: 0}, }, }); @@ -47,7 +47,7 @@ class IndoorBuilding extends React.Component { } onSliderChange(value) { - this.setState({ sliderValue: value }); + this.setState({sliderValue: value}); } render() { @@ -58,15 +58,15 @@ class IndoorBuilding extends React.Component { pitch={40} heading={20} centerCoordinate={[-87.61694, 41.86625]} - ref={(ref) => (this.map = ref)} - style={sheet.matchParent}> - + ref={ref => (this.map = ref)} + style={sheet.matchParent} + > + + shape={indoorMapGeoJSON} + > diff --git a/example/src/components/PointInMapView.js b/example/src/components/PointInMapView.js index 4b493dbe5..eab3a1560 100644 --- a/example/src/components/PointInMapView.js +++ b/example/src/components/PointInMapView.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; import BaseExamplePropTypes from './common/BaseExamplePropTypes'; @@ -23,7 +23,7 @@ class PointInMapView extends React.Component { async onPress(e) { const pointInView = await this._map.getPointInView(e.geometry.coordinates); - this.setState({ pointInView: pointInView }); + this.setState({pointInView}); } renderPointInView() { @@ -42,10 +42,10 @@ class PointInMapView extends React.Component { (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} centerCoordinate={[-73.970895, 40.723279]} - style={{ flex: 1 }} + style={{flex: 1}} /> {this.renderPointInView()} diff --git a/example/src/components/QueryAtPoint.js b/example/src/components/QueryAtPoint.js index 6cbbf725d..370440762 100644 --- a/example/src/components/QueryAtPoint.js +++ b/example/src/components/QueryAtPoint.js @@ -1,14 +1,14 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; +import nycJSON from '../assets/nyc_geojson.json'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import Page from './common/Page'; import Bubble from './common/Bubble'; -import sheet from '../styles/sheet'; -import nycJSON from '../assets/nyc_geojson.json'; - const styles = MapboxGL.StyleSheet.create({ neighborhoods: { fillAntialias: true, @@ -35,11 +35,11 @@ class QueryAtPoint extends React.Component { } get emptyState() { - return { selectedGeoJSON: null, selectedCommunityDistrict: -1 }; + return {selectedGeoJSON: null, selectedCommunityDistrict: -1}; } async onPress(e) { - const { screenPointX, screenPointY } = e.properties; + const {screenPointX, screenPointY} = e.properties; const featureCollection = await this._map.queryRenderedFeaturesAtPoint( [screenPointX, screenPointY], @@ -63,11 +63,12 @@ class QueryAtPoint extends React.Component { (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} centerCoordinate={[-73.970895, 40.723279]} style={sheet.matchParent} - styleURL={MapboxGL.StyleURL.Light}> + styleURL={MapboxGL.StyleURL.Light} + > @@ -75,7 +76,8 @@ class QueryAtPoint extends React.Component { {this.state.selectedGeoJSON ? ( + shape={this.state.selectedGeoJSON} + > (this._map = c)} + ref={c => (this._map = c)} onPress={this.onPress} centerCoordinate={[-73.970895, 40.723279]} style={sheet.matchParent} - styleURL={MapboxGL.StyleURL.Light}> + styleURL={MapboxGL.StyleURL.Light} + > @@ -96,7 +96,8 @@ class QueryWithRect extends React.Component { {this.state.selectedGeoJSON ? ( + shape={this.state.selectedGeoJSON} + > - {this.message} + {this.message} ); diff --git a/example/src/components/SetBearing.js b/example/src/components/SetBearing.js index 7a86f2e80..834cb09f2 100644 --- a/example/src/components/SetBearing.js +++ b/example/src/components/SetBearing.js @@ -1,11 +1,11 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import TabBarPage from './common/TabBarPage'; -import sheet from '../styles/sheet'; - class SetBearing extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -15,16 +15,16 @@ class SetBearing extends React.Component { super(props); this._bearingOptions = [ - { label: '0', data: 0 }, - { label: '90', data: 90 }, - { label: '180', data: 180 }, + {label: '0', data: 0}, + {label: '90', data: 90}, + {label: '180', data: 180}, ]; this.onBearingChange = this.onBearingChange.bind(this); } onBearingChange(index, bearing) { - this.map.setCamera({ heading: bearing, duration: 150 }); + this.map.setCamera({heading: bearing, duration: 150}); } render() { @@ -32,9 +32,10 @@ class SetBearing extends React.Component { + onOptionPress={this.onBearingChange} + > (this.map = ref)} + ref={ref => (this.map = ref)} heading={0} showUserLocation={true} userTrackingMode={MapboxGL.UserTrackingModes.Follow} diff --git a/example/src/components/SetPitch.js b/example/src/components/SetPitch.js index 23a2cdb98..461f912be 100644 --- a/example/src/components/SetPitch.js +++ b/example/src/components/SetPitch.js @@ -1,11 +1,11 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import TabBarPage from './common/TabBarPage'; -import sheet from '../styles/sheet'; - class SetPitch extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -15,16 +15,16 @@ class SetPitch extends React.Component { super(props); this._pitchOptions = [ - { label: '15', data: 15 }, - { label: '45', data: 45 }, - { label: '60', data: 60 }, + {label: '15', data: 15}, + {label: '45', data: 45}, + {label: '60', data: 60}, ]; this.onUpdatePitch = this.onUpdatePitch.bind(this); } onUpdatePitch(index, pitch) { - this.map.setCamera({ pitch: pitch, duration: 300 }); + this.map.setCamera({pitch, duration: 300}); } render() { @@ -32,9 +32,10 @@ class SetPitch extends React.Component { + onOptionPress={this.onUpdatePitch} + > (this.map = ref)} + ref={ref => (this.map = ref)} pitch={15} showUserLocation={true} userTrackingMode={MapboxGL.UserTrackingModes.Follow} diff --git a/example/src/components/SetUserLocationVerticalAlignment.js b/example/src/components/SetUserLocationVerticalAlignment.js index bfb749c3f..e8aee4c51 100644 --- a/example/src/components/SetUserLocationVerticalAlignment.js +++ b/example/src/components/SetUserLocationVerticalAlignment.js @@ -1,12 +1,12 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; +import {onSortOptions} from '../utils'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import TabBarPage from './common/TabBarPage'; -import sheet from '../styles/sheet'; -import { onSortOptions } from '../utils'; - class SetUserLocationVerticalAlignment extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -16,7 +16,7 @@ class SetUserLocationVerticalAlignment extends React.Component { super(props); this._alignmentOptions = Object.keys(MapboxGL.UserLocationVerticalAlignment) - .map((key) => { + .map(key => { return { label: key, data: MapboxGL.UserLocationVerticalAlignment[key], @@ -32,7 +32,7 @@ class SetUserLocationVerticalAlignment extends React.Component { } onAlignmentChange(index, userLocationVerticalAlignment) { - this.setState({ currentAlignmentMode: userLocationVerticalAlignment }); + this.setState({currentAlignmentMode: userLocationVerticalAlignment}); } render() { @@ -40,7 +40,8 @@ class SetUserLocationVerticalAlignment extends React.Component { + onOptionPress={this.onAlignmentChange} + > { + .map(key => { return { label: key, data: MapboxGL.UserTrackingModes[key], @@ -45,12 +45,12 @@ class SetUserTrackingModes extends React.Component { } onUserTrackingModeChange(e) { - const userTrackingMode = e.nativeEvent.payload.userTrackingMode; - this.setState({ currentTrackingMode: userTrackingMode }); + const {userTrackingMode} = e.nativeEvent.payload; + this.setState({currentTrackingMode: userTrackingMode}); } onToggleUserLocation() { - this.setState({ showUserLocation: !this.state.showUserLocation }); + this.setState({showUserLocation: !this.state.showUserLocation}); } get userTrackingModeText() { @@ -72,7 +72,8 @@ class SetUserTrackingModes extends React.Component { {...this.props} scrollable options={this._trackingOptions} - onOptionPress={this.onTrackingChange}> + onOptionPress={this.onTrackingChange} + > - + User Tracking Mode: {this.userTrackingModeText} - + Toggle User Location diff --git a/example/src/components/ShapeSourceIcon.js b/example/src/components/ShapeSourceIcon.js index c2c61eec3..81b54e8f8 100644 --- a/example/src/components/ShapeSourceIcon.js +++ b/example/src/components/ShapeSourceIcon.js @@ -1,12 +1,12 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; - import sheet from '../styles/sheet'; import exampleIcon from '../assets/example.png'; -import { IS_ANDROID } from '../utils'; +import {IS_ANDROID} from '../utils'; + +import Page from './common/Page'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; const styles = MapboxGL.StyleSheet.create({ icon: { @@ -69,11 +69,13 @@ class ShapeSourceIcon extends React.Component { + style={sheet.matchParent} + > + images={{example: exampleIcon, assets: ['pin']}} + > diff --git a/example/src/components/ShowClick.js b/example/src/components/ShowClick.js index b0f55100b..1db0ab45d 100644 --- a/example/src/components/ShowClick.js +++ b/example/src/components/ShowClick.js @@ -1,15 +1,14 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; +import {DEFAULT_CENTER_COORDINATE} from '../utils'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import Page from './common/Page'; import Bubble from './common/Bubble'; -import sheet from '../styles/sheet'; - -import { DEFAULT_CENTER_COORDINATE } from '../utils'; - class ShowClick extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -36,7 +35,7 @@ class ShowClick extends React.Component { } onPress(event) { - const { geometry, properties } = event; + const {geometry, properties} = event; this.setState({ latitude: geometry.coordinates[1], diff --git a/example/src/components/ShowMap.js b/example/src/components/ShowMap.js index 3d8773ed8..55d30bb8e 100644 --- a/example/src/components/ShowMap.js +++ b/example/src/components/ShowMap.js @@ -1,12 +1,12 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; +import {onSortOptions} from '../utils'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import TabBarPage from './common/TabBarPage'; -import sheet from '../styles/sheet'; -import { onSortOptions } from '../utils'; - class ShowMap extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -16,7 +16,7 @@ class ShowMap extends React.Component { super(props); this._mapOptions = Object.keys(MapboxGL.StyleURL) - .map((key) => { + .map(key => { return { label: key, data: MapboxGL.StyleURL[key], @@ -32,7 +32,7 @@ class ShowMap extends React.Component { } onMapChange(index, styleURL) { - this.setState({ styleURL: styleURL }); + this.setState({styleURL}); } render() { @@ -41,7 +41,8 @@ class ShowMap extends React.Component { {...this.props} scrollable options={this._mapOptions} - onOptionPress={this.onMapChange}> + onOptionPress={this.onMapChange} + > this.onAnnotationSelected(i, feature)} + onSelected={feature => this.onAnnotationSelected(i, feature)} onDeselected={() => this.onAnnotationDeselected(i)} - coordinate={coordinate}> + coordinate={coordinate} + > @@ -127,12 +128,13 @@ class ShowPointAnnotation extends React.Component { return ( (this._map = c)} + ref={c => (this._map = c)} zoomLevel={16} onPress={this.onPress} onDidFinishLoadingMap={this.onDidFinishLoadingMap} centerCoordinate={this.state.coordinates[0]} - style={sheet.matchParent}> + style={sheet.matchParent} + > {this.renderAnnotations()} diff --git a/example/src/components/ShowRegionDidChange.js b/example/src/components/ShowRegionDidChange.js index 73a454965..f0b73da14 100644 --- a/example/src/components/ShowRegionDidChange.js +++ b/example/src/components/ShowRegionDidChange.js @@ -1,14 +1,14 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; +import {DEFAULT_CENTER_COORDINATE, SF_OFFICE_COORDINATE} from '../utils'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import TabBarPage from './common/TabBarPage'; import Bubble from './common/Bubble'; -import sheet from '../styles/sheet'; -import { DEFAULT_CENTER_COORDINATE, SF_OFFICE_COORDINATE } from '../utils'; - class ShowRegionDidChange extends React.Component { static propTypes = { ...BaseExamplePropTypes, @@ -23,12 +23,12 @@ class ShowRegionDidChange extends React.Component { }; this._tabOptions = [ - { label: 'Fly To', data: SF_OFFICE_COORDINATE }, + {label: 'Fly To', data: SF_OFFICE_COORDINATE}, { label: 'Fit Bounds', data: [[-74.12641, 40.797968], [-74.143727, 40.772177]], }, - { label: 'Zoom To', data: 12 }, + {label: 'Zoom To', data: 12}, ]; this.onRegionDidChange = this.onRegionDidChange.bind(this); @@ -60,11 +60,11 @@ class ShowRegionDidChange extends React.Component { } onRegionWillChange(regionFeature) { - this.setState({ reason: 'will change', regionFeature: regionFeature }); + this.setState({reason: 'will change', regionFeature}); } onRegionDidChange(regionFeature) { - this.setState({ reason: 'did change', regionFeature: regionFeature }); + this.setState({reason: 'did change', regionFeature}); } renderRegionChange() { @@ -79,15 +79,15 @@ class ShowRegionDidChange extends React.Component { ); } - const { geometry, properties } = this.state.regionFeature; + const {geometry, properties} = this.state.regionFeature; const neCoord = properties.visibleBounds[0] - .map((n) => n.toPrecision(6)) + .map(n => n.toPrecision(6)) .join(', '); const swCoord = properties.visibleBounds[1] - .map((n) => n.toPrecision(6)) + .map(n => n.toPrecision(6)) .join(', '); return ( - + {this.state.reason} Latitude: {geometry.coordinates[1]} Longitude: {geometry.coordinates[0]} @@ -109,9 +109,10 @@ class ShowRegionDidChange extends React.Component { + onOptionPress={this.onOptionPress} + > (this.map = c)} + ref={c => (this.map = c)} centerCoordinate={DEFAULT_CENTER_COORDINATE} style={sheet.matchParent} onDidFinishLoadingMap={this.onDidFinishLoadingMap} diff --git a/example/src/components/TakeSnapshot.js b/example/src/components/TakeSnapshot.js index 05f0e39af..bffc7ff55 100644 --- a/example/src/components/TakeSnapshot.js +++ b/example/src/components/TakeSnapshot.js @@ -35,13 +35,17 @@ class TakeSnapshot extends React.Component { }; } - async componentDidMount() { - const { width, height } = Dimensions.get('window'); + componentDidMount() { + this.takeSnapshot(); + } + + async takeSnapshot() { + const {width, height} = Dimensions.get('window'); const uri = await MapboxGL.snapshotManager.takeSnap({ centerCoordinate: [-74.12641, 40.797968], - width: width, - height: height, + width, + height, zoomLevel: 12, pitch: 30, heading: 20, @@ -49,7 +53,7 @@ class TakeSnapshot extends React.Component { writeToDisk: true, // creates a temp file }); - this.setState({ snapshotURI: uri }); + this.setState({snapshotURI: uri}); } render() { @@ -57,8 +61,7 @@ class TakeSnapshot extends React.Component { if (!this.state.snapshotURI) { childView = ( - + Generating Snapshot @@ -67,7 +70,7 @@ class TakeSnapshot extends React.Component { childView = ( diff --git a/example/src/components/TakeSnapshotWithMap.js b/example/src/components/TakeSnapshotWithMap.js index b14caf40f..3acbf1564 100644 --- a/example/src/components/TakeSnapshotWithMap.js +++ b/example/src/components/TakeSnapshotWithMap.js @@ -1,13 +1,13 @@ import React from 'react'; -import { StyleSheet, View, Text, TouchableOpacity, Image } from 'react-native'; +import {StyleSheet, View, Text, TouchableOpacity, Image} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; - import sheet from '../styles/sheet'; import colors from '../styles/colors'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; +import Page from './common/Page'; + const styles = StyleSheet.create({ button: { height: 60, @@ -40,19 +40,20 @@ class TakeSnapshotWithMap extends React.Component { async onTakeSnapshot() { const uri = await this.map.takeSnap(false); - this.setState({ uri: uri }); + this.setState({uri}); } render() { return ( - + (this.map = ref)} - style={{ flex: 0.5 }}> + ref={ref => (this.map = ref)} + style={{flex: 0.5}} + > - + {this.state.uri ? ( ) : null} @@ -75,7 +76,7 @@ class TakeSnapshotWithMap extends React.Component { this.onTakeSnapshot()}> - Take snapshot + Take snapshot diff --git a/example/src/components/TwoByTwo.js b/example/src/components/TwoByTwo.js index 0edd5dc04..3ce8730c5 100644 --- a/example/src/components/TwoByTwo.js +++ b/example/src/components/TwoByTwo.js @@ -1,12 +1,12 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; - import sheet from '../styles/sheet'; import smileyFaceGeoJSON from '../assets/smiley_face.json'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; +import Page from './common/Page'; + const layerStyles = MapboxGL.StyleSheet.create({ smileyFaceLight: { fillAntialias: true, @@ -31,9 +31,10 @@ class TwoByTwo extends React.Component { zoomLevel={2} centerCoordinate={[-35.15165038, 40.6235728]} onSetCameraComplete={this.onUpdateZoomLevel} - ref={(ref) => (this.map = ref)} + ref={ref => (this.map = ref)} style={sheet.matchParent} - styleURL={styleURL}> + styleURL={styleURL} + > diff --git a/example/src/components/UserLocationChange.js b/example/src/components/UserLocationChange.js index f62fe0b6c..d35e9aff2 100644 --- a/example/src/components/UserLocationChange.js +++ b/example/src/components/UserLocationChange.js @@ -1,13 +1,13 @@ import React from 'react'; -import { Text } from 'react-native'; +import {Text} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; +import sheet from '../styles/sheet'; + import BaseExamplePropTypes from './common/BaseExamplePropTypes'; import Page from './common/Page'; import Bubble from './common/Bubble'; -import sheet from '../styles/sheet'; - class UserLocationChange extends React.Component { static propTypes = { ...BaseExamplePropTypes, diff --git a/example/src/components/WatercolorRasterTiles.js b/example/src/components/WatercolorRasterTiles.js index 93e727d8f..2404f6051 100644 --- a/example/src/components/WatercolorRasterTiles.js +++ b/example/src/components/WatercolorRasterTiles.js @@ -1,14 +1,14 @@ import React from 'react'; -import { View, StyleSheet } from 'react-native'; +import {View, StyleSheet} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import { Slider } from 'react-native-elements'; - -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; +import {Slider} from 'react-native-elements'; import sheet from '../styles/sheet'; import colors from '../styles/colors'; -import { SF_OFFICE_COORDINATE } from '../utils'; +import {SF_OFFICE_COORDINATE} from '../utils'; + +import Page from './common/Page'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; const styles = StyleSheet.create({ slider: { @@ -36,7 +36,7 @@ class WatercolorRasterTiles extends React.Component { } onOpacityChange(value) { - this.setState({ opacity: value }); + this.setState({opacity: value}); } render() { @@ -51,12 +51,13 @@ class WatercolorRasterTiles extends React.Component { + style={sheet.matchParent} + > @@ -66,7 +67,7 @@ class WatercolorRasterTiles extends React.Component { value={this.state.opacity} onValueChange={this.onOpacityChange} thumbTintColor={colors.primary.blue} - thumbTouchSize={{ width: 44, height: 44 }} + thumbTouchSize={{width: 44, height: 44}} maximumTrackTintColor={colors.secondary.purpleLight} minimumTrackTintColor={colors.secondary.purpleDark} /> diff --git a/example/src/components/YoYo.js b/example/src/components/YoYo.js index bd80b3d74..7d41800c4 100644 --- a/example/src/components/YoYo.js +++ b/example/src/components/YoYo.js @@ -1,13 +1,12 @@ import React from 'react'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; -import BaseExamplePropTypes from './common/BaseExamplePropTypes'; -import Page from './common/Page'; - import sheet from '../styles/sheet'; import colors from '../styles/colors'; +import {SF_OFFICE_COORDINATE} from '../utils'; -import { SF_OFFICE_COORDINATE } from '../utils'; +import Page from './common/Page'; +import BaseExamplePropTypes from './common/BaseExamplePropTypes'; const layerStyles = MapboxGL.StyleSheet.create({ background: { @@ -47,7 +46,7 @@ class YoYo extends React.Component { requestAnimationFrame(async () => { await this.map.zoomTo(this.state.zoomLevel, 8000); const nextZoomLevel = this.state.zoomLevel === 12 ? 2 : 12; - this.setState({ zoomLevel: nextZoomLevel }); + this.setState({zoomLevel: nextZoomLevel}); this.cameraLoop(); }); } @@ -58,9 +57,10 @@ class YoYo extends React.Component { (this.map = ref)} + ref={ref => (this.map = ref)} style={sheet.matchParent} - styleURL={MapboxGL.StyleURL.Dark}> + styleURL={MapboxGL.StyleURL.Dark} + > - {innerChildView} - + {innerChildView} ); } } diff --git a/example/src/components/common/MapHeader.js b/example/src/components/common/MapHeader.js index 5009c673e..799e3e06a 100644 --- a/example/src/components/common/MapHeader.js +++ b/example/src/components/common/MapHeader.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Text, StyleSheet } from 'react-native'; -import { Icon, Header } from 'react-native-elements'; +import {Text, StyleSheet} from 'react-native'; +import {Icon, Header} from 'react-native-elements'; + import colors from '../../styles/colors'; const styles = StyleSheet.create({ @@ -49,7 +50,7 @@ class MapHeader extends React.PureComponent { return ( { - this.setState({ pulseOpacity: 1 }); + this.setState({pulseOpacity: 1}); }); } @@ -100,12 +99,12 @@ class PulseCircleLayer extends React.Component { const innerCircleStyle = [ styles.innerCircle, this.props.innerCircleStyle, - { circleRadius: this.props.radius }, + {circleRadius: this.props.radius}, ]; const innerCirclePulseStyle = [ styles.innerCirclePulse, - { circleRadius: this.state.innerRadius }, + {circleRadius: this.state.innerRadius}, ]; const outerCircleStyle = [ @@ -120,7 +119,8 @@ class PulseCircleLayer extends React.Component { return ( + shape={this.props.shape} + > o.label), + buttons: this.props.options.map(o => o.label), containerStyle: styles.buttonGroup, }; @@ -77,8 +76,8 @@ class TabBarPage extends React.Component { buttonGroupProps.buttonStyle = styles.scrollableButton; } - let view = this.props.scrollable ? ( - + const view = this.props.scrollable ? ( + ) : ( diff --git a/example/src/styles/sheet.js b/example/src/styles/sheet.js index 1339d6a73..f3572c1b4 100644 --- a/example/src/styles/sheet.js +++ b/example/src/styles/sheet.js @@ -1,6 +1,6 @@ -import { StyleSheet } from 'react-native'; +import {StyleSheet} from 'react-native'; -let styles = {}; +const styles = {}; styles.matchParent = { flex: 1, diff --git a/example/src/utils/RouteSimulator.js b/example/src/utils/RouteSimulator.js index 85fa87c75..f2dd814b8 100644 --- a/example/src/utils/RouteSimulator.js +++ b/example/src/utils/RouteSimulator.js @@ -1,4 +1,4 @@ -import { Animated } from 'react-native'; +import {Animated} from 'react-native'; import MapboxGL from '@mapbox/react-native-mapbox-gl'; import along from '@turf/along'; import findDistance from '@turf/distance'; @@ -78,7 +78,7 @@ class RouteSimulator { this._currentDistance += this._speed; // interpolate between previous to current distance - const listener = (step) => { + const listener = step => { const currentPosition = this._polyline.coordinateFromStart(step.value); this.emit(currentPosition); }; diff --git a/example/src/utils/config.js b/example/src/utils/config.js index 337ae1af0..d2aec32c9 100644 --- a/example/src/utils/config.js +++ b/example/src/utils/config.js @@ -1,4 +1,4 @@ -import env from './../../env.json'; +import env from '../../env.json'; class Config { get(key) { diff --git a/example/src/utils/index.js b/example/src/utils/index.js index 3bcb8fe52..465a05504 100644 --- a/example/src/utils/index.js +++ b/example/src/utils/index.js @@ -1,4 +1,4 @@ -import { Platform } from 'react-native'; +import {Platform} from 'react-native'; export const IS_ANDROID = Platform.OS === 'android'; export const DEFAULT_CENTER_COORDINATE = [-77.036086, 38.910233]; diff --git a/ios/RCTMGL/RCTMGLStyle.m b/ios/RCTMGL/RCTMGLStyle.m index 163872f5d..f1ac3d230 100644 --- a/ios/RCTMGL/RCTMGLStyle.m +++ b/ios/RCTMGL/RCTMGLStyle.m @@ -1123,7 +1123,7 @@ - (void)setTextJustify:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLS - (void)setTextAnchor:(MGLSymbolStyleLayer *)layer withReactStyleValue:(RCTMGLStyleValue *)styleValue { - NSArray *allowedFunctionTypes = @[@"camera"]; + NSArray *allowedFunctionTypes = @[@"camera", @"source", @"composite"]; if ([styleValue isFunction] && ![styleValue isFunctionTypeSupported:allowedFunctionTypes]) { // TODO throw execpetion return; diff --git a/ios/RCTMGL/RCTMGLStyleValue.m b/ios/RCTMGL/RCTMGLStyleValue.m index 8da52efe2..20680d8cf 100644 --- a/ios/RCTMGL/RCTMGLStyleValue.m +++ b/ios/RCTMGL/RCTMGLStyleValue.m @@ -52,6 +52,8 @@ - (id)mglStyleValue if (iosTypeOverride != nil) { if ([iosTypeOverride isEqual:@"vector"]) { rawValue = [NSValue valueWithCGVector:[RCTMGLUtils toCGVector:rawValue]]; + } else if ([iosTypeOverride isEqual:@"edgeinsets"]){ + rawValue = [NSValue valueWithUIEdgeInsets:[RCTMGLUtils toUIEdgeInsets:rawValue]]; } } diff --git a/ios/RCTMGL/RCTMGLUtils.h b/ios/RCTMGL/RCTMGLUtils.h index 15b14e868..427118d04 100644 --- a/ios/RCTMGL/RCTMGLUtils.h +++ b/ios/RCTMGL/RCTMGLUtils.h @@ -25,5 +25,6 @@ + (void)fetchImage:(RCTBridge*)bridge url:(NSString*)url callback:(RCTImageLoaderCompletionBlock)callback; + (void)fetchImages:(RCTBridge *)bridge style:(MGLStyle *)style objects:(NSDictionary*)objects callback:(void (^)())callback; + (CGVector)toCGVector:(NSArray*)arr; ++ (UIEdgeInsets)toUIEdgeInsets:(NSArray *)arr; @end diff --git a/ios/RCTMGL/RCTMGLUtils.m b/ios/RCTMGL/RCTMGLUtils.m index fd6b17d2c..4964a374a 100644 --- a/ios/RCTMGL/RCTMGLUtils.m +++ b/ios/RCTMGL/RCTMGLUtils.m @@ -22,6 +22,11 @@ + (CLLocationCoordinate2D)fromFeature:(NSString*)jsonStr return feature.coordinate; } ++ (UIEdgeInsets)toUIEdgeInsets:(NSArray *)arr +{ + return UIEdgeInsetsMake([arr[0] floatValue], [arr[1] floatValue], [arr[2] floatValue], [arr[3] floatValue]); +} + + (MGLShape*)shapeFromGeoJSON:(NSString*)jsonStr { NSData* data = [jsonStr dataUsingEncoding:NSUTF8StringEncoding]; diff --git a/javascript/components/AbstractLayer.js b/javascript/components/AbstractLayer.js index c0c907703..a943339c9 100644 --- a/javascript/components/AbstractLayer.js +++ b/javascript/components/AbstractLayer.js @@ -1,7 +1,8 @@ /* eslint react/prop-types:0 */ import React from 'react'; + import MapboxStyleSheet from '../utils/MapboxStyleSheet'; -import { getFilter } from '../utils/filterUtils'; +import {getFilter} from '../utils/filterUtils'; class AbstractLayer extends React.Component { get baseProps() { @@ -32,7 +33,7 @@ class AbstractLayer extends React.Component { const styles = this.props.style; let flattenStyle = {}; - for (let style of styles) { + for (const style of styles) { if (!style) { continue; } diff --git a/javascript/components/BackgroundLayer.js b/javascript/components/BackgroundLayer.js index 1443707a2..1be9b7693 100644 --- a/javascript/components/BackgroundLayer.js +++ b/javascript/components/BackgroundLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {BackgroundLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { BackgroundLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -81,7 +82,7 @@ const RCTMGLBackgroundLayer = requireNativeComponent( NATIVE_MODULE_NAME, BackgroundLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }, ); diff --git a/javascript/components/Callout.js b/javascript/components/Callout.js index f73756b29..e4f991a94 100644 --- a/javascript/components/Callout.js +++ b/javascript/components/Callout.js @@ -7,7 +7,8 @@ import { requireNativeComponent, StyleSheet, } from 'react-native'; -import { viewPropTypes } from '../utils'; + +import {viewPropTypes} from '../utils'; export const NATIVE_MODULE_NAME = 'RCTMGLCallout'; diff --git a/javascript/components/CircleLayer.js b/javascript/components/CircleLayer.js index 5be120757..62585ca47 100644 --- a/javascript/components/CircleLayer.js +++ b/javascript/components/CircleLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {CircleLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { CircleLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -90,7 +91,7 @@ const RCTMGLCircleLayer = requireNativeComponent( NATIVE_MODULE_NAME, CircleLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }, ); diff --git a/javascript/components/FillExtrusionLayer.js b/javascript/components/FillExtrusionLayer.js index fc8a6b301..9cad1e9d3 100644 --- a/javascript/components/FillExtrusionLayer.js +++ b/javascript/components/FillExtrusionLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {FillExtrusionLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { FillExtrusionLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -88,7 +89,7 @@ const RCTMGLFillExtrusionLayer = requireNativeComponent( NATIVE_MODULE_NAME, FillExtrusionLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }, ); diff --git a/javascript/components/FillLayer.js b/javascript/components/FillLayer.js index 1129b875a..90c3504bf 100644 --- a/javascript/components/FillLayer.js +++ b/javascript/components/FillLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {FillLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { FillLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -85,7 +86,7 @@ class FillLayer extends AbstractLayer { } const RCTMGLFillLayer = requireNativeComponent(NATIVE_MODULE_NAME, FillLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }); export default FillLayer; diff --git a/javascript/components/ImageSource.js b/javascript/components/ImageSource.js index df0c3eabb..3d7764868 100644 --- a/javascript/components/ImageSource.js +++ b/javascript/components/ImageSource.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { requireNativeComponent } from 'react-native'; +import {requireNativeComponent} from 'react-native'; + import { cloneReactChildrenWithProps, viewPropTypes, @@ -38,7 +39,7 @@ class ImageSource extends React.PureComponent { }; _getURL() { - let url = this.props.url; + let {url} = this.props; if (isNumber(this.props.url)) { url = resolveImagePath(this.props.url); diff --git a/javascript/components/Light.js b/javascript/components/Light.js index c3b9e2898..c8ceacedf 100644 --- a/javascript/components/Light.js +++ b/javascript/components/Light.js @@ -1,8 +1,9 @@ import React from 'react'; -import { requireNativeComponent } from 'react-native'; +import {requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {LightLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { LightLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; export const NATIVE_MODULE_NAME = 'RCTMGLLight'; @@ -32,7 +33,7 @@ class Light extends AbstractLayer { } const RCTMGLLight = requireNativeComponent(NATIVE_MODULE_NAME, Light, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }); export default Light; diff --git a/javascript/components/LineLayer.js b/javascript/components/LineLayer.js index cdb98fa58..052c22290 100644 --- a/javascript/components/LineLayer.js +++ b/javascript/components/LineLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {LineLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { LineLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -86,7 +87,7 @@ class LineLayer extends AbstractLayer { } const RCTMGLLineLayer = requireNativeComponent(NATIVE_MODULE_NAME, LineLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }); export default LineLayer; diff --git a/javascript/components/MapView.js b/javascript/components/MapView.js index 6247ca5d1..0a4aeda3d 100644 --- a/javascript/components/MapView.js +++ b/javascript/components/MapView.js @@ -6,8 +6,9 @@ import { NativeModules, requireNativeComponent, } from 'react-native'; -import { makePoint, makeLatLngBounds } from '../utils/geoUtils'; +import _ from 'underscore'; +import {makePoint, makeLatLngBounds} from '../utils/geoUtils'; import { isFunction, isNumber, @@ -16,10 +17,7 @@ import { isAndroid, viewPropTypes, } from '../utils'; - -import _ from 'underscore'; - -import { getFilter } from '../utils/filterUtils'; +import {getFilter} from '../utils/filterUtils'; const MapboxGL = NativeModules.MGLModule; @@ -28,7 +26,7 @@ export const NATIVE_MODULE_NAME = 'RCTMGLMapView'; export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = 'RCTMGLAndroidTextureMapView'; const styles = StyleSheet.create({ - matchParent: { flex: 1 }, + matchParent: {flex: 1}, }); /** @@ -313,24 +311,38 @@ class MapView extends React.Component { setHandledMapChangedEvents(props) { if (isAndroid()) { - const events = []; - - if (props.onRegionWillChange) events.push(MapboxGL.EventTypes.RegionWillChange); - if (props.onRegionIsChanging) events.push(MapboxGL.EventTypes.RegionIsChanging); - if (props.onRegionDidChange) events.push(MapboxGL.EventTypes.RegionDidChange); - if (props.onUserLocationUpdate) events.push(MapboxGL.EventTypes.UserLocationUpdated); - if (props.onWillStartLoadingMap) events.push(MapboxGL.EventTypes.WillStartLoadingMap); - if (props.onDidFinishLoadingMap) events.push(MapboxGL.EventTypes.DidFinishLoadingMap); - if (props.onDidFailLoadingMap) events.push(MapboxGL.EventTypes.DidFailLoadingMap); - if (props.onWillStartRenderingFrame) events.push(MapboxGL.EventTypes.WillStartRenderingFrame); - if (props.onDidFinishRenderingFrame) events.push(MapboxGL.EventTypes.DidFinishRenderingFrame); - if (props.onDidFinishRenderingFrameFully) events.push(MapboxGL.EventTypes.DidFinishRenderingFrameFully); - if (props.onWillStartRenderingMap) events.push(MapboxGL.EventTypes.WillStartRenderingMap); - if (props.onDidFinishRenderingMap) events.push(MapboxGL.EventTypes.DidFinishRenderingMap); - if (props.onDidFinishRenderingMapFully) events.push(MapboxGL.EventTypes.DidFinishRenderingMapFully); - if (props.onDidFinishLoadingStyle) events.push(MapboxGL.EventTypes.DidFinishLoadingStyle); - - this._runNativeCommand('setHandledMapChangedEvents', events); + const events = []; + + if (props.onRegionWillChange) + events.push(MapboxGL.EventTypes.RegionWillChange); + if (props.onRegionIsChanging) + events.push(MapboxGL.EventTypes.RegionIsChanging); + if (props.onRegionDidChange) + events.push(MapboxGL.EventTypes.RegionDidChange); + if (props.onUserLocationUpdate) + events.push(MapboxGL.EventTypes.UserLocationUpdated); + if (props.onWillStartLoadingMap) + events.push(MapboxGL.EventTypes.WillStartLoadingMap); + if (props.onDidFinishLoadingMap) + events.push(MapboxGL.EventTypes.DidFinishLoadingMap); + if (props.onDidFailLoadingMap) + events.push(MapboxGL.EventTypes.DidFailLoadingMap); + if (props.onWillStartRenderingFrame) + events.push(MapboxGL.EventTypes.WillStartRenderingFrame); + if (props.onDidFinishRenderingFrame) + events.push(MapboxGL.EventTypes.DidFinishRenderingFrame); + if (props.onDidFinishRenderingFrameFully) + events.push(MapboxGL.EventTypes.DidFinishRenderingFrameFully); + if (props.onWillStartRenderingMap) + events.push(MapboxGL.EventTypes.WillStartRenderingMap); + if (props.onDidFinishRenderingMap) + events.push(MapboxGL.EventTypes.DidFinishRenderingMap); + if (props.onDidFinishRenderingMapFully) + events.push(MapboxGL.EventTypes.DidFinishRenderingMapFully); + if (props.onDidFinishLoadingStyle) + events.push(MapboxGL.EventTypes.DidFinishLoadingStyle); + + this._runNativeCommand('setHandledMapChangedEvents', events); } } @@ -460,7 +472,7 @@ class MapView extends React.Component { return; } - let pad = { + const pad = { paddingLeft: 0, paddingRight: 0, paddingTop: 0, @@ -492,7 +504,7 @@ class MapView extends React.Component { sw: southWestCoordinates, ...pad, }, - duration: duration, + duration, mode: MapboxGL.CameraModes.None, }); } @@ -510,11 +522,11 @@ class MapView extends React.Component { */ flyTo(coordinates, duration = 2000) { if (!this._nativeRef) { - return Promise.reject('No native reference found'); + return Promise.reject(new Error('No native reference found')); } return this.setCamera({ centerCoordinate: coordinates, - duration: duration, + duration, mode: MapboxGL.CameraModes.Flight, }); } @@ -532,11 +544,11 @@ class MapView extends React.Component { */ moveTo(coordinates, duration = 0) { if (!this._nativeRef) { - return Promise.reject('No native reference found'); + return Promise.reject(new Error('No native reference found')); } return this.setCamera({ centerCoordinate: coordinates, - duration: duration, + duration, }); } @@ -553,11 +565,11 @@ class MapView extends React.Component { */ zoomTo(zoomLevel, duration = 2000) { if (!this._nativeRef) { - return Promise.reject('No native reference found'); + return Promise.reject(new Error('No native reference found')); } return this.setCamera({ zoom: zoomLevel, - duration: duration, + duration, mode: MapboxGL.CameraModes.Flight, }); } @@ -591,7 +603,7 @@ class MapView extends React.Component { if (config.stops) { cameraConfig.stops = []; - for (let stop of config.stops) { + for (const stop of config.stops) { cameraConfig.stops.push(this._createStopConfig(stop)); } } else { @@ -640,17 +652,17 @@ class MapView extends React.Component { _runNativeCommand(methodName, args = []) { if (!this._nativeRef) { - return new Promise((resolve) => { + return new Promise(resolve => { this._preRefMapMethodQueue.push({ - method: { name: methodName, args: args }, + method: {name: methodName, args}, resolver: resolve, }); }); } if (isAndroid()) { - return new Promise((resolve) => { - const callbackID = '' + Date.now(); + return new Promise(resolve => { + const callbackID = `${Date.now()}`; this._addAddAndroidCallback(callbackID, resolve); args.unshift(callbackID); runNativeCommand(NATIVE_MODULE_NAME, methodName, this._nativeRef, args); @@ -665,7 +677,7 @@ class MapView extends React.Component { } _createStopConfig(config = {}) { - let stopConfig = { + const stopConfig = { mode: isNumber(config.mode) ? config.mode : MapboxGL.CameraModes.Ease, pitch: config.pitch, heading: config.heading, @@ -743,8 +755,11 @@ class MapView extends React.Component { } _onChange(e) { - const { regionWillChangeDebounceTime, regionDidChangeDebounceTime } = this.props; - const { type, payload } = e.nativeEvent; + const { + regionWillChangeDebounceTime, + regionDidChangeDebounceTime, + } = this.props; + const {type, payload} = e.nativeEvent; let propName = ''; switch (type) { @@ -798,6 +813,8 @@ class MapView extends React.Component { case MapboxGL.EventTypes.DidFinishLoadingStyle: propName = 'onDidFinishLoadingStyle'; break; + default: + console.warn('Unhandled event callback type', type); } if (propName.length) { @@ -806,7 +823,7 @@ class MapView extends React.Component { } _onLayout() { - this.setState({ isReady: true }); + this.setState({isReady: true}); } _handleOnChange(propName, payload) { @@ -851,7 +868,7 @@ class MapView extends React.Component { } render() { - let props = { + const props = { ...this.props, centerCoordinate: this._getCenterCoordinate(), contentInset: this._getContentInset(), @@ -859,7 +876,7 @@ class MapView extends React.Component { }; const callbacks = { - ref: (nativeRef) => this._setNativeRef(nativeRef), + ref: nativeRef => this._setNativeRef(nativeRef), onPress: this._onPress, onLongPress: this._onLongPress, onMapChange: this._onChange, @@ -891,7 +908,7 @@ class MapView extends React.Component { } const RCTMGLMapView = requireNativeComponent(NATIVE_MODULE_NAME, MapView, { - nativeOnly: { onMapChange: true, onAndroidCallback: true }, + nativeOnly: {onMapChange: true, onAndroidCallback: true}, }); let RCTMGLAndroidTextureMapView; @@ -900,7 +917,7 @@ if (isAndroid()) { ANDROID_TEXTURE_NATIVE_MODULE_NAME, MapView, { - nativeOnly: { onMapChange: true, onAndroidCallback: true }, + nativeOnly: {onMapChange: true, onAndroidCallback: true}, }, ); } diff --git a/javascript/components/PointAnnotation.js b/javascript/components/PointAnnotation.js index e5bf1fb57..5f23af290 100644 --- a/javascript/components/PointAnnotation.js +++ b/javascript/components/PointAnnotation.js @@ -1,9 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { requireNativeComponent, StyleSheet } from 'react-native'; +import {requireNativeComponent, StyleSheet} from 'react-native'; -import { toJSONString, isFunction, viewPropTypes } from '../utils'; -import { makePoint } from '../utils/geoUtils'; +import {toJSONString, isFunction, viewPropTypes} from '../utils'; +import {makePoint} from '../utils/geoUtils'; export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation'; @@ -72,7 +72,7 @@ class PointAnnotation extends React.PureComponent { }; static defaultProps = { - anchor: { x: 0.5, y: 0.5 }, + anchor: {x: 0.5, y: 0.5}, }; constructor(props) { diff --git a/javascript/components/RasterLayer.js b/javascript/components/RasterLayer.js index 0aaf20f36..60c2a52e1 100644 --- a/javascript/components/RasterLayer.js +++ b/javascript/components/RasterLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {RasterLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { RasterLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -85,7 +86,7 @@ const RCTMGLRasterLayer = requireNativeComponent( NATIVE_MODULE_NAME, RasterLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }, ); diff --git a/javascript/components/RasterSource.js b/javascript/components/RasterSource.js index 35e19ef76..d160e6edd 100644 --- a/javascript/components/RasterSource.js +++ b/javascript/components/RasterSource.js @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; -import { cloneReactChildrenWithProps, viewPropTypes } from '../utils'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {cloneReactChildrenWithProps, viewPropTypes} from '../utils'; const MapboxGL = NativeModules.MGLModule; diff --git a/javascript/components/ShapeSource.js b/javascript/components/ShapeSource.js index c63b94e6a..167df3a02 100644 --- a/javascript/components/ShapeSource.js +++ b/javascript/components/ShapeSource.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; +import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; import { toJSONString, @@ -9,8 +10,6 @@ import { isFunction, } from '../utils'; -import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; - const MapboxGL = NativeModules.MGLModule; export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource'; @@ -111,7 +110,6 @@ class ShapeSource extends React.Component { if (!this.props.shape) { return; } - // TODO: Add turf validation and throw exeception return toJSONString(this.props.shape); } @@ -120,11 +118,11 @@ class ShapeSource extends React.Component { return; } - let images = {}; + const images = {}; let nativeImages = []; const imageNames = Object.keys(this.props.images); - for (let imageName of imageNames) { + for (const imageName of imageNames) { if ( imageName === ShapeSource.NATIVE_ASSETS_KEY && Array.isArray(this.props.images[ShapeSource.NATIVE_ASSETS_KEY]) @@ -140,8 +138,8 @@ class ShapeSource extends React.Component { } return { - images: images, - nativeImages: nativeImages, + images, + nativeImages, }; } diff --git a/javascript/components/SymbolLayer.js b/javascript/components/SymbolLayer.js index 9efa25aee..8fdcee460 100644 --- a/javascript/components/SymbolLayer.js +++ b/javascript/components/SymbolLayer.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {viewPropTypes} from '../utils'; +import {SymbolLayerStyleProp} from '../utils/styleMap'; -import { viewPropTypes } from '../utils'; -import { SymbolLayerStyleProp } from '../utils/styleMap'; import AbstractLayer from './AbstractLayer'; const MapboxGL = NativeModules.MGLModule; @@ -88,7 +89,7 @@ const RCTMGLSymbolLayer = requireNativeComponent( NATIVE_MODULE_NAME, SymbolLayer, { - nativeOnly: { reactStyle: true }, + nativeOnly: {reactStyle: true}, }, ); diff --git a/javascript/components/VectorSource.js b/javascript/components/VectorSource.js index 1fac92773..dced568db 100644 --- a/javascript/components/VectorSource.js +++ b/javascript/components/VectorSource.js @@ -1,11 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { NativeModules, requireNativeComponent } from 'react-native'; -import { - cloneReactChildrenWithProps, - viewPropTypes, - isFunction, -} from '../utils'; +import {NativeModules, requireNativeComponent} from 'react-native'; + +import {cloneReactChildrenWithProps, viewPropTypes, isFunction} from '../utils'; const MapboxGL = NativeModules.MGLModule; diff --git a/javascript/index.js b/javascript/index.js index 4022bc80e..0475bfc15 100644 --- a/javascript/index.js +++ b/javascript/index.js @@ -1,21 +1,19 @@ -import { Animated, NativeModules, PermissionsAndroid } from 'react-native'; -import { isAndroid } from './utils'; -import * as geoUtils from './utils/geoUtils'; +import {Animated, NativeModules, PermissionsAndroid} from 'react-native'; -// components +import {isAndroid} from './utils'; +import * as geoUtils from './utils/geoUtils'; +// Components import MapView from './components/MapView'; import MapboxStyleSheet from './utils/MapboxStyleSheet'; import Light from './components/Light'; import PointAnnotation from './components/PointAnnotation'; import Callout from './components/Callout'; - -// sources +// Sources import VectorSource from './components/VectorSource'; import ShapeSource from './components/ShapeSource'; import RasterSource from './components/RasterSource'; import ImageSource from './components/ImageSource'; - -// layers +// Layers import FillLayer from './components/FillLayer'; import FillExtrusionLayer from './components/FillExtrusionLayer'; import LineLayer from './components/LineLayer'; @@ -23,12 +21,11 @@ import CircleLayer from './components/CircleLayer'; import SymbolLayer from './components/SymbolLayer'; import RasterLayer from './components/RasterLayer'; import BackgroundLayer from './components/BackgroundLayer'; - -// modules +// Modules import offlineManager from './modules/offline/offlineManager'; import snapshotManager from './modules/snapshot/snapshotManager'; -let MapboxGL = { ...NativeModules.MGLModule }; +const MapboxGL = {...NativeModules.MGLModule}; // static methods MapboxGL.requestAndroidLocationPermissions = async function() { @@ -43,7 +40,7 @@ MapboxGL.requestAndroidLocationPermissions = async function() { } const permissions = Object.keys(res); - for (let permission of permissions) { + for (const permission of permissions) { if (res[permission] === PermissionsAndroid.RESULTS.GRANTED) { return true; } diff --git a/javascript/modules/offline/OfflineCreatePackOptions.js b/javascript/modules/offline/OfflineCreatePackOptions.js index 5fb54e780..1f53675c9 100644 --- a/javascript/modules/offline/OfflineCreatePackOptions.js +++ b/javascript/modules/offline/OfflineCreatePackOptions.js @@ -1,5 +1,5 @@ -import { makeLatLngBounds } from '../../utils/geoUtils'; -import { toJSONString } from '../../utils'; +import {makeLatLngBounds} from '../../utils/geoUtils'; +import {toJSONString} from '../../utils'; class OfflineCreatePackOptions { constructor(options = {}) { diff --git a/javascript/modules/offline/OfflinePack.js b/javascript/modules/offline/OfflinePack.js index 02ffa5dcb..e9a8e5eec 100644 --- a/javascript/modules/offline/OfflinePack.js +++ b/javascript/modules/offline/OfflinePack.js @@ -1,4 +1,4 @@ -import { NativeModules } from 'react-native'; +import {NativeModules} from 'react-native'; const MapboxGLOfflineManager = NativeModules.MGLOfflineModule; @@ -9,7 +9,7 @@ class OfflinePack { } get name() { - const metadata = this.metadata; + const {metadata} = this; return metadata.name; } diff --git a/javascript/modules/offline/offlineManager.js b/javascript/modules/offline/offlineManager.js index 8d1bad6e7..abae93ffb 100644 --- a/javascript/modules/offline/offlineManager.js +++ b/javascript/modules/offline/offlineManager.js @@ -1,5 +1,6 @@ -import { NativeModules, NativeEventEmitter } from 'react-native'; -import { isUndefined, isFunction, isAndroid } from '../../utils'; +import {NativeModules, NativeEventEmitter} from 'react-native'; + +import {isUndefined, isFunction, isAndroid} from '../../utils'; import OfflineCreatePackOptions from './OfflineCreatePackOptions'; import OfflinePack from './OfflinePack'; @@ -100,7 +101,7 @@ class OfflineManager { async getPacks() { await this._initialize(); return Object.keys(this._offlinePacks).map( - (name) => this._offlinePacks[name], + name => this._offlinePacks[name], ); } @@ -233,7 +234,7 @@ class OfflineManager { try { const nativeOfflinePacks = await MapboxGLOfflineManager.getPacks(); - for (let nativeOfflinePack of nativeOfflinePacks) { + for (const nativeOfflinePack of nativeOfflinePacks) { const offlinePack = new OfflinePack(nativeOfflinePack); this._offlinePacks[offlinePack.name] = offlinePack; } @@ -248,7 +249,7 @@ class OfflineManager { } _onProgress(e) { - const { name, state } = e.payload; + const {name, state} = e.payload; if (!this._hasListeners(name, this._progressListeners)) { return; @@ -264,7 +265,7 @@ class OfflineManager { } _onError(e) { - const { name } = e.payload; + const {name} = e.payload; if (!this._hasListeners(name, this._errorListeners)) { return; diff --git a/javascript/modules/snapshot/SnapshotOptions.js b/javascript/modules/snapshot/SnapshotOptions.js index 022e8a76c..a97eb1ac7 100644 --- a/javascript/modules/snapshot/SnapshotOptions.js +++ b/javascript/modules/snapshot/SnapshotOptions.js @@ -1,6 +1,7 @@ -import { NativeModules } from 'react-native'; -import { toJSONString } from '../../utils'; -import { makePoint, makeFeatureCollection } from '../../utils/geoUtils'; +import {NativeModules} from 'react-native'; + +import {toJSONString} from '../../utils'; +import {makePoint, makeFeatureCollection} from '../../utils/geoUtils'; const MapboxGL = NativeModules.MGLModule; @@ -53,7 +54,7 @@ class SnapshotOptions { _createBoundsCollection(bounds) { const features = []; - for (let bound of bounds) { + for (const bound of bounds) { features.push(makePoint(bound)); } diff --git a/javascript/modules/snapshot/snapshotManager.js b/javascript/modules/snapshot/snapshotManager.js index f42a1f5c8..dc2c8c9ec 100644 --- a/javascript/modules/snapshot/snapshotManager.js +++ b/javascript/modules/snapshot/snapshotManager.js @@ -1,4 +1,5 @@ -import { NativeModules } from 'react-native'; +import {NativeModules} from 'react-native'; + import SnapshotOptions from './SnapshotOptions'; const MapboxGLSnapshotManger = NativeModules.MGLSnapshotModule; diff --git a/javascript/utils/BridgeValue.js b/javascript/utils/BridgeValue.js index 129fb6236..d109f66e0 100644 --- a/javascript/utils/BridgeValue.js +++ b/javascript/utils/BridgeValue.js @@ -1,4 +1,4 @@ -import { isBoolean, isNumber, isString } from './index'; +import {isBoolean, isNumber, isString} from './index'; const Types = { Array: 'array', @@ -16,28 +16,31 @@ export default class BridgeValue { get type() { if (Array.isArray(this.rawValue)) { return Types.Array; - } else if (isBoolean(this.rawValue)) { + } + if (isBoolean(this.rawValue)) { return Types.Bool; - } else if (isNumber(this.rawValue)) { + } + if (isNumber(this.rawValue)) { return Types.Number; - } else if (isString(this.rawValue)) { + } + if (isString(this.rawValue)) { return Types.String; - } else if (this.rawValue && typeof this.rawValue === 'object') { + } + if (this.rawValue && typeof this.rawValue === 'object') { return Types.HashMap; - } else { - throw new Error('[type] BridgeValue must be a primitive/array/object'); } + throw new Error('[type] BridgeValue must be a primitive/array/object'); } get value() { - const type = this.type; + const {type} = this; let value; if (type === Types.Array) { value = []; - for (let innerRawValue of this.rawValue) { + for (const innerRawValue of this.rawValue) { const bridgeValue = new BridgeValue(innerRawValue); value.push(bridgeValue.toJSON()); } @@ -45,7 +48,7 @@ export default class BridgeValue { value = []; const stringKeys = Object.keys(this.rawValue); - for (let stringKey of stringKeys) { + for (const stringKey of stringKeys) { value.push([ new BridgeValue(stringKey).toJSON(), new BridgeValue(this.rawValue[stringKey]).toJSON(), diff --git a/javascript/utils/MapboxStyleSheet.js b/javascript/utils/MapboxStyleSheet.js index aadb427cc..87e36147b 100644 --- a/javascript/utils/MapboxStyleSheet.js +++ b/javascript/utils/MapboxStyleSheet.js @@ -1,6 +1,8 @@ -import { isUndefined, isPrimitive, isString } from './index'; -import { processColor, NativeModules } from 'react-native'; +// @flow + +import {processColor, NativeModules} from 'react-native'; import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; + import styleMap, { StyleTypes, StyleFunctionTypes, @@ -8,6 +10,8 @@ import styleMap, { } from './styleMap'; import BridgeValue from './BridgeValue'; +import {isUndefined, isPrimitive, isString} from './index'; + const MapboxGL = NativeModules.MGLModule; class MapStyleItem { @@ -35,8 +39,8 @@ class MapStyleTransitionItem extends MapStyleItem { constructor(duration = 0, delay = 0, extras = {}) { super(StyleTypes.Transition, { value: { - duration: duration, - delay: delay, + duration, + delay, }, ...extras, }); @@ -63,15 +67,15 @@ class MapStyleConstantItem extends MapStyleItem { class MapStyleColorItem extends MapStyleItem { constructor(value, extras = {}) { - super(StyleTypes.Color, { value: value, ...extras }); + super(StyleTypes.Color, {value, ...extras}); } } class MapStyleFunctionItem extends MapStyleItem { constructor(fn, mode = MapboxGL.InterpolationMode.Exponential, payload) { super(StyleTypes.Function, { - fn: fn, - mode: mode, + fn, + mode, stops: [], attributeName: payload.attributeName, }); @@ -80,10 +84,10 @@ class MapStyleFunctionItem extends MapStyleItem { } processStops(prop) { - let stops = []; + const stops = []; const isComposite = this.payload.fn === StyleFunctionTypes.Composite; - for (let rawStop of this._rawStops) { + for (const rawStop of this._rawStops) { const [stopKey, stopValue] = rawStop; if (isComposite) { @@ -92,7 +96,7 @@ class MapStyleFunctionItem extends MapStyleItem { makeStyleValue( prop, stopValue[1], - { propertyValue: stopValue[0] }, + {propertyValue: stopValue[0]}, false, ), ]); @@ -105,8 +109,8 @@ class MapStyleFunctionItem extends MapStyleItem { } } -let STYLE_MAP = {}; -Object.keys(MapboxGL).forEach((key) => { +const STYLE_MAP = {}; +Object.keys(MapboxGL).forEach(key => { if ( !['setAccessToken', 'getAccessToken', 'setTelemetryEnabled'].includes(key) ) { @@ -128,7 +132,7 @@ function resolveStyleValue(styleProp, styleValue) { // find enum value that matches const enumKeys = Object.keys(valueMap); - for (let enumKey of enumKeys) { + for (const enumKey of enumKeys) { if (enumKey.toLowerCase() === styleValue.toLowerCase()) { return valueMap[enumKey]; } @@ -159,6 +163,7 @@ function makeStyleValue(prop, value, extras = {}, shouldMarkAsStyle = true) { // search for any extras const extraData = Object.assign({}, styleExtras[prop], extras); + // eslint-disable-next-line no-use-before-define if (MapboxStyleSheet.isFunctionStyleItem(value)) { item = value; item.processStops(prop); @@ -188,9 +193,9 @@ function makeStyleValue(prop, value, extras = {}, shouldMarkAsStyle = true) { class MapboxStyleSheet { static create(userStyles, depth = 0) { const styleProps = Object.keys(userStyles); - let style = {}; + const style = {}; - for (let styleProp of styleProps) { + for (const styleProp of styleProps) { const userStyle = userStyles[styleProp]; if (MapboxStyleSheet.isStyleItem(userStyle)) { @@ -219,7 +224,7 @@ class MapboxStyleSheet { const stopNativeArray = []; const cameraZoomLevels = Object.keys(stops); - for (let cameraZoomLevel of cameraZoomLevels) { + for (const cameraZoomLevel of cameraZoomLevels) { const keyBridgeValue = new BridgeValue(cameraZoomLevel | 0); stopNativeArray.push([keyBridgeValue.toJSON(), stops[cameraZoomLevel]]); @@ -234,14 +239,14 @@ class MapboxStyleSheet { const stopNativeArray = []; if (Array.isArray(stops)) { - for (let stop of stops) { + for (const stop of stops) { const keyBridgeValue = new BridgeValue(stop[0]); stopNativeArray.push([keyBridgeValue.toJSON(), stop[1]]); } } else if (stops) { const stopKeys = Object.keys(stops); - for (let stopKey of stopKeys) { + for (const stopKey of stopKeys) { const keyBridgeValue = new BridgeValue(stopKey); stopNativeArray.push([keyBridgeValue.toJSON(), stops[stopKey]]); @@ -250,7 +255,7 @@ class MapboxStyleSheet { return new MapStyleFunctionItem(StyleFunctionTypes.Source, (mode: mode), { stops: stopNativeArray, - attributeName: attributeName, + attributeName, }); } @@ -258,7 +263,7 @@ class MapboxStyleSheet { const stopNativeArray = []; if (Array.isArray(stops)) { - for (let zoomPropertyStop of stops) { + for (const zoomPropertyStop of stops) { const propValue = zoomPropertyStop[0].value; const styleValue = zoomPropertyStop[1]; @@ -270,7 +275,7 @@ class MapboxStyleSheet { } else { const cameraZoomLevels = Object.keys(stops); - for (let cameraZoomLevel of cameraZoomLevels) { + for (const cameraZoomLevel of cameraZoomLevels) { const [propName, styleValue] = stops[cameraZoomLevel]; const keyBridgeValue = new BridgeValue(cameraZoomLevel | 0); @@ -281,7 +286,7 @@ class MapboxStyleSheet { return new MapStyleFunctionItem( StyleFunctionTypes.Composite, (mode: mode), - { stops: stopNativeArray, attributeName: attributeName }, + {stops: stopNativeArray, attributeName}, ); } diff --git a/javascript/utils/filterUtils.js b/javascript/utils/filterUtils.js index 25778b366..e47716d0e 100644 --- a/javascript/utils/filterUtils.js +++ b/javascript/utils/filterUtils.js @@ -1,7 +1,7 @@ import BridgeValue from './BridgeValue'; export function getFilter(filter) { - if (!Array.isArray(filter) || filter.length == 0) { + if (!Array.isArray(filter) || filter.length === 0) { return []; } @@ -16,8 +16,8 @@ export function getFilter(filter) { } } - let filterItems = []; - for (let item of flattenedFilter) { + const filterItems = []; + for (const item of flattenedFilter) { const filterItem = new BridgeValue(item); filterItems.push(filterItem.toJSON()); } diff --git a/javascript/utils/geoUtils.js b/javascript/utils/geoUtils.js index 55177082a..da9ca75d5 100644 --- a/javascript/utils/geoUtils.js +++ b/javascript/utils/geoUtils.js @@ -20,7 +20,7 @@ export function makeFeatureCollection(features = []) { } export function addToFeatureCollection(featureCollection, feature) { - let shallowFeatureCollection = Object.assign({}, featureCollection); + const shallowFeatureCollection = Object.assign({}, featureCollection); shallowFeatureCollection.features.push(feature); return featureCollection; } diff --git a/javascript/utils/index.js b/javascript/utils/index.js index b4720bca7..7f1bdeae5 100644 --- a/javascript/utils/index.js +++ b/javascript/utils/index.js @@ -1,5 +1,4 @@ import React from 'react'; - import { ViewPropTypes, View, @@ -7,7 +6,6 @@ import { findNodeHandle, Platform, } from 'react-native'; - import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; export const viewPropTypes = ViewPropTypes || View.props; @@ -47,7 +45,7 @@ export function runNativeCommand(module, name, nativeRef, args = []) { } const managerInstance = isAndroid() - ? NativeModules.UIManager[module] + ? NativeModules.UIManager.getViewManagerConfig(module) : NativeModules[getIOSModuleName(module)]; if (!managerInstance) { throw new Error(`Could not find ${module}`); @@ -65,16 +63,16 @@ export function runNativeCommand(module, name, nativeRef, args = []) { } export function cloneReactChildrenWithProps(children, propsToAdd = {}) { - if (!children) { - return null; - } + if (!children) return null; + + let foundChildren = null; if (!Array.isArray(children)) { - children = [children]; + foundChildren = [children]; } - const filteredChildren = children.filter((child) => !!child); // filter out falsy children, since some can be null - return React.Children.map(filteredChildren, (child) => + const filteredChildren = foundChildren.filter(child => !!child); // filter out falsy children, since some can be null + return React.Children.map(filteredChildren, child => React.cloneElement(child, propsToAdd), ); } diff --git a/javascript/utils/styleMap.js b/javascript/utils/styleMap.js index 027bbb84c..fc6f6fef4 100644 --- a/javascript/utils/styleMap.js +++ b/javascript/utils/styleMap.js @@ -1555,6 +1555,11 @@ const styleMap = { }; export const styleExtras = { + // padding + iconTextFitPadding: { + iosType: 'edgeinsets', + }, + // offsets iconOffset: { iosType: 'vector', @@ -1565,7 +1570,6 @@ export const styleExtras = { lineOffset: { iosType: 'vector', }, - // translates fillTranslate: { iosType: 'vector', diff --git a/package.json b/package.json index b375e3181..ec20d00cd 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@mapbox/react-native-mapbox-gl", "description": "A Mapbox GL react native module for creating custom maps", - "version": "6.1.3", + "version": "6.1.4", "author": "Bobby Sudekum", "main": "./javascript/index.js", "keywords": [ @@ -36,34 +36,47 @@ }, "peerDependencies": { "prop-types": ">=15.5.8", - "react": "^16.0.0-alpha || ^16.0.0-beta || ^16.0.0", - "react-native": ">=0.47.1" + "react": "^16.6.1", + "react-native": ">=0.57.6" }, "dependencies": { "@turf/helpers": "4.6.0", + "underscore": "^1.8.3" }, "devDependencies": { - "babel-eslint": "6.1.2", - "babel-jest": "21.0.2", - "babel-preset-react-native": "3.0.2", + "eslint-config-airbnb-base": "^13.1.0", + "eslint-config-prettier": "^4.1.0", + "eslint-plugin-flowtype": "^3.4.2", + "eslint-plugin-fp": "^2.3.0", + "eslint-plugin-react-native": "^3.6.0", + "@babel/core": "7.0.0", + "@babel/plugin-proposal-class-properties": "7.0.0", + "@babel/plugin-transform-exponentiation-operator": "7.0.0", + "@babel/plugin-transform-flow-strip-types": "7.0.0", + "@babel/plugin-transform-runtime": "7.0.0", + "@babel/runtime": "7.0.0", + "babel-core": "7.0.0-bridge.0", + "babel-eslint": "^8.0.1", + "babel-jest": "23.4.2", "ejs": "^2.5.7", "ejs-lint": "^0.3.0", - "eslint": "^3.19.0", + "eslint": "^5.3.0", "eslint-config-strict-react": "8.0.1", - "eslint-plugin-import": "2.7.0", + "eslint-plugin-import": "2.14.0", "eslint-plugin-prettier": "^2.6.0", "eslint-plugin-react": "5.2.2", "husky": "^0.14.3", "jest": "21.0.2", "jest-cli": "^21.2.1", "lint-staged": "^7.0.0", + "metro-react-native-babel-preset": "0.49.1", "node-dir": "0.1.17", "prettier": "^1.11.1", - "react": "16.0.0-alpha.12", + "react": "16.6.1", "react-docgen": "2.18.0", - "react-native": "0.48.4", - "react-test-renderer": "16.0.0-alpha.12" + "react-native": "0.57.5", + "react-test-renderer": "16.6.1" }, "jest": { "preset": "react-native",