@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/tabs/Tabs.stories.tsx

@@ -6,27 +6,6 @@ export default {
     component: Tabs
 };
 
-interface ITab {
-    content : any;
-    key : string;
-    canClose? : boolean;
-    resize? : boolean;
-    label : string;
-}
-
-interface ITabsProps {
-    activeTab? : string;
-    keepMounted? : boolean;
-    options : ITab[];
-    onChange(i) : void;
-    onClose(i) : void;
-    tabPadding? : number;
-}
-
-interface ITabsState {
-    allowableTabsInView : number | null;
-}
-
 const tabs = [
     {
         label: 'Tab1',
@@ -57,10 +36,5 @@ export const defaultTabs = () => {
         setActiveTab(i);
     };
 
-    return (
-        <Tabs
-            activeTab = { activeTab }
-            onChange = {(i) => handleTabChange(i)}
-            options = {tabs}/>
-    );
+    return <Tabs activeTab={activeTab} onChange={(i) => handleTabChange(i)} options={tabs} />;
 };

package/src/components/tabs/Tabs.tsx

@@ -1,107 +1,97 @@
 import * as React from 'react';
-import ReactResizeDetector, { withResizeDetector } from 'react-resize-detector';
-
+import { withResizeDetector } from 'react-resize-detector';
 import ButtonMenu from '../button-menu/ButtonMenu';
 import ButtonMenuItem from '../button-menu/ButtonMenuItem';
-
 import Button from '../button/Button';
 import { ICON_TIMES, ICON_BARS } from '../../constants/icons';
 
 export interface ITab {
-    content? : any;
-    key? : string;
-    canClose? : boolean;
-    resize? : boolean;
-    label : any;
-    menuButtons? : JSX.Element;
+    content?: any;
+    key?: string;
+    canClose?: boolean;
+    resize?: boolean;
+    label: any;
+    menuButtons?: JSX.Element;
 }
 
 interface ITabsProps {
-    activeTab? : string;
-    keepMounted? : boolean;
-    options : ITab[];
-    onChange(i) : void;
-    onClose(i) : void;
-    tabPadding? : number;
-    width : number;
-    height : number;
+    activeTab?: string;
+    keepMounted?: boolean;
+    options: ITab[];
+    onChange(i): void;
+    onClose(i): void;
+    tabPadding?: number;
+    width: number;
+    height: number;
 }
 
 interface ITabsState {
-    allowableTabsInView : number | null;
-    isMenuOpen : boolean;
+    allowableTabsInView: number | null;
+    isMenuOpen: boolean;
 }
 
 class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
-
-    private headerRef : any;
+    private headerRef: any;
 
     constructor(props) {
+        super(props);
 
-            super(props);
-
-            this.headerRef = React.createRef();
-
-            this.state = {
-                allowableTabsInView: 0,
-                isMenuOpen: false,
-            };
-
-        }
+        this.headerRef = React.createRef();
 
-        public componentDidMount() {
-            // Count how many tabs fit into parent element and round down
-            const allowableTabsInView = Math.floor(this.allowableNumOfTabs());
-            this.setState({ allowableTabsInView });
+        this.state = {
+            allowableTabsInView: 0,
+            isMenuOpen: false
+        };
+    }
 
-        }
+    public componentDidMount() {
+        // Count how many tabs fit into parent element and round down
+        const allowableTabsInView = Math.floor(this.allowableNumOfTabs());
+        this.setState({ allowableTabsInView });
+    }
 
-        public componentDidUpdate(prevprops) {
-            // Count how many tabs fit into parent element and round down
-            const allowableTabsInView = Math.floor(this.allowableNumOfTabs());
-            this.setState({ allowableTabsInView });
-        }
+    public componentDidUpdate(prevprops) {
+        // Count how many tabs fit into parent element and round down
+        const allowableTabsInView = Math.floor(this.allowableNumOfTabs());
+        this.setState({ allowableTabsInView });
+    }
 
