@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/text-field/TextField.tsx

@@ -2,51 +2,56 @@ import * as React from 'react';
 import hotkeys from 'hotkeys-js';
 import Button from '../button/Button';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
-import { IToolTipConfig} from '../Tooltip';
+import { IToolTipConfig } from '../Tooltip';
 import { filterHotkeys } from '../../Util';
-import { ICON_CHECK, ICON_EDIT, ICON_SEARCH,
-    ICON_PLUS, ICON_CLIPBOARD, ICON_TIMES} from '../../constants/icons';
+import {
+    ICON_CHECK,
+    ICON_EDIT,
+    ICON_SEARCH,
+    ICON_PLUS,
+    ICON_CLIPBOARD,
+    ICON_TIMES
+} from '../../constants/icons';
 
 import Autosuggest from 'react-autosuggest';
 
 interface ITextFieldProps {
-    buttons? : any;
-    controlled? : boolean;
-    loading? : boolean;
-    disabled? : boolean;
-    submittable? : boolean;
-    focusOnMount ? : boolean;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value? : string;
-    tooltip ? : IToolTipConfig | string;
-    showCopy? : boolean;
-    width? : string | number;
-    submittableType? : 'search' | 'add' | 'check';
-    suggestions? : string[];
-    hideButtons? : boolean;
-    onBlur?(e) : void;
-    onChange?(e) : void;
-    onFocus?(e) : void;
-    onNotification?(e) : void;
-    onError?(e) : void;
-    onSubmit?(e) : void;
-    doSubmit? : (v : string) => any;
-    pattern? : RegExp;
-    info? : string;
-    labelPosition? : string;
+    buttons?: any;
+    controlled?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    submittable?: boolean;
+    focusOnMount?: boolean;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value?: string;
+    tooltip?: IToolTipConfig | string;
+    showCopy?: boolean;
+    width?: string | number;
+    submittableType?: 'search' | 'add' | 'check';
+    suggestions?: string[];
+    hideButtons?: boolean;
+    onBlur?(e): void;
+    onChange?(e): void;
+    onFocus?(e): void;
+    onNotification?(e): void;
+    onError?(e): void;
+    onSubmit?(e): void;
+    doSubmit?: (v: string) => any;
+    pattern?: RegExp;
+    info?: string;
+    labelPosition?: string;
 }
 
 interface ITextFieldState {
-    editing : boolean;
-    suggestions : string[];
-    internalValue : string;
+    editing: boolean;
+    suggestions: string[];
+    internalValue: string;
 }
 
 class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
