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

package/src/components/Form/Inputs/ReadOnly.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";
-import { CenterWrapper, ReadOnlyBlock, ReadOnly, Label, LineLabel } from "./ReadOnly";
+import { ReadOnly, LineLabel } from "./ReadOnly";
 
 describe("ReadOnly", () => {
 	it("renders a read-only value in a form", () =>
@@ -19,13 +19,51 @@ describe("ReadOnly", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<CenterWrapper>
-				<ReadOnlyBlock>Read Only</ReadOnlyBlock>
-			</CenterWrapper>,
+			<div>
+				<p>Read Only</p>
+			</div>,
+		));
+
+	it("renders a read-only text in a form", () =>
+		expect(
+			<Provider
+				store={{
+					subscribe: () => {},
+					dispatch: () => {},
+					getState: () => ({}),
+				}}
+			>
+				<ReadOnly value="Read Only" />
+			</Provider>,
+			"when mounted",
+			"to satisfy",
+			<div>
+				<p>Read Only</p>
+			</div>,
 		));
 });
 
 describe("LineLabel", () => {
+	it("renders a formatted text in large font", () =>
+		expect(
+			<Provider
+				store={{
+					subscribe: () => {},
+					dispatch: () => {},
+					getState: () => ({}),
+				}}
+			>
+				<IntlProvider locale="en">
+					<LineLabel value={{ id: "test.textValue", defaultMessage: "A text value" }} />
+				</IntlProvider>
+			</Provider>,
+			"when mounted",
+			"to satisfy",
+			<div>
+				<p>A text value</p>
+			</div>,
+		));
+
 	it("renders a text in large font", () =>
 		expect(
 			<Provider
@@ -39,8 +77,8 @@ describe("LineLabel", () => {
 			</Provider>,
 			"when mounted",
 			"to satisfy",
-			<CenterWrapper>
-				<Label>A text value</Label>
-			</CenterWrapper>,
+			<div>
+				<p>A text value</p>
+			</div>,
 		));
 });

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Select from "../../MaterialUI/Inputs/Select";
+import { memoize } from "../../../utils";
+import SelectProps from "../../MaterialUI/Inputs/SelectProps";
+
+export const selectEventUpdater = memoize(update => value => update(value));
+
+const Selector = ({ value, options, update, ...props }) => {
+	const selectProps = new SelectProps();
+
+	selectProps.set(SelectProps.propNames.value, value);
+	selectProps.set(SelectProps.propNames.onClose, props.onBlur);
+	selectProps.set(SelectProps.propNames.disabled, props.disabled);
+	selectProps.set(SelectProps.propNames.update, selectEventUpdater(update));
+
+	const hasError = props.required && !value ? true : false;
+	selectProps.set(SelectProps.propNames.error, hasError);
+
+	return <Select options={options} selectProps={selectProps} />;
+};
+
+export default Selector;

package/src/components/Form/Inputs/Selector.test.js

@@ -0,0 +1,105 @@
+import React from "react";
+import sinon from "sinon";
+import Selector, { selectEventUpdater } from "./Selector";
+import { TestWrapper, createMuiTheme } from "./../../../utils/testUtils";
+import Immutable from "immutable";
+import SelectMUI from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import TooltippedTypography from "../../MaterialUI/DataDisplay/TooltippedElements/TooltippedTypography";
+import Icon from "../../MaterialUI/DataDisplay/Icon";
+
+describe("Selector", () => {
+	let update, state, store, chevronDown;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+
+		state = Immutable.fromJS({
+			locale: {
+				locale: "en-CA",
+			},
+		});
+
+		store = {
+			subscribe: () => {},
+			dispatch: () => {},
+			getState: () => state,
+		};
+
+		chevronDown = props => {
+			return <Icon id="dropdown-chevron-down" {...props} />;
+		};
+	});
+
+	const theme = createMuiTheme();
+
+	it("renders a selector with multiple options", () =>
+		expect(
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<Selector
+					update={update}
+					value="English"
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<SelectMUI value="English" disableUnderline={true} IconComponent={chevronDown} error={false}>
+					<MenuItem key="English" value="English">
+						<TooltippedTypography children="English" titleValue="English" />
+					</MenuItem>
+					<MenuItem key="Francais" value="Francais">
+						<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+					</MenuItem>
+				</SelectMUI>
+			</TestWrapper>,
+		));
+
+	it("renders a selector with an error", () => {
+		expect(
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<Selector
+					update={update}
+					required={true}
+					value={null}
+					options={[
+						{ value: "English", label: "English" },
+						{ value: "Francais", label: "Francais" },
+					]}
+				/>
+			</TestWrapper>,
+			"when mounted",
+			"to satisfy",
+			<TestWrapper provider={{ store }} intlProvider stylesProvider muiThemeProvider={{ theme }}>
+				<div>
+					<SelectMUI value="" disableUnderline={true} IconComponent={chevronDown} error={true}>
+						<MenuItem key="English" value="English">
+							<TooltippedTypography children="English" titleValue="English" />
+						</MenuItem>
+						<MenuItem key="Francais" value="Francais">
+							<TooltippedTypography noWrap children="Francais" titleValue="Francais" />
+						</MenuItem>
+					</SelectMUI>
+					<div></div>
+				</div>
+			</TestWrapper>,
+		);
+	});
+});
+
+describe("selectEventUpdater", () => {
+	let update;
+	beforeEach(() => {
+		update = sinon.spy().named("update");
+	});
+
+	it("creates a handler for an event and calls update with the value of the target", () =>
+		expect(selectEventUpdater, "called with", [update], "called with", ["foo"]).then(() =>
+			expect(update, "to have calls satisfying", [{ args: ["foo"] }]),
+		));
+
+	it("is memoized", () => expect(selectEventUpdater, "called with", [update], "to be", selectEventUpdater(update)));
+});

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

