orc-shared 5.10.0-dev.7 → 5.10.0-dev.9

package/src/components/MaterialUI/DataDisplay/Table.test.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import ReactDOM from "react-dom";
 import { act } from "react-dom/test-utils";
 import sinon from "sinon";
@@ -1244,4 +1244,118 @@ describe("Table", () => {
 		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
 		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 800);
 	});
+
+	it("should scroll to top", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		state = state.setIn(
+			["view", "testScrollbarPosition"],
+			Immutable.fromJS({
+				scrollBarPosition: 800,
+			}),
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const CustomTable = () => {
+			const ref = useRef(null);
+
+			const clickToTop = () => {
+				ref.current && ref.current.scrollToTop();
+			};
+
+			return (
+				<>
+					<input type="button" onClick={clickToTop} data-qa="scroll-btn" />
+					<Table
+						ref={ref}
+						rows={rows}
+						headers={headers}
+						pageLength={2}
+						latestPage={1}
+						tableProps={tableProps}
+						scrollLoader={scrollLoader}
+					/>
+				</>
+			);
+		};
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<CustomTable />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 800);
+
+		const scrollBtn = mountedComponent.find({ "data-qa": "scroll-btn" });
+		scrollBtn.simulate("click");
+
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 0);
+	});
+
+	it("should not scroll to top because already at the top", () => {
+		const { headers, rows } = buildHeaderAndRowFromConfig(config, elements);
+
+		state = state.setIn(
+			["view", "testScrollbarPosition"],
+			Immutable.fromJS({
+				scrollBarPosition: 0,
+			}),
+		);
+
+		const tableProps = new TableProps();
+
+		tableProps.set(TableProps.propNames.selectMode, true);
+		tableProps.set(TableProps.propNames.tableName, "test");
+		tableProps.set(TableProps.propNames.saveScrollbarPosition, true);
+
+		const scrollLoader = sinon.spy().named("scrollLoader");
+
+		const CustomTable = () => {
+			const ref = useRef(null);
+
+			const clickToTop = () => {
+				ref.current && ref.current.scrollToTop();
+			};
+
+			return (
+				<>
+					<input type="button" onClick={clickToTop} data-qa="scroll-btn" />
+					<Table
+						ref={ref}
+						rows={rows}
+						headers={headers}
+						pageLength={2}
+						latestPage={1}
+						tableProps={tableProps}
+						scrollLoader={scrollLoader}
+					/>
+				</>
+			);
+		};
+
+		const component = (
+			<TestWrapper provider={{ store }}>
+				<CustomTable />
+			</TestWrapper>
+		);
+
+		const mountedComponent = mount(component);
+		const scrollableDiv = mountedComponent.find({ "data-qa": "scrollable-table-div" });
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 0);
+
+		const scrollBtn = mountedComponent.find({ "data-qa": "scroll-btn" });
+		scrollBtn.simulate("click");
+
+		expect(scrollableDiv?.getElement()?.ref?.current?.scrollTop, "to equal", 0);
+	});
 });

package/src/hocs/withScrollBox.js

@@ -11,15 +11,20 @@ const useStyles = makeStyles({
 	},
 });
 
-const withScrollBox =
-	WrappedComp =>
-	({ onScroll, ...otherProps }) => {
+const withScrollBox = WrappedComp =>
+	React.forwardRef(({ onScroll, ...otherProps }, externalRef) => {
 		const classes = useStyles();
 
+		const mergeRef = (node, measureRef) => {
+			measureRef(node);
+
+			if (externalRef) externalRef.current = node;
+		};
+
 		return (
 			<Measure bounds>
 				{({ measureRef, contentRect }) => (
-					<div className={classes.scrollbox} onScroll={onScroll} ref={measureRef}>
+					<div className={classes.scrollbox} onScroll={onScroll} ref={node => mergeRef(node, measureRef)}>
 						<WrappedComp
 							{...otherProps}
 							height={safeGet(contentRect, "bounds", "height")}
@@ -29,6 +34,6 @@ const withScrollBox =
 				)}
 			</Measure>
 		);
-	};
+	});
 
 export default withScrollBox;

package/src/hocs/withScrollBox.test.js

@@ -22,4 +22,16 @@ describe("withScrollBox", () => {
 				</div>,
 			),
 		));
+
+	it("forwards the ref to the scroll box div", () => {
+		const ref = React.createRef();
+
+		return expect(withScrollBox, "when called with", [TestComp]).then(EnhComp => {
+			const element = <EnhComp ref={ref} />;
+			return expect(() => expect(element, "when mounted", "to be truthy"), "not to throw").then(() => {
+				expect(ref.current, "to be defined");
+				expect(ref.current.nodeType, "to equal", 1);
+			});
+		});
+	});
 });

package/src/hooks/useInMemoryPaging.js

@@ -0,0 +1,85 @@
+import { useCallback, useMemo, useRef } from "react";
+import { unwrapImmutable } from "../utils";
+import useViewState from "./useViewState";
+
+const scrollTableRef = tableRef => {
+	if (!tableRef?.current) {
+		console.error("[useInMemoryPaging]: tableRef was not specified or tableRef.current is null.");
+	} else {
+		tableRef.current.scrollToTop();
+	}
+};
+
+const useInMemoryPaging = ({
+	viewStateName,
+	tableRef,
+	records,
+	pageSize,
+	initialSort = {},
+	initialFilters = {},
+	sortAndFilterFn,
+}) => {
+	const [viewState, updateViewState] = useViewState(viewStateName);
+	const internalSortAndFilterFn = useRef(sortAndFilterFn);
+	const internalInitialSort = useRef(initialSort);
+	const internalInitialFilters = useRef(initialFilters);
+
+	const filters = viewState.filters ?? internalInitialFilters.current;
+	const sorting = viewState.sorting ?? internalInitialSort.current;
+	const currentPage = viewState.currentPage ?? 1;
+	const nextPageToLoad = viewState.nextPageToLoad ?? 1;
+
+	if (internalSortAndFilterFn.current !== sortAndFilterFn) {
+		console.warn(
+			"[useInMemoryPaging]: a different value for sortAndFilterFn was detected between renders, ensure that it never changes (define it outside of your component).",
+		);
+	}
+
+	const setFilter = filters => {
+		scrollTableRef(tableRef);
+		updateViewState("filters", filters);
+		updateViewState("currentPage", 1);
+		updateViewState("nextPageToLoad", 1);
+	};
+
+	const setSort = sorting => {
+		scrollTableRef(tableRef);
+		updateViewState("sorting", sorting);
+		updateViewState("currentPage", 1);
+		updateViewState("nextPageToLoad", 1);
+	};
+
+	const scrollLoader = useCallback(
+		page => {
+			if (page > nextPageToLoad) {
+				updateViewState("currentPage", page);
+				updateViewState("nextPageToLoad", page);
+			}
+		},
+		[nextPageToLoad, updateViewState],
+	);
+
+	const [rows, totalCount] = useMemo(() => {
+		let list = internalSortAndFilterFn.current({
+			list: unwrapImmutable(records),
+			filters: filters,
+			sorting: sorting,
+		});
+		return [unwrapImmutable(list.slice(0, currentPage * pageSize)), list.length];
+	}, [currentPage, pageSize, records, filters, sorting, internalSortAndFilterFn]);
+
+	return {
+		rows,
+		scrollLoader,
+		currentPage,
+
+		filters,
+		sorting,
+
+		setFilter,
+		setSort,
+		totalCount,
+	};
+};
+
+export default useInMemoryPaging;