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

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

@@ -1,93 +0,0 @@
-import React, { useMemo } from "react";
-import { useSelector } from "react-redux";
-import styled from "styled-components";
-import { getThemeProp, unwrapImmutable } from "../../../utils";
-import Icon from "../../Icon";
-import Text from "../../Text";
-import { orderedCultureList } from "../../../selectors/locale";
-import useToggle from "../../../hooks/useToggle";
-import { FormInput } from "./Text";
-import { ButtonWrapper } from "./FieldButtons";
-
-export const LanguageLabel = styled.label`
-	flex: 0 0 auto;
-	min-width: 55px;
-	border-right: 1px solid ${getThemeProp(["colors", "borderLight"], "#cccccc")};
-	padding: 5px 10px;
-	background-color: #eaeaea;
-	margin-right: 0;
-`;
-
-export const TranslationField = ({ lang, message = "", onChange, required, ...props }) => (
-	<ButtonWrapper invalid={required && !message}>
-		<LanguageLabel>{lang}</LanguageLabel>
-		<FormInput value={message} onChange={onChange} {...props} />
-	</ButtonWrapper>
-);
-TranslationField.displayName = "TranslationField";
-
-export const TranslationWrapper = styled.div`
-	display: flex;
-	flex-direction: column;
-
-	& > * {
-		margin-top: 10px;
-	}
-	& > :first-child {
-		margin-top: 0;
-	}
-`;
-
-export const ShowButton = styled.div.attrs(() => ({
-	role: "button",
-}))`
-	align-self: flex-end;
-	cursor: pointer;
-`;
-
-export const ShowButtonChevron = styled(Icon).attrs(props => ({
-	id: getThemeProp(["icons", "indicators", "down"], "chevron-down")(props),
-}))`
-	font-size: 10px;
-	margin-right: 5px;
-	color: ${getThemeProp(["colors", "application", "base"], "#000")};
-`;
-
-export const TranslationInput = ({ update, value = {}, initShowAll, required, moreLabel = "[more]", ...props }) => {
-	const cultures = unwrapImmutable(useSelector(orderedCultureList));
-	const handlers = useMemo(
-		() =>
-			cultures.reduce((handlers, lang) => {
-				handlers[lang] = event => {
-					update({ ...value, [lang]: event.target.value });
-				};
-				return handlers;
-			}, {}),
-		[update, cultures, value],
-	);
-	const [showAll, toggle] = useToggle(initShowAll);
-	return (
-		<TranslationWrapper>
-			{cultures.map((lang, index) =>
-				!index || showAll ? (
-					<TranslationField
-						key={lang}
-						lang={lang}
-						message={value[lang]}
-						onChange={handlers[lang]}
-						required={required}
-						{...props}
-					/>
-				) : null,
-			)}
-			{!showAll && cultures.length > 1 ? (
-				<ShowButton onClick={toggle}>
-					<ShowButtonChevron />
-					<Text message={moreLabel} />
-				</ShowButton>
-			) : null}
-		</TranslationWrapper>
-	);
-};
-
-export default TranslationInput;

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

