@niku/react-native-dropdown-select/lib/module/DropdownOptionGroup/index.js

A Dropdown select component for React Native

import React from 'react';
import { FlatList, Text, TouchableOpacity, View } from 'react-native';
import OptionItem from '../OptionItem';
import { getRenderComponent, isDropdownOptionItem } from '../utils';
import { styles } from './styles';

const DropdownOptionGroup = ({
  group,
  compareOption,
  optionProps,
  onOptionPress,
  optionComponent,
  renderOption,
  selectedOption,
  deep = 1,
  padding = 8
}) => {
  const renderItem = React.useCallback(({
    item: option
  }) => {
    return renderOptionItemOrGroup({ ...optionProps,
      style: [optionProps.style, {
        paddingLeft: (deep + 1) * padding
      }],
      selectedOption,
      renderOption,
      optionComponent,
      selectOption: onOptionPress,
      option,
      compareOption,
      deep: deep + 1,
      optionGroupPadding: padding
    });
  }, [optionProps, selectedOption, renderOption, onOptionPress, deep, padding]);
  const renderHeader = React.useCallback(() => {
    return /*#__PURE__*/React.createElement(View, {
      style: {
        paddingLeft: deep * padding
      }
    }, typeof group.label === 'string' ? /*#__PURE__*/React.createElement(Text, {
      numberOfLines: 1,
      style: [styles.title]
    }, group.label) : group.label);
  }, [group, deep, padding]);
  return /*#__PURE__*/React.createElement(FlatList, {
    data: group.options,
    renderItem: renderItem,
    keyExtractor: (option, index) => isDropdownOptionItem(option) ? option.value : (typeof option.label === 'string' ? option.label : index) + '-' + option.options.length,
    ListHeaderComponent: renderHeader
  });
};

export default DropdownOptionGroup;
export function renderOptionItemOrGroup({
  compareOption,
  selectedOption,
  renderOption,
  optionComponent,
  style,
  disabledStyle,
  activeStyle,
  labelStyle,
  disabledLabelStyle,
  activeLabelStyle,
  option,
  selectOption,
  optionGroupComponent,
  renderOptionGroup,
  deep,
  optionGroupPadding
}) {
  if (isDropdownOptionItem(option)) {
    const optionProps = {
      option: option,
      active: selectedOption ? compareOption(selectedOption, option) : false,
      style,
      activeStyle,
      labelStyle,
      activeLabelStyle,
      disabledLabelStyle,
      disabledStyle
    };

    const optionPressed = () => {
      selectOption(option);
    };

    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      disabled: option.disabled,
      onPress: optionPressed
    }, getRenderComponent(optionProps, optionComponent, renderOption) || /*#__PURE__*/React.createElement(OptionItem, optionProps));
  } else {
    const optionProps = {
      style,
      activeStyle,
      labelStyle,
      activeLabelStyle,
      disabledStyle,
      disabledLabelStyle
    };
    console.log({
      deep
    });
    const groupProps = {
      group: option,
      optionProps,
      selectedOption,
      compareOption,
      optionComponent,
      renderOption,
      onOptionPress: selectOption,
      padding: optionGroupPadding
    };
    return getRenderComponent(groupProps, optionGroupComponent, renderOptionGroup) || /*#__PURE__*/React.createElement(DropdownOptionGroup, groupProps);
  }
}
//# sourceMappingURL=index.js.map