0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[cast] Use the placeholder as the placeholder, not as the label

Browse source
This commit is contained in:
Manav Rathi 2024-03-29 12:15:06 +05:30
parent a06a93e73d
commit 949780d1e8
No known key found for this signature in database
2 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx
View file

@ -225,7 +225,8 @@ export default function AlbumCastDialog(props: Props) {
<SingleInputForm
callback={onSubmit}
fieldType="text"
placeholder={"123456"}
realLabel={"Code"}
realPlaceholder={"123456"}
buttonText={t("PAIR_DEVICE_TO_TV")}
submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
/>

29
web/packages/shared/components/SingleInputForm.tsx
View file

@ -18,7 +18,27 @@ export interface SingleInputFormProps {
resetForm: (nextState?: Partial<FormikState<formValues>>) => void,
) => Promise<void>;
fieldType: "text" | "email" | "password";
placeholder: string;
/** deprecated: Use realPlaceholder */
placeholder?: string;
/**
* Placeholder
*
* The existing `placeholder` property uses the placeholder as a label (i.e.
* it doesn't appear as the placeholder within the text input area but
* rather as the label on top of it). This happens conditionally, so it is
* not a matter of simple rename.
*
* Gradually migrate the existing UI to use this property when we really
* want a placeholder, and then create a separate label property for places
* that actually want to set the label.
*/
realPlaceholder?: string;
/**
* Label to show on top of the text input area.
*
* Sibling of {@link realPlaceholder}.
*/
realLabel?: string;
buttonText: string;
submitButtonProps?: any;
initialValue?: string;
@ -102,7 +122,12 @@ export default function SingleInputForm(props: SingleInputFormProps) {
name={props.fieldType}
{...(props.hiddenLabel
? { placeholder: props.placeholder }
: { label: props.placeholder })}
: props.realPlaceholder
? {
placeholder: props.realPlaceholder,
label: props.realLabel,
}
: { label: props.placeholder })}
value={values.inputValue}
onChange={handleChange("inputValue")}
error={Boolean(errors.inputValue)}