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

package/src/components/MFBanDoSo/styles.js

@@ -0,0 +1,323 @@
+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({
+  hiddenButton: {
+    display: 'none',
+  },
+  layerButton: {
+    position: 'absolute',
+    top: 16,
+    right: 12,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000000',
+    shadowOpacity: 0.14,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+  },
+  layerButtonActive: {
+    borderColor: '#3b82f6',
+    backgroundColor: '#eff6ff',
+  },
+  legendButton: {
+    top: 66,
+  },
+  layerIconBoxPrimary: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 3,
+    borderWidth: 1.4,
+    borderColor: '#6b7280',
+    backgroundColor: '#eef2f7',
+    transform: [{ translateX: -2 }, { translateY: -2 }],
+  },
+  layerIconBoxSecondary: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 3,
+    borderWidth: 1.4,
+    borderColor: '#4b5563',
+    backgroundColor: '#ffffff',
+    transform: [{ translateX: 2 }, { translateY: 2 }],
+  },
+  legendToggleIconRow: {
+    width: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 1,
+  },
+  legendToggleIconDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#4b5563',
+    marginRight: 3,
+  },
+  legendToggleIconLine: {
+    flex: 1,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: '#6b7280',
+  },
+  selectorContainer: {
+    ...fullFill,
+  },
+  selectorBackdrop: {
+    ...fullFill,
+    backgroundColor: '#11182740',
+  },
+  selectorBackdropPressable: {
+    ...fullFill,
+  },
+  selectorPanel: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: '100%',
+    width: '76%',
+    maxWidth: 320,
+    minWidth: 260,
+    backgroundColor: '#f3f4f6',
+    borderTopRightRadius: 14,
+    borderBottomRightRadius: 14,
+    paddingHorizontal: 14,
+    paddingTop: 18,
+    paddingBottom: 14,
+    shadowColor: '#000000',
+    shadowOpacity: 0.2,
+    shadowRadius: 14,
+    shadowOffset: {
+      width: 2,
+      height: 0,
+    },
+  },
+  selectorHeader: {
+    marginBottom: 10,
+  },
+  selectorTitle: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#1f2937',
+  },
+  selectorList: {
+    flex: 1,
+  },
+  selectorGrid: {
+    paddingBottom: 10,
+  },
+  selectorGroupSection: {
+    marginBottom: 8,
+  },
+  selectorGroupHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 28,
+    paddingHorizontal: 0,
+    marginBottom: 6,
+  },
+  selectorGroupCheckAction: {
+    width: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
+  selectorGroupToggleAction: {
+    flex: 1,
+    minHeight: 28,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 2,
+    paddingLeft: 2,
+  },
+  selectorGroupChevronTriangle: {
+    width: 0,
+    height: 0,
+    marginRight: 10,
+  },
+  selectorGroupChevronCollapsed: {
+    borderTopWidth: 5,
+    borderBottomWidth: 5,
+    borderLeftWidth: 7,
+    borderTopColor: 'transparent',
+    borderBottomColor: 'transparent',
+    borderLeftColor: '#374151',
+  },
+  selectorGroupChevronExpanded: {
+    borderLeftWidth: 5,
+    borderRightWidth: 5,
+    borderTopWidth: 7,
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent',
+    borderTopColor: '#374151',
+    marginTop: 1,
+  },
+  selectorGroupTitle: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#374151',
+  },
+  selectorGroupBody: {
+    paddingLeft: 24,
+    paddingTop: 0,
+  },
+  selectorRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 34,
+    marginBottom: 6,
+    paddingRight: 6,
+  },
+  selectorLabel: {
+    flex: 1,
+    fontSize: 15,
+    color: '#2f343a',
+    lineHeight: 22,
+    fontWeight: '500',
+  },
+  checkboxOuter: {
+    width: 18,
+    height: 18,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    marginRight: 10,
+    marginTop: 2,
+    borderColor: '#b7bcc3',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#ffffff',
+  },
+  checkboxOuterChecked: {
+    borderColor: '#2563eb',
+    backgroundColor: '#2563eb',
+  },
+  checkboxMark: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#ffffff',
+    lineHeight: 11,
+  },
+  groupCheckOuter: {
+    width: 18,
+    height: 18,
+    borderRadius: 4,
+    borderWidth: 1.5,
+    borderColor: '#b7bcc3',
+    backgroundColor: '#ffffff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  groupCheckOuterChecked: {
+    borderColor: '#2563eb',
+    backgroundColor: '#2563eb',
+  },
+  groupCheckOuterIndeterminate: {
+    borderColor: '#2563eb',
+    backgroundColor: '#ffffff',
+  },
+  groupCheckMark: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#ffffff',
+    lineHeight: 11,
+  },
+  groupCheckIndeterminateMark: {
+    width: 8,
+    height: 8,
+    borderRadius: 1,
+    backgroundColor: '#2563eb',
+  },
+  legendContainer: {
+    ...fullFill,
+  },
+  legendPanel: {
+    position: 'absolute',
+    right: 12,
+    bottom: 20,
+    width: 160,
+    maxHeight: 240,
+    backgroundColor: '#FFFFFFF5',
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    shadowColor: '#000000',
+    shadowOpacity: 0.12,
+    shadowRadius: 10,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+  },
+  legendTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#9ca3af',
+    marginBottom: 6,
+  },
+  legendDivider: {
+    height: 1,
+    backgroundColor: '#e5e7eb',
+    marginBottom: 6,
+  },
+  legendList: {
+    maxHeight: 188,
+    marginLeft: -10,
+    marginRight: -8,
+  },
+  legendListInner: {
+    paddingBottom: 2,
+    paddingHorizontal: 10,
+  },
+  legendRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 24,
+    marginBottom: 3,
+    paddingRight: 2,
+  },
+  legendLabel: {
+    flex: 1,
+    fontSize: 13,
+    color: '#6b7280',
+    fontWeight: '500',
+  },
+  legendDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    borderWidth: 2,
+    marginRight: 8,
+    backgroundColor: '#9ca3af',
+    borderColor: '#9ca3af',
+  },
+  legendDotUnchecked: {
+    backgroundColor: '#ffffff',
+    borderColor: '#9ca3af',
+  },
+});
+
+export { styles };

