{"size": 2513, "ext": "js", "max_stars_repo_path": "src/components/Form/Inputs/Translation.js", "max_stars_repo_name": "joclefrancois/orc-shared", "max_stars_repo_stars_event_min_datetime": "2018-05-21T00:13:07.000Z", "max_stars_repo_stars_event_max_datetime": "2018-05-21T00:13:07.000Z", "max_issues_repo_path": "src/components/Form/Inputs/Translation.js", "max_issues_repo_name": "joclefrancois/orc-shared", "max_issues_repo_issues_event_min_datetime": "2019-02-21T15:01:19.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-23T18:18:16.000Z", "max_forks_repo_path": "src/components/Form/Inputs/Translation.js", "max_forks_repo_name": "joclefrancois/orc-shared", "max_forks_repo_forks_event_min_datetime": "2018-06-18T08:28:22.000Z", "max_forks_repo_forks_event_max_datetime": "2021-07-29T20:07:50.000Z"}
{"max_stars_count": 1, "max_issues_count": 423, "max_forks_count": 7, "avg_line_length": 26.7340425532, "max_line_length": 116, "alphanum_fraction": 0.6402705929}
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;
