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

package/src/components/Scope/Selector.test.js

@@ -1,138 +0,0 @@
-import React from "react";
-import Immutable from "immutable";
-import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
-import { IntlProvider } from "react-intl";
-import { Selector, Wrapper, SearchInput, InputBox } from "./Selector";
-import { Wrapper as BranchWrapper } from "../Treeview/Branch";
-import { Root } from "../Treeview/Leaf";
-import { Label } from "../Treeview/Label";
-import { ScopeIcon, ContentLabel, ScopeText } from "./ScopeNode";
-
-describe("Selector", () => {
-	let props, modalRoot, state, store, nodes;
-	beforeEach(() => {
-		nodes = {
-			Global: {
-				id: "Global",
-				name: "Global",
-				type: "test",
-				childrenIds: ["Foo", "Bar"],
-			},
-			Foo: { id: "Foo", name: "Foo", type: "test" },
-			Bar: { id: "Bar", name: "Bar", type: "test" },
-		};
-		modalRoot = document.createElement("div");
-		modalRoot.id = "modal";
-		document.body.appendChild(modalRoot);
-		props = {
-			id: "Global",
-			show: true,
-			reset: () => {},
-			intl: { formatMessage: msg => msg.defaultMessage },
-			getScope: id => nodes[id],
-			defaultNodeState: { foo: true, bar: true },
-			filter: "",
-			updateFilter: () => {},
-			filterPlaceholder: { defaultMessage: "Type a scope name" },
-		};
-		state = Immutable.fromJS({
-			view: {},
-			navigation: {
-				route: {
-					match: {
-						path: "/:scope/Bar",
-						params: { scope: "Foo" },
-					},
-				},
-			},
-			router: {},
-		});
-		store = { subscribe: () => {}, dispatch: () => {}, getState: () => state };
-	});
-	afterEach(() => {
-		document.body.removeChild(modalRoot);
-	});
-
-	it("shows a side panel with search and tree with a current node", () => {
-		props.currentScope = nodes["Global"];
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<IntlProvider locale="en">
-						<Selector {...props} />
-					</IntlProvider>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			null,
-		).then(() =>
-			expect(
-				modalRoot,
-				"to satisfy",
-				<div>
-					<div>
-						<Wrapper>
-							<InputBox>
-								<IntlProvider locale="en">
-									<SearchInput />
-								</IntlProvider>
-							</InputBox>
-							<BranchWrapper>
-								<Root>
-									<Label isSelectedNode={true}>
-										<ContentLabel id="selectorNodeGlobal">
-											<ScopeIcon type="test" />
-											<ScopeText>Global</ScopeText>
-										</ContentLabel>
-									</Label>
-								</Root>
-							</BranchWrapper>
-						</Wrapper>
-					</div>
-				</div>,
-			),
-		);
-	});
-
-	it("shows a side panel with search and tree", () =>
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<IntlProvider locale="en">
-						<Selector {...props} />
-					</IntlProvider>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			null,
-		).then(() =>
-			expect(
-				modalRoot,
-				"to satisfy",
-				<div>
-					<div>
-						<Wrapper>
-							<InputBox>
-								<IntlProvider locale="en">
-									<SearchInput />
-								</IntlProvider>
-							</InputBox>
-							<BranchWrapper>
-								<Root>
-									<Label>
-										<ContentLabel id="selectorNodeGlobal">
-											<ScopeIcon type="test" />
-											<ScopeText>Global</ScopeText>
-										</ContentLabel>
-									</Label>
-								</Root>
-							</BranchWrapper>
-						</Wrapper>
-					</div>
-				</div>,
-			),
-		));
-});

package/src/components/Selector.js

