@imposium-hub/components 1.24.3 → 1.24.4

package/components/assets/AssetsTypeIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ASSET_TYPES } from '../../constants/assets';
+import { ASSET_COLORS, ASSET_TYPES } from '../../constants/assets';
 import { assets as copy } from '../../constants/copy';
 import {
     ICON_FILTER, ICON_TIMES, ICON_VIDEO, ICON_AUDIO_TYPE, ICON_FONT, ICON_LAYER_GROUP, ICON_CUBE,
@@ -11,6 +11,11 @@ interface IAssetsTypeIconProps {
 }
 
 const AssetsTypeIcon : React.FC<IAssetsTypeIconProps> = (p : IAssetsTypeIconProps) => {
+
+    const style = {
+        color: ASSET_COLORS[p.type]
+    };
+
     switch (p.type) {
         case 'filter':
             return (
@@ -26,37 +31,37 @@ const AssetsTypeIcon : React.FC<IAssetsTypeIconProps> = (p : IAssetsTypeIconProp
             );
         case ASSET_TYPES.VIDEO:
             return (
-                <span title = {copy.iconTypes.video}>
+                <span title = {copy.iconTypes.video} style = {style}>
                     {ICON_VIDEO}
                 </span>
             );
         case ASSET_TYPES.AUDIO:
             return (
-                <span title = {copy.iconTypes.audio}>
+                <span title = {copy.iconTypes.audio} style = {style}>
                     {ICON_AUDIO_TYPE}
                 </span>
             );
         case ASSET_TYPES.IMAGE:
             return (
-                <span title = {copy.iconTypes.image}>
+                <span title = {copy.iconTypes.image} style = {style}>
                     {ICON_IMAGE}
                 </span>
             );
         case ASSET_TYPES.IMAGE_SEQUENCE:
             return (
-                <span title = {copy.iconTypes.image_sequence}>
+                <span title = {copy.iconTypes.image_sequence} style = {style}>
                     {ICON_IMAGE_SEQ_TYPE}
                 </span>
             );
         case ASSET_TYPES.TEMPLATE:
             return (
-                <span title = {copy.iconTypes.template}>
+                <span title = {copy.iconTypes.template} style = {style}>
                     {ICON_FILE_ARCHIVE}
                 </span>
             );
         case ASSET_TYPES.VIDEO_COMPOSITION:
             return (
-                <span title = {copy.iconTypes.video_composition}>
+                <span title = {copy.iconTypes.video_composition} style = {style}>
                     {ICON_LAYER_GROUP}
                 </span>
             );

package/components/tabs/Tabs.tsx

@@ -22,6 +22,8 @@ interface ITabsProps {
     onChange(i) : void;
     onClose(i) : void;
     tabPadding? : number;
+    width : number;
+    height : number;
 }
 
 interface ITabsState {
@@ -88,7 +90,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
 
     private renderContent() {
 
-        const {options, activeTab, keepMounted} = this.props;
+        const {options, activeTab, keepMounted, width, height} = this.props;
 
         if (keepMounted) {
 
@@ -99,14 +101,16 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                 const active = (option.key === activeTab);
 
                 const content = React.cloneElement(option.content, {
-                    active
+                    active,
+                    width,
+                    height
                 });
 
                 contentArray.push(content);
             }
 
             if (contentArray.length > 0) {
-                return <ReactResizeDetector handleWidth handleHeight>{contentArray}</ReactResizeDetector>;
+                return contentArray;
             } else {
                 return null;
             }
@@ -116,7 +120,7 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
 
                 if (option.key === activeTab || !activeTab) {
 
-                    return <ReactResizeDetector handleWidth handleHeight>{option.content}</ReactResizeDetector>;
+                    return option.content;
                 }
             }
             return null;

package/constants/assets.ts

@@ -14,3 +14,12 @@ export const ASSET_TYPES = {
     LUT : 'lut',
     ALL : 'all'
 };
+
+export const ASSET_COLORS = {
+    [ASSET_TYPES.VIDEO]: 'rgba(236,22,150, 1)',
+    [ASSET_TYPES.IMAGE]: 'rgba(241,191,21, 1)',
+    [ASSET_TYPES.AUDIO]: 'rgba(72,177,222,1)',
+    [ASSET_TYPES.TEMPLATE]: 'rgba(208, 80, 35, 1)',
+    [ASSET_TYPES.VIDEO_COMPOSITION]: 'rgba(215, 22, 22, 1)',
+    [ASSET_TYPES.IMAGE_SEQUENCE]: 'rgba(241,191,21, 1)',
+};