@draftbit/core 42.4.2-50ce38.2 → 42.4.2-717ab1.2

package/lib/typescript/src/components/MapView/MapView.native.d.ts

@@ -1,130 +0,0 @@
-import * as React from "react";
-import { MapViewProps } from "./types";
-declare const MapView: React.FC<MapViewProps>;
-export default MapView;
-export declare const SEED_DATA: {
-    name: string;
-    tag: string;
-    description: string;
-    category: string;
-    layout: {};
-    props: {
-        apiKey: any;
-        provider: any;
-        latitudeDelta: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            group: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-            step: number;
-        };
-        longitudeDelta: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            group: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-            step: number;
-        };
-        latitude: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            group: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-            step: number;
-        };
-        longitude: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            group: string;
-            defaultValue: null;
-            editable: boolean;
-            required: boolean;
-            step: number;
-        };
-        mapType: any;
-        zoomEnabled: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        showsCompass: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        rotateEnabled: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        scrollEnabled: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        loadingEnabled: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        loadingIndicatorColor: {
-            group: string;
-            label: string;
-            description: string;
-            editable: boolean;
-            required: boolean;
-            defaultValue: null;
-            formType: string;
-            propType: string;
-        };
-        loadingBackgroundColor: {
-            group: string;
-            label: string;
-            description: string;
-            editable: boolean;
-            required: boolean;
-            defaultValue: null;
-            formType: string;
-            propType: string;
-        };
-    };
-};

package/lib/typescript/src/components/MapView/MapView.web.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { MapViewProps } from "./types";
-declare const MapView: React.FC<MapViewProps>;
-export default MapView;

package/lib/typescript/src/components/MapView/NoApiKey.d.ts

@@ -1,2 +0,0 @@
-declare const NoApiKey: () => JSX.Element;
-export default NoApiKey;

package/lib/typescript/src/components/MapView/index.d.ts

@@ -1,3 +0,0 @@
-export { default as MapView } from "./MapView";
-export { default as MapMarker } from "./MapMarker";
-export { default as MapCallout } from "./MapCallout";

package/lib/typescript/src/components/MapView/types.d.ts

@@ -1,35 +0,0 @@
-import { StyleProp, ViewStyle } from "react-native";
-import { MapTypes } from "react-native-maps";
-export interface MapMarkerProps {
-    latitude: number;
-    longitude: number;
-    title?: string;
-    description?: string;
-    pinColor?: string;
-    flat?: boolean;
-    style?: StyleProp<ViewStyle>;
-}
-export interface MapViewProps {
-    apiKey: string;
-    provider?: "google" | null;
-    latitudeDelta?: number;
-    longitudeDelta?: number;
-    latitude?: number;
-    longitude?: number;
-    mapType?: MapTypes;
-    zoomEnabled?: boolean;
-    showsCompass?: boolean;
-    rotateEnabled?: boolean;
-    scrollEnabled?: boolean;
-    loadingEnabled?: boolean;
-    loadingBackgroundColor?: string;
-    loadingIndicatorColor?: string;
-    style?: StyleProp<ViewStyle>;
-}
-export interface CalloutProps {
-    title?: string;
-    description?: string;
-    anchor: any;
-    onPress?: (event: any) => void;
-    showTooltip?: boolean;
-}

package/src/components/MapView/MapCallout.native.js

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { Callout } from "react-native-maps";
-import { COMPONENT_TYPES, createActionProp, createBoolProp, } from "@draftbit/types";
-const MapCallout = ({ onPress, showTooltip, children, }) => (React.createElement(Callout, { tooltip: !showTooltip, onPress: onPress }, children));
-export default MapCallout;
-export const SEED_DATA = {
-    name: "Callout",
-    tag: "MapCallout",
-    description: "An info window to display on top of a marker when it is clicked",
-    category: COMPONENT_TYPES.container,
-    layout: {},
-    props: {
-        onPress: createActionProp({
-            description: "Action to execute when the callout is pressed",
-        }),
-        showTooltip: createBoolProp({
-            label: "Show Tooltip",
-            description: 'If false, a default "tooltip" bubble window will be drawn around this callout\'s children. If true, the child views can fully customize their appearance, including any "bubble"-like styles',
-            defaultValue: false,
-        }),
-    },
-};

