@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -3,34 +3,34 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig, renderTooltip, renderTooltipProps } from '../Tooltip';
 
 interface IButtonGroupOption {
-    value : string | boolean;
-    label? : any;
-    bgColor? : string;
-    icon? : any;
-    onDoubleClick? : (...args) => any;
-    tooltip? : IToolTipConfig | string;
+    value: string | boolean;
+    label?: any;
+    bgColor?: string;
+    icon?: any;
+    onDoubleClick?: (...args) => any;
+    tooltip?: IToolTipConfig | string;
 }
 
 interface IButtonGroupFieldProps {
-    label? : string;
-    width? : string | number;
-    value : string | boolean;
-    options : IButtonGroupOption[];
-    tooltip? : IToolTipConfig | string;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
+    label?: string;
+    width?: string | number;
+    value: string | boolean;
+    options: IButtonGroupOption[];
+    tooltip?: IToolTipConfig | string;
+    onChange(e): void;
+    info?: string;
+    labelPosition?: string;
 }
 
 class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
-    private clickTimeout : number;
-    private clickCounter : number = 0;
+    private clickTimeout: number;
+    private clickCounter: number = 0;
 
-    constructor(p : IButtonGroupFieldProps) {
+    constructor(p: IButtonGroupFieldProps) {
         super(p);
     }
 
-    private handleMultipleClicks = (singleClick : () => any, doubleClick : () => any) : void => {
+    private handleMultipleClicks = (singleClick: () => any, doubleClick: () => any): void => {
         this.clickCounter++;
 
         if (this.clickCounter === 1) {
@@ -45,44 +45,50 @@ class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
             this.clickCounter = 0;
             doubleClick();
         }
-    }
+    };
 
-    public render = () : JSX.Element => {
-        const {value, label, options, width, tooltip, info, labelPosition} = this.props;
-        const optionStyle : any = {width: `${100 / options.length}%`};
+    public render = (): JSX.Element => {
+        const { value, label, options, width, tooltip, info, labelPosition } = this.props;
+        const optionStyle: any = { width: `${100 / options.length}%` };
 
         return (
             <FieldWrapper
-                customClass = 'button-group-field'
-                label = {label}
-                tooltip = {tooltip}
-                info = {info}
-                labelPosition = {labelPosition}
-                width = {width}>
-
-                <div className = 'button-group'>
+                customClass='button-group-field'
+                label={label}
+                tooltip={tooltip}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <div className='button-group'>
                     {options.map((option, i) => {
                         const optionKey = option.value;
                         const optionLabel = option.label;
-                        const icon = (option.icon) ? option.icon : null;
+                        const icon = option.icon ? option.icon : null;
                         const tooltipId = `${optionKey}-${i}`;
-                        const activeOption = (optionKey === value);
-                        const activeClass = (activeOption) ? 'active' : '';
-                        const onClick = (!activeOption) ? () => { this.props.onChange(optionKey); } : null;
+                        const activeOption = optionKey === value;
+                        const activeClass = activeOption ? 'active' : '';
+                        const onClick = !activeOption
+                            ? () => {
+                                  this.props.onChange(optionKey);
+                              }
+                            : null;
 
                         return (
                             <div
-                                key = {`option-${optionKey}`}
-                                style = {optionStyle}
-                                className = {`button-group-option ${activeClass}`}
+                                key={`option-${optionKey}`}
+                                style={optionStyle}
+                                className={`button-group-option ${activeClass}`}
                                 {...renderTooltipProps(tooltipId, option.tooltip)}
-                                onClick = {
-                                    (typeof option.onDoubleClick === 'function')
-                                        ? () => this.handleMultipleClicks(onClick, option.onDoubleClick)
+                                onClick={
+                                    typeof option.onDoubleClick === 'function'
+                                        ? () =>
+                                              this.handleMultipleClicks(
+                                                  onClick,
+                                                  option.onDoubleClick
+                                              )
                                         : onClick
-                                }
-                            >
-                                {(!icon) ? optionLabel : icon}
+                                }>
+                                {!icon ? optionLabel : icon}
                                 {renderTooltip(tooltipId, option.tooltip)}
                             </div>
                         );
@@ -90,7 +96,7 @@ class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
                 </div>
             </FieldWrapper>
         );
-    }
+    };
 }
 
 export default ButtonGroupField;

package/src/components/button-menu/ButtonMenu.stories.tsx

@@ -3,28 +3,19 @@ import { action } from '@storybook/addon-actions';
 import ButtonMenu from './ButtonMenu';
 import Button from '../button/Button';
 import ButtonMenuItem from './ButtonMenuItem';
-import {ICON_COPY, ICON_BARS} from '../../constants/icons';
-
-// Interfaces For Reference
-interface IButtonMenuProps {
-    button : any;
-    items : any;
-    position : string;
-}
-
-interface IButtonMenuState {
-    open : boolean;
-}
+import { ICON_COPY, ICON_BARS } from '../../constants/icons';
 
 const menuItems = [
     <ButtonMenuItem
-        key = 'duplicate'
-        label = {<span>{ICON_COPY}&nbsp;Duplicate</span>}
-        onClick = {action('CLICKED')}/>,
+        key='duplicate'
+        label={<span>{ICON_COPY}&nbsp;Duplicate</span>}
+        onClick={action('CLICKED')}
+    />,
     <ButtonMenuItem
-        key = 'delete'
-        label = {<span>{ICON_BARS}&nbsp;Trash</span>}
-        onClick = {action('CLICKED')}/>
+        key='delete'
+        label={<span>{ICON_BARS}&nbsp;Trash</span>}
+        onClick={action('CLICKED')}
+    />
 ];
 
 export default {
@@ -34,8 +25,8 @@ export default {
 
 export const rightButtonMenuWithButtonMenuItem = () => (
     <ButtonMenu
-        position = 'right'
-        items = {menuItems}
-        button = {<Button style = 'subtle'>{ICON_BARS}</Button>}
-        />
+        position='right'
+        items={menuItems}
+        button={<Button style='subtle'>{ICON_BARS}</Button>}
+    />
 );

package/src/components/button-menu/ButtonMenu.tsx

@@ -1,47 +1,51 @@
 import * as React from 'react';
 
 interface IButtonMenuProps {
-    button : any;
-    items : any;
-    position : string;
-    isOpen ? : boolean;
-    onClick ? : (e) => string | void;
+    button: any;
+    items: any;
+    position: string;
+    isOpen?: boolean;
+    onClick?: (e) => string | void;
 }
 
 interface IButtonMenuState {
-    open : boolean;
+    open: boolean;
 }
 
 class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState> {
-
-    private evtHandlers : any;
-    private toggleRef : any;
-    private menuRef : any;
+    private evtHandlers: any;
+    private toggleRef: any;
+    private menuRef: any;
 
     constructor(props) {
-
         super(props);
         this.state = {
-            open : false
+            open: false
         };
 
         this.evtHandlers = {
             toggleMenu: (e) => this.toggleMenu(e),
-            clickOutside: (e, isSelect ? : boolean) => this.handleClickOutside(e, isSelect)
+            clickOutside: (e, isSelect?: boolean) => this.handleClickOutside(e, isSelect)
         };
 
         this.toggleRef = React.createRef();
         this.menuRef = React.createRef();
     }
 
-    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;
+    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
-                });
+            document.removeEventListener('click', this.evtHandlers.clickOutside);
+            this.setState({
+                open: false
+            });
         }
 
         if (isSelect && !menus) {
@@ -53,35 +57,35 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
     }
 
     public componentWillUnmount() {
-
         document.removeEventListener('click', this.evtHandlers.clickOutside);
     }
 
     public toggleMenu(e) {
-        const {onClick} = this.props;
+        const { onClick } = this.props;
         const newState = !this.state.open;
         if (onClick) {
             onClick(newState);
         }
-        this.setState({
-                open : newState
-            }, () => {
+        this.setState(
+            {
+                open: newState
+            },
+            () => {
                 if (this.state.open) {
-                    document.addEventListener('click',
-                        (evt) => this.evtHandlers.clickOutside(evt, onClick ? true : undefined)
+                    document.addEventListener('click', (evt) =>
+                        this.evtHandlers.clickOutside(evt, onClick ? true : undefined)
                     );
                 } else {
                     document.removeEventListener('click', this.evtHandlers.clickOutside);
                 }
-            });
+            }
+        );
     }
 
     public renderItems() {
-
-        const {items, isOpen} = 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) => {
@@ -89,11 +93,14 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
                         document.removeEventListener('click', this.evtHandlers.clickOutside);
                     }
 
-                    this.setState({
-                        open: isOpen ? isOpen : false
-                    }, () => {
-                        item.props.onClick(e);
-                    });
+                    this.setState(
+                        {
+                            open: isOpen ? isOpen : false
+                        },
+                        () => {
+                            item.props.onClick(e);
+                        }
+                    );
                 }
             });
             newItems.push(newItem);
@@ -102,21 +109,17 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
     }
 
     public renderMenu() {
-
-        const {position} = this.props;
-        const {open} = this.state;
+        const { position } = this.props;
+        const { open } = this.state;
 
         if (open) {
-            return <div className = {`menu ${position}`}>
-                {this.renderItems()}
-            </div>;
+            return <div className={`menu ${position}`}>{this.renderItems()}</div>;
         }
     }
 
     public render() {
-
-        const {button} = this.props;
-        const {open} = this.state;
+        const { button } = this.props;
+        const { open } = this.state;
 
         // Clone the trigger button passed in and add an onClick listener
         const trigger = React.cloneElement(button, {
@@ -125,10 +128,12 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
             active: open
         });
 
-        return <div ref={this.menuRef} className = 'button-menu'>
-            { trigger }
-            { this.renderMenu() }
-        </div>;
+        return (
+            <div ref={this.menuRef} className='button-menu'>
+                {trigger}
+                {this.renderMenu()}
+            </div>
+        );
     }
 }
 

