@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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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 _objectSpread(_objectSpread({}, props), {}, {
      theme: themes[props.themeType]
    });
  }
  return _objectSpread(_objectSpread({}, 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" : "text")(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) {
  return props.neutral ? getColor(props.flavour === _constants.BORDER_LESS ? "textFocus" : "neutralHighlight")(props) : getColor(props.flavour === _constants.HOLLOW ? "secondaryHighlight" : "primaryHighlight")(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;
  var getErrorColor = danger ? getColor("error") : undefined;
  var getWarningColor = warning ? getColor("warning") : undefined;
  var getSpecialColor = getErrorColor || getWarningColor;
  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 _objectSpread({
    padding: props.padding || props.tiny ? [0.5, 1] : props.small ? [1, 3] : [2],
    colors: colorsByFlavour(props),
    round: groupFirst ? {
      side: "left"
    } : groupLast ? {
      side: "right"
    } : !groupMiddle
  }, 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 small = _ref4.small,
    tiny = _ref4.tiny;
  return tiny ? "10px" : small ? "12px" : "14px";
}, 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)(2)(props);
}, function (props) {
  return props.iconHeight ? typeof props.iconHeight === "string" ? props.iconHeight : props.iconHeight + "px" : (0, _theme.getSizeBy)(2)(props);
}, function (props) {
  return props.colors.iconColor(props);
}, function (props) {
  return props.colors.color(props);
}, function (props) {
  return props.colors.color(props);
});