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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, Pressable } from 'react-native';
import { getColor } from '../../styles/colors';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import ChevronDownIcon from '@carbon/icons/es/chevron--down/20';
import ChevronUpIcon from '@carbon/icons/es/chevron--up/20';
import CheckmarkIcon from '@carbon/icons/es/checkmark--outline/20';
import ErrorIcon from '@carbon/icons/es/error--outline/20';
import PendingIcon from '@carbon/icons/es/circle-dash/20';
import ActiveIcon from '@carbon/icons/es/incomplete/20';
import { Text } from '../Text';

/** Props for ProgressIndicator component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * ProgressIndicator component for rendering a step by step progress flow
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ProgressIndicator.tsx | Example code}
 */

export class ProgressIndicator extends React.Component {
  state = {
    open: false
  };
  get itemColor() {
    const {
      disabled
    } = this.props;
    return disabled ? getColor('textDisabled') : getColor('textPrimary');
  }
  get styles() {
    const {
      disabled
    } = this.props;
    return StyleSheet.create({
      wrapper: {
        borderBottomColor: getColor('borderSubtle00'),
        borderBottomWidth: 1
      },
      content: {
        paddingLeft: 64,
        paddingTop: 8,
        paddingRight: 64,
        paddingBottom: 24
      },
      action: {
        position: 'relative',
        minHeight: 48,
        padding: 13,
        paddingLeft: 14,
        paddingRight: 48,
        flexDirection: 'row'
      },
      actionText: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
      },
      statusIcon: {
        marginRight: 30
      },
      iconStyle: {
        position: 'absolute',
        top: 14,
        right: 14
      },
      mainText: {
        color: this.itemColor,
        flex: 1,
        minWidth: 100
      },
      subText: {
        color: disabled ? getColor('textDisabled') : getColor('textSecondary')
      }
    });
  }
  get accordionIcon() {
    const {
      open
    } = this.state;
    return /*#__PURE__*/_jsx(View, {
      style: this.styles.iconStyle,
      children: createIcon(open ? ChevronUpIcon : ChevronDownIcon, 20, 20, this.itemColor)
    });
  }
  get stepIcon() {
    const {
      status
    } = this.props;
    let icon = createIcon(PendingIcon, 20, 20, getColor('interactive'));
    switch (status) {
      case 'complete':
        icon = createIcon(CheckmarkIcon, 20, 20, getColor('interactive'));
        break;
      case 'in-progress':
        icon = createIcon(ActiveIcon, 20, 20, getColor('interactive'));
        break;
      case 'invalid':
        icon = createIcon(ErrorIcon, 20, 20, getColor('supportError'));
        break;
      case 'pending':
      default:
        icon = createIcon(PendingIcon, 20, 20, getColor('interactive'));
    }
    return /*#__PURE__*/_jsx(View, {
      style: this.styles.statusIcon,
      children: icon
    });
  }
  toggleDropdown = event => {
    const {
      open
    } = this.state;
    const {
      onPress
    } = this.props;
    this.setState({
      open: !open
    }, () => {
      if (typeof onPress === 'function') {
        onPress(!open, event);
      }
    });
  };
  getStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('layerActive01')
    } : undefined;
  };
  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,
      firstStep,
      subText
    } = this.props;
    const {
      open
    } = this.state;
    const finalStyle = styleReferenceBreaker(this.styles.wrapper);
    if (firstStep) {
      finalStyle.borderTopColor = getColor('borderSubtle00');
      finalStyle.borderTopWidth = 1;
    }
    return /*#__PURE__*/_jsxs(View, {
      style: styleReferenceBreaker(finalStyle, style),
      ...(componentProps || {}),
      children: [/*#__PURE__*/_jsxs(Pressable, {
        style: state => pressableFeedbackStyle(state, this.styles.action, this.getStateStyle),
        accessibilityLabel: title,
        accessibilityHint: subText,
        accessibilityRole: "togglebutton",
        onPress: this.toggleDropdown,
        disabled: disabled,
        children: [this.stepIcon, /*#__PURE__*/_jsxs(View, {
          style: this.styles.actionText,
          children: [/*#__PURE__*/_jsx(Text, {
            style: this.styles.mainText,
            text: title
          }), !!subText && /*#__PURE__*/_jsx(Text, {
            style: this.styles.subText,
            text: subText
          })]
        }), this.accordionIcon]
      }), open && /*#__PURE__*/_jsx(View, {
        style: this.styles.content,
        children: children
      })]
    });
  }
}
//# sourceMappingURL=index.js.map