orc-shared 5.10.2 → 5.99.0-dev.10

package/src/components/List/Row.js

@@ -1,72 +0,0 @@
-import React, { useCallback } from "react";
-import styled, { css } from "styled-components";
-import { ifFlag } from "../../utils";
-import DataCell from "./DataCell";
-
-export const stringifyFieldName = name => {
-	if (Array.isArray(name)) {
-		return name.join("_");
-	} else {
-		return name && name.toString();
-	}
-};
-
-export const TableRow = styled.tr`
-	${ifFlag(
-		"bgColor",
-		props =>
-			css`
-				background-color: ${props.bgColor};
-			`,
-		css`
-			transition: background-color 0.2s ease-in;
-			&:hover {
-				background-color: #f3f3f3;
-			}
-		`,
-	)}
-
-	${ifFlag(
-		"onClick",
-		css`
-			& td {
-				cursor: pointer;
-			}
-		`,
-	)}
-`;
-
-// Clicks on these elements will not be handled by the row onClick
-const formTags = ["INPUT", "SELECT", "LABEL"];
-
-export const Row = ({ columnDefs, row, rowId, selected, rowOnClick, bgColor }) => {
-	const onClick = useCallback(
-		event => {
-			if (formTags.indexOf(event.target.tagName) === -1) {
-				/* istanbul ignore else */
-				if (!event.target.dataset["rowId"]) {
-					event.target.dataset["rowId"] = rowId;
-				}
-				rowOnClick(event);
-			}
-		},
-		[rowOnClick, rowId],
-	);
-	return (
-		<TableRow onClick={rowOnClick ? onClick : undefined} bgColor={bgColor}>
-			{columnDefs.map(columnDef => (
-				<DataCell
-					key={stringifyFieldName(columnDef.fieldName)}
-					{...{
-						rowId,
-						row,
-						columnDef,
-						selected,
-					}}
-				/>
-			))}
-		</TableRow>
-	);
-};
-
-export default Row;

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

@@ -1,194 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import sinon from "sinon";
-import { Row, TableRow, stringifyFieldName } from "./Row";
-import DataCell from "./DataCell";
-
-const TestComp = () => (
-	<div>
-		<input />
-		<select />
-		<label />
-	</div>
-);
-
-describe("Row", () => {
-	let rowOnClick, columnDefs, row;
-	beforeEach(() => {
-		rowOnClick = sinon.spy().named("rowOnClick");
-		columnDefs = [{ fieldName: "a" }, { fieldName: "b" }, { fieldName: "test", type: "custom", component: TestComp }];
-		row = { a: "foo", b: "bar" };
-	});
-
-	it("it renders a data cell for each column definition", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<tbody>
-						<Row row={row} rowId="rowIdentifier" columnDefs={columnDefs} rowOnClick={rowOnClick} bgColor="#ff0000" />
-					</tbody>
-				</table>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: "tr" },
-			"to satisfy",
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<tbody>
-						<TableRow bgColor="#ff0000" onClick={() => {}}>
-							<DataCell key="a" rowId="rowIdentifier" row={row} columnDef={columnDefs[0]} />
-							<DataCell key="b" rowId="rowIdentifier" row={row} columnDef={columnDefs[1]} />
-							<DataCell key="test" rowId="rowIdentifier" row={row} columnDef={columnDefs[2]} />
-						</TableRow>
-					</tbody>
-				</table>
-			</Provider>,
-		).then(() => expect(rowOnClick, "was called")));
-
-	it("wraps row onClick handler to add rowId to event target, and not to fire if target is form element", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<table>
-					<tbody>
-						<Row row={row} rowId="rowIdentifier" columnDefs={columnDefs} rowOnClick={rowOnClick} />
-					</tbody>
-				</table>
-			</Provider>,
-			"when mounted",
-			"with event",
-			"click",
-			"with event",
-			{
-				type: "click",
-				target: "input",
-				// don't fire
-			},
-			"with event",
-			{
-				type: "click",
-				target: "select",
-				// don't fire
-			},
-			"with event",
-			{
-				type: "click",
-				target: "label",
-				// don't fire
-			},
-			"with event",
-			{
-				type: "click",
-				target: "tr",
-			},
-			"to contain",
-			<TestComp />,
-		).then(() =>
-			expect(rowOnClick, "to have calls satisfying", [
-				{
-					args: [
-						{
-							target: expect.it("to have attributes", {
-								"data-row-id": "rowIdentifier",
-							}),
-						},
-					],
-				},
-			]),
-		));
-});
-
-describe("TableRow", () => {
-	it("renders with a hover transition", () =>
-		expect(
-			<table>
-				<tbody>
-					<TableRow />
-				</tbody>
-			</table>,
-			"when mounted",
-			"queried for first",
-			"tr",
-			"to have style rules satisfying",
-			expect
-				.it("to contain", "transition: background-color 0.2s ease-in;")
-				.and("to contain", ":hover {background-color: #f3f3f3;}"),
-		));
-
-	it("renders a specific background color when given", () =>
-		expect(
-			<table>
-				<tbody>
-					<TableRow bgColor="#ff0000" />
-				</tbody>
-			</table>,
-			"when mounted",
-			"queried for first",
-			"tr",
-			"to have style rules satisfying",
-			"to contain",
-			"background-color: #ff0000;",
-		));
-
-	it("renders no transition if given a bgColor prop", () =>
-		expect(
-			<table>
-				<tbody>
-					<TableRow bgColor="#ff0000" />
-				</tbody>
-			</table>,
-			"when mounted",
-			"queried for first",
-			"tr",
-			"to have style rules satisfying",
-			expect
-				.it("not to match", /transition: background-color/)
-				.and("not to match", /:hover \{[^}]*background-color:[^}]*\}/),
-		));
-
-	it("sets cursor type if given click handler", () =>
-		expect(
-			<table>
-				<tbody>
-					<TableRow onClick={() => {}} />
-				</tbody>
-			</table>,
-			"when mounted",
-			"queried for first",
-			"tr",
-			"to have style rules satisfying",
-			expect.it("to contain", "td {cursor: pointer;}"),
-		));
-});
-
-describe("stringifyFieldName", () => {
-	it("does nothing to a string", () =>
-		expect(stringifyFieldName, "when called with", ["FieldName"], "to equal", "FieldName"));
-
-	it("converts an array to a string", () =>
-		expect(stringifyFieldName, "when called with", [["fieldA", "foo"]], "to equal", "fieldA_foo"));
-
-	it("handles arrays with non-string types", () =>
-		expect(stringifyFieldName, "when called with", [["fieldA", 0, "foo"]], "to equal", "fieldA_0_foo"));
-
-	it("returns undefined if given undefined", () =>
-		expect(stringifyFieldName, "when called with", [undefined], "to equal", undefined));
-});

