@tamagui/react-native-web-lite
Version:
React Native for Web
138 lines (137 loc) • 4.27 kB
JavaScript
import View from "../../../View";
import { StyleSheet, invariant } from "@tamagui/react-native-web-internals";
import { VirtualizedListCellContextProvider } from "./VirtualizedListContext.mjs";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
class CellRenderer extends React.Component {
state = {
separatorProps: {
highlighted: !1,
leadingItem: this.props.item
}
};
static getDerivedStateFromProps(props, prevState) {
return {
separatorProps: {
...prevState.separatorProps,
leadingItem: props.item
}
};
}
// TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
// reused by SectionList and we can keep VirtualizedList simpler.
// $FlowFixMe[missing-local-annot]
_separators = {
highlight: () => {
const {
cellKey,
prevCellKey
} = this.props;
this.props.onUpdateSeparators?.([cellKey, prevCellKey], {
highlighted: !0
});
},
unhighlight: () => {
const {
cellKey,
prevCellKey
} = this.props;
this.props.onUpdateSeparators?.([cellKey, prevCellKey], {
highlighted: !1
});
},
updateProps: (select, newProps) => {
const {
cellKey,
prevCellKey
} = this.props;
this.props.onUpdateSeparators?.([select === "leading" ? prevCellKey : cellKey], newProps);
}
};
updateSeparatorProps(newProps) {
this.setState(state => ({
separatorProps: {
...state.separatorProps,
...newProps
}
}));
}
componentWillUnmount() {
this.props.onUnmount?.(this.props.cellKey);
}
_onLayout = nativeEvent => {
this.props.onCellLayout?.(nativeEvent, this.props.cellKey, this.props.index);
};
_renderElement(renderItem, ListItemComponent, item, index) {
if (renderItem && ListItemComponent && console.warn("VirtualizedList: Both ListItemComponent and renderItem props are present. ListItemComponent will take precedence over renderItem."), ListItemComponent) return React.createElement(ListItemComponent, {
item,
index,
separators: this._separators
});
if (renderItem) return renderItem({
item,
index,
separators: this._separators
});
invariant(!1, "VirtualizedList: Either ListItemComponent or renderItem props are required but none were found.");
}
render() {
const {
CellRendererComponent,
ItemSeparatorComponent,
ListItemComponent,
cellKey,
horizontal,
item,
index,
inversionStyle,
onCellFocusCapture,
onCellLayout,
renderItem
} = this.props,
element = this._renderElement(renderItem, ListItemComponent, item, index),
itemSeparator = React.isValidElement(ItemSeparatorComponent) ?
// $FlowFixMe[incompatible-type]
ItemSeparatorComponent :
// $FlowFixMe[incompatible-type]
ItemSeparatorComponent && /* @__PURE__ */jsx(ItemSeparatorComponent, {
...this.state.separatorProps
}),
cellStyle = inversionStyle ? horizontal ? [styles.rowReverse, inversionStyle] : [styles.columnReverse, inversionStyle] : horizontal ? [styles.row, inversionStyle] : inversionStyle,
result = CellRendererComponent ? /* @__PURE__ */jsxs(CellRendererComponent, {
cellKey,
index,
item,
style: cellStyle,
onFocusCapture: onCellFocusCapture,
...(onCellLayout && {
onLayout: this._onLayout
}),
children: [element, itemSeparator]
}) : /* @__PURE__ */jsxs(View, {
style: cellStyle,
onFocusCapture: onCellFocusCapture,
...(onCellLayout && {
onLayout: this._onLayout
}),
children: [element, itemSeparator]
});
return /* @__PURE__ */jsx(VirtualizedListCellContextProvider, {
cellKey: this.props.cellKey,
children: result
});
}
}
const styles = StyleSheet.create({
row: {
flexDirection: "row"
},
rowReverse: {
flexDirection: "row-reverse"
},
columnReverse: {
flexDirection: "column-reverse"
}
});
export { CellRenderer as default };
//# sourceMappingURL=VirtualizedListCellRenderer.mjs.map