@dokuhero/react-native-components
Version:
Sets of React Native components that works with dokuhero/react-native-theme and react-i18next
238 lines • 8.52 kB
JavaScript
import * as tslib_1 from "tslib";
import { withLocaleClass } from '@dokuhero/react-18n-ts-helper';
import { withThemeClass } from '@dokuhero/react-native-theme';
import React from 'react';
import { Modal, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import { Utils } from '../utils';
import { ButtonGroup } from './ButtonGroup';
import { Text } from './Text';
var Dialog = /** @class */ (function (_super) {
tslib_1.__extends(Dialog, _super);
function Dialog(props) {
var _this = _super.call(this, props) || this;
_this.state = {
visible: props.visible
};
_this.hide = _this.hide.bind(_this);
return _this;
}
Dialog.getDerivedStateFromProps = function (props, state) {
if (props.visible === state.visible) {
return null;
}
return {
visible: props.visible
};
};
Dialog.prototype.render = function () {
var visible = this.state.visible;
var _a = this.props, title = _a.title, children = _a.children, theme = _a.theme, onShow = _a.onShow, onDismiss = _a.onDismiss, titleStyle = _a.titleStyle, hideOnBackgroundPress = _a.hideOnBackgroundPress;
return (<Modal transparent visible={visible} onRequestClose={hideOnBackgroundPress ? this.hide : function () { return false; }} onShow={onShow} onDismiss={onDismiss}>
<TouchableWithoutFeedback onPress={hideOnBackgroundPress ? this.hide : function () { return false; }}>
<View style={{
flex: 1,
backgroundColor: theme.color.semiTransparent,
justifyContent: 'center'
}}>
<TouchableWithoutFeedback onPress={function () { return false; }}>
<View style={{
backgroundColor: theme.color.dark,
borderRadius: 10,
borderWidth: 0,
marginHorizontal: 15,
paddingVertical: 15
}}>
{title && (<View style={{
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
height: 30
}}>
<Text style={[
{ textAlign: 'center', color: theme.color.white },
titleStyle
]}>
{Utils.toUpper(title)}
</Text>
</View>)}
{children}
<View style={styles.buttonContainer}>
{this.renderButtons()}
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>);
};
Dialog.prototype.renderButtons = function () {
var _a = this.props, kind = _a.kind, onPress = _a.onPress, t = _a.t;
var buttons = this.props.buttons;
switch (kind) {
case 'OK':
buttons = [
{
onPress: function () { return onPress(0); },
title: t('ok'),
icon: {
name: 'check',
type: 'feather'
}
}
];
break;
case 'OKCancel':
buttons = [
{
onPress: function () { return onPress(0); },
title: t('ok'),
icon: {
name: 'check',
type: 'feather'
}
},
{
onPress: function () { return onPress(1); },
title: t('cancel'),
icon: {
name: 'x',
type: 'feather'
}
}
];
break;
case 'YesNo':
buttons = [
{
onPress: function () { return onPress(0); },
title: t('yes'),
icon: {
name: 'check',
type: 'feather'
}
},
{
onPress: function () { return onPress(1); },
title: t('no'),
icon: {
name: 'slash',
type: 'feather'
}
}
];
break;
case 'YesNoCancel':
buttons = [
{
onPress: function () { return onPress(0); },
title: t('yes'),
icon: {
name: 'check',
type: 'feather'
}
},
{
onPress: function () { return onPress(1); },
title: t('no'),
icon: {
name: 'slash',
type: 'feather'
}
},
{
onPress: function () { return onPress(2); },
title: t('cancel'),
icon: {
name: 'x',
type: 'feather'
}
}
];
break;
case 'SaveCancel':
buttons = [
{
onPress: function () { return onPress(0); },
title: t('save'),
icon: {
name: 'check',
type: 'feather'
}
},
{
onPress: function () { return onPress(1); },
title: t('cancel'),
icon: {
name: 'x',
type: 'feather'
}
}
];
break;
case 'SaveDeleteCancel':
buttons = [
{
onPress: function () { return onPress(0); },
title: t('save'),
icon: {
name: 'check',
type: 'feather'
}
},
{
onPress: function () { return onPress(1); },
title: t('delete'),
icon: {
name: 'trash',
type: 'feather'
}
},
{
onPress: function () { return onPress(2); },
title: t('cancel'),
icon: {
name: 'x',
type: 'feather'
}
}
];
break;
}
if (!buttons) {
throw new Error('Custom dialog must have buttons properties!');
}
return <ButtonGroup buttons={buttons}/>;
};
Dialog.prototype.hide = function () {
this.setState({ visible: false });
};
Dialog.defaultProps = {
hideOnBackgroundPress: true,
visible: false
};
Dialog = tslib_1.__decorate([
withLocaleClass('common'),
withThemeClass(),
tslib_1.__metadata("design:paramtypes", [Object])
], Dialog);
return Dialog;
}(React.Component));
export { Dialog };
var styles = StyleSheet.create({
textContainer: {
marginBottom: 10
},
buttonContainer: {
flexDirection: 'row',
paddingLeft: 10,
paddingRight: 10,
marginTop: 5
},
button: {
flex: 1,
marginLeft: 0,
marginRight: 0,
padding: 0
}
});
//# sourceMappingURL=Dialog.js.map