Structure component for React Native

Installation

yarn add react-native-structures

Basic usage example

Explore props for Structure

import React, { useState, useEffect, useMemo } from 'react';
import { Text, View, Dimensions, ScrollView, RefreshControl, ActivityIndicator } from 'react-native';
// ... (other imports)

import Structure from 'react-native-structures'
import {ExpandButtonProps} from 'react-native-structures/Structure.types'

import { TouchableOpacity } from 'react-native';
import PartnerItem, { Partner } from './components/PartnerItem/PartnerItem';
import Minus from '../../../../assets/images/Structures/minus.svg';
import Plus from '../../../../assets/images/Structures/plus.svg';
// ... (other imports)

const MainStructures = ({}) => {
  // ... (other state and useEffect)

  const renderExpandButton = ({ isExpanded, onPress, isLoading }: ExpandButtonProps) => {
    if (isLoading) {
      return <ActivityIndicator style={{ width: 32, height: 32 }} />;
    }
    return (
      <TouchableOpacity
        style={{
          backgroundColor: isExpanded ? 'white' : 'black',
          borderWidth: 1,
          borderColor: isExpanded ? 'black' : 'transparent',
          borderRadius: 100,
          width: 32,
          height: 32,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onPress={onPress}
      >
        {isExpanded ? <Minus /> : <Plus />}
      </TouchableOpacity>
    );
  };

  const getPartners = async (item: Partner) => {
   //fetch data
   return data;
  };

  const navigateToPartner = (partner: Partner) => {
    navigation.navigate('PartnerDetails', {
      // ... (other navigation parameters)
    });
  };

  return (
    <View style={styles.mainContainer}>
      <Structure<Partner>
        onItemPress={navigateToPartner}
        onExpanded={onPartnerExpanded}
        onCollapsed={onPartnerCollapsed}
        separator={<View style={{ width: '100%', height: 1, backgroundColor: '#E6E6E6' }} />}
        data={partners}
        checkIfItemExpandale={item => item.descendants_count > 0}
        renderItem={item => <PartnerItem partner={item} />}
        itemContainerStyle={{ minWidth: width - 30 }}
        style={{ padding: 10 }}
        childrenLeftPadding={32}
        horizontalLineProps={{ width: 12 }}
        verticalLineProps={{ offsetX: 19 }}
        expandButtonContainerStyle={{ backgroundColor: 'white', padding: 4, paddingRight: 16 }}
        getChildren={getPartners}
        renderExpandButton={renderExpandButton}
      />
    </View>
  );
};

export default MainStructures;

StructureItem usage

StructureItem element can be used separately without using the Structure. For example, when there is a need to have one root element with the possibility of predefined child elements.

Explore props for Structure item

import React from 'react';
import { View, Text } from 'react-native';
import {StructureItem} from 'react-native-structures/StructureItem'; // Adjust the import path based on your project structure

// Define a type for the data that will be used in the example
type ItemType = {
  id: number;
  name: string;
  children?: ItemType[];
};

const ExampleComponent = () => {
  // Example data
  const exampleItem: ItemType = {
    id: 1,
    name: 'Parent Item',
    children: [
      { id: 2, name: 'Child 1' },
      { id: 3, name: 'Child 2' },
      // Add more children as needed
    ],
  };

  // Example props for StructureItem
  const structureItemProps = {
    item: exampleItem,
    depth: 1,
    separator: <View style={{ height: 1, backgroundColor: 'gray' }} />, // Example separator
    onItemPress: (item: ItemType) => {
      // Handle item press
      console.log('Item Pressed:', item);
    },
    onExpanded: (item: ItemType) => {
      // Handle item expanded
      console.log('Item Expanded:', item);
    },
    onCollapsed: (item: ItemType) => {
      // Handle item collapsed
      console.log('Item Collapsed:', item);
    },
    renderExpandButton: ({ isExpanded, onPress }) => (
      <View
        style={{
          backgroundColor: isExpanded ? 'green' : 'red',
          width: 20,
          height: 20,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onTouchEnd={onPress}
      >
        <Text>{isExpanded ? '-' : '+'}</Text>
      </View>
    ),
    // Add other props as needed
  };

  return (
    <StructureItem<ItemType> {...structureItemProps} />
  );
};

export default ExampleComponent;

Structure component props

| Property | Description | Type | Required | |--------------------------|---------------------------------------------------------------------------------------------------|--------------------------------|----------| | data | An array of objects representing the hierarchical data structure to be rendered. | T[] | Yes | | onItemPress | Callback function triggered when an item is pressed. Receives the clicked item as an argument. | (item: T) => void | No | | separator | ReactNode for rendering a separator between items in the structure. | ReactNode | No | | onExpanded | Callback function triggered when an item is expanded. Receives the expanded item as an argument. | (item: T) => void | No | | onCollapsed | Callback function triggered when an item is collapsed. Receives the collapsed item as an argument.| (item: T) => void | No | | renderExpandButton | Function to customize the rendering of expand/collapse button for each item. Receives the item. | (item: T) => ReactNode | No | | itemContainerStyle | Style object applied to the container of each item in the structure. | StyleProp<ViewStyle> | No | | renderItem | Function to customize the rendering of each item in the structure. Receives the item. | (item: T) => ReactNode | No | | childrenLeftPadding | Optional (but recommended) left padding applied to the children of each item in the structure. | number | No | | horizontalLineProps | Props to customize the horizontal line connecting parent and child items. | object | No | | verticalLineProps | Props to customize the vertical line connecting items at the same level. | object | No | | childrenContainerStyle | Style object applied to the container of children items for each parent. | StyleProp<ViewStyle> | No | | expandButtonContainerStyle | Style object applied to the container of the expand/collapse button for each item. | StyleProp<ViewStyle> | No | | checkIfItemExpandable | Function to determine if an item can be expanded. Receives the item. | (item: T) => boolean | No | | withoutHorizontalLine | Boolean flag to control whether to display horizontal lines connecting parent and child items. | boolean | No | | getChildren | Function to retrieve the children of a given item. Receives the item. | (item: T) => T[] | No |

StructureItem component props

| Property | Type | Description | Required | | -------------------------- | --------------------------- | -------------------------------------------- | -------- | | item | T | Data item to render. | Yes | | expanded | boolean | Initial expansion state. | No | | children | T[] | Array of child items. | No | | separator | JSX.Element | Separator element between items. | No | | containerStyle | StyleProp<ViewStyle> | Style for the container view. | No | | expandButtonContainerStyle| StyleProp<ViewStyle> | Style for the expand button container view. | No | | childrenContainerStyle | StyleProp<ViewStyle> | Style for the children container view. | No | | childrenLeftPadding | number | Left padding for children. | Yes | | withoutHorizontalLine | boolean | If true, no horizontal line will be displayed. | No | | horizontalLineProps | HorizontalLineProps | Props for the horizontal line component. | No | | verticalLineProps | VerticalLineProps | Props for the vertical line component. | No | | depth | number | Depth of the item in the structure. | Yes | | onPress | (item: T) => void | Callback when the item is pressed. | Yes | | onExpanded | (children: number) => void| Callback when item is expanded. | No | | onCollapsed | (children: number) => void| Callback when item is collapsed. | No | | renderItem | (item: T) => ReactNode | Function to render the item. | Yes | | renderExpandButton | (props: ExpandButtonProps) => ReactNode | Function to render the expand button. | Yes | | checkIfItemExpandale | (item: T) => boolean | Function to check if the item is expandable. | Yes | | getChildren | (item: T) => Promise<T[]> | Async function to get children of the item. | No |