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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Accordion = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _ = _interopRequireDefault(require("@carbon/icons/es/chevron--down/20"));
var _2 = _interopRequireDefault(require("@carbon/icons/es/chevron--up/20"));
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for Accordion component */

/**
 * Accordion component for showing the accept legal terms flow
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Accordion.tsx | Example code}
 */
class Accordion extends _react.default.Component {
  state = {
    open: false
  };
  get itemColor() {
    const {
      disabled
    } = this.props;
    return disabled ? (0, _colors.getColor)('textDisabled') : (0, _colors.getColor)('textPrimary');
  }
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        borderBottomColor: (0, _colors.getColor)('borderSubtle00'),
        borderBottomWidth: 1
      },
      content: {
        padding: 16,
        paddingTop: 8,
        paddingRight: 64,
        paddingBottom: 24
      },
      action: {
        position: 'relative',
        minHeight: 48,
        padding: 13,
        paddingLeft: 16,
        paddingRight: 50
      },
      iconStyle: {
        position: 'absolute',
        top: 12,
        right: 12
      },
      textItem: {
        flex: 1,
        color: this.itemColor
      }
    });
  }
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: (0, _colors.getColor)('layerActive01')
    } : undefined;
  };
  get accordionIcon() {
    const {
      open
    } = this.state;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: this.styles.iconStyle,
      children: (0, _helpers.createIcon)(open ? _2.default : _.default, 22, 22, this.itemColor)
    });
  }
  toggleDropdown = event => {
    const {
      open
    } = this.state;
    const {
      onPress
    } = this.props;
    this.setState({
      open: !open
    }, () => {
      if (typeof onPress === 'function') {
        onPress(!open, event);
      }
    });
  };
  componentDidUpdate(previosuProps) {
    const {
      open
    } = this.props;
    if (open !== previosuProps.open && typeof open === 'boolean') {
      this.setState({
        open: open
      });
    }
  }
  componentDidMount() {
    const {
      open
    } = this.props;
    if (open) {
      this.setState({
        open: true
      });
    }
  }
  render() {
    const {
      componentProps,
      style,
      disabled,
      title,
      children,
      firstAccordion,
      textBreakMode
    } = this.props;
    const {
      open
    } = this.state;
    const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper);
    if (firstAccordion) {
      finalStyle.borderTopColor = (0, _colors.getColor)('borderSubtle00');
      finalStyle.borderTopWidth = 1;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(finalStyle, style),
      ...(componentProps || {}),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
        style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.action, this.getStateStyle),
        accessibilityLabel: title,
        accessibilityRole: "togglebutton",
        onPress: this.toggleDropdown,
        disabled: disabled,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          style: this.styles.textItem,
          text: title,
          breakMode: textBreakMode
        }), this.accordionIcon]
      }), open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.content,
        children: children
      })]
    });
  }
}
exports.Accordion = Accordion;
//# sourceMappingURL=index.js.map