@imposium-hub/components 1.22.3 → 1.24.0

package/components/assets/AssetField.tsx

@@ -73,9 +73,10 @@ class AssetField extends React.PureComponent<IAssetFieldProps, IAssetFieldState>
         this.props.updateFilters({type: (accepts) ? accepts : '', page: 1});
     }
 
-    private onFileDrop = (i : any, monitor : DropTargetMonitor) : void => {
+    private onFileDrop = (i : any, monitor : any) : void => {
         const {accepts, storyId, api} = this.props;
         if (monitor) {
+
             const {files} = monitor.getItem();
 
             if (mimetypeConformsToOverlay(accepts, files[0])) {

package/components/assets/AssetsTableNameCell.tsx

@@ -20,6 +20,7 @@ const AssetsTableNameCell : React.FC<IAssetsTableNameCell> = (props : IAssetsTab
         const {cell: {row, row: {original: {name, id}}}} = props;
 
         const [_, drag] = useDrag({
+            type: ASSET_DND_TYPES.ASSET_NAME,
             item: {
                 name: DRAGGER_NAME,
                 assetData: row.original,

package/components/assets/FontAssetPreview.tsx

@@ -30,7 +30,7 @@ class FontAssetPreview extends React.PureComponent<IFontAssetPreviewProps, undef
 
     public render() {
 
-        const {active, asset: {name, url, id}} = this.props;
+        const {active, asset: {name, url, id}, width, height} = this.props;
         const wrapperStyle = this.getWrapperStyle();
 
         if (active !== false) {
@@ -38,24 +38,29 @@ class FontAssetPreview extends React.PureComponent<IFontAssetPreviewProps, undef
                 <div className = 'media-player'>
                     <div className = 'inner-viewer' style = {wrapperStyle}>
                         <TextLayer
-                            width = {wrapperStyle.width}
-                            height = {wrapperStyle.height}
                             options = {{
+                                width,
+                                height,
+                                x: 0,
+                                y: 0,
+                                rotation: 0,
+                                id: 'xxx',
+                                name: 'xxx',
                                 content: `ABCDEFGHIJKLM\nNOPQRSTUVWXYZ\nabcdefghijklm\nnopqrstuvwxyz\n1234567890`,
                                 color: '#000000',
-                                backgroundColor: '#ffffff',
-                                fontSize: 80,
-                                fontType: 'custom',
+                                background_color: '#ffffff',
+                                font_size: 80,
+                                font_type: 'custom',
                                 font: name,
-                                customFontUrl: url,
-                                customFontId: id,
-                                letterSpacing: null,
-                                wordSpacing: null,
-                                lineHeight: null,
-                                hAlign: 'center',
-                                vAlign: 'center',
-                                textWrap: true,
-                                textFit: true
+                                custom_font_url: url,
+                                custom_font_id: id,
+                                letter_spacing: null,
+                                word_spacing: null,
+                                line_height: null,
+                                horizontal_alignment: 'center',
+                                vertical_alignment: 'center',
+                                text_wrap: true,
+                                text_fit: true
                             }}/>
                     </div>
                 </div>

package/components/button-menu/ButtonMenu.tsx

@@ -24,11 +24,11 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
         this.evtHandlers = {
             toggleMenu: (e) => this.toggleMenu(e),
-            clickOutside: (e) => this.handleClickOutside()
+            clickOutside: (e) => this.handleClickOutside(e)
         };
     }
 
-    private handleClickOutside() {
+    private handleClickOutside(e) {
 
         document.removeEventListener('click', this.evtHandlers.clickOutside);
 
@@ -44,16 +44,19 @@ class ButtonMenu extends React.PureComponent<IButtonMenuProps, IButtonMenuState>
 
     public toggleMenu(e) {
 
-        const newState = !this.state.open;
+        e.preventDefault();
+        e.stopPropagation();
 
-        if (newState === true) {
-            document.addEventListener('click', this.evtHandlers.clickOutside);
-        } else {
-            document.removeEventListener('click', this.evtHandlers.clickOutside);
-        }
+        const newState = !this.state.open;
 
         this.setState({
             open : newState
+        }, () => {
+            if (this.state.open) {
+                document.addEventListener('click', this.evtHandlers.clickOutside);
+            } else {
+                document.removeEventListener('click', this.evtHandlers.clickOutside);
+            }
         });
     }
 

package/components/color-field/ColorField.tsx

@@ -42,18 +42,21 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
         this.clickOutsideHandler = (e) => this.handleClickOutside(e);
     }
 
-    private togglePicker() {
+    private togglePicker(e) {
 
-        const newState = !this.state.pickerOpen;
+        e.preventDefault();
+        e.stopPropagation();
 
-        if (newState === true) {
-            document.addEventListener('click', this.clickOutsideHandler);
-        } else {
-            document.removeEventListener('click', this.clickOutsideHandler);
-        }
+        const newState = !this.state.pickerOpen;
 
         this.setState({
             pickerOpen: newState
+        }, () => {
+            if (this.state.pickerOpen) {
+                document.addEventListener('click', this.clickOutsideHandler);
+            } else {
+                document.removeEventListener('click', this.clickOutsideHandler);
+            }
         });
     }
 
@@ -118,7 +121,7 @@ class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState>
             info = {info}
             labelPosition = {labelPosition}
             width = {width}>
-            <div className = 'swatch' style = {swatchStyle} onClick = {() => this.togglePicker()}/>
+            <div className = 'swatch' style = {swatchStyle} onClick = {(e) => this.togglePicker(e)}/>
             <div className = {`picker picker-${pickerPos}`} ref = {this.picker}>
                 {picker}
             </div>

package/components/compositions/CompositionRendererLayer.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Moveable from 'react-moveable';
 import TextLayer from './TextLayer';
-import { COMPOSITION_LAYER_TYPES} from '../../constants/compositions';
 
 interface ICompositionRendererLayerProps {
     layer : any;
@@ -87,21 +86,10 @@ class CompositionRendererLayer extends React.PureComponent<ICompositionRendererL
 
         const {layer, inventory} = this.props;
 
-        switch (layer.type) {
-
-            case COMPOSITION_LAYER_TYPES.TEXT:
-
-                return <TextLayer
-                    width = {layer.width}
-                    height = {layer.height}
-                    onReady = {this.props.onReady}
-                    inventory = {inventory}
-                    options = {layer.options}/>;
-
-            case COMPOSITION_LAYER_TYPES.IMAGE:
-        }
-
-        return null;
+        return <TextLayer
+            onReady = {this.props.onReady}
+            inventory = {inventory}
+            options = {layer}/>;
     }
 
     public render() {

package/components/compositions/StaticCompositionConfig.tsx

@@ -8,9 +8,9 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import ButtonMenu from '../button-menu/ButtonMenu';
 import Button from '../button/Button';
 import ButtonMenuItem from '../button-menu/ButtonMenuItem';
-import { COMPOSITION_LAYER_TYPES, getNewCompositionLayer } from '../../constants/compositions';
+import { getNewCompositionLayer } from '../../constants/compositions';
 import { ICON_PLUS, ICON_IMAGE, ICON_FONT } from '../../constants/icons';
-import StaticCompositionLayerConfig from './StaticCompositionLayerConfig';
+import TextLayerOptions from './TextLayerOptions';
 
 interface IStaticCompositionConfigProps {
     storyId : string;
@@ -40,41 +40,18 @@ class StaticCompositionConfig extends React.PureComponent<IStaticCompositionConf
             selectLayer: (l) => this.props.onSelectLayer(l)
         };
 
-        this.addLayerMenu = <ButtonMenu
-            position = 'right'
-            items  = {[
-                <ButtonMenuItem
-                    key = {COMPOSITION_LAYER_TYPES.TEXT}
-                    label = {<span>{ this.getLayerIcon(COMPOSITION_LAYER_TYPES.TEXT) }&nbsp;&nbsp;{copy.layerText}</span>}
-                    onClick = {() => this.addLayer(COMPOSITION_LAYER_TYPES.TEXT)}/>,
-                <ButtonMenuItem
-                    key = {COMPOSITION_LAYER_TYPES.IMAGE}
-                    label = {<span>{ this.getLayerIcon(COMPOSITION_LAYER_TYPES.IMAGE) }&nbsp;&nbsp;{copy.layerImage}</span>}
-                    onClick = {() => this.addLayer(COMPOSITION_LAYER_TYPES.IMAGE)}/>
-            ]}
-            button = {<Button
-                style = 'subtle'
-                size = 'small'
-                color = 'primary'>
-                {ICON_PLUS}
-            </Button>}/>;
+        this.addLayerMenu = <Button
+            onClick = {() => this.addLayer()}
+            style = 'subtle'
+            size = 'small'
+            color = 'primary'>
+            {ICON_PLUS}
+        </Button>;
     }
 
-    private getLayerIcon(type) {
+    private addLayer() {
 
-        switch (type) {
-
-            case COMPOSITION_LAYER_TYPES.TEXT:
-                return ICON_FONT;
-            case COMPOSITION_LAYER_TYPES.IMAGE:
-                return ICON_IMAGE;
-        }
-        return null;
-    }
-
-    private addLayer(type) {
-
-        const layerConfig = getNewCompositionLayer(type);
+        const layerConfig = getNewCompositionLayer();
         const comp = {...this.props.composition};
         const layers = [...comp.layers];
         layers.push(layerConfig);
@@ -104,17 +81,17 @@ class StaticCompositionConfig extends React.PureComponent<IStaticCompositionConf
     private bgChanged(color) {
 
         if (color.hex === 'transparent') {
-            this.compValueChanged('backgroundColor', null);
+            this.compValueChanged('background_color', null);
         } else {
             const values = color.rgb;
-            this.compValueChanged('backgroundColor', `rgba(${values.r},${values.g},${values.b},${values.a})`);
+            this.compValueChanged('background_color', `rgba(${values.r},${values.g},${values.b},${values.a})`);
         }
     }
 
     public render() {
 
         const {composition, selectedLayer, storyId, api} = this.props;
-        const bg = (composition.backgroundColor) ? composition.backgroundColor : 'transparent';
+        const bg = (composition.background_color) ? composition.background_color : 'transparent';
         const layerLabel = <span>{copy.layers}&nbsp;{this.addLayerMenu}</span>;
 
         return (
@@ -137,7 +114,7 @@ class StaticCompositionConfig extends React.PureComponent<IStaticCompositionConf
                     label = {copy.backgroundColor}
                     tooltip = {copy.tooltipBackgroundColor}
                     enableAlpha = {true}
-                    value = {composition['backgroundColor']}
+                    value = {composition['background_color']}
                     width  = '40%'
                     labelPosition = 'top'
                     pickerPosition = 'right'
@@ -148,14 +125,14 @@ class StaticCompositionConfig extends React.PureComponent<IStaticCompositionConf
                     labelPosition = 'top'>
                     {composition.layers.map((layer, i) => {
                         const selected = (layer.id === selectedLayer);
-                        return <StaticCompositionLayerConfig
+                        return <TextLayerOptions
                             storyId = {storyId}
                             api = {api}
                             key = {layer.id}
                             selected = {selected}
                             onSelectLayer = {this.eventHandlers.selectLayer}
                             onUpdate = {(c) => this.updateLayer(i, c)}
-                            layer = {layer}/>;
+                            options = {layer}/>;
                     })}
                 </FieldWrapper>
             </>

package/components/compositions/StaticCompositionRenderer.tsx

@@ -99,15 +99,15 @@ class StaticCompositionRenderer extends React.PureComponent<IStaticCompositionRe
 
     public render() {
 
-        const {composition: {width, height, backgroundColor}} = this.props;
+        const {composition: {width, height, background_color}} = this.props;
 
         const style : any = {
             width: `${width}px`,
             height: `${height}px`
         };
 
-        if (backgroundColor) {
-            style.backgroundColor = backgroundColor;
+        if (background_color) {
+            style.backgroundColor = background_color;
         }
 
         return (

package/components/compositions/TextLayer.tsx

@@ -1,15 +1,13 @@
 
 import * as React from 'react';
 import { ASSET_DISTRO, ASSET_ORIGIN } from '../../constants/assets';
-import { ITextLayerOptions, FONT_TYPES} from '../../constants/compositions';
+import { ITextLayer, FONT_TYPES} from '../../constants/compositions';
 import { s3Url } from '../../Util';
 
 interface ITextLayerProps {
     inventory? : any;
     onReady?() : void;
-    width : number;
-    height : number;
-    options : ITextLayerOptions;
+    options : ITextLayer;
 }
 
 interface ITextLayerState {
@@ -39,10 +37,10 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
     public componentDidUpdate(prevProps) {
 
         const {fontLoaded} = this.state;
-        const {options: {font, customFontId, content}} = this.props;
+        const {options: {font, custom_font_id, content}} = this.props;
 
         if (prevProps.options.font !== font ||
-            prevProps.options.customFontId !== customFontId) {
+            prevProps.options.custom_font_id !== custom_font_id) {
             this.loadFont();
         }
 
@@ -55,11 +53,6 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
 
         const computedStyle = window.getComputedStyle(element, null);
 
-        // element.style.fontSize = '';
-        // element.style.letterSpacing = '';
-        // element.style.wordSpacing = '';
-        // element.style.lineHeight = '';
-
         let fSize = parseFloat(computedStyle.getPropertyValue('font-size'));
         let lSpace = parseFloat(computedStyle.getPropertyValue('letter-spacing'));
         let lHeight = parseFloat(computedStyle.getPropertyValue('line-height'));
@@ -91,14 +84,14 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
 
     private loadFont() {
 
-        const {options: {font, fontSize, fontType, customFontUrl}} = this.props;
+        const {options: {font, font_size, font_type, custom_font_url}} = this.props;
 
-        if (fontType === FONT_TYPES.CUSTOM && fontSize && customFontUrl) {
+        if (font_type === FONT_TYPES.CUSTOM && font_size && custom_font_url) {
 
-            const fontOrigin = s3Url(customFontUrl, ASSET_DISTRO, ASSET_ORIGIN);
+            const fontOrigin = s3Url(custom_font_url, ASSET_DISTRO, ASSET_ORIGIN);
 
             // Not sure why you need to pass the size in here, but .check() throws an error without it.
-            const loaded = document.fonts.check(`${fontSize}px ${font}`);
+            const loaded = document.fonts.check(`${font_size}px ${font}`);
 
             if (!loaded) {
                 this.setState({
@@ -117,7 +110,7 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
                 this.fontReady();
             }
 
-        } else if (fontType === FONT_TYPES.STANDARD) {
+        } else if (font_type === FONT_TYPES.STANDARD) {
 
             // TODO: check this?
             this.fontReady();
@@ -156,10 +149,10 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
 
     private fitText() {
 
-        if (this.props.options.textFit) {
+        if (this.props.options.text_fit) {
             const text = this.innerTextRef.current;
             if (text) {
-                this.fitElement(text, this.props.width, this.props.height);
+                this.fitElement(text, this.props.options.width, this.props.options.height);
             }
         }
     }
@@ -191,14 +184,14 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
 
     public render() {
 
-        const {options: {color, backgroundColor, lineHeight, wordSpacing,
-            letterSpacing, fontSize, font, hAlign, vAlign, textWrap}} = this.props;
+        const {options: {color, background_color, line_height, word_spacing,
+            letter_spacing, font_size, font, horizontal_alignment, vertical_alignment, text_wrap}} = this.props;
 
-        const whiteSpace = (textWrap) ? 'normal' : 'nowrap';
-        const lS = (letterSpacing) ? `${letterSpacing}px` : 'normal';
-        const wS = (wordSpacing) ? `${wordSpacing}px` : 'normal';
-        const lH = (lineHeight) ? `${lineHeight}px` : 'normal';
-        const fS = (fontSize) ? `${fontSize}px` : '0px';
+        const whiteSpace = (text_wrap) ? 'normal' : 'nowrap';
+        const lS = (letter_spacing) ? `${letter_spacing}px` : 'normal';
+        const wS = (word_spacing) ? `${word_spacing}px` : 'normal';
+        const lH = (line_height) ? `${line_height}px` : 'normal';
+        const fS = (font_size) ? `${font_size}px` : '0px';
 
         const innerTextStyle = {
             color,
@@ -212,10 +205,10 @@ export default class TextLayer extends React.PureComponent<ITextLayerProps, ITex
 
         const wrapperStyle = {
             display: 'flex',
-            textAlign: hAlign as any,
-            justifyContent: this.getFlexStart(hAlign),
-            alignItems: vAlign,
-            backgroundColor: backgroundColor as any
+            textAlign: horizontal_alignment as any,
+            justifyContent: this.getFlexStart(horizontal_alignment),
+            alignItems: vertical_alignment,
+            backgroundColor: background_color as any
         };
 
         return <div className = 'composition-text-layer' style = {wrapperStyle}>