package/src/components/MFBanDoSo/ui.js

@@ -0,0 +1,261 @@
+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 }) {
+  return (
+    <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 }) {
+  return (
+    <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>
+  );
+}
+
+function SelectorDrawer({
+  show,
+  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;
+  }
+
+  return (
+    <View style={styles.selectorContainer}>
+      <Animated.View style={[styles.selectorBackdrop, backdropAnimatedStyle]}>
+        <Pressable
+          style={styles.selectorBackdropPressable}
+          onPress={onClose}
+        />
+      </Animated.View>
+      <Animated.View
+        style={[styles.selectorPanel, panelAnimatedStyle]}
+        {...panResponder.panHandlers}
+      >
+        <View style={styles.selectorHeader}>
+          <Text style={styles.selectorTitle}>{title}</Text>
+        </View>
+        <ScrollView style={styles.selectorList} showsVerticalScrollIndicator={false}>
+          <View style={styles.selectorGrid}>
+            {groupSections.map((group) => {
+              const groupKey = group?.key || '__group__';
+              const groupTitle = group?.title || 'Khac';
+              const groupItems = Array.isArray(group?.items) ? group.items : [];
+              const isExpanded = expandedGroupKeys[groupKey] !== false;
+              const checkedCount = groupItems.reduce(
+                (acc, wrapped) => acc + (wrapped?.item?.checked !== false ? 1 : 0),
+                0
+              );
+              const isGroupChecked = groupItems.length > 0 && checkedCount === groupItems.length;
+              const isGroupIndeterminate =
+                checkedCount > 0 && checkedCount < groupItems.length;
+
+              return (
+                <View key={groupKey} style={styles.selectorGroupSection}>
+                  <View style={styles.selectorGroupHeader}>
+                    <Pressable
+                      style={styles.selectorGroupCheckAction}
+                      onPress={() => onToggleGroupChecked(groupKey, !isGroupChecked)}
+                    >
+                      <View
+                        style={[
+                          styles.groupCheckOuter,
+                          isGroupChecked && styles.groupCheckOuterChecked,
+                          isGroupIndeterminate && styles.groupCheckOuterIndeterminate,
+                        ]}
+                      >
+                        {isGroupChecked ? (
+                          <Text style={styles.groupCheckMark}>✓</Text>
+                        ) : isGroupIndeterminate ? (
+                          <View style={styles.groupCheckIndeterminateMark} />
+                        ) : null}
+                      </View>
+                    </Pressable>
+                    <Pressable
+                      style={styles.selectorGroupToggleAction}
+                      onPress={() => onToggleGroup(groupKey)}
+                    >
+                      <View
+                        style={[
+                          styles.selectorGroupChevronTriangle,
+                          isExpanded
+                            ? styles.selectorGroupChevronExpanded
+                            : styles.selectorGroupChevronCollapsed,
+                        ]}
+                      />
+                      <Text style={styles.selectorGroupTitle} numberOfLines={1}>
+                        {groupTitle}
+                      </Text>
+                    </Pressable>
+                  </View>
+
+                  {isExpanded ? (
+                    <View style={styles.selectorGroupBody}>
+                      {groupItems.map(({ item, index }) => {
+                        const itemKey = item?.key ?? `index-${index}`;
+                        const checked = item?.checked !== false;
+                        const itemTitle = item?.title || item?.key || `Item ${index + 1}`;
+
+                        return (
+                          <Pressable
+                            key={`${itemKey}-${index}`}
+                            style={styles.selectorRow}
+                            onPress={() => onToggleItem(itemKey, index)}
+                          >
+                            <View
+                              style={[
+                                styles.checkboxOuter,
+                                checked && styles.checkboxOuterChecked,
+                              ]}
+                            >
+                              {checked ? (
+                                <Text style={styles.checkboxMark}>✓</Text>
+                              ) : null}
+                            </View>
+                            <Text style={styles.selectorLabel}>
+                              {itemTitle}
+                            </Text>
+                          </Pressable>
+                        );
+                      })}
+                    </View>
+                  ) : null}
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </Animated.View>
+    </View>
+  );
+}
+
+function LegendPanel({ show, title, items, getItemColor }) {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <View style={styles.legendContainer} pointerEvents="box-none">
+      <View style={styles.legendPanel}>
+        <Text style={styles.legendTitle}>{title}</Text>
+        <View style={styles.legendDivider} />
+        <ScrollView style={styles.legendList} showsVerticalScrollIndicator={true}>
+          <View style={styles.legendListInner}>
+            {items.map((item, index) => {
+              const checked = item?.checked !== false;
+              const itemTitle =
+                item?.title || item?.label || item?.name || item?.key || '';
+              const dotColor = getItemColor(item, index);
+              const hasDotColor =
+                typeof dotColor === 'string' && dotColor.trim().length > 0;
+
+              return (
+                <View
+                  key={`${item?.key ?? `index-${index}`}-${index}`}
+                  style={styles.legendRow}
+                >
+                  <View
+                    style={[
+                      styles.legendDot,
+                      hasDotColor
+                        ? { backgroundColor: dotColor, borderColor: dotColor }
+                        : null,
+                      !checked && !hasDotColor ? styles.legendDotUnchecked : null,
+                    ]}
+                  />
+                  <Text style={styles.legendLabel} numberOfLines={1}>
+                    {itemTitle}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+export { LayerButton, LegendButton, LegendPanel, SelectorDrawer };