@imposium-hub/components 1.60.14 → 1.60.16

package/src/components/assets/AssetsTableTagsPivot.tsx

@@ -6,8 +6,6 @@ import { addAssetTag, deleteAssetTag } from '../../redux/actions/asset-list';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { IImposiumAPI } from '../../services/API';
-import Button from '../button/Button';
-import { ICON_TIMES } from '../../constants/icons';
 import { getAssetTagList } from '../../redux/actions/asset-tags';
 
 interface IAssetsTableTagsPivotProps {
@@ -80,16 +78,6 @@ class AssetsTableTagsPivot extends React.PureComponent<IAssetsTableTagsPivotProp
                         doSubmit={(t) => this.addTags(id, t)}
                     />
                     {tagsMarkup}
-                    <Button
-                        customStyles={{
-                            position: 'absolute',
-                            right: '1px',
-                            top: '9px'
-                        }}
-                        style='subtle'
-                        onClick={(e) => this.props.onClose(e, this.props.row)}>
-                        {ICON_TIMES}
-                    </Button>
                 </>
             </div>
         );

package/src/components/data-table/DataTable.tsx

@@ -89,6 +89,8 @@ interface IDataTableProps {
     renderPivotComponent?: (row) => JSX.Element;
 
     disableKeyScroll?: boolean;
+
+    expandTags?: boolean;
 }
 
 const processColumnData = (freshColumns): any[] => {
@@ -203,6 +205,10 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
         setColumns(processColumnData(props.columns));
     }, [props.columns]);
 
+    React.useEffect(() => {
+        setHiddenColumns(columns.filter((column) => !column.show).map((column) => column.accessor));
+    }, [setHiddenColumns, columns]);
+
     // Execute if hidden column ids change
     React.useEffect(() => {
         if (didMount && Array.isArray(props.hiddenColumns)) {
@@ -217,6 +223,10 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
         }
     }, [props.data]);
 
+    React.useEffect(() => {
+        toggleAllRowsExpanded(props.expandTags);
+    }, [props.expandTags]);
+
     // Execute when page or itemsPerPage changes
     React.useEffect(() => {
         if (didMount && manualPagination) {
@@ -264,13 +274,20 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                                     : null}
                                             </span>
                                         );
+                                        const { width, minWidth } = column;
 
                                         return (
                                             <th
                                                 {...column.getHeaderProps()}
                                                 className={`ip-table-header ${
                                                     column.canSort ? 'ip-sortable' : ''
-                                                }`}>
+                                                }`}
+                                                style={{
+                                                    minWidth: `${minWidth}px`,
+                                                    width: `${width}px`,
+                                                    maxWidth: `${width}px`,
+                                                    position: 'relative'
+                                                }}>
                                                 {!searchable && (
                                                     <div
                                                         {...toggleProps}
@@ -293,7 +310,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                                     </div>
                                                 )}
 
-                                                {column.canResize && (
+                                                {column.shouldResize && (
                                                     <div
                                                         {...column.getResizerProps()}
                                                         className={`ip-table-resizer ${
@@ -371,15 +388,24 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                             }
                         };
 
-                        const rowContent = row.cells.map((cell) => (
-                            <td
-                                {...cell.getCellProps()}
-                                className={`ip-table-col ${
-                                    cell.column.overflowVisible ? 'overflow-visible' : ''
-                                }`.trim()}>
-                                {cell.render('Cell')}
-                            </td>
-                        ));
+                        const rowContent = row.cells.map((cell) => {
+                            const { width, minWidth } = cell.column;
+                            return (
+                                <td
+                                    {...cell.getCellProps()}
+                                    className={`ip-table-col ${
+                                        cell.column.overflowVisible ? 'overflow-visible' : ''
+                                    }`.trim()}
+                                    style={{
+                                        flex: `${width} 0 auto`,
+                                        minWidth: `${minWidth}px`,
+                                        width: `${width}px`,
+                                        maxWidth: `${width}px`
+                                    }}>
+                                    {cell.render('Cell')}
+                                </td>
+                            );
+                        });
                         const rowId = row?.original?.id || i;
                         const rowKey = `row-${rowId}`;
 
@@ -408,8 +434,8 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
 
                                 {row.isExpanded && (
                                     <tr
-                                        key={rowKey}
-                                        {...row.getRowProps({ key: rowKey })}
+                                        key={`${rowKey}-expanded`}
+                                        {...row.getRowProps({ key: `${rowKey}-expanded` })}
                                         className='ip-pivot-row'>
                                         <td
                                             className={`ip-pivot-col ${selectedClass}`}

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -172,6 +172,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 }
             );
         }
+
+        this.createExperience();
     }
 
     public componentDidUpdate(prevProps, prevState) {
@@ -682,6 +684,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         maxWidth={mWidth}
                         allowManualScale={true}
                         maxHeight={mHeight}
+                        autoPlay
                     />
                 );
             } else if (type === OUTPUT_TYPES.LOG) {

package/src/components/text-field/TextField.tsx

@@ -43,6 +43,7 @@ interface ITextFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
+    className?: string;
 }
 
 interface ITextFieldState {
@@ -479,10 +480,10 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public render() {
-        const { label, width, tooltip, info, labelPosition, labelWidth } = this.props;
+        const { label, width, tooltip, info, labelPosition, labelWidth, className } = this.props;
         return (
             <FieldWrapper
-                customClass='text-field'
+                customClass={`text-field ${className}`}
                 label={label}
                 buttons={this.renderButtons()}
                 tooltip={tooltip}

package/src/constants/copy.ts

@@ -45,7 +45,9 @@ export const assets = {
     assetTag: 'Tags',
     sessionExpired: 'Your session has expired, please log in again to continue.',
     rate: 'Frame Rate',
-    duration: 'Duration'
+    duration: 'Duration',
+    width: 'Width',
+    height: 'Height'
 };
 
 export const previewer = {