react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
194 lines • 9.18 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_native_1 = require("react-native");
var react_redux_1 = require("react-redux");
var __1 = require("../..");
var Text_1 = require("../../primitives/Text/Text");
var View_1 = require("../../primitives/View/View");
var navigation_1 = require("../../redux/reducers/navigation");
var theme_1 = require("../../utils/theme");
var Button_1 = require("../Button/Button");
var styles = function () {
var _a, _b, _c, _d, _e, _f;
return ({
dialog: {
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.4)',
justifyContent: 'center',
alignItems: 'center',
},
dataContainer: {
width: '80%',
borderRadius: (_a = {},
_a[theme_1.ios] = 14,
_a[theme_1.android] = 4,
_a),
backgroundColor: 'rgb(255,255,255)',
flexDirection: 'column',
},
title: {
marginTop: theme_1.appTheme.horizontalMargin,
marginLeft: theme_1.appTheme.horizontalMargin,
marginRight: theme_1.appTheme.horizontalMargin,
},
titleText: {
fontSize: 16,
fontWeight: '500',
},
body: {
marginTop: (_b = {},
_b[theme_1.android] = theme_1.appTheme.horizontalMargin,
_b[__1.all] = theme_1.appTheme.horizontalMargin,
_b),
marginLeft: theme_1.appTheme.horizontalMargin,
marginRight: theme_1.appTheme.horizontalMargin,
},
bodyText: {
fontSize: 16,
fontWeight: '400',
},
buttonsContainer: (_c = {
width: '100%',
flexDirection: 'row'
},
_c[theme_1.android] = {
marginTop: theme_1.appTheme.horizontalMargin,
justifyContent: 'flex-end',
marginRight: 8,
marginBottom: 8,
},
_c[theme_1.ios] = {
alignItems: "center",
},
_c),
button: (_d = {},
_d[theme_1.ios] = {
width: '50%',
paddingTop: 12,
paddingBottom: 12,
},
_d[theme_1.android] = {
elevation: 0,
paddingTop: theme_1.appTheme.defaultVerticalMargin,
paddingBottom: theme_1.appTheme.defaultVerticalMargin,
paddingLeft: theme_1.appTheme.defaultHorizontalMargin,
paddingRight: theme_1.appTheme.defaultHorizontalMargin,
},
_d),
singleButton: (_e = {},
_e[theme_1.ios] = {
width: '100%',
paddingTop: 12,
paddingBottom: 12,
},
_e[theme_1.android] = {
elevation: 0,
paddingTop: theme_1.appTheme.defaultVerticalMargin,
paddingBottom: theme_1.appTheme.defaultVerticalMargin,
paddingLeft: theme_1.appTheme.defaultHorizontalMargin,
paddingRight: theme_1.appTheme.defaultHorizontalMargin,
},
_e),
buttonLabel: (_f = {},
_f[theme_1.ios] = {
width: '100%',
fontSize: 17,
},
_f[theme_1.android] = {
fontSize: 16,
},
_f),
buttonHorizontalDivider: {
marginTop: theme_1.appTheme.horizontalMargin,
backgroundColor: '#ccc',
height: theme_1.appTheme.dividerSize,
width: '100%',
},
buttonVerticalDivider: {
backgroundColor: '#ccc',
height: '100%',
width: theme_1.appTheme.dividerSize,
}
});
};
var getTextComponent = function (value, style) {
if (typeof value === 'string') {
return React.createElement(Text_1.Text, { style: style }, value);
}
return value;
};
var CAlert = /** @class */ (function (_super) {
__extends(CAlert, _super);
function CAlert() {
return _super !== null && _super.apply(this, arguments) || this;
}
CAlert.prototype.render = function () {
var _this = this;
var _a = this.props, classes = _a.classes, alertId = _a.alertId, alerts = _a.alerts, title = _a.title, hideAlert = _a.hideAlert, leftButtonText = _a.leftButtonText, leftButtonOnPress = _a.leftButtonOnPress, rightButtonText = _a.rightButtonText, rightButtonOnPress = _a.rightButtonOnPress, styles = _a.styles, children = _a.children;
return (React.createElement(View_1.View, null, alerts
.filter(function (alert) { return alert.alertId === alertId; })
.map(function (_a, index) {
var visible = _a.visible, body = _a.body, bodyData = _a.bodyData;
return (React.createElement(react_native_1.Modal, { key: index, transparent: true, visible: visible, onRequestClose: hideAlert.bind(_this, body, alertId), animationType: 'fade' },
React.createElement(View_1.View, { style: classes.dialog },
React.createElement(View_1.View, { style: classes.dataContainer },
title &&
React.createElement(View_1.View, { style: classes.title }, getTextComponent(title, classes.titleText)),
body &&
React.createElement(View_1.View, { style: classes.body }, getTextComponent(body, classes.bodyText)),
__1.isIOS && React.createElement(View_1.View, { style: classes.buttonHorizontalDivider }),
React.createElement(View_1.View, { style: classes.buttonsContainer },
leftButtonText &&
React.createElement(Button_1.Button
// touchableStyle={!isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// style={isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// labelStyle={classes.buttonLabel}
, {
// touchableStyle={!isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// style={isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// labelStyle={classes.buttonLabel}
styles: styles, title: leftButtonText, labelColor: theme_1.appTheme.primaryColor, onPress: function () {
leftButtonOnPress && leftButtonOnPress();
hideAlert(body, alertId);
} }),
__1.isIOS && leftButtonText && rightButtonText &&
React.createElement(View_1.View, { style: classes.buttonVerticalDivider }),
rightButtonText &&
React.createElement(Button_1.Button
// touchableStyle={!isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// style={isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// labelStyle={classes.buttonLabel}
, {
// touchableStyle={!isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// style={isIOS ? null : (singleButton ? classes.singleButton : classes.button)}
// labelStyle={classes.buttonLabel}
title: rightButtonText, styles: styles, labelColor: theme_1.appTheme.primaryColor, onPress: function () {
rightButtonOnPress && rightButtonOnPress();
hideAlert(body, alertId);
} }),
children)))));
})));
};
return CAlert;
}(React.Component));
var componentName = 'Alert';
var StyledAlert = __1.createStyles(styles, componentName)(CAlert);
exports.default = StyledAlert;
exports.Alert = react_redux_1.connect(function (state) { return ({
alerts: state.navigation.alerts,
}); }, {
hideAlert: navigation_1.hideAlert
})(StyledAlert);
//# sourceMappingURL=Alert.native.js.map