Add show and hide

krakenjs · Sep 24, 2019 · eec1458 · eec1458
1 parent d4984a3
commit eec1458
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 14 deletions.
diff --git a/src/child/index.js b/src/child/index.js
@@ -31,7 +31,9 @@ export type ChildHelpers<P> = {|
  onError : (mixed) => ZalgoPromise<void>,
  onProps : ((PropsType<P>) => void) => void,
  getParent : () => CrossDomainWindowType,
- getParentDomain : () => string
+ getParentDomain : () => string,
+ show : () => ZalgoPromise<void>,
+ hide : () => ZalgoPromise<void>
 |};
 
 /* Child Component
@@ -104,10 +106,20 @@ export class ChildComponent<P> {
  onError: (err) => this.onError(err),
  onProps: (handler) => this.onProps(handler),
  getParent: () => this.parentComponentWindow,
- getParentDomain: () => this.parentDomain
+ getParentDomain: () => this.parentDomain,
+ show: () => this.show(),
+ hide: () => this.hide()
  };
  }
 
+ show() : ZalgoPromise<void> {
+ return this.parent.show();
+ }
+
+ hide() : ZalgoPromise<void> {
+ return this.parent.hide();
+ }
+
  checkParentDomain(domain : string) {
  if (!matchDomain(this.component.allowedParentDomains, domain)) {
  throw new Error(`Can not be rendered by domain: ${ domain }`);

diff --git a/src/child/props.js b/src/child/props.js
@@ -17,8 +17,8 @@ export function normalizeChildProp<T, P>(component : Component<P>, props : (Prop
  }
 
  if (typeof prop.childDecorate === 'function') {
- const { close, focus, onError, onProps, resize, getParent, getParentDomain } = helpers;
- return prop.childDecorate({ value, close, focus, onError, onProps, resize, getParent, getParentDomain });
+ const { close, focus, onError, onProps, resize, getParent, getParentDomain, show, hide } = helpers;
+ return prop.childDecorate({ value, close, focus, onError, onProps, resize, getParent, getParentDomain, show, hide });
  }
 
  return value;

diff --git a/src/component/props.js b/src/component/props.js
@@ -184,6 +184,20 @@ export function getBuiltInProps<P>() : BuiltInPropsDefinitionType<P> {
  childDecorate: ({ getParentDomain }) => getParentDomain
  },
 
+ show: {
+ type: 'function',
+ required: false,
+ sendToChild: false,
+ childDecorate: ({ show }) => show
+ },
+
+ hide: {
+ type: 'function',
+ required: false,
+ sendToChild: false,
+ childDecorate: ({ hide }) => hide
+ },
+
  onDisplay: {
  type: 'function',
  required: false,

diff --git a/src/parent/drivers.js b/src/parent/drivers.js
@@ -85,7 +85,9 @@ RENDER_DRIVERS[CONTEXT.IFRAME] = {
  'openPrerenderFrame',
  'prerender',
  'open',
- 'openPrerender'
+ 'openPrerender',
+ 'show',
+ 'hide'
  ]
 };
 
@@ -124,7 +126,9 @@ if (__ZOID__.__POPUP_SUPPORT__) {
  delegate: [
  'getProxyContainer',
  'renderContainer',
- 'setProxyWin'
+ 'setProxyWin',
+ 'show',
+ 'hide'
  ]
  };
 }
diff --git a/src/parent/index.js b/src/parent/index.js
@@ -8,7 +8,7 @@ import { isSameDomain, matchDomain, getDomainFromUrl, isBlankDomain,
 import { ZalgoPromise } from 'zalgo-promise/src';
 import { addEventListener, uniqueID, elementReady, writeElementToWindow, eventEmitter, type EventEmitterType,
  noop, onResize, extendUrl, appendChild, cleanup, type CleanupType, base64encode,
- once, stringifyError, destroyElement, getElementSafe } from 'belter/src';
+ once, stringifyError, destroyElement, getElementSafe, showElement, hideElement } from 'belter/src';
 
 import { ZOID, POST_MESSAGE, CONTEXT, EVENT,
  INITIAL_PROPS, WINDOW_REFERENCES } from '../constants';
@@ -42,7 +42,9 @@ export type ParentExportsType<P> = {|
  close : () => ZalgoPromise<void>,
  checkClose : CrossDomainFunctionType<[], void>,
  resize : CrossDomainFunctionType<[{ width? : ?number, height? : ?number }], void>,
- onError : (mixed) => ZalgoPromise<void>
+ onError : (mixed) => ZalgoPromise<void>,
+ show : () => ZalgoPromise<void>,
+ hide : () => ZalgoPromise<void>
 |};
 
 export type PropRef =
@@ -74,7 +76,9 @@ export type ParentHelpers<P> = {|
  resize : ({ width : ?number, height : ?number }) => ZalgoPromise<void>,
  onError : (mixed) => ZalgoPromise<void>,
  updateProps : PropsInputType<P> => ZalgoPromise<void>,
- event : EventEmitterType
+ event : EventEmitterType,
+ show : () => ZalgoPromise<void>,
+ hide : () => ZalgoPromise<void>
 |};
 
 export class ParentComponent<P> {
@@ -91,8 +95,11 @@ export class ParentComponent<P> {
  state : StateType
  child : ?ChildExportsType<P>
 
+ proxyContainer : ?ProxyObject<HTMLElement>
  proxyWin : ?ProxyWindow
 
+ visible : boolean = true
+
  constructor(component : Component<P>, props : PropsInputType<P>) {
  this.initPromise = new ZalgoPromise();
  this.handledErrors = [];
@@ -163,7 +170,10 @@ export class ParentComponent<P> {
  const openPrerenderFrame = this.openPrerenderFrame();
 
  const renderContainer = ZalgoPromise.hash({ proxyContainer: getProxyContainer, proxyFrame: openFrame, proxyPrerenderFrame: openPrerenderFrame }).then(({ proxyContainer, proxyFrame, proxyPrerenderFrame }) => {
- return this.renderContainer(proxyContainer, { context, uid, proxyFrame, proxyPrerenderFrame });
+ return this.renderContainer(proxyContainer, { context, uid, proxyFrame, proxyPrerenderFrame, visible: this.visible });
+ }).then(proxyContainer => {
+ this.proxyContainer = proxyContainer;
+ return proxyContainer;
  });
 
  const open = this.driver.openOnClick
@@ -294,10 +304,32 @@ export class ParentComponent<P> {
  focus: () => this.focus(),
  resize: ({ width, height }) => this.resize({ width, height }),
  onError: (err) => this.onError(err),
- updateProps: (props) => this.updateProps(props)
+ updateProps: (props) => this.updateProps(props),
+ show: () => this.show(),
+ hide: () => this.hide()
  };
  }
 
+ show() : ZalgoPromise<void> {
+ return ZalgoPromise.try(() => {
+ this.visible = true;
+ if (this.proxyContainer) {
+ return this.proxyContainer.get()
+ .then(showElement);
+ }
+ });
+ }
+
+ hide() : ZalgoPromise<void> {
+ return ZalgoPromise.try(() => {
+ this.visible = false;
+ if (this.proxyContainer) {
+ return this.proxyContainer.get()
+ .then(hideElement);
+ }
+ });
+ }
+
  setProps(props : PropsInputType<P>, isUpdate : boolean = false) {
  if (this.component.validate) {
  this.component.validate({ props });
@@ -521,10 +553,12 @@ export class ParentComponent<P> {
  const close = () => this.close();
  const checkClose = () => this.checkClose(win);
  const resize = ({ width, height }) => this.resize({ width, height });
+ const show = () => this.show();
+ const hide = () => this.hide();
 
  init.onError = onError;
 
- return { init, close, checkClose, resize, onError };
+ return { init, close, checkClose, resize, onError, show, hide };
  }
 
  resize({ width, height } : { width? : ?number, height? : ?number }) : ZalgoPromise<void> {
@@ -625,8 +659,8 @@ export class ParentComponent<P> {
  });
  }
 
- renderContainer(proxyContainer : ProxyObject<HTMLElement>, { proxyFrame, proxyPrerenderFrame, context, uid } :
- { context : $Values<typeof CONTEXT>, uid : string, proxyFrame : ?ProxyObject<HTMLIFrameElement>, proxyPrerenderFrame : ?ProxyObject<HTMLIFrameElement> }) : ZalgoPromise<?ProxyObject<HTMLElement>> {
+ renderContainer(proxyContainer : ProxyObject<HTMLElement>, { proxyFrame, proxyPrerenderFrame, context, uid, visible } :
+ { context : $Values<typeof CONTEXT>, uid : string, proxyFrame : ?ProxyObject<HTMLIFrameElement>, proxyPrerenderFrame : ?ProxyObject<HTMLIFrameElement>, visible : boolean }) : ZalgoPromise<?ProxyObject<HTMLElement>> {
 
 
  return ZalgoPromise.hash({
@@ -638,8 +672,12 @@ export class ParentComponent<P> {
  }).then(({ container, frame, prerenderFrame }) => {
  const innerContainer = this.renderTemplate(this.component.containerTemplate, { context, uid, container, frame, prerenderFrame, doc: document });
  if (innerContainer) {
+ if (!visible) {
+ hideElement(innerContainer);
+ }
  appendChild(container, innerContainer);
  this.clean.register(() => destroyElement(innerContainer));
+ this.proxyContainer = getProxyObject(innerContainer);
  return getProxyObject(innerContainer);
  }
  });