orc-shared 5.10.1-dev.6 → 5.10.1-dev.8

package/src/components/List/HeadCell.test.js

@@ -1,331 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
-import sinon from "sinon";
-import Checkbox from "../Checkbox";
-import HeadCell, { SortMark, UpMark, DownMark, MarkBox, HeadBox, TableHeader } from "./HeadCell";
-
-describe("HeadCell", () => {
-	it("renders a header cell with the column label", () => {
-		const columnDef = {
-			fieldName: "a",
-			label: "Test column",
-			width: 42,
-		};
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<thead>
-						<tr>
-							<HeadCell columnDef={columnDef} />
-						</tr>
-					</thead>
-				</table>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<thead>
-						<tr>
-							<TableHeader width={42}>
-								<HeadBox>Test column</HeadBox>
-							</TableHeader>
-						</tr>
-					</thead>
-				</table>
-			</Provider>,
-		);
-	});
-
-	it("renders a header cell with no label", () => {
-		const columnDef = {
-			fieldName: "a",
-		};
-		return expect(
-			<table>
-				<thead>
-					<tr>
-						<HeadCell columnDef={columnDef} />
-					</tr>
-				</thead>
-			</table>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<thead>
-					<tr>
-						<TableHeader>
-							<HeadBox />
-						</TableHeader>
-					</tr>
-				</thead>
-			</table>,
-		);
-	});
-
-	it("renders a header cell for a select column", () => {
-		const columnDef = {
-			type: "select",
-			onChange: sinon.spy().named("onChange"),
-		};
-		const rowIds = ["a", "b", "c"];
-		return expect(
-			<table>
-				<thead>
-					<tr>
-						<HeadCell columnDef={columnDef} rowIds={rowIds} />
-					</tr>
-				</thead>
-			</table>,
-			"when mounted",
-			"with event",
-			{ type: "change", target: "input" },
-			"to satisfy",
-			<table>
-				<thead>
-					<tr>
-						<TableHeader select>
-							<HeadBox>
-								<Checkbox id="select_headRow" value={false} />
-							</HeadBox>
-						</TableHeader>
-					</tr>
-				</thead>
-			</table>,
-		).then(() => expect(columnDef.onChange, "to have calls satisfying", [{ args: [rowIds] }]));
-	});
-
-	it("renders a header cell for a select column with all rows selected", () => {
-		const columnDef = {
-			type: "select",
-			onChange: sinon.spy().named("onChange"),
-		};
-		const rowIds = ["a", "b", "c"];
-		return expect(
-			<table>
-				<thead>
-					<tr>
-						<HeadCell columnDef={columnDef} rowIds={rowIds} allSelected />
-					</tr>
-				</thead>
-			</table>,
-			"when mounted",
-			"with event",
-			{ type: "change", target: "input" },
-			"to satisfy",
-			<table>
-				<thead>
-					<tr>
-						<TableHeader select>
-							<HeadBox>
-								<Checkbox id="select_headRow" value={true} />
-							</HeadBox>
-						</TableHeader>
-					</tr>
-				</thead>
-			</table>,
-		).then(() => expect(columnDef.onChange, "to have calls satisfying", [{ args: [[]] }]));
-	});
-
-	it("renders a sortable header cell", () => {
-		const columnDef = {
-			fieldName: "a",
-			label: { id: "test.label", defaultMessage: "Test column" },
-			sort: () => {},
-		};
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IntlProvider locale="en">
-					<table>
-						<thead>
-							<tr>
-								<HeadCell columnDef={columnDef} />
-							</tr>
-						</thead>
-					</table>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<thead>
-						<tr>
-							<TableHeader onClick={columnDef.sort}>
-								<HeadBox>
-									Test column
-									<SortMark />
-								</HeadBox>
-							</TableHeader>
-						</tr>
-					</thead>
-				</table>
-			</Provider>,
-		);
-	});
-
-	it("renders a sortable header cell sorted ascending", () => {
-		const columnDef = {
-			fieldName: "a",
-			label: { id: "test.label", defaultMessage: "Test column" },
-			sort: () => {},
-			sortDirection: "asc",
-		};
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IntlProvider locale="en">
-					<table>
-						<thead>
-							<tr>
-								<HeadCell columnDef={columnDef} />
-							</tr>
-						</thead>
-					</table>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<thead>
-						<tr>
-							<TableHeader>
-								<HeadBox>
-									Test column
-									<SortMark direction="asc" />
-								</HeadBox>
-							</TableHeader>
-						</tr>
-					</thead>
-				</table>
-			</Provider>,
-		);
-	});
-
-	it("renders a sortable header cell sorted descending", () => {
-		const columnDef = {
-			fieldName: "a",
-			label: { id: "test.label", defaultMessage: "Test column" },
-			sort: () => {},
-			sortDirection: "desc",
-		};
-		return expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<IntlProvider locale="en">
-					<table>
-						<thead>
-							<tr>
-								<HeadCell columnDef={columnDef} />
-							</tr>
-						</thead>
-					</table>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<thead>
-						<tr>
-							<TableHeader>
-								<HeadBox>
-									Test column
-									<SortMark direction="desc" />
-								</HeadBox>
-							</TableHeader>
-						</tr>
-					</thead>
-				</table>
-			</Provider>,
-		);
-	});
-});
-
-describe("TableHeader", () => {
-	// Switch components as <tr> warns when outside a table.
-	it("sets a width if selection column", () =>
-		expect(
-			<TableHeader as="div" select />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"width: 56px;",
-		));
-
-	it("sets a width if told to", () =>
-		expect(
-			<TableHeader as="div" width={"550px"} />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"width: 550px;",
-		));
-});
-
-describe("SortMark", () => {
-	it("renders a downwards arrow when ascending", () =>
-		expect(<SortMark direction="asc" />, "when mounted", "to satisfy", <UpMark />));
-
-	it("renders an upwards arrow when descending", () =>
-		expect(<SortMark direction="desc" />, "when mounted", "to satisfy", <DownMark />));
-
-	it("renders bidirectional arrows when no direction set", () =>
-		expect(
-			<SortMark />,
-			"when mounted",
-			"to satisfy",
-			<MarkBox>
-				<UpMark />
-				<DownMark />
-			</MarkBox>,
-		));
-});

package/src/components/List/HeadRow.js

@@ -1,21 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { TableRow, stringifyFieldName } from "./Row";
-import HeadCell from "./HeadCell";
-
-export const HeadTableRow = styled(TableRow)`
-	border-width: 0;
-`;
-
-const HeadRow = ({ columnDefs, rowIds, allSelected }) => (
-	<HeadTableRow>
-		{columnDefs.map(columnDef => (
-			<HeadCell
-				key={columnDef.type === "select" ? "select" : stringifyFieldName(columnDef.fieldName)}
-				{...{ columnDef, rowIds, allSelected }}
-			/>
-		))}
-	</HeadTableRow>
-);
-
-export default HeadRow;

package/src/components/List/HeadRow.test.js

@@ -1,27 +0,0 @@
-import React from "react";
-import HeadRow, { HeadTableRow } from "./HeadRow";
-import HeadCell from "./HeadCell";
-
-describe("HeadRow", () => {
-	it("renders a row of headers, one for each defined column", () => {
-		const columnDefs = [{ fieldName: "a" }, { fieldName: "b" }, { fieldName: "c" }];
-		return expect(
-			<table>
-				<thead>
-					<HeadRow columnDefs={columnDefs} allSelected={false} />
-				</thead>
-			</table>,
-			"when mounted",
-			"to satisfy",
-			<table>
-				<thead>
-					<HeadTableRow>
-						<HeadCell key="a" columnDef={columnDefs[0]} allSelected={false} />
-						<HeadCell key="b" columnDef={columnDefs[1]} allSelected={false} />
-						<HeadCell key="c" columnDef={columnDefs[2]} allSelected={false} />
-					</HeadTableRow>
-				</thead>
-			</table>,
-		);
-	});
-});

package/src/components/List/List.js