package/src/components/List/enhanceColumnDefs.js

@@ -1,54 +0,0 @@
-const toggleInArray = (nameList, name) => {
-	if (nameList.indexOf(name) !== -1) {
-		return nameList.filter(n => n !== name);
-	} else {
-		return nameList.concat(name);
-	}
-};
-
-const enhanceSelectColumn = (selection, updateViewState, def) => {
-	return {
-		fieldName: "selection",
-		...def,
-		onChange: eventOrSelection => {
-			if (Array.isArray(eventOrSelection)) {
-				updateViewState("selection", eventOrSelection);
-			} else {
-				updateViewState("selection", toggleInArray(selection, eventOrSelection.target.dataset.rowId));
-				eventOrSelection.stopPropagation();
-			}
-		},
-	};
-};
-
-const enhanceSortableColumn = (sorting, updateViewState, def) => {
-	const isSortColumn = sorting.column && def.fieldName && sorting.column.toString() === def.fieldName.toString();
-	const isAscending = isSortColumn && sorting.direction === "asc";
-	const newDef = {
-		...def,
-		sort: () => {
-			updateViewState("sorting", {
-				column: def.fieldName,
-				direction: isAscending ? "desc" : "asc",
-			});
-			def.sort(isAscending, def.fieldName, def.type);
-		},
-	};
-	if (isSortColumn) {
-		newDef.sortDirection = sorting.direction;
-	}
-	return newDef;
-};
-
-const enhanceColumnDef = (sorting, selection, updateViewState, columnDefs) =>
-	columnDefs.map(def => {
-		if (def.type === "select") {
-			return enhanceSelectColumn(selection, updateViewState, def);
-		}
-		if (def.sort) {
-			return enhanceSortableColumn(sorting, updateViewState, def);
-		}
-		return def;
-	});
-
-export default enhanceColumnDef;

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