@@ -1,49 +1,20 @@
 import React from "react";
-import styled from "styled-components";
-import Input from "../../Input";
-import { memoize, getThemeProp } from "../../../utils";
+import InputBase from "../../MaterialUI/Inputs/InputBase";
+import { memoize } from "../../../utils";
+import InputBaseProps from "../../MaterialUI/Inputs/InputBaseProps";
 
-export const FormInput = styled(Input)`
-	box-sizing: border-box;
-	flex: 0 0 auto;
-	border-radius: 4px;
-	min-width: 40px;
-	width: 100%;
+export const inputEventUpdater = memoize(update => input => update(input));
 
-	&:active,
-	&:focus {
-		z-index: 1;
-	}
+export const TextInput = ({ update, value = "", ...props }) => {
+	const inputBaseProps = new InputBaseProps();
+	inputBaseProps.set(InputBaseProps.propNames.value, value);
+	inputBaseProps.set(InputBaseProps.propNames.disabled, props.disabled);
+	inputBaseProps.set(InputBaseProps.propNames.placeholder, props.placeholder);
+	inputBaseProps.set(InputBaseProps.propNames.onBlur, props.onBlur);
+	inputBaseProps.set(InputBaseProps.propNames.update, inputEventUpdater(update));
 
-	&:invalid {
-		border-color: ${getThemeProp(["colors", "error"], "#ce4844")};
-		box-shadow: 0 0 4px ${getThemeProp(["colors", "error"], "#ce4844")};
-	}
+	const hasError = props.required && !value ? true : false;
+	inputBaseProps.set(InputBaseProps.propNames.error, hasError);
 
-	${"" /* These are hacks, work only in Chrome, best not used */}
-	&[type="date"],
-	&[type="number"],
-	&[type="time"] {
-		-webkit-appearance: none;
-		-moz-appearance: textfield;
-	}
-	&::-webkit-clear-button,
-	&::-webkit-calendar-picker-indicator {
-		display: none;
-	}
-
-	&::-webkit-outer-spin-button,
-	&::-webkit-inner-spin-button {
-		-webkit-appearance: none;
-		margin: 0;
-	}
-`;
-
-export const getEventUpdater = memoize(update => e => update(e.target.value));
-
-export const TextInput = ({ update, value = "", ...props }) => (
-	<FormInput type="text" onChange={getEventUpdater(update)} {...props} value={value} />
-);
-export const EmailInput = ({ update, value = "", ...props }) => (
-	<FormInput type="email" onChange={getEventUpdater(update)} {...props} value={value} />
-);
+	return <InputBase inputProps={inputBaseProps} />;
+};

package/src/components/Form/Inputs/Text.test.js

@@ -1,28 +1,15 @@
 import React from "react";
 import { IntlProvider } from "react-intl";
 import sinon from "sinon";
-import { FormInput, getEventUpdater, TextInput, EmailInput } from "./Text";
+import InputBase from "../../MaterialUI/Inputs/InputBase";
+import { inputEventUpdater, TextInput } from "./Text";
+import { extractMessages, generateClassName } from "../../../utils/testUtils";
+import sharedMessages from "../../../sharedMessages";
+import { StylesProvider } from "@material-ui/core";
 
