@prosperitainova/dumbo-react-native/lib/commonjs/components/ContentSwitcher/index.js

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ContentSwitcher = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** An item to pass to content switcher */

/** Props for ContentSwitcher component */

/**
 * ContentSwitcher component for rendering the content switcher
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ContentSwitcher.tsx | Example code}
 */
class ContentSwitcher extends _react.default.Component {
  state = {
    currentIndex: 0
  };
  get styles() {
    const basicStyle = {
      padding: 16,
      paddingTop: 14,
      paddingBottom: 14,
      flex: 1,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      position: 'relative'
    };
    return _reactNative.StyleSheet.create({
      wrapper: {
        flexDirection: 'row'
      },
      item: {
        ...basicStyle,
        backgroundColor: 'transparent',
        borderColor: (0, _colors.getColor)('borderInverse')
      },
      selectedItem: {
        ...basicStyle,
        backgroundColor: (0, _colors.getColor)('layerSelectedInverse'),
        borderColor: (0, _colors.getColor)('layerSelectedInverse')
      },
      divider: {
        backgroundColor: (0, _colors.getColor)('borderSubtle01'),
        width: 1,
        height: 16,
        position: 'absolute',
        top: 16,
        right: 0
      }
    });
  }
  changeItem = (item, index) => {
    const {
      onChange
    } = this.props;
    this.setState({
      currentIndex: index
    }, () => {
      if (typeof onChange === 'function') {
        onChange(index, item);
      }
    });
  };
  getSwitcher(item, index) {
    const {
      currentIndex
    } = this.state;
    const {
      items
    } = this.props;
    const selected = index === currentIndex;
    const finalItem = items.length === index + 1;
    const finalStyle = (0, _helpers.styleReferenceBreaker)(selected ? this.styles.selectedItem : this.styles.item);
    const textStyle = {
      color: selected ? (0, _colors.getColor)('textInverse') : (0, _colors.getColor)('textSecondary')
    };
    if (item.disabled) {
      if (selected) {
        finalStyle.backgroundColor = (0, _colors.getColor)('buttonDisabled');
      }
      finalStyle.borderColor = (0, _colors.getColor)('buttonDisabled');
      textStyle.color = (0, _colors.getColor)('textDisabled');
    }
    if (index === 0) {
      finalStyle.borderLeftWidth = 1;
      finalStyle.borderTopLeftRadius = 4;
      finalStyle.borderBottomLeftRadius = 4;
    }
    if (index === (items || []).length - 1) {
      finalStyle.borderRightWidth = 1;
      finalStyle.borderTopRightRadius = 4;
      finalStyle.borderBottomRightRadius = 4;
    }
    const getStateStyle = state => {
      return state.pressed ? {
        backgroundColor: selected ? (0, _colors.getColor)('backgroundInverse') : (0, _colors.getColor)('backgroundActive')
      } : undefined;
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
      disabled: item.disabled,
      onPress: () => this.changeItem(item, index),
      style: state => (0, _helpers.pressableFeedbackStyle)(state, finalStyle, getStateStyle),
      accessibilityLabel: item.text,
      accessibilityRole: "menuitem",
      children: [!finalItem && !selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.divider
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
        type: item.textType || '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
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
      accessibilityRole: "menu",
      ...(componentProps || {}),
      children: (items || []).map((item, index) => this.getSwitcher(item, index))
    });
  }
}
exports.ContentSwitcher = ContentSwitcher;
//# sourceMappingURL=index.js.map