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:
parent
edd5d54e49
commit
e2b854d3af
@ -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) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user