-
-    private inputRef : any;
+    private inputRef: any;
 
     private evtHandlers = {
         submittable: () => this.forceSubmit(),
@@ -67,7 +72,9 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         super(props);
 
         if (this.props.controlled && this.props.submittable) {
-            throw new Error('Actionable TextField(s) must be one of either: controlled or submittable.');
+            throw new Error(
+                'Actionable TextField(s) must be one of either: controlled or submittable.'
+            );
         }
 
         this.state = {
@@ -88,7 +95,6 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public componentWillUnmount() {
-
         if (this.props.submittable) {
             hotkeys.unbind('enter', this.evtHandlers.submittable);
             hotkeys.unbind('esc', this.evtHandlers.clear);
@@ -98,10 +104,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         }
     }
 
-    public componentDidUpdate = (prevProps, prevState) : void => {
-
+    public componentDidUpdate = (prevProps, prevState): void => {
         if (this.props.controlled || this.props.submittable) {
-
             if (prevProps.value !== this.props.value) {
                 this.setState({
                     internalValue: this.props.value
@@ -114,19 +118,20 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
                 });
             }
         }
-    }
+    };
 
     public setEditing(editing) {
-
-        this.setState({
-            editing
-        }, () => {
-            this.inputRef.current.focus();
-        });
+        this.setState(
+            {
+                editing
+            },
+            () => {
+                this.inputRef.current.focus();
+            }
+        );
     }
 
     private blur(e) {
-
         if (this.props.onBlur) {
             this.props.onBlur(e);
         }
@@ -141,7 +146,6 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     private focus(e) {
-
         if (this.props.onFocus) {
             this.props.onFocus(e);
         }
@@ -156,31 +160,31 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     private cancelEdit() {
-
         this.setState({
             editing: false,
-            internalValue : this.props.value
+            internalValue: this.props.value
         });
     }
 
     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.');
+        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 getValue() {
-        const {controlled, submittable, value} = this.props;
-        const {internalValue} = this.state;
+        const { controlled, submittable, value } = this.props;
+        const { internalValue } = this.state;
 
         if (controlled || submittable) {
             return internalValue;
@@ -190,102 +194,112 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     private onChange(e, v?) {
-
-        const {pattern} = this.props;
-        let val = (v) ? v.newValue : e.target.value;
+        const { pattern } = this.props;
+        let val = v ? v.newValue : e.target.value;
 
         if (!this.props.controlled && !this.props.submittable) {
-
             if (pattern) {
                 if (!pattern.test(val)) {
                     return;
                 }
             }
 
-            if (val === '') { val = null; }
+            if (val === '') {
+                val = null;
+            }
             this.props.onChange(val);
-
         } else {
-            this.setState({
-                internalValue: val
-            }, () => {
-                if (v) {
-                    if (v.method === 'click') {
-                        this.evtHandlers.submittable();
+            this.setState(
+                {
+                    internalValue: val
+                },
+                () => {
+                    if (v) {
+                        if (v.method === 'click') {
+                            this.evtHandlers.submittable();
+                        }
                     }
                 }
-            });
+            );
         }
     }
 
-    private forceSubmit = (clear : boolean = false) : void => {
-        const {internalValue} = this.state;
+    private forceSubmit = (clear: boolean = false): void => {
+        const { internalValue } = this.state;
 
         if (!clear) {
             this.props.doSubmit(internalValue);
 
             if (this.props.submittableType === 'add') {
-                this.setState({internalValue: ''});
+                this.setState({ internalValue: '' });
             }
         }
 
         if (clear) {
             this.props.doSubmit('');
-            this.setState({internalValue: ''});
+            this.setState({ internalValue: '' });
         }
-    }
+    };
 
     private toggleEditing(e) {
-
         e.preventDefault();
         e.stopPropagation();
 
-        const {editing, internalValue} = this.state;
-        const {value} = this.props;
+        const { editing, internalValue } = this.state;
+        const { value } = this.props;
 
         if (editing) {
-            this.setState({
-                editing: false
-            }, () => {
-
-                // only fire onSubmit if the value changed
-                if (internalValue !== value) {
-
-                    let val = this.state.internalValue;
-                    if (val === '') { val = null; }
-
-                    this.props.onSubmit(val);
+            this.setState(
+                {
+                    editing: false
+                },
+                () => {
+                    // only fire onSubmit if the value changed
+                    if (internalValue !== value) {
+                        let val = this.state.internalValue;
+                        if (val === '') {
+                            val = null;
+                        }
+
+                        this.props.onSubmit(val);
+                    }
                 }
-            });
+            );
         } else {
-            this.setState({
-                editing: true
-            }, () => {
-                const input = this.inputRef.current;
-                if (input) {
-                    input.focus();
+            this.setState(
+                {
+                    editing: true
+                },
+                () => {
+                    const input = this.inputRef.current;
+                    if (input) {
+                        input.focus();
+                    }
                 }
-            });
+            );
         }
     }
 
     private clearValue() {
-
-        this.setState({
-            internalValue: ''
-        }, () => {
-            this.props.doSubmit('');
-        });
+        this.setState(
+            {
+                internalValue: ''
+            },
+            () => {
+                this.props.doSubmit('');
+            }
+        );
     }
 
     private getSuggestions(value) {
-
         const inputValue = value.trim().toLowerCase();
         const inputLength = inputValue.length;
 
-        return inputLength === 0 ? [] : this.props.suggestions.filter((tag) =>
-           tag.toLowerCase().slice(0, inputLength) === inputValue
-        );
+        return inputLength === 0
+            ? []
+            : this.props.suggestions.filter(
+                  (tag) => tag.toLowerCase().slice(0, inputLength) === inputValue
+              );
     }
 
     private getSuggestionValue(suggestion) {
@@ -294,30 +308,28 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
 
     // Use your imagination to render suggestions.
     private renderSuggestion(suggestion) {
-        return <div className = 'suggestion'>
-            {suggestion}
-        </div>;
+        return <div className='suggestion'>{suggestion}</div>;
     }
 
-    private renderSubmittableIcon = () : JSX.Element => {
-        const {submittableType} = this.props;
+    private renderSubmittableIcon = (): JSX.Element => {
+        const { submittableType } = this.props;
 
         switch (submittableType) {
             case 'search':
-                return (ICON_SEARCH);
+                return ICON_SEARCH;
             case 'check':
-                return (ICON_CHECK);
+                return ICON_CHECK;
             case 'add':
-                return (ICON_PLUS);
+                return ICON_PLUS;
             default:
                 return null;
         }
-    }
+    };
 
     private renderButtons() {
-
-        const {controlled, submittable, readOnly, buttons, showCopy, submittableType, value, hideButtons} = this.props;
-        const {editing, internalValue} = this.state;
+        const { controlled, submittable, buttons, showCopy, submittableType, value, hideButtons } =
+            this.props;
+        const { editing } = this.state;
 
         let buttonArray;
         if (buttons) {
@@ -330,59 +342,62 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         } else {
             buttonArray = [];
         }
-        const tooltip = (submittableType === 'search') ? 'Search' : 'Confirm';
+        const tooltip = submittableType === 'search' ? 'Search' : 'Confirm';
 
         if (hideButtons) {
             return [];
         }
 
         if (controlled) {
-            const icon = (editing) ? ICON_CHECK : ICON_EDIT;
-            buttonArray.push(<Button
-                key = 'btn-edit'
-                style = 'subtle'
-                tooltip = 'Edit'
-                color = 'secondary'
-                onClick = {this.evtHandlers.toggleEditing}>
-                {icon}
-            </Button>);
+            const icon = editing ? ICON_CHECK : ICON_EDIT;
+            buttonArray.push(
+                <Button
+                    key='btn-edit'
+                    style='subtle'
+                    tooltip='Edit'
+                    color='secondary'
+                    onClick={this.evtHandlers.toggleEditing}>
+                    {icon}
+                </Button>
+            );
         }
 
         if (submittable) {
-            buttonArray.push((
+            buttonArray.push(
                 <Button
-                    key = 'btn-submit'
-                    style = 'subtle'
-                    tooltip = {tooltip}
-                    color = 'secondary'
-                    onClick = {this.evtHandlers.forceSubmit}>
-
+                    key='btn-submit'
+                    style='subtle'
+                    tooltip={tooltip}
+                    color='secondary'
+                    onClick={this.evtHandlers.forceSubmit}>
                     {this.renderSubmittableIcon()}
                 </Button>
-            ));
+            );
 
             if (value) {
-                buttonArray.push((
+                buttonArray.push(
                     <Button
-                        key = 'btn-clear'
-                        style = 'subtle'
-                        tooltip = 'Clear'
-                        onClick = {this.evtHandlers.clearValue}>
+                        key='btn-clear'
+                        style='subtle'
+                        tooltip='Clear'
+                        onClick={this.evtHandlers.clearValue}>
                         {ICON_TIMES}
                     </Button>
-                ));
+                );
             }
         }
 
         if (showCopy) {
-            buttonArray.push(<Button
-                key = 'btn-copy'
-                style = 'subtle'
-                color = 'primary'
-                tooltip = 'Copy to Clipboard'
-                onClick = {this.evtHandlers.copyToClipboard}>
-                {ICON_CLIPBOARD}
-            </Button>);
+            buttonArray.push(
+                <Button
+                    key='btn-copy'
+                    style='subtle'
+                    color='primary'
+                    tooltip='Copy to Clipboard'
+                    onClick={this.evtHandlers.copyToClipboard}>
+                    {ICON_CLIPBOARD}
+                </Button>
+            );
         }
 
         return buttonArray;
@@ -390,25 +405,24 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
 
     private onSuggestionsFetchRequested = ({ value }) => {
         this.setState({
-          suggestions: this.getSuggestions(value)
+            suggestions: this.getSuggestions(value)
         });
-      }
+    };
 
-      private onSuggestionsClearRequested = () => {
+    private onSuggestionsClearRequested = () => {
         this.setState({
-          suggestions: []
+            suggestions: []
         });
-      }
+    };
 
     private renderInput() {
+        const { placeholder, controlled, submittable, disabled, readOnly, loading } = this.props;
+        const { suggestions } = this.state;
+        const { editing } = this.state;
+        const disable = (controlled && !editing) || disabled;
+        const inputClass = controlled || submittable ? 'controlled-input' : '';
 
-        const {placeholder, controlled, submittable, disabled, readOnly, loading} = this.props;
-        const {suggestions } = this.state;
-        const {editing} = this.state;
-        const disable = (controlled && !editing || disabled);
-        const inputClass = (controlled || submittable) ? 'controlled-input' : '';
-
-        const inputProps : any = {
+        const inputProps: any = {
             type: 'text',
             placeholder,
             value: this.getValue(),
@@ -420,39 +434,40 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
         };
 
         if (this.props.suggestions) {
-
             inputProps.onChange = (e, v) => this.onChange(e, v);
 
-            return <Autosuggest
-                suggestions={suggestions}
-                onSuggestionsFetchRequested={this.evtHandlers.onSuggestionsFetchRequested}
-                onSuggestionsClearRequested={this.evtHandlers.onSuggestionsClearRequested}
-                getSuggestionValue={this.evtHandlers.getSuggestionValue}
-                renderSuggestion={this.evtHandlers.renderSuggestion}
-                inputProps={inputProps}
-              />;
+            return (
+                <Autosuggest
+                    suggestions={suggestions}
+                    onSuggestionsFetchRequested={this.evtHandlers.onSuggestionsFetchRequested}
+                    onSuggestionsClearRequested={this.evtHandlers.onSuggestionsClearRequested}
+                    getSuggestionValue={this.evtHandlers.getSuggestionValue}
+                    renderSuggestion={this.evtHandlers.renderSuggestion}
+                    inputProps={inputProps}
+                />
+            );
         } else {
-
             inputProps.onChange = (e) => this.onChange(e);
 
-            return <input className = {`${inputClass}`} {...inputProps}/>;
+            return <input className={`${inputClass}`} {...inputProps} />;
         }
     }
 
     public render() {
-
-        const {label, width, tooltip, info, labelPosition} = this.props;
-
-        return <FieldWrapper
-                    customClass = 'text-field'
-                    label = {label}
-                    buttons = { this.renderButtons() }
-                    tooltip = {tooltip}
-                    info = {info}
-                    labelPosition = {labelPosition}
-                    width = {width}>
-            {this.renderInput()}
-        </FieldWrapper>;
+        const { label, width, tooltip, info, labelPosition } = this.props;
+
+        return (
+            <FieldWrapper
+                customClass='text-field'
+                label={label}
+                buttons={this.renderButtons()}
+                tooltip={tooltip}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                {this.renderInput()}
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/toast-service/ToastService.tsx

@@ -5,55 +5,53 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
 
 export default class ToastService {
-    private static readonly DEFAULT_TOAST_CONFIG : any = {
+    private static readonly DEFAULT_TOAST_CONFIG: any = {
         hideAfter: 3,
         position: 'bottom-right'
     };
 
-    private static INFO_STYLE : any = {
+    private static INFO_STYLE: any = {
         bar: {
             size: '2px',
             style: 'solid',
             color: '#56B05E'
         },
-        renderIcon: () => (<FontAwesomeIcon icon = {faInfoCircle} color = '#56B05E' />)
+        renderIcon: () => <FontAwesomeIcon icon={faInfoCircle} color='#56B05E' />
     };
 
-    private static ERROR_STYLE : any = {
+    private static ERROR_STYLE: any = {
         bar: {
             size: '2px',
             style: 'solid',
             color: '#AF1126'
         },
-        renderIcon: () => (<FontAwesomeIcon icon = {faExclamationTriangle} color = '#AF1126' />)
+        renderIcon: () => <FontAwesomeIcon icon={faExclamationTriangle} color='#AF1126' />
     };
 
-    public static emit = (type : string, copy : string) : void => {
+    public static emit = (type: string, copy: string): void => {
         switch (type) {
             case 'info':
-                cogoToast.info(
-                    copy,
-                    {
+                cogoToast
+                    .info(copy, {
                         ...ToastService.DEFAULT_TOAST_CONFIG,
                         ...ToastService.INFO_STYLE
-                    }
-                ).catch((e)=>{
-                    console.error(e);
-                })
+                    })
+                    .catch((e) => {
+                        console.error(e);
+                    });
                 return;
             case 'error':
-                cogoToast.error(
-                    copy,
-                    {
+                cogoToast
+                    .error(copy, {
                         ...ToastService.DEFAULT_TOAST_CONFIG,
                         ...ToastService.ERROR_STYLE
-                    }
-                ).catch((e)=>{
-                    console.error(e);
-                })
+                    })
+                    .catch((e) => {
+                        console.error(e);
+                    });
                 return;
             default:
                 return;
         }
-    }
+    };
 }