Update FilterPopup: add labelMaxWidth prop and ellipsis:

sharetribe · Jul 18, 2019 · 500155c · 500155c
1 parent 492e640
commit 500155c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/FilterPopup/FilterPopup.css b/src/components/FilterPopup/FilterPopup.css
@@ -41,6 +41,11 @@
     border: 1px solid var(--marketplaceColorDark);
   }
 }
+.labelEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 .popup {
   /* By default hide the content */

diff --git a/src/components/FilterPopup/FilterPopup.js b/src/components/FilterPopup/FilterPopup.js
@@ -103,6 +103,7 @@ class FilterPopup extends Component {
       popupClassName,
       id,
       label,
+      labelMaxWidth,
       isSelected,
       children,
       initialValues,
@@ -114,6 +115,8 @@ class FilterPopup extends Component {
     const popupClasses = classNames(css.popup, { [css.isOpen]: this.state.isOpen });
     const popupSizeClasses = popupClassName || css.popupSize;
     const labelStyles = isSelected ? css.labelSelected : css.label;
+    const labelMaxWidthMaybe = labelMaxWidth ? { maxWidth: `${labelMaxWidth}px` } : {};
+    const labelMaxWidthStyles = labelMaxWidth ? css.labelEllipsis : null;
     const contentStyle = this.positionStyleForContent();
 
     return (
@@ -125,7 +128,11 @@ class FilterPopup extends Component {
             this.filter = node;
           }}
         >
-          <button className={labelStyles} onClick={() => this.toggleOpen()}>
+          <button
+            className={classNames(labelStyles, labelMaxWidthStyles)}
+            style={labelMaxWidthMaybe}
+            onClick={() => this.toggleOpen()}
+          >
             {label}
           </button>
           <div
@@ -167,6 +174,7 @@ FilterPopup.defaultProps = {
   contentPlacementOffset: 0,
   liveEdit: false,
   label: null,
+  labelMaxWidth: null,
 };
 
 FilterPopup.propTypes = {
@@ -180,6 +188,7 @@ FilterPopup.propTypes = {
   keepDirtyOnReinitialize: bool,
   contentPlacementOffset: number,
   label: string.isRequired,
+  labelMaxWidth: number,
   isSelected: bool.isRequired,
   children: node.isRequired,