orc-shared 5.10.0-dev.2 → 5.10.0-dev.21

package/src/hocs/withScrollBox.js

@@ -1,26 +1,39 @@
 import React from "react";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
 import { safeGet } from "../utils";
 import Measure from "react-measure";
 
-export const Scrollbox = styled.div`
-	flex: 0 1 100%;
-	overflow-x: hidden;
-	overflow-y: auto;
-`;
+const useStyles = makeStyles({
+	scrollbox: {
+		flex: "0 1 100%",
+		overflowX: "hidden",
+		overflowY: "auto",
+	},
+});
 
-const withScrollBox = WrappedComp => ({ onScroll, ...otherProps }) => (
-	<Measure bounds>
-		{({ measureRef, contentRect }) => (
-			<Scrollbox onScroll={onScroll} ref={measureRef}>
-				<WrappedComp
-					{...otherProps}
-					height={safeGet(contentRect, "bounds", "height")}
-					width={safeGet(contentRect, "bounds", "width")}
-				/>
-			</Scrollbox>
-		)}
-	</Measure>
-);
+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={node => mergeRef(node, measureRef)}>
+						<WrappedComp
+							{...otherProps}
+							height={safeGet(contentRect, "bounds", "height")}
+							width={safeGet(contentRect, "bounds", "width")}
+						/>
+					</div>
+				)}
+			</Measure>
+		);
+	});
 
 export default withScrollBox;

package/src/hocs/withScrollBox.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import withScrollBox, { Scrollbox } from "./withScrollBox";
+import withScrollBox from "./withScrollBox";
 
 const TestComp = ({ children }) => <div>{children}</div>;
 TestComp.displayName = "TestComp";
