@prosperitainova/dumbo-react-native/lib/module/components/Tabs/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, Pressable, ScrollView } from 'react-native';
import { getColor } from '../../styles/colors';
import { pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import { Text } from '../Text';

/** Item to pass to Tabs */

/** Props for Tabs component */
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Tabs component for rendering tabs on the page
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tabs.tsx | Example code}
 */
export class Tabs extends React.Component {
  state = {
    currentIndex: 0
  };
  get styles() {
    const basicStyle = {
      padding: 16,
      paddingTop: 15,
      paddingBottom: 11,
      flex: 1,
      minHeight: 48,
      borderBottomWidth: 3,
      borderBottomColor: getColor('layer01')
    };
    return StyleSheet.create({
      scrollWrapper: {
        // Space for scrollbar
        paddingBottom: 16,
        flexGrow: 1
      },
      wrapper: {
        minHeight: 48,
        flexDirection: 'row',
        width: '100%'
      },
      item: {
        ...basicStyle,
        backgroundColor: getColor('layer01')
      }
    });
  }
  changeItem = (item, index) => {
    const {
      onChange
    } = this.props;
    this.setState({
      currentIndex: index
    }, () => {
      if (typeof onChange === 'function') {
        onChange(index, item);
      }
    });
  };
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('layerActive01')
    } : undefined;
  };
  getTab(item, index) {
    const {
      currentIndex
    } = this.state;
    const active = index === currentIndex;
    const finalStyle = styleReferenceBreaker(this.styles.item);
    const textStyle = {
      color: active ? getColor('textPrimary') : getColor('textSecondary')
    };
    if (item.disabled) {
      textStyle.color = getColor('textDisabled');
    }
    if (active) {
      finalStyle.borderBottomColor = getColor('borderInteractive');
    }
    return /*#__PURE__*/_jsx(Pressable, {
      disabled: item.disabled,
      onPress: () => this.changeItem(item, index),
      style: state => pressableFeedbackStyle(state, finalStyle, this.getStateStyle),
      accessibilityLabel: item.text,
      accessibilityRole: "tab",
      children: /*#__PURE__*/_jsx(Text, {
        type: active ? 'heading-compact-01' : 'body-compact-01',
        style: textStyle,
        breakMode: "tail",
        text: item.text
      })
    }, index);
  }
  componentDidUpdate(previousProps) {
    const {
      selectedIndex
    } = this.props;
    if (typeof selectedIndex === 'number' && previousProps.selectedIndex !== selectedIndex) {
      this.setState({
        currentIndex: selectedIndex
      });
    }
  }
  componentDidMount() {
    const {
      selectedIndex
    } = this.props;
    if (typeof selectedIndex === 'number') {
      this.setState({
        currentIndex: selectedIndex
      });
    }
  }
  render() {
    const {
      items,
      componentProps,
      style,
      scrollMode
    } = this.props;
    const content = (items || []).map((item, index) => this.getTab(item, index));
    if (scrollMode) {
      return /*#__PURE__*/_jsx(ScrollView, {
        contentContainerStyle: this.styles.scrollWrapper,
        bounces: false,
        horizontal: true,
        style: styleReferenceBreaker(this.styles.wrapper, style),
        accessibilityRole: "tablist",
        ...(componentProps || {}),
        children: content
      });
    }
    return /*#__PURE__*/_jsx(View, {
      style: styleReferenceBreaker(this.styles.wrapper, style),
      accessibilityRole: "tablist",
      ...(componentProps || {}),
      children: content
    });
  }
}
//# sourceMappingURL=index.js.map