Skip to content

Commit 699be88

Browse files
author
Daniel Brain
committed
Add show and hide
1 parent d4984a3 commit 699be88

File tree

5 files changed

+120
-19
lines changed

5 files changed

+120
-19
lines changed

‎src/child/index.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ export type ChildHelpers<P> = {|
3131
onError : (mixed) => ZalgoPromise<void>,
3232
onProps : ((PropsType<P>) => void) => void,
3333
getParent : () => CrossDomainWindowType,
34-
getParentDomain : () => string
34+
getParentDomain : () => string,
35+
show : () => ZalgoPromise<void>,
36+
hide : () => ZalgoPromise<void>
3537
|};
3638

3739
/* Child Component
@@ -104,10 +106,20 @@ export class ChildComponent<P> {
104106
onError: (err) => this.onError(err),
105107
onProps: (handler) => this.onProps(handler),
106108
getParent: () => this.parentComponentWindow,
107-
getParentDomain: () => this.parentDomain
109+
getParentDomain: () => this.parentDomain,
110+
show: () => this.show(),
111+
hide: () => this.hide()
108112
};
109113
}
110114

115+
show() : ZalgoPromise<void> {
116+
return this.parent.show();
117+
}
118+
119+
hide() : ZalgoPromise<void> {
120+
return this.parent.hide();
121+
}
122+
111123
checkParentDomain(domain : string) {
112124
if (!matchDomain(this.component.allowedParentDomains, domain)) {
113125
throw new Error(`Can not be rendered by domain: ${ domain }`);

‎src/child/props.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export function normalizeChildProp<T, P>(component : Component<P>, props : (Prop
1717
}
1818

1919
if (typeof prop.childDecorate === 'function') {
20-
const { close, focus, onError, onProps, resize, getParent, getParentDomain } = helpers;
21-
return prop.childDecorate({ value, close, focus, onError, onProps, resize, getParent, getParentDomain });
20+
const { close, focus, onError, onProps, resize, getParent, getParentDomain, show, hide } = helpers;
21+
return prop.childDecorate({ value, close, focus, onError, onProps, resize, getParent, getParentDomain, show, hide });
2222
}
2323

2424
return value;

‎src/component/props.js

+52-5
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,51 @@ export type PropsType<P> = {|
6161
type PropDefinitionType<T, P, S : string> = {|
6262
type : S,
6363
alias? : string,
64-
value? : ({| props : P, state : Object, close : () => ZalgoPromise<void>, focus : () => ZalgoPromise<void>, onError : (mixed) => ZalgoPromise<void>, event : EventEmitterType |}) => ?T,
65-
default? : ({| props : P, state : Object, close : () => ZalgoPromise<void>, focus : () => ZalgoPromise<void>, onError : (mixed) => ZalgoPromise<void>, event : EventEmitterType |}) => ?T,
66-
decorate? : ({| value : T, props : PropsType<P>, state : Object, close : () => ZalgoPromise<void>, focus : () => ZalgoPromise<void>, onError : (mixed) => ZalgoPromise<void>, event : EventEmitterType |}) => T,
64+
value? : ({|
65+
props : P,
66+
state : Object,
67+
close : () => ZalgoPromise<void>,
68+
focus : () => ZalgoPromise<void>,
69+
onError : (mixed) => ZalgoPromise<void>,
70+
event : EventEmitterType
71+
|}) => ?T,
72+
default? : ({|
73+
props : P,
74+
state : Object,
75+
close : () => ZalgoPromise<void>,
76+
focus : () => ZalgoPromise<void>,
77+
onError : (mixed) => ZalgoPromise<void>,
78+
event : EventEmitterType
79+
|}) => ?T,
80+
decorate? : ({|
81+
value : T,
82+
props : PropsType<P>,
83+
state : Object,
84+
close : () => ZalgoPromise<void>,
85+
focus : () => ZalgoPromise<void>,
86+
onError : (mixed) => ZalgoPromise<void>,
87+
event : EventEmitterType
88+
|}) => T,
89+
childDecorate? : ({|
90+
value : T,
91+
close : () => ZalgoPromise<void>,
92+
focus : () => ZalgoPromise<void>,
93+
onError : (mixed) => ZalgoPromise<void>,
94+
onProps : ((PropsType<P>) => void) => void,
95+
resize : ({ width : ?number, height : ?number }) => ZalgoPromise<void>,
96+
getParentDomain : () => string,
97+
getParent : () => CrossDomainWindowType,
98+
show : () => ZalgoPromise<void>,
99+
hide : () => ZalgoPromise<void>
100+
|}) => ?T,
67101
required? : boolean,
68102
queryParam? : boolean | string | ({ value : T }) => (string | ZalgoPromise<string>),
69103
queryValue? : ({| value : T |}) => (ZalgoPromise<mixed> | mixed),
70104
sendToChild? : boolean,
71105
allowDelegate? : boolean,
72106
validate? : ({| value : T, props : PropsInputType<P> |}) => void,
73107
sameDomain? : boolean,
74-
serialization? : $Values<typeof PROP_SERIALIZATION>,
75-
childDecorate? : ({| value : T, close : () => ZalgoPromise<void>, focus : () => ZalgoPromise<void>, onError : (mixed) => ZalgoPromise<void>, onProps : ((PropsType<P>) => void) => void, resize : ({ width : ?number, height : ?number }) => ZalgoPromise<void>, getParentDomain : () => string, getParent : () => CrossDomainWindowType |}) => ?T
108+
serialization? : $Values<typeof PROP_SERIALIZATION>
76109
|};
77110

78111
export type BooleanPropDefinitionType<T : boolean, P> = PropDefinitionType<T, P, 'boolean'>;
@@ -184,6 +217,20 @@ export function getBuiltInProps<P>() : BuiltInPropsDefinitionType<P> {
184217
childDecorate: ({ getParentDomain }) => getParentDomain
185218
},
186219

220+
show: {
221+
type: 'function',
222+
required: false,
223+
sendToChild: false,
224+
childDecorate: ({ show }) => show
225+
},
226+
227+
hide: {
228+
type: 'function',
229+
required: false,
230+
sendToChild: false,
231+
childDecorate: ({ hide }) => hide
232+
},
233+
187234
onDisplay: {
188235
type: 'function',
189236
required: false,

‎src/parent/drivers.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,9 @@ RENDER_DRIVERS[CONTEXT.IFRAME] = {
8585
'openPrerenderFrame',
8686
'prerender',
8787
'open',
88-
'openPrerender'
88+
'openPrerender',
89+
'show',
90+
'hide'
8991
]
9092
};
9193

@@ -124,7 +126,9 @@ if (__ZOID__.__POPUP_SUPPORT__) {
124126
delegate: [
125127
'getProxyContainer',
126128
'renderContainer',
127-
'setProxyWin'
129+
'setProxyWin',
130+
'show',
131+
'hide'
128132
]
129133
};
130134
}

‎src/parent/index.js

+46-8
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { isSameDomain, matchDomain, getDomainFromUrl, isBlankDomain,
88
import { ZalgoPromise } from 'zalgo-promise/src';
99
import { addEventListener, uniqueID, elementReady, writeElementToWindow, eventEmitter, type EventEmitterType,
1010
noop, onResize, extendUrl, appendChild, cleanup, type CleanupType, base64encode,
11-
once, stringifyError, destroyElement, getElementSafe } from 'belter/src';
11+
once, stringifyError, destroyElement, getElementSafe, showElement, hideElement } from 'belter/src';
1212

1313
import { ZOID, POST_MESSAGE, CONTEXT, EVENT,
1414
INITIAL_PROPS, WINDOW_REFERENCES } from '../constants';
@@ -42,7 +42,9 @@ export type ParentExportsType<P> = {|
4242
close : () => ZalgoPromise<void>,
4343
checkClose : CrossDomainFunctionType<[], void>,
4444
resize : CrossDomainFunctionType<[{ width? : ?number, height? : ?number }], void>,
45-
onError : (mixed) => ZalgoPromise<void>
45+
onError : (mixed) => ZalgoPromise<void>,
46+
show : () => ZalgoPromise<void>,
47+
hide : () => ZalgoPromise<void>
4648
|};
4749

4850
export type PropRef =
@@ -74,7 +76,9 @@ export type ParentHelpers<P> = {|
7476
resize : ({ width : ?number, height : ?number }) => ZalgoPromise<void>,
7577
onError : (mixed) => ZalgoPromise<void>,
7678
updateProps : PropsInputType<P> => ZalgoPromise<void>,
77-
event : EventEmitterType
79+
event : EventEmitterType,
80+
show : () => ZalgoPromise<void>,
81+
hide : () => ZalgoPromise<void>
7882
|};
7983

8084
export class ParentComponent<P> {
@@ -91,8 +95,11 @@ export class ParentComponent<P> {
9195
state : StateType
9296
child : ?ChildExportsType<P>
9397

98+
proxyContainer : ?ProxyObject<HTMLElement>
9499
proxyWin : ?ProxyWindow
95100

101+
visible : boolean = true
102+
96103
constructor(component : Component<P>, props : PropsInputType<P>) {
97104
this.initPromise = new ZalgoPromise();
98105
this.handledErrors = [];
@@ -163,7 +170,10 @@ export class ParentComponent<P> {
163170
const openPrerenderFrame = this.openPrerenderFrame();
164171

165172
const renderContainer = ZalgoPromise.hash({ proxyContainer: getProxyContainer, proxyFrame: openFrame, proxyPrerenderFrame: openPrerenderFrame }).then(({ proxyContainer, proxyFrame, proxyPrerenderFrame }) => {
166-
return this.renderContainer(proxyContainer, { context, uid, proxyFrame, proxyPrerenderFrame });
173+
return this.renderContainer(proxyContainer, { context, uid, proxyFrame, proxyPrerenderFrame, visible: this.visible });
174+
}).then(proxyContainer => {
175+
this.proxyContainer = proxyContainer;
176+
return proxyContainer;
167177
});
168178

169179
const open = this.driver.openOnClick
@@ -294,10 +304,32 @@ export class ParentComponent<P> {
294304
focus: () => this.focus(),
295305
resize: ({ width, height }) => this.resize({ width, height }),
296306
onError: (err) => this.onError(err),
297-
updateProps: (props) => this.updateProps(props)
307+
updateProps: (props) => this.updateProps(props),
308+
show: () => this.show(),
309+
hide: () => this.hide()
298310
};
299311
}
300312

313+
show() : ZalgoPromise<void> {
314+
return ZalgoPromise.try(() => {
315+
this.visible = true;
316+
if (this.proxyContainer) {
317+
return this.proxyContainer.get()
318+
.then(showElement);
319+
}
320+
});
321+
}
322+
323+
hide() : ZalgoPromise<void> {
324+
return ZalgoPromise.try(() => {
325+
this.visible = false;
326+
if (this.proxyContainer) {
327+
return this.proxyContainer.get()
328+
.then(hideElement);
329+
}
330+
});
331+
}
332+
301333
setProps(props : PropsInputType<P>, isUpdate : boolean = false) {
302334
if (this.component.validate) {
303335
this.component.validate({ props });
@@ -521,10 +553,12 @@ export class ParentComponent<P> {
521553
const close = () => this.close();
522554
const checkClose = () => this.checkClose(win);
523555
const resize = ({ width, height }) => this.resize({ width, height });
556+
const show = () => this.show();
557+
const hide = () => this.hide();
524558

525559
init.onError = onError;
526560

527-
return { init, close, checkClose, resize, onError };
561+
return { init, close, checkClose, resize, onError, show, hide };
528562
}
529563

530564
resize({ width, height } : { width? : ?number, height? : ?number }) : ZalgoPromise<void> {
@@ -625,8 +659,8 @@ export class ParentComponent<P> {
625659
});
626660
}
627661

628-
renderContainer(proxyContainer : ProxyObject<HTMLElement>, { proxyFrame, proxyPrerenderFrame, context, uid } :
629-
{ context : $Values<typeof CONTEXT>, uid : string, proxyFrame : ?ProxyObject<HTMLIFrameElement>, proxyPrerenderFrame : ?ProxyObject<HTMLIFrameElement> }) : ZalgoPromise<?ProxyObject<HTMLElement>> {
662+
renderContainer(proxyContainer : ProxyObject<HTMLElement>, { proxyFrame, proxyPrerenderFrame, context, uid, visible } :
663+
{ context : $Values<typeof CONTEXT>, uid : string, proxyFrame : ?ProxyObject<HTMLIFrameElement>, proxyPrerenderFrame : ?ProxyObject<HTMLIFrameElement>, visible : boolean }) : ZalgoPromise<?ProxyObject<HTMLElement>> {
630664

631665

632666
return ZalgoPromise.hash({
@@ -638,8 +672,12 @@ export class ParentComponent<P> {
638672
}).then(({ container, frame, prerenderFrame }) => {
639673
const innerContainer = this.renderTemplate(this.component.containerTemplate, { context, uid, container, frame, prerenderFrame, doc: document });
640674
if (innerContainer) {
675+
if (!visible) {
676+
hideElement(innerContainer);
677+
}
641678
appendChild(container, innerContainer);
642679
this.clean.register(() => destroyElement(innerContainer));
680+
this.proxyContainer = getProxyObject(innerContainer);
643681
return getProxyObject(innerContainer);
644682
}
645683
});

0 commit comments

Comments
 (0)