-
Notifications
You must be signed in to change notification settings - Fork 13.5k
/
createControllerComponent.tsx
62 lines (49 loc) · 1.86 KB
/
createControllerComponent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import React from 'react';
import { OverlayEventDetail } from '@ionic/core';
import { attachEventProps, ensureElementInBody, dashToPascalCase, generateUniqueId } from './utils'
import { OverlayComponentElement, OverlayControllerComponentElement } from '../types';
export function createControllerComponent<T extends object, E extends OverlayComponentElement, C extends OverlayControllerComponentElement<E>>(tagName: string, controllerTagName: string) {
const displayName = dashToPascalCase(tagName);
const dismissEventName = `on${displayName}DidDismiss`;
type ReactProps = {
isOpen: boolean;
onDidDismiss: (event: CustomEvent<OverlayEventDetail>) => void;
}
type Props = T & ReactProps;
return class ReactControllerComponent extends React.Component<Props> {
element: E;
controllerElement: C;
id: string;
constructor(props: Props) {
super(props);
this.id = generateUniqueId();
}
static get displayName() {
return displayName;
}
componentDidMount() {
this.controllerElement = ensureElementInBody<C>(controllerTagName);
}
async componentDidUpdate(prevProps: Props) {
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
const { isOpen, onDidDismiss, ...cProps} = this.props;
const elementProps = {
...cProps,
[dismissEventName]: onDidDismiss
};
if (this.controllerElement.componentOnReady) {
await this.controllerElement.componentOnReady();
}
this.element = await this.controllerElement.create(elementProps);
attachEventProps(this.element, elementProps, prevProps);
await this.element.present();
}
if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
await this.element.dismiss();
}
}
render(): null {
return null;
}
}
}