1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Fix badge not expanding on click when appropriate (#6029)

* Fix badge not expanding on click when appropriate

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Fix snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Update other snapshots

Signed-off-by: Sebastian Malton <sebastian@malton.name>

* Remove unneccessary code

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-08-25 06:19:35 -07:00 committed by GitHub
parent edd5d54e49
commit e2b854d3af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,7 +5,7 @@
import styles from "./badge.module.scss"; import styles from "./badge.module.scss";
import React, { createRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { action, observable } from "mobx"; import { action, observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { cssNames } from "../../utils/cssNames"; import { cssNames } from "../../utils/cssNames";
@ -40,12 +40,15 @@ export const Badge = withTooltip(observer(({
children, children,
...elemProps ...elemProps
}: BadgeProps) => { }: BadgeProps) => {
const elem = createRef<HTMLDivElement>(); const elem = useRef<HTMLDivElement>(null);
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const [isExpandable, setIsExpandable] = useState(false);
const isExpandable = expandable && elem.current useEffect(() => {
? elem.current.clientWidth < elem.current.scrollWidth const { clientWidth = 0, scrollWidth = 0 } = elem.current ?? {};
: false;
setIsExpandable(expandable && (clientWidth < scrollWidth));
}, [expandable, elem.current]);
const onMouseUp = action(() => { const onMouseUp = action(() => {
if (!isExpandable || badgeMeta.hasTextSelected) { if (!isExpandable || badgeMeta.hasTextSelected) {