Skip to content

Commit

Permalink
fix: BL-13987 subdialogs
Browse files Browse the repository at this point in the history 
Just adding "fix:" to the commit message to trigger the build.
  • Loading branch information
@nabalone
nabalone committed Oct 18, 2024
1 parent feabefe commit 4f475dd
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 116 deletions.
4 changes: 4 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@

.DS_Store

# Not sure why these are showing up, looks like a fix is coming: https://github.com/vitejs/vite/issues/13267
**/vite.config.{js,ts,mjs,mts,cjs,cts}.timestamp*
**/vitest.config.{js,ts,mjs,mts,cjs,cts}.timestamp*


# Logs
logs
Expand Down
6 changes: 5 additions & 1 deletion components/language-chooser/react/common/language-chooser-react-hook/useLanguageChooser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,11 @@ export const useLanguageChooser = (
const isReadyToSubmit =
!!selectedLanguage &&
// either a script is selected or there are no scripts for the selected language
(!!selectedScript || selectedLanguage.scripts?.length === 0);
(!!selectedScript || selectedLanguage.scripts?.length === 0) &&
// if unlisted language, name and country are required
(!isUnlistedLanguage ||
(customizableLanguageDetails.dialect !== "" &&
customizableLanguageDetails.region?.name !== ""));

const languageData = useMemo(() => {
if (!searchString || searchString.length < 2) {
Expand Down
208 changes: 130 additions & 78 deletions components/language-chooser/react/language-chooser-react-mui/src/CustomizeLanguageDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from "react";
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import * as React from "react";
import {
ICustomizableLanguageDetails,
isUnlistedLanguage,
Expand All @@ -13,7 +14,9 @@ import {
Dialog,
DialogTitle,
Typography,
Card,
} from "@mui/material";
import InfoIcon from "@mui/icons-material/Info";
import { TextInput } from "./TextInput";
import { COLORS } from "./colors";
import {
Expand All @@ -25,6 +28,7 @@ import {
stripDemarcation,
createTag,
} from "@ethnolib/find-language";
import { FormFieldLabel } from "./FormFieldLabel";

// ISO-3166-1 is a region code to region name lookup
function getAllRegionOptions() {
Expand Down Expand Up @@ -76,6 +80,11 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
const [dialogSelectedDialect, setDialogSelectedDialect] =
React.useState<string>("");

// name (dialect) and country (region) are required for unlisted language
const isReadyToSubmit =
!isUnlistedLanguageDialog ||
(dialogSelectedDialect !== "" && dialogSelectedRegion.label !== "");

// To reset the dialog if the user closes and reopens it, since they may have changed the language
//or script selection in between
React.useEffect(() => {
Expand Down Expand Up @@ -110,42 +119,76 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
onClose={props.onClose}
open={props.open}
css={css`
padding: 25px;
.MuiDialog-paper {
padding: 20px 25px 25px 25px;
display: flex;
gap: 15px;
}
`}
maxWidth={"sm"}
fullWidth={true}
>
<DialogTitle>
<DialogTitle
css={css`
font-weight: bold;
padding: 0; //using padding on the entire dialog instead, plus gap between sections
`}
>
{isUnlistedLanguageDialog
? "Unlisted Language Tag"
: "Custom Language Tag"}
</DialogTitle>
<DialogContent>
<DialogContent
css={css`
display: flex;
flex-direction: column;
gap: 15px;
padding: 0; //using padding on the entire dialog instead, plus gap between sections
`}
>
<Card
variant="outlined"
css={css`
border: 1px solid ${COLORS.blues[2]};
padding: 7px;
flex-shrink: 0;
`}
>
<Typography
css={css`
color: ${COLORS.blues[2]};
font-size: 0.875rem;
display: flex;
align-items: start;
gap: 7px;
`}
>
<InfoIcon />
{isUnlistedLanguageDialog
? "If you cannot find a language and it does not appear in ethnologue.com, you can instead define the language here."
: "If you found the main language but need to change some of the specifics like Script or Dialect, you can do that here."}
</Typography>
</Card>
{isUnlistedLanguageDialog && (
<div id="unlisted-language-dialog-content">
<TextInput
id="unlisted-lang-name-field"
label="Name"
value={dialogSelectedDialect}
onChange={(event) => {
setDialogSelectedDialect(event.target.value);
}}
/>
</div>
<TextInput
id="unlisted-lang-name-field"
label="Name"
value={dialogSelectedDialect}
onChange={(event) => {
setDialogSelectedDialect(event.target.value);
}}
size={"small"}
css={css`
width: 100%;
`}
required={true}
/>
)}

{!isUnlistedLanguageDialog && (
<div id="customize-language-dialog-content">
<div id="customize-script">
{/* TODO future work: make these fuzzy search */}
<label htmlFor="customize-script-field">
<Typography
css={css`
color: ${COLORS.greys[3]};
font-weight: bold;
margin-bottom: 5px;
`}
>
Script
</Typography>
</label>

<FormFieldLabel htmlFor="customize-script-field" label="Script" />
<Autocomplete
value={dialogSelectedScript}
onChange={(
Expand All @@ -160,59 +203,64 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
renderInput={(params) => (
<TextField {...params} id="customize-script-field" />
)}
/>
<label htmlFor="customize-region-field">
<Typography
css={css`
color: ${COLORS.greys[3]};
font-weight: bold;
margin-bottom: 5px;
`}
>
Region
</Typography>
</label>
<Autocomplete
value={dialogSelectedRegion}
onChange={(
_event,
newValue: { label: string; id: string } | null
) => {
setDialogSelectedRegion(newValue || EMPTY_COMBOBOX_VALUE);
}}
disablePortal
id="combo-box-language-chooser-react-mui"
options={getAllRegionOptions()}
renderInput={(params) => (
<TextField {...params} id="customize-region-field" />
)}
/>
{/* TODO future work: make this also a autocomplete with registered variants */}
{/* use ROLV from langtags repo? */}
{/* // from BCP-47 https://www.rfc-editor.org/bcp/bcp47.txt:
// 4. Variant subtags MUST be registered with IANA according to the
// rules in Section 3.5 of this document before being used to form
// language tags. In order to distinguish variants from other types
// of subtags, registrations MUST meet the following length and
// content restrictions:
// 1. Variant subtags that begin with a letter (a-z, A-Z) MUST be
// at least five characters long. */}
<TextInput
id="customize-variant-field"
label="Variant (dialect)"
value={dialogSelectedDialect}
onChange={(event) => {
setDialogSelectedDialect(event.target.value);
}}
inputProps={{
spellCheck: false,
}}
size={"small"}
/>
</div>
)}

<div id="customize-region">
<FormFieldLabel
htmlFor="customize-region-field"
label="Country"
required={isUnlistedLanguageDialog}
/>
<Autocomplete
value={dialogSelectedRegion}
onChange={(
_event,
newValue: { label: string; id: string } | null
) => {
setDialogSelectedRegion(newValue || EMPTY_COMBOBOX_VALUE);
}}
disablePortal
id="combo-box-language-chooser-react-mui"
options={getAllRegionOptions()}
renderInput={(params) => (
<TextField {...params} id="customize-region-field" />
)}
size={"small"}
/>
</div>
{!isUnlistedLanguageDialog && (
<TextInput
// {/* TODO future work: make this also a autocomplete with registered variants */}
// {/* use ROLV from langtags repo? */}
// {/* // from BCP-47 https://www.rfc-editor.org/bcp/bcp47.txt:
// // 4. Variant subtags MUST be registered with IANA according to the
// // rules in Section 3.5 of this document before being used to form
// // language tags. In order to distinguish variants from other types
// // of subtags, registrations MUST meet the following length and
// // content restrictions:

// // 1. Variant subtags that begin with a letter (a-z, A-Z) MUST be
// // at least five characters long. */}
id="customize-variant-field"
label="Variant (dialect)"
value={dialogSelectedDialect}
onChange={(event) => {
setDialogSelectedDialect(event.target.value);
}}
size={"small"}
css={css`
width: 100%;
`}
inputProps={{
spellCheck: false,
}}
/>
)}
<Typography>
Tag:
BCP 47 Tag:{" "}
<span
css={css`
font-weight: bold;
Expand All @@ -230,15 +278,18 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
</Typography>
</DialogContent>
{/* // TODO abstract out these buttons which are copied from app.tsx */}
<DialogActions>
<DialogActions
css={css`
padding: 0; //using padding on the entire dialog instead, plus gap between sections
`}
>
<div
id="buttons-container"
css={css`
// position: absolute;
width: 100%;
display: flex;
justify-content: flex-end;
padding-top: 15px;
`}
>
<Button
Expand All @@ -249,6 +300,7 @@ export const CustomizeLanguageDialog: React.FunctionComponent<{
`}
variant="contained"
color="primary"
disabled={!isReadyToSubmit}
onClick={() => {
if (isUnlistedLanguageDialog) {
props.selectUnlistedLanguage();
Expand Down
35 changes: 35 additions & 0 deletions components/language-chooser/react/language-chooser-react-mui/src/FormFieldLabel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { InputLabel, InputLabelProps, Typography } from "@mui/material";
import { COLORS } from "./colors";

export const FormFieldLabel: React.FunctionComponent<
{
label: string;
required?: boolean;
} & InputLabelProps
> = ({ label, required, ...inputLabelProps }) => {
return (
<InputLabel {...inputLabelProps}>
<Typography
css={css`
color: ${COLORS.greys[3]};
font-weight: bold;
margin-bottom: 3px;
`}
>
{label}
{required && (
<sup
css={css`
font-weight: normal;
color: ${COLORS.error};
`}
>
(required)
</sup>
)}
</Typography>
</InputLabel>
);
};
32 changes: 9 additions & 23 deletions components/language-chooser/react/language-chooser-react-mui/src/LanguageChooser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import { useEffect, useState } from "react";
import { CustomizeLanguageDialog } from "./CustomizeLanguageDialog";
import LazyLoad from "react-lazyload";
import { FuseResult } from "fuse.js";
import { FormFieldLabel } from "./FormFieldLabel";

export const LanguageChooser: React.FunctionComponent<{
searchResultModifier: (
Expand Down Expand Up @@ -182,19 +183,10 @@ export const LanguageChooser: React.FunctionComponent<{
background-color: ${COLORS.greys[0]};
`}
>
<label htmlFor="search-bar">
<Typography
css={css`
color: ${COLORS.greys[3]};
font-weight: bold;
font-size: 0.875rem; // 14px
letter-spacing: normal;
margin-bottom: 5px;
`}
>
Search by name, code, or country
</Typography>
</label>
<FormFieldLabel
htmlFor="search-bar"
label="Search by name, code, or country"
/>
<OutlinedInput
type="text"
inputRef={(el) => (searchInputRef = el)}
Expand Down Expand Up @@ -344,16 +336,10 @@ export const LanguageChooser: React.FunctionComponent<{
>
{lp.selectedLanguage && (
<div id="right-pane-language-details=section">
<label htmlFor="language-name-bar">
<Typography
css={css`
font-weight: bold;
margin-bottom: 5px;
`}
>
Display this language this way
</Typography>
</label>
<FormFieldLabel
htmlFor="language-name-bar"
label="Display this language this way"
/>
<OutlinedInput
type="text"
inputProps={{
Expand Down
Loading

0 comments on commit 4f475dd

Please sign in to comment.