package/src/components/button-menu/ButtonMenuItem.tsx

@@ -1,25 +1,26 @@
 import * as React from 'react';
 
 interface IButtonMenuItemProps {
-    label? : any;
-    onClick(e) : void;
-    active? : boolean;
+    label?: any;
+    onClick(e): void;
+    active?: boolean;
 }
 
 class ButtonMenuItem extends React.Component<IButtonMenuItemProps> {
-
     constructor(props) {
-
         super(props);
     }
 
     public render() {
-
-        const {label, active} = this.props;
-
-        return <div className = {`button-menu-item ${active ? 'active' : null} `} onClick = {(e) => this.props.onClick(e)}>
-            { label }
-        </div>;
+        const { label, active } = this.props;
+
+        return (
+            <div
+                className={`button-menu-item ${active ? 'active' : null} `}
+                onClick={(e) => this.props.onClick(e)}>
+                {label}
+            </div>
+        );
     }
 }
 

package/src/components/card/Card.stories.tsx

@@ -4,41 +4,27 @@ import TextField from '../text-field/TextField';
 import NumberField from '../number-field/NumberField';
 import Card from './Card';
 
-interface ICardProps {
-    collapsable? : boolean;
-    open? : boolean;
-    style? : string;
-    title : string;
-    onToggle ? : (toggle : boolean) => any;
-}
-
-interface ICardState {
-    open : boolean;
-}
-
 export default {
     title: 'Card',
     component: Card
 };
 
 export const defaultCard = () => (
-    <Card
-    title = 'Card'
-    open = {true}
-    collapsable = {false}>
+    <Card title='Card' open={true} collapsable={false}>
         <TextField
-            label = {'TextField'}
-            tooltip = {'TOOLTIP'}
-            value = {'name'}
-            width = '33%'
-            onChange = {action('CLICKED')}/>
+            label={'TextField'}
+            tooltip={'TOOLTIP'}
+            value={'name'}
+            width='33%'
+            onChange={action('CLICKED')}
+        />
         <NumberField
-            label = {'NumberField'}
-            tooltip = {'TOOLTIP'}
-            width = '33%'
-            readOnly = {true}
-            value = {1}
-            onChange = {action('CLICKED')}
-            />
+            label={'NumberField'}
+            tooltip={'TOOLTIP'}
+            width='33%'
+            readOnly={true}
+            value={1}
+            onChange={action('CLICKED')}
+        />
     </Card>
 );

