Skip to content

Commit

Permalink
web: flag explanation: make more readable (#1097)
Browse files Browse the repository at this point in the history 
* add spacing between separate flag explanations
* make flag name bold
* make explanation property array of Text-s so that flag name and
explanation may be styled differently

I'm little new to JSX so I got multiple type errors that I don't know
how to resolve, but everything works just fine.

<img width="1105" alt="CleanShot 2023-02-04 at 20 53 29@2x"
src="https://user-images.githubusercontent.com/24773652/216779641-b936f392-82ac-4a1e-912e-38deea77fa69.png">

I want in ExplainProps receive not a `string` array, but array of
`Text`s that are styled differently.

---------

Co-authored-by: notmd <tinhmeo10@gmail.com>
  • Loading branch information
@lainisourgod @notmd
lainisourgod and notmd committed Feb 23, 2023
1 parent 6c935df commit 3228f6c
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 17 deletions.
7 changes: 5 additions & 2 deletions website/src/components/Explain.tsx
View file
Expand Up @@ -9,9 +9,10 @@ import {
Text,
} from "@chakra-ui/react";
import { Info } from "lucide-react";
import { ReactElement } from "react";

interface ExplainProps {
explanation: string[];
explanation: ReactElement[] | string[];
}

export const Explain = ({ explanation }: ExplainProps) => {
Expand All @@ -25,7 +26,9 @@ export const Explain = ({ explanation }: ExplainProps) => {
<PopoverCloseButton />
<PopoverBody>
{explanation.map((paragraph, idx) => (
<Text key={idx}>{paragraph}</Text>
<Text key={idx} mt={idx === 0 ? 0 : 3}>
{paragraph}
</Text>
))}
</PopoverBody>
</PopoverContent>
Expand Down
46 changes: 31 additions & 15 deletions website/src/components/Messages/LabelInputGroup.tsx
View file
@@ -1,10 +1,14 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { Box, Text, VStack } from "@chakra-ui/react";
import { useTranslation } from "next-i18next";
import { Fragment } from "react";
import { Explain } from "src/components/Explain";
import { LabelFlagGroup } from "src/components/Messages/LabelFlagGroup";
import { LabelYesNoGroup } from "src/components/Messages/LabelYesNoGroup";
import { LabelLikertGroup } from "src/components/Survey/LabelLikertGroup";
import { useCurrentLocale } from "src/hooks/locale/useCurrentLocale";
import { getTypeSafei18nKey } from "src/lib/i18n";
import { getLocaleDisplayName } from "src/lib/languages";
import { Label } from "src/types/Tasks";

export interface LabelInputInstructions {
Expand Down Expand Up @@ -32,24 +36,26 @@ export const LabelInputGroup = ({
expectedLanguage,
onChange,
}: LabelInputGroupProps) => {
const { t } = useTranslation("labelling");
const { t } = useTranslation(["labelling"]);
const yesNoIndexes = labels.map((label, idx) => (label.widget === "yes_no" ? idx : null)).filter((v) => v !== null);
const flagIndexes = labels.map((label, idx) => (label.widget === "flag" ? idx : null)).filter((v) => v !== null);
const likertIndexes = labels.map((label, idx) => (label.widget === "likert" ? idx : null)).filter((v) => v !== null);

const langDisplayName = getLocaleDisplayName(useCurrentLocale());

return (
<VStack alignItems="stretch" spacing={6}>
{yesNoIndexes.length > 0 && (
<VStack alignItems="stretch" spacing={2}>
<Text>{instructions.yesNoInstruction}</Text>
<LabelYesNoGroup
values={yesNoIndexes.map((idx) => values[idx])}
labelNames={yesNoIndexes.map((idx) => labels[idx].name)}
values={yesNoIndexes.map((idx) => values[idx!])}
labelNames={yesNoIndexes.map((idx) => labels[idx!].name)}
isEditable={isEditable}
requiredLabels={requiredLabels}
onChange={(yesNoValues) => {
const newValues = values.slice();
yesNoIndexes.forEach((idx, yesNoIndex) => (newValues[idx] = yesNoValues[yesNoIndex]));
yesNoIndexes.forEach((idx, yesNoIndex) => (newValues[idx!] = yesNoValues[yesNoIndex]));
onChange(newValues);
}}
/>
Expand All @@ -62,22 +68,32 @@ export const LabelInputGroup = ({
{instructions.flagInstruction}
</Text>
<Explain
explanation={flagIndexes.map(
(idx) =>
`${t(getTypeSafei18nKey(labels[idx].name))}: ${t(
getTypeSafei18nKey(`${labels[idx].name}.explanation`)
)}`
)}
explanation={flagIndexes.map((idx) => (
<Fragment key={idx}>
<Text as="span" fontWeight="bold">
{/* @ts-expect-errors getTypeSafei18nKey doesn't work*/}
{t(getTypeSafei18nKey(labels[idx!].name), {
language: langDisplayName,
})}
</Text>
<Text as="span">
{/* @ts-expect-errors getTypeSafei18nKey doesn't work*/}
{`: ${t(getTypeSafei18nKey(`${labels[idx!].name}.explanation`), {
language: langDisplayName,
})}`}
</Text>
</Fragment>
))}
/>
</Box>
<LabelFlagGroup
values={flagIndexes.map((idx) => values[idx])}
labelNames={flagIndexes.map((idx) => labels[idx].name)}
values={flagIndexes.map((idx) => values[idx!])}
labelNames={flagIndexes.map((idx) => labels[idx!].name)}
expectedLanguage={expectedLanguage}
isEditable={isEditable}
onChange={(flagValues) => {
const newValues = values.slice();
flagIndexes.forEach((idx, flagIndex) => (newValues[idx] = flagValues[flagIndex]));
flagIndexes.forEach((idx, flagIndex) => (newValues[idx!] = flagValues[flagIndex]));
onChange(newValues);
}}
/>
Expand All @@ -87,11 +103,11 @@ export const LabelInputGroup = ({
<VStack alignItems="stretch" spacing={2}>
<Text>{instructions.likertInstruction}</Text>
<LabelLikertGroup
labelIDs={likertIndexes.map((idx) => labels[idx].name)}
labelIDs={likertIndexes.map((idx) => labels[idx!].name)}
isEditable={isEditable}
onChange={(likertValues) => {
const newValues = values.slice();
likertIndexes.forEach((idx, likertIndex) => (newValues[idx] = likertValues[likertIndex]));
likertIndexes.forEach((idx, likertIndex) => (newValues[idx!] = likertValues[likertIndex]));
onChange(newValues);
}}
/>
Expand Down

0 comments on commit 3228f6c

Please sign in to comment.