@@ -1,191 +0,0 @@
-import React, { useCallback, useState } from "react";
-import styled, { css } from "styled-components";
-import { getThemeProp, ifFlag, memoize } from "../utils";
-import withId from "../hocs/withId";
-import ClickAwayListener from "@material-ui/core/ClickAwayListener";
-
-export const InnerSelect = styled.select`
-	position: absolute;
-	opacity: 0;
-	font-size: 0;
-	height: 0;
-	width: 0;
-	border: 0 none transparent;
-	z-index: -1;
-	transform: translateX(-99px);
-`;
-
-export const Wrapper = styled.div`
-	position: relative;
-	cursor: pointer;
-	font-size: 12px;
-	max-width: 700px;
-`;
-
-export const SelectBox = styled.label`
-	position: relative;
-	box-sizing: border-box;
-	display: block;
-	min-height: 30px;
-	max-height: 70px;
-	overflow: hidden;
-	padding: 5px 10px;
-	border: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	border-radius: 4px;
-	background-color: white;
-
-	&::before {
-		content: " ";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		box-shadow: 0 -10px 5px -5px inset white;
-	}
-
-	&::after {
-		content: "ˇ";
-		font-family: courier, monospace;
-		font-size: 32px;
-		position: absolute;
-		right: 10px;
-		top: 6px;
-	}
-
-	${InnerSelect}:focus + & {
-		border-color: #4fa1f0;
-		box-shadow: 0 0 4px #4fa1f0;
-	}
-
-	${InnerSelect}:focus + &::after {
-		transform: rotate(0.5turn);
-		transform-origin: center 8px;
-	}
-
-	${InnerSelect}:invalid + & {
-		border-color: ${getThemeProp(["colors", "error"], "#ce4844")};
-		box-shadow: 0 0 4px ${getThemeProp(["colors", "error"], "#ce4844")};
-	}
-`;
-
-export const SelectedValue = styled.span`
-	display: inline-block;
-	width: calc(100% - 20px);
-	white-space: pre;
-	overflow: hidden;
-`;
-
-export const Dropdown = styled.div`
-	box-sizing: border-box;
-	position: absolute;
-	left: 0;
-	top: calc(100% + 1px);
-	z-index: 1;
-	border: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	border-radius: 4px;
-	padding: 4px 0;
-	width: 100%;
-	max-height: 40vh;
-	overflow-y: auto;
-	background-color: white;
-	opacity: 0;
-	visibility: hidden;
-	${/* Enables click handling on Options while closing dropdown */ ""};
-	transition: visibility 0.4s step-end;
-
-	${props => {
-		/* istanbul ignore next */
-		if (props.isVisible) {
-			return `${InnerSelect} + ${SelectBox} + & {
-				opacity: 1;
-				visibility: visible;
-				transition: visibility 0s step-end;
-			}`;
-		}
-	}}
-`;
-
-export const Option = styled.div`
-	box-sizing: border-box;
-	height: 30px;
-	padding: 6px 12px;
-	white-space: pre;
-	${ifFlag(
-		"active",
-		css`
-			background-color: #f0f0f0;
-		`,
-	)};
-
-	&:hover {
-		background-color: ${getThemeProp(["colors", "application", "base"], "#ccc")};
-		color: #ffffff;
-	}
-`;
-
-export const Placeholder = styled.span`
-	color: rgb(117, 117, 117);
-`;
-
-export const Selector = ({ id, value, options, update, placeholder = "", required, ...props }) => {
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const clickOption = useCallback(
-		memoize(value => () => {
-			update(value);
-			setIsVisible(false);
-		}),
-		[update],
-	);
-	console.warn("Selector component has been deprecated in favor of Material-UI wrapper component Select");
-	const onChange = useCallback(e => update(e.target.value), [update]);
-	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} required={required} {...props}>
-					{required ? <option></option> : null}
-					{options.map(option => (
-						<option key={option.value} value={option.value}>
-							{option.label}
-						</option>
-					))}
-				</InnerSelect>
-				<SelectBox htmlFor={id} onClick={() => toggleVisibility()}>
-					{value ? (
-						<SelectedValue>
-							{options.filter(option => option.value === value).map(option => option.label)[0]}
-						</SelectedValue>
-					) : (
-						<Placeholder>{placeholder}</Placeholder>
-					)}
-				</SelectBox>
-				<Dropdown isVisible={isVisible}>
-					{options.map(option => (
-						<Option
-							key={option.value}
-							active={option.value === value}
-							onClick={clickOption(option.value)}
-							data-test-id={option.value}
-						>
-							{option.label}
-						</Option>
-					))}
-				</Dropdown>
-			</Wrapper>
-		</ClickAwayListener>
-	);
-};
-
-export default withId("selector")(Selector);

package/src/components/Selector.test.js

