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

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());

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

@@ -1,55 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import PortalWrapper, { Wrapper } from "./Wrapper";
-
-class RenderWrapper extends React.Component {
-	render() {
-		return (
-			<div id="outer">
-				<PortalWrapper {...this.props} />
-			</div>
-		);
-	}
-}
-
-describe("Wrapper", () => {
-	it("sets transition time according to its timeout", () =>
-		expect(
-			<Wrapper in timeout={500} />,
-			"when mounted",
-			"to have style rules satisfying",
-			"to contain",
-			"transition: opacity 500ms ease-out;",
-		));
-
-	describe("rendered in portal", () => {
-		let appRoot, modalRoot;
-		beforeEach(() => {
-			appRoot = document.createElement("div");
-			appRoot.id = "app";
-			document.body.appendChild(appRoot);
-			modalRoot = document.createElement("div");
-			modalRoot.id = "modal";
-			document.body.appendChild(modalRoot);
-		});
-		afterEach(() => {
-			try {
-				ReactDOM.unmountComponentAtNode(appRoot);
-			} catch {
-				// don't do anything
-			}
-			document.body.removeChild(appRoot);
-			document.body.removeChild(modalRoot);
-		});
-
-		it("renders a Wrapper in a portal", () => {
-			ReactDOM.render(
-				<RenderWrapper in>
-					<div id="inner">Foo</div>
-				</RenderWrapper>,
-				appRoot,
-			);
-			return expect(modalRoot, "queried for first", "#inner", "to satisfy", <div>Foo</div>);
-		});
-	});
-});

package/src/components/Modal/index.js

@@ -1,22 +0,0 @@
-import React, { Fragment } from "react";
-import Wrapper from "./Wrapper";
-import Background from "./Background";
-import Dialog from "./Dialog";
-import useToggle from "../../hooks/useToggle";
-
-export const Modal = ({ initShow, anchor, content, look }) => {
-	const [show, toggle] = useToggle(initShow);
-	return (
-		<Fragment>
-			{anchor(toggle)}
-			<Wrapper in={show} timeout={300}>
-				<Background />
-				<Dialog look={look} onClickOutside={toggle}>
-					{content(toggle)}
-				</Dialog>
-			</Wrapper>
-		</Fragment>
-	);
-};
-
-export default Modal;

package/src/components/MultiSelector.js

@@ -1,104 +0,0 @@
-import React, { useCallback, useState } from "react";
-import styled from "styled-components";
-import { memoize } from "../utils";
-import withId from "../hocs/withId";
-import Text from "./Text";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-import { InnerSelect, Wrapper, SelectBox, Dropdown, Option, Placeholder } from "./Selector";
-
-export const SelectedValue = styled.span`
-	display: inline-block;
-	width: calc(100% - 20px);
-	white-space: pre;
-	overflow: hidden;
-`;
-
-const arrayToggle = (arr, item) => {
-	const output = arr.filter(val => val !== item);
-	if (output.length < arr.length) {
-		return output;
-	}
-	output.push(item);
-	return output;
-};
-
-const labelFromOptions = options => options.map(option => option.label).join(", ");
-
-export const MultiSelector = ({
-	id,
-	value = [],
-	options,
-	update,
-	selectAllMessage = "[Select all]",
-	clearMessage = "[Clear]",
-	placeholder = "",
-	required,
-	...props
-}) => {
-	const selectAll = useCallback(() => update(options.map(opt => opt.value)), [update, options]);
-	const clearValue = useCallback(() => update([]), [update]);
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const clickOption = useCallback(
-		memoize(clickValue => () => update(arrayToggle(value, clickValue))),
-		[update, value],
-	);
-	const onChange = useCallback(e => update(arrayToggle(value, e.target.value)), [update, value]);
-	const [isVisible, setIsVisible] = useState(false);
-	/* istanbul ignore next */
-	const toggleVisibility = () => {
-		setIsVisible(!isVisible);
-	};
-
-	/* istanbul ignore next */
-	const handlerClickAway = () => {
-		setIsVisible(false);
-	};
-
-	/* istanbul ignore next */
-	return (
-		<ClickAwayListener onClickAway={() => handlerClickAway()}>
-			<Wrapper>
-				<InnerSelect id={id} onChange={onChange} value={value} multiple required={required} {...props}>
-					{options.map(option => (
-						<option key={option.value} value={option.value}>
-							{option.label}
-						</option>
-					))}
-				</InnerSelect>
-				<SelectBox htmlFor={id} onClick={() => toggleVisibility()}>
-					{value.length ? (
-						<SelectedValue>
-							{labelFromOptions(options.filter(option => value.indexOf(option.value) !== -1))}
-						</SelectedValue>
-					) : (
-						<Placeholder>{placeholder}</Placeholder>
-					)}
-				</SelectBox>
-				<Dropdown isVisible={isVisible}>
-					{value.length ? (
-						<Option key="multiselect_clear" onClick={clearValue} data-test-id="multiselect_clear">
-							<Text message={clearMessage} />
-						</Option>
-					) : null}
-					{value.length === options.length ? null : (
-						<Option key="multiselect_selectAll" onClick={selectAll} data-test-id="multiselect_selectAll">
-							<Text message={selectAllMessage} />
-						</Option>
-					)}
-					{options.map(option => (
-						<Option
-							key={option.value}
-							active={value.indexOf(option.value) !== -1}
-							onClick={clickOption(option.value)}
-							data-test-id={option.value}
-						>
-							{option.label}
-						</Option>
-					))}
-				</Dropdown>
-			</Wrapper>
-		</ClickAwayListener>
-	);
-};
-
-export default withId("selector")(MultiSelector);

