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

package/src/components/Form/FieldList.test.js

@@ -1,558 +0,0 @@
-import React from "react";
-import Immutable from "immutable";
-import { Provider } from "react-redux";
-import sinon from "sinon";
-import { IntlProvider } from "react-intl";
-import { getStyledClassSelector } from "../../utils/testUtils";
-import FieldElements from "./FieldElements";
-import Field from "./Field";
-import { RoundButton } from "./Inputs/SmallButton";
-import { FormInput } from "./Inputs/Text";
-import { FormContext } from "./Form";
-import FieldList, { List, ListControlButton, REMOVE_ROW } from "./FieldList";
-
-describe("FieldList", () => {
-	let state, store, clock;
-	beforeEach(() => {
-		state = Immutable.fromJS({});
-		store = {
-			subscribe: () => {},
-			dispatch: () => {},
-			getState: () => state,
-		};
-		clock = sinon.useFakeTimers();
-	});
-	afterEach(() => {
-		clock.restore();
-	});
-
-	it("renders a minimal fixed-length list", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values: {} }}>
-						<FieldList
-							name="testlistminfixed"
-							rowField={{ type: "TextInput", name: "data" }}
-							getUpdater={getUpdater}
-							rowCount={1}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider store={store}>
-				<FormContext.Provider value={{ values: {} }}>
-					<List>
-						<IntlProvider locale="en">
-							<FieldElements fields={[{ type: "TextInput", name: "data" }]} labelOnly />
-						</IntlProvider>
-						<IntlProvider locale="en">
-							<FieldElements fields={[{ type: "TextInput", name: "data[0]" }]} />
-						</IntlProvider>
-					</List>
-				</FormContext.Provider>
-			</Provider>,
-		);
-	});
-
-	it("renders an empty fixed-length list", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values: {} }}>
-						<FieldList
-							name="testlistminfixed"
-							rowField={{ type: "TextInput", name: "data" }}
-							getUpdater={getUpdater}
-							rowCount={0}
-							values={{}}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider store={store}>
-				<List>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values: {} }}>
-							<FieldElements fields={[{ type: "TextInput", name: "data" }]} labelOnly />
-						</FormContext.Provider>
-					</IntlProvider>
-				</List>
-			</Provider>,
-		);
-	});
-
-	it("renders a fixed-length list with static values", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider
-						value={{
-							values: {
-								testlistfixedstat: [
-									{ id: 4, data: "foo" },
-									{ id: 5, data: "bar" },
-								],
-							},
-						}}
-					>
-						<FieldList
-							name="testlistfixedstat"
-							rowField={{ type: "TextInput", name: "data", label: "A label" }}
-							getUpdater={getUpdater}
-							rowCount={3}
-							staticValues={[{ stat: true }, { stat: false }, { stat: true }]}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider store={store}>
-				<List>
-					<IntlProvider locale="en">
-						<FormContext.Provider value={{ values: {} }}>
-							<FieldElements fields={[{ type: "TextInput", name: "data", label: "A label" }]} labelOnly />
-						</FormContext.Provider>
-					</IntlProvider>
-					<IntlProvider locale="en">
-						<FormContext.Provider
-							value={{
-								values: { id: 4, data: "foo", stat: true },
-								listIndex: 0,
-							}}
-						>
-							<FieldElements fields={[{ type: "TextInput", name: "data" }]} />
-						</FormContext.Provider>
-					</IntlProvider>
-					<IntlProvider locale="en">
-						<FormContext.Provider
-							value={{
-								values: { id: 5, data: "bar", stat: false },
-								listIndex: 1,
-							}}
-						>
-							<FieldElements fields={[{ type: "TextInput", name: "data" }]} />
-						</FormContext.Provider>
-					</IntlProvider>
-					<IntlProvider locale="en">
-						<FormContext.Provider
-							value={{
-								values: {
-									id: expect.it("to be a number").and("to be greater than", 5),
-									stat: true,
-								},
-								listIndex: 2,
-							}}
-						>
-							<FieldElements fields={[{ type: "TextInput", name: "data" }]} />
-						</FormContext.Provider>
-					</IntlProvider>
-				</List>
-			</Provider>,
-		);
-	});
-
-	it("renders a fixed-length list with tall rows", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider
-						value={{
-							values: {
-								testlisttallrows: [
-									{ id: 4, data: "foo" },
-									{ id: 5, data: "bar" },
-								],
-							},
-						}}
-					>
-						<FieldList
-							name="testlisttallrows"
-							rowField={{ type: "TextInput", name: "data", label: "A label" }}
-							getUpdater={getUpdater}
-							rowCount={3}
-							tallRows
-							staticValues={[{ stat: true }, { stat: false }, { stat: true }]}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider store={store}>
-				<List tallRows>
-					<IntlProvider locale="en">
-						<FormContext.Provider
-							value={{
-								values: { id: 4, data: "foo", stat: true },
-								listIndex: 0,
-							}}
-						>
-							<FieldElements fields={[{ type: "TextInput", name: "data", label: "A label" }]} />
-						</FormContext.Provider>
-					</IntlProvider>
-					<IntlProvider locale="en">
-						<FormContext.Provider
-							value={{
-								values: { id: 5, data: "bar", stat: false },
-								listIndex: 1,
-							}}
-						>
-							<FieldElements fields={[{ type: "TextInput", name: "data", label: "A label" }]} />
-						</FormContext.Provider>
-					</IntlProvider>
-					<IntlProvider locale="en">
-						<FormContext.Provider
-							value={{
-								values: {
-									id: expect.it("to be a number").and("to be greater than", 5),
-									stat: true,
-								},
-								listIndex: 2,
-							}}
-						>
-							<FieldElements fields={[{ type: "TextInput", name: "data", label: "A label" }]} />
-						</FormContext.Provider>
-					</IntlProvider>
-				</List>
-			</Provider>,
-		);
-	});
-
-	it("can edit values", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider
-						value={{
-							values: {
-								testlistedit: [
-									{ id: 4, data: "foo" },
-									{ id: 5, data: "bar" },
-									{ id: 6, data: "feep" },
-								],
-							},
-						}}
-					>
-						<FieldList
-							name="testlistedit"
-							rowField={{ type: "TextInput", name: "data" }}
-							getUpdater={getUpdater}
-							rowCount={3}
-							staticValues={[{ stat: true }, { stat: false }, { stat: true }]}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{
-				type: "change",
-				value: "New Value",
-				target: `${getStyledClassSelector(<List />)} > :nth-child(3) ${getStyledClassSelector(FormInput)}`,
-			},
-		).then(() =>
-			expect(update, "to have calls satisfying", [
-				{
-					args: [
-						"testlistedit",
-						[
-							{ id: 4, data: "foo" },
-							{ id: 5, data: "New Value" },
-							{ id: 6, data: "feep" },
-						],
-					],
-				},
-			]),
-		);
-	});
-
-	it("renders a minimal variable-length list", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values: {} }}>
-						<FieldList
-							name="testlistminvar"
-							rowField={{ type: "TextInput", name: "data" }}
-							getUpdater={getUpdater}
-							values={{}}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider value={{ values: {} }}>
-						<List>
-							<FieldElements
-								fields={[
-									{
-										type: "Combination",
-										name: "rowField",
-										proportions: [100, "30px"],
-										fields: [
-											{ type: "TextInput", name: "data" },
-											{
-												type: "SmallButton",
-												name: REMOVE_ROW,
-												primary: true,
-												icon: "cross",
-											},
-										],
-									},
-								]}
-								labelOnly
-							/>
-							<Field>
-								<ListControlButton>[add]</ListControlButton>
-							</Field>
-						</List>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-		);
-	});
-
-	it("renders a variable-length list, with values and row addition", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider
-						value={{
-							values: {
-								testlistvaradd: [
-									{ id: 101, data: "foo", num: 55 },
-									{ id: 102, data: "bar", num: 81 },
-								],
-							},
-						}}
-					>
-						<FieldList
-							name="testlistvaradd"
-							rowField={{
-								type: "Combination",
-								name: "rowField",
-								proportions: [50, 50],
-								fields: [
-									{ type: "TextInput", name: "data" },
-									{
-										type: "NumberInput",
-										name: "num",
-									},
-								],
-							}}
-							getUpdater={getUpdater}
-						/>
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			expect
-				.it(
-					"to satisfy",
-					<Provider store={store}>
-						<IntlProvider locale="en">
-							<List>
-								<FormContext.Provider value={{ values: {} }}>
-									<FieldElements
-										fields={[
-											{
-												type: "Combination",
-												name: "rowField",
-												proportions: [50, 50, "30px"],
-												fields: [
-													{ type: "TextInput", name: "data" },
-													{
-														type: "NumberInput",
-														name: "num",
-													},
-													{
-														type: "SmallButton",
-														name: REMOVE_ROW,
-														primary: true,
-														icon: "cross",
-														altText: "[remove]",
-													},
-												],
-											},
-										]}
-										labelOnly
-									/>
-								</FormContext.Provider>
-								<FormContext.Provider
-									value={{
-										values: { id: 101, data: "foo", num: 55 },
-										listIndex: 0,
-									}}
-								>
-									<FieldElements
-										fields={[
-											{
-												type: "Combination",
-												name: "rowField",
-												proportions: [50, 50, "30px"],
-												fields: [
-													{ type: "TextInput", name: "data" },
-													{
-														type: "NumberInput",
-														name: "num",
-													},
-													{
-														type: "SmallButton",
-														name: REMOVE_ROW,
-														primary: true,
-														icon: "cross",
-														altText: "[remove]",
-													},
-												],
-											},
-										]}
-									/>
-								</FormContext.Provider>
-								<FormContext.Provider
-									value={{
-										values: { id: 102, data: "bar", num: 81 },
-										listIndex: 1,
-									}}
-								>
-									<FieldElements
-										fields={[
-											{
-												type: "Combination",
-												name: "rowField",
-												proportions: [50, 50, "30px"],
-												fields: [
-													{ type: "TextInput", name: "data" },
-													{
-														type: "NumberInput",
-														name: "num",
-													},
-													{
-														type: "SmallButton",
-														name: REMOVE_ROW,
-														primary: true,
-														icon: "cross",
-														altText: "[remove]",
-													},
-												],
-											},
-										]}
-									/>
-								</FormContext.Provider>
-								<Field>
-									<ListControlButton>[add]</ListControlButton>
-								</Field>
-							</List>
-						</IntlProvider>
-					</Provider>,
-				)
-				.and("with event", {
-					type: "click",
-					target: getStyledClassSelector(ListControlButton),
-				}),
-		).then(() =>
-			expect(update, "to have calls satisfying", [
-				{
-					args: [
-						"testlistvaradd",
-						[
-							{ id: 101, data: "foo", num: 55 },
-							{ id: 102, data: "bar", num: 81 },
-							{
-								id: expect.it("to be a number").and("to be greater than", 2),
-							},
-						],
-					],
-				},
-			]),
-		);
-	});
-
-	it("can delete rows", () => {
-		const update = sinon.spy().named("update");
-		const getUpdater = name => value => update(name, value);
-		return expect(
-			<Provider store={store}>
-				<IntlProvider locale="en">
-					<FormContext.Provider
-						value={{
-							values: {
-								testlistrowdel: [
-									{ id: 8, data: "bar" },
-									{ id: 9, data: "foo" },
-								],
-							},
-						}}
-					>
-						<FieldList name="testlistrowdel" rowField={{ type: "TextInput", name: "data" }} getUpdater={getUpdater} />
-					</FormContext.Provider>
-				</IntlProvider>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{
-				type: "click",
-				target: `${getStyledClassSelector(<List />)} > :nth-child(2) ${getStyledClassSelector(RoundButton)}`,
-			},
-		)
-			.then(() => clock.tick(1))
-			.then(() =>
-				expect(update, "to have calls satisfying", [
-					{
-						args: ["testlistrowdel", [{ id: 9, data: "foo" }]],
-					},
-				]),
-			);
-	});
-
-	it("will not render inside another list", () =>
-		expect(
-			<FormContext.Provider value={{ values: {}, listIndex: 0 }}>
-				<FieldList listIndex={0} getUpdater={() => () => {}} />
-			</FormContext.Provider>,
-			"when mounted",
-			"to satisfy",
-			"Cannot render list inside list",
-		));
-});
-
-describe("List", () => {
-	it("sets layout for fieldboxes under it", () =>
-		expect(
-			<List />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "> .Field__FieldBox").and("to contain", "margin-top: 20px"),
-		));
-
-	it("sets layout for fieldboxes under it with tall rows", () =>
-		expect(
-			<List tallRows />,
-			"when mounted",
-			"to have style rules satisfying",
-			expect.it("to contain", "> .Field__FieldBox").and("to contain", "border-bottom: 1px solid"),
-		));
-});

