@imposium-hub/components 1.45.5 → 1.46.1

package/src/components/assets/AssetsTableNameFilter.tsx

@@ -5,34 +5,35 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 interface IAssetsTableNameFilterProps {
-    assetFilters : any;
-    updateFilters : (filters : any) => any;
+    assetFilters: any;
+    updateFilters: (filters: any) => any;
 }
 
 class AssetsTableNameFilter extends React.PureComponent<IAssetsTableNameFilterProps> {
-    public render = () : JSX.Element => {
+    public render = (): JSX.Element => {
         const { assetFilters } = this.props;
 
         return (
             <TextField
                 submittable
-                submittableType = 'search'
-                value = {assetFilters.name}
-                doSubmit = {(n) => this.props.updateFilters({name: n})}
+                submittableType='search'
+                value={assetFilters.name}
+                doSubmit={(n) => this.props.updateFilters({ name: n })}
             />
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({updateFilters}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {assetFilters: state.assetFilters};
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
 };
 
-const AssetsTableNameFilterMemoized = connect(mapStateToProps, mapDispatchToProps)(
-    React.memo(AssetsTableNameFilter)
-);
+const AssetsTableNameFilterMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableNameFilter));
 export default AssetsTableNameFilterMemoized;

package/src/components/assets/AssetsTablePreviewCell.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {ASSET_TYPES, VideoPreview, AssetsTypeIcon, ImagePreview} from '../../index';
-export const PREVIEW_MAX_WIDTH : number = 400;
-export const PREVIEW_MAX_HEIGHT : number = 400;
-export const HEADER_HEIGHT : number = 30;
+import { ASSET_TYPES, VideoPreview, AssetsTypeIcon, ImagePreview } from '../../index';
+export const PREVIEW_MAX_WIDTH: number = 400;
+export const PREVIEW_MAX_HEIGHT: number = 400;
+export const HEADER_HEIGHT: number = 30;
 
 interface IAssetsTablePreviewCell {
-    cell : any;
-    showMedia : boolean;
-    onClick() : void;
-    onRequestClose() : void;
+    cell: any;
+    showMedia: boolean;
+    onClick(): void;
+    onRequestClose(): void;
 }
 
 class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell> {
-    private iconRef : any = React.createRef<HTMLDivElement>();
-    private evtHandlers : any;
+    private iconRef: any = React.createRef<HTMLDivElement>();
+    private evtHandlers: any;
     constructor(props) {
         super(props);
         this.evtHandlers = {
@@ -23,12 +23,12 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
     }
 
     private handleClose() {
-        const {onRequestClose} = this.props;
+        const { onRequestClose } = this.props;
         onRequestClose();
     }
 
     private handlePreviewClick() {
-        const {onClick, showMedia} = this.props;
+        const { onClick, showMedia } = this.props;
         if (!showMedia) {
             onClick();
             return;
@@ -37,9 +37,7 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
     }
 
     public render() {
-
-        const getMediaPreviewStyle = (mediaWidth : number, mediaHeight : number) => {
-
+        const getMediaPreviewStyle = (mediaWidth: number, mediaHeight: number) => {
             if (!this.iconRef.current) {
                 return;
             }
@@ -51,9 +49,9 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
             }
             const icon = this.iconRef.current;
             const iconRect = icon.getBoundingClientRect();
-            const aspect :number  = mediaWidth / mediaHeight;
-            let width : number = PREVIEW_MAX_WIDTH;
-            let height : number = width / aspect;
+            const aspect: number = mediaWidth / mediaHeight;
+            let width: number = PREVIEW_MAX_WIDTH;
+            let height: number = width / aspect;
 
             if (height > PREVIEW_MAX_HEIGHT) {
                 height = PREVIEW_MAX_HEIGHT;
@@ -65,45 +63,57 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
             let top = iconRect.y + iconRect.height - height - 20;
             // if the preview is off on the left, switch to the right of the icon
             if (left < 0) {
-                left = iconRect.x ;
+                left = iconRect.x;
             }
             // if the preview is off on the top, switch to bottom of the icon
             if (top < HEADER_HEIGHT) {
                 top = iconRect.y + 20;
             }
 
-            return {top, left, width, height, position: 'absolute', zIndex: 9000} as React.CSSProperties;
+            return {
+                top,
+                left,
+                width,
+                height,
+                position: 'absolute',
+                zIndex: 9000
+            } as React.CSSProperties;
         };
 
-        const {cell, showMedia} = this.props;
+        const { cell, showMedia } = this.props;
         const playbackSettings = {
             autoPlay: true,
             loop: false
         };
 
-        return(
-            <div ref = {this.iconRef} className = 'asset-type-cell' onClick={this.evtHandlers.onClick} >
-                <AssetsTypeIcon type = {cell.row.values.type} />
-                {cell.row.values.type === ASSET_TYPES.IMAGE &&
-                (
+        return (
+            <div ref={this.iconRef} className='asset-type-cell' onClick={this.evtHandlers.onClick}>
+                <AssetsTypeIcon type={cell.row.values.type} />
+                {cell.row.values.type === ASSET_TYPES.IMAGE && (
                     <ImagePreview
-                        style={{...getMediaPreviewStyle(cell.row.original.width, cell.row.original.height)}}
+                        style={{
+                            ...getMediaPreviewStyle(
+                                cell.row.original.width,
+                                cell.row.original.height
+                            )
+                        }}
                         showMedia={showMedia}
                         url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
-                )
-                }
-                {cell.row.values.type === ASSET_TYPES.VIDEO &&
-                (<VideoPreview
+                )}
+                {cell.row.values.type === ASSET_TYPES.VIDEO && (
+                    <VideoPreview
                         playbackSettings={playbackSettings}
-                        style={getMediaPreviewStyle(cell.row.original.width, cell.row.original.height)}
+                        style={getMediaPreviewStyle(
+                            cell.row.original.width,
+                            cell.row.original.height
+                        )}
                         showMedia={showMedia}
                         url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
-                )
-                }
+                )}
             </div>
         );
     }

package/src/components/assets/AssetsTableSelectCell.tsx

@@ -1,28 +1,31 @@
 import * as React from 'react';
-import { selectAsset, deselectAsset, selectMultipleAssets } from '../../redux/actions/selected-assets';
+import {
+    selectAsset,
+    deselectAsset,
+    selectMultipleAssets
+} from '../../redux/actions/selected-assets';
 import CheckboxField from '../checkbox-field/CheckboxField';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 interface IAssetsTableSelectCell {
-    cell : any; // React table cell wrapper
-    selectedAssets : string[];
-    selectAsset : (id : string) => any;
-    selectMultipleAssets : (id : string) => any;
-    deselectAsset : (id : string) => any;
+    cell: any; // React table cell wrapper
+    selectedAssets: string[];
+    selectAsset: (id: string) => any;
+    selectMultipleAssets: (id: string) => any;
+    deselectAsset: (id: string) => any;
 }
 
 class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell> {
-    constructor(props : IAssetsTableSelectCell) {
+    constructor(props: IAssetsTableSelectCell) {
         super(props);
     }
 
-    public render = () : JSX.Element => {
-        const {cell, selectedAssets} = this.props;
-        const assetId : string = cell.row.original.id;
-        const isSelected : boolean = (selectedAssets.indexOf(assetId) > -1);
+    public render = (): JSX.Element => {
+        const { cell, selectedAssets } = this.props;
+        const assetId: string = cell.row.original.id;
+        const isSelected: boolean = selectedAssets.indexOf(assetId) > -1;
         const selectionHandler = (selected, e) => {
-
             if (selected) {
                 if (e.shiftKey && selectedAssets.length > 0) {
                     this.props.selectMultipleAssets(assetId);
@@ -36,25 +39,26 @@ class AssetsTableSelectCell extends React.PureComponent<IAssetsTableSelectCell>
 
         return (
             <CheckboxField
-                label = ''
-                width = 'auto'
-                value = {isSelected}
-                onChange = {(v, e) => selectionHandler(v, e)}
+                label=''
+                width='auto'
+                value={isSelected}
+                onChange={(v, e) => selectionHandler(v, e)}
             />
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({selectAsset, deselectAsset, selectMultipleAssets}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ selectAsset, deselectAsset, selectMultipleAssets }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {selectedAssets: state.selectedAssets};
+const mapStateToProps = (state): any => {
+    return { selectedAssets: state.selectedAssets };
 };
 
-const AssetsTableSelectCellMemoized = connect(mapStateToProps, mapDispatchToProps)(
-    React.memo(AssetsTableSelectCell)
-);
+const AssetsTableSelectCellMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableSelectCell));
 
 export default AssetsTableSelectCellMemoized;

package/src/components/assets/AssetsTableSelectFilter.tsx

@@ -5,43 +5,39 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 interface IAssetsTableSelectFilter {
-    selectedAssets : string[];
-    selectAll : () => any;
-    resetSelection : () => any;
+    selectedAssets: string[];
+    selectAll: () => any;
+    resetSelection: () => any;
 }
 
 class AssetsTableSelectFilter extends React.PureComponent<IAssetsTableSelectFilter> {
-    constructor(props : IAssetsTableSelectFilter) {
+    constructor(props: IAssetsTableSelectFilter) {
         super(props);
     }
 
-    public render = () : JSX.Element => {
-        const {selectedAssets} = this.props;
-        const noneSelected : boolean = (selectedAssets.length === 0);
-        const handler : () => void = (noneSelected)
+    public render = (): JSX.Element => {
+        const { selectedAssets } = this.props;
+        const noneSelected: boolean = selectedAssets.length === 0;
+        const handler: () => void = noneSelected
             ? () => this.props.selectAll()
             : () => this.props.resetSelection();
 
         return (
-            <CheckboxField
-                label = ''
-                propagate = {false}
-                value = {!noneSelected}
-                onChange = {handler}
-            />
+            <CheckboxField label='' propagate={false} value={!noneSelected} onChange={handler} />
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({selectAll, resetSelection}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ selectAll, resetSelection }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {selectedAssets: state.selectedAssets};
+const mapStateToProps = (state): any => {
+    return { selectedAssets: state.selectedAssets };
 };
 
-const AssetsTableSelectFilterMemoized = connect(mapStateToProps, mapDispatchToProps)(
-    React.memo(AssetsTableSelectFilter)
-);
+const AssetsTableSelectFilterMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableSelectFilter));
 export default AssetsTableSelectFilterMemoized;

package/src/components/assets/AssetsTableStatusCell.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 
 interface IAssetsTableStatusCell {
-    cell : any; // React table cell wrapper
+    cell: any; // React table cell wrapper
 }
 
-const AssetsTableStatusCell : React.FC<IAssetsTableStatusCell> = (p : IAssetsTableStatusCell) => {
-    const status = (p.cell.row.original.processing) ? 'processing' : 'complete';
-    return <div className = 'asset-status-cell'>
-
-        <div className = {`status-indicator ${status}`}></div>
-    </div>;
+const AssetsTableStatusCell: React.FC<IAssetsTableStatusCell> = (p: IAssetsTableStatusCell) => {
+    const status = p.cell.row.original.processing ? 'processing' : 'complete';
+    return (
+        <div className='asset-status-cell'>
+            <div className={`status-indicator ${status}`}></div>
+        </div>
+    );
 };
 
 const AssetsTableStatusCellMemoized = React.memo(AssetsTableStatusCell);

package/src/components/assets/AssetsTableTagsCell.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import Button from '../button/Button';
 interface IAssetsTableTagsCell {
-    cell : any; // React table cell wrapper
-    onClick(e:any) : void;
+    cell: any; // React table cell wrapper
+    onClick(e: any): void;
 }
 
-const AssetsTableTagsCell : React.FC<IAssetsTableTagsCell> = (p : IAssetsTableTagsCell) => (
-    <Button
-        color = 'secondary'
-        style = 'subtle'
-        size = 'small'
-        onClick = {p.onClick}>
+const AssetsTableTagsCell: React.FC<IAssetsTableTagsCell> = (p: IAssetsTableTagsCell) => (
+    <Button color='secondary' style='subtle' size='small' onClick={p.onClick}>
         {p.cell.row.values.tags.length}
     </Button>
 );

package/src/components/assets/AssetsTableTagsFilter.tsx

@@ -5,34 +5,35 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 interface IAssetsTableTagsFilterProps {
-    assetFilters : any;
-    updateFilters : (filters : any) => any;
+    assetFilters: any;
+    updateFilters: (filters: any) => any;
 }
 
 class AssetsTableTagsFilter extends React.PureComponent<IAssetsTableTagsFilterProps> {
-
-    public render = () : JSX.Element => {
+    public render = (): JSX.Element => {
         const { assetFilters } = this.props;
 
         return (
             <TextField
                 submittable
-                submittableType = 'search'
-                value = {assetFilters.tags}
-                doSubmit = {(t) => this.props.updateFilters({tags: t})} />
+                submittableType='search'
+                value={assetFilters.tags}
+                doSubmit={(t) => this.props.updateFilters({ tags: t })}
+            />
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({updateFilters}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ updateFilters }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
-    return {assetFilters: state.assetFilters};
+const mapStateToProps = (state): any => {
+    return { assetFilters: state.assetFilters };
 };
 
-const AssetsTableTagsFilterMemoized = connect(mapStateToProps, mapDispatchToProps)(
-    React.memo(AssetsTableTagsFilter)
-);
+const AssetsTableTagsFilterMemoized = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(React.memo(AssetsTableTagsFilter));
 export default AssetsTableTagsFilterMemoized;

package/src/components/assets/AssetsTableTagsPivot.tsx

@@ -10,86 +10,93 @@ import Button from '../button/Button';
 import { ICON_TIMES } from '../../constants/icons';
 
 interface IAssetsTableTagsPivotProps {
-    row : any; // React table row wrapper
-    api : IImposiumAPI;
-    addAssetTag : (api : any, id : string, tags : string) => any;
-    deleteAssetTag : (api : any, id : string, tag : string) => any;
-    onClose(e, row) : void;
-    assetTags : string[];
+    row: any; // React table row wrapper
+    api: IImposiumAPI;
+    addAssetTag: (api: any, id: string, tags: string) => any;
+    deleteAssetTag: (api: any, id: string, tag: string) => any;
+    onClose(e, row): void;
+    assetTags: string[];
 }
 
 class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProps> {
-    private static readonly ADD_TAG_INPUT_WIDTH : string = '280px';
-    private static readonly COLORIZE_TAGS : boolean = true;
+    private static readonly ADD_TAG_INPUT_WIDTH: string = '280px';
+    private static readonly COLORIZE_TAGS: boolean = true;
 
-    constructor(props : IAssetsTableTagsPivotProps) {
+    constructor(props: IAssetsTableTagsPivotProps) {
         super(props);
     }
 
-    private addTags = (assetId : string, tags : string) : void => {
-        const {row : { original }} =this.props;
+    private addTags = (assetId: string, tags: string): void => {
+        const {
+            row: { original }
+        } = this.props;
 
-        let newTags = tags.split(',')
-        const arr = [...original.tags, ...newTags ];
+        let newTags = tags.split(',');
+        const arr = [...original.tags, ...newTags];
         const dupedTags = arr.filter((item, index) => arr.indexOf(item) !== index);
 
-        newTags = newTags.filter(( el ) => {
-            return dupedTags.indexOf( el ) < 0;
-          } );
+        newTags = newTags.filter((el) => {
+            return dupedTags.indexOf(el) < 0;
+        });
 
         if (newTags) {
             this.props.addAssetTag(this.props.api, assetId, newTags.join());
         }
-    }
+    };
 
-    public render = () : JSX.Element => {
-        const {row: {original: {id, tags}}, assetTags} = this.props;
+    public render = (): JSX.Element => {
+        const {
+            row: {
+                original: { id, tags }
+            },
+            assetTags
+        } = this.props;
         const tagsArray = [...new Set(tags)];
-        const tagsMarkup : JSX.Element[] = tagsArray.map((tag : string) => (
+        const tagsMarkup: JSX.Element[] = tagsArray.map((tag: string) => (
             <Tag
-                key = {tag}
-                copy = {tag}
-                colorize = {AssetsTableTagsPivot.COLORIZE_TAGS}
-                removeHandler = {() => this.props.deleteAssetTag(this.props.api, id, tag)}
+                key={tag}
+                copy={tag}
+                colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
+                removeHandler={() => this.props.deleteAssetTag(this.props.api, id, tag)}
             />
         ));
 
         return (
-            <div className = 'tags-column'>
+            <div className='tags-column'>
                 <>
                     <TextField
                         submittable
-                        submittableType = 'add'
-                        suggestions = {assetTags}
-                        label = {copy.tags.add}
-                        width = {AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
-                        doSubmit = {(t) => this.addTags(id, t)}
+                        submittableType='add'
+                        suggestions={assetTags}
+                        label={copy.tags.add}
+                        width={AssetsTableTagsPivot.ADD_TAG_INPUT_WIDTH}
+                        doSubmit={(t) => this.addTags(id, t)}
                     />
                     {tagsMarkup}
                     <Button
-                        customStyles = {{
+                        customStyles={{
                             position: 'absolute',
                             right: '1px',
                             top: '9px'
                         }}
-                        style = 'subtle'
-                        onClick = {(e) => this.props.onClose(e, this.props.row)}>
+                        style='subtle'
+                        onClick={(e) => this.props.onClose(e, this.props.row)}>
                         {ICON_TIMES}
                     </Button>
                 </>
             </div>
         );
-    }
+    };
 }
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({addAssetTag, deleteAssetTag}, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators({ addAssetTag, deleteAssetTag }, dispatch);
 };
 
-const mapStateToProps = (state) : any => {
+const mapStateToProps = (state): any => {
     return {
-        assetTags: state.assetTags,
+        assetTags: state.assetTags
     };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(AssetsTableTagsPivot);
+export default connect(mapStateToProps, mapDispatchToProps)(AssetsTableTagsPivot);

package/src/components/assets/AssetsTableTypeCell.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import AssetsTypeIcon from './AssetsTypeIcon';
 
 interface IAssetsTableTypeCell {
-    cell : any; // React table cell wrapper
+    cell: any; // React table cell wrapper
 }
 
-const AssetsTableTypeCell : React.FC<IAssetsTableTypeCell> = (p : IAssetsTableTypeCell) => (
-    <div className = 'asset-type-cell'><AssetsTypeIcon type = {p.cell.row.values.type} /></div>
+const AssetsTableTypeCell: React.FC<IAssetsTableTypeCell> = (p: IAssetsTableTypeCell) => (
+    <div className='asset-type-cell'>
+        <AssetsTypeIcon type={p.cell.row.values.type} />
+    </div>
 );
 
 const AssetsTableTypeCellMemoized = React.memo(AssetsTableTypeCell);