PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use Ref type to accept both types of ref

Browse source
This commit is contained in:
R Midhun Suresh 2024-11-13 20:39:17 +05:30
parent 84bd188dd7
commit b8e54750a0
No known key found for this signature in database
3 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/views/elements/Field.tsx
View file

@ -14,6 +14,7 @@ import React, {
ComponentProps, ComponentProps,
MutableRefObject, MutableRefObject,
RefCallback, RefCallback,
Ref,
} from "react"; } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { debounce } from "lodash"; import { debounce } from "lodash";
@ -77,7 +78,7 @@ interface IProps {
export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> { export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
// The ref pass through to the input // The ref pass through to the input
inputRef?: RefObject<HTMLInputElement> | RefCallback<HTMLInputElement>; inputRef?: Ref<HTMLInputElement>;
// The element to create. Defaults to "input". // The element to create. Defaults to "input".
element: "input"; element: "input";
// The input's value. This is a controlled component, so the value is required. // The input's value. This is a controlled component, so the value is required.
@ -86,7 +87,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> { interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
// The ref pass through to the select // The ref pass through to the select
inputRef?: RefObject<HTMLSelectElement> | RefCallback<HTMLSelectElement>; inputRef?: Ref<HTMLSelectElement>;
// To define options for a select, use <Field><option ... /></Field> // To define options for a select, use <Field><option ... /></Field>
element: "select"; element: "select";
// The select's value. This is a controlled component, so the value is required. // The select's value. This is a controlled component, so the value is required.
@ -95,7 +96,7 @@ interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> { interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
// The ref pass through to the textarea // The ref pass through to the textarea
inputRef?: RefObject<HTMLTextAreaElement> | RefCallback<HTMLTextAreaElement>; inputRef?: Ref<HTMLTextAreaElement>;
element: "textarea"; element: "textarea";
// The textarea's value. This is a controlled component, so the value is required. // The textarea's value. This is a controlled component, so the value is required.
value: string; value: string;
@ -103,7 +104,7 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> { export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
// The ref pass through to the input // The ref pass through to the input
inputRef?: RefObject<HTMLInputElement> | RefCallback<HTMLInputElement>; inputRef?: Ref<HTMLInputElement>;
element: "input"; element: "input";
// The input's value. This is a controlled component, so the value is required. // The input's value. This is a controlled component, so the value is required.
value: string; value: string;

4
src/components/views/elements/StyledCheckbox.tsx
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React, { RefCallback } from "react"; import React, { Ref } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring"; import { randomString } from "matrix-js-sdk/src/randomstring";
import classnames from "classnames"; import classnames from "classnames";
@ -16,7 +16,7 @@ export enum CheckboxStyle {
} }
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> { interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
inputRef?: RefCallback<HTMLInputElement>; inputRef?: Ref<HTMLInputElement>;
kind?: CheckboxStyle; kind?: CheckboxStyle;
id?: string; id?: string;
} }

4
src/components/views/elements/StyledRadioButton.tsx
View file

@ -6,11 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details. Please see LICENSE files in the repository root for full details.
*/ */
import React, { RefCallback } from "react"; import React, { Ref } from "react";
import classnames from "classnames"; import classnames from "classnames";
interface IProps extends React.InputHTMLAttributes<HTMLInputElement> { interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
inputRef?: RefCallback<HTMLInputElement>; inputRef?: Ref<HTMLInputElement>;
outlined?: boolean; outlined?: boolean;
// If true (default), the children will be contained within a <label> element // If true (default), the children will be contained within a <label> element
// If false, they'll be in a div. Putting interactive components that have labels // If false, they'll be in a div. Putting interactive components that have labels