@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
121 lines • 11.8 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { SYSTEM } from '../internal/environment';
import customCssProps from '../internal/generated/custom-css-properties';
import { getStylePropertyKey } from './utils';
export function getCollapsibleFlashStyles(style, type = 'info') {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
if (SYSTEM !== 'core' || !style) {
return undefined;
}
const styleKey = getStylePropertyKey(type);
const background = ((_b = (_a = style === null || style === void 0 ? void 0 : style.item) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.background) && ((_d = (_c = style === null || style === void 0 ? void 0 : style.item) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d.background[styleKey]);
const borderColor = ((_f = (_e = style === null || style === void 0 ? void 0 : style.item) === null || _e === void 0 ? void 0 : _e.root) === null || _f === void 0 ? void 0 : _f.borderColor) &&
((_h = (_g = style === null || style === void 0 ? void 0 : style.item) === null || _g === void 0 ? void 0 : _g.root) === null || _h === void 0 ? void 0 : _h.borderColor[styleKey]);
const borderRadius = (_k = (_j = style === null || style === void 0 ? void 0 : style.item) === null || _j === void 0 ? void 0 : _j.root) === null || _k === void 0 ? void 0 : _k.borderRadius;
const borderWidth = (_m = (_l = style === null || style === void 0 ? void 0 : style.item) === null || _l === void 0 ? void 0 : _l.root) === null || _m === void 0 ? void 0 : _m.borderWidth;
const borderStyle = ((_p = (_o = style === null || style === void 0 ? void 0 : style.item) === null || _o === void 0 ? void 0 : _o.root) === null || _p === void 0 ? void 0 : _p.borderWidth) && 'solid';
const color = ((_r = (_q = style === null || style === void 0 ? void 0 : style.item) === null || _q === void 0 ? void 0 : _q.root) === null || _r === void 0 ? void 0 : _r.color) && ((_t = (_s = style === null || style === void 0 ? void 0 : style.item) === null || _s === void 0 ? void 0 : _s.root) === null || _t === void 0 ? void 0 : _t.color[styleKey]);
return {
background,
borderColor,
borderRadius,
borderStyle,
borderWidth,
color,
};
}
export function getFlashStyles(style, type = 'info') {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
if (SYSTEM !== 'core' || !style) {
return undefined;
}
const focusRingBorderColor = ((_c = (_b = (_a = style === null || style === void 0 ? void 0 : style.item) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.focusRing) === null || _c === void 0 ? void 0 : _c.borderColor) &&
style.item.root.focusRing.borderColor[getStylePropertyKey(type)];
return {
...getCollapsibleFlashStyles(style, type),
...(((_e = (_d = style === null || style === void 0 ? void 0 : style.item) === null || _d === void 0 ? void 0 : _d.root) === null || _e === void 0 ? void 0 : _e.focusRing) && {
[customCssProps.styleFocusRingBorderColor]: focusRingBorderColor,
[customCssProps.styleFocusRingBorderRadius]: (_f = style.item.root.focusRing) === null || _f === void 0 ? void 0 : _f.borderRadius,
[customCssProps.styleFocusRingBorderWidth]: (_g = style.item.root.focusRing) === null || _g === void 0 ? void 0 : _g.borderWidth,
}),
...(((_k = (_j = (_h = style === null || style === void 0 ? void 0 : style.item) === null || _h === void 0 ? void 0 : _h.root) === null || _j === void 0 ? void 0 : _j.focusRing) === null || _k === void 0 ? void 0 : _k.borderRadius) && {
[customCssProps.styleFocusRingBorderRadius]: style.item.root.focusRing.borderRadius,
}),
};
}
export function getDismissButtonStyles(style, type = 'info') {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
if (SYSTEM !== 'core' || !style) {
return undefined;
}
const styleKey = getStylePropertyKey(type);
const activeColor = ((_c = (_b = (_a = style === null || style === void 0 ? void 0 : style.item) === null || _a === void 0 ? void 0 : _a.dismissButton) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c.active) &&
style.item.dismissButton.color.active[styleKey];
const defaultColor = ((_f = (_e = (_d = style === null || style === void 0 ? void 0 : style.item) === null || _d === void 0 ? void 0 : _d.dismissButton) === null || _e === void 0 ? void 0 : _e.color) === null || _f === void 0 ? void 0 : _f.default) &&
style.item.dismissButton.color.default[styleKey];
const hoverColor = ((_j = (_h = (_g = style === null || style === void 0 ? void 0 : style.item) === null || _g === void 0 ? void 0 : _g.dismissButton) === null || _h === void 0 ? void 0 : _h.color) === null || _j === void 0 ? void 0 : _j.hover) &&
style.item.dismissButton.color.hover[styleKey];
const focusRingBorderColor = ((_m = (_l = (_k = style === null || style === void 0 ? void 0 : style.item) === null || _k === void 0 ? void 0 : _k.dismissButton) === null || _l === void 0 ? void 0 : _l.focusRing) === null || _m === void 0 ? void 0 : _m.borderColor) &&
style.item.dismissButton.focusRing.borderColor[styleKey];
return {
root: {
color: {
active: activeColor,
default: defaultColor,
hover: hoverColor,
},
focusRing: {
borderColor: focusRingBorderColor,
borderRadius: (_q = (_p = (_o = style === null || style === void 0 ? void 0 : style.item) === null || _o === void 0 ? void 0 : _o.dismissButton) === null || _p === void 0 ? void 0 : _p.focusRing) === null || _q === void 0 ? void 0 : _q.borderRadius,
borderWidth: (_t = (_s = (_r = style === null || style === void 0 ? void 0 : style.item) === null || _r === void 0 ? void 0 : _r.dismissButton) === null || _s === void 0 ? void 0 : _s.focusRing) === null || _t === void 0 ? void 0 : _t.borderWidth,
},
},
};
}
export function getNotificationBarStyles(style) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20;
if (SYSTEM !== 'core' || !style) {
return undefined;
}
return {
borderRadius: (_b = (_a = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.borderRadius,
borderWidth: (_d = (_c = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _c === void 0 ? void 0 : _c.root) === null || _d === void 0 ? void 0 : _d.borderWidth,
...(((_g = (_f = (_e = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _e === void 0 ? void 0 : _e.root) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g.active) && {
[customCssProps.styleBackgroundActive]: style.notificationBar.root.background.active,
}),
...(((_k = (_j = (_h = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _h === void 0 ? void 0 : _h.root) === null || _j === void 0 ? void 0 : _j.background) === null || _k === void 0 ? void 0 : _k.default) && {
[customCssProps.styleBackgroundDefault]: style.notificationBar.root.background.default,
}),
...(((_o = (_m = (_l = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _l === void 0 ? void 0 : _l.root) === null || _m === void 0 ? void 0 : _m.background) === null || _o === void 0 ? void 0 : _o.hover) && {
[customCssProps.styleBackgroundHover]: style.notificationBar.root.background.hover,
}),
...(((_r = (_q = (_p = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _p === void 0 ? void 0 : _p.root) === null || _q === void 0 ? void 0 : _q.borderColor) === null || _r === void 0 ? void 0 : _r.active) && {
[customCssProps.styleBorderColorActive]: style.notificationBar.root.borderColor.active,
}),
...(((_u = (_t = (_s = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _s === void 0 ? void 0 : _s.root) === null || _t === void 0 ? void 0 : _t.borderColor) === null || _u === void 0 ? void 0 : _u.default) && {
[customCssProps.styleBorderColorDefault]: style.notificationBar.root.borderColor.default,
}),
...(((_x = (_w = (_v = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _v === void 0 ? void 0 : _v.root) === null || _w === void 0 ? void 0 : _w.borderColor) === null || _x === void 0 ? void 0 : _x.hover) && {
[customCssProps.styleBorderColorHover]: style.notificationBar.root.borderColor.hover,
}),
...(((_0 = (_z = (_y = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _y === void 0 ? void 0 : _y.root) === null || _z === void 0 ? void 0 : _z.color) === null || _0 === void 0 ? void 0 : _0.active) && {
[customCssProps.styleColorActive]: style.notificationBar.root.color.active,
}),
...(((_3 = (_2 = (_1 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _1 === void 0 ? void 0 : _1.root) === null || _2 === void 0 ? void 0 : _2.color) === null || _3 === void 0 ? void 0 : _3.default) && {
[customCssProps.styleColorDefault]: style.notificationBar.root.color.default,
}),
...(((_6 = (_5 = (_4 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _4 === void 0 ? void 0 : _4.root) === null || _5 === void 0 ? void 0 : _5.color) === null || _6 === void 0 ? void 0 : _6.hover) && {
[customCssProps.styleColorHover]: style.notificationBar.root.color.hover,
}),
...(((_8 = (_7 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _7 === void 0 ? void 0 : _7.expandButton) === null || _8 === void 0 ? void 0 : _8.focusRing) && {
[customCssProps.styleFocusRingBorderColor]: (_11 = (_10 = (_9 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _9 === void 0 ? void 0 : _9.expandButton) === null || _10 === void 0 ? void 0 : _10.focusRing) === null || _11 === void 0 ? void 0 : _11.borderColor,
[customCssProps.styleFocusRingBorderRadius]: (_14 = (_13 = (_12 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _12 === void 0 ? void 0 : _12.expandButton) === null || _13 === void 0 ? void 0 : _13.focusRing) === null || _14 === void 0 ? void 0 : _14.borderRadius,
[customCssProps.styleFocusRingBorderWidth]: (_17 = (_16 = (_15 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _15 === void 0 ? void 0 : _15.expandButton) === null || _16 === void 0 ? void 0 : _16.focusRing) === null || _17 === void 0 ? void 0 : _17.borderWidth,
}),
...(((_20 = (_19 = (_18 = style === null || style === void 0 ? void 0 : style.notificationBar) === null || _18 === void 0 ? void 0 : _18.expandButton) === null || _19 === void 0 ? void 0 : _19.focusRing) === null || _20 === void 0 ? void 0 : _20.borderRadius) && {
[customCssProps.styleFocusRingBorderRadius]: style.notificationBar.expandButton.focusRing.borderRadius,
}),
};
}
//# sourceMappingURL=style.js.map