@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
104 lines (97 loc) • 10.7 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
const types_1 = require("../../types");
const props_1 = require("../../util/props");
exports.default = (0, styled_components_1.default)(Div_1.default).attrs({
className: 'src-badge-icon',
})(({ theme, iconPosition, isClickable, isOutline, isSoft, palette, shape }) => {
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, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87;
return `
align-items: center;
align-self: stretch;
border: solid 1px;
border-${types_1.OrderPosition[(0, props_1.getReverseOrderPosition)(iconPosition)].toLowerCase()}: 0;
border-color: ${!isSoft ? theme.$.palette[palette].dynamicer : theme.$.palette[palette].softDynamicer};
border-radius: ${theme.$.radius.badge[shape]};
border-bottom-${types_1.OrderPosition[(0, props_1.getReverseOrderPosition)(iconPosition)].toLowerCase()}-radius: 0;
border-top-${types_1.OrderPosition[(0, props_1.getReverseOrderPosition)(iconPosition)].toLowerCase()}-radius: 0;
display: inline-flex;
flex: 0 0 auto;
justify-content: center;
${!isOutline
? `
${!isSoft
? `
background: ${(_c = (_b = (_a = theme.$.palette[palette].badge) === null || _a === void 0 ? void 0 : _a.icon) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : theme.$.palette[palette].dynamicer};
color: ${(_f = (_e = (_d = theme.$.palette[palette].badge) === null || _d === void 0 ? void 0 : _d.icon) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
fill: ${(_j = (_h = (_g = theme.$.palette[palette].badge) === null || _g === void 0 ? void 0 : _g.icon) === null || _h === void 0 ? void 0 : _h.font) !== null && _j !== void 0 ? _j : theme.$.palette[palette].font};
`
: `
background: ${(_o = (_m = (_l = (_k = theme.$.palette[palette].badge) === null || _k === void 0 ? void 0 : _k.soft) === null || _l === void 0 ? void 0 : _l.icon) === null || _m === void 0 ? void 0 : _m.background) !== null && _o !== void 0 ? _o : theme.$.palette[palette].softDynamicer};
color: ${(_s = (_r = (_q = (_p = theme.$.palette[palette].badge) === null || _p === void 0 ? void 0 : _p.soft) === null || _q === void 0 ? void 0 : _q.icon) === null || _r === void 0 ? void 0 : _r.font) !== null && _s !== void 0 ? _s : theme.$.palette[palette].softFont};
fill: ${(_w = (_v = (_u = (_t = theme.$.palette[palette].badge) === null || _t === void 0 ? void 0 : _t.soft) === null || _u === void 0 ? void 0 : _u.icon) === null || _v === void 0 ? void 0 : _v.font) !== null && _w !== void 0 ? _w : theme.$.palette[palette].softFont};
`}
${isClickable
? `
cursor: ${theme.$.cursor.badgeIconClickable};
&:active {
${!isSoft
? `
background: ${(_0 = (_z = (_y = (_x = theme.$.palette[palette].badge) === null || _x === void 0 ? void 0 : _x.active) === null || _y === void 0 ? void 0 : _y.icon) === null || _z === void 0 ? void 0 : _z.background) !== null && _0 !== void 0 ? _0 : theme.$.palette[palette].dynamicest};
border-color: ${(_4 = (_3 = (_2 = (_1 = theme.$.palette[palette].badge) === null || _1 === void 0 ? void 0 : _1.active) === null || _2 === void 0 ? void 0 : _2.icon) === null || _3 === void 0 ? void 0 : _3.border) !== null && _4 !== void 0 ? _4 : theme.$.palette[palette].dynamicest};
${((_7 = (_6 = (_5 = theme.$.palette[palette].badge) === null || _5 === void 0 ? void 0 : _5.active) === null || _6 === void 0 ? void 0 : _6.icon) === null || _7 === void 0 ? void 0 : _7.font)
? `
color: ${(_10 = (_9 = (_8 = theme.$.palette[palette].badge) === null || _8 === void 0 ? void 0 : _8.active) === null || _9 === void 0 ? void 0 : _9.icon) === null || _10 === void 0 ? void 0 : _10.font};
fill: ${(_13 = (_12 = (_11 = theme.$.palette[palette].badge) === null || _11 === void 0 ? void 0 : _11.active) === null || _12 === void 0 ? void 0 : _12.icon) === null || _13 === void 0 ? void 0 : _13.font};
`
: ''}
`
: `
background: ${(_18 = (_17 = (_16 = (_15 = (_14 = theme.$.palette[palette].badge) === null || _14 === void 0 ? void 0 : _14.soft) === null || _15 === void 0 ? void 0 : _15.active) === null || _16 === void 0 ? void 0 : _16.icon) === null || _17 === void 0 ? void 0 : _17.background) !== null && _18 !== void 0 ? _18 : theme.$.palette[palette].softDynamicest};
border-color: ${(_23 = (_22 = (_21 = (_20 = (_19 = theme.$.palette[palette].badge) === null || _19 === void 0 ? void 0 : _19.soft) === null || _20 === void 0 ? void 0 : _20.active) === null || _21 === void 0 ? void 0 : _21.icon) === null || _22 === void 0 ? void 0 : _22.border) !== null && _23 !== void 0 ? _23 : theme.$.palette[palette].softDynamicest};
${((_26 = (_25 = (_24 = theme.$.palette[palette].badge) === null || _24 === void 0 ? void 0 : _24.soft) === null || _25 === void 0 ? void 0 : _25.active) === null || _26 === void 0 ? void 0 : _26.font)
? `
color: ${(_29 = (_28 = (_27 = theme.$.palette[palette].badge) === null || _27 === void 0 ? void 0 : _27.soft) === null || _28 === void 0 ? void 0 : _28.active) === null || _29 === void 0 ? void 0 : _29.font};
fill: ${(_32 = (_31 = (_30 = theme.$.palette[palette].badge) === null || _30 === void 0 ? void 0 : _30.soft) === null || _31 === void 0 ? void 0 : _31.active) === null || _32 === void 0 ? void 0 : _32.font};
`
: ''}
`}
}
`
: ''}
`
: `
${!isSoft
? `
color: ${(_37 = (_36 = (_35 = (_34 = (_33 = theme.$.palette[palette]) === null || _33 === void 0 ? void 0 : _33.badge) === null || _34 === void 0 ? void 0 : _34.outline) === null || _35 === void 0 ? void 0 : _35.icon) === null || _36 === void 0 ? void 0 : _36.font) !== null && _37 !== void 0 ? _37 : theme.$.palette[palette].main};
fill: ${(_42 = (_41 = (_40 = (_39 = (_38 = theme.$.palette[palette]) === null || _38 === void 0 ? void 0 : _38.badge) === null || _39 === void 0 ? void 0 : _39.outline) === null || _40 === void 0 ? void 0 : _40.icon) === null || _41 === void 0 ? void 0 : _41.font) !== null && _42 !== void 0 ? _42 : theme.$.palette[palette].main};
`
: `
color: ${(_48 = (_47 = (_46 = (_45 = (_44 = (_43 = theme.$.palette[palette]) === null || _43 === void 0 ? void 0 : _43.badge) === null || _44 === void 0 ? void 0 : _44.soft) === null || _45 === void 0 ? void 0 : _45.outline) === null || _46 === void 0 ? void 0 : _46.icon) === null || _47 === void 0 ? void 0 : _47.font) !== null && _48 !== void 0 ? _48 : theme.$.palette[palette].soft};
fill: ${(_54 = (_53 = (_52 = (_51 = (_50 = (_49 = theme.$.palette[palette]) === null || _49 === void 0 ? void 0 : _49.badge) === null || _50 === void 0 ? void 0 : _50.soft) === null || _51 === void 0 ? void 0 : _51.outline) === null || _52 === void 0 ? void 0 : _52.icon) === null || _53 === void 0 ? void 0 : _53.font) !== null && _54 !== void 0 ? _54 : theme.$.palette[palette].soft};
`}
${isClickable
? `
&:active {
${!isSoft
? `
background: ${(_59 = (_58 = (_57 = (_56 = (_55 = theme.$.palette[palette].badge) === null || _55 === void 0 ? void 0 : _55.outline) === null || _56 === void 0 ? void 0 : _56.active) === null || _57 === void 0 ? void 0 : _57.icon) === null || _58 === void 0 ? void 0 : _58.background) !== null && _59 !== void 0 ? _59 : theme.$.palette[palette].dynamicer};
color: ${(_64 = (_63 = (_62 = (_61 = (_60 = theme.$.palette[palette].badge) === null || _60 === void 0 ? void 0 : _60.outline) === null || _61 === void 0 ? void 0 : _61.active) === null || _62 === void 0 ? void 0 : _62.icon) === null || _63 === void 0 ? void 0 : _63.font) !== null && _64 !== void 0 ? _64 : theme.$.palette[palette].font};
fill: ${(_69 = (_68 = (_67 = (_66 = (_65 = theme.$.palette[palette].badge) === null || _65 === void 0 ? void 0 : _65.outline) === null || _66 === void 0 ? void 0 : _66.active) === null || _67 === void 0 ? void 0 : _67.icon) === null || _68 === void 0 ? void 0 : _68.font) !== null && _69 !== void 0 ? _69 : theme.$.palette[palette].font};
`
: `
background: ${(_75 = (_74 = (_73 = (_72 = (_71 = (_70 = theme.$.palette[palette].badge) === null || _70 === void 0 ? void 0 : _70.soft) === null || _71 === void 0 ? void 0 : _71.outline) === null || _72 === void 0 ? void 0 : _72.active) === null || _73 === void 0 ? void 0 : _73.icon) === null || _74 === void 0 ? void 0 : _74.background) !== null && _75 !== void 0 ? _75 : theme.$.palette[palette].softDynamicer};
color: ${(_81 = (_80 = (_79 = (_78 = (_77 = (_76 = theme.$.palette[palette].badge) === null || _76 === void 0 ? void 0 : _76.soft) === null || _77 === void 0 ? void 0 : _77.outline) === null || _78 === void 0 ? void 0 : _78.active) === null || _79 === void 0 ? void 0 : _79.icon) === null || _80 === void 0 ? void 0 : _80.font) !== null && _81 !== void 0 ? _81 : theme.$.palette[palette].softFont};
fill: ${(_87 = (_86 = (_85 = (_84 = (_83 = (_82 = theme.$.palette[palette].badge) === null || _82 === void 0 ? void 0 : _82.soft) === null || _83 === void 0 ? void 0 : _83.outline) === null || _84 === void 0 ? void 0 : _84.active) === null || _85 === void 0 ? void 0 : _85.icon) === null || _86 === void 0 ? void 0 : _86.font) !== null && _87 !== void 0 ? _87 : theme.$.palette[palette].softFont};
`}
}
`
: ''}
`}
`;
});