-describe("TextInput", () => {
-	let update;
-	beforeEach(() => {
-		update = sinon.spy().named("update");
-	});
+const messages = extractMessages(sharedMessages);
 
-	it("renders a text input with change handler", () =>
-		expect(
-			<IntlProvider locale="en">
-				<TextInput update={update} otherProp />
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<IntlProvider locale="en">
-				<FormInput type="text" onChange={getEventUpdater(update)} otherProp />
-			</IntlProvider>,
-		));
-});
-
-describe("EmailInput", () => {
+describe("TextInput", () => {
 	let update;
 	beforeEach(() => {
 		update = sinon.spy().named("update");
@@ -30,27 +17,31 @@ describe("EmailInput", () => {
 
 	it("renders a text input with change handler", () =>
 		expect(
-			<IntlProvider locale="en">
-				<EmailInput update={update} otherProp />
-			</IntlProvider>,
+			<StylesProvider generateClassName={generateClassName}>
+				<IntlProvider locale="en" messages={messages}>
+					<TextInput update={update} otherProp />
+				</IntlProvider>
+			</StylesProvider>,
 			"when mounted",
 			"to satisfy",
-			<IntlProvider locale="en">
-				<FormInput type="email" onChange={getEventUpdater(update)} otherProp />
-			</IntlProvider>,
+			<StylesProvider generateClassName={generateClassName}>
+				<IntlProvider locale="en" messages={messages}>
+					<InputBase />
+				</IntlProvider>
+			</StylesProvider>,
 		));
 });
 
-describe("getEventUpdater", () => {
+describe("inputEventUpdater", () => {
 	let update;
 	beforeEach(() => {
 		update = sinon.spy().named("update");
 	});
 
 	it("creates a handler for an event and calls update with the value of the target", () =>
-		expect(getEventUpdater, "called with", [update], "called with", [{ target: { value: "foo" } }]).then(() =>
+		expect(inputEventUpdater, "called with", [update], "called with", ["foo"]).then(() =>
 			expect(update, "to have calls satisfying", [{ args: ["foo"] }]),
 		));
 
-	it("is memoized", () => expect(getEventUpdater, "called with", [update], "to be", getEventUpdater(update)));
+	it("is memoized", () => expect(inputEventUpdater, "called with", [update], "to be", inputEventUpdater(update)));
 });

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

@@ -1,33 +1,34 @@
 import React from "react";
-import styled from "styled-components";
+import { makeStyles } from "@material-ui/core/styles";
 import { memoize } from "../../../utils";
-import Checkbox from "../../Checkbox";
-import Switch from "../../Switch";
+import Switch from "../../MaterialUI/Inputs/Switch";
+import SwitchProps from "../../MaterialUI/Inputs/SwitchProps";
 
-export const FormCheckbox = styled(Checkbox)`
-	height: 30px;
-	display: flex;
-	align-self: flex-start;
-	align-items: center;
-`;
+export const switchEventUpdater = memoize(update => value => update(value));
 
-export const getCheckUpdater = memoize(update => e => update(e.target.checked));
+const useStyles = makeStyles({
+	centerMiddleWrapper: {
+		minHeight: 30,
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+});
 
-export const CenterMiddleWrapper = styled.div`
-	min-height: 30px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;
+export const SwitchInput = ({ update, value, ...props }) => {
+	const classes = useStyles();
 
-export const CheckboxInput = ({ update, value, ...props }) => (
-	<CenterMiddleWrapper>
-		<FormCheckbox onChange={getCheckUpdater(update)} value={value} {...props} />
-	</CenterMiddleWrapper>
-);
+	const switchProps = new SwitchProps();
 
-export const SwitchInput = ({ update, value, ...props }) => (
-	<CenterMiddleWrapper>
-		<Switch onChange={getCheckUpdater(update)} value={value} {...props} />
-	</CenterMiddleWrapper>
-);
+	switchProps.set(SwitchProps.propNames.value, value);
+	switchProps.set(SwitchProps.propNames.onCaption, props.onCaption);
+	switchProps.set(SwitchProps.propNames.offCaption, props.offCaption);
+	switchProps.set(SwitchProps.propNames.disabled, props.disabled);
+	switchProps.set(SwitchProps.propNames.update, switchEventUpdater(update));
+
+	return (
+		<div className={classes.centerMiddleWrapper}>
+			<Switch switchProps={switchProps} />
+		</div>
+	);
+};

package/src/components/Form/Inputs/Toggles.test.js

@@ -1,24 +1,10 @@
 import React from "react";
 import sinon from "sinon";
-import Switch from "../../Switch";
-import { FormCheckbox, getCheckUpdater, CenterMiddleWrapper, CheckboxInput, SwitchInput } from "./Toggles";
-
-describe("CheckboxInput", () => {
-	let update;
-	beforeEach(() => {
-		update = sinon.spy().named("update");
-	});
-
-	it("renders a checkbox input with change handler", () =>
-		expect(
-			<CheckboxInput id="test-item" update={update} value={false} otherProp />,
-			"when mounted",
-			"to satisfy",
-			<CenterMiddleWrapper>
-				<FormCheckbox id="test-item" onChange={getCheckUpdater(update)} value={false} otherProp />
-			</CenterMiddleWrapper>,
-		));
-});
+import { IntlProvider } from "react-intl";
+import Switch from "../../MaterialUI/Inputs/Switch";
+import { generateClassName } from "../../../utils/testUtils";
+import { switchEventUpdater, SwitchInput } from "./Toggles";
+import { StylesProvider } from "@material-ui/core";
 
 describe("SwitchInput", () => {
 	let update;
@@ -28,25 +14,33 @@ describe("SwitchInput", () => {
 
 	it("renders a switch input with change handler", () =>
 		expect(
-			<SwitchInput id="test-item" update={update} value={true} otherProp />,
+			<StylesProvider generateClassName={generateClassName}>
+				<IntlProvider locale="en">
+					<SwitchInput id="test-item" update={update} value={true} otherProp />
+				</IntlProvider>
+			</StylesProvider>,
 			"when mounted",
 			"to satisfy",
-			<CenterMiddleWrapper>
-				<Switch id="test-item" onChange={getCheckUpdater(update)} value={true} otherProp />
-			</CenterMiddleWrapper>,
+			<StylesProvider generateClassName={generateClassName}>
+				<IntlProvider locale="en">
+					<div>
+						<Switch />
+					</div>
+				</IntlProvider>
+			</StylesProvider>,
 		));
 });
 
-describe("getCheckUpdater", () => {
+describe("switchEventUpdater", () => {
 	let update;
 	beforeEach(() => {
 		update = sinon.spy().named("update");
 	});
 
-	it("creates a handler for an event and calls update with the 'checked' attribute of the target", () =>
-		expect(getCheckUpdater, "called with", [update], "called with", [{ target: { checked: true } }]).then(() =>
-			expect(update, "to have calls satisfying", [{ args: [true] }]),
+	it("creates a handler for an event and calls update with the value of the target", () =>
+		expect(switchEventUpdater, "called with", [update], "called with", ["foo"]).then(() =>
+			expect(update, "to have calls satisfying", [{ args: ["foo"] }]),
 		));
 
-	it("is memoized", () => expect(getCheckUpdater, "called with", [update], "to be", getCheckUpdater(update)));
+	it("is memoized", () => expect(switchEventUpdater, "called with", [update], "to be", switchEventUpdater(update)));
 });

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

@@ -1,30 +1,19 @@
-import Selector from "../../Selector";
+import Selector from "./Selector";
 import MultiSelector from "../../MultiSelector";
 import Button from "./Button";
-import SmallButton from "./SmallButton";
-import { ReadOnly, LineLabel } from "./ReadOnly";
-import { CheckboxInput, SwitchInput } from "./Toggles";
-import { TextInput, EmailInput } from "./Text";
-import { NumberInput } from "./Number";
+import { ReadOnly } from "./ReadOnly";
+import { SwitchInput } from "./Toggles";
+import { TextInput } from "./Text";
 import { DateInput } from "./Date";
-import { TimeInput } from "./Time";
-import TranslationInput from "./Translation";
 
 const inputs = {
 	Button,
-	CheckboxInput,
 	DateInput,
-	EmailInput,
-	LineLabel,
 	MultiSelector,
-	NumberInput,
 	ReadOnly,
 	Selector,
-	SmallButton,
 	SwitchInput,
 	TextInput,
-	TimeInput,
-	TranslationInput,
 };
 
 export default inputs;

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.test.js

@@ -126,9 +126,6 @@ describe("Information Item", () => {
 		const label = "label";
 		const value = "value";
 
-		const multipleLinesTextProps = new TextProps();
-		multipleLinesTextProps.set(TextProps.propNames.lineCount, 2);
-
 		const component = (
 			<IntlProvider locale="en-US">
 				<InformationItem label={label} isMaxLineCountEnabled={null}>
@@ -140,7 +137,7 @@ describe("Information Item", () => {
 		const expected = (
 			<div>
 				<Typography children={label} />
-				<MultipleLinesText textProps={multipleLinesTextProps}>{value}</MultipleLinesText>
+				<MultipleLinesText>{value}</MultipleLinesText>
 			</div>
 		);
 

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.js

@@ -8,20 +8,25 @@ import Skeleton from "@material-ui/lab/Skeleton";
 const useStyles = makeStyles(theme => ({
 	placeholder: {
 		margin: `${theme.spacing(10)} auto`,
+		"& > *": {
+			color: theme.palette.grey.icon,
+		},
+	},
+	placeholderError: {
+		"& > *": {
+			color: theme.palette.error.main,
+		},
 	},
 	placeholderImage: {
 		fontSize: theme.spacing(14),
-		color: theme.palette.grey.icon,
 	},
 	placeholderTitle: {
 		marginTop: theme.spacing(1),
 		fontSize: theme.typography.h1Size,
-		color: theme.palette.grey.icon,
 	},
 	placeholderSubtitle: {
 		marginTop: theme.spacing(1),
 		fontSize: theme.typography.h3Size,
-		color: theme.palette.grey.icon,
 	},
 	placeholderRow: {
 		alignSelf: "flex-start",
@@ -55,10 +60,21 @@ const useStyles = makeStyles(theme => ({
 	},
 	root: {
 		flexGrow: 1,
+		display: "flex",
+		flexDirection: "column",
+	},
+	animatePlaceholderImage: {
+		animation: "$rotate 4s linear infinite",
+		margin: "auto",
+	},
+	"@keyframes rotate": {
+		to: {
+			transform: "rotate(1turn)",
+		},
 	},
 }));
 
-const Placeholder = ({ icon, title, subtitle, cellList = [] }) => {
+const Placeholder = ({ icon, title, subtitle, cellList = [], error = false, animateIcon = false }) => {
 	const classes = useStyles();
 	return (
 		<>
@@ -90,8 +106,18 @@ const Placeholder = ({ icon, title, subtitle, cellList = [] }) => {
 					</div>
 				) : null}
 				{(icon || title || subtitle) && (
-					<Grid container direction="column" alignItems="center" className={classes.placeholder}>
-						{icon ? <Icon className={classes.placeholderImage} id={icon} /> : null}
+					<Grid
+						container
+						direction="column"
+						alignItems="center"
+						className={`${classes.placeholder} ${error ? classes.placeholderError : ""}`}
+					>
+						{icon ? (
+							<Icon
+								className={`${classes.placeholderImage} ${animateIcon ? classes.animatePlaceholderImage : ""}`}
+								id={icon}
+							/>
+						) : null}
 						{title ? <Typography className={classes.placeholderTitle}>{title}</Typography> : null}
 						{subtitle ? <Typography className={classes.placeholderSubtitle}>{subtitle}</Typography> : null}
 					</Grid>

package/src/components/MaterialUI/DataDisplay/PredefinedElements/Placeholder.test.js

@@ -151,7 +151,9 @@ describe("Placeholder", () => {
 	});
 
 	it("Renders placeholder with all parametres", () => {
-		const component = <Placeholder icon={icon} title={title} subtitle={subtitle} cellList={cellList} />;
+		const component = (
+			<Placeholder icon={icon} animateIcon title={title} subtitle={subtitle} cellList={cellList} error={true} />
+		);
 
 		const mountedComponent = mount(component);
 		const expected = (

package/src/components/MaterialUI/DataDisplay/PredefinedElements/SectionToolbar.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles(theme => ({
+	container: {
+		display: "flex",
+		padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+		minHeight: theme.spacing(4),
+		alignItems: "center",
+		borderBottom: `${theme.spacing(0.1)} solid ${theme.palette.grey.borders}`,
+	},
+	rightContent: {
+		justifyContent: "flex-end",
+		alignItems: "center",
+		display: "flex",
+		flex: 1,
+	},
+}));
+
+const SectionToolbar = ({ children, rightContent }) => {
+	const classes = useStyles();
+
+	const container = (
+		<div className={classes.container}>
+			{children}
+			{[
+				rightContent && (
+					<div key={"rightContent"} className={classes.rightContent}>
+						{rightContent}
+					</div>
+				),
+			]}
+		</div>
+	);
+
+	return container;
+};
+
+export default SectionToolbar;