@maplibre/maplibre-react-native 8.6.0-beta.0

package/scripts/templates/component.md.ejs

@@ -0,0 +1,122 @@
+<%
+  const component = locals.component;
+-%>
+<!-- This file was autogenerated from <%- component.name %>.js do not modify -->
+## <MapboxGL.<%- component.name %> />
+### <%- replaceNewLine(component.description) %>
+
+<%_ if (component.props && component.props.length) { _%>
+### props
+| Prop | Type | Default | Required | Description |
+| ---- | :--: | :-----: | :------: | :----------: |
+<%- propMarkdownTableRows(component) %>
+<%_ } _%>
+
+<%_ if (component.methods && component.methods.length) { _%>
+### methods
+<%_ for (let method of component.methods) { _%>
+#### <%- getMarkdownMethodSignature(method) %>
+
+<%- replaceNewLine(method.description) %>
+
+##### arguments
+| Name | Type | Required | Description  |
+| ---- | :--: | :------: | :----------: |
+<%- methodMarkdownTableRow(method) %>
+
+<%- getMarkdownMethodExamples(method) %>
+<%_ } _%>
+<%_ } _%>
+
+<%_ if (component.styles && component.styles.length) { _%>
+### styles
+
+<%_ for (let i = 0; i < component.styles.length; i++) { _%>
+<%
+const style = component.styles[i];
+-%>
+* <a href="#name<%- i > 0 ? '-' + i : '' -%>"><%- style.name %></a><br/>
+<%_ } _%>
+
+<%_ for (let style of component.styles) { _%>
+___
+
+#### Name
+`<%- style.name %>`
+
+#### Description
+<%- style.description %>
+
+#### Type
+`<%- style.type %>`
+<%_ if (exists(style.default)) { _%>
+#### Default Value
+`<%= getStyleDefaultValue(style) %>`
+<%_ } _%>
+
+<%_ if (style.type === 'enum') { _%>
+#### Supported Values
+<%_ for (var i = 0; i < style.values.length; i++) { _%>
+**<%- style.values[i].value %>** - <%- style.values[i].doc %><br />
+<%_ } _%>
+
+<%_ } _%>
+<%_ if (exists(style.units)) { _%>
+#### Units
+`<%- style.units %>`
+
+<%_ } _%>
+<%_ if (exists(style.minimum)) { _%>
+#### Minimum
+`<%- style.minimum %>`
+
+<%_ } _%>
+
+<%_ if (exists(style.maximum)) { _%>
+#### Maximum
+`<%- style.maximum %>`
+
+<%_ } _%>
+<%_ if (style.requires.length) { _%>
+#### Requires
+`<%- style.requires.join(', ') %>`
+
+<%_ } _%>
+<%_ if (style.disabledBy.length) { _%>
+#### Disabled By
+`<%- style.disabledBy.join(', ') %>`
+
+<%_ } _%>
+<%_ if (style.allowedFunctionTypes.length) { _%>
+#### Supported Style Functions
+`<%- style.allowedFunctionTypes.join(', ') %>`
+<%_ } _%>
+<%_ if (style.expression) { _%>
+#### Expression
+
+Parameters: `<%- (style.expression.parameters || []).join(', ') %>`
+<%_ } _%>
+<%_ if (style.transition) { _%>
+___
+
+#### Name
+
+`<%- style.name %>Transition`
+
+#### Description
+
+The transition affecting any changes to this layer’s <%- style.name %> propery.
+
+#### Type
+
+`{ duration, delay }`
+
+#### Units
+`milliseconds`
+
+#### Default Value
+`{duration: 300, delay: 0}`
+
+<%_ } %>
+<%_ } _%>
+<%_ } _%>

package/scripts/templates/index.d.ts.ejs

@@ -0,0 +1,56 @@
+<%
+  const layers = locals.layers;
+-%>
+/* eslint-disable */
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+export interface ConstantProps {
+  styletype: string
+  payload: {
+    value: any,
+  },
+};
+
+export interface StyleFunctionProps {
+  styletype: string
+  payload: {
+    fn: string,
+    attributeName: string,
+    stops: any[],
+    mode: any,
+  }
+}
+
+export interface TransitionProps {
+  duration: number
+  delay: number,
+}
+
+export type TranslationProps = { x: number, y: number } | number[]
+
+<%_ for (let layer of layers) { _%>
+export interface <%- camelCase(layer.name) _%>LayerStyleProps {
+  <%_ for (let prop of layer.properties) { %>
+  /**
+   * <%- prop.doc.description %>
+  <%_ if (prop.doc.requires.length) { _%>
+   *
+   * @requires <%- prop.doc.requires.join(', ') %>
+  <%_ } _%>
+  <%_ if (prop.doc.disabledBy.length) { _%>
+   *
+   * @disabledBy <%- prop.doc.disabledBy.join(', ') %>
+  <%_ } _%>
+   */
+  <%= prop.name %>: <%- dtsInterfaceType(prop) %>
+  <%_ if (prop.transition) { %>
+  /**
+   * The transition affecting any changes to this layer’s <%= prop.name %> property.
+   */
+  <%= prop.name %>Transition: TransitionProps,
+  <%_ } _%>
+  <%_ } _%>
+};
+
+<%_ } _%>

package/scripts/templates/styleMap.js.ejs

@@ -0,0 +1,115 @@
+<%
+  const layers = locals.layers;
+-%>
+/* eslint-disable */
+// DO NOT MODIFY
+// THIS FILE IS AUTOGENERATED
+
+import PropTypes from 'prop-types';
+import { IS_ANDROID } from './index';
+
+export const StyleTypes = {
+  Constant: 'constant',
+  Color: 'color',
+  Transition: 'transition',
+  Translation: 'translation',
+  Function: 'function',
+  Image: 'image',
+  Enum: 'enum',
+};
+
+export function getStyleType(styleProp) {
+  if (!IS_ANDROID && styleExtras[styleProp]) {
+    return styleExtras[styleProp].iosType;
+  }
+
+  if (styleMap[styleProp]) {
+    return styleMap[styleProp];
+  }
+
+  throw new Error(`${styleProp} is not a valid Mapbox layer style`);
+}
+
+<%_ for (let layer of layers) { _%>
+export const <%- pascelCase(layer.name) _%>LayerStyleProp = PropTypes.shape({
+  <%_ for (let prop of layer.properties) { %>
+  /**
+   * <%- prop.doc.description %>
+  <%_ if (prop.doc.requires.length) { _%>
+   *
+   * @requires <%- prop.doc.requires.join(', ') %>
+  <%_ } _%>
+  <%_ if (prop.doc.disabledBy.length) { _%>
+   *
+   * @disabledBy <%- prop.doc.disabledBy.join(', ') %>
+  <%_ } _%>
+   */
+  <%= prop.name %>: <%- jsDocReactProp(prop) %>,
+  <%_ if (prop.transition) { %>
+  /**
+   * The transition affecting any changes to this layer’s <%= prop.name %> property.
+   */
+  <%= prop.name %>Transition: PropTypes.shape({
+    duration: PropTypes.number,
+    delay: PropTypes.number,
+  }),
+  <%_ } _%>
+  <%_ } _%>
+});
+
+<%_ } _%>
+
+const styleMap = {
+  <%_ for (let layer of layers) { _%>
+  <%_ for (let prop of layer.properties) { _%>
+  <%_ if (prop.name !== 'visibility') { _%>
+  <%= prop.name %>: <%- jsStyleType(prop) %>,
+  <%_ if (prop.transition) { _%>
+  <%= prop.name %>Transition: StyleTypes.Transition,
+  <%_ } _%>
+  <%_ } _%>
+  <%_ } _%>
+
+  <%_ } _%>
+  visibility: StyleTypes.Constant,
+};
+
+export const styleExtras = {
+  // padding
+  iconTextFitPadding: {
+    iosType: 'edgeinsets',
+  },
+
+  // offsets
+  iconOffset: {
+    iosType: 'vector',
+  },
+  textOffset: {
+    iosType: 'vector',
+  },
+  lineOffset: {
+    iosType: 'vector',
+  },
+
+  // translates
+  fillTranslate: {
+    iosType: 'vector',
+  },
+  lineTranslate: {
+    iosType: 'vector',
+  },
+  iconTranslate: {
+    iosType: 'vector',
+  },
+  textTranslate: {
+    iosType: 'vector',
+  },
+  circleTranslate: {
+    iosType: 'vector',
+  },
+  fillExtrusionTranslate: {
+    iosType: 'vector',
+  },
+};
+
+export default styleMap;

package/setup-jest.js

@@ -0,0 +1,121 @@
+import {NativeModules} from 'react-native';
+
+function keyMirror(keys) {
+  const obj = {};
+  keys.forEach(key => (obj[key] = key));
+  return obj;
+}
+
+// Mock of what the native code puts on the JS object
+NativeModules.MGLModule = {
+  // constants
+  UserTrackingModes: keyMirror([
+    'None',
+    'Follow',
+    'FollowWithCourse',
+    'FollowWithHeading',
+  ]),
+  StyleURL: keyMirror([
+    'Street',
+    'Dark',
+    'Light',
+    'Outdoors',
+    'Satellite',
+    'SatelliteStreet',
+    'TrafficDay',
+    'TrafficNight',
+  ]),
+  EventTypes: keyMirror([
+    'MapClick',
+    'MapLongClick',
+    'RegionWillChange',
+    'RegionIsChanging',
+    'RegionDidChange',
+    'WillStartLoadingMap',
+    'DidFinishLoadingMap',
+    'DidFailLoadingMap',
+    'WillStartRenderingFrame',
+    'DidFinishRenderingFrame',
+    'DidFinishRenderingFrameFully',
+    'DidFinishLoadingStyle',
+    'SetCameraComplete',
+  ]),
+  CameraModes: keyMirror(['Flight', 'Ease', 'None']),
+  StyleSource: keyMirror(['DefaultSourceID']),
+  InterpolationMode: keyMirror([
+    'Exponential',
+    'Categorical',
+    'Interval',
+    'Identity',
+  ]),
+  LineJoin: keyMirror(['Bevel', 'Round', 'Miter']),
+  LineCap: keyMirror(['Butt', 'Round', 'Square']),
+  LineTranslateAnchor: keyMirror(['Map', 'Viewport']),
+  CirclePitchScale: keyMirror(['Map', 'Viewport']),
+  CircleTranslateAnchor: keyMirror(['Map', 'Viewport']),
+  FillExtrusionTranslateAnchor: keyMirror(['Map', 'Viewport']),
+  FillTranslateAnchor: keyMirror(['Map', 'Viewport']),
+  IconRotationAlignment: keyMirror(['Auto', 'Map', 'Viewport']),
+  IconTextFit: keyMirror(['None', 'Width', 'Height', 'Both']),
+  IconTranslateAnchor: keyMirror(['Map', 'Viewport']),
+  SymbolPlacement: keyMirror(['Line', 'Point']),
+  TextAnchor: keyMirror([
+    'Center',
+    'Left',
+    'Right',
+    'Top',
+    'Bottom',
+    'TopLeft',
+    'TopRight',
+    'BottomLeft',
+    'BottomRight',
+  ]),
+  TextJustify: keyMirror(['Center', 'Left', 'Right']),
+  TextPitchAlignment: keyMirror(['Auto', 'Map', 'Viewport']),
+  TextRotationAlignment: keyMirror(['Auto', 'Map', 'Viewport']),
+  TextTransform: keyMirror(['None', 'Lowercase', 'Uppercase']),
+  TextTranslateAnchor: keyMirror(['Map', 'Viewport']),
+  LightAnchor: keyMirror(['Map', 'Viewport']),
+  OfflinePackDownloadState: keyMirror(['Inactive', 'Active', 'Complete']),
+  OfflineCallbackName: keyMirror(['Progress', 'Error']),
+
+  // methods
+  setAccessToken: jest.fn(),
+  getAccessToken: () => Promise.resolve('test-token'),
+  setConnected: jest.fn(),
+};
+
+NativeModules.MGLOfflineModule = {
+  createPack: packOptions => {
+    return Promise.resolve({
+      bounds: packOptions.bounds,
+      metadata: JSON.stringify({name: packOptions.name}),
+    });
+  },
+  getPacks: () => Promise.resolve([]),
+  deletePack: () => Promise.resolve(),
+  getPackStatus: () => Promise.resolve({}),
+  pausePackDownload: () => Promise.resolve(),
+  resumePackDownload: () => Promise.resolve(),
+  setPackObserver: () => Promise.resolve(),
+  setTileCountLimit: jest.fn(),
+  setProgressEventThrottle: jest.fn(),
+};
+
+NativeModules.MGLSnapshotModule = {
+  takeSnap: () => {
+    return Promise.resolve('file://test.png');
+  },
+};
+
+NativeModules.MGLLocationModule = {
+  getLastKnownLocation: jest.fn(),
+  start: jest.fn(),
+  pause: jest.fn(),
+};
+
+// Mock for global AbortController
+global.AbortController = class {
+  signal = 'test-signal';
+  abort = jest.fn();
+};