@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
161 lines (148 loc) • 11.4 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Input_1 = __importDefault(require("@smart-react-components/core/Element/Input"));
const color_1 = require("@smart-react-components/core/util/color");
const styled_components_1 = __importDefault(require("styled-components"));
const css_1 = require("../../util/css");
const dom_1 = require("../../util/dom");
const InputPlaceholder_1 = __importDefault(require("./InputPlaceholder"));
exports.default = (0, styled_components_1.default)(Input_1.default).attrs(({ className = '', hasLeftAddon, hasRightAddon, isInput = true }) => (Object.assign(Object.assign({}, (!isInput && { as: 'div' })), { className: `src-input ${className}`, getInputSize: (v, t) => `
font-size: ${t.$.size.input[v].fontSize};
padding: ${t.$.size.input[v].padding.y} ${t.$.size.input[v].padding.x};
${hasLeftAddon
? `
padding-left: ${(0, css_1.toCSSValue)(t.$.size.input[v].padding.x)(v => v / 2)};
`
: ''}
${hasRightAddon
? `
padding-right: ${(0, css_1.toCSSValue)(t.$.size.input[v].padding.x)(v => v / 2)};
`
: ''}
`, isInput })))(({ theme, cursorKey, isDisabled, isFocused, isInput, isOutline, isSoft, palette }) => {
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;
return `
border: 0;
border-radius: 0;
flex: 1 1 auto;
font-family: ${theme.$.fontFamily.input};
min-width: 1px;
transition: 200ms 0s ease-in-out;
transition-property: background, color, fill;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
${(!isOutline && isSoft)
? `
font-weight: ${theme.$.fontWeight.bold};
`
: ''}
${!isOutline
? `
${!isSoft
? `
background: ${!isFocused ? ((_b = (_a = theme.$.palette[palette].input) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.palette[palette].main) : ((_e = (_d = (_c = theme.$.palette[palette].input) === null || _c === void 0 ? void 0 : _c.focused) === null || _d === void 0 ? void 0 : _d.background) !== null && _e !== void 0 ? _e : theme.$.palette[palette].dynamicer)};
color: ${!isFocused ? ((_g = (_f = theme.$.palette[palette].input) === null || _f === void 0 ? void 0 : _f.font) !== null && _g !== void 0 ? _g : theme.$.palette[palette].font) : ((_k = (_j = (_h = theme.$.palette[palette].input) === null || _h === void 0 ? void 0 : _h.focused) === null || _j === void 0 ? void 0 : _j.font) !== null && _k !== void 0 ? _k : theme.$.palette[palette].font)};
`
: `
background: ${!isFocused ? ((_o = (_m = (_l = theme.$.palette[palette].input) === null || _l === void 0 ? void 0 : _l.soft) === null || _m === void 0 ? void 0 : _m.background) !== null && _o !== void 0 ? _o : theme.$.palette[palette].soft) : ((_s = (_r = (_q = (_p = theme.$.palette[palette].input) === null || _p === void 0 ? void 0 : _p.soft) === null || _q === void 0 ? void 0 : _q.focused) === null || _r === void 0 ? void 0 : _r.background) !== null && _s !== void 0 ? _s : theme.$.palette[palette].softDynamicer)};
color: ${!isFocused ? ((_v = (_u = (_t = theme.$.palette[palette].input) === 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) : ((_z = (_y = (_x = (_w = theme.$.palette[palette].input) === null || _w === void 0 ? void 0 : _w.soft) === null || _x === void 0 ? void 0 : _x.focused) === null || _y === void 0 ? void 0 : _y.font) !== null && _z !== void 0 ? _z : theme.$.palette[palette].softFont)};
`}
${!isInput
? `
${InputPlaceholder_1.default} {
${!isSoft
? `
color: ${((_1 = (_0 = theme.$.palette[palette].input) === null || _0 === void 0 ? void 0 : _0.placeholder) === null || _1 === void 0 ? void 0 : _1.font) ? (_3 = (_2 = theme.$.palette[palette].input) === null || _2 === void 0 ? void 0 : _2.placeholder) === null || _3 === void 0 ? void 0 : _3.font : (0, color_1.getColor)(theme.$.palette[palette].font).alpha(theme.$.opacity.inputPlaceholder).rgb().toString()};
`
: `
color: ${((_6 = (_5 = (_4 = theme.$.palette[palette].input) === null || _4 === void 0 ? void 0 : _4.soft) === null || _5 === void 0 ? void 0 : _5.placeholder) === null || _6 === void 0 ? void 0 : _6.font) ? (_9 = (_8 = (_7 = theme.$.palette[palette].input) === null || _7 === void 0 ? void 0 : _7.soft) === null || _8 === void 0 ? void 0 : _8.placeholder) === null || _9 === void 0 ? void 0 : _9.font : (0, color_1.getColor)(theme.$.palette[palette].softFont).alpha(theme.$.opacity.inputPlaceholder).rgb().toString()};
`}
}
`
: `
${dom_1.placeholder.map(item => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
return `
&${item} {
${!isSoft
? `
color: ${((_b = (_a = theme.$.palette[palette].input) === null || _a === void 0 ? void 0 : _a.placeholder) === null || _b === void 0 ? void 0 : _b.font) ? (_d = (_c = theme.$.palette[palette].input) === null || _c === void 0 ? void 0 : _c.placeholder) === null || _d === void 0 ? void 0 : _d.font : (0, color_1.getColor)(theme.$.palette[palette].font).alpha(theme.$.opacity.inputPlaceholder).rgb().toString()};
`
: `
color: ${((_g = (_f = (_e = theme.$.palette[palette].input) === null || _e === void 0 ? void 0 : _e.soft) === null || _f === void 0 ? void 0 : _f.placeholder) === null || _g === void 0 ? void 0 : _g.font) ? (_k = (_j = (_h = theme.$.palette[palette].input) === null || _h === void 0 ? void 0 : _h.soft) === null || _j === void 0 ? void 0 : _j.placeholder) === null || _k === void 0 ? void 0 : _k.font : (0, color_1.getColor)(theme.$.palette[palette].softFont).alpha(theme.$.opacity.inputPlaceholder).rgb().toString()};
`}
opacity: 1;
}
`;
}).join(' ')}
`}
`
: `
${!isSoft
? `
background: ${(_12 = (_11 = (_10 = theme.$.palette[palette].input) === null || _10 === void 0 ? void 0 : _10.outline) === null || _11 === void 0 ? void 0 : _11.background) !== null && _12 !== void 0 ? _12 : theme.$.color.dynamic.background};
color: ${(_15 = (_14 = (_13 = theme.$.palette[palette].input) === null || _13 === void 0 ? void 0 : _13.outline) === null || _14 === void 0 ? void 0 : _14.font) !== null && _15 !== void 0 ? _15 : theme.$.color.dynamic.font};
`
: `
background: ${(_19 = (_18 = (_17 = (_16 = theme.$.palette[palette].input) === null || _16 === void 0 ? void 0 : _16.soft) === null || _17 === void 0 ? void 0 : _17.outline) === null || _18 === void 0 ? void 0 : _18.background) !== null && _19 !== void 0 ? _19 : theme.$.color.dynamic.background};
color: ${(_23 = (_22 = (_21 = (_20 = theme.$.palette[palette].input) === null || _20 === void 0 ? void 0 : _20.soft) === null || _21 === void 0 ? void 0 : _21.outline) === null || _22 === void 0 ? void 0 : _22.font) !== null && _23 !== void 0 ? _23 : theme.$.color.dynamic.font};
`}
${!isInput
? `
${!isDisabled
? `
${InputPlaceholder_1.default} {
color: ${!isSoft ? ((_27 = (_26 = (_25 = (_24 = theme.$.palette[palette].input) === null || _24 === void 0 ? void 0 : _24.outline) === null || _25 === void 0 ? void 0 : _25.placeholder) === null || _26 === void 0 ? void 0 : _26.font) !== null && _27 !== void 0 ? _27 : theme.$.color.dynamic.accent) : ((_32 = (_31 = (_30 = (_29 = (_28 = theme.$.palette[palette].input) === null || _28 === void 0 ? void 0 : _28.soft) === null || _29 === void 0 ? void 0 : _29.outline) === null || _30 === void 0 ? void 0 : _30.placeholder) === null || _31 === void 0 ? void 0 : _31.font) !== null && _32 !== void 0 ? _32 : theme.$.color.dynamic.accent)};
}
`
: ''}
`
: `
${dom_1.placeholder.map(item => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
return `
&${item} {
opacity: 1;
${!isDisabled
? `
color: ${!isSoft ? ((_d = (_c = (_b = (_a = theme.$.palette[palette].input) === null || _a === void 0 ? void 0 : _a.outline) === null || _b === void 0 ? void 0 : _b.placeholder) === null || _c === void 0 ? void 0 : _c.font) !== null && _d !== void 0 ? _d : theme.$.color.dynamic.accent) : ((_j = (_h = (_g = (_f = (_e = theme.$.palette[palette].input) === null || _e === void 0 ? void 0 : _e.soft) === null || _f === void 0 ? void 0 : _f.outline) === null || _g === void 0 ? void 0 : _g.placeholder) === null || _h === void 0 ? void 0 : _h.font) !== null && _j !== void 0 ? _j : theme.$.color.dynamic.accent)};
`
: ''}
${(!isOutline && isSoft)
? `
font-weight: ${theme.$.fontWeight.bold};
`
: ''}
}
`;
}).join(' ')}
`}
`}
&:active,
&:focus {
outline: 0;
}
${isDisabled && isOutline
? `
background: ${!isSoft ? ((_36 = (_35 = (_34 = (_33 = theme.$.palette[palette].input) === null || _33 === void 0 ? void 0 : _33.outline) === null || _34 === void 0 ? void 0 : _34.disabled) === null || _35 === void 0 ? void 0 : _35.background) !== null && _36 !== void 0 ? _36 : theme.$.color.dynamic.accent) : ((_41 = (_40 = (_39 = (_38 = (_37 = theme.$.palette[palette].input) === null || _37 === void 0 ? void 0 : _37.soft) === null || _38 === void 0 ? void 0 : _38.outline) === null || _39 === void 0 ? void 0 : _39.disabled) === null || _40 === void 0 ? void 0 : _40.background) !== null && _41 !== void 0 ? _41 : theme.$.color.dynamic.accent)};
color: ${!isSoft ? ((_45 = (_44 = (_43 = (_42 = theme.$.palette[palette].input) === null || _42 === void 0 ? void 0 : _42.outline) === null || _43 === void 0 ? void 0 : _43.disabled) === null || _44 === void 0 ? void 0 : _44.font) !== null && _45 !== void 0 ? _45 : theme.$.color.dynamic.gray) : ((_50 = (_49 = (_48 = (_47 = (_46 = theme.$.palette[palette].input) === null || _46 === void 0 ? void 0 : _46.soft) === null || _47 === void 0 ? void 0 : _47.outline) === null || _48 === void 0 ? void 0 : _48.disabled) === null || _49 === void 0 ? void 0 : _49.font) !== null && _50 !== void 0 ? _50 : theme.$.color.dynamic.gray)};
`
: ''}
${!isInput
? `
align-items: center;
display: flex;
justify-content: space-between;
position: relative;
`
: ''}
${(!isDisabled && cursorKey)
? `
cursor: ${theme.$.cursor[cursorKey]};
`
: ''}
`;
});