@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/select-field/SelectField.tsx

@@ -1,72 +1,89 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import {ICON_CARET_DOWN, ICON_CLIPBOARD} from '../../constants/icons';
+import { ICON_CARET_DOWN, ICON_CLIPBOARD } from '../../constants/icons';
 import Button from '../button/Button';
 
-interface ISelectOption {
-    label : string;
-    value : string;
-}
-
 interface ISelectFieldProps {
-    buttons? : any;
-    label? : string;
-    selectRef? : any;
-    options : any;
-    disable ? : boolean;
-    disableFirst ? : boolean;
-    tooltip ? : IToolTipConfig | string;
-    placeholder? : string;
-    value : any;
-    width? : string | number;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
-    showCopy? : boolean;
-    onNotification?(e) : void;
-    onError?(e) : void;
+    buttons?: any;
+    label?: string;
+    selectRef?: any;
+    options: any;
+    disable?: boolean;
+    disableFirst?: boolean;
+    tooltip?: IToolTipConfig | string;
+    placeholder?: string;
+    value: any;
+    width?: string | number;
+    onChange(e): void;
+    info?: string;
+    labelPosition?: string;
+    showCopy?: boolean;
+    onNotification?(e): void;
+    onError?(e): void;
 }
 
 class SelectField extends React.PureComponent<ISelectFieldProps> {
     private evtHandlers = {
-        copyToClipboard: (e) => this.copyToClipboard(e),
+        copyToClipboard: (e) => this.copyToClipboard(e)
     };
-    constructor(props) {
 
+    constructor(props) {
         super(props);
     }
-    private copyToClipboard(e) {
-
-        const {onNotification, onError} = this.props;
-        navigator.clipboard.writeText(this.props.value).then(() => {
 
-            if (onNotification) {
-                onNotification('Copied to clipboard!');
-            }
-        }, () => {
-            if (onError) {
-                onError('Error copying to clipboard.');
+    private copyToClipboard(e) {
+        const { onNotification, onError } = this.props;
+        navigator.clipboard.writeText(this.props.value).then(
+            () => {
+                if (onNotification) {
+                    onNotification('Copied to clipboard!');
+                }
+            },
+            () => {
+                if (onError) {
+                    onError('Error copying to clipboard.');
+                }
             }
-        });
+        );
     }
-    private onChange(e) {
 
+    private onChange(e) {
         // handle selects converting booleans to strings
         let val = e.target.value;
-        if (val === 'true') { val = true; }
-        if (val === 'false') { val = false; }
+        if (val === 'true') {
+            val = true;
+        }
+        if (val === 'false') {
+            val = false;
+        }
 
         this.props.onChange(val);
     }
 
     public render() {
-
-        const {label, showCopy, options, value, width, buttons, selectRef, disable, tooltip, info, labelPosition, disableFirst} = this.props;
+        const {
+            label,
+            showCopy,
+            options,
+            value,
+            width,
+            buttons,
+            selectRef,
+            disable,
+            tooltip,
+            info,
+            labelPosition,
+            disableFirst
+        } = this.props;
         let opts = [];
 
-        const selectValue = (value === null || value === undefined) ? '' : value;
-        const caret = <div key = 'caret' className = 'caret'>{ICON_CARET_DOWN}</div>;
+        const selectValue = value === null || value === undefined ? '' : value;
+        const caret = (
+            <div key='caret' className='caret'>
+                {ICON_CARET_DOWN}
+            </div>
+        );
 
         let btns;
         if (buttons) {
@@ -79,37 +96,52 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
             btns = [caret];
         }
         if (showCopy) {
-            btns.push(<Button
-                key = 'btn-copy'
-                style = 'subtle'
-                color = 'primary'
-                tooltip = 'Copy to Clipboard'
-                onClick = {this.evtHandlers.copyToClipboard}>
-                {ICON_CLIPBOARD}
-            </Button>);
+            btns.push(
+                <Button
+                    key='btn-copy'
+                    style='subtle'
+                    color='primary'
+                    tooltip='Copy to Clipboard'
+                    onClick={this.evtHandlers.copyToClipboard}>
+                    {ICON_CLIPBOARD}
+                </Button>
+            );
         }
 
         if (options) {
-            opts = options.map((option , i) => {
-                const disabled = (i === 0 && disableFirst || (option.disabled !== undefined && option.disabled)) ? true : false;
-                const optionValue = (option.value !== undefined) ? option.value : option;
-                const optionLabel = (option.label !== undefined) ? option.label : option;
-                return <option disabled = {disabled} key = {`option-${optionValue}`} value = {optionValue}>{optionLabel}</option>;
+            opts = options.map((option, i) => {
+                const disabled =
+                    (i === 0 && disableFirst) || (option.disabled !== undefined && option.disabled)
+                        ? true
+                        : false;
+                const optionValue = option.value !== undefined ? option.value : option;
+                const optionLabel = option.label !== undefined ? option.label : option;
+                return (
+                    <option disabled={disabled} key={`option-${optionValue}`} value={optionValue}>
+                        {optionLabel}
+                    </option>
+                );
             });
         }
 
-        return <FieldWrapper
-            customClass = 'select-field'
-            label = {label}
-            tooltip = {tooltip}
-            buttons = {btns}
-            info = {info}
-            labelPosition = {labelPosition}
-            width = {width}>
-            <select value = {selectValue} onChange = {(e) => this.onChange(e)} ref = {selectRef} disabled = {disable}>
-                {opts}
-            </select>
-        </FieldWrapper>;
+        return (
+            <FieldWrapper
+                customClass='select-field'
+                label={label}
+                tooltip={tooltip}
+                buttons={btns}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <select
+                    value={selectValue}
+                    onChange={(e) => this.onChange(e)}
+                    ref={selectRef}
+                    disabled={disable}>
+                    {opts}
+                </select>
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/service-icon/ServiceIcon.tsx

@@ -16,40 +16,40 @@ import { faChartArea } from '@fortawesome/free-solid-svg-icons/faChartArea';
 import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
 
 interface IServiceIconProps {
-    iconName : string;
-    color? : string;
+    iconName: string;
+    color?: string;
 }
 
-const ServiceIcon : React.FC<IServiceIconProps> = (p : IServiceIconProps) => {
+const ServiceIcon: React.FC<IServiceIconProps> = (p: IServiceIconProps) => {
     switch (p.iconName) {
         case 'FaFilm':
-            return (<FontAwesomeIcon icon = {faFilm} color = {p.color} />);
+            return <FontAwesomeIcon icon={faFilm} color={p.color} />;
         case 'FaRegFileVideo':
-            return (<FontAwesomeIcon icon = {faFileVideo} color = {p.color} />);
+            return <FontAwesomeIcon icon={faFileVideo} color={p.color} />;
         case 'FaChartBar':
-            return (<FontAwesomeIcon icon = {faChartBar} color = {p.color} />);
+            return <FontAwesomeIcon icon={faChartBar} color={p.color} />;
         case 'FaGavel':
-            return (<FontAwesomeIcon icon = {faGavel} color = {p.color} />);
+            return <FontAwesomeIcon icon={faGavel} color={p.color} />;
         case 'FaDatabase':
-            return (<FontAwesomeIcon icon = {faDatabase} color = {p.color} />);
+            return <FontAwesomeIcon icon={faDatabase} color={p.color} />;
         case 'FaVideo':
-            return (<FontAwesomeIcon icon = {faVideo} color = {p.color} />);
+            return <FontAwesomeIcon icon={faVideo} color={p.color} />;
         case 'FaUsersCog':
-            return (<FontAwesomeIcon icon = {faUsersCog} color = {p.color} />);
+            return <FontAwesomeIcon icon={faUsersCog} color={p.color} />;
         case 'FaPlayCircle':
-            return (<FontAwesomeIcon icon = {faPlayCircle} color = {p.color} />);
+            return <FontAwesomeIcon icon={faPlayCircle} color={p.color} />;
         case 'FaUserLock':
-            return (<FontAwesomeIcon icon = {faUserLock} color = {p.color} />);
+            return <FontAwesomeIcon icon={faUserLock} color={p.color} />;
         case 'FaSiteMap':
-            return (<FontAwesomeIcon icon = {faSitemap} color = {p.color} />);
+            return <FontAwesomeIcon icon={faSitemap} color={p.color} />;
         case 'FaFileAlt':
-            return (<FontAwesomeIcon icon = {faFileAlt} color = {p.color} />);
+            return <FontAwesomeIcon icon={faFileAlt} color={p.color} />;
         case 'FaChartArea':
-            return (<FontAwesomeIcon icon = {faChartArea} color = {p.color} />);
+            return <FontAwesomeIcon icon={faChartArea} color={p.color} />;
         case 'FaCogs':
-            return (<FontAwesomeIcon icon = {faCogs} />);
+            return <FontAwesomeIcon icon={faCogs} />;
         case 'FaJsSquare':
-            return (<FontAwesomeIcon icon = {faJsSquare} />);
+            return <FontAwesomeIcon icon={faJsSquare} />;
         default:
             return null;
     }

package/src/components/shortcut-menu/ShortcutMenu.stories.tsx

@@ -14,6 +14,4 @@ const shortcuts = {
     'Shift + R': 'Refresh current page'
 };
 
-export const defaultShortcutMenu = () => (
-    <ShortcutMenu shortcutCopyMap = {shortcuts} />
-);
+export const defaultShortcutMenu = () => <ShortcutMenu shortcutCopyMap={shortcuts} />;

package/src/components/shortcut-menu/ShortcutMenu.tsx

@@ -2,30 +2,29 @@ import * as React from 'react';
 import HRule from '../h-rule/HRule';
 
 export interface IShortcutMenu {
-    shortcutCopyMap : any;
-    heading? : string;
+    shortcutCopyMap: any;
+    heading?: string;
 }
 
-export const ShortcutMenu : React.FC<IShortcutMenu> = ({shortcutCopyMap, heading}) => {
-
-    const h = (heading) ? <>
-        <h3>{heading}</h3>
-        <HRule/>
-    </> : null;
+export const ShortcutMenu: React.FC<IShortcutMenu> = ({ shortcutCopyMap, heading }) => {
+    const h = heading ? (
+        <>
+            <h3>{heading}</h3>
+            <HRule />
+        </>
+    ) : null;
 
     return (
-        <div className = 'shortcuts-menu'>
+        <div className='shortcuts-menu'>
             {h}
             <table>
                 <tbody>
-                    {
-                        (Object.keys(shortcutCopyMap).map((key : string) => (
-                            <tr className = 'shortcut' key = {key}>
-                                <td className = 'hotkey-cell'>{key}</td>
-                                <td className = 'shortcut-desc'>{shortcutCopyMap[key]}</td>
-                            </tr>
-                        )))
-                    }
+                    {Object.keys(shortcutCopyMap).map((key: string) => (
+                        <tr className='shortcut' key={key}>
+                            <td className='hotkey-cell'>{key}</td>
+                            <td className='shortcut-desc'>{shortcutCopyMap[key]}</td>
+                        </tr>
+                    ))}
                 </tbody>
             </table>
         </div>

package/src/components/slider-field/SliderField.stories.tsx

@@ -1,30 +1,11 @@
 import * as React from 'react';
 import SliderField from './SliderField';
-import { IToolTipConfig } from '../Tooltip';
 
 export default {
     title: 'SliderField',
     component: SliderField
 };
 
-interface ISliderFieldProps {
-    label? : string;
-    value : number;
-    width? : string | number;
-    min : number;
-    max : number;
-    step : number;
-    tooltip? : IToolTipConfig | string;
-    defaultValue : number;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
-}
-
-interface ISliderFieldState {
-    inputValue : any;
-}
-
 export const defaultSliderField = () => {
     const [sliderValue, setSliderValue] = React.useState(5);
 
@@ -33,15 +14,15 @@ export const defaultSliderField = () => {
     };
 
     return (
-        <div style={{width: '50%'}}>
+        <div style={{ width: '50%' }}>
             <SliderField
-                label = {'Slider Field'}
-                min = {0}
-                max = {50}
-                step = {1}
-                value = {sliderValue}
-                defaultValue = {0}
-                onChange = {handleChange}
+                label={'Slider Field'}
+                min={0}
+                max={50}
+                step={1}
+                value={sliderValue}
+                defaultValue={0}
+                onChange={handleChange}
             />
         </div>
     );

package/src/components/slider-field/SliderField.tsx

@@ -3,29 +3,27 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
 interface ISliderFieldProps {
-    label? : string;
-    value : number;
-    width? : string | number;
-    min : number;
-    max : number;
-    step : number;
-    tooltip? : IToolTipConfig | string;
-    defaultValue : number;
-    onChange(e) : void;
-    info? : string;
-    labelPosition? : string;
+    label?: string;
+    value: number;
+    width?: string | number;
+    min: number;
+    max: number;
+    step: number;
+    tooltip?: IToolTipConfig | string;
+    defaultValue: number;
+    onChange(e): void;
+    info?: string;
+    labelPosition?: string;
 }
 
 interface ISliderFieldState {
-    tempValue : number;
+    tempValue: number;
 }
 
 class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldState> {
-
-    private updateTimeout : any;
+    private updateTimeout: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
@@ -34,37 +32,36 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
     }
 
     public componentWillUnmount() {
-
         clearTimeout(this.updateTimeout);
     }
 
     private updateValue(val) {
-
         this.props.onChange(val);
     }
 
     private rangeInputChange(e) {
-
         const inputVal = e.target.value;
         const val = parseFloat(inputVal);
 
         clearTimeout(this.updateTimeout);
 
-        this.setState({
-            tempValue: val
-        }, () => {
-            this.updateTimeout = setTimeout(() => {
-                this.updateValue(val);
-                this.setState({tempValue: null});
-            }, 100);
-        });
+        this.setState(
+            {
+                tempValue: val
+            },
+            () => {
+                this.updateTimeout = setTimeout(() => {
+                    this.updateValue(val);
+                    this.setState({ tempValue: null });
+                }, 100);
+            }
+        );
     }
 
     private numberInputChange(e) {
-
         const { min, max } = this.props;
         let inputValue = e.target.value;
-        inputValue  = (inputValue === '') ? 0 : parseFloat(inputValue);
+        inputValue = inputValue === '' ? 0 : parseFloat(inputValue);
 
         if (inputValue >= min && inputValue <= max) {
             this.updateValue(inputValue);
@@ -72,33 +69,42 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
     }
 
     public render() {
-
-        const {label, width, min, max, step, defaultValue, value, tooltip, info, labelPosition} = this.props;
+        const { label, width, min, max, step, defaultValue, value, tooltip, info, labelPosition } =
+            this.props;
         const { tempValue } = this.state;
 
-        const val = (tempValue !== null) ? tempValue : (value === null || value === undefined) ? defaultValue : value;
-
-        return <FieldWrapper
-            customClass = 'slider-field'
-            label = {label}
-            tooltip = {tooltip}
-            info = {info}
-            labelPosition = {labelPosition}
-            width = {width}>
-            <input
-                onChange = {(e) => this.rangeInputChange(e)}
-                type= 'range'
-                min={ min }
-                max= { max }
-                value = {val}
-                step= { step }/>
-
-            <input
-                className = 'val'
-                onChange = {(e) => this.numberInputChange(e)}
-                type = 'number'
-                value = {val} />
-        </FieldWrapper>;
+        const val =
+            tempValue !== null
+                ? tempValue
+                : value === null || value === undefined
+                ? defaultValue
+                : value;
+
+        return (
+            <FieldWrapper
+                customClass='slider-field'
+                label={label}
+                tooltip={tooltip}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <input
+                    onChange={(e) => this.rangeInputChange(e)}
+                    type='range'
+                    min={min}
+                    max={max}
+                    value={val}
+                    step={step}
+                />
+
+                <input
+                    className='val'
+                    onChange={(e) => this.numberInputChange(e)}
+                    type='number'
+                    value={val}
+                />
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/spinner/Spinner.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons/faCircleNotch';
 import { ICON_CIRCLE_NOTCH } from '../../constants/icons';
 
-const Spinner : React.FC = () => {
+const Spinner: React.FC = () => {
     return (
-        <div className = 'spinner'>
-            <div className = 'icon'>{ICON_CIRCLE_NOTCH}</div>
+        <div className='spinner'>
+            <div className='icon'>{ICON_CIRCLE_NOTCH}</div>
         </div>
     );
 };