mirror of
https://github.com/zhigang1992/react-native-super-grid.git
synced 2026-04-30 05:15:22 +08:00
Add onLayout callback prop
This commit is contained in:
@@ -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%'
|
||||||
|
|
||||||
|
|||||||
@@ -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
7
index.d.ts
vendored
@@ -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<
|
||||||
|
|||||||
9
index.js
9
index.js
@@ -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 = {
|
||||||
|
|||||||
Reference in New Issue
Block a user