Boris Cherny
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { IAugmentedJQuery, IComponentOptions } from 'angular'
|
|
import fromPairs = require('lodash.frompairs')
|
|
import NgComponent from 'ngcomponent'
|
|
import * as React from 'react'
|
|
import { render, unmountComponentAtNode } from 'react-dom'
|
|
|
|
/**
|
|
* Wraps a React component in Angular. Returns a new Angular component.
|
|
*
|
|
* Usage:
|
|
*
|
|
* ```ts
|
|
* type Props = { foo: number }
|
|
* class ReactComponent extends React.Component<Props, S> {}
|
|
* const AngularComponent = react2angular(ReactComponent, ['foo'])
|
|
* ```
|
|
*/
|
|
export function react2angular<Props>(
|
|
Class: React.ComponentClass<Props> | React.SFC<Props>,
|
|
bindingNames?: (keyof Props)[]
|
|
): IComponentOptions {
|
|
const names = bindingNames
|
|
|| (Class.propTypes && Object.keys(Class.propTypes))
|
|
|| []
|
|
|
|
return {
|
|
bindings: fromPairs(names.map(_ => [_, '<'])),
|
|
controller: ['$element', class extends NgComponent<Props> {
|
|
constructor(private $element: IAugmentedJQuery) {
|
|
super()
|
|
}
|
|
render() {
|
|
// TODO: rm any when https://github.com/Microsoft/TypeScript/pull/13288 is merged
|
|
render(<Class {...(this.props as any)} />, this.$element[0])
|
|
}
|
|
componentWillUnmount() {
|
|
unmountComponentAtNode(this.$element[0])
|
|
}
|
|
}]
|
|
}
|
|
}
|