Created
July 18, 2019 17:11
-
-
Save jraff/a75cd920b878b5d015153778abb0367f to your computer and use it in GitHub Desktop.
This file contains hidden or 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 React from 'react' | |
| import PropTypes from 'prop-types' | |
| import { Broadcast } from 'react-broadcast' | |
| import { Grid } from 'react-flexbox-grid' | |
| import styled from 'styled-components' | |
| import { media, breakpoints } from '@tds/core-responsive' | |
| import Col from './Col/Col' | |
| import Row from './Row/Row' | |
| import calculateLevel from './calculateLevel' | |
| import safeRest from '../../shared/utils/safeRest' | |
| // import joinClassNames from '../../shared/utils/joinClassNames' | |
| // import styles from './FlexGrid.modules.scss' | |
| // { | |
| // ...media.from('xs').css({}), | |
| // ...media.from('sm').css({}), | |
| // ...media.from('md').css({}), | |
| // ...media.from('lg').css({}) | |
| // ...media.from('xl').css({}) | |
| // } | |
| const gridLimitWidth = ({ limitWidth }) => { | |
| const queries = Object.keys(breakpoints).reduce((acc, curr) => { | |
| const mediaQuery = media.from(curr).css({ maxWidth: breakpoints[curr] }) | |
| const key = Object.keys(mediaQuery)[0] | |
| acc[key] = mediaQuery[key] | |
| return acc | |
| }, {}) | |
| return ( | |
| limitWidth && { | |
| margin: '0 auto', | |
| ...queries, | |
| } | |
| ) | |
| } | |
| const gridReverse = bp => () => { | |
| return media.from(bp).css({ | |
| flexDirection: 'coloumn-reverse', | |
| }) | |
| } | |
| const StyledGrid = styled( | |
| ({ limitWidth, gutter, xsReverse, smReverse, mdReverse, lgReverse, xlReverse, ...rest }) => ( | |
| <Grid {...rest} /> | |
| ) | |
| )( | |
| { | |
| '&&': { | |
| // increase specificty, better than !important | |
| padding: 0, | |
| }, | |
| }, | |
| { | |
| display: 'flex', | |
| flexWrap: 'wrap', | |
| }, | |
| gridLimitWidth, | |
| ({ xsReverse, smReverse, mdReverse, lgReverse, xlReverse }) => { | |
| const a = { | |
| ...(xsReverse && gridReverse('xs')), | |
| ...(smReverse && gridReverse('sm')), | |
| ...(mdReverse && gridReverse('md')), | |
| ...(lgReverse && gridReverse('lg')), | |
| ...(xlReverse && gridReverse('xl')), | |
| } | |
| return a | |
| } | |
| ) | |
| /** | |
| * A mobile-first flexbox grid. | |
| * | |
| * @version ./package.json | |
| */ | |
| const FlexGrid = ({ | |
| limitWidth, | |
| gutter, | |
| xsReverse, | |
| smReverse, | |
| mdReverse, | |
| lgReverse, | |
| xlReverse, | |
| children, | |
| ...rest | |
| }) => { | |
| const reverseLevel = calculateLevel(xsReverse, smReverse, mdReverse, lgReverse, xlReverse) | |
| return ( | |
| <Broadcast channel="flex-grid" value={gutter}> | |
| <StyledGrid | |
| {...safeRest(rest)} | |
| fluid | |
| xsReverse={reverseLevel[0]} | |
| smReverse={reverseLevel[1]} | |
| mdReverse={reverseLevel[2]} | |
| lgReverse={reverseLevel[3]} | |
| xlReverse={reverseLevel[4]} | |
| limitWidth={limitWidth} | |
| // className={joinClassNames( | |
| // styles.flexGrid, | |
| // limitWidth && styles.limitWidth, | |
| // reverseLevel[0] ? styles.xsReverse : styles.xsReverseCancel, | |
| // reverseLevel[1] ? styles.smReverse : styles.smReverseCancel, | |
| // reverseLevel[2] ? styles.mdReverse : styles.mdReverseCancel, | |
| // reverseLevel[3] ? styles.lgReverse : styles.lgReverseCancel, | |
| // reverseLevel[4] ? styles.xlReverse : styles.xlReverseCancel | |
| // )} | |
| > | |
| {children} | |
| </StyledGrid> | |
| </Broadcast> | |
| ) | |
| } | |
| FlexGrid.propTypes = { | |
| /** | |
| * Whether or not to give the grid a fixed width. This also centres the grid horizontally. | |
| */ | |
| limitWidth: PropTypes.bool, | |
| /** | |
| * Whether or not to include gutters in between columns. | |
| */ | |
| gutter: PropTypes.bool, | |
| /** | |
| * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop. | |
| */ | |
| xsReverse: PropTypes.bool, | |
| /** | |
| * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop. | |
| */ | |
| smReverse: PropTypes.bool, | |
| /** | |
| * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop. | |
| */ | |
| mdReverse: PropTypes.bool, | |
| /** | |
| * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop. | |
| */ | |
| lgReverse: PropTypes.bool, | |
| /** | |
| * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop. | |
| */ | |
| xlReverse: PropTypes.bool, | |
| /** | |
| * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components. | |
| */ | |
| children: PropTypes.node.isRequired, | |
| } | |
| FlexGrid.defaultProps = { | |
| limitWidth: true, | |
| gutter: true, | |
| xsReverse: undefined, | |
| smReverse: undefined, | |
| mdReverse: undefined, | |
| lgReverse: undefined, | |
| xlReverse: undefined, | |
| } | |
| FlexGrid.Row = Row | |
| FlexGrid.Col = Col | |
| export default FlexGrid |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment