@imposium-hub/components 1.45.5 → 1.46.0

package/src/components/assets/AssetField.tsx

@@ -1,42 +1,44 @@
 import * as React from 'react';
-import { DropTargetMonitor } from 'react-dnd';
 import { assets as copy } from '../../constants/copy';
 import Button from '../button/Button';
 import TextField from '../text-field/TextField';
 import AssetsTableDropzone from './AssetsTableDropzone';
 import DroppableAssetRenderer from './DroppableAssetRenderer';
 import { mimetypeConformsToOverlay } from '../../Util';
-import { updateFilters} from '../../redux/actions/asset-filters';
-import { uploadAssets} from '../../redux/actions/asset-uploads';
+import { updateFilters } from '../../redux/actions/asset-filters';
+import { uploadAssets } from '../../redux/actions/asset-uploads';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { ICON_FILTER, ICON_TIMES } from '../../constants/icons';
 
 interface IAssetFieldProps {
-    api : any;
-    storyId : string;
-    assetId : string;
-    label : string;
-    width : number;
-    tooltip : string;
-    onChange : (asset : any) => any;
-    updateFilters : (filters : any) => any;
-    uploadAssets : (api : any, files : File[], storyId? : string, bindToOverlay? : (f : any) => any) => any;
-    accepts? : string;
-    labelPosition? : string;
-    onError? : (message : string) => void;
+    api: any;
+    storyId: string;
+    assetId: string;
+    label: string;
+    width: number;
+    tooltip: string;
+    onChange: (asset: any) => any;
+    updateFilters: (filters: any) => any;
+    uploadAssets: (
+        api: any,
+        files: File[],
+        storyId?: string,
+        bindToOverlay?: (f: any) => any
+    ) => any;
+    accepts?: string;
+    labelPosition?: string;
+    onError?: (message: string) => void;
 }
 
 interface IAssetFieldState {
-    assetName : string;
-    error : boolean;
-    assetUploading : boolean;
+    assetName: string;
+    error: boolean;
+    assetUploading: boolean;
 }
 
 class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState> {
-
     constructor(props) {
-
         super(props);
 
         this.state = {
@@ -47,8 +49,7 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     public componentDidMount() {
-
-        const {assetId, api} = this.props;
+        const { assetId } = this.props;
 
         // get the asset name from the API
         if (assetId && !this.state.assetName) {
@@ -57,8 +58,7 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     public componentDidUpdate(prevProps, prevState) {
-
-        const {assetId} = this.props;
+        const { assetId } = this.props;
 
         if (assetId && assetId !== prevProps.assetId) {
             this.loadAsset();
@@ -71,60 +71,63 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     private loadAsset() {
+        const { assetId, api } = this.props;
 
-        const {assetId, api} = this.props;
-
-        api.getAssetItem(assetId).then((data : any) => {
-            this.setState({
-                error: false,
-                assetName: data.name
-            });
-        })
-        .catch((e : Error) => {
-            this.setState({
-                error: true,
-                assetName: `Could not find asset: ${assetId}`
+        api.getAssetItem(assetId)
+            .then((data: any) => {
+                this.setState({
+                    error: false,
+                    assetName: data.name
+                });
+            })
+            .catch((e: Error) => {
+                this.setState({
+                    error: true,
+                    assetName: `Could not find asset: ${assetId}`
+                });
             });
-        });
     }
 
     public setFilter(e) {
-
-        const {accepts} = this.props;
-        this.props.updateFilters({type: (accepts) ? accepts : '', page: 1});
+        const { accepts } = this.props;
+        this.props.updateFilters({ type: accepts ? accepts : '', page: 1 });
     }
 
-    private onFileDrop = (i : any, monitor : any) : void => {
-        const {accepts, storyId, api} = this.props;
+    private onFileDrop = (i: any, monitor: any): void => {
+        const { accepts, storyId, api } = this.props;
         if (monitor) {
-
-            const {files} = monitor.getItem();
+            const { files } = monitor.getItem();
 
             if (mimetypeConformsToOverlay(accepts, files[0])) {
-                this.setState({assetUploading: true});
+                this.setState({ assetUploading: true });
 
-                this.props.uploadAssets(api, [files[0]], storyId, (f : any) => {
-                    this.setState({assetName: f.name, error: false}, () => {
-                        this.setState({assetUploading: false});
+                this.props.uploadAssets(api, [files[0]], storyId, (f: any) => {
+                    this.setState({ assetName: f.name, error: false }, () => {
+                        this.setState({ assetUploading: false });
                         this.props.onChange(f);
                     });
                 });
             }
         }
-    }
+    };
 
     private onAssetDrop(data, m) {
-
-        const {rowData, rowData: {name, id, type}} = data;
+        const {
+            rowData,
+            rowData: { name, type }
+        } = data;
         const { accepts } = this.props;
 
         if (type === accepts) {
-            this.setState({
-                assetName: name,
-                error: false
-            }, () => {
-                this.props.onChange(rowData);
-            });
+            this.setState(
+                {
+                    assetName: name,
+                    error: false
+                },
+                () => {
+                    this.props.onChange(rowData);
+                }
+            );
         } else {
             if (this.props.onError) {
                 this.props.onError(copy.field.fieldMismatchError.replace('[accepts]', accepts));
@@ -133,60 +136,64 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
     }
 
     private clearAsset(e) {
-
-        this.setState({
-            assetName: '',
-            error: false
-        }, () => {
-            this.props.onChange(null);
-        });
+        this.setState(
+            {
+                assetName: '',
+                error: false
+            },
+            () => {
+                this.props.onChange(null);
+            }
+        );
     }
 
     public render() {
-
-        const {assetId, label, width, tooltip, labelPosition} = this.props;
-        const {assetName, assetUploading, error} = this.state;
-        const errorClass = (error) ? 'error' : '';
-        const placeholder = (!assetId) ? copy.field.dragPrompt : '';
-        const style = {width : width || '100%'};
-        const buttons : JSX.Element[] = [];
-
-        buttons.push((
+        const { assetId, label, width, tooltip, labelPosition } = this.props;
+        const { assetName, assetUploading, error } = this.state;
+        const errorClass = error ? 'error' : '';
+        const placeholder = !assetId ? copy.field.dragPrompt : '';
+        const style = { width: width || '100%' };
+        const buttons: JSX.Element[] = [];
+
+        buttons.push(
             <Button
-                key = 'btn-filter'
-                onClick = {(e) => this.setFilter(e)}
-                style = 'subtle'
-                tooltip = {copy.field.tooltipFilter}
-                color  ='primary'>
+                key='btn-filter'
+                onClick={(e) => this.setFilter(e)}
+                style='subtle'
+                tooltip={copy.field.tooltipFilter}
+                color='primary'>
                 {ICON_FILTER}
             </Button>
-        ));
+        );
 
         if (assetId && !assetUploading) {
-            buttons.unshift((
+            buttons.unshift(
                 <Button
-                    key = 'btn-clear-asset'
-                    tooltip = {copy.field.tooltipClear}
-                    onClick = {(e) => this.clearAsset(e)}
-                    style = 'subtle'>
+                    key='btn-clear-asset'
+                    tooltip={copy.field.tooltipClear}
+                    onClick={(e) => this.clearAsset(e)}
+                    style='subtle'>
                     {ICON_TIMES}
                 </Button>
-            ));
+            );
         }
 
         return (
-            <div style = {style} className = {`asset-field ${errorClass}`}>
-                <AssetsTableDropzone onDrop = {(i, m) => this.onFileDrop(i, m)} disable = {assetUploading}>
-                    <DroppableAssetRenderer onDrop = {(i, m) => this.onAssetDrop(i, m)}>
+            <div style={style} className={`asset-field ${errorClass}`}>
+                <AssetsTableDropzone
+                    onDrop={(i, m) => this.onFileDrop(i, m)}
+                    disable={assetUploading}>
+                    <DroppableAssetRenderer onDrop={(i, m) => this.onAssetDrop(i, m)}>
                         <TextField
-                            readOnly = {true}
-                            label = {label}
-                            tooltip = {tooltip}
-                            loading = {assetUploading}
-                            placeholder = {placeholder}
-                            buttons = {buttons}
-                            labelPosition = {labelPosition}
-                            value = {assetName}/>
+                            readOnly={true}
+                            label={label}
+                            tooltip={tooltip}
+                            loading={assetUploading}
+                            placeholder={placeholder}
+                            buttons={buttons}
+                            labelPosition={labelPosition}
+                            value={assetName}
+                        />
                     </DroppableAssetRenderer>
                 </AssetsTableDropzone>
             </div>
@@ -195,7 +202,7 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
 }
 
 const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators({updateFilters, uploadAssets}, dispatch);
+    return bindActionCreators({ updateFilters, uploadAssets }, dispatch);
 };
 
 export default connect(null, mapDispatchToProps)(AssetField);

package/src/components/assets/AssetsTableComplexTagCell.tsx

@@ -1,29 +1,30 @@
 import * as React from 'react';
-import { assets as copy } from '../../constants/copy';
 import Tag from '../tag/Tag';
 import TextField from '../text-field/TextField';
 import { addAssetTag, deleteAssetTag } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
-import { filterHotkeys } from '../../Util';
 
 interface IAssetsTableComplexTagCellProps {
-    cell : any; // React table row wrapper
-    api : IImposiumAPI;
-    addAssetTag : (api : any, id : string, tags : string) => any;
-    assetTags : string[];
-    deleteAssetTag : (api : any, id : string, tag : string) => any;
+    cell: any; // React table row wrapper
+    api: IImposiumAPI;
+    addAssetTag: (api: any, id: string, tags: string) => any;
+    assetTags: string[];
+    deleteAssetTag: (api: any, id: string, tag: string) => any;
 }
 
 interface IAssetTableComplexTagCellState {
-    newTag : string;
+    newTag: string;
 }
 
-class AssetsTableComplexTagCell extends React.Component<IAssetsTableComplexTagCellProps, IAssetTableComplexTagCellState> {
-    private readonly inputRef : any;
+class AssetsTableComplexTagCell extends React.Component<
+    IAssetsTableComplexTagCellProps,
+    IAssetTableComplexTagCellState
+> {
+    private readonly inputRef: any;
 
-    constructor(props : IAssetsTableComplexTagCellProps) {
+    constructor(props: IAssetsTableComplexTagCellProps) {
         super(props);
 
         this.state = {
@@ -34,7 +35,7 @@ class AssetsTableComplexTagCell extends React.Component<IAssetsTableComplexTagCe
     }
 
     private onSubmit(newTag) {
-        const {id, tags} = this.props.cell.row.original;
+        const { id, tags } = this.props.cell.row.original;
 
         // don't add the tag if it already exists
         if (tags.indexOf(newTag) === -1) {
@@ -47,50 +48,48 @@ class AssetsTableComplexTagCell extends React.Component<IAssetsTableComplexTagCe
     }
 
     private removeTag(tag) {
-        const {id} = this.props.cell.row.original;
+        const { id } = this.props.cell.row.original;
         this.props.deleteAssetTag(this.props.api, id, tag);
     }
 
-    public render = () : JSX.Element => {
-        const {cell, assetTags} = this.props;
+    public render = (): JSX.Element => {
+        const { cell, assetTags } = this.props;
         const tagsArray = [...new Set(cell.row.original.tags)];
-        const tagsMarkup : JSX.Element[] = tagsArray.map((tag : string) => (
-            <Tag
-                key = {tag}
-                copy = {tag}
-                colorize = {true}
-                removeHandler = {() => this.removeTag(tag)}
-            />
+        const tagsMarkup: JSX.Element[] = tagsArray.map((tag: string) => (
+            <Tag key={tag} copy={tag} colorize={true} removeHandler={() => this.removeTag(tag)} />
         ));
 
-        return <div className = 'tags-complex-column'>
-            {tagsMarkup}
-            <div className = 'new-tag'>
-                <TextField
-                    submittable = {true}
-                    submittableType = 'add'
-                    placeholder = '+'
-                    hideButtons = {true}
-                    suggestions = {assetTags}
-                    doSubmit = {(t) => this.onSubmit(t)}
-                    width = '150px'
-                    buttons = {[]}
-                    value = {this.state.newTag}
-                />
+        return (
+            <div className='tags-complex-column'>
+                {tagsMarkup}
+                <div className='new-tag'>
+                    <TextField
+                        submittable={true}
+                        submittableType='add'
+                        placeholder='+'
+                        hideButtons={true}
+                        suggestions={assetTags}
+                        doSubmit={(t) => this.onSubmit(t)}
+                        width='150px'
+                        buttons={[]}
+                        value={this.state.newTag}
+                    />
+                </div>
             </div>
-        </div>;
-    }
+        );
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({addAssetTag, deleteAssetTag}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ addAssetTag, deleteAssetTag }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {assetTags: state.assetTags};
+const mapStateToProps = (state): any => {
+    return { assetTags: state.assetTags };
 };
 
-const AssetsTableComplexTagCellMemoized = connect(mapStateToProps, mapDispatchToProps)(
-    React.memo(AssetsTableComplexTagCell)
-);
+const AssetsTableComplexTagCellMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableComplexTagCell));
 export default AssetsTableComplexTagCellMemoized;

package/src/components/assets/AssetsTableDateCell.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { formatDateDefault } from '../../Util';
 
 interface IAssetsTableDateCell {
-    cell : any;
+    cell: any;
 }
 
-const AssetsTableDateCell : React.FC<IAssetsTableDateCell> = (p : IAssetsTableDateCell) => (
+const AssetsTableDateCell: React.FC<IAssetsTableDateCell> = (p: IAssetsTableDateCell) => (
     <div>{formatDateDefault(p.cell.row.values.date_created)}</div>
 );
 

package/src/components/assets/AssetsTableDropzone.tsx

@@ -3,27 +3,31 @@ import { NativeTypes } from 'react-dnd-html5-backend';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
 
 interface IAssetsTableDropzoneProps {
-    onDrop : (i : any, monitor : DropTargetMonitor) => void;
-    children : any;
-    className ? : string;
-    disable? : boolean;
+    onDrop: (i: any, monitor: DropTargetMonitor) => void;
+    children: any;
+    className?: string;
+    disable?: boolean;
 }
 
-const AssetsTableDropzone : React.FC<IAssetsTableDropzoneProps> = (p : IAssetsTableDropzoneProps) => {
-    const [{canDrop, isOver}, dropRef] = useDrop({
+const AssetsTableDropzone: React.FC<IAssetsTableDropzoneProps> = (p: IAssetsTableDropzoneProps) => {
+    const [, dropRef] = useDrop({
         accept: [NativeTypes.FILE],
-        drop:(item, monitor) => {
+        drop: (item, monitor) => {
             if (p.onDrop) {
                 p.onDrop(p, monitor);
             }
         },
         collect: (monitor) => ({
             isOver: monitor.isOver,
-            canDrop: monitor.canDrop,
+            canDrop: monitor.canDrop
         })
     });
 
-    return (<div className = {p.className || ''} ref={(!p.disable) ? dropRef : undefined}>{p.children}</div>);
+    return (
+        <div className={p.className || ''} ref={!p.disable ? dropRef : undefined}>
+            {p.children}
+        </div>
+    );
 };
 
 export default AssetsTableDropzone;

package/src/components/assets/AssetsTableDurationCell.tsx

@@ -1,45 +1,46 @@
 import * as React from 'react';
-import NumberField from '../number-field/NumberField';
 import { updateAssetName } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
 
 interface IAssetsTableDurationCell {
-    cell : any;
-    api : IImposiumAPI;
+    cell: any;
+    api: IImposiumAPI;
 }
 
-const AssetsTableDurationCell : React.FC<IAssetsTableDurationCell> = (props : IAssetsTableDurationCell) => {
-
-        const {cell: {row: {original: {duration, id}}}} = props;
-
-        if (duration !== null && duration !== undefined) {
-            return (
-                <div className = 'asset-duration-cell'>
-                    {secondsToTime(duration)}
-                </div>
-            );
-        } else {
-            return null;
+const AssetsTableDurationCell: React.FC<IAssetsTableDurationCell> = (
+    props: IAssetsTableDurationCell
+) => {
+    const {
+        cell: {
+            row: {
+                original: { duration }
+            }
         }
+    } = props;
 
+    if (duration !== null && duration !== undefined) {
+        return <div className='asset-duration-cell'>{secondsToTime(duration)}</div>;
+    } else {
+        return null;
+    }
 };
 
-export const  secondsToTime = (timeInSeconds) : string => {
-    const minutes : any = Math.floor(timeInSeconds / 60);
-    let seconds : any = Math.floor(timeInSeconds - minutes * 60);
+export const secondsToTime = (timeInSeconds): string => {
+    const minutes: any = Math.floor(timeInSeconds / 60);
+    let seconds: any = Math.floor(timeInSeconds - minutes * 60);
     if (seconds < 10) {
         seconds = `0${seconds}`;
     }
     return `${minutes}:${seconds}`;
 };
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({updateAssetName}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateAssetName }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
+const mapStateToProps = (state): any => {
     return {};
 };
 

package/src/components/assets/AssetsTableNameCell.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import TextField from '../text-field/TextField';
 import { updateAssetName } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';
@@ -7,48 +7,47 @@ import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
 
 interface IAssetsTableNameCell {
-    cell : any;
-    api : IImposiumAPI;
-    updateAssetName : (api : any, id : string, name : string, delay? : boolean) => any;
+    cell: any;
+    api: IImposiumAPI;
+    updateAssetName: (api: any, id: string, name: string, delay?: boolean) => any;
 }
 
-let updateTimeout : any;
-const AssetsTableNameCell : React.FC<IAssetsTableNameCell> = (props : IAssetsTableNameCell) => {
-
-        const {cell: {row: {original: {name, id}}}} = props;
-        const [ localName, setLocalName ]  = useState('');
-
-        const onUpdate = (n) => {
-            setLocalName(n);
+let updateTimeout: any;
+const AssetsTableNameCell: React.FC<IAssetsTableNameCell> = (props: IAssetsTableNameCell) => {
+    const {
+        cell: {
+            row: {
+                original: { name, id }
+            }
+        }
+    } = props;
+    const [localName, setLocalName] = useState('');
+
+    const onUpdate = (n) => {
+        setLocalName(n);
+        clearTimeout(updateTimeout);
+        updateTimeout = setTimeout(() => setName(n), 1000);
+    };
+
+    const setName = (n) => {
+        props.updateAssetName(props.api, id, n);
+    };
+
+    useEffect(() => {
+        setLocalName(name);
+        return () => {
             clearTimeout(updateTimeout);
-            updateTimeout = setTimeout(() => setName(n), 1000);
-        };
-
-        const setName = (n) => {
-            props.updateAssetName(props.api, id, n);
         };
+    }, [name]);
 
-        useEffect(() => {
-            setLocalName(name);
-            return () => {
-                clearTimeout(updateTimeout);
-            };
-        }, [name]);
-
-        return (
-            <TextField
-                value ={localName}
-                width = {'100%'}
-                onChange = {(n) => onUpdate(n)}
-            />
-        );
+    return <TextField value={localName} width={'100%'} onChange={(n) => onUpdate(n)} />;
 };
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({updateAssetName}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateAssetName }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
+const mapStateToProps = (state): any => {
     return {};
 };