@netdata/netdata-ui/dist/components/button/styled.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports.StyledButton = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _polished = require("polished");
var _theme = require("../../theme");
var _margin = _interopRequireDefault(require("../../mixins/margin"));
var _padding = _interopRequireDefault(require("../../mixins/padding"));
var _round = _interopRequireDefault(require("../../mixins/round"));
var _alignSelf = _interopRequireDefault(require("../../mixins/alignSelf"));
var _textTransform = _interopRequireDefault(require("../../mixins/textTransform"));
var _position = _interopRequireDefault(require("../../mixins/position"));
var _styledSystem = require("styled-system");
var _constants = require("./constants");
var _excluded = ["groupFirst", "groupLast", "groupMiddle"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
var themes = {
  light: _theme.DefaultTheme,
  dark: _theme.DarkTheme
};
var activeStyles = (0, _styledComponents.css)(["border-color:", ";background-color:", ";color:", ";box-shadow:inset 0 4px 4px rgba(0,0,0,0.25);"], function (props) {
  return props.colors.borderActive(props);
}, function (props) {
  return props.colors.bgActive(props);
}, function (props) {
  return props.colors.colorActive(props);
});
var withTheme = function withTheme(props) {
  if (props.themeType) {
    return _extends({}, props, {
      theme: themes[props.themeType]
    });
  }
  return _extends({}, props, {
    theme: props.theme
  });
};
var getColor = function getColor(name) {
  return function (props) {
    var _props$colorPalette;
    var prop = (props == null || (_props$colorPalette = props.colorPalette) == null ? void 0 : _props$colorPalette[name]) || name;
    return (0, _theme.getColor)(prop)(props);
  };
};
var getPrimaryColor = function getPrimaryColor(props) {
  return props.neutral ? getColor(props.flavour === _constants.HOLLOW ? "textFocus" : "neutralPillColor")(props) : getColor("primary")(props);
};
var getBorderColor = function getBorderColor(props) {
  return props.neutral ? getColor("generic")(props) : getColor("primary")(props);
};
var getTextColor = function getTextColor(props) {
  return props.neutral ? getColor(props.flavour === _constants.HOLLOW ? "text" : "mainBackground")(props) : getColor(props.flavour === _constants.HOLLOW ? "secondaryColor" : "mainBackground")(props);
};
var getHoverColor = function getHoverColor(props) {
  return props.neutral ? getColor("generic")(props) : getColor("accent")(props);
};
var getAccentColor = function getAccentColor(props) {
  if (props.neutral) return getColor(props.flavour === _constants.BORDER_LESS ? "textFocus" : "neutralHighlight")(props);
  var errorColor = props.danger ? "error" : undefined;
  var errorBgColor = props.danger ? "errorSemi" : undefined;
  var warningColor = props.warning ? "warning" : undefined;
  var warningBgColor = props.warning ? "warningSemi" : undefined;
  var primaryColor = errorColor || warningColor || "primaryHighlight";
  var secondaryHollow = errorBgColor || warningBgColor || "secondaryHighlight";
  return getColor(props.flavour === _constants.HOLLOW ? secondaryHollow : primaryColor)(props);
};
var getTransparent = getColor(["transparent", "full"]);
var colorsByFlavour = function colorsByFlavour(_ref) {
  var _flavours;
  var _ref$flavour = _ref.flavour,
    flavour = _ref$flavour === void 0 ? _constants.DEFAULT : _ref$flavour,
    danger = _ref.danger,
    warning = _ref.warning,
    iconColor = _ref.iconColor,
    color = _ref.color;
  var getErrorColor = danger ? getColor("error") : undefined;
  var getWarningColor = warning ? getColor("warning") : undefined;
  var getSpecialColor = getErrorColor || getWarningColor || (color ? getColor(color) : undefined);
  var getSpecialColorHover = getSpecialColor ? function (props) {
    return (0, _polished.lighten)(0.2, getSpecialColor(props));
  } : undefined;
  var getSpecialColorActive = getSpecialColor ? function (props) {
    return (0, _polished.darken)(0.2, getSpecialColor(props));
  } : undefined;
  var specialIconColor = iconColor ? getColor(iconColor) : undefined;
  var flavours = (_flavours = {}, _flavours[_constants.DEFAULT] = {
    color: getTextColor,
    colorHover: getTextColor,
    colorActive: getTextColor,
    bg: getSpecialColor || getPrimaryColor,
    bgHover: getSpecialColorHover || getHoverColor,
    bgActive: getSpecialColorActive || getAccentColor,
    border: getSpecialColor || getPrimaryColor,
    borderHover: getSpecialColorHover || getHoverColor,
    borderActive: getSpecialColorActive || getAccentColor,
    iconColor: specialIconColor || getTextColor
  }, _flavours[_constants.HOLLOW] = {
    color: getSpecialColor || getTextColor,
    colorHover: getSpecialColorHover || getTextColor,
    colorActive: getSpecialColorActive || getTextColor,
    bg: getTransparent,
    bgHover: getAccentColor,
    bgActive: getAccentColor,
    border: getSpecialColor || getBorderColor,
    borderHover: getSpecialColorHover || getPrimaryColor,
    borderActive: getSpecialColorActive || getPrimaryColor,
    iconColor: specialIconColor || getSpecialColor || getPrimaryColor
  }, _flavours[_constants.BORDER_LESS] = {
    color: getSpecialColor || getPrimaryColor,
    colorHover: getSpecialColorHover || getAccentColor,
    colorActive: getSpecialColorActive || getAccentColor,
    bg: getTransparent,
    bgHover: getTransparent,
    bgActive: getTransparent,
    border: getTransparent,
    borderHover: getTransparent,
    borderActive: getTransparent,
    iconColor: specialIconColor || getSpecialColor || getPrimaryColor
  }, _flavours);
  return flavours[flavour] || flavours[_constants.DEFAULT];
};
var StyledButton = exports.StyledButton = _styledComponents["default"].button.attrs(function (_ref2) {
  var groupFirst = _ref2.groupFirst,
    groupLast = _ref2.groupLast,
    groupMiddle = _ref2.groupMiddle,
    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
  return _extends({
    padding: props.large ? !props.hasLabel ? [1.5, 3] : [1.5, 4] : !props.hasLabel ? [1, 1.5] : [1, 3],
    colors: colorsByFlavour(props),
    round: groupFirst ? {
      side: "left",
      size: 0.5
    } : groupLast ? {
      side: "right",
      size: 0.5
    } : groupMiddle ? false : 0.5
  }, withTheme(props));
}).withConfig({
  displayName: "styled__StyledButton",
  componentId: "sc-14wh25s-0"
})(["&&{display:flex;justify-content:center;align-items:center;position:relative;", ";font-weight:", ";font-size:", ";white-space:nowrap;word-break:keep-all;cursor:pointer;", " pointer-events:", ";", " ", " transition:all 150ms;background-color:", ";color:", ";border-width:1px;border-style:solid;border-color:", ";", " box-sizing:border-box;", " ", " text-decoration:none;& > span{", ";margin-left:", ";}&:hover{border-color:", ";background-color:", ";color:", ";text-decoration:none;.button-icon{fill:", ";}}&:active{", "}", " &:focus{outline:none;}.button-icon{height:", ";width:", ";fill:", ";}.ntd-spinner{fill:none;stroke-width:17px;stroke-dasharray:100;stroke-dashoffset:100;animation:ntd-draw 1s linear infinite;stroke:", ";width:24px;}.path{stroke:", ";}@keyframes ntd-draw{to{stroke-dashoffset:0;}}}"], _alignSelf["default"], function (_ref3) {
  var strong = _ref3.strong;
  return strong ? 700 : 500;
}, function (_ref4) {
  var large = _ref4.large;
  return large ? "16px" : "12px";
}, function (_ref5) {
  var disabled = _ref5.disabled;
  return disabled && "opacity: 0.4;";
}, function (_ref6) {
  var disabled = _ref6.disabled;
  return disabled ? "none" : "auto";
}, _margin["default"], _padding["default"], function (props) {
  return props.colors.bg(props);
}, function (props) {
  return props.colors.color(props);
}, function (props) {
  return props.colors.border(props);
}, _round["default"], _position["default"], _styledSystem.position, _textTransform["default"], function (_ref7) {
  var hasIcon = _ref7.hasIcon;
  return hasIcon ? "4px" : "0px";
}, function (props) {
  return props.colors.borderHover(props);
}, function (props) {
  return props.colors.bgHover(props);
}, function (props) {
  return props.colors.colorHover(props);
}, function (props) {
  return props.colors.colorHover(props);
}, activeStyles, function (props) {
  return props.active && "\n      " + activeStyles + "\n    ";
}, function (props) {
  return props.iconWidth ? typeof props.iconWidth === "string" ? props.iconWidth : props.iconWidth + "px" : (0, _theme.getSizeBy)(1.75)(props);
}, function (props) {
  return props.iconHeight ? typeof props.iconHeight === "string" ? props.iconHeight : props.iconHeight + "px" : (0, _theme.getSizeBy)(1.75)(props);
}, function (props) {
  return props.colors.iconColor(props);
}, function (props) {
  return props.colors.color(props);
}, function (props) {
  return props.colors.color(props);
});