@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/list-field/ListField.stories.tsx

@@ -1,40 +1,21 @@
 import * as React from 'react';
 import ListField from './ListField';
 import { action } from '@storybook/addon-actions';
-import { IToolTipConfig } from '../Tooltip';
 
 export default {
     title: 'ListFIeld',
     component: ListField
 };
 
-interface IListFieldProps {
-    buttons? : any;
-    disabled? : boolean;
-    label? : string;
-    options : any;
-    placeholder? : string;
-    tooltip ? : IToolTipConfig | string;
-    tooltipAdd? : IToolTipConfig | string;
-    width? : string | number;
-    onChange(e) : void;
-    onError(e) : void;
-    info? : string;
-    labelPosition? : string;
-}
-
-interface IListFieldState {
-    textInputValue : string;
-}
-
 export const defaultListFIeld = () => (
-    <div style={{width: '25%'}}>
+    <div style={{ width: '25%' }}>
         <ListField
-            options = {['Option1', 'Option2']}
-            label = {'ListField'}
-            tooltip = {'TOOLTIP'}
-            tooltipAdd = {'TOOLTIP ADD'}
-            onError = {action('ERROR')}
-            onChange = {action('CHANGE')}/>
+            options={['Option1', 'Option2']}
+            label={'ListField'}
+            tooltip={'TOOLTIP'}
+            tooltipAdd={'TOOLTIP ADD'}
+            onError={action('ERROR')}
+            onChange={action('CHANGE')}
+        />
     </div>
 );

package/src/components/list-field/ListField.tsx

@@ -5,36 +5,34 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import ControlledList from '../controlled-list/ControlledList';
 import { IToolTipConfig } from '../Tooltip';
 import { filterHotkeys } from '../../Util';
-import {ICON_PLUS} from '../../constants/icons';
+import { ICON_PLUS } from '../../constants/icons';
 
 interface IListFieldProps {
-    buttons? : any;
-    disabled? : boolean;
-    label? : string;
-    options : any;
-    placeholder? : string;
-    tooltip ? : IToolTipConfig | string;
-    tooltipAdd? : IToolTipConfig | string;
-    width? : string | number;
-    onChange(e) : void;
-    onError(e) : void;
-    onFocus? : () => void;
-    onBlur? : () => void;
-    info? : string;
-    labelPosition? : string;
+    buttons?: any;
+    disabled?: boolean;
+    label?: string;
+    options: any;
+    placeholder?: string;
+    tooltip?: IToolTipConfig | string;
+    tooltipAdd?: IToolTipConfig | string;
+    width?: string | number;
+    onChange(e): void;
+    onError(e): void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    info?: string;
+    labelPosition?: string;
 }
 
 interface IListFieldState {
-    textInputValue : string;
+    textInputValue: string;
 }
 
 class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