@@ -1,204 +0,0 @@
-import React from "react";
-import Immutable from "immutable";
-import { Provider } from "react-redux";
-import { IntlProvider } from "react-intl";
-import { MemoryRouter } from "react-router-dom";
-import { Ignore } from "unexpected-reaction";
-import sinon from "sinon";
-import { spyOnConsole, getStyledClassSelector } from "../../../utils/testUtils";
-import { ButtonWrapper } from "./FieldButtons";
-import { FormInput } from "./Text";
-import TranslationInput, {
-	TranslationWrapper,
-	TranslationField,
-	ShowButton,
-	ShowButtonChevron,
-	LanguageLabel,
-} from "./Translation";
-
-describe("TranslationInput", () => {
-	let state, store, update, handlers;
-	beforeEach(() => {
-		state = Immutable.fromJS({
-			locale: {
-				cultures: {
-					"en-US": {},
-					"en-CA": {},
-					"fr-CA": {},
-				},
-				defaultCulture: "en-CA",
-			},
-		});
-		store = {
-			subscribe: () => {},
-			dispatch: () => {},
-			getState: () => state,
-		};
-		update = sinon.spy().named("update");
-		handlers = { "en-US": () => {}, "en-CA": () => {}, "fr-CA": () => {} };
-	});
-
-	it("renders a field for the default culture, and a button to show others", () =>
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<IntlProvider locale="en">
-						<TranslationInput name="test" value={{}} moreLabel="Show more things" />
-					</IntlProvider>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			<TranslationWrapper>
-				<IntlProvider locale="en">
-					<TranslationField lang="en-CA" onChange={() => {}} />
-				</IntlProvider>
-				<ShowButton onClick={expect.it("to be a function")}>
-					<ShowButtonChevron />
-					Show more things
-				</ShowButton>
-			</TranslationWrapper>,
-		));
-
-	it("renders fields for all languages when button is clicked", () =>
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<IntlProvider locale="en">
-						<TranslationInput name="test" value={{ "fr-CA": "Des mots" }} handlers={handlers} />
-					</IntlProvider>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "click", target: getStyledClassSelector(ShowButton) },
-			"to satisfy",
-			<TranslationWrapper>
-				<IntlProvider locale="en">
-					<TranslationField lang="en-CA" onChange={() => {}} />
-				</IntlProvider>
-				<IntlProvider locale="en">
-					<TranslationField lang="en-US" onChange={() => {}} />
-				</IntlProvider>
-				<IntlProvider locale="en">
-					<TranslationField lang="fr-CA" message="Des mots" onChange={() => {}} />
-				</IntlProvider>
-			</TranslationWrapper>,
-		));
-
-	it("lets you update a single language", () =>
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<IntlProvider locale="en-CA">
-						<TranslationInput
-							name="test"
-							value={{ "fr-CA": "Des mots" }}
-							update={update}
-							moreLabel="Show more things"
-						/>
-					</IntlProvider>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"with event",
-			{ type: "change", value: "New", target: "input" },
-		).then(() =>
-			expect(update, "to have calls satisfying", [
-				{
-					args: [
-						{
-							"en-CA": "New",
-							"fr-CA": "Des mots",
-						},
-					],
-				},
-			]),
-		));
-
-	it("handles no cultures being loaded gracefully", () => {
-		state = state.setIn(["locale", "cultures"], Immutable.Map());
-		return expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<TranslationInput name="test" value={{ "fr-CA": "Des mots" }} update={update} moreLabel="Show more things" />
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to be a",
-			"DOMElement",
-		);
-	});
-
-	it("handles being required but missing", () =>
-		expect(
-			<Provider store={store}>
-				<MemoryRouter>
-					<IntlProvider locale="en">
-						<TranslationInput name="test" value={{}} required moreLabel="Show more things" />
-					</IntlProvider>
-				</MemoryRouter>
-			</Provider>,
-			"when mounted",
-			"to satisfy",
-			expect
-				.it(
-					"to satisfy",
-					<TranslationWrapper>
-						<IntlProvider locale="en">
-							<TranslationField lang="en-CA" required onChange={() => {}} />
-						</IntlProvider>
-						<ShowButton onClick={expect.it("to be a function")}>
-							<ShowButtonChevron />
-							Show more things
-						</ShowButton>
-					</TranslationWrapper>,
-				)
-				.and(
-					"to contain",
-					<ButtonWrapper invalid={true}>
-						<Ignore />
-						<Ignore />
-					</ButtonWrapper>,
-				),
-		));
-});
-
-describe("TranslationField", () => {
-	spyOnConsole();
-
-	let onChange;
-	beforeEach(() => {
-		onChange = () => {};
-	});
-
-	it("shows a single language label and a text field", () =>
-		expect(
-			<IntlProvider locale="en">
-				<TranslationField lang="en-US" message="A hat, pardner" onChange={onChange} otherProp />
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<ButtonWrapper>
-				<LanguageLabel>en-US</LanguageLabel>
-				<IntlProvider locale="en">
-					<FormInput value="A hat, pardner" onChange={onChange} otherProp />
-				</IntlProvider>
-			</ButtonWrapper>,
-		).then(() => expect([console.log, console.warn, console.error], "to have calls satisfying", [])));
-
-	it("handles missing message", () =>
-		expect(
-			<IntlProvider locale="en">
-				<TranslationField lang="en-US" onChange={onChange} otherProp />
-			</IntlProvider>,
-			"when mounted",
-			"to satisfy",
-			<ButtonWrapper>
-				<LanguageLabel>en-US</LanguageLabel>
-				<IntlProvider locale="en">
-					<FormInput value="" onChange={onChange} otherProp />
-				</IntlProvider>
-			</ButtonWrapper>,
-		).then(() => expect([console.log, console.warn, console.error], "to have calls satisfying", [])));
-});