Add onLayout callback prop

This commit is contained in:
Antoine Taillefer
2018-07-05 12:23:32 +02:00
parent da38fd206a
commit d2c225224b
4 changed files with 22 additions and 4 deletions

View File

@@ -105,6 +105,7 @@ import { SuperGridSectionList } from 'react-native-super-grid';
| style | [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) styles (Object) | | Styles for the container. Styles for an item should be applied inside ```renderItem```. | | style | [FlatList](https://facebook.github.io/react-native/docs/flatlist.html) styles (Object) | | Styles for the container. Styles for an item should be applied inside ```renderItem```. |
| staticDimension | Number | undefined | Specifies a static width or height for the GridView container. If your container dimension is known or can be calculated at runtime (via ```Dimensions.get('window')```, for example), passing this prop will force the grid container to that dimension size and avoid the reflow associated with dynamically calculating it| | staticDimension | Number | undefined | Specifies a static width or height for the GridView container. If your container dimension is known or can be calculated at runtime (via ```Dimensions.get('window')```, for example), passing this prop will force the grid container to that dimension size and avoid the reflow associated with dynamically calculating it|
| horizontal | boolean | false | If true, the grid will be scrolling horizontally **(this prop doesn't affect the SuperGridSectionList, which only scrolls vertically)** | | horizontal | boolean | false | If true, the grid will be scrolling horizontally **(this prop doesn't affect the SuperGridSectionList, which only scrolls vertically)** |
| onLayout | Function | | Optional callback ran by the internal `FlatList` or `SectionList`'s `onLayout` function, thus invoked on mount and layout changes. |
Note: If you want your item to fill the height when using a horizontal grid, you should give it a height of '100%' Note: If you want your item to fill the height when using a horizontal grid, you should give it a height of '100%'

View File

@@ -27,7 +27,7 @@ class SuperGridSectionList extends Component {
onLayout(e) { onLayout(e) {
const { staticDimension } = this.props; const { staticDimension, onLayout } = this.props;
if (!staticDimension) { if (!staticDimension) {
const { width, height } = e.nativeEvent.layout || {}; const { width, height } = e.nativeEvent.layout || {};
@@ -35,6 +35,10 @@ class SuperGridSectionList extends Component {
...this.getDimensions(width), ...this.getDimensions(width),
}); });
} }
// run onLayout callback if provided
if (onLayout) {
onLayout(e);
}
} }
getDimensions(lvDimension, itemDim) { getDimensions(lvDimension, itemDim) {
@@ -102,7 +106,7 @@ class SuperGridSectionList extends Component {
} }
render() { render() {
const { sections, style, spacing, fixed, itemDimension, renderItem, renderSectionHeader, ...props } = this.props; const { sections, style, spacing, fixed, itemDimension, renderItem, renderSectionHeader, onLayout, ...props } = this.props;
const { itemsPerRow } = this.state; const { itemsPerRow } = this.state;
//Deep copy, so that re-renders and chunkArray functions don't affect the actual items object //Deep copy, so that re-renders and chunkArray functions don't affect the actual items object
@@ -149,6 +153,7 @@ SuperGridSectionList.propTypes = {
spacing: PropTypes.number, spacing: PropTypes.number,
style: ViewPropTypes.style, style: ViewPropTypes.style,
staticDimension: PropTypes.number, staticDimension: PropTypes.number,
onLayout: PropTypes.func,
}; };
SuperGridSectionList.defaultProps = { SuperGridSectionList.defaultProps = {

7
index.d.ts vendored
View File

@@ -47,6 +47,12 @@ export interface SuperGridProps<ItemType = any> {
* If true, the grid will be scrolling horizontally * If true, the grid will be scrolling horizontally
*/ */
horizontal?: boolean; horizontal?: boolean;
/**
* Optional callback ran by the internal `FlatList` or `SectionList`'s `onLayout` function,
* thus invoked on mount and layout changes.
*/
onLayout?: func;
} }
/** /**
@@ -66,6 +72,7 @@ export interface SuperGridSectionListProps<ItemType = any> {
style?: StyleProp<ScrollViewStyle>, style?: StyleProp<ScrollViewStyle>,
staticDimension?: number, staticDimension?: number,
renderSectionHeader?: (info: { section: SectionListData<ItemType> }) => JSX.Element; renderSectionHeader?: (info: { section: SectionListData<ItemType> }) => JSX.Element;
onLayout?: func,
} }
export class SuperGridSectionList<ItemType = any> extends React.Component< export class SuperGridSectionList<ItemType = any> extends React.Component<

View File

@@ -23,7 +23,7 @@ class SuperGrid extends Component {
} }
onLayout(e) { onLayout(e) {
const { staticDimension, horizontal } = this.props; const { staticDimension, horizontal, onLayout } = this.props;
if (!staticDimension) { if (!staticDimension) {
const { width, height } = e.nativeEvent.layout || {}; const { width, height } = e.nativeEvent.layout || {};
@@ -31,6 +31,10 @@ class SuperGrid extends Component {
...this.getDimensions(horizontal ? height : width), ...this.getDimensions(horizontal ? height : width),
}); });
} }
// run onLayout callback if provided
if (onLayout) {
onLayout(e);
}
} }
getDimensions(lvDimension, itemDim) { getDimensions(lvDimension, itemDim) {
@@ -142,7 +146,7 @@ class SuperGrid extends Component {
render() { render() {
const { items, style, spacing, fixed, itemDimension, renderItem, const { items, style, spacing, fixed, itemDimension, renderItem,
horizontal, ...props } = this.props; horizontal, onLayout, ...props } = this.props;
const { itemsPerRow } = this.state; const { itemsPerRow } = this.state;
const chunked = chunkArray(items, itemsPerRow); //Splitting the data into rows const chunked = chunkArray(items, itemsPerRow); //Splitting the data into rows
@@ -182,6 +186,7 @@ SuperGrid.propTypes = {
style: ViewPropTypes.style, style: ViewPropTypes.style,
staticDimension: PropTypes.number, staticDimension: PropTypes.number,
horizontal: PropTypes.bool, horizontal: PropTypes.bool,
onLayout: PropTypes.func,
}; };
SuperGrid.defaultProps = { SuperGrid.defaultProps = {