@@ -1,179 +0,0 @@
-import sinon from "sinon";
-import enhanceColumnDefs from "./enhanceColumnDefs";
-
-describe("enhanceColumnDefs", () => {
-	let sorting, selection, updateViewState, columnDefs, mockEvent, stopPropagations;
-	beforeEach(() => {
-		sorting = {};
-		selection = [];
-		updateViewState = sinon.spy().named("updateViewState");
-		columnDefs = [{ fieldName: "a" }];
-		stopPropagations = {};
-		mockEvent = id => {
-			stopPropagations[id] = sinon.spy().named("stopPropagation:" + id);
-			return {
-				target: { dataset: { rowId: id } },
-				stopPropagation: stopPropagations[id],
-			};
-		};
-	});
-
-	it("does not change column definitions without cause", () =>
-		expect(enhanceColumnDefs, "called with", [sorting, selection, updateViewState, columnDefs], "to satisfy", [
-			{
-				fieldName: "a",
-			},
-		]));
-
-	describe("column selection", () => {
-		beforeEach(() => {
-			columnDefs = [{ type: "select" }, { fieldName: "a" }];
-			selection = ["selectedRow"];
-		});
-
-		it("adds field name and onChange to select columns", () =>
-			expect(
-				enhanceColumnDefs,
-				"called with",
-				[sorting, selection, updateViewState, columnDefs],
-				"to exhaustively satisfy",
-				[
-					{
-						type: "select",
-						fieldName: "selection",
-						onChange: expect
-							.it("to be a function")
-							// Add name to selection
-							.and("called with", [mockEvent("myRow")])
-							// remove name from selection
-							.and("called with", [mockEvent("selectedRow")])
-							// Replace selection
-							.and("called with", [["list", "of", "row", "ids"]]),
-					},
-					{ fieldName: "a" },
-				],
-			).then(() => {
-				expect(stopPropagations["myRow"], "was called");
-				expect(stopPropagations["selectedRow"], "was called");
-				expect(updateViewState, "to have calls satisfying", [
-					{
-						args: [
-							// Add name to selection
-							"selection",
-							["selectedRow", "myRow"],
-						],
-					},
-					{
-						args: [
-							// remove name from selection
-							"selection",
-							[],
-						],
-					},
-					{
-						args: [
-							// Replace selection
-							"selection",
-							["list", "of", "row", "ids"],
-						],
-					},
-				]);
-			}));
-
-		it("handles missing selection", () =>
-			expect(enhanceColumnDefs, "called with", [sorting, [], updateViewState, columnDefs], "to exhaustively satisfy", [
-				{
-					type: "select",
-					fieldName: "selection",
-					onChange: expect.it("to be a function"),
-				},
-				{ fieldName: "a" },
-			]));
-	});
-
-	describe("column sorting", () => {
-		let sorterSpies;
-		beforeEach(() => {
-			sorting = { column: "b", direction: "asc" };
-			sorterSpies = [sinon.spy().named("sorter-a"), sinon.spy().named("sorter-b"), sinon.spy().named("sorter-c")];
-			columnDefs = [
-				{
-					fieldName: "a",
-					sort: sorterSpies[0],
-					type: "currency",
-					onChange: () => {},
-				},
-				{ fieldName: "b", sort: sorterSpies[1], type: "date" },
-				{ fieldName: "c", sort: sorterSpies[2], type: "switch" },
-			];
-		});
-
-		it("wraps sort functions to set view state", () =>
-			expect(
-				enhanceColumnDefs,
-				"called with",
-				[sorting, selection, updateViewState, columnDefs],
-				"to exhaustively satisfy",
-				[
-					{
-						fieldName: "a",
-						sort: expect.it("to be a function").and("called"),
-						type: "currency",
-						onChange: expect.it("to be a function"),
-					},
-					{
-						fieldName: "b",
-						sort: expect.it("to be a function"),
-						type: "date",
-						sortDirection: "asc",
-					},
-					{
-						fieldName: "c",
-						sort: expect.it("to be a function"),
-						type: "switch",
-					},
-				],
-			).then(() => {
-				expect(sorterSpies, "to have calls satisfying", [{ spy: sorterSpies[0], args: [false, "a", "currency"] }]);
-				expect(updateViewState, "to have calls satisfying", [
-					{
-						args: ["sorting", { column: "a", direction: "asc" }],
-					},
-				]);
-			}));
-
-		it("wraps sort functions to handle flipping sort direction", () =>
-			expect(
-				enhanceColumnDefs,
-				"called with",
-				[sorting, selection, updateViewState, columnDefs],
-				"to exhaustively satisfy",
-				[
-					{
-						fieldName: "a",
-						sort: expect.it("to be a function"),
-						type: "currency",
-						onChange: expect.it("to be a function"),
-					},
-					{
-						fieldName: "b",
-						sort: expect.it("to be a function").and("called"),
-						type: "date",
-						sortDirection: "asc",
-					},
-					{
-						fieldName: "c",
-						sort: expect.it("to be a function"),
-						type: "switch",
-					},
-				],
-			).then(() => {
-				expect(sorterSpies, "to have calls satisfying", [{ spy: sorterSpies[1], args: [true, "b", "date"] }]);
-				expect(updateViewState, "to have calls satisfying", [
-					{
-						args: ["sorting", { column: "b", direction: "desc" }],
-					},
-				]);
-			}));
-	});
-});