@@ -11,7 +11,7 @@ describe("withScrollBox", () => {
 				<EnhComp other="prop">This is inside the box</EnhComp>,
 				"when mounted",
 				"to satisfy",
-				<Scrollbox>
+				<div>
 					<TestComp
 						other="prop"
 						height={expect.it("to be undefined") /* jsdom can't do sizes*/}
@@ -19,7 +19,19 @@ describe("withScrollBox", () => {
 					>
 						This is inside the box
 					</TestComp>
-				</Scrollbox>,
+				</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/useDaysAndMonthsLocalization.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import sharedMessages from "../sharedMessages";
+
+const useDaysAndMonthsLocalization = () => {
+	const { formatMessage } = useIntl();
+
+	return React.useMemo(() => {
+		const weekdays = [
+			formatMessage(sharedMessages.sunday),
+			formatMessage(sharedMessages.monday),
+			formatMessage(sharedMessages.tuesday),
+			formatMessage(sharedMessages.wednesday),
+			formatMessage(sharedMessages.thursday),
+			formatMessage(sharedMessages.friday),
+			formatMessage(sharedMessages.saturday),
+		];
+
+		const weekdaysShort = [
+			formatMessage(sharedMessages.sundayShort),
+			formatMessage(sharedMessages.mondayShort),
+			formatMessage(sharedMessages.tuesdayShort),
+			formatMessage(sharedMessages.wednesdayShort),
+			formatMessage(sharedMessages.thursdayShort),
+			formatMessage(sharedMessages.fridayShort),
+			formatMessage(sharedMessages.saturdayShort),
+		];
+
+		const weekdaysMin = [
+			formatMessage(sharedMessages.sundayMin),
+			formatMessage(sharedMessages.mondayMin),
+			formatMessage(sharedMessages.tuesdayMin),
+			formatMessage(sharedMessages.wednesdayMin),
+			formatMessage(sharedMessages.thursdayMin),
+			formatMessage(sharedMessages.fridayMin),
+			formatMessage(sharedMessages.saturdayMin),
+		];
+
+		const months = [
+			formatMessage(sharedMessages.january),
+			formatMessage(sharedMessages.february),
+			formatMessage(sharedMessages.march),
+			formatMessage(sharedMessages.april),
+			formatMessage(sharedMessages.may),
+			formatMessage(sharedMessages.june),
+			formatMessage(sharedMessages.july),
+			formatMessage(sharedMessages.august),
+			formatMessage(sharedMessages.september),
+			formatMessage(sharedMessages.october),
+			formatMessage(sharedMessages.november),
+			formatMessage(sharedMessages.december),
+		];
+
+		const monthsShort = [
+			formatMessage(sharedMessages.januaryShort),
+			formatMessage(sharedMessages.februaryShort),
+			formatMessage(sharedMessages.marchShort),
+			formatMessage(sharedMessages.aprilShort),
+			formatMessage(sharedMessages.mayShort),
+			formatMessage(sharedMessages.juneShort),
+			formatMessage(sharedMessages.julyShort),
+			formatMessage(sharedMessages.augustShort),
+			formatMessage(sharedMessages.septemberShort),
+			formatMessage(sharedMessages.octoberShort),
+			formatMessage(sharedMessages.novemberShort),
+			formatMessage(sharedMessages.decemberShort),
+		];
+
+		return {
+			weekdays,
+			weekdaysShort,
+			weekdaysMin,
+			months,
+			monthsShort,
+		};
+	}, [formatMessage]);
+};
+
+export default useDaysAndMonthsLocalization;

package/src/hooks/useDaysAndMonthsLocalization.test.js

@@ -0,0 +1,107 @@
+import React from "react";
+import Immutable from "immutable";
+import { extractMessages, TestWrapper } from "../utils/testUtils";
+import sharedMessages from "../sharedMessages";
+import useDaysAndMonthsLocalization from "./useDaysAndMonthsLocalization";
+
+const messages = extractMessages(sharedMessages);
+
+describe("useDaysAndMonthsLocalization", () => {
+	let store, state;
+
+	beforeEach(() => {
+		state = Immutable.fromJS({});
+
+		store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => state,
+		};
+	});
+
+	it("returns weekdays and months correctly", () => {
+		const TestComp = () => {
+			const daysAndMonths = useDaysAndMonthsLocalization();
+
+			return (
+				<div>
+					{daysAndMonths.weekdays.map(x => (
+						<div key={x}>{x}</div>
+					))}
+					{daysAndMonths.weekdaysShort.map(x => (
+						<div key={x}>{x}</div>
+					))}
+					{daysAndMonths.weekdaysMin.map(x => (
+						<div key={x}>{x}</div>
+					))}
+					{daysAndMonths.months.map(x => (
+						<div key={x}>{x}</div>
+					))}
+					{daysAndMonths.monthsShort.map(x => (
+						<div key={x}>{x}</div>
+					))}
+				</div>
+			);
+		};
+
+		const component = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }}>
+				<TestComp />
+			</TestWrapper>
+		);
+
+		const expected = (
+			<TestWrapper provider={{ store }} intlProvider={{ messages }}>
+				<div>
+					<div>Sunday</div>
+					<div>Monday</div>
+					<div>Tuesday</div>
+					<div>Wednesday</div>
+					<div>Thursday</div>
+					<div>Friday</div>
+					<div>Saturday</div>
+					<div>Sun</div>
+					<div>Mon</div>
+					<div>Tue</div>
+					<div>Wed</div>
+					<div>Thu</div>
+					<div>Fri</div>
+					<div>Sat</div>
+					<div>Su</div>
+					<div>Mo</div>
+					<div>Tu</div>
+					<div>We</div>
+					<div>Th</div>
+					<div>Fr</div>
+					<div>Sa</div>
+					<div>January</div>
+					<div>February</div>
+					<div>March</div>
+					<div>April</div>
+					<div>May</div>
+					<div>June</div>
+					<div>July</div>
+					<div>August</div>
+					<div>September</div>
+					<div>October</div>
+					<div>November</div>
+					<div>December</div>
+					<div>Jan</div>
+					<div>Feb</div>
+					<div>Mar</div>
+					<div>Apr</div>
+					<div>May</div>
+					<div>Jun</div>
+					<div>Jul</div>
+					<div>Aug</div>
+					<div>Sep</div>
+					<div>Oct</div>
+					<div>Nov</div>
+					<div>Dec</div>
+				</div>
+			</TestWrapper>
+		);
+
+		expect(component, "when mounted", "to satisfy", expected);
+	});
+});

package/src/hooks/useInMemoryPaging.js

@@ -0,0 +1,78 @@
+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 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;
+
+	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(() => {
+		const list = sortAndFilterFn({
+			list: unwrapImmutable(records),
+			filters: filters,
+			sorting: sorting,
+		});
+		return [unwrapImmutable(list.slice(0, currentPage * pageSize)), list.length];
+	}, [currentPage, pageSize, records, filters, sorting, sortAndFilterFn]);
+
+	return {
+		rows,
+		scrollLoader,
+		currentPage,
+
+		filters,
+		sorting,
+
+		setFilter,
+		setSort,
+		totalCount,
+	};
+};
+
+export default useInMemoryPaging;