Allowing context menu panels to have different widths

cchaos · Sep 7, 2018 · 4f73396 · 4f73396
1 parent 7eb1233
commit 4f73396
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 12 deletions.
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
@@ -90,11 +90,17 @@ export const ContextMenuExample = {
       code: contextMenuWithContentHtml,
     }],
     text: (
-      <p>
-        Context menu panels can be passed React elements through the
-        <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>. The panel
-        will display your custom content without modification.
-      </p>
+      <div>
+        <p>
+          Context menu panels can be passed React elements through the
+          <EuiCode>content</EuiCode> prop instead of <EuiCode>items</EuiCode>. The panel
+          will display your custom content without modification.
+        </p>
+        <p>
+          If your panel contents have different widths or you need to ensure that a specific
+          context menu panel has a certain width, add <code>width: [number of pixels]</code> to the panel tree.
+        </p>
+      </div>
     ),
     demo: <ContextMenuWithContent />,
   }],

diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js
@@ -51,6 +51,7 @@ export default class extends Component {
         icon: 'plusInCircle',
         panel: {
           id: 1,
+          width: 400,
           title: 'See more',
           content: (
             <EuiPanel>

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.js.snap b/src/components/context_menu/__snapshots__/context_menu.test.js.snap
@@ -11,10 +11,11 @@ exports[`EuiContextMenu is rendered 1`] = `
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -65,10 +66,11 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -115,6 +117,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -270,6 +273,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width:256px"
     tabindex="0"
   >
     <button

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
@@ -11,10 +11,11 @@ exports[`EuiContextMenu is rendered 1`] = `
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 1`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -65,10 +66,11 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 exports[`EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2`] = `
 <div
   class="euiContextMenu"
-  style="height: 0px;"
+  style="height: 0px; width: 0px;"
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -115,6 +117,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
+    style="width: 256px;"
     tabindex="0"
   >
     <button
@@ -270,6 +273,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
+    style="width:256px"
     tabindex="0"
   >
     <button

diff --git a/src/components/context_menu/_context_menu.scss b/src/components/context_menu/_context_menu.scss
@@ -4,7 +4,9 @@ $euiContextMenuWidth: $euiSize * 16;
   width: $euiContextMenuWidth;
   position: relative;
   overflow: hidden;
-  transition: height $euiAnimSpeedFast $euiAnimSlightResistance;
+  transition:
+    height $euiAnimSpeedFast $euiAnimSlightResistance,
+    width $euiAnimSpeedFast $euiAnimSlightResistance;
   border-radius: $euiBorderRadius;
 
   .euiContextMenu__content {

diff --git a/src/components/context_menu/context_menu.js b/src/components/context_menu/context_menu.js
@@ -63,6 +63,7 @@ export const EuiContextMenuPanelItemShape = PropTypes.shape({
 
 export const EuiContextMenuPanelShape = PropTypes.shape({
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.number,  // Pixel value to set the panel width to
   content: PropTypes.node,  // Either content or items array should be given.
   items: PropTypes.arrayOf(EuiContextMenuPanelItemShape),
   title: PropTypes.string,
@@ -105,6 +106,7 @@ export class EuiContextMenu extends Component {
       idToRenderedItemsMap: {},
 
       height: undefined,
+      width: undefined,
       outgoingPanelId: undefined,
       incomingPanelId: props.initialPanelId,
       transitionDirection: undefined,
@@ -182,6 +184,16 @@ export class EuiContextMenu extends Component {
     });
   };
 
+  onIncomingPanelWidthChange = width => {
+    this.setState(({ width: prevWidth }) => {
+      if (width === prevWidth) {
+        return null;
+      } else {
+        return { width };
+      }
+    });
+  };
+
   onOutGoingPanelTransitionComplete = () => {
     this.setState({
       isOutgoingPanelVisible: false,
@@ -262,13 +274,17 @@ export class EuiContextMenu extends Component {
       onClose = () => window.requestAnimationFrame(this.showPreviousPanel);
     }
 
+    const style = { width: panel.width || 256 };
+
     return (
       <EuiContextMenuPanel
         key={panelId}
         className="euiContextMenu__panel"
         onHeightChange={(transitionType === 'in') ? this.onIncomingPanelHeightChange : undefined}
+        onWidthChange={(transitionType === 'in') ? this.onIncomingPanelWidthChange : undefined}
         onTransitionComplete={(transitionType === 'out') ? this.onOutGoingPanelTransitionComplete : undefined}
         title={panel.title}
+        style={style}
         onClose={onClose}
         transitionType={this.state.isOutgoingPanelVisible ? transitionType : undefined}
         transitionDirection={this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined}
@@ -304,7 +320,7 @@ export class EuiContextMenu extends Component {
     return (
       <div
         className={classes}
-        style={{ height: this.state.height }}
+        style={{ height: this.state.height, width: this.state.width }}
         {...rest}
       >
         {outgoingPanel}

diff --git a/src/components/context_menu/context_menu_panel.js b/src/components/context_menu/context_menu_panel.js
@@ -28,6 +28,7 @@ export class EuiContextMenuPanel extends Component {
     title: PropTypes.node,
     onClose: PropTypes.func,
     onHeightChange: PropTypes.func,
+    onWidthChange: PropTypes.func,
     transitionType: PropTypes.oneOf(['in', 'out']),
     transitionDirection: PropTypes.oneOf(['next', 'previous']),
     onTransitionComplete: PropTypes.func,
@@ -55,7 +56,8 @@ export class EuiContextMenuPanel extends Component {
       menuItems: [],
       isTransitioning: Boolean(props.transitionType),
       focusedItemIndex: props.initialFocusedItemIndex,
-      currentHeight: undefined
+      currentHeight: undefined,
+      currentWidth: undefined,
     };
   }
 
@@ -323,15 +325,31 @@ export class EuiContextMenuPanel extends Component {
     }
   }
 
+  updateWidth() {
+    console.log(this.panel, this.panel ? this.panel.clientWidth : 0);
+    const currentWidth = this.panel ? this.panel.clientWidth : 0;
+
+    if (this.state.width !== currentWidth) {
+      if (this.props.onWidthChange) {
+        this.props.onWidthChange(currentWidth);
+
+        this.setState({ width: currentWidth });
+      }
+    }
+    console.log(this.state.width, currentWidth);
+  }
+
   componentDidUpdate(prevProps) {
     if (prevProps.items.length > 0 || this.props.items.length > 0) {
       // content comes from items
       if (this.didItemsChange(prevProps.items, this.props.items)) {
         this.updateHeight();
+        this.updateWidth();
       }
     } else {
       // content comes from children
       this.updateHeight();
+      this.updateWidth();
     }
 
     this.updateFocus();
@@ -350,6 +368,7 @@ export class EuiContextMenuPanel extends Component {
     this.panel = node;
 
     this.updateHeight();
+    this.updateWidth();
   };
 
   contentRef = node => {
@@ -363,6 +382,7 @@ export class EuiContextMenuPanel extends Component {
       onClose,
       title,
       onHeightChange, // eslint-disable-line no-unused-vars
+      onWidthChange, // eslint-disable-line no-unused-vars
       transitionType,
       transitionDirection,
       onTransitionComplete, // eslint-disable-line no-unused-vars