-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Refactor MoreModal to Dialog component with Event trigger (#4467)
* Add unique constraint on invitations to ensure no duplicate invitations get created * Just starting * Get new dialog basically wired up and rendering content * Update custom event details type * Update most onChange handlers to update the item * Unused import and console statement * extract FormattedDateOptions * Update remaining onChange handlers * Extract TextInputOptions * Extract remaining sections, eliminate ModalForm * Cleanup * More cleanup * Replace Modal with Button and Event based trigger * reorder some styles * Fix test * Add component test * Add component test * Add testid * Add some component test stubs * Use esc to close * Restore Dialog title * Use testid * missed one * force refresh * Use testid * Fix dropdown styling * Retrieve item from templateStore when MoreDialog opens so it's always fresh * Return item with index * Rename function for clarity * Use type without index * Fix all required label / disable button * Fix getFormElementById to search/find subItems * Fire handle close when exiting by Esc * Cleanup * Remove old code * Cleanup old MoreModal * cleanup * remove todo * cleanup * cleanup * cleanup * Fix up PanelActions spacing on subElements * Bit of renaming * Switched indexes to ids * rename didn't propagate to test * Remove old AddressCompleteOptions * Update label for dynamicRow label/question --------- Co-authored-by: Tim Arney <[email protected]>
- Loading branch information
1 parent
3485777
commit 1ad4ccb
Showing
43 changed files
with
1,147 additions
and
629 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
...m administration)/form-builder/[id]/components/dialogs/MoreDialog/AutocompleteOptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| "use client"; | ||
| import React, { ChangeEvent } from "react"; | ||
|
|
||
| import { useAutocompleteOptions } from "@lib/hooks/useAutocompleteOptions"; | ||
| import { useTranslation } from "react-i18next"; | ||
|
|
||
| interface DropdownOptionProps { | ||
| label: string; | ||
| value: string; | ||
| selected?: boolean; | ||
| } | ||
|
|
||
| const DropdownOption = (props: DropdownOptionProps): React.ReactElement => { | ||
| return <option value={props.value}>{props.label}</option>; | ||
| }; | ||
|
|
||
| export const AutocompleteOptions = ({ | ||
| handleChange, | ||
| selectedValue, | ||
| }: { | ||
| handleChange: (evt: ChangeEvent<HTMLSelectElement>) => void; | ||
| selectedValue: string; | ||
| }) => { | ||
| const autocompleteOptions = useAutocompleteOptions(); | ||
| const { t } = useTranslation("form-builder"); | ||
|
|
||
| const options = autocompleteOptions.map((option, i) => { | ||
| return ( | ||
| <DropdownOption | ||
| key={i} | ||
| value={option.value} | ||
| label={option.label} | ||
| selected={option.value === selectedValue} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| return ( | ||
| <div className="gcds-select-wrapper"> | ||
| <select | ||
| data-testid="autocomplete" | ||
| className="gc-dropdown mb-4 inline-block" | ||
| onChange={handleChange} | ||
| value={selectedValue} | ||
| > | ||
| <option value="">{t("selectAutocomplete")}</option> | ||
| {options} | ||
| </select> | ||
| </div> | ||
| ); | ||
| }; |
83 changes: 83 additions & 0 deletions
83
...administration)/form-builder/[id]/components/dialogs/MoreDialog/CharacterLimitOptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { useTranslation } from "@i18n/client"; | ||
| import { InfoDetails, Input } from "@formBuilder/components/shared"; | ||
| import { FormElement, FormElementTypes } from "@lib/types"; | ||
| import { Label } from "./Label"; | ||
| import { Hint } from "./Hint"; | ||
|
|
||
| export const CharacterLimitOptions = ({ | ||
| item, | ||
| setItem, | ||
| }: { | ||
| item: FormElement; | ||
| setItem: (item: FormElement) => void; | ||
| }) => { | ||
| const { t } = useTranslation("form-builder"); | ||
|
|
||
| if ( | ||
| ![FormElementTypes.textField, FormElementTypes.textArea].includes(item.type) || | ||
| (item.properties.validation?.type && item.properties.validation?.type !== "text") | ||
| ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <section className="mb-4"> | ||
| <div className="mb-2"> | ||
| <Label htmlFor={`characterLength--modal--${item.id}`}>{t("maximumCharacterLength")}</Label> | ||
| <Hint>{t("characterLimitDescription")}</Hint> | ||
| <Input | ||
| id={`characterLength--modal--${item.id}`} | ||
| type="number" | ||
| min="1" | ||
| className="w-1/4" | ||
| value={item.properties.validation?.maxLength || ""} | ||
| onKeyDown={(e) => { | ||
| if (["-", "+", ".", "e"].includes(e.key)) { | ||
| e.preventDefault(); | ||
| } | ||
| }} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => { | ||
| // if value is "", unset the field | ||
| if (e.target.value === "") { | ||
| setItem({ | ||
| ...item, | ||
| properties: { | ||
| ...item.properties, | ||
| ...{ | ||
| validation: { | ||
| ...(item.properties.validation ?? { required: false }), | ||
| maxLength: undefined, | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| const value = parseInt(e.target.value); | ||
| if (!isNaN(value) && value >= 1) { | ||
| // clone the existing properties so that we don't overwrite other keys in "validation" | ||
| const validation = Object.assign({}, item.properties.validation, { | ||
| maxLength: value, | ||
| }); | ||
| setItem({ | ||
| ...item, | ||
| properties: { | ||
| ...item.properties, | ||
| ...{ validation }, | ||
| }, | ||
| }); | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
| <InfoDetails summary={t("characterLimitWhenToUse.title")}> | ||
| <div className="mb-8 mt-4 border-l-3 border-gray-500 pl-8"> | ||
| <p className="mb-4 text-sm">{t("characterLimitWhenToUse.text1")}</p> | ||
| <p className="mb-4 text-sm">{t("characterLimitWhenToUse.text2")}</p> | ||
| <p className="text-sm">{t("characterLimitWhenToUse.text3")}</p> | ||
| </div> | ||
| </InfoDetails> | ||
| </section> | ||
| ); | ||
| }; |
55 changes: 55 additions & 0 deletions
55
...le]/(form administration)/form-builder/[id]/components/dialogs/MoreDialog/Description.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useTranslation } from "@i18n/client"; | ||
| import { LocalizedElementProperties } from "@lib/types/form-builder-types"; | ||
| import { Label } from "./Label"; | ||
| import { Hint } from "./Hint"; | ||
| import { TextArea } from "@formBuilder/components/shared"; | ||
| import { useTemplateStore } from "@lib/store/useTemplateStore"; | ||
| import { FormElement } from "@lib/types"; | ||
|
|
||
| export const Description = ({ | ||
| item, | ||
| setItem, | ||
| }: { | ||
| item: FormElement; | ||
| setItem: (item: FormElement) => void; | ||
| }) => { | ||
| const { t } = useTranslation("form-builder"); | ||
|
|
||
| const { localizeField, translationLanguagePriority } = useTemplateStore((s) => ({ | ||
| localizeField: s.localizeField, | ||
| translationLanguagePriority: s.translationLanguagePriority, | ||
| })); | ||
|
|
||
| return ( | ||
| <div className="mb-2"> | ||
| <Label>{t("inputDescription")}</Label> | ||
| <Hint>{t("descriptionDescription")}</Hint> | ||
| <TextArea | ||
| id={`description--modal--${item.id}`} | ||
| placeholder={t("inputDescription")} | ||
| testId="description-input" | ||
| className="w-11/12" | ||
| onChange={(e) => { | ||
| const description = e.target.value.replace(/[\r\n]/gm, ""); | ||
| setItem({ | ||
| ...item, | ||
| properties: { | ||
| ...item.properties, | ||
| ...{ | ||
| [localizeField( | ||
| LocalizedElementProperties.DESCRIPTION, | ||
| translationLanguagePriority | ||
| )]: description, | ||
| }, | ||
| }, | ||
| }); | ||
| }} | ||
| value={ | ||
| item.properties[ | ||
| localizeField(LocalizedElementProperties.DESCRIPTION, translationLanguagePriority) | ||
| ] | ||
| } | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
62 changes: 62 additions & 0 deletions
62
...orm administration)/form-builder/[id]/components/dialogs/MoreDialog/DynamicRowOptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { Input } from "@formBuilder/components/shared"; | ||
| import { useTranslation } from "@i18n/client"; | ||
| import { FormElement, FormElementTypes } from "@lib/types"; | ||
| import { Label } from "./Label"; | ||
| import { Hint } from "./Hint"; | ||
|
|
||
| export const DynamicRowOptions = ({ | ||
| item, | ||
| setItem, | ||
| }: { | ||
| item: FormElement; | ||
| setItem: (item: FormElement) => void; | ||
| }) => { | ||
| const { t } = useTranslation("form-builder"); | ||
|
|
||
| if (item.type !== FormElementTypes.dynamicRow) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <section className="mb-4"> | ||
| <Label htmlFor={`maxNumberOfRows--modal--${item.id}`}>{t("maxNumberOfRows.label")}</Label> | ||
| <Hint>{t("maxNumberOfRows.description")}</Hint> | ||
| <Input | ||
| id={`maxNumberOfRows--modal--${item.id}`} | ||
| type="number" | ||
| min="1" | ||
| className="w-1/4" | ||
| value={item.properties.maxNumberOfRows || ""} | ||
| onKeyDown={(e) => { | ||
| if (["-", "+", ".", "e"].includes(e.key)) { | ||
| e.preventDefault(); | ||
| } | ||
| }} | ||
| onChange={(e: React.ChangeEvent<HTMLInputElement>) => { | ||
| // if value is "", unset the field | ||
| if (e.target.value === "") { | ||
| setItem({ | ||
| ...item, | ||
| properties: { | ||
| ...item.properties, | ||
| ...{ maxNumberOfRows: undefined }, | ||
| }, | ||
| }); | ||
| return; | ||
| } | ||
|
|
||
| const value = parseInt(e.target.value); | ||
| if (!isNaN(value) && value >= 1) { | ||
| setItem({ | ||
| ...item, | ||
| properties: { | ||
| ...item.properties, | ||
| ...{ maxNumberOfRows: value }, | ||
| }, | ||
| }); | ||
| } | ||
| }} | ||
| /> | ||
| </section> | ||
| ); | ||
| }; |
Oops, something went wrong.