package/src/components/Form/Inputs/FieldButtons.js

@@ -1,90 +0,0 @@
-import styled, { css } from "styled-components";
-import Button from "../../Button";
-import { ifFlag, getThemeProp } from "../../../utils";
-
-export const ButtonWrapper = styled.div`
-	box-sizing: border-box;
-	display: flex;
-	align-items: stretch;
-	height: 30px;
-	flex: 0 1 auto;
-	border-radius: 4px;
-	border: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-
-	& > * {
-		box-sizing: border-box;
-		height: 28px;
-		border: 0 none transparent;
-		border-radius: 0;
-		flex: 0 1 100%;
-		box-shadow: none;
-	}
-
-	& > :first-child {
-		border-top-left-radius: 4px;
-		border-bottom-left-radius: 4px;
-	}
-	& > :last-child {
-		border-top-right-radius: 4px;
-		border-bottom-right-radius: 4px;
-	}
-
-	${ifFlag(
-		"invalid",
-		css`
-			border-color: ${getThemeProp(["colors", "error"], "#ce4844")};
-
-			&:hover,
-			&:active {
-				box-shadow: 0 0 4px ${getThemeProp(["colors", "error"], "#ce4844")};
-			}
-		`,
-	)}
-`;
-
-export const Spinners = styled.div`
-	display: flex;
-	flex-direction: column;
-	height: 30px;
-	flex: 0 0 auto;
-	margin-top: -1px;
-	margin-bottom: -1px;
-
-	&:first-child > * {
-		margin-left: -1px;
-	}
-	&:last-child > * {
-		margin-right: -1px;
-	}
-`;
-
-export const InputButton = styled(Button)`
-	padding: 2px 7px;
-	font-size: 8px;
-	border-radius: 0;
-	min-width: 0;
-	min-height: 0;
-	flex: 0 0 auto;
-
-	&:active,
-	&:focus,
-	&:hover {
-		z-index: 1;
-	}
-
-	${Spinners} > & {
-		flex: 1 1 50%;
-	}
-	${Spinners}:last-child > & {
-		margin-top: -1px;
-
-		&:first-child {
-			margin-top: 0;
-			border-top-right-radius: 4px;
-		}
-		&:last-child {
-			padding-top: 1px;
-			border-bottom-right-radius: 4px;
-		}
-	}
-`;