package/src/components/List/index.js

@@ -1,6 +0,0 @@
-import Loader from "../Loader";
-
-/* istanbul ignore next */
-const LoadableList = Loader(() => import("./List"));
-
-export default LoadableList;

package/src/components/Modal/Background.js

@@ -1,10 +0,0 @@
-import styled from "styled-components";
-
-const Background = styled.div`
-	position: absolute;
-	background-color: rgba(127, 127, 127, 0.5);
-	height: 100%;
-	width: 100%;
-`;
-
-export default Background;

package/src/components/Modal/Dialog.js

@@ -1,27 +0,0 @@
-import styled, { css } from "styled-components";
-import { getThemeProp } from "../../utils";
-import withClickOutside from "../../hocs/withClickOutside";
-
-const darkDialogStyle = css`
-	background-color: ${getThemeProp(["colors", "bgDark"], "#333333")};
-	border-radius: 15px;
-`;
-
-const dialogLook = {
-	default: css`
-		background-color: white;
-	`,
-	dark: darkDialogStyle,
-};
-
-// TODO: Add light dialog style for other dialogs, switching mechanism
-export const Dialog = styled.div`
-	flex: 0 0 auto;
-	margin: auto;
-	align-self: center;
-	z-index: 10000;
-	${props => dialogLook[props.look]};
-`;
-Dialog.defaultProps = { look: "default" };
-
-export default withClickOutside(Dialog);

package/src/components/Modal/Dialog.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Dialog } from "./Dialog";
-
-describe("Dialog", () => {
-	it("renders a dialog with a default look", () =>
-		expect(
-			<Dialog />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "background-color: white;"),
-		));
-
-	it("renders a dialog with dark look", () =>
-		expect(
-			<Dialog look="dark" />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "background-color: #333333;").and("to contain", "border-radius: 15px;"),
-		));
-});

package/src/components/Modal/Modal.test.js

@@ -1,52 +0,0 @@
-import React, { Fragment } from "react";
-import ReactDOM from "react-dom";
-import { Modal } from "./index";
-import Wrapper from "./Wrapper";
-import Background from "./Background";
-import Dialog from "./Dialog";
-
-const TestComp1 = () => <div />;
-const TestComp2 = () => <div />;
-
-describe("Modal", () => {
-	let appRoot, modalRoot, toggle;
-	beforeEach(() => {
-		appRoot = document.createElement("div");
-		appRoot.id = "app";
-		document.body.appendChild(appRoot);
-		modalRoot = document.createElement("div");
-		modalRoot.id = "modal";
-		document.body.appendChild(modalRoot);
-		toggle = () => {};
-	});
-	afterEach(() => {
-		try {
-			ReactDOM.unmountComponentAtNode(appRoot);
-		} catch {
-			// don't do anything
-		}
-		document.body.removeChild(appRoot);
-		document.body.removeChild(modalRoot);
-	});
-
-	it("renders the structure of a modal dialog", () =>
-		expect(
-			<Modal
-				initShow={true}
-				anchor={toggle => <TestComp1 toggle={toggle} />}
-				content={toggle => <TestComp2 toggle={toggle} />}
-				look="dark"
-			/>,
-			"when mounted",
-			"to satisfy",
-			<Fragment>
-				<TestComp1 toggle={toggle} />
-				<Wrapper timeout={300}>
-					<Background />
-					<Dialog look="dark" onClickOutside={toggle}>
-						<TestComp2 toggle={toggle} />
-					</Dialog>
-				</Wrapper>
-			</Fragment>,
-		));
-});

package/src/components/Modal/Wrapper.js

@@ -1,32 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import transition from "styled-transition-group";
-
-const getModalRoot = () => document.getElementById("modal");
-
-export const Wrapper = transition.div`
-	z-index: 9999;
-	display: flex;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	transition: opacity ${props => props.timeout}ms ease-out;
-
-	&:enter {
-		opacity: 0.01;
-	}
-	&:enter-active {
-		opacity: 1;
-	}
-	&:exit {
-		opacity: 1;
-	}
-	&:exit-active {
-		opacity: 0.01;
-	}
-`;
-Wrapper.defaultProps = { timeout: 300, unmountOnExit: true };
-
-export default props => ReactDOM.createPortal(<Wrapper {...props} />, getModalRoot());