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 React, { createRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { action, observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { cssNames } from "../../utils/cssNames";
|
||||
@ -40,12 +40,15 @@ export const Badge = withTooltip(observer(({
|
||||
children,
|
||||
...elemProps
|
||||
}: BadgeProps) => {
|
||||
const elem = createRef<HTMLDivElement>();
|
||||
const elem = useRef<HTMLDivElement>(null);
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [isExpandable, setIsExpandable] = useState(false);
|
||||
|
||||
const isExpandable = expandable && elem.current
|
||||
? elem.current.clientWidth < elem.current.scrollWidth
|
||||
: false;
|
||||
useEffect(() => {
|
||||
const { clientWidth = 0, scrollWidth = 0 } = elem.current ?? {};
|
||||
|
||||
setIsExpandable(expandable && (clientWidth < scrollWidth));
|
||||
}, [expandable, elem.current]);
|
||||
|
||||
const onMouseUp = action(() => {
|
||||
if (!isExpandable || badgeMeta.hasTextSelected) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user