@@ -1,157 +0,0 @@
-import React from "react";
-import sinon from "sinon";
-import { Ignore } from "unexpected-reaction";
-import Selector, { InnerSelect, Wrapper, SelectBox, SelectedValue, Dropdown, Option, Placeholder } from "./Selector";
-
-describe("Selector", () => {
-	let updater;
-	beforeEach(() => {
-		updater = sinon.spy().named("updater");
-	});
-
-	it("renders a wrapped, hidden select element, and visual cover elements", () =>
-		expect(
-			<Selector
-				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="3"
-			/>,
-			"when mounted",
-			"to satisfy",
-			<Wrapper>
-				<InnerSelect id="test" value="3" onChange={() => {}}>
-					<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 3</SelectedValue>
-				</SelectBox>
-				<Dropdown>
-					<Option key="1">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("renders a wrapped, hidden select element, and visual cover elements", () =>
-		expect(
-			<Selector
-				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=""
-				required
-			/>,
-			"when mounted",
-			"to satisfy",
-			<Wrapper>
-				<InnerSelect id="test" required onChange={() => {}}>
-					<option></option>
-					<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">
-					<Placeholder />
-				</SelectBox>
-				<Dropdown>
-					<Option key="1">Opt 1</Option>
-					<Option key="2">Opt 2</Option>
-					<Option key="3">Opt 3</Option>
-					<Option key="4">Opt 4</Option>
-				</Dropdown>
-			</Wrapper>,
-		));
-
-	it("renders a placeholder if no value set", () =>
-		expect(
-			<Selector
-				id="test"
-				placeholder="This space for rent"
-				update={updater}
-				options={[
-					{ value: "1", label: "Opt 1" },
-					{ value: "2", label: "Opt 2" },
-					{ value: "3", label: "Opt 3" },
-					{ value: "4", label: "Opt 4" },
-				]}
-			/>,
-			"when mounted",
-			"to satisfy",
-			<Wrapper>
-				<Ignore />
-				<SelectBox htmlFor="test">
-					<Placeholder>This space for rent</Placeholder>
-				</SelectBox>
-				<Ignore />
-			</Wrapper>,
-		));
-
-	it("can update value when inner selector changes", () =>
-		expect(
-			<Selector
-				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"
-			/>,
-			"when mounted",
-			"with event",
-			{ type: "change", target: "select", value: "2" },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: ["2"] }])));
-
-	it("can update value when clicking a visual option", () =>
-		expect(
-			<Selector
-				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"
-			/>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: '[data-test-id="1"]' },
-		).then(() => expect(updater, "to have calls satisfying", [{ args: ["1"] }])));
-});

package/src/components/Switch.js

@@ -1,112 +0,0 @@
-import React from "react";
-import styled, { css } from "styled-components";
-import Text from "./Text";
-import { getThemeProp, ifFlag } from "../utils";
-import withId from "../hocs/withId";
-
-const switchSpeed = 200;
-const FilteredLabel = ({ onColor, offColor, onCaption, offCaption, ...props }) => <label {...props} />;
-
-export const Wrapper = styled(FilteredLabel)`
-	display: inline-block;
-	position: relative;
-	height: 1.2em;
-	width: 5em;
-	border-radius: 0.6em;
-	display: flex;
-	cursor: pointer;
-	${ifFlag(
-		"value",
-		css`
-			color: #ffffff;
-			background-color: ${ifFlag(
-				"onColor",
-				props => props.onColor,
-				getThemeProp(["colors", "application", "base"], "#ff0000"),
-			)};
-		`,
-		css`
-			color: ${getThemeProp(["colors", "text"], "#333333")};
-			background-color: ${ifFlag(
-				"offColor",
-				props => props.offColor,
-				getThemeProp(["colors", "borderLight"], "#cccccc"),
-			)};
-		`,
-	)};
-	transition: background-color ${switchSpeed}ms ease-in, color ${switchSpeed}ms ease-in;
-
-	&::after {
-		content: "";
-		position: absolute;
-		top: 2px;
-		height: calc(1.2em - 4px);
-		left: calc(50% - (0.5 * (1.2em - 4px)));
-		width: calc(1.2em - 4px);
-		background-color: #ffffff;
-		border-radius: 50%;
-		transition: transform ${switchSpeed}ms ease-in;
-
-		${ifFlag(
-			"value",
-			css`
-				transform: translateX(-1.9em);
-			`,
-			css`
-				transform: translateX(1.9em);
-			`,
-		)};
-	}
-
-	&:focus-within,
-	&:hover {
-		box-shadow: 0 0 4px #4fa1f0;
-	}
-`;
-
-export const Caption = styled.span`
-	position: absolute;
-	left: 1.4em;
-	right: 1.4em;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	text-align: center;
-	font-size: 0.8em;
-	${ifFlag(
-		"value",
-		css`
-			opacity: 1;
-			transition: opacity ${0.7 * switchSpeed}ms ${0.3 * switchSpeed}ms ease-in;
-		`,
-		css`
-			opacity: 0;
-			transition: opacity ${0.7 * switchSpeed}ms ease-in;
-		`,
-	)};
-`;
-
-export const ContainedCheckbox = styled.input.attrs(() => ({
-	type: "checkbox",
-}))`
-	position: absolute;
-	opacity: 0;
-`;
-
-export const Switch = ({ value, onCaption, offCaption, onColor, offColor, id, ...checkboxProps }) => (
-	<Wrapper htmlFor={id} value={value} onColor={onColor} offColor={offColor}>
-		<ContainedCheckbox id={id} {...checkboxProps} checked={value} />
-		{onCaption ? (
-			<Caption value={value}>
-				<Text message={onCaption} />
-			</Caption>
-		) : null}
-		{offCaption ? (
-			<Caption value={!value}>
-				<Text message={offCaption} />
-			</Caption>
-		) : null}
-	</Wrapper>
-);
-
-export default withId("switch")(Switch);