@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
203 lines (200 loc) • 6.06 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProgressIndicator = 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 _3 = _interopRequireDefault(require("@carbon/icons/es/checkmark--outline/20"));
var _4 = _interopRequireDefault(require("@carbon/icons/es/error--outline/20"));
var _5 = _interopRequireDefault(require("@carbon/icons/es/circle-dash/20"));
var _6 = _interopRequireDefault(require("@carbon/icons/es/incomplete/20"));
var _Text = require("../Text");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for ProgressIndicator component */
/**
* 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}
*/
class ProgressIndicator 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() {
const {
disabled
} = this.props;
return _reactNative.StyleSheet.create({
wrapper: {
borderBottomColor: (0, _colors.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 ? (0, _colors.getColor)('textDisabled') : (0, _colors.getColor)('textSecondary')
}
});
}
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, 20, 20, this.itemColor)
});
}
get stepIcon() {
const {
status
} = this.props;
let icon = (0, _helpers.createIcon)(_5.default, 20, 20, (0, _colors.getColor)('interactive'));
switch (status) {
case 'complete':
icon = (0, _helpers.createIcon)(_3.default, 20, 20, (0, _colors.getColor)('interactive'));
break;
case 'in-progress':
icon = (0, _helpers.createIcon)(_6.default, 20, 20, (0, _colors.getColor)('interactive'));
break;
case 'invalid':
icon = (0, _helpers.createIcon)(_4.default, 20, 20, (0, _colors.getColor)('supportError'));
break;
case 'pending':
default:
icon = (0, _helpers.createIcon)(_5.default, 20, 20, (0, _colors.getColor)('interactive'));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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: (0, _colors.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 = (0, _helpers.styleReferenceBreaker)(this.styles.wrapper);
if (firstStep) {
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,
accessibilityHint: subText,
accessibilityRole: "togglebutton",
onPress: this.toggleDropdown,
disabled: disabled,
children: [this.stepIcon, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.actionText,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.mainText,
text: title
}), !!subText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.subText,
text: subText
})]
}), this.accordionIcon]
}), open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.content,
children: children
})]
});
}
}
exports.ProgressIndicator = ProgressIndicator;
//# sourceMappingURL=index.js.map