extended badge content by click, selecting text from label doesn't trigger auto-closing

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/badge/badge.scss

@@ -7,31 +7,24 @@
   white-space: nowrap;
   max-width: 100%;
   position: relative;
+  cursor: pointer;
 
-  >.children {
+  &:hover {
-    overflow: hidden;
+    background-color: $mainBackground;
-    text-overflow: ellipsis;
   }
 
   &.small {
     font-size: $font-size-small;
   }
 
-  &.expanded {
+  .label-content {
-    overflow: unset;
+    overflow: hidden;
-    text-overflow: unset;
+    text-overflow: ellipsis;
-    white-space: unset;
-  }
 
-  > .expansionIcon {
+    &.isExpanded {
-    transform: scaleX(-1);
+      overflow: unset;
-    position: absolute;
+      text-overflow: unset;
-    z-index: 1;
+      white-space: normal;
-    right: -6px;
+    }
-    bottom: -6px;
-    color: $textColorAccent;
-    background-color: $halfGray;
-    border-radius: 50%;
-    padding: 2px;
   }
 }

src/renderer/components/badge/badge.tsx

@@ -6,55 +6,36 @@ import { TooltipDecoratorProps, withTooltip } from "../tooltip";
 import { observer } from "mobx-react";
 import { autobind } from "../../utils";
 import { observable } from "mobx";
-import { Icon } from "../icon";
 
 export interface BadgeProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
   small?: boolean;
   label?: React.ReactNode;
+  isExpanded?: boolean; // by default: false (minimized)
 }
 
 @withTooltip
 @observer
 export class Badge extends React.Component<BadgeProps> {
-  private elem: HTMLElement;
+  @observable isExpanded = false;
-
-  @observable isExpanded = false
-  @observable canBeExpanded = false
-
-  componentDidMount() {
-    this.canBeExpanded = this.elem.offsetWidth < this.elem.scrollWidth
-  }
 
   @autobind()
-  onClick() {
+  onMouseRelease() {
-    if (this.canBeExpanded) {
+    const textSelected = document.getSelection().toString().trim() !== "";
-      this.isExpanded = !this.isExpanded
+    if (textSelected) return;
-    }
+    this.isExpanded = this.props.isExpanded /*force to use state from outside*/ ?? !this.isExpanded /*toggle*/;
-  }
-
-  renderExpansionIcon() {
-    if (!this.canBeExpanded) {
-      return null
-    }
-
-    const material = this.isExpanded ? "close_fullscreen" : "open_in_full"
-    return <Icon
-      className="expansionIcon"
-      size={12}
-      material={material}
-      focusable={false}
-      onClick={this.onClick}
-    />
   }
 
   render() {
-    const { className, label, small, children, ...elemProps } = this.props;
+    const { className, label, small, children, isExpanded, ...elemProps } = this.props;
-    const classNames = cssNames("Badge", className, { small, expanded: this.isExpanded })
+    const classNames = cssNames("Badge", className, {
-
+      small: small,
+    })
+    const labelClass = cssNames("label-content", {
+      isExpanded: this.isExpanded,
+    })
     return (
-      <div className={classNames} {...elemProps}>
+      <div {...elemProps} className={classNames}>
-        {this.renderExpansionIcon()}
+        <div className={labelClass} onMouseUp={this.onMouseRelease}>
-        <div className="children" ref={ref => (this.elem = ref)}>
           {label}
           {children}
         </div>