@imposium-hub/components 1.31.1 → 1.32.1

package/components/assets/DataTableDnDWrapper.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useDrag } from 'react-dnd';
-import { ASSET_DND_TYPES } from '../../constants/dnd';
-
-const DRAGGER_NAME : string = 'Asset';
+import mergeRefs from 'react-merge-refs';
 
 interface IDataTableDnDWrapper {
     children : any;
     dndType : string;
     dndName : string;
     row : any;
+    rowRef : any;
+    rowProps : any;
 }
 
 const DataTableDndWrapper : React.FC<IDataTableDnDWrapper> = (props : IDataTableDnDWrapper) => {
@@ -25,9 +25,9 @@ const DataTableDndWrapper : React.FC<IDataTableDnDWrapper> = (props : IDataTable
         });
 
         return (
-            <div ref = {drag}>
+            <tr {...props.rowProps} ref={mergeRefs([drag, props.rowRef])}>
                 {props.children}
-            </div>
+            </tr>
         );
 };
 

package/components/compositions/CompositionRendererLayer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Moveable from 'react-moveable';
+import hotkeys from 'hotkeys-js';
 import TextLayer from './TextLayer';
 
 interface ICompositionRendererLayerProps {
@@ -11,7 +12,11 @@ interface ICompositionRendererLayerProps {
     onUpdate(l : any) : void;
 }
 
-class CompositionRendererLayer extends React.PureComponent<ICompositionRendererLayerProps, undefined> {
+interface ICompositionRendererLayerState {
+    lockRatio : boolean;
+}
+
+class CompositionRendererLayer extends React.PureComponent<ICompositionRendererLayerProps, ICompositionRendererLayerState> {
 
     private evtHandlers;
     private moveable;
@@ -26,10 +31,43 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
             onDrag: (e) => this.handleDrag(e),
             onResize: (e) => this.handleResize(e),
             onRotate: (e) => this.handleRotate(e),
-            onClick: (e) => this.layerClicked(e)
+            onClick: (e) => this.layerClicked(e),
+            onShift: (e) => this.onShift(e),
+            onLeft: (e) => this.move(e, -1, 0),
+            onRight: (e) => this.move(e, 1, 0),
+            onUp: (e) => this.move(e, 0, -1),
+            onDown: (e) => this.move(e, 0, 1),
         };
 
         this.moveable = React.createRef();
+
+        this.state = {
+            lockRatio: false
+        };
+    }
+
+    private move(e, x, y) {
+
+        if (this.props.selected) {
+            const shiftX = (e.shiftKey) ? x * 10 : x;
+            const shiftY = (e.shiftKey) ? y * 10 : y;
+
+            const newLayer = {...this.props.layer};
+            newLayer.x = newLayer.x + shiftX;
+            newLayer.y = newLayer.y + shiftY;
+
+            this.props.onUpdate(newLayer);
+        }
+    }
+
+    private onShift(e) {
+
+        if (e.key === 'Shift' && e.keyCode === 16 && this.props.selected) {
+            const lockRatio = (e.type === 'keydown') ? true : false;
+            this.setState({
+                lockRatio
+            });
+        }
     }
 
     public componentDidUpdate() {
@@ -40,6 +78,24 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
         }
     }
 