package/src/components/card/Card.tsx

@@ -3,30 +3,28 @@ import Button from '../button/Button';
 import { ICON_CARET_UP, ICON_CARET_DOWN } from '../../constants/icons';
 
 interface ICardProps {
-    children? : any;
-    collapsable? : boolean;
-    open? : boolean;
-    style? : string;
-    title : string | JSX.Element;
-    onOpen? : (e : any) => any;
-    onClose? : (e : any) => any;
-    onToggle ? : (toggle : boolean) => any;
+    children?: any;
+    collapsable?: boolean;
+    open?: boolean;
+    style?: string;
+    title: string | JSX.Element;
+    onOpen?: (e: any) => any;
+    onClose?: (e: any) => any;
+    onToggle?: (toggle: boolean) => any;
 }
 
 interface ICardState {
-    open : boolean;
+    open: boolean;
 }
 
 class Card extends React.PureComponent<ICardProps, ICardState> {
-
-    private evtHandlers : any;
+    private evtHandlers: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
-            open : props.open
+            open: props.open
         };
 
         this.evtHandlers = {
@@ -35,33 +33,33 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
     }
 
     private toggleOpen(e) {
-
         e.persist();
         e.preventDefault();
 
-        const { collapsable, onOpen, onClose} = this.props;
+        const { collapsable, onOpen, onClose } = this.props;
 
         if (collapsable) {
             if (typeof this.props.onToggle === 'function') {
                 this.props.onToggle(!this.state.open);
             }
 
-            this.setState({
-                open: !this.state.open
-            }, () => {
-                if (this.state.open && onOpen) {
-                    onOpen(e);
-                } else if (!this.state.open && onClose) {
-                    onClose(e);
+            this.setState(
+                {
+                    open: !this.state.open
+                },
+                () => {
+                    if (this.state.open && onOpen) {
+                        onOpen(e);
+                    } else if (!this.state.open && onClose) {
+                        onClose(e);
+                    }
                 }
-            });
+            );
         }
-
     }
 
     public componentDidUpdate(prevProps) {
-
-        const {open, collapsable} = this.props;
+        const { open } = this.props;
 
         if (prevProps.open !== open) {
             this.setState({
@@ -71,8 +69,7 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
     }
 
     public renderTitle(style) {
-
-        const {title} = this.props;
+        const { title } = this.props;
         if (style === 'small') {
             return <p>{title}</p>;
         } else if (style === 'large') {
@@ -83,51 +80,45 @@ class Card extends React.PureComponent<ICardProps, ICardState> {
     }
 
     public renderContent() {
-
-        const {open} = this.state;
+        const { open } = this.state;
 
         if (open) {
-            return <div className = 'card-content'>
-                {this.props.children}
-            </div>;
+            return <div className='card-content'>{this.props.children}</div>;
         }
     }
 
     public render() {
-
-        const {collapsable, title, style} = this.props;
-        const {open} = this.state;
-
-        const collapsableClass = (collapsable) ? 'collapsable' : '';
-        const openClass = (!open && collapsable) ? 'closed' : '';
-        const styleClass = (style) ? style : 'default';
-
-        return <div className = {`card ${openClass} ${collapsableClass} ${styleClass}`}>
-
-            <div className = 'card-header' onClick = {this.evtHandlers.toggleOpen}>
-                { this.renderTitle(styleClass) }
-                { this.renderButtons() }
+        const { collapsable, style } = this.props;
+        const { open } = this.state;
+
+        const collapsableClass = collapsable ? 'collapsable' : '';
+        const openClass = !open && collapsable ? 'closed' : '';
+        const styleClass = style ? style : 'default';
+
+        return (
+            <div className={`card ${openClass} ${collapsableClass} ${styleClass}`}>
+                <div className='card-header' onClick={this.evtHandlers.toggleOpen}>
+                    {this.renderTitle(styleClass)}
+                    {this.renderButtons()}
+                </div>
+                {this.renderContent()}
             </div>
-            {this.renderContent()}
-        </div>;
+        );
     }
 
     public renderButtons() {
-
-        const {collapsable} = this.props;
-        const {open} = this.state;
-        const buttonIcon = (open)
-            ? ICON_CARET_UP
-            : ICON_CARET_DOWN;
+        const { collapsable } = this.props;
+        const { open } = this.state;
+        const buttonIcon = open ? ICON_CARET_UP : ICON_CARET_DOWN;
 
         if (collapsable) {
-            return <div className = 'header-buttons'>
-                <Button
-                    style = 'subtle'
-                    onClick = {this.evtHandlers.toggleOpen}>
-                    {buttonIcon}
-                </Button>
-            </div>;
+            return (
+                <div className='header-buttons'>
+                    <Button style='subtle' onClick={this.evtHandlers.toggleOpen}>
+                        {buttonIcon}
+                    </Button>
+                </div>
+            );
         }
     }
 }