react-web-native-sketch/dist/src/nativeComponents/Button/Button.native.js

[TODO: We need an overview of how this can be used via npm vs as a local package]

"use strict";
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 __());
    };
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var redux_1 = require("redux");
var __1 = require("../..");
var platform_1 = require("../../primitives/platform/platform");
var theme_1 = require("../../utils/theme");
var styles = function () {
    var _a, _b, _c;
    return ({
        button: {
            borderRadius: 2,
            flexDirection: 'row',
            padding: 14,
            justifyContent: 'center',
            alignItems: 'center',
        },
        buttonRaised: (_a = {},
            _a[theme_1.android] = {
                elevation: 4,
            },
            _a),
        disabledView: (_b = {
                backgroundColor: '#a1a1a1'
            },
            _b[theme_1.android] = {
                elevation: 0,
            },
            _b),
        disabledText: {
            color: '#cdcdcd',
        },
        primaryView: {
            backgroundColor: theme_1.appTheme.primaryColor,
        },
        primaryText: {
            color: theme_1.appTheme.primaryTextColor,
        },
        text: {
            textAlign: 'center',
            fontWeight: '500',
            fontSize: 14,
        },
        shadowedButton: (_c = {},
            _c[theme_1.android] = {},
            _c[theme_1.all] = {
                shadowColor: '#000',
                // shadowOffset: {
                //     width: 0,
                //     height: 2
                // },
                shadowOpacity: 0.2,
                shadowRadius: 3,
            },
            _c),
        iconStyle: {
            width: 24,
            height: 24,
            marginLeft: 16,
            marginRight: 16,
        }
    });
};
var CButton = /** @class */ (function (_super) {
    __extends(CButton, _super);
    function CButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CButton.prototype.render = function () {
        var _a = this.props, children = _a.children, classes = _a.classes, disabled = _a.disabled, iconLeft = _a.iconLeft, iconRight = _a.iconRight, onPress = _a.onPress, primary = _a.primary, raised = _a.raised, styles = _a.styles, title = _a.title, backgroundColor = _a.backgroundColor, labelColor = _a.labelColor;
        var buttonStyle = (styles && styles.root) || {}, labelStyle = (styles && styles.label) || {};
        // if (backgroundColor) {
        //     buttonStyle.backgroundColor = backgroundColor;
        // }
        // if (labelColor) {
        //     labelStyle.color = labelColor;
        // }
        var containerStyle = [
            classes.button,
            buttonStyle,
            !!backgroundColor ? { backgroundColor: backgroundColor } : {},
        ];
        // use TouchableComponent for Ripple effect
        return (React.createElement(__1.Touchable, __assign({ disabled: disabled, activeOpacity: 0.3, onPress: onPress, underlayColor: 'transparent', style: [
                raised && classes.buttonRaised,
                disabled && classes.disabledView,
                raised && classes.shadowedButton,
                platform_1.isIOS && primary && classes.primaryView
            ].concat((platform_1.isIOS ? containerStyle : [])) }, __1.getTestProps(this.props.testId)),
            React.createElement(__1.View, { style: platform_1.isIOS ? undefined : [containerStyle, primary && classes.primaryView] },
                iconLeft &&
                    React.createElement(__1.Image, { style: [classes.iconStyle, styles && styles.iconLeft], source: iconLeft }),
                !!title &&
                    React.createElement(__1.Text, { style: [
                            classes.text,
                            primary && classes.primaryText,
                            disabled && classes.disabledText,
                            labelStyle,
                            !!labelColor ? { color: labelColor } : {}
                        ] }, title),
                iconRight &&
                    React.createElement(__1.Image, { style: [classes.iconStyle, styles && styles.iconRight], source: iconRight }),
                children)));
    };
    return CButton;
}(React.PureComponent));
var componentName = 'Button';
exports.Button = redux_1.compose(__1.createStyles(styles, componentName))(CButton);
//# sourceMappingURL=Button.native.js.map