@imposium-hub/components 1.38.16 → 1.39.0

package/Entry.ts

@@ -33,6 +33,7 @@ import NoAccess from './components/no-access/NoAccess';
 import ServiceIcon from './components/service-icon/ServiceIcon';
 import DeterminateLoader from './components/determinate-loader/DeterminateLoader';
 import AssetsTableDateCell from './components/assets/AssetsTableDateCell';
+import AssetsTablePreviewCell from './components/assets/AssetsTablePreviewCell';
 import AssetsTableDurationCell from './components/assets/AssetsTableDurationCell';
 import AssetField from './components/assets/AssetField';
 import AssetsTableDropzone from './components/assets/AssetsTableDropzone';
@@ -163,6 +164,7 @@ export {
     AssetsTypeIcon,
     AssetsTableDateCell,
     AssetsTableDropzone,
+    AssetsTablePreviewCell,
     AssetsTableSelectFilter,
     AssetsTableSelectCell,
     AssetsTableTypeFilter,

package/components/assets/AssetsTablePreviewCell.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {ASSET_TYPES, VideoPreview, AssetsTypeIcon, ImagePreview} from '../../Entry';
+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;
+}
+
+class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell> {
+    private iconRef : any = React.createRef<HTMLDivElement>();
+    private evtHandlers : any;
+    constructor(props) {
+        super(props);
+        this.evtHandlers = {
+            onClose: () => this.handleClose(),
+            onClick: () => this.handlePreviewClick()
+        };
+    }
+
+    private handleClose() {
+        const {onRequestClose} = this.props;
+        onRequestClose();
+    }
+
+    private handlePreviewClick() {
+        const {onClick, showMedia} = this.props;
+        if (!showMedia) {
+            onClick();
+            return;
+        }
+        return;
+    }
+
+    public render() {
+
+        const getMediaPreviewStyle = (mediaWidth : number, mediaHeight : number) => {
+
+            if (!this.iconRef.current) {
+                return;
+            }
+            if (!mediaWidth) {
+                mediaWidth = PREVIEW_MAX_WIDTH;
+            }
+            if (!mediaHeight) {
+                mediaHeight = PREVIEW_MAX_HEIGHT;
+            }
+            const icon = this.iconRef.current;
+            const iconRect = icon.getBoundingClientRect();
+            const aspect = mediaWidth / mediaHeight;
+            let width = PREVIEW_MAX_WIDTH;
+            let height = width / aspect;
+
+            if (height > PREVIEW_MAX_HEIGHT) {
+                height = PREVIEW_MAX_HEIGHT;
+                width = height * aspect;
+            }
+
+            // try top left
+            let left = iconRect.x + iconRect.width - width;
+            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 ;
+            }
+            // 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;
+        };
+
+        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 &&
+                (
+                    <ImagePreview
+                        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
+                        playbackSettings={playbackSettings}
+                        style={getMediaPreviewStyle(cell.row.original.width, cell.row.original.height)}
+                        showMedia={showMedia}
+                        url={cell.row.original.url}
+                        onRequestClose={this.evtHandlers.onClose}
+                    />
+                )
+                }
+            </div>
+        );
+    }
+}
+
+const AssetsTablePreviewCellMemoized = React.memo(AssetsTablePreviewCell);
+export default AssetsTablePreviewCellMemoized;

package/components/button-menu/ButtonMenu.tsx

