@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
235 lines (209 loc) • 18.2 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 css_1 = require("../../util/css");
exports.default = (0, styled_components_1.default)(Div_1.default).attrs(({ hasIconLeft, hasIconRight, hasSpace, isFixedSize }) => ({
getBadgeSize: (v, t) => `
${hasSpace
? `
margin: ${t.$.size.badge[v].margin.y} ${t.$.size.badge[v].margin.x};
`
: ''}
.src-badge-content {
font-size: ${t.$.size.badge[v].fontSize};
${!isFixedSize
? `
padding: ${t.$.size.badge[v].padding.y} ${t.$.size.badge[v].padding.x};
${hasIconLeft
? `
padding-left: ${(0, css_1.toCSSValue)(t.$.size.badge[v].padding.x)(v => v / 2)};
`
: ''}
${hasIconRight
? `
padding-right: ${(0, css_1.toCSSValue)(t.$.size.badge[v].padding.x)(v => v / 2)};
`
: ''}
`
: `
height: ${t.$.size.badge[v].fixedSize};
width: ${t.$.size.badge[v].fixedSize};
`}
}
.src-badge-icon {
padding: 0 ${(0, css_1.toCSSValue)(t.$.size.badge[v].padding.x)(value => value / 2)};
}
svg {
height: ${t.$.size.badge[v].iconSize};
width: ${t.$.size.badge[v].iconSize};
}
i {
font-size: ${t.$.size.badge[v].iconSize};
}
`,
}))(({ theme, hasIconLeft, hasIconRight, isClickable, isFixedSize, 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, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103, _104, _105, _106, _107, _108, _109, _110, _111, _112, _113, _114, _115, _116, _117, _118, _119, _120, _121, _122, _123, _124, _125, _126, _127, _128, _129, _130, _131, _132, _133, _134, _135, _136, _137, _138, _139, _140, _141, _142, _143, _144, _145, _146, _147;
return `
display: inline-flex;
font-family: ${theme.$.fontFamily.badge};
word-break: break-word;
word-wrap: break-word;
.src-badge-content {
border-radius: ${(isFixedSize && shape === 'rounded') ? '100%' : theme.$.radius.badge[shape]};
}
${isSoft
? `
font-weight: ${theme.$.fontWeight.bold};
`
: ''}
${!isOutline
? `
.src-badge-content {
${!isSoft
? `
background: ${(_b = (_a = theme.$.palette[palette].badge) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.palette[palette].main};
border-color: ${(_d = (_c = theme.$.palette[palette].badge) === null || _c === void 0 ? void 0 : _c.border) !== null && _d !== void 0 ? _d : theme.$.palette[palette].main};
color: ${(_f = (_e = theme.$.palette[palette].badge) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
fill: ${(_h = (_g = theme.$.palette[palette].badge) === null || _g === void 0 ? void 0 : _g.font) !== null && _h !== void 0 ? _h : theme.$.palette[palette].font};
`
: `
background: ${(_l = (_k = (_j = theme.$.palette[palette].badge) === null || _j === void 0 ? void 0 : _j.soft) === null || _k === void 0 ? void 0 : _k.background) !== null && _l !== void 0 ? _l : theme.$.palette[palette].soft};
border-color: ${(_p = (_o = (_m = theme.$.palette[palette].badge) === null || _m === void 0 ? void 0 : _m.soft) === null || _o === void 0 ? void 0 : _o.border) !== null && _p !== void 0 ? _p : theme.$.palette[palette].soft};
color: ${(_s = (_r = (_q = theme.$.palette[palette].badge) === null || _q === void 0 ? void 0 : _q.soft) === null || _r === void 0 ? void 0 : _r.font) !== null && _s !== void 0 ? _s : theme.$.palette[palette].softFont};
fill: ${(_v = (_u = (_t = theme.$.palette[palette].badge) === null || _t === void 0 ? void 0 : _t.soft) === null || _u === void 0 ? void 0 : _u.font) !== null && _v !== void 0 ? _v : theme.$.palette[palette].softFont};
`}
}
${isClickable
? `
cursor: ${theme.$.cursor.badgeClickable};
&:active {
${!isSoft
? `
.src-badge-content {
background: ${(_y = (_x = (_w = theme.$.palette[palette].badge) === null || _w === void 0 ? void 0 : _w.active) === null || _x === void 0 ? void 0 : _x.background) !== null && _y !== void 0 ? _y : theme.$.palette[palette].dynamicer};
border-color: ${(_1 = (_0 = (_z = theme.$.palette[palette].badge) === null || _z === void 0 ? void 0 : _z.active) === null || _0 === void 0 ? void 0 : _0.border) !== null && _1 !== void 0 ? _1 : theme.$.palette[palette].dynamicer};
${((_3 = (_2 = theme.$.palette[palette].badge) === null || _2 === void 0 ? void 0 : _2.active) === null || _3 === void 0 ? void 0 : _3.font)
? `
color: ${(_5 = (_4 = theme.$.palette[palette].badge) === null || _4 === void 0 ? void 0 : _4.active) === null || _5 === void 0 ? void 0 : _5.font};
fill: ${(_7 = (_6 = theme.$.palette[palette].badge) === null || _6 === void 0 ? void 0 : _6.active) === null || _7 === void 0 ? void 0 : _7.font};
`
: ''}
}
.src-badge-icon {
background: ${(_11 = (_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.background) !== null && _11 !== void 0 ? _11 : theme.$.palette[palette].dynamicest};
border-color: ${(_15 = (_14 = (_13 = (_12 = theme.$.palette[palette].badge) === null || _12 === void 0 ? void 0 : _12.active) === null || _13 === void 0 ? void 0 : _13.icon) === null || _14 === void 0 ? void 0 : _14.border) !== null && _15 !== void 0 ? _15 : theme.$.palette[palette].dynamicest};
${((_18 = (_17 = (_16 = theme.$.palette[palette].badge) === null || _16 === void 0 ? void 0 : _16.active) === null || _17 === void 0 ? void 0 : _17.icon) === null || _18 === void 0 ? void 0 : _18.font)
? `
color: ${(_21 = (_20 = (_19 = theme.$.palette[palette].badge) === null || _19 === void 0 ? void 0 : _19.active) === null || _20 === void 0 ? void 0 : _20.icon) === null || _21 === void 0 ? void 0 : _21.font};
fill: ${(_24 = (_23 = (_22 = theme.$.palette[palette].badge) === null || _22 === void 0 ? void 0 : _22.active) === null || _23 === void 0 ? void 0 : _23.icon) === null || _24 === void 0 ? void 0 : _24.font};
`
: ''}
}
`
: `
.src-badge-content {
background: ${(_28 = (_27 = (_26 = (_25 = theme.$.palette[palette].badge) === null || _25 === void 0 ? void 0 : _25.soft) === null || _26 === void 0 ? void 0 : _26.active) === null || _27 === void 0 ? void 0 : _27.background) !== null && _28 !== void 0 ? _28 : theme.$.palette[palette].softDynamicer};
border-color: ${(_32 = (_31 = (_30 = (_29 = theme.$.palette[palette].badge) === null || _29 === void 0 ? void 0 : _29.soft) === null || _30 === void 0 ? void 0 : _30.active) === null || _31 === void 0 ? void 0 : _31.border) !== null && _32 !== void 0 ? _32 : theme.$.palette[palette].softDynamicer};
${((_35 = (_34 = (_33 = theme.$.palette[palette].badge) === null || _33 === void 0 ? void 0 : _33.soft) === null || _34 === void 0 ? void 0 : _34.active) === null || _35 === void 0 ? void 0 : _35.font)
? `
color: ${(_38 = (_37 = (_36 = theme.$.palette[palette].badge) === null || _36 === void 0 ? void 0 : _36.soft) === null || _37 === void 0 ? void 0 : _37.active) === null || _38 === void 0 ? void 0 : _38.font};
fill: ${(_41 = (_40 = (_39 = theme.$.palette[palette].badge) === null || _39 === void 0 ? void 0 : _39.soft) === null || _40 === void 0 ? void 0 : _40.active) === null || _41 === void 0 ? void 0 : _41.font};
`
: ''}
}
.src-badge-icon {
background: ${(_46 = (_45 = (_44 = (_43 = (_42 = theme.$.palette[palette].badge) === null || _42 === void 0 ? void 0 : _42.soft) === null || _43 === void 0 ? void 0 : _43.active) === null || _44 === void 0 ? void 0 : _44.icon) === null || _45 === void 0 ? void 0 : _45.background) !== null && _46 !== void 0 ? _46 : theme.$.palette[palette].softDynamicest};
border-color: ${(_51 = (_50 = (_49 = (_48 = (_47 = theme.$.palette[palette].badge) === null || _47 === void 0 ? void 0 : _47.soft) === null || _48 === void 0 ? void 0 : _48.active) === null || _49 === void 0 ? void 0 : _49.icon) === null || _50 === void 0 ? void 0 : _50.border) !== null && _51 !== void 0 ? _51 : theme.$.palette[palette].softDynamicest};
${((_55 = (_54 = (_53 = (_52 = theme.$.palette[palette].badge) === null || _52 === void 0 ? void 0 : _52.soft) === null || _53 === void 0 ? void 0 : _53.active) === null || _54 === void 0 ? void 0 : _54.icon) === null || _55 === void 0 ? void 0 : _55.font)
? `
color: ${(_59 = (_58 = (_57 = (_56 = theme.$.palette[palette].badge) === null || _56 === void 0 ? void 0 : _56.soft) === null || _57 === void 0 ? void 0 : _57.active) === null || _58 === void 0 ? void 0 : _58.icon) === null || _59 === void 0 ? void 0 : _59.font};
fill: ${(_63 = (_62 = (_61 = (_60 = theme.$.palette[palette].badge) === null || _60 === void 0 ? void 0 : _60.soft) === null || _61 === void 0 ? void 0 : _61.active) === null || _62 === void 0 ? void 0 : _62.icon) === null || _63 === void 0 ? void 0 : _63.font};
`
: ''}
}
`}
}
`
: ''}
`
: `
.src-badge-content {
${!isSoft
? `
border-color: ${(_66 = (_65 = (_64 = theme.$.palette[palette].badge) === null || _64 === void 0 ? void 0 : _64.outline) === null || _65 === void 0 ? void 0 : _65.border) !== null && _66 !== void 0 ? _66 : theme.$.palette[palette].main};
color: ${(_69 = (_68 = (_67 = theme.$.palette[palette].badge) === null || _67 === void 0 ? void 0 : _67.outline) === null || _68 === void 0 ? void 0 : _68.font) !== null && _69 !== void 0 ? _69 : theme.$.palette[palette].main};
fill: ${(_72 = (_71 = (_70 = theme.$.palette[palette].badge) === null || _70 === void 0 ? void 0 : _70.outline) === null || _71 === void 0 ? void 0 : _71.font) !== null && _72 !== void 0 ? _72 : theme.$.palette[palette].main};
`
: `
border-color: ${(_76 = (_75 = (_74 = (_73 = theme.$.palette[palette].badge) === null || _73 === void 0 ? void 0 : _73.soft) === null || _74 === void 0 ? void 0 : _74.outline) === null || _75 === void 0 ? void 0 : _75.border) !== null && _76 !== void 0 ? _76 : theme.$.palette[palette].soft};
color: ${(_80 = (_79 = (_78 = (_77 = theme.$.palette[palette].badge) === null || _77 === void 0 ? void 0 : _77.soft) === null || _78 === void 0 ? void 0 : _78.outline) === null || _79 === void 0 ? void 0 : _79.font) !== null && _80 !== void 0 ? _80 : theme.$.palette[palette].soft};
fill: ${(_84 = (_83 = (_82 = (_81 = theme.$.palette[palette].badge) === null || _81 === void 0 ? void 0 : _81.soft) === null || _82 === void 0 ? void 0 : _82.outline) === null || _83 === void 0 ? void 0 : _83.font) !== null && _84 !== void 0 ? _84 : theme.$.palette[palette].soft};
`}
}
${isClickable
? `
&:active {
${!isSoft
? `
.src-badge-content {
background: ${(_88 = (_87 = (_86 = (_85 = theme.$.palette[palette].badge) === null || _85 === void 0 ? void 0 : _85.outline) === null || _86 === void 0 ? void 0 : _86.active) === null || _87 === void 0 ? void 0 : _87.background) !== null && _88 !== void 0 ? _88 : theme.$.palette[palette].main};
color: ${(_92 = (_91 = (_90 = (_89 = theme.$.palette[palette].badge) === null || _89 === void 0 ? void 0 : _89.outline) === null || _90 === void 0 ? void 0 : _90.active) === null || _91 === void 0 ? void 0 : _91.font) !== null && _92 !== void 0 ? _92 : theme.$.palette[palette].font};
fill: ${(_96 = (_95 = (_94 = (_93 = theme.$.palette[palette].badge) === null || _93 === void 0 ? void 0 : _93.outline) === null || _94 === void 0 ? void 0 : _94.active) === null || _95 === void 0 ? void 0 : _95.font) !== null && _96 !== void 0 ? _96 : theme.$.palette[palette].font};
}
.src-badge-icon {
background: ${(_101 = (_100 = (_99 = (_98 = (_97 = theme.$.palette[palette].badge) === null || _97 === void 0 ? void 0 : _97.outline) === null || _98 === void 0 ? void 0 : _98.active) === null || _99 === void 0 ? void 0 : _99.icon) === null || _100 === void 0 ? void 0 : _100.background) !== null && _101 !== void 0 ? _101 : theme.$.palette[palette].dynamicer};
color: ${(_106 = (_105 = (_104 = (_103 = (_102 = theme.$.palette[palette].badge) === null || _102 === void 0 ? void 0 : _102.outline) === null || _103 === void 0 ? void 0 : _103.active) === null || _104 === void 0 ? void 0 : _104.icon) === null || _105 === void 0 ? void 0 : _105.font) !== null && _106 !== void 0 ? _106 : theme.$.palette[palette].font};
fill: ${(_111 = (_110 = (_109 = (_108 = (_107 = theme.$.palette[palette].badge) === null || _107 === void 0 ? void 0 : _107.outline) === null || _108 === void 0 ? void 0 : _108.active) === null || _109 === void 0 ? void 0 : _109.icon) === null || _110 === void 0 ? void 0 : _110.font) !== null && _111 !== void 0 ? _111 : theme.$.palette[palette].font};
}
`
: `
.src-badge-content {
background: ${(_117 = (_116 = (_115 = (_114 = (_113 = (_112 = theme.$.palette[palette]) === null || _112 === void 0 ? void 0 : _112.badge) === null || _113 === void 0 ? void 0 : _113.soft) === null || _114 === void 0 ? void 0 : _114.outline) === null || _115 === void 0 ? void 0 : _115.active) === null || _116 === void 0 ? void 0 : _116.background) !== null && _117 !== void 0 ? _117 : theme.$.palette[palette].soft};
color: ${(_123 = (_122 = (_121 = (_120 = (_119 = (_118 = theme.$.palette[palette]) === null || _118 === void 0 ? void 0 : _118.badge) === null || _119 === void 0 ? void 0 : _119.soft) === null || _120 === void 0 ? void 0 : _120.outline) === null || _121 === void 0 ? void 0 : _121.active) === null || _122 === void 0 ? void 0 : _122.font) !== null && _123 !== void 0 ? _123 : theme.$.palette[palette].softFont};
fill: ${(_129 = (_128 = (_127 = (_126 = (_125 = (_124 = theme.$.palette[palette]) === null || _124 === void 0 ? void 0 : _124.badge) === null || _125 === void 0 ? void 0 : _125.soft) === null || _126 === void 0 ? void 0 : _126.outline) === null || _127 === void 0 ? void 0 : _127.active) === null || _128 === void 0 ? void 0 : _128.font) !== null && _129 !== void 0 ? _129 : theme.$.palette[palette].softFont};
}
.src-badge-icon {
background: ${(_135 = (_134 = (_133 = (_132 = (_131 = (_130 = theme.$.palette[palette].badge) === null || _130 === void 0 ? void 0 : _130.soft) === null || _131 === void 0 ? void 0 : _131.outline) === null || _132 === void 0 ? void 0 : _132.active) === null || _133 === void 0 ? void 0 : _133.icon) === null || _134 === void 0 ? void 0 : _134.background) !== null && _135 !== void 0 ? _135 : theme.$.palette[palette].softDynamicer};
color: ${(_141 = (_140 = (_139 = (_138 = (_137 = (_136 = theme.$.palette[palette].badge) === null || _136 === void 0 ? void 0 : _136.soft) === null || _137 === void 0 ? void 0 : _137.outline) === null || _138 === void 0 ? void 0 : _138.active) === null || _139 === void 0 ? void 0 : _139.icon) === null || _140 === void 0 ? void 0 : _140.font) !== null && _141 !== void 0 ? _141 : theme.$.palette[palette].softFont};
fill: ${(_147 = (_146 = (_145 = (_144 = (_143 = (_142 = theme.$.palette[palette].badge) === null || _142 === void 0 ? void 0 : _142.soft) === null || _143 === void 0 ? void 0 : _143.outline) === null || _144 === void 0 ? void 0 : _144.active) === null || _145 === void 0 ? void 0 : _145.icon) === null || _146 === void 0 ? void 0 : _146.font) !== null && _147 !== void 0 ? _147 : theme.$.palette[palette].softFont};
}
`}
}
`
: ''}
`}
.src-badge-content {
${isFixedSize
? `
align-items: center;
display: inline-flex;
justify-content: center;
`
: ''}
${hasIconLeft
? `
border-left: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
`
: ''}
${hasIconRight
? `
border-right: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
`
: ''}
}
${isClickable
? `
cursor: default;
user-select: none;
`
: ''}
`;
});