Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/maker-asset-datas-interface

1 files changed, 28 insertions, 7 deletions

diff --git a/packages/instant/src/index.umd.ts b/packages/instant/src/index.umd.ts
index b998abe95..81d59e092 100644
--- a/packages/instant/src/index.umd.ts
+++ b/packages/instant/src/index.umd.ts
@@ -2,26 +2,47 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR } from './constants';
-import { ZeroExInstant, ZeroExInstantProps } from './index';
+import { DEFAULT_ZERO_EX_CONTAINER_SELECTOR, INJECTED_DIV_ID } from './constants';
+import { ZeroExInstantOverlay, ZeroExInstantOverlayProps } from './index';
 import { assert } from './util/assert';
 
-export const render = (props: ZeroExInstantProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
+export const render = (props: ZeroExInstantOverlayProps, selector: string = DEFAULT_ZERO_EX_CONTAINER_SELECTOR) => {
     assert.isValidOrderSource('orderSource', props.orderSource);
     if (!_.isUndefined(props.defaultSelectedAssetData)) {
         assert.isHexString('defaultSelectedAssetData', props.defaultSelectedAssetData);
     }
     if (!_.isUndefined(props.additionalAssetMetaDataMap)) {
-        assert.isValidAssetMetaDataMap('additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
+        assert.isValidAssetMetaDataMap('props.additionalAssetMetaDataMap', props.additionalAssetMetaDataMap);
     }
     if (!_.isUndefined(props.defaultAssetBuyAmount)) {
-        assert.isNumber('defaultAssetBuyAmount', props.defaultAssetBuyAmount);
+        assert.isNumber('props.defaultAssetBuyAmount', props.defaultAssetBuyAmount);
     }
     if (!_.isUndefined(props.networkId)) {
-        assert.isNumber('networkId', props.networkId);
+        assert.isNumber('props.networkId', props.networkId);
     }
     if (!_.isUndefined(props.availableAssetDatas)) {
         assert.areValidAssetDatas('availableAssetDatas', props.availableAssetDatas);
     }
-    ReactDOM.render(React.createElement(ZeroExInstant, props), document.querySelector(selector));
+    if (!_.isUndefined(props.onClose)) {
+        assert.isFunction('props.onClose', props.onClose);
+    }
+    if (!_.isUndefined(props.zIndex)) {
+        assert.isNumber('props.zIndex', props.zIndex);
+    }
+    const appendToIfExists = document.querySelector(selector);
+    assert.assert(!_.isNull(appendToIfExists), `Could not find div with selector: ${selector}`);
+    const appendTo = appendToIfExists as Element;
+    const injectedDiv = document.createElement('div');
+    injectedDiv.setAttribute('id', INJECTED_DIV_ID);
+    appendTo.appendChild(injectedDiv);
+    const instantOverlayProps = {
+        ...props,
+        onClose: () => {
+            appendTo.removeChild(injectedDiv);
+            if (!_.isUndefined(props.onClose)) {
+                props.onClose();
+            }
+        },
+    };
+    ReactDOM.render(React.createElement(ZeroExInstantOverlay, instantOverlayProps), injectedDiv);
 };