From a06fa3450f8f663f37c5b243728b7a83d7c961d6 Mon Sep 17 00:00:00 2001 From: Siddarth Date: Tue, 10 Dec 2024 14:35:23 +0800 Subject: [PATCH] feat: add translations for others label --- frontend/src/components/Checkbox/Checkbox.tsx | 17 +++++++++++++++-- .../SingleSelect/SingleSelectProvider.tsx | 9 ++++----- frontend/src/components/Radio/Radio.tsx | 15 ++++++++++++++- .../fixedTranslations.ts} | 7 +++++++ .../templates/Field/Checkbox/CheckboxField.tsx | 1 + .../src/templates/Field/Radio/RadioField.tsx | 1 + 6 files changed, 42 insertions(+), 8 deletions(-) rename frontend/src/{components/Dropdown/SingleSelect/constants.ts => constants/fixedTranslations.ts} (76%) diff --git a/frontend/src/components/Checkbox/Checkbox.tsx b/frontend/src/components/Checkbox/Checkbox.tsx index c5c7cbabfe..376c5ed5fc 100644 --- a/frontend/src/components/Checkbox/Checkbox.tsx +++ b/frontend/src/components/Checkbox/Checkbox.tsx @@ -1,4 +1,4 @@ -import { ChangeEventHandler, ReactNode, useRef } from 'react' +import { ChangeEventHandler, ReactNode, useMemo, useRef } from 'react' import { Box, Checkbox as ChakraCheckbox, @@ -10,10 +10,14 @@ import { useMultiStyleConfig, } from '@chakra-ui/react' +import { Language } from '~shared/types' + import { BxCheckAnimated } from '~/assets/icons' import { CHECKBOX_THEME_KEY } from '~/theme/components/Checkbox' import { FieldColorScheme } from '~/theme/foundations/colours' +import { OTHERS_TRANSLATED_LABEL } from '~constants/fixedTranslations' + import Input, { InputProps } from '../Input' import { CheckboxOthersContext, useCheckboxOthers } from './useCheckboxOthers' @@ -23,6 +27,11 @@ export interface CheckboxProps extends ChakraCheckboxProps { * Background and shadow colors of checkbox. */ colorScheme?: FieldColorScheme + + /** + * Selected language to display label. + */ + selectedLanguage?: Language } type CheckboxWithOthers = ComponentWithAs<'input', CheckboxProps> & { @@ -103,6 +112,10 @@ const OthersCheckbox = forwardRef((props, ref) => { props.onChange?.(e) } + const othersLabel = useMemo(() => { + return OTHERS_TRANSLATED_LABEL[props.selectedLanguage ?? Language.ENGLISH] + }, [props.selectedLanguage]) + return ( ((props, ref) => { {...props} onChange={handleCheckboxChange} > - Others + {othersLabel} ) }) diff --git a/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx b/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx index 3e08ffb931..0cc2dc2c18 100644 --- a/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx +++ b/frontend/src/components/Dropdown/SingleSelect/SingleSelectProvider.tsx @@ -10,6 +10,10 @@ import { useCombobox, UseComboboxProps } from 'downshift' import { Language } from '~shared/types' import { ThemeColorScheme } from '~theme/foundations/colours' +import { + DEFAULT_PLACEHOLDER_TRANSLATIONS, + NOTHING_FOUND_LABEL_TRANSLATIONS, +} from '~constants/fixedTranslations' import { VIRTUAL_LIST_MAX_HEIGHT } from '../constants' import { useItems } from '../hooks/useItems' @@ -18,11 +22,6 @@ import { ComboboxItem } from '../types' import { defaultFilter } from '../utils/defaultFilter' import { isItemDisabled, itemToValue } from '../utils/itemUtils' -import { - DEFAULT_PLACEHOLDER_TRANSLATIONS, - NOTHING_FOUND_LABEL_TRANSLATIONS, -} from './constants' - export interface SingleSelectProviderProps< Item extends ComboboxItem = ComboboxItem, > extends SharedSelectContextReturnProps, diff --git a/frontend/src/components/Radio/Radio.tsx b/frontend/src/components/Radio/Radio.tsx index 72faa9835d..fae55d0179 100644 --- a/frontend/src/components/Radio/Radio.tsx +++ b/frontend/src/components/Radio/Radio.tsx @@ -45,9 +45,13 @@ import { } from '@chakra-ui/react' import { callAll, split } from '@chakra-ui/utils' +import { Language } from '~shared/types' + import { RADIO_THEME_KEY } from '~/theme/components/Radio' import { FieldColorScheme } from '~/theme/foundations/colours' +import { OTHERS_TRANSLATED_LABEL } from '~constants/fixedTranslations' + import Input, { InputProps } from '../Input' import { RadioGroup } from './RadioGroup' @@ -100,6 +104,11 @@ export interface RadioProps * @default true */ allowDeselect?: boolean + + /** + * Selected language to get translated label. + */ + selectedLanguage?: Language } type RadioWithSubcomponentProps = ComponentWithAs<'input', RadioProps> & { @@ -267,6 +276,10 @@ const OthersRadio = forwardRef((props, ref) => { isChecked = group.value === valueProp } + const othersLabel = useMemo(() => { + return OTHERS_TRANSLATED_LABEL[props?.selectedLanguage ?? Language.ENGLISH] + }, [props?.selectedLanguage]) + useEffect(() => { if (isChecked) { othersInputRef.current?.focus() @@ -281,7 +294,7 @@ const OthersRadio = forwardRef((props, ref) => { // Required should apply to radio group rather than individual radio. isRequired={false} > - Others + {othersLabel} ) }) diff --git a/frontend/src/components/Dropdown/SingleSelect/constants.ts b/frontend/src/constants/fixedTranslations.ts similarity index 76% rename from frontend/src/components/Dropdown/SingleSelect/constants.ts rename to frontend/src/constants/fixedTranslations.ts index 6c75bf73ef..a99da12823 100644 --- a/frontend/src/components/Dropdown/SingleSelect/constants.ts +++ b/frontend/src/constants/fixedTranslations.ts @@ -1,5 +1,12 @@ import { Language } from '~shared/types' +export const OTHERS_TRANSLATED_LABEL: Record = { + [Language.ENGLISH]: 'Others', + [Language.CHINESE]: '其他', + [Language.MALAY]: 'Lain-lain', + [Language.TAMIL]: 'மற்றவை', +} + export const DEFAULT_PLACEHOLDER_TRANSLATIONS: Record = { [Language.ENGLISH]: 'Select an option', [Language.CHINESE]: '请选择一个选项', diff --git a/frontend/src/templates/Field/Checkbox/CheckboxField.tsx b/frontend/src/templates/Field/Checkbox/CheckboxField.tsx index 5c924408c3..36382fb0fe 100644 --- a/frontend/src/templates/Field/Checkbox/CheckboxField.tsx +++ b/frontend/src/templates/Field/Checkbox/CheckboxField.tsx @@ -138,6 +138,7 @@ export const CheckboxField = ({ colorScheme={fieldColorScheme} value={CHECKBOX_OTHERS_INPUT_VALUE} isInvalid={!!get(errors, checkboxInputName)} + selectedLanguage={selectedLanguage} />