package/src/components/MultiSelector.test.js

@@ -1,348 +0,0 @@
-import React from "react";
-import { Provider } from "react-redux";
-import sinon from "sinon";
-import { getStyledClassSelector } from "../utils/testUtils";
-import { InnerSelect, Wrapper, SelectBox, Dropdown, Option, Placeholder } from "./Selector";
-import MultiSelector, { SelectedValue } from "./MultiSelector";
-
-describe("MultiSelector", () => {
-	let updater;
-	beforeEach(() => {
-		updater = sinon.spy().named("updater");
-	});
-
-	it("renders a wrapped, hidden multiple select element, and visual cover elements", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					id="test"
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["1", "3"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Wrapper>
-				<InnerSelect id="test" multiple>
-					<option key={1} value={1}>
-						Opt 1
-					</option>
-					<option key={2} value={2}>
-						Opt 2
-					</option>
-					<option key={3} value={3}>
-						Opt 3
-					</option>
-					<option key={4} value={4}>
-						Opt 4
-					</option>
-				</InnerSelect>
-				<SelectBox htmlFor="test">
-					<SelectedValue>Opt 1, Opt 3</SelectedValue>
-				</SelectBox>
-				<Dropdown>
-					<Option key="multiselect_clear">[Clear]</Option>
-					<Option key="multiselect_selectAll">[Select all]</Option>
-					<Option key={1} active>
-						Opt 1
-					</Option>
-					<Option key={2}>Opt 2</Option>
-					<Option key={3} active>
-						Opt 3
-					</Option>
-					<Option key={4}>Opt 4</Option>
-				</Dropdown>
-			</Wrapper>,
-		));
-
-	it("only renders 'Clear' if value not empty", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					id="test"
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={[]}
-				/>
-			</Provider>,
-			"when mounted",
-			"not to contain",
-			<Option key="multiselect_clear">[Clear]</Option>,
-		));
-
-	it("only renders 'Select all' if value not full", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					id="test"
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["1", "2", "3", "4"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"not to contain",
-			<Option key="multiselect_selectAll">[Select all]</Option>,
-		));
-
-	it("renders a placeholder if no value set", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					id="test"
-					placeholder="This space for rent"
-					update={updater}
-					required
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-				/>
-			</Provider>,
-			"when mounted",
-			"queried for first",
-			getStyledClassSelector(Placeholder),
-			"to satisfy",
-			<Placeholder>This space for rent</Placeholder>,
-		));
-
-	it("can add value when inner selector changes", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["3"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "change", value: "2", target: "select" },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["3", "2"]] }])));
-
-	it("can remove value when inner selector changes", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["2", "3"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "change", value: "3", target: "select" },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["2"]] }])));
-
-	it("can add value when clicking a visual option", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["3"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: '[data-test-id="4"]' },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["3", "4"]] }])));
-
-	it("can remove value when clicking a visual option", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["4", "3"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: '[data-test-id="4"]' },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["3"]] }])));
-
-	it("sets empty value when cleared", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={["4", "3"]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: '[data-test-id="multiselect_clear"]' },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [[]] }])));
-
-	it("sets full value when select all chosen", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-					value={[4, 3]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: '[data-test-id="multiselect_selectAll"]' },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["1", "2", "3", "4"]] }])));
-
-	it("deals with an empty value prop change", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "change", value: "2", target: "select" },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["2"]] }])));
-
-	it("deals with an empty value prop click", () =>
-		expect(
-			<Provider
-				store={{
-					subscribe: () => {},
-					dispatch: () => {},
-					getState: () => ({}),
-				}}
-			>
-				<MultiSelector
-					update={updater}
-					options={[
-						{ value: "1", label: "Opt 1" },
-						{ value: "2", label: "Opt 2" },
-						{ value: "3", label: "Opt 3" },
-						{ value: "4", label: "Opt 4" },
-					]}
-				/>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: '[data-test-id="2"]' },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: [["2"]] }])));
-});