@netdata/netdata-ui
Version:
netdata UI kit
175 lines • 9.31 kB
JavaScript
var _excluded = ["groupFirst", "groupLast", "groupMiddle"];
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); }
import styled, { css } from "styled-components";
import { lighten, darken } from "polished";
import { getColor as themeGetColor, getSizeBy, DefaultTheme, DarkTheme } from "../../theme";
import margin from "../../mixins/margin";
import padding from "../../mixins/padding";
import round from "../../mixins/round";
import alignSelf from "../../mixins/alignSelf";
import textTransform from "../../mixins/textTransform";
import position from "../../mixins/position";
import { position as styledSystemPosition } from "styled-system";
import { DEFAULT, HOLLOW, BORDER_LESS } from "./constants";
var themes = {
light: DefaultTheme,
dark: DarkTheme
};
var activeStyles = 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 themeGetColor(prop)(props);
};
};
var getPrimaryColor = function getPrimaryColor(props) {
return props.neutral ? getColor(props.flavour === 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 === HOLLOW ? "text" : "mainBackground")(props) : getColor(props.flavour === 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 === BORDER_LESS ? "textFocus" : "neutralHighlight")(props) : getColor(props.flavour === 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 ? 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 lighten(0.2, getSpecialColor(props));
} : undefined;
var getSpecialColorActive = getSpecialColor ? function (props) {
return darken(0.2, getSpecialColor(props));
} : undefined;
var specialIconColor = iconColor ? getColor(iconColor) : undefined;
var flavours = (_flavours = {}, _flavours[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[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[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[DEFAULT];
};
export var StyledButton = styled.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, 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, padding, function (props) {
return props.colors.bg(props);
}, function (props) {
return props.colors.color(props);
}, function (props) {
return props.colors.border(props);
}, round, position, styledSystemPosition, textTransform, 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" : getSizeBy(2)(props);
}, function (props) {
return props.iconHeight ? typeof props.iconHeight === "string" ? props.iconHeight : props.iconHeight + "px" : getSizeBy(2)(props);
}, function (props) {
return props.colors.iconColor(props);
}, function (props) {
return props.colors.color(props);
}, function (props) {
return props.colors.color(props);
});