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

package/src/components/MFBanDoSo/helpers.js

@@ -0,0 +1,273 @@
+import { createCategoryItemsSignature } from '../internal/GeojsonStyleUtils';
+
+function normalizeColorValue(color) {
+  if (typeof color === 'string' && color.trim().length > 0) {
+    return color.trim();
+  }
+
+  if (Array.isArray(color) && typeof color[0] === 'string' && color[0].trim().length > 0) {
+    return color[0].trim();
+  }
+
+  return null;
+}
+
+function resolveItemsFromCategoryResponse(json) {
+  const data = json?.data ?? json;
+
+  if (Array.isArray(data)) {
+    return data;
+  }
+
+  if (Array.isArray(data?.items)) {
+    return data.items;
+  }
+
+  if (Array.isArray(json?.items)) {
+    return json.items;
+  }
+
+  return [];
+}
+
+function resolveCategoryGroupMetadataFromResponse(json) {
+  const data = json?.data ?? json;
+  const groups = Array.isArray(data?.groups)
+    ? data.groups
+    : Array.isArray(json?.groups)
+      ? json.groups
+      : [];
+
+  const titleByKey = {};
+  const orderKeys = [];
+
+  groups.forEach((group, index) => {
+    if (!group || typeof group !== 'object') {
+      return;
+    }
+
+    const rawKeyValue = [group.key, group.code, group.group, group.id]
+      .find((value) => value != null && `${value}`.trim().length > 0);
+
+    if (rawKeyValue == null) {
+      return;
+    }
+
+    const key = `${rawKeyValue}`.trim();
+    const rawTitleValue = [
+      group.title,
+      group.name,
+      group.label,
+      group.display_name,
+      group.displayName,
+    ].find((value) => typeof value === 'string' && value.trim().length > 0);
+
+    const title = rawTitleValue ? rawTitleValue.trim() : key;
+
+    titleByKey[key] = title;
+
+    const preferredOrder = Number.isFinite(group.order) ? group.order : index;
+    orderKeys.push({
+      key,
+      order: preferredOrder,
+      index,
+    });
+  });
+
+  orderKeys.sort((a, b) => {
+    if (a.order === b.order) {
+      return a.index - b.index;
+    }
+    return a.order - b.order;
+  });
+
+  return {
+    titleByKey,
+    orderedKeys: orderKeys.map((entry) => entry.key),
+  };
+}
+
+function normalizeCategoryItems(items) {
+  if (!Array.isArray(items)) {
+    return [];
+  }
+
+  return items.map((item) => ({
+    ...item,
+    checked: item?.checked !== false,
+  }));
+}
+
+function getSelectedCategoryItems(items) {
+  return (Array.isArray(items) ? items : []).filter(
+    (item) => item?.checked !== false
+  );
+}
+
+function resolveCategoryGroupKey(item) {
+  const rawGroup = typeof item?.group === 'string' ? item.group.trim() : '';
+  return rawGroup.length > 0 ? rawGroup : '__ungrouped__';
+}
+
+function createCategoryGroupSections(items, titleByKey = {}, orderedKeys = []) {
+  const list = Array.isArray(items) ? items : [];
+  const groupedMap = new Map();
+
+  list.forEach((item, index) => {
+    const groupKey = resolveCategoryGroupKey(item);
+    const mappedTitle =
+      typeof titleByKey[groupKey] === 'string' && titleByKey[groupKey].trim().length > 0
+        ? titleByKey[groupKey].trim()
+        : null;
+    const groupTitle = mappedTitle || (groupKey === '__ungrouped__' ? 'Khac' : groupKey);
+
+    if (!groupedMap.has(groupKey)) {
+      groupedMap.set(groupKey, {
+        key: groupKey,
+        title: groupTitle,
+        items: [],
+      });
+    }
+
+    groupedMap.get(groupKey).items.push({
+      item,
+      index,
+    });
+  });
+
+  const sections = Array.from(groupedMap.values());
+  if (!Array.isArray(orderedKeys) || orderedKeys.length === 0) {
+    return sections;
+  }
+
+  const orderMap = orderedKeys.reduce((acc, key, index) => {
+    if (typeof key === 'string' && key.length > 0) {
+      acc[key] = index;
+    }
+    return acc;
+  }, {});
+
+  return sections.sort((a, b) => {
+    const aOrder = Object.prototype.hasOwnProperty.call(orderMap, a.key)
+      ? orderMap[a.key]
+      : Number.MAX_SAFE_INTEGER;
+    const bOrder = Object.prototype.hasOwnProperty.call(orderMap, b.key)
+      ? orderMap[b.key]
+      : Number.MAX_SAFE_INTEGER;
+
+    if (aOrder === bOrder) {
+      return a.title.localeCompare(b.title);
+    }
+    return aOrder - bOrder;
+  });
+}
+
+function reconcileExpandedGroupKeys(groupSections, previousExpandedGroupKeys) {
+  const prev =
+    previousExpandedGroupKeys && typeof previousExpandedGroupKeys === 'object'
+      ? previousExpandedGroupKeys
+      : {};
+
+  return (Array.isArray(groupSections) ? groupSections : []).reduce(
+    (acc, group) => {
+      const key = group?.key;
+      if (typeof key !== 'string' || key.length === 0) {
+        return acc;
+      }
+
+      acc[key] = typeof prev[key] === 'boolean' ? prev[key] : true;
+      return acc;
+    },
+    {}
+  );
+}
+
+function createSelectedCategoryItemsSignature(items) {
+  return createCategoryItemsSignature(getSelectedCategoryItems(items));
+}
+
+function toggleCategoryItemChecked(items, targetKey, targetIndex) {
+  return (Array.isArray(items) ? items : []).map((item, index) => {
+    const currentKey = item?.key ?? `index-${index}`;
+    const isTarget = currentKey === targetKey && index === targetIndex;
+
+    if (!isTarget) {
+      return item;
+    }
+
+    return {
+      ...item,
+      checked: !(item?.checked !== false),
+    };
+  });
+}
+
+function toggleCategoryGroupChecked(items, targetGroupKey, checkedValue) {
+  if (typeof targetGroupKey !== 'string' || targetGroupKey.length === 0) {
+    return Array.isArray(items) ? items : [];
+  }
+
+  const nextChecked = checkedValue !== false;
+
+  return (Array.isArray(items) ? items : []).map((item) => {
+    const groupKey = resolveCategoryGroupKey(item);
+    if (groupKey !== targetGroupKey) {
+      return item;
+    }
+
+    return {
+      ...item,
+      checked: nextChecked,
+    };
+  });
+}
+
+function extractColorFromItemStyle(item) {
+  if (!item || typeof item !== 'object') {
+    return null;
+  }
+
+  const lineColor = normalizeColorValue(item?.style?.line?.[0]?.draw?.color);
+  if (lineColor) {
+    return lineColor;
+  }
+
+  const fillColor = normalizeColorValue(item?.style?.fill?.[0]?.draw?.color);
+  if (fillColor) {
+    return fillColor;
+  }
+
+  const symbolColor = normalizeColorValue(item?.style?.symbol?.[0]?.draw?.icon_color);
+  if (symbolColor) {
+    return symbolColor;
+  }
+
+  return null;
+}
+
+function resolveCategoryItemColor(item) {
+  const customColor = normalizeColorValue(item?.color);
+  if (customColor) {
+    return customColor;
+  }
+
+  const styleColor = extractColorFromItemStyle(item);
+  if (styleColor) {
+    return styleColor;
+  }
+
+  return null;
+}
+
+export {
+  createCategoryGroupSections,
+  createSelectedCategoryItemsSignature,
+  getSelectedCategoryItems,
+  normalizeCategoryItems,
+  reconcileExpandedGroupKeys,
+  resolveCategoryGroupMetadataFromResponse,
+  resolveCategoryItemColor,
+  resolveItemsFromCategoryResponse,
+  toggleCategoryGroupChecked,
+  toggleCategoryItemChecked,
+};

package/src/components/MFBanDoSo/propTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+import { MFMapView } from '../MFMapView';
+
+const banDoSoPropTypes = {
+  ...MFMapView.propTypes,
+
+  /**
+   * If `true` (default), fetch category config and vector tiles from the staging API.
+   * If `false`, use the production API (no `/staging` path segment).
+   */
+  isStaging: PropTypes.bool,
+};
+
+export { banDoSoPropTypes };

package/src/components/MFBanDoSo/styles.js

@@ -0,0 +1,316 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  layerButtonContainer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 20,
+    elevation: 20,
+  },
+  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: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 18,
+    elevation: 18,
+  },
+  selectorBackdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#11182740',
+  },
+  selectorBackdropPressable: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  selectorPanel: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    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: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+    elevation: 10,
+  },
+  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 };