@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
319 lines (284 loc) • 18.8 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 Button_1 = __importDefault(require("@smart-react-components/core/Element/Button"));
const Svg_1 = __importDefault(require("@smart-react-components/core/Element/Svg"));
const styled_components_1 = __importDefault(require("styled-components"));
const css_1 = require("../../util/css");
exports.default = (0, styled_components_1.default)(Button_1.default).attrs(({ hasLeftAddon, hasRightAddon, isFixedSize }) => ({
getButtonSize: (v, t) => `
.src-button-content {
font-size: ${t.$.size.button[v].fontSize};
> ${Svg_1.default} {
height: ${t.$.size.button[v].iconSize};
width: ${t.$.size.button[v].iconSize};
}
${!isFixedSize
? `
padding: ${t.$.size.button[v].padding.y} ${t.$.size.button[v].padding.x};
${hasLeftAddon
? `
padding-left: ${(0, css_1.toCSSValue)(t.$.size.button[v].padding.x)(val => val / 2)};
`
: ''}
${hasRightAddon
? `
padding-right: ${(0, css_1.toCSSValue)(t.$.size.button[v].padding.x)(val => val / 2)};
`
: ''}
`
: `
height: ${t.$.size.button[v].fixedSize};
width: ${t.$.size.button[v].fixedSize};
`}
> :not(:last-child) {
margin-right: ${(0, css_1.toCSSValue)(t.$.size.button[v].padding.x)(val => val / 4)};
}
}
`,
}))(({ theme, hasButtonContainer, hasHover, hasLeftAddon, hasRightAddon, hasSeparatedLeftAddon, hasSeparatedRightAddon, isActive, isBlock, isDisabled, isFixedSize, isLink, isLoading, isSoft, isOutline, 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;
return `
align-items: stretch;
background: transparent;
border: 0;
border-radius: ${(isFixedSize && shape === 'rounded') ? '100%' : theme.$.radius.button[shape]};
cursor: ${(!isDisabled && !isLoading) ? theme.$.cursor.button : 'default'};
font-family: ${theme.$.fontFamily.button};
position: relative;
transition: box-shadow 300ms 0s ease-in-out;
user-select: none;
&:active {
outline: 0;
}
${isSoft
? `
font-weight: ${theme.$.fontWeight.bold};
`
: ''}
${!isFixedSize
? `
${(!isBlock)
? `
display: inline-flex;
flex: 0 1 auto;
`
: `
display: flex;
flex: 1 1 auto;
width: 100%;
`}
`
: ''}
${(isBlock || isFixedSize)
? `
.src-button-content {
justify-content: center;
}
`
: ''}
${!isLink
? `
${!isOutline
? `
${!isSoft
? `
.src-button-content {
${!isActive
? `
background: ${(_b = (_a = theme.$.palette[palette].button) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.palette[palette].main};
border-color: ${(_d = (_c = theme.$.palette[palette].button) === null || _c === void 0 ? void 0 : _c.border) !== null && _d !== void 0 ? _d : theme.$.palette[palette].main};
color: ${(_f = (_e = theme.$.palette[palette].button) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
`
: `
background: ${(_j = (_h = (_g = theme.$.palette[palette].button) === null || _g === void 0 ? void 0 : _g.active) === null || _h === void 0 ? void 0 : _h.background) !== null && _j !== void 0 ? _j : theme.$.palette[palette].dynamicer};
border-color: ${(_m = (_l = (_k = theme.$.palette[palette].button) === null || _k === void 0 ? void 0 : _k.active) === null || _l === void 0 ? void 0 : _l.border) !== null && _m !== void 0 ? _m : theme.$.palette[palette].dynamicer};
color: ${(_q = (_p = (_o = theme.$.palette[palette].button) === null || _o === void 0 ? void 0 : _o.active) === null || _p === void 0 ? void 0 : _p.font) !== null && _q !== void 0 ? _q : theme.$.palette[palette].font};
`}
}
${(!isActive && hasHover)
? `
&:hover {
.src-button-content {
background: ${(_t = (_s = (_r = theme.$.palette[palette].button) === null || _r === void 0 ? void 0 : _r.hover) === null || _s === void 0 ? void 0 : _s.background) !== null && _t !== void 0 ? _t : theme.$.palette[palette].dynamic};
border-color: ${(_w = (_v = (_u = theme.$.palette[palette].button) === null || _u === void 0 ? void 0 : _u.hover) === null || _v === void 0 ? void 0 : _v.border) !== null && _w !== void 0 ? _w : theme.$.palette[palette].dynamic};
${((_y = (_x = theme.$.palette[palette].button) === null || _x === void 0 ? void 0 : _x.hover) === null || _y === void 0 ? void 0 : _y.font)
? `
color: ${(_0 = (_z = theme.$.palette[palette].button) === null || _z === void 0 ? void 0 : _z.hover) === null || _0 === void 0 ? void 0 : _0.font};
`
: ''}
}
.src-button-addon {
background: ${(_4 = (_3 = (_2 = (_1 = theme.$.palette[palette].button) === null || _1 === void 0 ? void 0 : _1.hover) === null || _2 === void 0 ? void 0 : _2.addon) === null || _3 === void 0 ? void 0 : _3.background) !== null && _4 !== void 0 ? _4 : theme.$.palette[palette].dynamicest};
border-color: ${(_8 = (_7 = (_6 = (_5 = theme.$.palette[palette].button) === null || _5 === void 0 ? void 0 : _5.hover) === null || _6 === void 0 ? void 0 : _6.addon) === null || _7 === void 0 ? void 0 : _7.border) !== null && _8 !== void 0 ? _8 : theme.$.palette[palette].dynamicest};
}
}
`
: ''}
`
: `
.src-button-content {
${!isActive
? `
background: ${(_11 = (_10 = (_9 = theme.$.palette[palette].button) === null || _9 === void 0 ? void 0 : _9.soft) === null || _10 === void 0 ? void 0 : _10.background) !== null && _11 !== void 0 ? _11 : theme.$.palette[palette].soft};
border-color: ${(_14 = (_13 = (_12 = theme.$.palette[palette].button) === null || _12 === void 0 ? void 0 : _12.soft) === null || _13 === void 0 ? void 0 : _13.border) !== null && _14 !== void 0 ? _14 : theme.$.palette[palette].soft};
color: ${(_17 = (_16 = (_15 = theme.$.palette[palette].button) === null || _15 === void 0 ? void 0 : _15.soft) === null || _16 === void 0 ? void 0 : _16.font) !== null && _17 !== void 0 ? _17 : theme.$.palette[palette].softFont};
`
: `
background: ${(_21 = (_20 = (_19 = (_18 = theme.$.palette[palette].button) === null || _18 === void 0 ? void 0 : _18.soft) === null || _19 === void 0 ? void 0 : _19.active) === null || _20 === void 0 ? void 0 : _20.background) !== null && _21 !== void 0 ? _21 : theme.$.palette[palette].softDynamicer};
border-color: ${(_25 = (_24 = (_23 = (_22 = theme.$.palette[palette].button) === null || _22 === void 0 ? void 0 : _22.soft) === null || _23 === void 0 ? void 0 : _23.active) === null || _24 === void 0 ? void 0 : _24.border) !== null && _25 !== void 0 ? _25 : theme.$.palette[palette].softDynamicer};
color: ${(_29 = (_28 = (_27 = (_26 = theme.$.palette[palette].button) === null || _26 === void 0 ? void 0 : _26.soft) === null || _27 === void 0 ? void 0 : _27.active) === null || _28 === void 0 ? void 0 : _28.font) !== null && _29 !== void 0 ? _29 : theme.$.palette[palette].softFont};
`}
}
${(!isActive && hasHover)
? `
&:hover {
.src-button-content {
background: ${(_33 = (_32 = (_31 = (_30 = theme.$.palette[palette].button) === null || _30 === void 0 ? void 0 : _30.soft) === null || _31 === void 0 ? void 0 : _31.hover) === null || _32 === void 0 ? void 0 : _32.background) !== null && _33 !== void 0 ? _33 : theme.$.palette[palette].softDynamic};
border-color: ${(_37 = (_36 = (_35 = (_34 = theme.$.palette[palette].button) === null || _34 === void 0 ? void 0 : _34.soft) === null || _35 === void 0 ? void 0 : _35.hover) === null || _36 === void 0 ? void 0 : _36.border) !== null && _37 !== void 0 ? _37 : theme.$.palette[palette].softDynamic};
${((_40 = (_39 = (_38 = theme.$.palette[palette].button) === null || _38 === void 0 ? void 0 : _38.soft) === null || _39 === void 0 ? void 0 : _39.hover) === null || _40 === void 0 ? void 0 : _40.font)
? `
color: ${(_43 = (_42 = (_41 = theme.$.palette[palette].button) === null || _41 === void 0 ? void 0 : _41.soft) === null || _42 === void 0 ? void 0 : _42.hover) === null || _43 === void 0 ? void 0 : _43.font};
`
: ''}
}
.src-button-addon {
background: ${(_48 = (_47 = (_46 = (_45 = (_44 = theme.$.palette[palette].button) === null || _44 === void 0 ? void 0 : _44.soft) === null || _45 === void 0 ? void 0 : _45.hover) === null || _46 === void 0 ? void 0 : _46.addon) === null || _47 === void 0 ? void 0 : _47.background) !== null && _48 !== void 0 ? _48 : theme.$.palette[palette].softDynamicest};
border-color: ${(_53 = (_52 = (_51 = (_50 = (_49 = theme.$.palette[palette].button) === null || _49 === void 0 ? void 0 : _49.soft) === null || _50 === void 0 ? void 0 : _50.hover) === null || _51 === void 0 ? void 0 : _51.addon) === null || _52 === void 0 ? void 0 : _52.border) !== null && _53 !== void 0 ? _53 : theme.$.palette[palette].softDynamicest};
}
}
`
: ''}
`}
`
: `
${!isSoft
? `
.src-button-content {
border-color: ${(_56 = (_55 = (_54 = theme.$.palette[palette].button) === null || _54 === void 0 ? void 0 : _54.outline) === null || _55 === void 0 ? void 0 : _55.border) !== null && _56 !== void 0 ? _56 : theme.$.palette[palette].main};
color: ${(_59 = (_58 = (_57 = theme.$.palette[palette].button) === null || _57 === void 0 ? void 0 : _57.outline) === null || _58 === void 0 ? void 0 : _58.font) !== null && _59 !== void 0 ? _59 : theme.$.palette[palette].main};
}
${hasHover
? `
&:hover {
.src-button-content {
background: ${(_63 = (_62 = (_61 = (_60 = theme.$.palette[palette].button) === null || _60 === void 0 ? void 0 : _60.outline) === null || _61 === void 0 ? void 0 : _61.hover) === null || _62 === void 0 ? void 0 : _62.background) !== null && _63 !== void 0 ? _63 : theme.$.palette[palette].main};
color: ${(_67 = (_66 = (_65 = (_64 = theme.$.palette[palette].button) === null || _64 === void 0 ? void 0 : _64.outline) === null || _65 === void 0 ? void 0 : _65.hover) === null || _66 === void 0 ? void 0 : _66.font) !== null && _67 !== void 0 ? _67 : theme.$.palette[palette].font};
}
.src-button-addon {
background: ${(_72 = (_71 = (_70 = (_69 = (_68 = theme.$.palette[palette].button) === null || _68 === void 0 ? void 0 : _68.outline) === null || _69 === void 0 ? void 0 : _69.hover) === null || _70 === void 0 ? void 0 : _70.addon) === null || _71 === void 0 ? void 0 : _71.background) !== null && _72 !== void 0 ? _72 : theme.$.palette[palette].dynamicer};
color: ${(_77 = (_76 = (_75 = (_74 = (_73 = theme.$.palette[palette].button) === null || _73 === void 0 ? void 0 : _73.outline) === null || _74 === void 0 ? void 0 : _74.hover) === null || _75 === void 0 ? void 0 : _75.addon) === null || _76 === void 0 ? void 0 : _76.font) !== null && _77 !== void 0 ? _77 : theme.$.palette[palette].font};
}
}
`
: ''}
`
: `
.src-button-content {
border-color: ${(_81 = (_80 = (_79 = (_78 = theme.$.palette[palette].button) === null || _78 === void 0 ? void 0 : _78.soft) === null || _79 === void 0 ? void 0 : _79.outline) === null || _80 === void 0 ? void 0 : _80.border) !== null && _81 !== void 0 ? _81 : theme.$.palette[palette].soft};
color: ${(_85 = (_84 = (_83 = (_82 = theme.$.palette[palette].button) === null || _82 === void 0 ? void 0 : _82.soft) === null || _83 === void 0 ? void 0 : _83.outline) === null || _84 === void 0 ? void 0 : _84.font) !== null && _85 !== void 0 ? _85 : theme.$.palette[palette].soft};
}
${hasHover
? `
&:hover {
.src-button-content {
background: ${(_90 = (_89 = (_88 = (_87 = (_86 = theme.$.palette[palette].button) === null || _86 === void 0 ? void 0 : _86.soft) === null || _87 === void 0 ? void 0 : _87.outline) === null || _88 === void 0 ? void 0 : _88.hover) === null || _89 === void 0 ? void 0 : _89.background) !== null && _90 !== void 0 ? _90 : theme.$.palette[palette].soft};
color: ${(_95 = (_94 = (_93 = (_92 = (_91 = theme.$.palette[palette].button) === null || _91 === void 0 ? void 0 : _91.soft) === null || _92 === void 0 ? void 0 : _92.outline) === null || _93 === void 0 ? void 0 : _93.hover) === null || _94 === void 0 ? void 0 : _94.font) !== null && _95 !== void 0 ? _95 : theme.$.palette[palette].softFont};
}
.src-button-addon {
background: ${(_101 = (_100 = (_99 = (_98 = (_97 = (_96 = theme.$.palette[palette].button) === null || _96 === void 0 ? void 0 : _96.soft) === null || _97 === void 0 ? void 0 : _97.outline) === null || _98 === void 0 ? void 0 : _98.hover) === null || _99 === void 0 ? void 0 : _99.addon) === null || _100 === void 0 ? void 0 : _100.background) !== null && _101 !== void 0 ? _101 : theme.$.palette[palette].softDynamicer};
color: ${(_107 = (_106 = (_105 = (_104 = (_103 = (_102 = theme.$.palette[palette].button) === null || _102 === void 0 ? void 0 : _102.soft) === null || _103 === void 0 ? void 0 : _103.outline) === null || _104 === void 0 ? void 0 : _104.hover) === null || _105 === void 0 ? void 0 : _105.addon) === null || _106 === void 0 ? void 0 : _106.font) !== null && _107 !== void 0 ? _107 : theme.$.palette[palette].softFont};
}
}
`
: ''}
`}
`}
`
: `
.src-button-content {
border-color: transparent;
color: ${(_111 = (_110 = (_109 = (_108 = theme.$.palette[palette]) === null || _108 === void 0 ? void 0 : _108.button) === null || _109 === void 0 ? void 0 : _109.link) === null || _110 === void 0 ? void 0 : _110.font) !== null && _111 !== void 0 ? _111 : theme.$.palette[palette].main};
fill: ${(_115 = (_114 = (_113 = (_112 = theme.$.palette[palette]) === null || _112 === void 0 ? void 0 : _112.button) === null || _113 === void 0 ? void 0 : _113.link) === null || _114 === void 0 ? void 0 : _114.font) !== null && _115 !== void 0 ? _115 : theme.$.palette[palette].main};
}
${hasHover
? `
&:hover {
.src-button-content {
color: ${(_120 = (_119 = (_118 = (_117 = (_116 = theme.$.palette[palette]) === null || _116 === void 0 ? void 0 : _116.button) === null || _117 === void 0 ? void 0 : _117.link) === null || _118 === void 0 ? void 0 : _118.hover) === null || _119 === void 0 ? void 0 : _119.font) !== null && _120 !== void 0 ? _120 : theme.$.palette[palette].dynamicest};
text-decoration: underline;
}
}
`
: ''}
`}
${!hasButtonContainer
? `
&:focus {
box-shadow: 0 0 0 .15rem ${(_122 = (_121 = theme.$.palette[palette].button) === null || _121 === void 0 ? void 0 : _121.shadow) !== null && _122 !== void 0 ? _122 : theme.$.palette[palette].shadow};
}
`
: ''}
${isDisabled
? `
opacity: ${theme.$.opacity.buttonDisabled};
pointer-events: none;
`
: ''}
${isLoading
? `
pointer-events: none;
.src-button-content,
.src-button-addon {
color: transparent;
> * {
visibility: hidden;
}
}
`
: ''}
${hasSeparatedLeftAddon
? `
border-top-left-radius: 0;
border-bottom-left-radius: 0;
`
: ''}
${hasSeparatedRightAddon
? `
border-top-right-radius: 0;
border-bottom-right-radius: 0;
`
: ''}
.src-button-content {
border-radius: ${(isFixedSize && shape === 'rounded') ? '100%' : theme.$.radius.button[shape]};
${hasLeftAddon
? `
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
`
: ''}
${hasRightAddon
? `
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
`
: ''}
${hasSeparatedLeftAddon
? `
border-top-left-radius: 0;
border-bottom-left-radius: 0;
`
: ''}
${hasSeparatedRightAddon
? `
border-top-right-radius: 0;
border-bottom-right-radius: 0;
`
: ''}
}
`;
});