-
-    private inputRef : any;
-    private submitHandler : any;
+    private inputRef: any;
+    private submitHandler: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
@@ -48,7 +46,6 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     }
 
     private deleteOption(index) {
-
         const items = [...this.props.options];
         items.splice(index, 1);
 
@@ -56,12 +53,10 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     }
 
     public componentWillUnmount() {
-
         hotkeys.unbind('enter', this.submitHandler);
     }
 
     private inputBlur(e) {
-
         hotkeys.unbind('enter', this.submitHandler);
         if (this.props.onBlur) {
             this.props.onBlur();
@@ -69,14 +64,12 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     }
 
     private inputChanged(e) {
-
         this.setState({
             textInputValue: e.target.value
         });
     }
 
     private inputFocus(e) {
-
         hotkeys('enter', this.submitHandler);
         if (this.props.onFocus) {
             this.props.onFocus();
@@ -84,12 +77,10 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     }
 
     private submitOption() {
-
-        const {textInputValue} = this.state;
-        const {onError} = this.props;
+        const { textInputValue } = this.state;
+        const { onError } = this.props;
 
         if (textInputValue !== '') {
-
             let items;
             if (this.props.options) {
                 items = [...this.props.options];
@@ -98,20 +89,20 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
             }
 
             if (items.indexOf(textInputValue) === -1) {
-
                 items.push(textInputValue);
                 this.props.onChange(items);
 
-                this.setState({
-                    textInputValue: ''
-                }, () => {
-
-                    const input = this.inputRef.current;
-                    if (input) {
-                        input.focus();
+                this.setState(
+                    {
+                        textInputValue: ''
+                    },
+                    () => {
+                        const input = this.inputRef.current;
+                        if (input) {
+                            input.focus();
+                        }
                     }
-                });
-
+                );
             } else {
                 if (onError) {
                     this.props.onError(`"${textInputValue}" already exists in the list.`);
@@ -125,50 +116,53 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     }
 
     public render() {
-
-        const {label, options, placeholder, disabled, width, tooltip, tooltipAdd, info, labelPosition} = this.props;
-        const {textInputValue} = this.state;
-
-        return <FieldWrapper
-            customClass = 'list-field'
-            label = {label}
-            tooltip = {tooltip}
-            buttons = {this.renderButtons()}
-            info = {info}
-            labelPosition = {labelPosition}
-            width = {width}>
-
-            <input
-                type = 'text'
-                placeholder = {placeholder}
-                value = {textInputValue}
-                ref = {this.inputRef}
-                disabled = {disabled}
-                onChange = {(e) => this.inputChanged(e)}
-                onFocus = {(e) => this.inputFocus(e)}
-                onBlur = {(e) => this.inputBlur(e)} />
-
-            <ControlledList
-                items = {options}
-                removable = {true}
-                onRemove = {(i) => this.deleteOption(i)}/>
-
-        </FieldWrapper>;
+        const { label, options, placeholder, disabled, width, tooltip, info, labelPosition } =
+            this.props;
+        const { textInputValue } = this.state;
+
+        return (
+            <FieldWrapper
+                customClass='list-field'
+                label={label}
+                tooltip={tooltip}
+                buttons={this.renderButtons()}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <input
+                    type='text'
+                    placeholder={placeholder}
+                    value={textInputValue}
+                    ref={this.inputRef}
+                    disabled={disabled}
+                    onChange={(e) => this.inputChanged(e)}
+                    onFocus={(e) => this.inputFocus(e)}
+                    onBlur={(e) => this.inputBlur(e)}
+                />
+
+                <ControlledList
+                    items={options}
+                    removable={true}
+                    onRemove={(i) => this.deleteOption(i)}
+                />
+            </FieldWrapper>
+        );
     }
 
     public renderButtons() {
-
-        const {buttons, tooltipAdd} = this.props;
-        const buttonArray = (buttons) ? [...buttons] : [];
-
-        buttonArray.push(<Button
-            key = 'btn-submit'
-            style = 'subtle'
-            tooltip = {tooltipAdd}
-            color = 'primary'
-            onClick = {this.submitHandler}>
-            {ICON_PLUS}
-        </Button>);
+        const { buttons, tooltipAdd } = this.props;
+        const buttonArray = buttons ? [...buttons] : [];
+
+        buttonArray.push(
+            <Button
+                key='btn-submit'
+                style='subtle'
+                tooltip={tooltipAdd}
+                color='primary'
+                onClick={this.submitHandler}>
+                {ICON_PLUS}
+            </Button>
+        );
 
         return buttonArray;
     }

package/src/components/log-viewer/LogViewer.tsx

@@ -1,31 +1,28 @@
 import * as React from 'react';
 import AnsiUp from 'ansi_up';
-import { fitToContainer } from '../../Util';
-import { previewer as copy} from '../../constants/copy';
+import { previewer as copy } from '../../constants/copy';
 import { IImposiumAPI } from '../../services/API';
 
 interface ILogViewerProps {
-    jobId : string;
-    onError?(e : string) : void;
-    api : IImposiumAPI;
+    jobId: string;
+    onError?(e: string): void;
+    api: IImposiumAPI;
 }
 
 interface ILogViewerState {
-    loading : boolean;
-    log : string;
+    loading: boolean;
+    log: string;
 }
 
 class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
-
-    private videoNode : any;
-    private ansi_up : any;
+    private videoNode: any;
+    private ansi_up: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
-            loading : true,
+            loading: true,
             log: ''
         };
 
@@ -34,61 +31,58 @@ class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
     }
 
     private getJobLogs() {
-
         const { api, onError, jobId } = this.props;
 
-        api.getJobLogUrl(this.props.jobId).then((resLogUrl) => {
-
-            const jobUrl = resLogUrl.signed_url;
-
-            api.getJobLog(jobUrl).then((log) => {
-
-                this.setState({
-                    loading: false,
-                    log
-                });
-
-            }).catch((e) => {
+        api.getJobLogUrl(this.props.jobId)
+            .then((resLogUrl) => {
+                const jobUrl = resLogUrl.signed_url;
+
+                api.getJobLog(jobUrl)
+                    .then((log) => {
+                        this.setState({
+                            loading: false,
+                            log
+                        });
+                    })
+                    .catch((e) => {
+                        if (onError) {
+                            onError(copy.logDownloadError.replace('[jobId]', jobId));
+                        }
+                        this.setState({
+                            loading: false,
+                            log: ''
+                        });
+                    });
+            })
+            .catch((e) => {
                 if (onError) {
-                    onError(copy.logDownloadError.replace('[jobId]', jobId));
+                    onError(copy.logURLError.replace('[jobId]', this.props.jobId));
                 }
                 this.setState({
                     loading: false,
                     log: ''
                 });
             });
-
-        }).catch((e) => {
-            if (onError) {
-                onError(copy.logURLError.replace('[jobId]', this.props.jobId));
-            }
-            this.setState({
-                loading: false,
-                log: ''
-            });
-        });
     }
 
     public componentDidMount() {
-
         if (this.props.jobId) {
             this.getJobLogs();
         }
     }
 
     public componentDidUpdate(prevProps) {
-
         if (prevProps.jobId !== this.props.jobId && this.props.jobId) {
             this.getJobLogs();
         }
     }
-    public render() {
 
+    public render() {
         const logHTML = this.ansi_up.ansi_to_html(this.state.log);
 
         return (
-            <div className = 'log-viewer'>
-                <div className = 'log-html' dangerouslySetInnerHTML={{__html: logHTML}}></div>
+            <div className='log-viewer'>
+                <div className='log-html' dangerouslySetInnerHTML={{ __html: logHTML }}></div>
             </div>
         );
     }

package/src/components/media-variable-field/MediaVariableField.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import FieldWrapper from '../field-wrapper/FieldWrapper';
 import Spinner from '../spinner/Spinner';
 import { VARIABLE_TYPES } from '../../constants/variables';
 import AssetsTableDropzone from '../assets/AssetsTableDropzone';
@@ -7,23 +6,24 @@ import Button from '../button/Button';
 import { ICON_TIMES } from '../../constants/icons';
 
 interface IMediaVariableFieldProps {
-    value : any;
-    type : string;
-    onChange(c) : void;
+    value: any;
+    type: string;
+    onChange(c): void;
 }
 
 interface IMediaVariableFieldState {
-    processing : boolean;
-    processedFile : any;
+    processing: boolean;
+    processedFile: any;
 }
 
-class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, IMediaVariableFieldState> {
-
-    private input : any;
-    private evtHandlers : any;
+class MediaVariableField extends React.PureComponent<
+    IMediaVariableFieldProps,
+    IMediaVariableFieldState
+> {
+    private input: any;
+    private evtHandlers: any;
 
     constructor(props) {
-
         super(props);
 
         this.input = React.createRef();
@@ -42,7 +42,6 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
     }
 
     private clearSelection(e) {
-
         e.preventDefault();
         e.stopPropagation();
 
@@ -50,7 +49,6 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
     }
 
     private fileUploaded(e) {
-
         const files = e.target.files;
         const file = files[0];
         if (file) {
@@ -59,50 +57,48 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
     }
 
     public componentDidUpdate(prevProps) {
-
         if (prevProps.value !== this.props.value) {
             this.checkFile();
         }
     }
 
     public componentDidMount() {
-
         this.checkFile();
     }
 
     private checkFile() {
-
         const { value } = this.props;
 
         if (value instanceof File) {
-
-            this.setState({
-                processing: true,
-                processedFile: null
-            }, () => {
-                const fr = new FileReader();
-                fr.onload = () => {
-                    this.setState({
-                        processing: false,
-                        processedFile: fr.result
-                    });
-                };
-                fr.readAsDataURL(value);
-            });
+            this.setState(
+                {
+                    processing: true,
+                    processedFile: null
+                },
+                () => {
+                    const fr = new FileReader();
+                    fr.onload = () => {
+                        this.setState({
+                            processing: false,
+                            processedFile: fr.result
+                        });
+                    };
+                    fr.readAsDataURL(value);
+                }
+            );
         }
     }
 
     private renderFields() {
-
         const { processing, processedFile } = this.state;
-        const {type, value} = this.props;
-        const isFile = (value instanceof File);
+        const { type, value } = this.props;
+        const isFile = value instanceof File;
         let src;
 
         if (value) {
             if (isFile) {
                 if (processing) {
-                    return <Spinner/>;
+                    return <Spinner />;
                 } else {
                     src = processedFile;
                 }
@@ -112,21 +108,19 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
 
             switch (type.toLowerCase()) {
                 case VARIABLE_TYPES.IMAGE:
-                    return <img className = 'default-preview' src = {src}/>;
+                    return <img className='default-preview' src={src} />;
                 case VARIABLE_TYPES.VIDEO:
-                    return <video className = 'default-preview' src = {src} controls/>;
+                    return <video className='default-preview' src={src} controls />;
                 case VARIABLE_TYPES.AUDIO:
-                    return <audio className = 'default-preview' src = {src} controls/>;
+                    return <audio className='default-preview' src={src} controls />;
             }
-
         } else {
             return null;
         }
     }
 
     private getInputFilter() {
-
-        const {type, value} = this.props;
+        const { type } = this.props;
 
         switch (type) {
             case VARIABLE_TYPES.IMAGE:
@@ -139,7 +133,6 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
     }
 
     public onClick() {
-
         const input = this.input.current;
         const { processing } = this.state;
 
@@ -149,18 +142,14 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
     }
 
     private renderClearButton() {
-
-        const  {value} = this.props;
+        const { value } = this.props;
         if (value) {
-            return <Button onClick = {this.evtHandlers.clearSelection}>
-                {ICON_TIMES}
-            </Button>;
+            return <Button onClick={this.evtHandlers.clearSelection}>{ICON_TIMES}</Button>;
         }
     }
 
-    private onFileDrop(i : any, monitor : any) {
-
-        const {files} = monitor.getItem();
+    private onFileDrop(i: any, monitor: any) {
+        const { files } = monitor.getItem();
         const file = files[0];
 
         if (file) {
@@ -169,21 +158,26 @@ class MediaVariableField extends React.PureComponent<IMediaVariableFieldProps, I
     }
 
     public render() {
-
         const { processing } = this.state;
         const accept = this.getInputFilter();
 
-        return <>
-            <input type = 'file' accept = {accept} style = {{display: 'none'}} ref = {this.input} onChange = {this.evtHandlers.fileUpload}/>
-            <AssetsTableDropzone onDrop = {this.evtHandlers.fileDrop} disable = {processing}>
-                <div className = 'variable-default-upload' onClick = {this.evtHandlers.click}>
-                    {this.renderFields()}
-                    <div className = 'btn-wrapper'>
-                        {this.renderClearButton()}
+        return (
+            <>
+                <input
+                    type='file'
+                    accept={accept}
+                    style={{ display: 'none' }}
+                    ref={this.input}
+                    onChange={this.evtHandlers.fileUpload}
+                />
+                <AssetsTableDropzone onDrop={this.evtHandlers.fileDrop} disable={processing}>
+                    <div className='variable-default-upload' onClick={this.evtHandlers.click}>
+                        {this.renderFields()}
+                        <div className='btn-wrapper'>{this.renderClearButton()}</div>
                     </div>
-                </div>
-            </AssetsTableDropzone>
-        </>;
+                </AssetsTableDropzone>
+            </>
+        );
     }
 }
 

package/src/components/modal/Modal.stories.tsx

@@ -7,14 +7,6 @@ export default {
     component: Modal
 };
 
-interface IModalProps {
-    children? : any;
-    isOpen : boolean;
-    style? : any;
-    wrapperStyle? : any;
-    onRequestClose(e) : void;
-}
-
 export const defaultModal = () => {
     const [open, setOpen] = React.useState(false);
     const dropdownToggleRef = React.useRef(null);
@@ -25,25 +17,24 @@ export const defaultModal = () => {
 
     return (
         <>
-            <Button onClick = {() => setOpen(!open)} ref = {dropdownToggleRef}>
-                    Modal Button
+            <Button onClick={() => setOpen(!open)} ref={dropdownToggleRef}>
+                Modal Button
             </Button>
             <Modal
-                onRequestClose= {handleModalOpen}
-                wrapperStyle = {{
+                onRequestClose={handleModalOpen}
+                wrapperStyle={{
                     top: '50px',
                     left: '0px',
                     width: '100%',
                     height: `calc(100% - 50px)`
                 }}
-                style = {{
+                style={{
                     width: '600px',
                     height: '70%',
                     top: '10%',
                     left: 'calc((100% - 600px) / 2)'
                 }}
-                isOpen = {open}
-            >
+                isOpen={open}>
                 Modal Content
             </Modal>
         </>