package/src/components/MapView/MapCallout.native.tsx

@@ -1,40 +0,0 @@
-import * as React from "react";
-import { Callout } from "react-native-maps";
-import { CalloutProps } from "./types";
-import {
-  COMPONENT_TYPES,
-  createActionProp,
-  createBoolProp,
-} from "@draftbit/types";
-
-const MapCallout: React.FC<CalloutProps> = ({
-  onPress,
-  showTooltip,
-  children,
-}) => (
-  <Callout tooltip={!showTooltip} onPress={onPress}>
-    {children}
-  </Callout>
-);
-
-export default MapCallout;
-
-export const SEED_DATA = {
-  name: "Callout",
-  tag: "MapCallout",
-  description:
-    "An info window to display on top of a marker when it is clicked",
-  category: COMPONENT_TYPES.container,
-  layout: {},
-  props: {
-    onPress: createActionProp({
-      description: "Action to execute when the callout is pressed",
-    }),
-    showTooltip: createBoolProp({
-      label: "Show Tooltip",
-      description:
-        'If false, a default "tooltip" bubble window will be drawn around this callout\'s children. If true, the child views can fully customize their appearance, including any "bubble"-like styles',
-      defaultValue: false,
-    }),
-  },
-};

package/src/components/MapView/MapCallout.web.js

@@ -1,14 +0,0 @@
-import * as React from "react";
-import { TouchableOpacity } from "react-native";
-import { InfoWindow } from "@react-google-maps/api";
-import { markerContext } from "./MapMarker.web";
-const MapCallout = ({ anchor, onPress = () => { }, children, }) => {
-    const { toggleCallout, position, calloutOpened } = React.useContext(markerContext);
-    const handleClose = () => toggleCallout(false);
-    return calloutOpened ? (React.createElement(TouchableOpacity, { onPress: onPress },
-        React.createElement(InfoWindow, { anchor: anchor, position: {
-                lat: position?.latitude || 0,
-                lng: position?.longitude || 0,
-            }, onCloseClick: handleClose }, children))) : null;
-};
-export default MapCallout;

package/src/components/MapView/MapCallout.web.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-import { TouchableOpacity } from "react-native";
-import { InfoWindow } from "@react-google-maps/api";
-import { markerContext } from "./MapMarker.web";
-import { CalloutProps } from "./types";
-
-const MapCallout: React.FC<CalloutProps> = ({
-  anchor,
-  onPress = () => {},
-  children,
-}) => {
-  const { toggleCallout, position, calloutOpened } =
-    React.useContext(markerContext);
-  const handleClose = () => toggleCallout(false);
-  return calloutOpened ? (
-    <TouchableOpacity onPress={onPress}>
-      <InfoWindow
-        anchor={anchor}
-        position={{
-          lat: position?.latitude || 0,
-          lng: position?.longitude || 0,
-        }}
-        onCloseClick={handleClose}
-      >
-        {children}
-      </InfoWindow>
-    </TouchableOpacity>
-  ) : null;
-};
-
-export default MapCallout;

package/src/components/MapView/MapMarker.native.js

@@ -1,52 +0,0 @@
-import * as React from "react";
-import { Marker } from "react-native-maps";
-import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, } from "@draftbit/types";
-const MapMarker = ({ latitude, longitude, title, description, pinColor, flat, style, children, }) => (React.createElement(Marker, { coordinate: {
-        latitude,
-        longitude,
-    }, title: title, description: description, flat: flat, pinColor: pinColor, style: style }, children));
-export default MapMarker;
-export const SEED_DATA = {
-    name: "Map Marker",
-    tag: "MapMarker",
-    description: "A marker to show inside map view",
-    category: COMPONENT_TYPES.button,
-    layout: {},
-    props: {
-        latitude: createNumberProp({
-            label: "Latitude",
-            description: "The longitude in which the marker is located",
-            required: true,
-            precision: 0.000001,
-            min: -90,
-            max: 90,
-        }),
-        longitude: createNumberProp({
-            label: "Latitude",
-            description: "The latitude in which the marker is located",
-            required: true,
-            precision: 0.000001,
-            min: -180,
-            max: 180,
-        }),
-        title: createTextProp({
-            label: "Title",
-            description: "Title to show along with the marker",
-            defaultValue: null,
-        }),
-        description: createTextProp({
-            label: "Description",
-            description: "Optional description for the marker",
-            defaultValue: null,
-        }),
-        flat: createBoolProp({
-            label: "Flat",
-            description: "Sets whether this marker should be flat against the map (if true) or a billboard facing the camera (if false)",
-            defaultValue: false,
-        }),
-        pinColor: createColorProp({
-            label: "Pin Color",
-            description: "Sets the color of the marker",
-        }),
-    },
-};

