@skbkontur/ui-kit/lib/components/Button/ButtonView.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var styled_components_1 = tslib_1.__importDefault(require("../../lib/styled-components"));
var Clickable_1 = tslib_1.__importDefault(require("../internal/Clickable"));
var focus_visible_selector_1 = require("../internal/focus-visible-selector");
var useTheme = function (_a) {
    var theme = _a.theme, _b = _a.use, use = _b === void 0 ? 'default' : _b;
    return theme.button[use];
};
var useProp = function (prop, state) { return function (props) {
    if (useTheme(props)) {
        if (state) {
            return useTheme(props)[state][prop];
        }
        return useTheme(props).default[prop];
    }
    return;
}; };
var sizeTheme = function (_a) {
    var theme = _a.theme, _b = _a.size, size = _b === void 0 ? 'small' : _b;
    return theme.button[size];
};
var sizeProp = function (prop) { return function (props) {
    return sizeTheme(props)[prop];
}; };
exports.Caption = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n"])));
exports.ButtonView = Clickable_1.default.extend(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: 0;\n  margin: 0;\n  background: ", ";\n  color: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  height: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n\n  &:hover {\n    background: ", ";\n    box-shadow: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    ", " {\n      transform: translateY(1px);\n    }\n    background: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    border: ", ";\n  }\n\n  ", " {\n    box-shadow: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: 0;\n  margin: 0;\n  background: ", ";\n  color: ", ";\n  box-shadow: ", ";\n  border: ", ";\n  height: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n\n  &::-moz-focus-inner {\n    border: 0;\n    padding: 0;\n  }\n\n  &:hover {\n    background: ", ";\n    box-shadow: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    ", " {\n      transform: translateY(1px);\n    }\n    background: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    border: ", ";\n  }\n\n  ", " {\n    box-shadow: ", ";\n    border: ", ";\n    color: ", ";\n  }\n\n  ",
    ";\n"])), useProp('background'), useProp('color'), useProp('box-shadow'), useProp('border'), sizeProp('height'), sizeProp('paddingHorizontal'), sizeProp('paddingHorizontal'), sizeProp('fontSize'), sizeProp('borderRadius'), useProp('background', 'hover'), useProp('box-shadow', 'hover'), useProp('border', 'hover'), useProp('color', 'hover'), exports.Caption, useProp('background', 'active'), useProp('color', 'active'), useProp('box-shadow', 'active'), useProp('border', 'active'), focus_visible_selector_1.FocusVisible, useProp('box-shadow', 'focus'), useProp('border', 'focus'), useProp('color', 'focus'), styled_components_1.isTruthyProp('disabled')(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    border: ", ";\n    pointer-events: none;\n  "], ["\n    color: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    border: ", ";\n    pointer-events: none;\n  "])), useProp('color', 'disabled'), useProp('background', 'disabled'), useProp('box-shadow', 'disabled'), useProp('border', 'disabled')));
var templateObject_1, templateObject_3, templateObject_2;
//# sourceMappingURL=ButtonView.js.map