@imposium-hub/components 1.42.1 → 1.42.2

package/components/button-menu/ButtonMenu.tsx

@@ -5,6 +5,7 @@ interface IButtonMenuProps {
     items : any;
     position : string;
     isOpen ? : boolean;
+    onClick ? : (e) => string | void;
 }
 
 interface IButtonMenuState {
@@ -15,27 +16,35 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
     private evtHandlers : any;
     private toggleRef : any;
+    private menuRef : any;
 
     constructor(props) {
 
         super(props);
         this.state = {
-            open : this.props.isOpen || false
+            open : false
         };
 
         this.evtHandlers = {
             toggleMenu: (e) => this.toggleMenu(e),
-            clickOutside: (e) => this.handleClickOutside(e)
+            clickOutside: (e, isSelect ? : boolean) => this.handleClickOutside(e, isSelect)
         };
 
         this.toggleRef = React.createRef();
+        this.menuRef = React.createRef();
     }
 
-    private handleClickOutside(e) {
-
+    private handleClickOutside(e, isSelect ? : boolean) {
         const clickOnToggle = (this.toggleRef && this.toggleRef.current && this.toggleRef.current.contains(e.target)) ? true : false;
+        const menus = (this.menuRef && this.menuRef.current && this.menuRef.current.contains(e.target)) ? true : false;
+        if (!clickOnToggle && !isSelect) {
+                document.removeEventListener('click', this.evtHandlers.clickOutside);
+                this.setState({
+                    open: false
+                });
+        }
 
-        if (!clickOnToggle) {
+        if (isSelect && !menus) {
             document.removeEventListener('click', this.evtHandlers.clickOutside);
             this.setState({
                 open: false
@@ -49,37 +58,39 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
     }
 
     public toggleMenu(e) {
-
+        const {onClick} = this.props;
         const newState = !this.state.open;
-
+        if (onClick) {
+            onClick(newState);
+        }
         this.setState({
-            open : newState
-        }, () => {
-            if (this.state.open) {
-                document.addEventListener('click', this.evtHandlers.clickOutside);
-            } else {
-                document.removeEventListener('click', this.evtHandlers.clickOutside);
-            }
-        });
+                open : newState
+            }, () => {
+                if (this.state.open) {
+                    document.addEventListener('click',
+                        (evt) => this.evtHandlers.clickOutside(evt, onClick ? true : undefined)
+                    );
+                } else {
+                    document.removeEventListener('click', this.evtHandlers.clickOutside);
+                }
+            });
     }
 
     public renderItems() {
 
-        const {items} = this.props;
+        const {items, isOpen} = this.props;
         const newItems = [];
         for (const item of items) {
 
             // clone the menu items passed in, close the modal before calling onClick on each item
             const newItem = React.cloneElement(item, {
                 onClick: (e) => {
-
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    document.removeEventListener('click', this.evtHandlers.clickOutside);
+                    if (!this.props.isOpen) {
+                        document.removeEventListener('click', this.evtHandlers.clickOutside);
+                    }
 
                     this.setState({
-                        open: false
+                        open: isOpen ? isOpen : false
                     }, () => {
                         item.props.onClick(e);
                     });
@@ -114,7 +125,7 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
             active: open
         });
 
-        return <div className = 'button-menu'>
+        return <div ref={this.menuRef} className = 'button-menu'>
             { trigger }
             { this.renderMenu() }
         </div>;

package/components/tabs/Tabs.tsx

@@ -13,6 +13,7 @@ interface ITab {
     canClose? : boolean;
     resize? : boolean;
     label : any;
+    menuButtons : JSX.Element;
 }
 
 interface ITabsProps {
@@ -28,6 +29,7 @@ interface ITabsProps {
 
 interface ITabsState {
     allowableTabsInView : number | null;
+    isMenuOpen : boolean;
 }
 
 class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
@@ -41,7 +43,8 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
             this.headerRef = React.createRef();
 
             this.state = {
-                allowableTabsInView: 0
+                allowableTabsInView: 0,
+                isMenuOpen: false,
             };
 
         }
@@ -72,18 +75,10 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                 for (let i = 0; i < options.length; i++) {
 
                     const option = options[i];
-                    let buttonWidth = option.canClose ? 20 : 0;
+                    const buttonWidth = option.canClose || option.menuButtons ? 20 : 0;
                     let div = document.createElement('div');
                     div.className = 'tab-header-option';
-
-                    // check typeof label
-                    if (typeof option.label !== 'string') {
-                        // set label
-                        div.innerHTML = option.label.props.children[0];
-                        buttonWidth = 20;
-                    } else {
-                        div.innerHTML = option.label;
-                    }
+                    div.innerHTML = option.label;
                     container.appendChild(div);
                     totalTabWidths += div.offsetWidth + buttonWidth;
                     container.removeChild(div);
@@ -144,7 +139,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
 
         for (let i = 0; i < options.length; i++) {
 
-            const {canClose, key, label} = options[i];
+            const {canClose, key, label, menuButtons} = options[i];
             const btnClose = (canClose) ?
                 <Button
                     style = 'subtle'
@@ -155,24 +150,30 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                         this.props.onClose(key); }}>
                 {ICON_TIMES}</Button> : null;
 
+            const buttonMenus = menuButtons ?
+                menuButtons
+                :
+                null;
+
             const activeClass = (key === activeTab) ? 'active' : '';
 
             if (i < this.state.allowableTabsInView ) {
                 headerOptions.push(
                     <div className = {`tab-header-option ${activeClass}`}
                         onClick = {() => this.props.onChange(key)}
-                        key = {key}>{label}{btnClose}</div>
+                        key = {key}>{label}{btnClose}{buttonMenus}</div>
                 );
             } else {
                 if (activeTab === key && !activeTabInMenu) {
                     activeTabInMenu = true;
                 }
-
                 menuOptions.push(
                     <ButtonMenuItem
                         key = {key}
-                        label = {<span>{label}{btnClose}</span>}
-                        onClick = {() => this.props.onChange(key)}
+                        label = {<span>{label}{btnClose}{buttonMenus}</span>}
+                        onClick = {(e) => {
+                            this.props.onChange(key);
+                        }}
                         active = {activeTab === key}
                      />
                     );
@@ -189,6 +190,12 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                         <ButtonMenu
                             position = 'left'
                             items = {menuOptions}
+                            onClick={(open) => {
+                                this.setState(
+                                    {isMenuOpen: open}
+                                );
+                            }}
+                            isOpen={this.state.isMenuOpen}
                             button = {btnOpenMenu}
                             />
                     </span>