+    public componentDidMount() {
+
+        hotkeys('*', {keyup: true}, this.evtHandlers.onShift);
+        hotkeys('left, shift+left', this.evtHandlers.onLeft);
+        hotkeys('right, shift+right', this.evtHandlers.onRight);
+        hotkeys('up, shift+up', this.evtHandlers.onUp);
+        hotkeys('down, shift+down', this.evtHandlers.onDown);
+    }
+
+    public componentWillUnmount() {
+
+        hotkeys.unbind('*', this.evtHandlers.onShift);
+        hotkeys.unbind('left, shift+left', this.evtHandlers.onLeft);
+        hotkeys.unbind('right, shift+right', this.evtHandlers.onRight);
+        hotkeys.unbind('up, shift+up', this.evtHandlers.onUp);
+        hotkeys.unbind('down, shift+down', this.evtHandlers.onDown);
+    }
+
     private handleDrag(e) {
 
         const newLayer = {...this.props.layer};
@@ -51,9 +107,13 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
 
     private handleResize(e) {
 
+        const {drag: {beforeDelta}, width, height} = e;
+
         const newLayer = {...this.props.layer};
-        newLayer.width = Math.round(e.width);
-        newLayer.height = Math.round(e.height);
+        newLayer.width = Math.round(width);
+        newLayer.height = Math.round(height);
+        newLayer.x = Math.round(newLayer.x + beforeDelta[0]);
+        newLayer.y = Math.round(newLayer.y + beforeDelta[1]);
 
         this.props.onUpdate(newLayer);
     }
@@ -95,6 +155,7 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
     public render() {
 
         const { selected, layer } = this.props;
+        const { lockRatio } = this.state;
 
         const layerClass = `comp-layer-${layer.id}`;
         const layerStyle : any = {
@@ -114,6 +175,7 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
             onResizeEnd = {this.evtHandlers.onResizeEnd}
             onRotate = {this.evtHandlers.onRotate}
             onRotateEnd = {this.evtHandlers.onRotateEnd}
+            keepRatio = {lockRatio}
             resizable = {true}
             rotatable = {true}
             origin = {false}

package/components/data-table/DataTable.tsx

@@ -348,42 +348,48 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
 
                         prepareRow(row);
 
-                        const rowContent = <>
-                            <tr
-                                {...row.getRowProps()}
-                                ref = {activeRef}
-                                className = {`ip-table-row ${selectedClass}`}
-                                onClick = {(e) => {
-                                    const onClick = () => {
-                                        if (typeof props.onRowClick === 'function') {
-                                            props.onRowClick(row);
-                                        }
-                                    };
-
-                                    if (!doubleClickEnabled) {
-                                        onClick();
-                                    }
-
-                                    if (e.detail === 1 && doubleClickEnabled) {
-                                        doubleClickTimeout = window.setTimeout(onClick, 200);
-                                    }
-                                }}
-                                onDoubleClick = {(e) => {
-                                    clearTimeout(doubleClickTimeout);
-                                    if (doubleClickEnabled) {
-                                        props.onRowDoubleClick(row);
-                                    }
-                                }}
+                        const rowProps = row.getRowProps();
+                        rowProps.className = `ip-table-row ${selectedClass}`;
+                        rowProps.onClick = (e) => {
+                            const onClick = () => {
+                                if (typeof props.onRowClick === 'function') {
+                                    props.onRowClick(row);
+                                }
+                            };
+
+                            if (!doubleClickEnabled) {
+                                onClick();
+                            }
+
+                            if (e.detail === 1 && doubleClickEnabled) {
+                                doubleClickTimeout = window.setTimeout(onClick, 200);
+                            }
+                        };
+                        rowProps.onDoubleClick = (e) => {
+                            clearTimeout(doubleClickTimeout);
+                            if (doubleClickEnabled) {
+                                props.onRowDoubleClick(row);
+                            }
+                        };
+
+                        const rowContent = row.cells.map((cell) => (
+                            <td
+                                {...cell.getCellProps()}
+                                className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
                             >
-                                {row.cells.map((cell) => (
-                                    <td
-                                        {...cell.getCellProps()}
-                                        className = {`ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim()}
-                                    >
-                                        {cell.render('Cell')}
-                                    </td>
-                                ))}
-                            </tr>
+                                {cell.render('Cell')}
+                            </td>
+                        ));
+
+                        return <React.Fragment key = {`row-${i}`}>
+
+                            {(props.dnd) && <DataTableDnDWrapper rowProps = {rowProps} rowRef = {activeRef} key = {`row-${i}`} row = {row} dndType = {props.dndType} dndName = {props.dndName}>
+                                {rowContent}
+                            </DataTableDnDWrapper>}
+
+                            {(!props.dnd) && <tr key = {`row-${i}`} ref = {activeRef} {...rowProps}>
+                                {rowContent}
+                            </tr>}
 
                             {(row.isExpanded) &&
                                 (
@@ -400,18 +406,7 @@ const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
                                     </tr>
                                 )
                             }
-                        </>;
-
-                        if (props.dnd) {
-                            return <DataTableDnDWrapper key = {`row-${i}`} row = {row} dndType = {props.dndType} dndName = {props.dndName}>
-                                {rowContent}
-                            </DataTableDnDWrapper>;
-                        } else {
-
-                            return <React.Fragment key = {`row-${i}`}>
-                                {rowContent}
-                            </React.Fragment>;
-                        }
+                        </React.Fragment>;
                     })}
                 </tbody>
             </table>

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

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import AnsiUp from 'ansi_up';
+import { fitToContainer } from '../../Util';
+import { previewer as copy} from '../../constants/copy';
+import { IImposiumAPI } from '../../services/API';
+
+interface ILogViewerProps {
+    jobId : string;
+    onError?(e : string) : void;
+    api : IImposiumAPI;
+}
+
+interface ILogViewerState {
+    loading : boolean;
+    log : string;
+}
+
+class LogViewer extends React.PureComponent<ILogViewerProps, ILogViewerState> {
+
+    private videoNode : any;
+    private ansi_up : any;
+
+    constructor(props) {
+
+        super(props);
+
+        this.state = {
+            loading : true,
+            log: ''
+        };
+
+        this.ansi_up = new AnsiUp();
+        this.ansi_up.use_classes = true;
+    }
+
+    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) => {
+                if (onError) {
+                    onError(copy.logDownloadError.replace('[jobId]', 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() {
+
+        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>
+        );
+    }
+}
+
+export default LogViewer;