react-native-map4d-map-dtqg 0.1.5 → 0.1.6

package/lib/typescript/components/MFBanDoSo/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/MFBanDoSo/styles.js"],"names":[],"mappings":""}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/MFBanDoSo/styles.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiTG;2BAhUwB,cAAc"}

package/lib/typescript/components/MFBanDoSo/ui.d.ts

@@ -2,26 +2,28 @@ export function LayerButton({ show, isActive, onPress }: {
     show: any;
     isActive: any;
     onPress: any;
-}): React.JSX.Element | null;
+}): React.JSX.Element;
 export function LegendButton({ show, isActive, onPress }: {
     show: any;
     isActive: any;
     onPress: any;
-}): React.JSX.Element | null;
+}): React.JSX.Element;
 export function LegendPanel({ show, title, items, getItemColor }: {
     show: any;
     title: any;
     items: any;
     getItemColor: any;
 }): React.JSX.Element | null;
-export function SelectorDrawer({ show, title, groupSections, expandedGroupKeys, backdropAnimatedStyle, panelAnimatedStyle, onClose, onToggleGroup, onToggleGroupChecked, onToggleItem, }: {
+export function SelectorDrawer({ show, title, groupSections, expandedGroupKeys, dragAnim, backdropAnimatedStyle, panelAnimatedStyle, onClose, onDragCancel, onToggleGroup, onToggleGroupChecked, onToggleItem, }: {
     show: any;
     title: any;
     groupSections: any;
     expandedGroupKeys: any;
+    dragAnim: any;
     backdropAnimatedStyle: any;
     panelAnimatedStyle: any;
     onClose: any;
+    onDragCancel: any;
     onToggleGroup: any;
     onToggleGroupChecked: any;
     onToggleItem: any;

package/lib/typescript/components/MFBanDoSo/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/MFBanDoSo/ui.js"],"names":[],"mappings":"AAUA;;;;6BAmBC;AAED;;;;6BA0BC;AA6HD;;;;;6BA6CC;AAxKD;;;;;;;;;;;6BAyHC;kBApLiB,OAAO"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../../../src/components/MFBanDoSo/ui.js"],"names":[],"mappings":"AAiBA;;;;sBAeC;AAED;;;;sBAsBC;AA6JD;;;;;6BA6CC;AAxMD;;;;;;;;;;;;;6BAyJC;kBAnN6B,OAAO"}

package/lib/typescript/components/MFBanDoSo.d.ts

@@ -21,6 +21,7 @@ export class MFBanDoSo extends MFMapView {
     _toggleLegendVisibility(): void;
     _openSelector(): void;
     _closeSelector(): void;
+    _snapSelectorOpen(): void;
     componentDidMount(): void;
     componentDidUpdate(prevProps: any, prevState: any): void;
     componentWillUnmount(): void;

package/lib/typescript/components/MFBanDoSo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MFBanDoSo.d.ts","sourceRoot":"","sources":["../../../src/components/MFBanDoSo.js"],"names":[],"mappings":"AAwCA;IAGI,0BAAgC;IAChC,oBAAuB;IACvB,2BAA2B;IAC3B,8BAA0C;IAC1C;;;;;;;;;;MASC;IAmFH,oDAQC;IAeD,4DAQC;IArBD,kCAWC;IAYD,kCAOC;IAED,gCAIC;IAED,sBAYC;IAED,uBAgBC;IAtJD,0BAIC;IAED,yDAgBC;IAED,6BAEC;IAED,oCA0CC;IAkFD,0BAmBC;CAmEF;;;;;0BApRyB,aAAa;yBAzBhC,cAAc;iCAwBd,uBAAuB"}
+{"version":3,"file":"MFBanDoSo.d.ts","sourceRoot":"","sources":["../../../src/components/MFBanDoSo.js"],"names":[],"mappings":"AAwCA;IAGI,0BAAgC;IAChC,oBAAuB;IACvB,2BAA2B;IAC3B,8BAA0C;IAC1C;;;;;;;;;;MASC;IAoFH,oDAQC;IAeD,4DAQC;IArBD,kCAWC;IAYD,kCAOC;IAED,gCAIC;IAED,sBAYC;IAED,uBAgBC;IAED,0BAOC;IA/JD,0BAIC;IAED,yDAgBC;IAED,6BAEC;IAED,oCA0CC;IA2FD,0BAmBC;CAqEF;;;;;0BAhSyB,aAAa;yBAzBhC,cAAc;iCAwBd,uBAAuB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-map4d-map-dtqg",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Map4dMap SDK for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/MFBanDoSo/constants.js

@@ -1,6 +1,9 @@
 const SELECTOR_DRAWER_TRANSLATE_X = -320;
 const SELECTOR_OPEN_DURATION_MS = 240;
 const SELECTOR_CLOSE_DURATION_MS = 210;
+const SELECTOR_SWIPE_ACTIVATION_DISTANCE = 10;
+const SELECTOR_SWIPE_CLOSE_DISTANCE = 80;
+const SELECTOR_SWIPE_CLOSE_VELOCITY = 0.5;
 const SELECTOR_TITLE = 'Chọn lớp dữ liệu trên bản đồ';
 const LEGEND_TITLE = 'Chú giải';
 
@@ -25,6 +28,9 @@ export {
   SELECTOR_DRAWER_TRANSLATE_X,
   SELECTOR_OPEN_DURATION_MS,
   SELECTOR_CLOSE_DURATION_MS,
+  SELECTOR_SWIPE_ACTIVATION_DISTANCE,
+  SELECTOR_SWIPE_CLOSE_DISTANCE,
+  SELECTOR_SWIPE_CLOSE_VELOCITY,
   SELECTOR_TITLE,
   LEGEND_TITLE,
   getSourceUrl,

package/src/components/MFBanDoSo/styles.js

@@ -1,10 +1,21 @@
 import { StyleSheet } from 'react-native';
 
+// Workaround for a React Native Fabric/Android Yoga bug: an absolutely-positioned
+// view stretched via top+bottom (e.g. StyleSheet.absoluteFillObject) can have its
+// top offset silently dropped, collapsing the view to zero height pinned at the
+// parent's bottom edge. Anchoring with top + height: '100%' instead avoids that
+// code path. Do not replace this with absoluteFillObject/bottom-based stretching.
+const fullFill = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: '100%',
+};
+
 const styles = StyleSheet.create({
-  layerButtonContainer: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 20,
-    elevation: 20,
+  hiddenButton: {
+    display: 'none',
   },
   layerButton: {
     position: 'absolute',
@@ -73,22 +84,20 @@ const styles = StyleSheet.create({
     backgroundColor: '#6b7280',
   },
   selectorContainer: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 18,
-    elevation: 18,
+    ...fullFill,
   },
   selectorBackdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...fullFill,
     backgroundColor: '#11182740',
   },
   selectorBackdropPressable: {
-    ...StyleSheet.absoluteFillObject,
+    ...fullFill,
   },
   selectorPanel: {
     position: 'absolute',
     top: 0,
     left: 0,
-    bottom: 0,
+    height: '100%',
     width: '76%',
     maxWidth: 320,
     minWidth: 260,
@@ -243,9 +252,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#2563eb',
   },
   legendContainer: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 10,
-    elevation: 10,
+    ...fullFill,
   },
   legendPanel: {
     position: 'absolute',

package/src/components/MFBanDoSo/ui.js

@@ -1,59 +1,58 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   Animated,
+  PanResponder,
   Pressable,
   ScrollView,
   Text,
   View,
 } from 'react-native';
+import {
+  SELECTOR_DRAWER_TRANSLATE_X,
+  SELECTOR_SWIPE_ACTIVATION_DISTANCE,
+  SELECTOR_SWIPE_CLOSE_DISTANCE,
+  SELECTOR_SWIPE_CLOSE_VELOCITY,
+} from './constants';
 import { styles } from './styles';
 
 function LayerButton({ show, isActive, onPress }) {
-  if (!show) {
-    return null;
-  }
-
   return (
-    <View style={styles.layerButtonContainer} pointerEvents="box-none">
-      <Pressable
-        style={[
-          styles.layerButton,
-          isActive && styles.layerButtonActive,
-        ]}
-        onPress={onPress}
-      >
-        <View style={styles.layerIconBoxPrimary} />
-        <View style={styles.layerIconBoxSecondary} />
-      </Pressable>
-    </View>
+    <Pressable
+      style={[
+        styles.layerButton,
+        isActive && styles.layerButtonActive,
+        !show && styles.hiddenButton,
+      ]}
+      onPress={onPress}
+      pointerEvents={show ? 'auto' : 'none'}
+    >
+      <View style={styles.layerIconBoxPrimary} />
+      <View style={styles.layerIconBoxSecondary} />
+    </Pressable>
   );
 }
 
 function LegendButton({ show, isActive, onPress }) {
-  if (!show) {
-    return null;
-  }
-
   return (
-    <View style={styles.layerButtonContainer} pointerEvents="box-none">
-      <Pressable
-        style={[
-          styles.layerButton,
-          styles.legendButton,
-          isActive && styles.layerButtonActive,
-        ]}
-        onPress={onPress}
-      >
-        <View style={styles.legendToggleIconRow}>
-          <View style={styles.legendToggleIconDot} />
-          <View style={styles.legendToggleIconLine} />
-        </View>
-        <View style={styles.legendToggleIconRow}>
-          <View style={styles.legendToggleIconDot} />
-          <View style={styles.legendToggleIconLine} />
-        </View>
-      </Pressable>
-    </View>
+    <Pressable
+      style={[
+        styles.layerButton,
+        styles.legendButton,
+        isActive && styles.layerButtonActive,
+        !show && styles.hiddenButton,
+      ]}
+      onPress={onPress}
+      pointerEvents={show ? 'auto' : 'none'}
+    >
+      <View style={styles.legendToggleIconRow}>
+        <View style={styles.legendToggleIconDot} />
+        <View style={styles.legendToggleIconLine} />
+      </View>
+      <View style={styles.legendToggleIconRow}>
+        <View style={styles.legendToggleIconDot} />
+        <View style={styles.legendToggleIconLine} />
+      </View>
+    </Pressable>
   );
 }
 
@@ -62,13 +61,42 @@ function SelectorDrawer({
   title,
   groupSections,
   expandedGroupKeys,
+  dragAnim,
   backdropAnimatedStyle,
   panelAnimatedStyle,
   onClose,
+  onDragCancel,
   onToggleGroup,
   onToggleGroupChecked,
   onToggleItem,
 }) {
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (evt, gestureState) =>
+        Math.abs(gestureState.dx) > SELECTOR_SWIPE_ACTIVATION_DISTANCE &&
+        Math.abs(gestureState.dx) > Math.abs(gestureState.dy),
+      onPanResponderMove: (evt, gestureState) => {
+        const clampedDx = Math.min(0, gestureState.dx);
+        const nextValue = 1 + clampedDx / Math.abs(SELECTOR_DRAWER_TRANSLATE_X);
+        dragAnim.setValue(Math.max(0, Math.min(1, nextValue)));
+      },
+      onPanResponderRelease: (evt, gestureState) => {
+        const shouldClose =
+          gestureState.dx < -SELECTOR_SWIPE_CLOSE_DISTANCE ||
+          gestureState.vx < -SELECTOR_SWIPE_CLOSE_VELOCITY;
+
+        if (shouldClose) {
+          onClose();
+        } else {
+          onDragCancel();
+        }
+      },
+      onPanResponderTerminate: () => {
+        onDragCancel();
+      },
+    })
+  ).current;
+
   if (!show) {
     return null;
   }
@@ -81,7 +109,10 @@ function SelectorDrawer({
           onPress={onClose}
         />
       </Animated.View>
-      <Animated.View style={[styles.selectorPanel, panelAnimatedStyle]}>
+      <Animated.View
+        style={[styles.selectorPanel, panelAnimatedStyle]}
+        {...panResponder.panHandlers}
+      >
         <View style={styles.selectorHeader}>
           <Text style={styles.selectorTitle}>{title}</Text>
         </View>

package/src/components/MFBanDoSo.js

@@ -63,6 +63,7 @@ class MFBanDoSo extends MFMapView {
     this._toggleLegendVisibility = this._toggleLegendVisibility.bind(this);
     this._openSelector = this._openSelector.bind(this);
     this._closeSelector = this._closeSelector.bind(this);
+    this._snapSelectorOpen = this._snapSelectorOpen.bind(this);
   }
 
   componentDidMount() {
@@ -217,6 +218,15 @@ class MFBanDoSo extends MFMapView {
     });
   }
 
+  _snapSelectorOpen() {
+    Animated.timing(this._selectorAnim, {
+      toValue: 1,
+      duration: SELECTOR_OPEN_DURATION_MS,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }
+
   _syncGeojsonStyle() {
     if (!this.state.isReady) {
       return;
@@ -287,9 +297,11 @@ class MFBanDoSo extends MFMapView {
           title={selectorTitle}
           groupSections={groupSections}
           expandedGroupKeys={this.state.expandedGroupKeys}
+          dragAnim={this._selectorAnim}
           backdropAnimatedStyle={backdropAnimatedStyle}
           panelAnimatedStyle={panelAnimatedStyle}
           onClose={this._toggleSelectorVisibility}
+          onDragCancel={this._snapSelectorOpen}
           onToggleGroup={this._toggleGroup}
           onToggleGroupChecked={this._toggleGroupChecked}
           onToggleItem={this._toggleItem}