-        // Calculate number of tabs to allow before moving them to the burger menu
-        private allowableNumOfTabs() {
-            const { options, tabPadding } = this.props;
-
-            let totalTabWidths = 0;
-
-            const container = this.headerRef.current;
-
-            if (container) {
-                const contentWidth = container.offsetWidth;
-                for (let i = 0; i < options.length; i++) {
-
-                    const option = options[i];
-                    const buttonWidth = option.canClose || option.menuButtons ? 20 : 0;
-                    let div = document.createElement('div');
-                    div.className = 'tab-header-option';
-                    div.innerHTML = option.label;
-                    container.appendChild(div);
-                    totalTabWidths += div.offsetWidth + buttonWidth;
-                    container.removeChild(div);
-                    div = null;
-                    if ( totalTabWidths >= contentWidth - tabPadding - 25) {
-                                return i;
-                            }
+    // Calculate number of tabs to allow before moving them to the burger menu
+    private allowableNumOfTabs() {
+        const { options, tabPadding } = this.props;
+
+        let totalTabWidths = 0;
+
+        const container = this.headerRef.current;
+
+        if (container) {
+            const contentWidth = container.offsetWidth;
+            for (let i = 0; i < options.length; i++) {
+                const option = options[i];
+                const buttonWidth = option.canClose || option.menuButtons ? 20 : 0;
+                let div = document.createElement('div');
+                div.className = 'tab-header-option';
+                div.innerHTML = option.label;
+                container.appendChild(div);
+                totalTabWidths += div.offsetWidth + buttonWidth;
+                container.removeChild(div);
+                div = null;
+                if (totalTabWidths >= contentWidth - tabPadding - 25) {
+                    return i;
                 }
-                return options.length;
             }
+            return options.length;
         }
+    }
 
     private renderContent() {
-
-        const {options, activeTab, keepMounted, width, height} = this.props;
+        const { options, activeTab, keepMounted, width, height } = this.props;
 
         if (keepMounted) {
-
             const contentArray = [];
 
             for (const option of options) {
-
-                const active = (option.key === activeTab);
+                const active = option.key === activeTab;
 
                 const content = React.cloneElement(option.content, {
                     active,
@@ -117,12 +107,9 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
             } else {
                 return null;
             }
-
         } else {
             for (const option of options) {
-
                 if (option.key === activeTab || !activeTab) {
-
                     return option.content;
                 }
             }
@@ -131,37 +118,40 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     }
 
     private renderHeader() {
-
-        const {options, activeTab}  = this.props;
+        const { options, activeTab } = this.props;
         const headerOptions = [];
         const menuOptions = [];
         let activeTabInMenu = false;
 
         for (let i = 0; i < options.length; i++) {
-
-            const {canClose, key, label, menuButtons} = options[i];
-            const btnClose = (canClose) ?
+            const { canClose, key, label, menuButtons } = options[i];
+            const btnClose = canClose ? (
                 <Button
-                    style = 'subtle'
-                    size = 'small'
-                    onClick = {(e) => {
+                    style='subtle'
+                    size='small'
+                    onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
-                        this.props.onClose(key); }}>
-                {ICON_TIMES}</Button> : null;
+                        this.props.onClose(key);
+                    }}>
+                    {ICON_TIMES}
+                </Button>
+            ) : null;
 
-            const buttonMenus = menuButtons ?
-                menuButtons
-                :
-                null;
+            const buttonMenus = menuButtons ? menuButtons : null;
 
-            const activeClass = (key === activeTab) ? 'active' : '';
+            const activeClass = key === activeTab ? 'active' : '';
 
-            if (i < this.state.allowableTabsInView ) {
+            if (i < this.state.allowableTabsInView) {
                 headerOptions.push(
-                    <div className = {`tab-header-option ${activeClass}`}
-                        onClick = {() => this.props.onChange(key)}
-                        key = {key}>{label}{btnClose}{buttonMenus}</div>
+                    <div
+                        className={`tab-header-option ${activeClass}`}
+                        onClick={() => this.props.onChange(key)}
+                        key={key}>
+                        {label}
+                        {btnClose}
+                        {buttonMenus}
+                    </div>
                 );
             } else {
                 if (activeTab === key && !activeTabInMenu) {
@@ -169,35 +159,42 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                 }
                 menuOptions.push(
                     <ButtonMenuItem
-                        key = {key}
-                        label = {<span>{label}{btnClose}{buttonMenus}</span>}
-                        onClick = {(e) => {
+                        key={key}
+                        label={
+                            <span>
+                                {label}
+                                {btnClose}
+                                {buttonMenus}
+                            </span>
+                        }
+                        onClick={(e) => {
                             this.props.onChange(key);
                         }}
-                        active = {activeTab === key}
-                     />
-                    );
-                }
-
+                        active={activeTab === key}
+                    />
+                );
             }
+        }
 
-        const btnOpenMenu = <Button size = 'large' style = 'subtle' color = {activeTabInMenu ? 'primary' : null}>{ICON_BARS}</Button>;
+        const btnOpenMenu = (
+            <Button size='large' style='subtle' color={activeTabInMenu ? 'primary' : null}>
+                {ICON_BARS}
+            </Button>
+        );
         return (
             <>
                 {headerOptions}
                 {menuOptions.length > 0 ? (
                     <span className='tab-header-menu'>
                         <ButtonMenu
-                            position = 'left'
-                            items = {menuOptions}
+                            position='left'
+                            items={menuOptions}
                             onClick={(open) => {
-                                this.setState(
-                                    {isMenuOpen: open}
-                                );
+                                this.setState({ isMenuOpen: open });
                             }}
                             isOpen={this.state.isMenuOpen}
-                            button = {btnOpenMenu}
-                            />
+                            button={btnOpenMenu}
+                        />
                     </span>
                 ) : null}
             </>
@@ -205,15 +202,12 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
     }
 
     public render() {
-
         return (
-            <div className = 'tabs'>
-                <div ref={this.headerRef} className = 'tab-header'>
+            <div className='tabs'>
+                <div ref={this.headerRef} className='tab-header'>
                     {this.renderHeader()}
                 </div>
-                <div className = 'tab-content'>
-                {this.renderContent()}
-                </div>
+                <div className='tab-content'>{this.renderContent()}</div>
             </div>
         );
     }

package/src/components/text-area-field/TextAreaField.stories.tsx

@@ -1,46 +1,20 @@
 import * as React from 'react';
 import TextAreaField from './TextAreaField';
 import { action } from '@storybook/addon-actions';
-import { IToolTipConfig } from '../Tooltip';
 
 export default {
     title: 'TextAreaField',
     components: TextAreaField
 };
 
-interface ITextAreaFieldProps {
-    buttons? : any;
-    controlled? : boolean;
-    disabled? : boolean;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value : string;
-    showCopy? : boolean;
-    width? : string | number;
-    tooltip? : IToolTipConfig | string;
-    onBlur?(e) : void;
-    onChange?(e) : void;
-    onFocus?(e) : void;
-    onNotification?(n, t?) : void;
-    onError?(e) : void;
-    onSubmit?(e) : void;
-    info? : string;
-    labelPosition? : string;
-}
-
-interface ITextAreaFieldState {
-    editing : boolean;
-    internalValue : string;
-}
-
 export const defaultTextAreaField = () => (
     <TextAreaField
-        label = {'TextArea Field'}
-        showCopy = {true}
-        tooltip = {'TOOLTIP'}
-        value = {''}
-        onNotification = {(n) => action(n)}
-        onError = {(n) => action(n)}
-        onChange = {action('CHANGED')}/>
+        label={'TextArea Field'}
+        showCopy={true}
+        tooltip={'TOOLTIP'}
+        value={''}
+        onNotification={(n) => action(n)}
+        onError={(n) => action(n)}
+        onChange={action('CHANGED')}
+    />
 );