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

package/src/components/MFBanDoSo/ui.js

@@ -0,0 +1,230 @@
+import React from 'react';
+import {
+  Animated,
+  Pressable,
+  ScrollView,
+  Text,
+  View,
+} from 'react-native';
+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>
+  );
+}
+
+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>
+  );
+}
+
+function SelectorDrawer({
+  show,
+  title,
+  groupSections,
+  expandedGroupKeys,
+  backdropAnimatedStyle,
+  panelAnimatedStyle,
+  onClose,
+  onToggleGroup,
+  onToggleGroupChecked,
+  onToggleItem,
+}) {
+  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]}>
+        <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 };

package/src/components/MFBanDoSo.js

@@ -1,124 +1,314 @@
-import PropTypes from 'prop-types';
-import { MFMapView } from './MFMapView';
-import {
-  buildGeojsonStyle,
-  createCategoryItemsSignature,
-} from './internal/GeojsonStyleUtils';
-
-const FilterStylePropType = PropTypes.shape({
-  kind: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
-  kind_detail: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
-});
-
-const DrawLinePropType = PropTypes.shape({
-  color: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
-});
-
-const DrawFillPropType = PropTypes.shape({
-  color: PropTypes.string,
-});
-
-const DrawSymbolPropType = PropTypes.shape({
-  icon_image: PropTypes.string,
-  icon_index: PropTypes.number,
-  icon_color: PropTypes.string,
-  use_direct_icon_url: PropTypes.bool,
-});
-
-const CategoryStylePropType = PropTypes.shape({
-  line: PropTypes.arrayOf(
-    PropTypes.shape({
-      layer: PropTypes.string,
-      filter: FilterStylePropType,
-      draw: DrawLinePropType,
-    })
-  ),
-  fill: PropTypes.arrayOf(
-    PropTypes.shape({
-      layer: PropTypes.string,
-      filter: FilterStylePropType,
-      draw: DrawFillPropType,
-    })
-  ),
-  symbol: PropTypes.arrayOf(
-    PropTypes.shape({
-      layer: PropTypes.string,
-      filter: FilterStylePropType,
-      draw: DrawSymbolPropType,
-    })
-  ),
-});
-
-const CategoryItemPropType = PropTypes.shape({
-  key: PropTypes.string,
-  title: PropTypes.string,
-  group: PropTypes.string,
-  order: PropTypes.number,
-  checked: PropTypes.bool,
-  style: CategoryStylePropType,
-});
-
-class MFBanDoSo extends MFMapView {
-  constructor(props) {
-    super(props);
-    this._appliedGeojsonStyle = null;
-  }
-
-  componentDidMount() {
-    this._syncGeojsonStyle();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const mapReadyChanged = prevState.isReady !== this.state.isReady;
-    const mapStyleChanged = prevProps.mapStyle !== this.props.mapStyle;
-    const sourceUrlChanged = prevProps.sourceUrl !== this.props.sourceUrl;
-    const itemsChanged =
-      createCategoryItemsSignature(prevProps.items) !==
-      createCategoryItemsSignature(this.props.items);
-
-    if (
-      mapReadyChanged ||
-      mapStyleChanged ||
-      sourceUrlChanged ||
-      itemsChanged
-    ) {
-      this._syncGeojsonStyle();
-    }
-  }
-
-  _syncGeojsonStyle() {
-    if (!this.state.isReady) {
-      return;
-    }
-
-    const items = this.props.items || [];
-
-    const geojsonStyle = buildGeojsonStyle(
-      this.props.mapStyle,
-      this.props.sourceUrl,
-      items
-    );
-
-    if (!geojsonStyle || geojsonStyle === this._appliedGeojsonStyle) {
-      return;
-    }
-
-    this._appliedGeojsonStyle = geojsonStyle;
-    this._runCommand('setMapStyle', [geojsonStyle]);
-  }
-}
-
-MFBanDoSo.propTypes = {
-  ...MFMapView.propTypes,
-  items: PropTypes.arrayOf(CategoryItemPropType),
-  sourceUrl: PropTypes.string.isRequired,
-};
-
-export { MFBanDoSo };
+import React from 'react';
+import {
+  Animated,
+  Easing,
+} from 'react-native';
+import {
+  LEGEND_TITLE,
+  SELECTOR_CLOSE_DURATION_MS,
+  SELECTOR_DRAWER_TRANSLATE_X,
+  SELECTOR_OPEN_DURATION_MS,
+  SELECTOR_TITLE,
+  getCategoryConfigUrl,
+  getSourceUrl,
+} from './MFBanDoSo/constants';
+import {
+  createCategoryGroupSections,
+  createSelectedCategoryItemsSignature,
+  getSelectedCategoryItems,
+  normalizeCategoryItems,
+  reconcileExpandedGroupKeys,
+  resolveCategoryGroupMetadataFromResponse,
+  resolveCategoryItemColor,
+  resolveItemsFromCategoryResponse,
+  toggleCategoryGroupChecked,
+  toggleCategoryItemChecked,
+} from './MFBanDoSo/helpers';
+import {
+  banDoSoPropTypes,
+} from './MFBanDoSo/propTypes';
+import { MFMapView } from './MFMapView';
+import {
+  LayerButton,
+  LegendButton,
+  LegendPanel,
+  SelectorDrawer,
+} from './MFBanDoSo/ui';
+import {
+  buildGeojsonStyle,
+} from './internal/GeojsonStyleUtils';
+
+class MFBanDoSo extends MFMapView {
+  constructor(props) {
+    super(props);
+    this._appliedGeojsonStyle = null;
+    this._isMounted = false;
+    this._categoryRequestId = 0;
+    this._selectorAnim = new Animated.Value(0);
+    this.state = {
+      ...this.state,
+      categoryItems: [],
+      expandedGroupKeys: {},
+      groupTitleByKey: {},
+      groupOrderedKeys: [],
+      isLegendVisible: false,
+      isSelectorVisible: false,
+      isSelectorMounted: false,
+    };
+
+    this._toggleItem = this._toggleItem.bind(this);
+    this._toggleGroupChecked = this._toggleGroupChecked.bind(this);
+    this._toggleGroup = this._toggleGroup.bind(this);
+    this._toggleSelectorVisibility = this._toggleSelectorVisibility.bind(this);
+    this._toggleLegendVisibility = this._toggleLegendVisibility.bind(this);
+    this._openSelector = this._openSelector.bind(this);
+    this._closeSelector = this._closeSelector.bind(this);
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadCategoryItems();
+    this._syncGeojsonStyle();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const mapReadyChanged = prevState.isReady !== this.state.isReady;
+    const mapStyleChanged = prevProps.mapStyle !== this.props.mapStyle;
+    const isStagingChanged = prevProps.isStaging !== this.props.isStaging;
+
+    if (isStagingChanged) {
+      this._loadCategoryItems();
+    }
+
+    const itemsChanged =
+      createSelectedCategoryItemsSignature(prevState.categoryItems) !==
+      createSelectedCategoryItemsSignature(this.state.categoryItems);
+
+    if (mapReadyChanged || mapStyleChanged || isStagingChanged || itemsChanged) {
+      this._syncGeojsonStyle();
+    }
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  async _loadCategoryItems() {
+    const requestId = this._categoryRequestId + 1;
+    this._categoryRequestId = requestId;
+
+    try {
+      const response = await fetch(getCategoryConfigUrl(this.props.isStaging));
+      if (!response.ok) {
+        throw new Error(`Failed to fetch category config: ${response.status}`);
+      }
+
+      const json = await response.json();
+      const nextItems = resolveItemsFromCategoryResponse(json);
+      const groupMetadata = resolveCategoryGroupMetadataFromResponse(json);
+
+      if (!this._isMounted || requestId !== this._categoryRequestId) {
+        return;
+      }
+
+      this.setState((prevState) => {
+        const categoryItems = normalizeCategoryItems(nextItems);
+        const groupSections = createCategoryGroupSections(
+          categoryItems,
+          groupMetadata.titleByKey,
+          groupMetadata.orderedKeys
+        );
+
+        return {
+          categoryItems,
+          groupTitleByKey: groupMetadata.titleByKey,
+          groupOrderedKeys: groupMetadata.orderedKeys,
+          expandedGroupKeys: reconcileExpandedGroupKeys(
+            groupSections,
+            prevState.expandedGroupKeys
+          ),
+        };
+      });
+    } catch (error) {
+      if (requestId !== this._categoryRequestId) {
+        return;
+      }
+      console.warn('Cannot load category items', error);
+    }
+  }
+
+  _toggleItem(targetKey, targetIndex) {
+    this.setState((prevState) => ({
+      categoryItems: toggleCategoryItemChecked(
+        prevState.categoryItems,
+        targetKey,
+        targetIndex
+      ),
+    }));
+  }
+
+  _toggleGroup(groupKey) {
+    if (typeof groupKey !== 'string' || groupKey.length === 0) {
+      return;
+    }
+
+    this.setState((prevState) => ({
+      expandedGroupKeys: {
+        ...prevState.expandedGroupKeys,
+        [groupKey]: !(prevState.expandedGroupKeys[groupKey] !== false),
+      },
+    }));
+  }
+
+  _toggleGroupChecked(groupKey, checkedValue) {
+    this.setState((prevState) => ({
+      categoryItems: toggleCategoryGroupChecked(
+        prevState.categoryItems,
+        groupKey,
+        checkedValue
+      ),
+    }));
+  }
+
+  _toggleSelectorVisibility() {
+    if (this.state.isSelectorVisible) {
+      this._closeSelector();
+      return;
+    }
+
+    this._openSelector();
+  }
+
+  _toggleLegendVisibility() {
+    this.setState((prevState) => ({
+      isLegendVisible: !prevState.isLegendVisible,
+    }));
+  }
+
+  _openSelector() {
+    this.setState({
+      isSelectorMounted: true,
+      isSelectorVisible: true,
+    }, () => {
+      Animated.timing(this._selectorAnim, {
+        toValue: 1,
+        duration: SELECTOR_OPEN_DURATION_MS,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: true,
+      }).start();
+    });
+  }
+
+  _closeSelector() {
+    Animated.timing(this._selectorAnim, {
+      toValue: 0,
+      duration: SELECTOR_CLOSE_DURATION_MS,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true,
+    }).start(() => {
+      if (!this._isMounted) {
+        return;
+      }
+
+      this.setState({
+        isSelectorVisible: false,
+        isSelectorMounted: false,
+      });
+    });
+  }
+
+  _syncGeojsonStyle() {
+    if (!this.state.isReady) {
+      return;
+    }
+
+    const items = getSelectedCategoryItems(this.state.categoryItems);
+
+    const geojsonStyle = buildGeojsonStyle(
+      this.props.mapStyle,
+      getSourceUrl(this.props.isStaging),
+      items
+    );
+
+    if (!geojsonStyle || geojsonStyle === this._appliedGeojsonStyle) {
+      return;
+    }
+
+    this._appliedGeojsonStyle = geojsonStyle;
+    this._runCommand('setMapStyle', [geojsonStyle]);
+  }
+
+  render() {
+    const items = this.state.categoryItems;
+    const groupSections = createCategoryGroupSections(
+      items,
+      this.state.groupTitleByKey,
+      this.state.groupOrderedKeys
+    );
+    const hasItems = Array.isArray(items) && items.length > 0;
+    const showLayerButton = hasItems;
+    const showSelector = this.state.isSelectorMounted && hasItems;
+    const showLegendButton = hasItems;
+    const showLegend = this.state.isLegendVisible && hasItems;
+    const selectorTitle = SELECTOR_TITLE;
+    const legendTitle = LEGEND_TITLE;
+    const backdropAnimatedStyle = {
+      opacity: this._selectorAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+      }),
+    };
+    const panelAnimatedStyle = {
+      transform: [
+        {
+          translateX: this._selectorAnim.interpolate({
+            inputRange: [0, 1],
+            outputRange: [SELECTOR_DRAWER_TRANSLATE_X, 0],
+          }),
+        },
+      ],
+    };
+
+    return (
+      <React.Fragment>
+        {super.render()}
+        <LayerButton
+          show={showLayerButton}
+          isActive={this.state.isSelectorVisible}
+          onPress={this._toggleSelectorVisibility}
+        />
+        <LegendButton
+          show={showLegendButton}
+          isActive={this.state.isLegendVisible}
+          onPress={this._toggleLegendVisibility}
+        />
+        <SelectorDrawer
+          show={showSelector}
+          title={selectorTitle}
+          groupSections={groupSections}
+          expandedGroupKeys={this.state.expandedGroupKeys}
+          backdropAnimatedStyle={backdropAnimatedStyle}
+          panelAnimatedStyle={panelAnimatedStyle}
+          onClose={this._toggleSelectorVisibility}
+          onToggleGroup={this._toggleGroup}
+          onToggleGroupChecked={this._toggleGroupChecked}
+          onToggleItem={this._toggleItem}
+        />
+        <LegendPanel
+          show={showLegend}
+          title={legendTitle}
+          items={items}
+          getItemColor={(item) => resolveCategoryItemColor(item)}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+MFBanDoSo.propTypes = banDoSoPropTypes;
+MFBanDoSo.defaultProps = {
+  ...MFMapView.defaultProps,
+  isStaging: true,
+};
+
+export { MFBanDoSo };