@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
288 lines (285 loc) • 9.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ActionSheet = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _helpers = require("../../helpers");
var _constants = require("../../constants/constants");
var _colors = require("../../styles/colors");
var _Overlay = require("../Overlay");
var _Text = require("../Text");
var _zIndex = require("../../styles/z-index");
var _SafeAreaWrapper = require("../SafeAreaWrapper");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Item to pass to ActionSheet */
/** Props for ActionSheet component */
/**
* ActionSheet component for the choice option at the bottom of a screen.
* Render a popup (from bottom) to show menu options for when non Yes/No questions are needed.
* Uses the OS ActionSheet if supported. Otherwise renders a custom one with similar styling.
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ActionSheet.tsx | Example code}
*/
class ActionSheet extends _react.default.Component {
get styles() {
const {
fullBleed
} = this.props;
return _reactNative.StyleSheet.create({
modal: {
zIndex: _zIndex.zIndexes.actionSheet
},
safeAreaWrapper: {
position: 'relative',
flexGrow: 1,
flexDirection: 'row-reverse',
justifyContent: 'center'
},
containerWrapper: {
flexGrow: 1,
flexDirection: 'row-reverse',
margin: fullBleed ? 0 : 16,
maxWidth: 480
},
blurBackground: {
zIndex: _zIndex.zIndexes.behind,
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
flex: 1
},
wrapper: {
backgroundColor: (0, _colors.getColor)('layer01'),
alignSelf: 'flex-end',
width: '100%'
},
textArea: {
padding: 16,
paddingBottom: 0,
paddingTop: 22,
borderBottomColor: (0, _colors.getColor)('borderSubtle01'),
borderBottomWidth: 1
},
titleNoBody: {
marginBottom: 8
},
body: {
marginBottom: 8,
color: (0, _colors.getColor)('textHelper')
},
optionsWrapper: {
maxHeight: '50%'
},
options: {
flexGrow: 0
},
option: {
padding: 13,
paddingLeft: 16,
flexDirection: 'row'
},
cancelButton: {
backgroundColor: (0, _colors.getColor)('buttonSecondary'),
padding: 13,
paddingLeft: 16
},
cancelButtonText: {
color: (0, _colors.getColor)('textOnColor')
},
backgroundPress: {
zIndex: _zIndex.zIndexes.behind,
position: 'absolute',
top: 0,
right: 0,
left: 0,
bottom: 0,
flex: 1
},
iconStyle: {
width: 20,
height: 20,
paddingTop: 1
},
iconImageStyle: {
width: 20,
height: 20
},
textStyle: {
flex: 1
}
});
}
handleSystemTrigger = () => {
const {
open,
title,
body,
items,
cancelButtonIndex
} = this.props;
const options = items.filter(item => !item.hidden);
const dangerIndex = options.findIndex(item => item.danger);
if (open) {
_reactNative.ActionSheetIOS.showActionSheetWithOptions({
destructiveButtonIndex: dangerIndex > -1 ? dangerIndex : undefined,
options: options.map(item => item.text),
title: title,
message: body,
cancelButtonIndex: cancelButtonIndex
}, index => {
const action = options[index];
if (action) {
action.onPress();
}
});
}
};
get useSystemActionSheet() {
const {
forceCustomActionSheet
} = this.props;
return _reactNative.Platform.OS === 'ios' && !forceCustomActionSheet;
}
getStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('buttonSecondaryActive')
} : undefined;
};
getCancelStateStyle = state => {
return state.pressed ? {
backgroundColor: (0, _colors.getColor)('layerActive01')
} : undefined;
};
get customActionSheet() {
const {
open,
title,
body,
items,
cancelButtonIndex
} = this.props;
const options = items.filter(item => !item.hidden);
const cancel = options.splice(cancelButtonIndex || 0, 1)[0] || {
text: '',
onPress: () => {}
};
if (!open) {
return null;
}
const invisibleButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
onPress: cancel.onPress,
style: this.styles.backgroundPress,
accessible: false,
accessibilityRole: "none",
accessibilityLabel: cancel.text
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
style: this.styles.modal,
supportedOrientations: _constants.modalPresentations,
transparent: true,
onRequestClose: cancel.onPress,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
style: this.styles.blurBackground
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SafeAreaWrapper.SafeAreaWrapper, {
style: this.styles.safeAreaWrapper,
children: [invisibleButton, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.containerWrapper,
children: [invisibleButton, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.wrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.textArea,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: body ? undefined : this.styles.titleNoBody,
type: "heading-compact-01",
text: title
}), !!body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.body,
type: "helper-text-01",
text: body
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.optionsWrapper,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
bounces: false,
style: this.styles.options,
children: options.map((item, index) => {
const finalStyle = (0, _helpers.styleReferenceBreaker)(this.styles.option);
const lastItem = index === options.length - 1;
let imageItem;
if (item.icon?.icon) {
imageItem = (0, _helpers.createIcon)(item.icon.icon, 20, 20);
} else if (item.icon?.image) {
imageItem = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
style: this.styles.iconImageStyle,
resizeMode: "contain",
source: item.icon.image
});
}
if (item.danger) {
finalStyle.backgroundColor = (0, _colors.getColor)('buttonDangerPrimary');
}
if (item.divider && !lastItem) {
finalStyle.borderBottomColor = finalStyle.borderBottomColor || (0, _colors.getColor)('borderSubtle00');
finalStyle.borderBottomWidth = finalStyle.borderBottomWidth || 1;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
style: state => (0, _helpers.pressableFeedbackStyle)(state, finalStyle, this.getStateStyle),
accessibilityLabel: item.text,
onPress: () => {
item.onPress();
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.textStyle,
text: item.text
}), !!imageItem && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.iconStyle,
children: imageItem
})]
}, index);
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.cancelButton, this.getCancelStateStyle),
accessibilityLabel: cancel.text,
onPress: () => {
cancel.onPress();
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
style: this.styles.cancelButtonText,
text: cancel.text
})
})]
})]
})]
})]
});
}
componentDidUpdate(previousProps) {
const {
open
} = this.props;
if (previousProps.open !== open) {
if (this.useSystemActionSheet) {
this.handleSystemTrigger();
}
}
}
componentDidMount() {
if (this.useSystemActionSheet) {
this.handleSystemTrigger();
}
}
render() {
if (!this.useSystemActionSheet) {
return this.customActionSheet;
}
return null;
}
}
exports.ActionSheet = ActionSheet;
//# sourceMappingURL=index.js.map