@imposium-hub/components 1.23.0 → 1.24.1

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/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/portal/Portal.tsx

@@ -17,7 +17,9 @@ const Portal : React.FC<IPortalProps> = ({ children, id }) : ReactPortal => {
 
     useEffect(() => {
         mount.appendChild(el);
-        return () => mount.removeChild(el);
+        return () => {
+            mount.removeChild(el);
+        };
     }, [el, mount]);
 
     return createPortal(children, el);

package/components/story-previewer/StoryPreviewer.tsx

@@ -25,6 +25,7 @@ import LogViewer from '../log-viewer/LogViewer';
 interface IStoryPreviewerProps {
     api : IImposiumAPI;
     storyId : string;
+    compositionId ? : string;
     variables : any;
     experienceId? : string;
     jobId? : string;
@@ -353,7 +354,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         }
     }
 
-    private getExperience(experienceId, triggerJob = false) {
+    private getExperience(experienceId, triggerJob = false, compositionId ? : string) {
 
         if (!this.timer.running) {
             this.timer.start();
@@ -369,7 +370,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             }, () => {
 
                 if (triggerJob) {
-                    api.triggerEvent(experienceId).then((resTrigger) => {
+                    api.triggerEvent(experienceId, compositionId).then((resTrigger) => {
 
                     this.setState({
                         jobId: resTrigger.job_id
@@ -448,7 +449,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
     private createExperience() {
 
-        const {storyId, onNotification, onError, api, onExperienceCreated} = this.props;
+        const {storyId, onNotification, onError, api, onExperienceCreated, compositionId} = this.props;
 
         this.resetState(() => {
             this.setState({
@@ -459,7 +460,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 if (onNotification) {
                     onNotification(copy.runExpStart);
                 }
-                api.createExperience(storyId, this.state.inventory).then((resExp) => {
+                api.createExperience(storyId, this.state.inventory, compositionId).then((resExp) => {
 
                     if (onNotification) {
                         onNotification(copy.expId.replace('[expId]', resExp.id));
@@ -469,7 +470,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                         onExperienceCreated(resExp);
                     }
 
-                    this.getExperience(resExp.id, true);
+                    this.getExperience(resExp.id, true, compositionId);
 
                 }).catch((e) => {
                     this.resetState();