react-web-native-sketch/dist/src/nativeComponents/Button/Button.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 web_1 = require("../../utils/web");
var __1 = require("../../");
var colorManipulator_1 = require("@material-ui/core/styles/colorManipulator");
exports.fade = colorManipulator_1.fade;
var styles = function () { return ({
    container: {
        display: 'flex',
        padding: '8px 16px',
        minWidth: 64,
        minHeight: 36,
        boxSizing: 'border-box',
        // fontFamily: appTheme.fontFamily,
        fontWeight: '500',
        borderRadius: 4,
        cursor: 'pointer',
        border: 0,
        outline: 'none',
        position: 'relative',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'inherit',
        fontSize: __1.appTheme.fontSizeM,
        '&:hover': {
            opacity: 0.75,
        },
    }
}); };
var getUpdatedRoot = function (primary, backgroundColor, labelColor) {
    var root = {};
    if (backgroundColor) {
        // root = {
        //     backgroundColor,
        //     // TODO this doesn't work when set in inline style, it must be used with classnames;
        //     // also we cannot use inline styles to set backgroundColor and then use classnames to set hover color
        //     // https://stackoverflow.com/a/48829870/1651296
        //     // I think we should use JSS to generate classnames from the auto generated inline style
        //     '&:hover': {
        //         backgroundColor: `${fade('#f00', 0.12)} !important`,
        //     }
        // }
    }
    root.backgroundColor = backgroundColor;
    root.color = labelColor;
    if (primary) {
        root.backgroundColor = backgroundColor || __1.appTheme.primaryColor;
        root.color = labelColor || __1.appTheme.primaryTextColor;
    }
    root.textTransform = 'none';
    return root;
};
var CButton = /** @class */ (function (_super) {
    __extends(CButton, _super);
    function CButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CButton.prototype.onClick = function (ev) {
        var _a = this.props, onPress = _a.onPress, href = _a.href;
        if (!!onPress) {
            onPress(ev);
        }
        if (!!href) {
            window.location.assign(href);
        }
    };
    CButton.prototype.render = function () {
        var _this = this;
        var _a = this.props, children = _a.children, disabled = _a.disabled, iconLeft = _a.iconLeft, iconRight = _a.iconRight, primary = _a.primary, styles = _a.styles, title = _a.title, backgroundColor = _a.backgroundColor, labelColor = _a.labelColor, classes = _a.classes;
        var buttonStyle = styles || {};
        return (React.createElement("button", __assign({}, web_1.getStyleProps([
            classes.container,
            buttonStyle.root,
            getUpdatedRoot(primary, backgroundColor, labelColor)
        ]), { disabled: disabled, onClick: function (ev) { return _this.onClick(ev); } }, __1.getTestProps(this.props.testId)),
            iconLeft &&
                React.createElement(__1.Image, { style: [styles && styles.iconLeft], source: iconLeft }),
            title || null,
            iconRight &&
                React.createElement(__1.Image, { style: [styles && styles.iconRight], source: iconRight }),
            children));
    };
    return CButton;
}(React.PureComponent));
exports.Button = __1.createStyles(styles, 'Button')(CButton);
//# sourceMappingURL=Button.js.map