Merge pull request #219 from microsoft/qiuya/text

feat: add text component

libs/fabric/lib/components/text/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

libs/fabric/lib/components/text/public-api.ts

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+export * from './text.module';
+export * from './text.component';

libs/fabric/lib/components/text/text.component.ts

@@ -0,0 +1,48 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { ReactWrapperComponent } from '@angular-react/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { ITextProps } from '@fluentui/react/lib/Text';
+import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
+
+@AngularReact()
+@Styled('FabTextComponent')
+@Component({
+  selector: 'fab-text',
+  exportAs: 'fabText',
+  template: `
+    <Text
+      #reactNode
+      as="div"
+      block="true"
+      nowrap="true"
+    >
+      <ReactContent><ng-content></ng-content></ReactContent>
+    </Text>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FabTextComponent extends ReactWrapperComponent<ITextProps> {
+  @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
+
+  // @FIXME:
+  @Input() as?: ITextProps['as'] = 'div';
+  @Input() block?: ITextProps['block'] = true;
+  @Input() nowrap?: ITextProps['nowrap'] = true;
+  @Input() className?: ITextProps['className'] = '';
+  @Input() variant?: ITextProps['variant'];
+
+  constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
+    super(elementRef, changeDetectorRef, renderer);
+  }
+}

libs/fabric/lib/components/text/text.module.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { registerElement } from '@angular-react/core';
+import { CommonModule } from '@angular/common';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Text } from '@fluentui/react/lib/Text';
+import { FabTextComponent } from './text.component';
+
+const components = [FabTextComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: components,
+  exports: components,
+  schemas: [NO_ERRORS_SCHEMA],
+})
+export class FabTextModule {
+  constructor() {
+    // Add any React elements to the registry (used by the renderer).
+    registerElement('Text', () => Text);
+  }
+}

libs/fabric/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-react/fabric",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "description": "Use Fabric React components inside Angular",
   "author": {
     "name": "Ben Feely",