diff --git a/SuperGrid.js b/SuperGrid.js index 57c309c..9d6743b 100644 --- a/SuperGrid.js +++ b/SuperGrid.js @@ -3,7 +3,7 @@ import { View, Dimensions, ViewPropTypes, FlatList, } from 'react-native'; import PropTypes from 'prop-types'; -import { chunkArray, generateStyles } from './utils'; +import { chunkArray, calculateDimensions, generateStyles } from './utils'; import SuperGridSectionList from './SuperGridSectionList'; @@ -14,10 +14,15 @@ class SuperGrid extends React.Component { this.renderRow = this.renderRow.bind(this); this.onLayout = this.onLayout.bind(this); + const { staticDimension, horizontal } = props; + // Calculate total dimensions and set to state - const { horizontal } = props; - const dimension = horizontal ? 'height' : 'width'; - const totalDimension = Dimensions.get('window')[dimension]; + let totalDimension = staticDimension; + + if (!staticDimension) { + const dimension = horizontal ? 'height' : 'width'; + totalDimension = Dimensions.get('window')[dimension]; + } this.state = { totalDimension, @@ -98,22 +103,23 @@ class SuperGrid extends React.Component { ...restProps } = this.props; - const totalDimension = staticDimension || this.state.totalDimension; - const itemTotalDimension = itemDimension + spacing; - const availableDimension = totalDimension - spacing; // One spacing extra - const itemsPerRow = Math.floor(availableDimension / itemTotalDimension); - const containerDimension = availableDimension / itemsPerRow; + const { totalDimension } = this.state; - const { containerStyle, rowStyle } = generateStyles({ - totalDimension, - horizontal, + const { containerDimension, itemsPerRow, fixedSpacing } = calculateDimensions({ itemDimension, - itemTotalDimension, - availableDimension, - containerDimension, + staticDimension, + totalDimension, spacing, fixed, - itemsPerRow, + }); + + const { containerStyle, rowStyle } = generateStyles({ + horizontal, + itemDimension, + containerDimension, + spacing, + fixedSpacing, + fixed, }); const rows = chunkArray(items, itemsPerRow); // Splitting the data into rows diff --git a/SuperGridSectionList.js b/SuperGridSectionList.js index 67bac7a..6f45ba0 100644 --- a/SuperGridSectionList.js +++ b/SuperGridSectionList.js @@ -3,7 +3,7 @@ import { View, Dimensions, ViewPropTypes, SectionList, } from 'react-native'; import PropTypes from 'prop-types'; -import { generateStyles, chunkArray } from './utils'; +import { generateStyles, calculateDimensions, chunkArray } from './utils'; class SuperGridSectionList extends Component { constructor(props) { @@ -11,10 +11,13 @@ class SuperGridSectionList extends Component { this.onLayout = this.onLayout.bind(this); this.renderRow = this.renderRow.bind(this); + const { staticDimension } = props; + // Calculate total dimensions and set to state - const { horizontal } = props; - const dimension = horizontal ? 'height' : 'width'; - const totalDimension = Dimensions.get('window')[dimension]; + let totalDimension = staticDimension; + if (!staticDimension) { + totalDimension = Dimensions.get('window').width; + } this.state = { totalDimension, @@ -22,12 +25,11 @@ class SuperGridSectionList extends Component { } onLayout(e) { - const { staticDimension, horizontal, onLayout } = this.props; + const { staticDimension, onLayout } = this.props; const { totalDimension } = this.state; if (!staticDimension) { - const { width, height } = e.nativeEvent.layout || {}; - const newTotalDimension = horizontal ? height : width; + const { width: newTotalDimension } = e.nativeEvent.layout || {}; if (totalDimension !== newTotalDimension) { this.setState({ @@ -95,21 +97,22 @@ class SuperGridSectionList extends Component { ...props } = this.props; - const totalDimension = staticDimension || this.state.totalDimension; - const itemTotalDimension = itemDimension + spacing; - const availableDimension = totalDimension - spacing; // One spacing extra - const itemsPerRow = Math.floor(availableDimension / itemTotalDimension); - const containerDimension = availableDimension / itemsPerRow; + const { totalDimension } = this.state; - const { containerStyle, rowStyle } = generateStyles({ - totalDimension, + const { containerDimension, itemsPerRow, fixedSpacing } = calculateDimensions({ itemDimension, - itemTotalDimension, - availableDimension, - containerDimension, + staticDimension, + totalDimension, spacing, fixed, - itemsPerRow, + }); + + const { containerStyle, rowStyle } = generateStyles({ + itemDimension, + containerDimension, + spacing, + fixedSpacing, + fixed, }); const groupedSections = sections.map(({ title, data }) => { diff --git a/utils.js b/utils.js index f8a5530..14feb67 100644 --- a/utils.js +++ b/utils.js @@ -13,22 +13,45 @@ function chunkArray(array = [], size) { }, []); } +function calculateDimensions({ + itemDimension, + staticDimension, + totalDimension, + fixed, + spacing, +}) { + const usableTotalDimension = staticDimension || totalDimension; + const itemTotalDimension = itemDimension + spacing; + const availableDimension = usableTotalDimension - spacing; // One spacing extra + const itemsPerRow = Math.floor(availableDimension / itemTotalDimension); + const containerDimension = availableDimension / itemsPerRow; + + let fixedSpacing; + if (fixed) { + fixedSpacing = (totalDimension - (itemDimension * itemsPerRow)) / (itemsPerRow + 1); + } + + return { + itemTotalDimension, + availableDimension, + itemsPerRow, + containerDimension, + fixedSpacing, + }; +} + function generateStyles({ itemDimension, containerDimension, spacing, fixed, horizontal, - totalDimension, - itemsPerRow, + fixedSpacing, }) { - const fixedSpacing = (totalDimension - (itemDimension * itemsPerRow)) / (itemsPerRow + 1); - let rowStyle = { flexDirection: 'row', paddingLeft: fixed ? fixedSpacing : spacing, paddingBottom: spacing, - // borderWidth: 1, }; let containerStyle = { @@ -59,4 +82,4 @@ function generateStyles({ }; } -export { chunkArray, generateStyles }; +export { chunkArray, calculateDimensions, generateStyles };