package/src/components/MapView/MapMarker.native.tsx

@@ -1,83 +0,0 @@
-import * as React from "react";
-import { Marker } from "react-native-maps";
-import { MapMarkerProps } from "./types";
-import {
-  COMPONENT_TYPES,
-  createBoolProp,
-  createColorProp,
-  createNumberProp,
-  createTextProp,
-} from "@draftbit/types";
-
-const MapMarker: React.FC<MapMarkerProps> = ({
-  latitude,
-  longitude,
-  title,
-  description,
-  pinColor,
-  flat,
-  style,
-  children,
-}) => (
-  <Marker
-    coordinate={{
-      latitude,
-      longitude,
-    }}
-    title={title}
-    description={description}
-    flat={flat}
-    pinColor={pinColor}
-    style={style}
-  >
-    {children}
-  </Marker>
-);
-
-export default MapMarker;
-
-export const SEED_DATA = {
-  name: "Map Marker",
-  tag: "MapMarker",
-  description: "A marker to show inside map view",
-  category: COMPONENT_TYPES.button,
-  layout: {},
-  props: {
-    latitude: createNumberProp({
-      label: "Latitude",
-      description: "The longitude in which the marker is located",
-      required: true,
-      precision: 0.000001,
-      min: -90,
-      max: 90,
-    }),
-    longitude: createNumberProp({
-      label: "Latitude",
-      description: "The latitude in which the marker is located",
-      required: true,
-      precision: 0.000001,
-      min: -180,
-      max: 180,
-    }),
-    title: createTextProp({
-      label: "Title",
-      description: "Title to show along with the marker",
-      defaultValue: null,
-    }),
-    description: createTextProp({
-      label: "Description",
-      description: "Optional description for the marker",
-      defaultValue: null,
-    }),
-    flat: createBoolProp({
-      label: "Flat",
-      description:
-        "Sets whether this marker should be flat against the map (if true) or a billboard facing the camera (if false)",
-      defaultValue: false,
-    }),
-    pinColor: createColorProp({
-      label: "Pin Color",
-      description: "Sets the color of the marker",
-    }),
-  },
-};

package/src/components/MapView/MapMarker.web.js

@@ -1,68 +0,0 @@
-import * as React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { Marker as WebMarker } from "@react-google-maps/api";
-import MapCallout from "./MapCallout.web";
-export const markerContext = React.createContext({
-    pinColor: "#E74C3C",
-    calloutOpened: false,
-    position: undefined,
-    toggleCallout: () => { },
-});
-const MapMarker = ({ pinColor, latitude, longitude, title, description, children, }) => {
-    const { Provider } = markerContext;
-    const [calloutOpened, toggleCallout] = React.useState(false);
-    const [marker, setMarker] = React.useState(null);
-    const handleMarkerClick = () => toggleCallout(true);
-    const handleOnLoad = (m) => setMarker(m);
-    let mappedChildren;
-    if (!children) {
-        if (title || description) {
-            mappedChildren = (React.createElement(MapCallout, { showTooltip: true, anchor: marker },
-                React.createElement(View, { style: style.tooltip },
-                    title && React.createElement(Text, { style: style.title }, title),
-                    description && (React.createElement(Text, { style: style.description }, description)))));
-        }
-    }
-    else {
-        mappedChildren = React.Children.map(children, (child, index) => {
-            return React.cloneElement(child, {
-                index,
-                anchor: marker,
-            });
-        });
-    }
-    return (React.createElement(Provider, { value: {
-            pinColor: pinColor,
-            calloutOpened,
-            toggleCallout: (value) => toggleCallout(value),
-            position: {
-                latitude,
-                longitude,
-            },
-        } },
-        React.createElement(WebMarker, { position: {
-                lat: latitude,
-                lng: longitude,
-            }, onClick: handleMarkerClick, onLoad: handleOnLoad, icon: {
-                path: "m12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z",
-                fillColor: pinColor,
-                fillOpacity: 1,
-                strokeWeight: 0,
-                rotation: 0,
-                scale: 2,
-            } }, mappedChildren)));
-};
-const style = StyleSheet.create({
-    tooltip: {
-        display: "flex",
-        flexDirection: "column",
-    },
-    title: {
-        fontWeight: "600",
-        textAlign: "center",
-    },
-    description: {
-        textAlign: "center",
-    },
-});
-export default MapMarker;

