Last active
September 18, 2020 02:30
-
-
Save ravid7000/0ee8a69905ac1aac46fcf69772296906 to your computer and use it in GitHub Desktop.
styled component base element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import styled from 'styled-components'; | |
/* | |
BaseElementProps { | |
// text alignment | |
textAlign?: 'left' | 'right' | 'center'; | |
// spacing | |
ml?: string; | |
mr?: string; | |
mt?: string; | |
mb?: string; | |
pl?: string; | |
pr?: string; | |
pt?: string; | |
pb?: string; | |
// colors | |
color?: string; | |
backgroundColor?: string; | |
// display | |
display?: | |
| 'flex' | |
| 'inline-flex' | |
| 'block' | |
| 'inline-block' | |
| 'inline' | |
| 'none'; | |
justifyContent?: | |
| 'center' | |
| 'flex-start' | |
| 'flex-end' | |
| 'space-around' | |
| 'space-between'; | |
alignItems?: | |
| 'center' | |
| 'flex-start' | |
| 'flex-end' | |
| 'space-around' | |
| 'space-between'; | |
} | |
*/ | |
function spacing({ spacing }) { | |
if (!spacing) { | |
return null; | |
} | |
let styles = {}; | |
// paddings | |
const { p, px, py, pl, pr, pb, pt } = spacing; | |
// margins | |
const { m, mx, my, ml, mr, mb, mt } = spacing; | |
// paddings | |
if (px) { | |
styles.paddingLeft = px; | |
styles.paddingRight = px; | |
} | |
if (py) { | |
styles.paddingTop = py; | |
styles.paddingBottom = py; | |
} | |
if (pl) { | |
styles.paddingLeft = pl; | |
} | |
if (pr) { | |
styles.paddingRight = pr; | |
} | |
if (pb) { | |
styles.paddingBottom = pb; | |
} | |
if (pt) { | |
styles.paddingTop = pt; | |
} | |
if (p) { | |
styles.padding = p; | |
} | |
// margins | |
if (mx) { | |
styles.marginLeft = mx; | |
styles.marginRight = mx; | |
} | |
if (my) { | |
styles.marginTop = my; | |
styles.marginBottom = my; | |
} | |
if (ml) { | |
styles.marginLeft = ml; | |
} | |
if (mr) { | |
styles.marginRight = mr; | |
} | |
if (mb) { | |
styles.marginBottom = mb; | |
} | |
if (mt) { | |
styles.marginTop = mt; | |
} | |
if (m) { | |
styles.margin = m; | |
} | |
return styles; | |
} | |
function colors({ color, bg, hoverColor, hoverBg }) { | |
let styles = ''; | |
if (color) { | |
styles.color = color; | |
} | |
if (bg) { | |
styles.backgroundColor = bg; | |
} | |
// hover | |
if (hoverColor) { | |
styles[':hover'] = { | |
color: hoverColor, | |
}; | |
} | |
if (hoverBg) { | |
styles[':hover'] = { | |
...styles[':hover'], | |
backgroundColor: hoverBg, | |
}; | |
} | |
return styles; | |
} | |
function flex({ flex, justifyContent, alignItems, flexWrap }) { | |
let styles = {}; | |
if (typeof flex === 'boolean' && flex) { | |
styles.display = flex; | |
} else if (flex) { | |
styles.flex = flex; | |
} | |
if (justifyContent) { | |
styles.justifyContent = justifyContent; | |
} | |
if (alignItems) { | |
styles.alignItems = alignItems; | |
} | |
if (flexWrap) { | |
styles.flexWrap = flexWrap; | |
} | |
return styles; | |
} | |
function textAlignment({ textAlign }) { | |
if (textAlign) { | |
return { textAlign }; | |
} | |
return null; | |
} | |
// can be global styles | |
function baseStyles({ theme }) { | |
return { | |
color: theme.colors.bodyText.main, | |
fontSize: theme.typography.body, | |
fontFamily: theme.typography.fontFamily, | |
boxSizing: 'border-box', | |
}; | |
} | |
const BaseElement = styled.div( | |
baseStyles, | |
spacing, | |
colors, | |
flex, | |
textAlignment, | |
); | |
export default BaseElement; | |
// Use Case: Generally BaseElement styles are extends by other components, but we can use BaseElement in react like this | |
import withTheme from 'styled-components' | |
const Comopnent = withTheme(({ theme }) => ( | |
<BaseElement textAlign="center" spacing={{ m: theme.spacing(2) }} bg={theme.colors.info.main} color={theme.colors.white.main}> | |
Styling with props | |
</BaseElement> | |
)); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment