smart-react-components
Version:
React UI library, wide variety of editable ready to use Styled and React components.
376 lines (360 loc) • 13.9 kB
JavaScript
;
class CSSHelper {
/**
* Gets CSS reference(s) by key.
*
* @param props - Styled component props
* @param key
*/
static getCSSByProps(props, key) {
const customKeys = props.customKeys;
const elementKeys = props.elementKeys;
let keys;
let _key;
let breakpoint;
if (customKeys[key] || elementKeys[key]) {
keys = customKeys[key] ? customKeys : elementKeys;
_key = key;
breakpoint = "Xs";
}
else {
_key = key.substring(0, key.length - 2);
if (customKeys[_key] || elementKeys[_key]) {
keys = customKeys[_key] ? customKeys : elementKeys;
breakpoint = key.substring(key.length - 2, key.length);
}
}
if (keys && props[key] !== null && props[key] !== false && typeof props[key] !== "undefined") {
let css;
let value = props[key];
let important;
if (Array.isArray(value)) {
important = value[1];
value = value[0];
}
if (typeof keys[_key] === "string")
css = `${keys[_key]}:${value}${important ? " !important" : ""};`;
else {
css = keys[_key](value, props.theme.src);
if (important)
css = css.replace(/;/g, " !important;");
}
return this.addMedia(props.theme.src, breakpoint, css);
}
return "";
}
/**
* If value is string, returns it as it is.
* If it is a number, converts it to string and adds "px" suffix.
*
* @param value
*/
static setValue(value) {
if (typeof value === "string")
return value;
return `${value}px`;
}
/**
* If value is registered in theme.zIndex, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setZIndex(value, theme) {
return `${theme.zIndex[value] || value}`;
}
/**
* If value is registered in theme.length, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setLength(value, theme) {
return this.setValue(theme.length[value] || value);
}
/**
* If value is registered in theme.radius, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setRadius(value, theme) {
return this.setValue(theme.radius[value] || value);
}
/**
* If value is registered in theme.color, returns the property in the theme.
* If it is registered as a type in the theme, returns type color in the theme.
* If not returns the value.
*
* @param value
* @param theme
*/
static setColor(value, theme) {
if (theme.color[value])
return theme.color[value];
if (theme.type[value])
return theme.type[value].main;
const valueSplit = value.split(".");
if (valueSplit.length == 2 && theme.type[valueSplit[0]])
return theme.type[valueSplit[0]][valueSplit[1]];
return value;
}
/**
* If value is registered in theme.fontFamily, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setFontFamily(value, theme) {
return theme.fontFamily[value] || value;
}
/**
* If value is registered in theme.fontWeight, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setFontWeight(value, theme) {
return this.setValue(theme.fontWeight[value] || value);
}
/**
* If value is registered in theme.fontSize, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setFontSize(value, theme) {
return this.setValue(theme.fontSize[value] || value);
}
/**
* If value is registered in theme.iconSize, returns the property in the theme, if not returns the value.
*
* @param value
* @param theme
*/
static setIconSize(value, theme) {
return this.setValue(theme.iconSize[value] || value);
}
/**
* Adds media rule to css by breakpoint.
*
* @param theme
* @param breakpoint
* @param css
*/
static addMedia(theme, breakpoint, css) {
if (breakpoint == "Xs")
return css;
return `
@media(min-width:${theme.grid.breakpoint[this.BREAKPOINT[breakpoint]]}px) {
${css}
}
`;
}
}
CSSHelper.BREAKPOINT = {
Sm: "small",
Md: "medium",
Lg: "large",
Xl: "xlarge",
small: "small",
medium: "medium",
large: "large",
xlarge: "xlarge"
};
var backgroundPropsKeys = {
bg: "background",
bgAttachment: "background-attachment",
bgBlendMode: "background-blend-mode",
bgClip: "background-clip",
bgColor: (v, t) => `background-color:${CSSHelper.setColor(v, t)};`,
bgImage: v => `background-image:${(Array.isArray(v) ? v : [v]).map(i => `url("${i}")`).join(" ")};`,
bgOrigin: "background-origin",
bgPosition: "background-position",
bgRepeat: "background-repeat",
bgSize: v => `background-size:${CSSHelper.setValue(v)};`
};
var borderPropsKeys = {
border: "border",
borderColor: (v, t) => `border-color:${CSSHelper.setColor(v, t)};`,
borderStyle: "border-style",
borderWidth: (v, t) => `border-width:${CSSHelper.setLength(v, t)};`,
borderRadius: (v, t) => `border-radius:${CSSHelper.setRadius(v, t)};`,
borderTop: "border-top",
borderTopColor: (v, t) => `border-top-color:${CSSHelper.setColor(v, t)};`,
borderTopRadius: (v, t) => `
border-top-left-radius: ${CSSHelper.setRadius(v, t)};
border-top-right-radius: ${CSSHelper.setRadius(v, t)};
`,
borderTopLeftRadius: (v, t) => `border-top-left-radius: ${CSSHelper.setRadius(v, t)};`,
borderTopRightRadius: (v, t) => `border-top-right-radius: ${CSSHelper.setRadius(v, t)};`,
borderTopStyle: "border-top-style",
borderTopWidth: (v, t) => `border-top-width:${CSSHelper.setLength(v, t)};`,
borderBottom: "border-bottom",
borderBottomColor: (v, t) => `border-bottom-color:${CSSHelper.setColor(v, t)};`,
borderBottomRadius: (v, t) => `
border-bottom-left-radius: ${CSSHelper.setRadius(v, t)};
border-bottom-right-radius: ${CSSHelper.setRadius(v, t)};
`,
borderBottomLeftRadius: (v, t) => `border-bottom-left-radius: ${CSSHelper.setRadius(v, t)};`,
borderBottomRightRadius: (v, t) => `border-bottom-right-radius: ${CSSHelper.setRadius(v, t)};`,
borderBottomStyle: "border-bottom-style",
borderBottomWidth: (v, t) => `border-bottom-width:${CSSHelper.setLength(v, t)};`,
borderLeft: "border-left",
borderLeftColor: (v, t) => `border-left-color:${CSSHelper.setColor(v, t)};`,
borderLeftRadius: (v, t) => `
border-top-left-radius: ${CSSHelper.setRadius(v, t)};
border-bottom-left-radius: ${CSSHelper.setRadius(v, t)};
`,
borderLeftStyle: "border-left-style",
borderLeftWidth: (v, t) => `border-left-width:${CSSHelper.setLength(v, t)};`,
borderRight: "border-right",
borderRightColor: (v, t) => `border-right-color:${CSSHelper.setColor(v, t)};`,
borderRightRadius: (v, t) => `
border-top-right-radius: ${CSSHelper.setRadius(v, t)};
border-bottom-right-radius: ${CSSHelper.setRadius(v, t)};
`,
borderRightStyle: "border-right-style",
borderRightWidth: (v, t) => `border-right-width:${CSSHelper.setLength(v, t)};`,
borderImage: "border-image",
borderImageOutset: (v, t) => `border-image-outset:${CSSHelper.setLength(v, t)};`,
borderImageRepeat: "border-image-repeat",
borderImageSlice: "border-image-slice",
borderImageSource: v => `border-image-source:url(${v});`,
borderImageWidth: (v, t) => `border-image-width:${CSSHelper.setLength(v, t)};`,
borderCollapse: "border-collapse",
borderSpacing: (v, t) => `border-spacing:${CSSHelper.setLength(v, t)};`
};
var dimensionPropsKeys = {
width: (v, t) => `width:${CSSHelper.setLength(v, t)};`,
minWidth: (v, t) => `min-width:${CSSHelper.setLength(v, t)};`,
maxWidth: (v, t) => `max-width:${CSSHelper.setLength(v, t)};`,
height: (v, t) => `height:${CSSHelper.setLength(v, t)};`,
minHeight: (v, t) => `min-height:${CSSHelper.setLength(v, t)};`,
maxHeight: (v, t) => `max-height:${CSSHelper.setLength(v, t)};`
};
var displayPropsKeys = {
display: "display",
visibility: "visibility",
pointerEvents: "pointer-events",
cursor: "cursor"
};
var flexPropsKeys = {
flex: "flex",
flexGrow: "flex-grow",
flexShrink: "flex-shrink",
flexBasis: (v, t) => `flex-basis:${CSSHelper.setLength(v, t)};`,
flexFlow: "flex-flow",
flexDirection: "flex-direction",
flexWrap: "flex-wrap",
justifyContent: "justify-content",
alignItems: "align-items",
alignContent: "align-content",
alignSelf: "align-self",
order: "order"
};
var fontPropsKeys = {
font: "font",
fontFamily: (v, t) => `font-family:${CSSHelper.setFontFamily(v, t)};`,
fontSize: (v, t) => `font-size:${CSSHelper.setFontSize(v, t)};`,
fontStyle: "font-style",
fontVariant: "font-variant",
fontWeight: (v, t) => `font-weight:${CSSHelper.setFontWeight(v, t)};`
};
var gridPropsKeys = {
grid: "grid",
gridArea: "grid-area",
gridAutoColumns: v => `grid-auto-columns:${CSSHelper.setValue(v)};`,
gridAutoFlow: "grid-auto-flow",
gridAutoRows: "grid-auto-rows",
gridColumn: "grid-column",
gridColumnEnd: "grid-column-end",
gridColumnGap: v => `grid-column-gap:${CSSHelper.setValue(v)};`,
gridColumnStart: "grid-column-start",
gridGap: v => `grid-gap:${CSSHelper.setValue(v)};`,
gridRow: "grid-row",
gridRowEnd: "grid-row-end",
gridRowGap: v => `grid-row-gap:${CSSHelper.setValue(v)};`,
gridRowStart: "grid-row-start",
gridTemplate: "grid-template",
gridTemplateAreas: "grid-template-areas",
gridTemplateColumns: v => `grid-template-columns:${CSSHelper.setValue(v)};`,
gridTemplateRows: v => `grid-template-rows:${CSSHelper.setValue(v)};`
};
var overflowPropsKeys = {
overflow: "overflow",
overflowX: "overflow-x",
overflowY: "overflow-y",
webkitOverflowScrolling: "-webkit-overflow-scrolling"
};
var positionPropsKeys = {
position: "position",
zIndex: (v, t) => `z-index:${CSSHelper.setZIndex(v, t)};`,
left: (v, t) => `left:${CSSHelper.setLength(v, t)};`,
top: (v, t) => `top:${CSSHelper.setLength(v, t)};`,
right: (v, t) => `right:${CSSHelper.setLength(v, t)};`,
bottom: (v, t) => `bottom:${CSSHelper.setLength(v, t)};`
};
var spacePropsKeys = {
m: (v, t) => `margin:${CSSHelper.setLength(v, t)};`,
mx: (v, t) => `
margin-left:${CSSHelper.setLength(v, t)};
margin-right:${CSSHelper.setLength(v, t)};
`,
my: (v, t) => `
margin-top:${CSSHelper.setLength(v, t)};
margin-bottom:${CSSHelper.setLength(v, t)};
`,
ml: (v, t) => `margin-left:${CSSHelper.setLength(v, t)};`,
mr: (v, t) => `margin-right:${CSSHelper.setLength(v, t)};`,
mt: (v, t) => `margin-top:${CSSHelper.setLength(v, t)};`,
mb: (v, t) => `margin-bottom:${CSSHelper.setLength(v, t)};`,
p: (v, t) => `padding:${CSSHelper.setLength(v, t)};`,
px: (v, t) => `
padding-left:${CSSHelper.setLength(v, t)};
padding-right:${CSSHelper.setLength(v, t)};
`,
py: (v, t) => `
padding-top:${CSSHelper.setLength(v, t)};
padding-bottom:${CSSHelper.setLength(v, t)};
`,
pl: (v, t) => `padding-left:${CSSHelper.setLength(v, t)};`,
pr: (v, t) => `padding-right:${CSSHelper.setLength(v, t)};`,
pt: (v, t) => `padding-top:${CSSHelper.setLength(v, t)};`,
pb: (v, t) => `padding-bottom:${CSSHelper.setLength(v, t)};`,
};
var svgPropsKeys = {
fill: (v, t) => `fill:${CSSHelper.setColor(v, t)};`,
stroke: (v, t) => `stroke:${CSSHelper.setColor(v, t)};`,
iconSize: (v, t) => `
width:${CSSHelper.setIconSize(v, t)};
height:${CSSHelper.setIconSize(v, t)};
`
};
var textPropsKeys = {
color: (v, t) => `color:${CSSHelper.setColor(v, t)};`,
direction: "direction",
letterSpacing: v => `letter-spacing:${CSSHelper.setValue(v)};`,
lineHeight: v => `line-height:${CSSHelper.setValue(v)};`,
textAlign: "text-align",
textDecoration: "text-decoration",
textIndent: "text-indent",
textShadow: "text-shadow",
textTransform: "text-transform",
textOverflow: "text-overflow",
unicodeBidi: "unicode-bidi",
whiteSpace: v => `white-space:${CSSHelper.setValue(v)};`,
wordBreak: "word-break",
wordSpacing: v => `word-spacing:${CSSHelper.setValue(v)};`,
wordWrap: "word-wrap",
};
const elementKeys = Object.assign({}, backgroundPropsKeys, borderPropsKeys, dimensionPropsKeys, displayPropsKeys, flexPropsKeys, fontPropsKeys, gridPropsKeys, overflowPropsKeys, positionPropsKeys, spacePropsKeys, svgPropsKeys, textPropsKeys);
const customKeys = {};
const attrs = {
elementKeys,
customKeys
};
const css = props => Object.keys(props).map(key => CSSHelper.getCSSByProps(props, key));
exports.CSSHelper = CSSHelper;
exports.attrs = attrs;
exports.css = css;