@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
225 lines (221 loc) • 6.72 kB
JavaScript
"use strict";
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { getColor, shadowStyle } from '../../styles/colors';
import { createIcon, styleReferenceBreaker } from '../../helpers';
import { Text } from '../Text';
import ErrorIcon from '@carbon/icons/es/error--filled/20';
import WarningIcon from '@carbon/icons/es/warning--filled/20';
import SuccessIcon from '@carbon/icons/es/checkmark--filled/20';
import InfoIcon from '@carbon/icons/es/information--filled/20';
import CloseIcon from '@carbon/icons/es/close/20';
import { Button } from '../Button';
import { defaultText } from '../../constants/defaultText';
/** Types of notifications */
/** Props for Notification component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* Notification component for showing the accept legal terms flow
*
* Notification component is "InlineNotification" by default and can be
* used as "ToastNotification" by using multiLine flag and setting max width (follow Carbon web for Toast).
*
* Buttons (actionArea) in Notifications can require some funky color enforcing due to light theme use in non standard background colors. See the Example app for real world examples. Example usage:
*
* ```javascript
* <Button forceTheme={lowContrast ? 'light' : undefined} kind={lowContrast ? 'high-contrast' : 'high-contrast-inverse'} style={this.styles.button} onPress={this.actionCallback} text="Action" />
* ```
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Notification.tsx | Example code}
*/
export class Notification extends React.Component {
get styles() {
const {
multiLine,
dropShadow
} = this.props;
return StyleSheet.create({
wrapper: Object.assign({
borderLeftWidth: 3,
paddingLeft: 16,
flexDirection: 'row'
}, dropShadow ? shadowStyle : {}),
icon: {
paddingTop: 14,
paddingBottom: 14,
marginRight: 16
},
content: {
paddingTop: 14,
paddingBottom: 14,
paddingRight: multiLine ? 0 : 16,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
textWrapper: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
actionWrapper: {},
close: {}
});
}
get accentColor() {
const {
lowContrast,
kind
} = this.props;
if (lowContrast) {
switch (kind) {
case 'error':
return getColor('supportError');
case 'warning':
return getColor('supportWarning');
case 'success':
return getColor('supportSuccess');
case 'info':
default:
return getColor('supportInfo');
}
} else {
switch (kind) {
case 'error':
return getColor('supportErrorInverse');
case 'warning':
return getColor('supportWarningInverse');
case 'success':
return getColor('supportSuccessInverse');
case 'info':
default:
return getColor('supportInfoInverse');
}
}
}
get textColor() {
const {
lowContrast
} = this.props;
// textPrimary is listed for the text color but dark mode does not work. Forcing light for all themes
return lowContrast ? getColor('textPrimary', 'light') : getColor('textInverse');
}
get backgroundColor() {
const {
lowContrast,
kind
} = this.props;
if (lowContrast) {
switch (kind) {
case 'error':
return getColor('notificationBackgroundError');
case 'warning':
return getColor('notificationBackgroundWarning');
case 'success':
return getColor('notificationBackgroundSuccess');
case 'info':
default:
return getColor('notificationBackgroundInfo');
}
} else {
return getColor('backgroundInverse');
}
}
get icon() {
const {
kind
} = this.props;
switch (kind) {
case 'error':
return createIcon(ErrorIcon, 20, 20, this.accentColor);
case 'warning':
return createIcon(WarningIcon, 20, 20, this.accentColor);
case 'success':
return createIcon(SuccessIcon, 20, 20, this.accentColor);
case 'info':
default:
return createIcon(InfoIcon, 20, 20, this.accentColor);
}
}
get notificationContent() {
const {
title,
subTitle,
actionArea,
multiLine
} = this.props;
const textStype = {
color: this.textColor,
marginRight: 16
};
const wrapper = styleReferenceBreaker(this.styles.content);
const textWrapper = styleReferenceBreaker(this.styles.textWrapper);
const hasAction = !!actionArea;
if (multiLine) {
wrapper.flexDirection = 'column';
wrapper.flexWrap = 'nowrap';
textWrapper.flexWrap = 'nowrap';
textWrapper.flexDirection = 'column';
if (hasAction) {
textWrapper.marginBottom = 24;
}
}
return /*#__PURE__*/_jsxs(View, {
style: wrapper,
children: [/*#__PURE__*/_jsxs(View, {
style: textWrapper,
children: [/*#__PURE__*/_jsx(Text, {
style: textStype,
type: "heading-compact-01",
text: title
}), !!subTitle && /*#__PURE__*/_jsx(Text, {
style: textStype,
type: "body-compact-01",
text: subTitle
})]
}), hasAction && /*#__PURE__*/_jsx(View, {
style: this.styles.actionWrapper,
children: actionArea
})]
});
}
get dismissArea() {
const {
onDismiss,
onDismissText
} = this.props;
if (typeof onDismiss === 'function') {
return /*#__PURE__*/_jsx(View, {
style: this.styles.close,
children: /*#__PURE__*/_jsx(Button, {
kind: "ghost",
overrideColor: this.textColor,
iconOnlyMode: true,
onPress: onDismiss,
text: onDismissText || defaultText.close,
icon: CloseIcon
})
});
}
return null;
}
render() {
const {
componentProps,
style
} = this.props;
const finalStyle = styleReferenceBreaker(this.styles.wrapper);
finalStyle.backgroundColor = this.backgroundColor;
finalStyle.borderLeftColor = this.accentColor;
return /*#__PURE__*/_jsxs(View, {
style: styleReferenceBreaker(finalStyle, style),
accessibilityRole: "alert",
...(componentProps || {}),
children: [/*#__PURE__*/_jsx(View, {
style: this.styles.icon,
children: this.icon
}), this.notificationContent, this.dismissArea]
});
}
}
//# sourceMappingURL=index.js.map