imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch AccessibleButton and derivatives to using forwardRef (#12054)

Browse source 
* Prevent Cypress typechecking react-sdk components without strict mode

This prevented us from switching to `forwardRef` in a bunch of places
due to it behaving different with & without strict mode.

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update global.d.ts

* Switch AccessibleButton and derivatives to using `forwardRef`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add missing ref={ref}

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Ensure RefObjects are used consistently

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Re-add WysiwygAutocomplete displayname

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix forwardRef types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add comments

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused export

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Readd comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate types & comments

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Apply suggestions from code review

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

* Add comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Improve comment

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Michael Telatynski 2023-12-21 08:50:42 +00:00 • committed by GitHub
parent 0a881e2123
commit f632e2124f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
37 changed files with 102 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/views/rooms/CollapsibleButton.tsx
View file

@ -17,30 +17,38 @@ limitations under the License.
import React, { ComponentProps, useContext } from "react";
import classNames from "classnames";
import AccessibleButton from "../elements/AccessibleButton";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { MenuItem } from "../../structures/ContextMenu";
import { OverflowMenuContext } from "./MessageComposerButtons";
import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
import { Ref } from "../../../accessibility/roving/types";
interface ICollapsibleButtonProps extends ComponentProps<typeof MenuItem> {
interface Props extends Omit<ComponentProps<typeof AccessibleButton>, "element"> {
inputRef?: Ref;
title: string;
iconClassName: string;
}
export const CollapsibleButton: React.FC<ICollapsibleButtonProps> = ({
export const CollapsibleButton: React.FC<Props> = ({
title,
children,
className,
iconClassName,
inputRef,
...props
}) => {
const inOverflowMenu = !!useContext(OverflowMenuContext);
if (inOverflowMenu) {
return <IconizedContextMenuOption {...props} iconClassName={iconClassName} label={title} />;
return <IconizedContextMenuOption {...props} iconClassName={iconClassName} label={title} inputRef={inputRef} />;
}
return (
<AccessibleTooltipButton {...props} title={title} className={classNames(className, iconClassName)}>
<AccessibleTooltipButton
{...props}
title={title}
className={classNames(className, iconClassName)}
ref={inputRef}
>
{children}
</AccessibleTooltipButton>
);