nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Just use one ref prop in Field.tsx

Browse Source
This commit is contained in:
R Midhun Suresh
2024-11-13 16:35:02 +05:30
parent 86c6ba9dd7
commit e5c0cdc402
2 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/views/elements/Field.tsx
View File

@@ -12,6 +12,8 @@ import React, {
RefObject,
createRef,
ComponentProps,
MutableRefObject,
RefCallback,
} from "react";
import classNames from "classnames";
import { debounce } from "lodash";
@@ -73,13 +75,9 @@ interface IProps {
// All other props pass through to the <input>.
}
type RefCallback<T extends HTMLElement> = (node: T | null) => void;
export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
// The ref pass through to the input
inputRef?: RefObject<HTMLInputElement>;
// Ref callback that will be attached to the input. This takes precedence over inputRef.
refCallback?: RefCallback<HTMLInputElement>;
inputRef?: RefObject<HTMLInputElement> | RefCallback<HTMLInputElement>;
// The element to create. Defaults to "input".
element: "input";
// The input's value. This is a controlled component, so the value is required.
@@ -88,9 +86,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
// The ref pass through to the select
inputRef?: RefObject<HTMLSelectElement>;
// Ref callback that will be attached to the input. This takes precedence over inputRef.
refCallback?: RefCallback<HTMLSelectElement>;
inputRef?: RefObject<HTMLSelectElement> | RefCallback<HTMLSelectElement>;
// To define options for a select, use <Field><option ... /></Field>
element: "select";
// The select's value. This is a controlled component, so the value is required.
@@ -99,9 +95,7 @@ interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
// The ref pass through to the textarea
inputRef?: RefObject<HTMLTextAreaElement>;
// Ref callback that will be attached to the input. This takes precedence over inputRef.
refCallback?: RefCallback<HTMLTextAreaElement>;
inputRef?: RefObject<HTMLTextAreaElement> | RefCallback<HTMLTextAreaElement>;
element: "textarea";
// The textarea's value. This is a controlled component, so the value is required.
value: string;
@@ -109,9 +103,7 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
// The ref pass through to the input
inputRef?: RefObject<HTMLInputElement>;
// Ref callback that will be attached to the input. This takes precedence over inputRef.
refCallback?: RefCallback<HTMLInputElement>;
inputRef?: RefObject<HTMLInputElement> | RefCallback<HTMLInputElement>;
element: "input";
// The input's value. This is a controlled component, so the value is required.
value: string;
@@ -128,7 +120,17 @@ interface IState {
export default class Field extends React.PureComponent<PropShapes, IState> {
private readonly id: string;
private readonly _inputRef = createRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>();
private readonly _inputRef: MutableRefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null> =
createRef();
/**
* When props.inputRef is a callback ref, we will pass callbackRef to the DOM element.
* This is so that other methods here can still access the DOM element via this._inputRef.
*/
private readonly callbackRef: RefCallback<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> = (node) => {
this._inputRef.current = node;
(this.props.inputRef as RefCallback<unknown>)(node);
};
public static readonly defaultProps = {
element: "input",
@@ -240,7 +242,12 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
}
private get inputRef(): RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> {
return this.props.inputRef ?? this._inputRef;
const inputRef = this.props.inputRef;
if (typeof inputRef === "function") {
// This is a callback ref, so return _inputRef which will point to the actual DOM element.
return this._inputRef;
}
return (inputRef ?? this._inputRef) as RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
}
private onTooltipOpenChange = (open: boolean): void => {
@@ -294,7 +301,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
const inputProps_: React.HTMLAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement> &
React.ClassAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement> = {
...inputProps,
ref: this.props.refCallback ?? this.inputRef,
ref: typeof this.props.inputRef === "function" ? this.callbackRef : this.inputRef,
};
const fieldInput = React.createElement(this.props.element, inputProps_, children);