hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Setting ref for VirtualList to access its methods

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-10-21 09:57:42 +03:00
parent 7234d2eb7f
commit 118ed207a1
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/dock/pod-logs.tsx
View File

@ -12,7 +12,7 @@ import { InfoPanel } from "./info-panel";
import { IPodLogsData, logRange, podLogsStore } from "./pod-logs.store";
import { Button } from "../button";
import { PodLogControls } from "./pod-log-controls";
import { VirtualListRef } from "../virtual-list";
import { VirtualList } from "../virtual-list";
import debounce from "lodash/debounce";
interface Props {
@ -29,7 +29,8 @@ export class PodLogs extends React.Component<Props> {
@observable showJumpToBottom = false;
@observable findQuery = ""; // A text from search field
private logsElement = React.createRef<HTMLDivElement>(); // A reference for outer container in VirtualList
private logsElement = React.createRef<HTMLDivElement>(); // A reference for outer container in VirtualList
private virtualListRef = React.createRef<VirtualList>(); // A reference for VirtualList component
private lastLineIsShown = true; // used for proper auto-scroll content after refresh
componentDidMount() {
@ -208,12 +209,13 @@ export class PodLogs extends React.Component<Props> {
<Spinner center />
</div>
)}
<VirtualListRef
<VirtualList
items={this.logs}
rowHeights={rowHeights}
getRow={this.getLogRow}
onScroll={this.onScroll}
ref={this.logsElement}
outerRef={this.logsElement}
ref={this.virtualListRef}
/>
</>
);

13
src/renderer/components/virtual-list/virtual-list.tsx
View File

@ -83,6 +83,10 @@ export class VirtualList extends Component<Props, State> {
this.listRef.current.scrollToItem(index, "start");
})
scrollToItem = (index: number) => {
this.listRef.current.scrollToItem(index)
}
render() {
const { width, className, items, getRow, onScroll, outerRef } = this.props;
const { height, overscanCount } = this.state;
@ -129,11 +133,4 @@ const Row = observer((props: RowProps) => {
return React.cloneElement(row, {
style: Object.assign({}, row.props.style, style)
});
})
// A wrapper for passing ref back to parent component. This allows parent
// to control behavior of child component's DOM node. Scrolling event in our case.
// More info about ref forwading: https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
export const VirtualListRef = React.forwardRef((props: Props, ref) => (
<VirtualList outerRef={ref} {...props} />
));
})