package/src/components/Form/Inputs/Number.js

@@ -1,60 +0,0 @@
-import React, { useCallback } from "react";
-import { FormInput } from "./Text";
-import { ButtonWrapper, Spinners, InputButton } from "./FieldButtons";
-
-export const roundToStep = (num, step) => {
-	const parsedNum = parseFloat(num);
-	if (Number.isNaN(parsedNum) || Number.isNaN(parseFloat(step))) {
-		return "";
-	}
-	const factor = 1 / parseFloat(step);
-	return Math.floor((parsedNum + 0.5 * step) * factor + Number.EPSILON) / factor;
-};
-
-const nullNaN = (num, nil = 0) => (Number.isNaN(num) ? nil : num);
-
-const containNumber = (number, max = Number.MAX_VALUE, min = -Number.MAX_VALUE) =>
-	Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : number;
-
-export const NumberInput = ({ update, min, max, value = "", step, required, ...props }) => {
-	const onChange = useCallback(
-		e =>
-			step
-				? update(containNumber(roundToStep(e.target.value, step), max, min))
-				: update(containNumber(nullNaN(parseFloat(e.target.value), ""), max, min)),
-		[update, step, min, max],
-	);
-	const increment = useCallback(
-		() =>
-			step
-				? update(containNumber(roundToStep(value + step, step), max, undefined))
-				: update(containNumber(nullNaN(parseFloat(value)) + 1, max, undefined)),
-		[update, value, step, max],
-	);
-	const decrement = useCallback(
-		() =>
-			step
-				? update(containNumber(roundToStep(value - step, step), undefined, min))
-				: update(containNumber(nullNaN(parseFloat(value)) - 1, undefined, min)),
-		[update, value, step, min],
-	);
-	return (
-		<ButtonWrapper invalid={required && !value}>
-			<FormInput
-				type="number"
-				step={step}
-				value={step ? roundToStep(value, step) : value}
-				onChange={onChange}
-				{...props}
-			/>
-			<Spinners>
-				<InputButton onClick={increment} data-test-id="up">
-					⮝
-				</InputButton>
-				<InputButton onClick={decrement} data-test-id="down">
-					⮟
-				</InputButton>
-			</Spinners>
-		</ButtonWrapper>
-	);
-};