package/src/components/MapView/MapMarker.web.tsx

@@ -1,105 +0,0 @@
-import * as React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { LatLng, MarkerProps } from "react-native-maps";
-import { MapMarkerProps } from "./types";
-import { Marker as WebMarker } from "@react-google-maps/api";
-import MapCallout from "./MapCallout.web";
-
-interface IMarkerContext {
-  pinColor?: string | undefined;
-  calloutOpened: boolean;
-  position: LatLng | undefined;
-  toggleCallout: (value: boolean) => void;
-}
-
-export const markerContext = React.createContext<IMarkerContext>({
-  pinColor: "#E74C3C",
-  calloutOpened: false,
-  position: undefined,
-  toggleCallout: () => {},
-});
-
-const MapMarker: React.FC<MapMarkerProps> = ({
-  pinColor,
-  latitude,
-  longitude,
-  title,
-  description,
-  children,
-}) => {
-  const { Provider } = markerContext;
-  const [calloutOpened, toggleCallout] = React.useState(false);
-  const [marker, setMarker] = React.useState<MarkerProps | null>(null);
-  const handleMarkerClick = () => toggleCallout(true);
-  const handleOnLoad = (m: any) => setMarker(m);
-  let mappedChildren;
-  if (!children) {
-    if (title || description) {
-      mappedChildren = (
-        <MapCallout showTooltip anchor={marker}>
-          <View style={style.tooltip}>
-            {title && <Text style={style.title}>{title}</Text>}
-            {description && (
-              <Text style={style.description}>{description}</Text>
-            )}
-          </View>
-        </MapCallout>
-      );
-    }
-  } else {
-    mappedChildren = React.Children.map(children, (child, index) => {
-      return React.cloneElement(child as React.ReactElement, {
-        index,
-        anchor: marker,
-      });
-    });
-  }
-  return (
-    <Provider
-      value={{
-        pinColor: pinColor,
-        calloutOpened,
-        toggleCallout: (value) => toggleCallout(value),
-        position: {
-          latitude,
-          longitude,
-        },
-      }}
-    >
-      <WebMarker
-        position={{
-          lat: latitude,
-          lng: longitude,
-        }}
-        onClick={handleMarkerClick}
-        onLoad={handleOnLoad}
-        icon={{
-          path: "m12 0c-4.4183 2.3685e-15 -8 3.5817-8 8 0 1.421 0.3816 2.75 1.0312 3.906 0.1079 0.192 0.221 0.381 0.3438 0.563l6.625 11.531 6.625-11.531c0.102-0.151 0.19-0.311 0.281-0.469l0.063-0.094c0.649-1.156 1.031-2.485 1.031-3.906 0-4.4183-3.582-8-8-8zm0 4c2.209 0 4 1.7909 4 4 0 2.209-1.791 4-4 4-2.2091 0-4-1.791-4-4 0-2.2091 1.7909-4 4-4z",
-          fillColor: pinColor,
-          fillOpacity: 1,
-          strokeWeight: 0,
-          rotation: 0,
-          scale: 2,
-        }}
-      >
-        {mappedChildren}
-      </WebMarker>
-    </Provider>
-  );
-};
-
-const style = StyleSheet.create({
-  tooltip: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  title: {
-    fontWeight: "600",
-    textAlign: "center",
-  },
-  description: {
-    textAlign: "center",
-  },
-});
-
-export default MapMarker;