@@ -1,162 +0,0 @@
-import React from "react";
-import pt from "prop-types";
-import styled from "styled-components";
-import { compose, branch, setDisplayName } from "recompose";
-import { safeGet } from "../../utils";
-import withScrollBox from "../../hocs/withScrollBox";
-import withInfiniteScroll from "../../hocs/withInfiniteScroll";
-import Row from "./Row";
-import HeadRow from "./HeadRow";
-import useViewState from "../../hooks/useViewState";
-import enhanceColumnDefs from "./enhanceColumnDefs";
-
-export const PlaceholderCell = styled.div`
-	height: ${/* istanbul ignore next*/ props => props.cssHeight || 100}px;
-	display: flex;
-	justify-content: center;
-`;
-
-export const PlaceholderBox = styled.div`
-	padding-top: 30px;
-	width: 100%;
-	margin: auto;
-`;
-
-export const Placeholder = ({ width, height, children }) => (
-	<tr>
-		<td colSpan={width} style={{ padding: 0 }}>
-			<PlaceholderCell cssHeight={height}>
-				<PlaceholderBox>{children}</PlaceholderBox>
-			</PlaceholderCell>
-		</td>
-	</tr>
-);
-Placeholder.displayName = "Placeholder";
-
-export const Table = styled.table`
-	border-spacing: 0;
-	table-layout: fixed;
-	width: 100%;
-	font-size: 13px;
-`;
-
-export const HEADER_HEIGHT = 41;
-export const ROW_HEIGHT = 51;
-
-const calculateVirtualization = (virtual, scrollTop, scrollBuffer, height, rows) => {
-	let virtualFilter, heightAbove, heightBelow;
-	if (virtual) {
-		const correctedScrollTop = scrollTop - HEADER_HEIGHT; // Subtract header height
-		const firstIn = Math.floor(correctedScrollTop / ROW_HEIGHT);
-		const firstShow = Math.max(firstIn - scrollBuffer, 0);
-		const lastIn = Math.ceil((correctedScrollTop + height) / ROW_HEIGHT);
-		const lastShow = Math.min(lastIn + scrollBuffer, rows.length);
-		virtualFilter = index => index >= firstShow && index < lastShow;
-		heightAbove = firstShow * ROW_HEIGHT;
-		heightBelow = (rows.length - lastShow) * ROW_HEIGHT;
-	} else {
-		virtualFilter = () => true;
-		heightAbove = 0;
-		heightBelow = 0;
-	}
-	return { virtualFilter, heightAbove, heightBelow };
-};
-
-export const useListState = (name, columnDefs) => {
-	const [viewState, updateViewState] = useViewState(name);
-	const { selection = [], sorting = {} } = viewState;
-	const enhancedColumnDefs = enhanceColumnDefs(sorting, selection, updateViewState, columnDefs);
-
-	return [enhancedColumnDefs, selection];
-};
-
-export const List = ({
-	name,
-	columnDefs = [],
-	rows = [],
-	rowOnClick,
-	placeholder,
-	keyField = ["id"],
-	virtual = false,
-	scrollTop = 0,
-	height = 300, // Arbitrary, set this prop according to scroll viewport size
-	scrollBuffer = 10,
-	rowBackgroundGetter = () => {},
-}) => {
-	const [enhancedColumnDefs, selection] = useListState(name, columnDefs);
-	if (columnDefs.length === 0) return null;
-	const rowIds = [],
-		rowElements = [];
-	const { virtualFilter, heightAbove, heightBelow } = calculateVirtualization(
-		virtual,
-		scrollTop,
-		scrollBuffer,
-		height,
-		rows,
-	);
-	rows.forEach((row, index) => {
-		const id = safeGet(row, ...keyField) + ""; // Ensure rowId is string
-		rowIds.push(id);
-		if (!virtualFilter(index)) return;
-		rowElements.push(
-			<Row
-				columnDefs={enhancedColumnDefs}
-				key={id}
-				rowId={id}
-				row={row}
-				rowOnClick={rowOnClick}
-				selected={selection.indexOf(id) !== -1}
-				bgColor={rowBackgroundGetter(row, index)}
-			/>,
-		);
-	});
-	if (virtual && heightAbove) {
-		rowElements.unshift(<tr key="virtualAbove" style={{ height: heightAbove }} />);
-	}
-	if (virtual && heightBelow) {
-		rowElements.push(<tr key="virtualBelow" style={{ height: heightBelow }} />);
-	}
-	if (rowElements.length === 0 && placeholder) {
-		rowElements.push(
-			<Placeholder key="placeholder" width={columnDefs.length} height={height - HEADER_HEIGHT}>
-				{placeholder}
-			</Placeholder>,
-		);
-	}
-	return (
-		<Table>
-			<thead>
-				<HeadRow
-					columnDefs={columnDefs}
-					rowIds={rowIds}
-					allSelected={rows.length === selection.length && rows.length !== 0}
-				/>
-			</thead>
-			<tbody>{rowElements}</tbody>
-		</Table>
-	);
-};
-
-/* istanbul ignore next */
-const checkInfiniteScroll = branch(({ scrollLoader }) => !!scrollLoader, withInfiniteScroll);
-
-const StatefulList = compose(setDisplayName("List"), checkInfiniteScroll, withScrollBox)(List);
-StatefulList.propTypes = {
-	columnDefs: pt.arrayOf(pt.object), // Each object must be a valid column definition
-	rows: pt.arrayOf(pt.object),
-	rowOnClick: pt.func, // Click handler for row.
-	// Fires when row is clicked, excluding select or switch columns
-	// Event target will have a 'rowId' data value which identifies the clicked row.
-	placeholder: pt.node, // A React element to render as placeholder.
-	keyField: pt.arrayOf(pt.string), // Path to identifying data field on each row.
-	// Infinite/virtual scroll
-	// If scrollLoader is present, below props will control the scrolling
-	scrollLoader: pt.func, // Loader function. Called with page number to be loaded.
-	onScroll: pt.func, // Optional scroll event handler
-	loadTrigger: pt.number, // How many pixels from the bottom should the load be triggered. Default: 200
-	length: pt.number, // How many elements are loaded, should equal rows.length
-	latestPage: pt.number, // The latest page number loaded
-	pageLength: pt.number, // The length of a page, in row items. Default: 20.
-};
-
-export default StatefulList;