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

Improve AccessibleButton & related types (#12075)

Browse Source 
* Fix wrong type enum usage

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

* Use improved type definition for forwardRef which enables Generic props

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

* Improve AccessibleButton & related Props types

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

* Remove useless comment

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2023-12-20 14:42:31 +00:00
committed by GitHub
parent e26d3e9b68
commit af31965866
17 changed files with 109 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/views/elements/AccessibleButton.tsx
View File

@@ -89,7 +89,10 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
};
export interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
/**
* Type of the props passed to the element that is rendered by AccessibleButton.
*/
interface RenderedElementProps extends React.InputHTMLAttributes<Element> {
ref?: React.Ref<Element>;
}
@@ -114,7 +117,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
triggerOnMouseDown,
...restProps
}: Props<T>): JSX.Element {
const newProps: IAccessibleButtonProps = restProps;
const newProps: RenderedElementProps = restProps;
if (disabled) {
newProps["aria-disabled"] = true;
newProps["disabled"] = true;

8
src/components/views/elements/AccessibleTooltipButton.tsx
View File

@@ -25,7 +25,7 @@ import Tooltip, { Alignment } from "./Tooltip";
*
* Extends that of {@link AccessibleButton}.
*/
interface Props extends React.ComponentProps<typeof AccessibleButton> {
type Props<T extends keyof JSX.IntrinsicElements> = React.ComponentProps<typeof AccessibleButton<T>> & {
/**
* Title to show in the tooltip and use as aria-label
*/
@@ -58,9 +58,9 @@ interface Props extends React.ComponentProps<typeof AccessibleButton> {
* Function to call when the tooltip goes from shown to hidden.
*/
onHideTooltip?(ev: SyntheticEvent): void;
}
};
function AccessibleTooltipButton({
function AccessibleTooltipButton<T extends keyof JSX.IntrinsicElements>({
title,
tooltip,
children,
@@ -69,7 +69,7 @@ function AccessibleTooltipButton({
onHideTooltip,
tooltipClassName,
...props
}: Props): JSX.Element {
}: Props<T>): JSX.Element {
const [hover, setHover] = useState(false);
useEffect(() => {

10
src/components/views/elements/LearnMore.tsx
View File

@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { ComponentProps } from "react";
import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
import InfoDialog from "../dialogs/InfoDialog";
import AccessibleButton, { IAccessibleButtonProps } from "./AccessibleButton";
import AccessibleButton from "./AccessibleButton";
export interface LearnMoreProps extends IAccessibleButtonProps {
type Props = Omit<ComponentProps<typeof AccessibleButton>, "kind" | "onClick" | "className"> & {
title: string;
description: string | React.ReactNode;
}
};
const LearnMore: React.FC<LearnMoreProps> = ({ title, description, ...rest }) => {
const LearnMore: React.FC<Props> = ({ title, description, ...rest }) => {
const onClick = (): void => {
Modal.createDialog(InfoDialog, {
title,