@@ -14,6 +14,7 @@ interface IButtonMenuState {
 class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState> {
 
     private evtHandlers : any;
+    private toggleRef : any;
 
     constructor(props) {
 
@@ -26,15 +27,20 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
             toggleMenu: (e) => this.toggleMenu(e),
             clickOutside: (e) => this.handleClickOutside(e)
         };
+
+        this.toggleRef = React.createRef();
     }
 
     private handleClickOutside(e) {
 
-        document.removeEventListener('click', this.evtHandlers.clickOutside);
+        const clickOnToggle = (this.toggleRef && this.toggleRef.current && this.toggleRef.current.contains(e.target)) ? true : false;
 
-        this.setState({
-            open: false
-        });
+        if (!clickOnToggle) {
+            document.removeEventListener('click', this.evtHandlers.clickOutside);
+            this.setState({
+                open: false
+            });
+        }
     }
 
     public componentWillUnmount() {
@@ -44,9 +50,6 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
     public toggleMenu(e) {
 
-        e.preventDefault();
-        e.stopPropagation();
-
         const newState = !this.state.open;
 
         this.setState({
@@ -106,6 +109,7 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
         // Clone the trigger button passed in and add an onClick listener
         const trigger = React.cloneElement(button, {
+            buttonRef: this.toggleRef,
             onClick: this.evtHandlers.toggleMenu,
             active: open
         });

package/components/dropdown/dropdown.tsx

@@ -71,7 +71,6 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
     }
 
     private onEsc = (e : any) : void => {
-        const {onOutsideClick} = this.props;
 
         if (e.keyCode === ImposiumDropdown.ESC_CODE) {
             this.cancelRender(true);
@@ -79,14 +78,13 @@ export default class ImposiumDropdown extends React.PureComponent<IDropdownMenuP
     }
 
     private detectOutsideClick = (e : any) : void => {
-        const {toggleRef, onOutsideClick} = this.props;
+        const {toggleRef} = this.props;
         const {target} = e;
 
-        if (
-            this.dropdownRef.current &&
-            !this.dropdownRef.current.contains(target) &&
-            !toggleRef.current.contains(target)
-        ) {
+        const clickInside = (this.dropdownRef.current && this.dropdownRef.current.contains(target)) ? true : false;
+        const clickOnToggle = (toggleRef && toggleRef.current && toggleRef.current.contains(target)) ? true : false;
+
+        if (!clickInside && !clickOnToggle) {
             this.cancelRender(true);
         }
     }

package/components/players/ImagePreview.tsx

@@ -1,29 +1,55 @@
 import * as React from 'react';
 import Portal from '../portal/Portal';
-
+import {ICON_TIMES} from '../../constants/icons';
+import Button from '../button/Button';
+import {assets as copy} from '../../constants/copy';
 interface IVideoPreviewProps {
     showMedia : boolean;
     url : string;
     playbackSettings? : any;
     style? : React.CSSProperties | any;
+    onRequestClose?(e) : void;
 }
 
 class ImagePreview extends React.PureComponent<IVideoPreviewProps> {
     private imageNode : any = null;
+    private evtHandlers : any;
     constructor(props) {
         super(props);
         this.imageNode = React.createRef();
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+    }
+
+    private onClose(e) {
+
+        const {onRequestClose} = this.props;
+
+        onRequestClose(e);
     }
     public render() {
         const {showMedia, url, style} = this.props;
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
+                    <div style={{...style}} className={'close-icon-preview'}>
+                            <Button
+                                key = 'btn-filter'
+                                onClick = {this.evtHandlers.onClose}
+                                size={'large'}
+                                style = 'subtle'
+                                tooltip = {copy.field.tooltipFilter}
+                                >
+                                {ICON_TIMES}
+                            </Button>
+                    </div>
                     <img
                         src={url}
                         ref={this.imageNode}
-                        className='media-preview'
-                        style={style}/>
+                        className='asset-preview-background'
+                        style={style}
+                    />
                 </Portal>
             );
         } else {

package/components/players/VideoPreview.tsx

@@ -1,24 +1,50 @@
 import * as React from 'react';
 import Portal from '../portal/Portal';
+import Button from '../button/Button';
+import {assets as copy} from '../../constants/copy';
+import {ICON_TIMES} from '../../constants/icons';
 
 interface IVideoPreviewProps {
     showMedia : boolean;
     url : string;
     playbackSettings? : any;
     style? : React.CSSProperties | {};
+    onRequestClose?(e) : void;
 }
 
 class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
     private videoNode : any = null;
+    private evtHandlers : any;
     constructor(props) {
         super(props);
         this.videoNode = React.createRef();
+        this.evtHandlers = {
+            onClose: (e) => this.onClose(e)
+        };
+    }
+
+    private onClose(e) {
+
+        const {onRequestClose} = this.props;
+
+        onRequestClose(e);
     }
     public render() {
         const {showMedia, url, playbackSettings, style} = this.props;
         if (showMedia) {
             return (
                 <Portal id='portal-root'>
+                    <div style={{...style}} className={'close-icon-preview'}>
+                        <Button
+                            key = 'btn-filter'
+                            onClick = {this.evtHandlers.onClose}
+                            size={'large'}
+                            style = 'subtle'
+                            tooltip = {copy.field.tooltipFilter}
+                        >
+                            {ICON_TIMES}
+                        </Button>
+                    </div>
                     <video
                         style = {style}
                         muted
@@ -28,7 +54,8 @@ class VideoPreview extends React.PureComponent<IVideoPreviewProps> {
                         controls
                         preload = 'preload'
                         src={url}
-                        className='media-preview' />
+                        className='asset-preview-background'
+                    />
                 </Portal>
             );
         } else {