From 56d4f03979347535c0ce955d1100b206b7d639f0 Mon Sep 17 00:00:00 2001 From: Ben Grynhaus Date: Fri, 13 Jul 2018 16:23:43 +0300 Subject: [PATCH] prettier formatting --- .prettierrc | 5 +- libs/core/package-lock.json | 2 +- libs/core/public-api.ts | 2 +- libs/core/src/components/wrapper-component.ts | 73 +++++++++++----- .../object/remove-undefined-properties.ts | 4 +- libs/fabric/package-lock.json | 2 +- libs/fabric/package.json | 2 +- .../breadcrumb/breadcrumb.component.ts | 12 ++- .../breadcrumb/breadcrumb.module.ts | 8 +- .../button/action-button.component.ts | 2 - .../button/base-button.component.ts | 6 +- .../src/components/button/button.module.ts | 14 ++- .../button/command-bar-button.component.ts | 2 - .../button/compound-button.component.ts | 2 - .../button/default-button.component.ts | 2 - .../button/icon-button.component.ts | 2 - .../button/messagebar-button.component.ts | 2 - .../button/primary-button.component.ts | 2 - .../button/split-button.component.ts | 2 - .../components/callout/callout.component.ts | 12 ++- .../src/components/callout/callout.module.ts | 8 +- .../components/checkbox/checkbox.component.ts | 14 ++- .../components/checkbox/checkbox.module.ts | 8 +- .../choice-group/choice-group.component.ts | 17 +++- .../choice-group/choice-group.module.ts | 8 +- .../combo-box/base-combo-box.component.ts | 13 ++- .../components/combo-box/combo-box.module.ts | 9 +- .../command-bar/command-bar.component.ts | 87 ++++++++++++++++--- .../command-bar/command-bar.module.ts | 8 +- .../date-picker/date-picker.component.ts | 11 ++- .../date-picker/date-picker.module.ts | 8 +- .../src/components/dialog/dialog.component.ts | 13 ++- .../src/components/dialog/dialog.module.ts | 10 +-- .../components/divider/divider.component.ts | 1 - .../src/components/divider/divider.module.ts | 8 +- .../src/components/fabric/fabric.component.ts | 1 - .../src/components/fabric/fabric.module.ts | 8 +- .../grouped-list/grouped-list.component.ts | 14 ++- .../grouped-list/grouped-list.module.ts | 8 +- .../hover-card/hover-card.component.ts | 47 ++++++++-- .../hover-card/hover-card.module.ts | 4 +- .../src/components/icon/icon.component.ts | 1 - .../fabric/src/components/icon/icon.module.ts | 8 +- .../src/components/image/image.component.ts | 13 ++- .../src/components/image/image.module.ts | 8 +- .../src/components/link/link.component.ts | 1 - .../fabric/src/components/link/link.module.ts | 8 +- .../message-bar/message-bar.component.ts | 15 +++- .../message-bar/message-bar.module.ts | 8 +- .../src/components/modal/modal.component.ts | 14 ++- .../src/components/modal/modal.module.ts | 8 +- .../src/components/panel/panel.component.ts | 24 +++-- .../src/components/panel/panel.module.ts | 8 +- .../components/persona/persona.component.ts | 16 +++- .../src/components/persona/persona.module.ts | 9 +- .../base-picker/base-picker.component.ts | 66 +++++++++++--- .../pickers/base-picker/base-picker.module.ts | 4 +- .../tag-picker/tag-picker.component.ts | 11 ++- .../pickers/tag-picker/tag-picker.module.ts | 10 +-- .../src/components/pivot/pivot.component.ts | 44 +++++++--- .../src/components/pivot/pivot.module.ts | 9 +- .../search-box/search-box.component.ts | 86 ++++++++++++++---- .../search-box/search-box.module.ts | 8 +- .../components/shimmer/shimmer.component.ts | 13 ++- .../src/components/shimmer/shimmer.module.ts | 9 +- .../src/components/slider/slider.component.ts | 11 ++- .../src/components/slider/slider.module.ts | 8 +- .../components/spinner/spinner.component.ts | 1 - .../src/components/spinner/spinner.module.ts | 8 +- .../src/components/toggle/toggle.component.ts | 12 ++- .../src/components/toggle/toggle.module.ts | 8 +- .../tooltip/tooltip-host.component.ts | 47 +++++++--- .../src/components/tooltip/tooltip.module.ts | 8 +- libs/fabric/src/utils/omit.ts | 12 ++- libs/fabric/src/utils/pick.ts | 7 +- 75 files changed, 632 insertions(+), 354 deletions(-) diff --git a/.prettierrc b/.prettierrc index f65aabc..b8fab9b 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "singleQuote": true, - "printWidth": 120 -} \ No newline at end of file + "printWidth": 120, + "trailingComma": "es5" +} diff --git a/libs/core/package-lock.json b/libs/core/package-lock.json index 6b13683..1fb1ca6 100644 --- a/libs/core/package-lock.json +++ b/libs/core/package-lock.json @@ -1,6 +1,6 @@ { "name": "@angular-react/core", - "version": "0.2.0", + "version": "0.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/libs/core/public-api.ts b/libs/core/public-api.ts index 50e64ca..a979c48 100644 --- a/libs/core/public-api.ts +++ b/libs/core/public-api.ts @@ -3,4 +3,4 @@ export * from './src/components/wrapper-component'; export { ReactContent } from './src/renderer/react-content'; export { registerElement } from './src/renderer/registry'; export { passProp, getPassProps, PassProp } from './src/renderer/pass-prop-decorator'; -export * from './src/renderer/components/Disguise' +export * from './src/renderer/components/Disguise'; diff --git a/libs/core/src/components/wrapper-component.ts b/libs/core/src/components/wrapper-component.ts index 405ccbb..7771edf 100644 --- a/libs/core/src/components/wrapper-component.ts +++ b/libs/core/src/components/wrapper-component.ts @@ -1,7 +1,20 @@ -import { AfterViewInit, ComponentFactoryResolver, ComponentRef, ElementRef, Injector, TemplateRef, Type, ChangeDetectorRef, OnChanges, SimpleChanges, HostBinding, Input } from "@angular/core"; -import { isReactNode } from "../renderer/react-node"; -import { renderComponent, renderFunc, renderTemplate } from "../renderer/renderprop-helpers"; -import { unreachable } from "../utils/types/unreachable"; +import { + AfterViewInit, + ComponentFactoryResolver, + ComponentRef, + ElementRef, + Injector, + TemplateRef, + Type, + ChangeDetectorRef, + OnChanges, + SimpleChanges, + HostBinding, + Input +} from '@angular/core'; +import { isReactNode } from '../renderer/react-node'; +import { renderComponent, renderFunc, renderTemplate } from '../renderer/renderprop-helpers'; +import { unreachable } from '../utils/types/unreachable'; import toStyle from 'css-to-style'; type PropMapper = (value: any) => [string, any]; @@ -14,9 +27,7 @@ const forbiddenAttributesAsProps: ReadonlyArray = [ ['style', 'rStyle'], ]; -const ignoredAttributeMatchers = [ - /^_?ng-?.*/ -]; +const ignoredAttributeMatchers = [/^_?ng-?.*/]; const ngClassRegExp = /^ng-/; @@ -27,7 +38,7 @@ export interface RenderComponentOptions { } export type InputRendererOptions = - TemplateRef + | TemplateRef | ((context: TContext) => HTMLElement) | ComponentRef | RenderComponentOptions; @@ -40,17 +51,18 @@ export type JsxRenderFunc = (context: TContext) => JSX.Element; */ // NOTE: TProps is not used at the moment, but a preparation for a potential future change. export abstract class ReactWrapperComponent implements AfterViewInit, OnChanges { - protected abstract reactNodeRef: ElementRef; - @Input() set rClass(value: string) { + @Input() + set rClass(value: string) { if (isReactNode(this.reactNodeRef.nativeElement)) { this.reactNodeRef.nativeElement.setProperty('className', value); this.changeDetectorRef.detectChanges(); } } - @Input() set rStyle(value: string) { + @Input() + set rStyle(value: string) { if (isReactNode(this.reactNodeRef.nativeElement)) { this.reactNodeRef.nativeElement.setProperty('style', toStyle(value)); this.changeDetectorRef.detectChanges(); @@ -62,7 +74,11 @@ export abstract class ReactWrapperComponent implements AfterV * @param elementRef The host element. * @param setHostDisplay Whether the host's `display` should be set to the root child node's `display`. defaults to `false` */ - constructor(public readonly elementRef: ElementRef, private readonly changeDetectorRef: ChangeDetectorRef, private readonly setHostDisplay: boolean = false) { } + constructor( + public readonly elementRef: ElementRef, + private readonly changeDetectorRef: ChangeDetectorRef, + private readonly setHostDisplay: boolean = false + ) { } ngAfterViewInit() { this._passAttributesAsProps(); @@ -90,7 +106,9 @@ export abstract class ReactWrapperComponent implements AfterV * Create an JSX renderer for an `@Input` property. * @param input The input property */ - protected createInputJsxRenderer(input: InputRendererOptions): JsxRenderFunc | undefined { + protected createInputJsxRenderer( + input: InputRendererOptions + ): JsxRenderFunc | undefined { if (input === undefined) { return undefined; } @@ -107,7 +125,7 @@ export abstract class ReactWrapperComponent implements AfterV return (context: TContext) => renderFunc(input, context); } - if (typeof input === "object") { + if (typeof input === 'object') { const { componentType, factoryResolver, injector } = input; const componentFactory = factoryResolver.resolveComponentFactory(componentType); const componentRef = componentFactory.create(injector); @@ -123,7 +141,10 @@ export abstract class ReactWrapperComponent implements AfterV * @param renderInputValue the value of the render `@Input` property. * @param jsxRenderer an optional renderer to use. */ - protected createRenderPropHandler(renderInputValue: InputRendererOptions, jsxRenderer?: JsxRenderFunc): (props?: TProps, defaultRender?: JsxRenderFunc) => JSX.Element | null { + protected createRenderPropHandler( + renderInputValue: InputRendererOptions, + jsxRenderer?: JsxRenderFunc + ): (props?: TProps, defaultRender?: JsxRenderFunc) => JSX.Element | null { const renderer = jsxRenderer || this.createInputJsxRenderer(renderInputValue); return (props?: TProps, defaultRender?: JsxRenderFunc) => { @@ -136,9 +157,7 @@ export abstract class ReactWrapperComponent implements AfterV } private _passAttributesAsProps() { - const hostAttributes = Array.from( - (this.elementRef.nativeElement as HTMLElement).attributes - ); + const hostAttributes = Array.from((this.elementRef.nativeElement as HTMLElement).attributes); if (!this.reactNodeRef || !isReactNode(this.reactNodeRef.nativeElement)) { throw new Error('reactNodeRef must hold a reference to a ReactNode'); @@ -148,15 +167,23 @@ export abstract class ReactWrapperComponent implements AfterV hostAttributes.forEach(attr => { const [forbidden, alternativeAttrName] = this._isForbiddenAttribute(attr); if (forbidden) { - throw new Error(`[${(this.elementRef.nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${attr.name}' attribute set. Use the following alternative: ${alternativeAttrName || ''}`); + throw new Error( + `[${(this.elementRef + .nativeElement as HTMLElement).tagName.toLowerCase()}] React wrapper components cannot have the '${ + attr.name + }' attribute set. Use the following alternative: ${alternativeAttrName || ''}` + ); } }); const whitelistedHostAttributes = hostAttributes.filter(attr => !this._isIgnoredAttribute(attr)); - const props = whitelistedHostAttributes.reduce((acc, attr) => ({ - ...acc, - [attr.name]: attr.value, - }), {}); + const props = whitelistedHostAttributes.reduce( + (acc, attr) => ({ + ...acc, + [attr.name]: attr.value, + }), + {} + ); this.reactNodeRef.nativeElement.setProperties(props); } diff --git a/libs/core/src/utils/object/remove-undefined-properties.ts b/libs/core/src/utils/object/remove-undefined-properties.ts index ba5e58c..aabaf4b 100644 --- a/libs/core/src/utils/object/remove-undefined-properties.ts +++ b/libs/core/src/utils/object/remove-undefined-properties.ts @@ -3,7 +3,7 @@ const clearUndefinedProperties = (obj: T): Partial => { const _acc = acc; if (obj[key] !== undefined) _acc[key] = obj[key]; return _acc; - }, {}) -} + }, {}); +}; export default clearUndefinedProperties; diff --git a/libs/fabric/package-lock.json b/libs/fabric/package-lock.json index b4696ce..54350c4 100644 --- a/libs/fabric/package-lock.json +++ b/libs/fabric/package-lock.json @@ -1,6 +1,6 @@ { "name": "@angular-react/fabric", - "version": "0.2.0", + "version": "0.2.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/libs/fabric/package.json b/libs/fabric/package.json index 22bdd4b..529961e 100644 --- a/libs/fabric/package.json +++ b/libs/fabric/package.json @@ -62,7 +62,7 @@ ], "private": false, "peerDependencies": { - "@angular-react/core": "^0.2.0", + "@angular-react/core": "^0.2.1", "@angular/common": "^5.2.7", "@angular/core": "^5.2.7", "@angular/platform-browser-dynamic": "^5.2.7", diff --git a/libs/fabric/src/components/breadcrumb/breadcrumb.component.ts b/libs/fabric/src/components/breadcrumb/breadcrumb.component.ts index d3c4e1f..c257ad3 100644 --- a/libs/fabric/src/components/breadcrumb/breadcrumb.component.ts +++ b/libs/fabric/src/components/breadcrumb/breadcrumb.component.ts @@ -1,5 +1,13 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + OnInit, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Breadcrumb'; @Component({ @@ -24,7 +32,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br `, styles: ['react-renderer'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabBreadcrumbComponent extends ReactWrapperComponent implements OnInit { @ViewChild('reactNode') protected reactNodeRef: ElementRef; diff --git a/libs/fabric/src/components/breadcrumb/breadcrumb.module.ts b/libs/fabric/src/components/breadcrumb/breadcrumb.module.ts index c8d3e5b..ceda050 100644 --- a/libs/fabric/src/components/breadcrumb/breadcrumb.module.ts +++ b/libs/fabric/src/components/breadcrumb/breadcrumb.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb'; import { FabBreadcrumbComponent } from './breadcrumb.component'; -const components = [ - FabBreadcrumbComponent, -]; +const components = [FabBreadcrumbComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabBreadcrumbModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Breadcrumb', () => Breadcrumb); } - } diff --git a/libs/fabric/src/components/button/action-button.component.ts b/libs/fabric/src/components/button/action-button.component.ts index a8a50b3..0c52b9b 100644 --- a/libs/fabric/src/components/button/action-button.component.ts +++ b/libs/fabric/src/components/button/action-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabActionButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/base-button.component.ts b/libs/fabric/src/components/button/base-button.component.ts index 0f26e48..b327186 100644 --- a/libs/fabric/src/components/button/base-button.component.ts +++ b/libs/fabric/src/components/button/base-button.component.ts @@ -4,7 +4,6 @@ import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu'; export abstract class FabBaseButtonComponent extends ReactWrapperComponent implements OnInit { - @Input() componentRef?: IButtonProps['componentRef']; @Input() href?: IButtonProps['href']; @Input() primary?: IButtonProps['primary']; @@ -42,7 +41,7 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent; @Output() readonly onClick = new EventEmitter(); - @Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent, button?: IButtonProps }>(); + @Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>(); @Output() readonly onAfterMenuDismiss = new EventEmitter(); onRenderIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc) => JSX.Element; @@ -74,11 +73,10 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent DefaultButton); @@ -40,5 +47,4 @@ export class FabButtonModule { registerElement('MessageBarButton', () => MessageBarButton); registerElement('PrimaryButton', () => PrimaryButton); } - } diff --git a/libs/fabric/src/components/button/command-bar-button.component.ts b/libs/fabric/src/components/button/command-bar-button.component.ts index cf466bf..5313956 100644 --- a/libs/fabric/src/components/button/command-bar-button.component.ts +++ b/libs/fabric/src/components/button/command-bar-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabCommandBarButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/compound-button.component.ts b/libs/fabric/src/components/button/compound-button.component.ts index 01aac03..a76aa58 100644 --- a/libs/fabric/src/components/button/compound-button.component.ts +++ b/libs/fabric/src/components/button/compound-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabCompoundButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/default-button.component.ts b/libs/fabric/src/components/button/default-button.component.ts index 0eab80f..830584c 100644 --- a/libs/fabric/src/components/button/default-button.component.ts +++ b/libs/fabric/src/components/button/default-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabDefaultButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/icon-button.component.ts b/libs/fabric/src/components/button/icon-button.component.ts index 0eb677f..d637f80 100644 --- a/libs/fabric/src/components/button/icon-button.component.ts +++ b/libs/fabric/src/components/button/icon-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabIconButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/messagebar-button.component.ts b/libs/fabric/src/components/button/messagebar-button.component.ts index f08560d..54e0bf0 100644 --- a/libs/fabric/src/components/button/messagebar-button.component.ts +++ b/libs/fabric/src/components/button/messagebar-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabMessageBarButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/primary-button.component.ts b/libs/fabric/src/components/button/primary-button.component.ts index 0a478f3..1c52708 100644 --- a/libs/fabric/src/components/button/primary-button.component.ts +++ b/libs/fabric/src/components/button/primary-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabPrimaryButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/button/split-button.component.ts b/libs/fabric/src/components/button/split-button.component.ts index b956c13..727d3c2 100644 --- a/libs/fabric/src/components/button/split-button.component.ts +++ b/libs/fabric/src/components/button/split-button.component.ts @@ -51,11 +51,9 @@ import { FabBaseButtonComponent } from './base-button.component'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabSplitButtonComponent extends FabBaseButtonComponent { - @ViewChild('reactNode') reactNodeRef: ElementRef; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/callout/callout.component.ts b/libs/fabric/src/components/callout/callout.component.ts index 203b87e..9391fce 100644 --- a/libs/fabric/src/components/callout/callout.component.ts +++ b/libs/fabric/src/components/callout/callout.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout'; import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning/positioning.types'; @@ -85,5 +94,4 @@ export class FabCalloutComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/callout/callout.module.ts b/libs/fabric/src/components/callout/callout.module.ts index 29a76c6..ffa09ae 100644 --- a/libs/fabric/src/components/callout/callout.module.ts +++ b/libs/fabric/src/components/callout/callout.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Callout } from 'office-ui-fabric-react/lib/Callout'; import { FabCalloutComponent } from './callout.component'; -const components = [ - FabCalloutComponent, -]; +const components = [FabCalloutComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabCalloutModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Callout', () => Callout); } - } diff --git a/libs/fabric/src/components/checkbox/checkbox.component.ts b/libs/fabric/src/components/checkbox/checkbox.component.ts index fa3a0cb..fa57f75 100644 --- a/libs/fabric/src/components/checkbox/checkbox.component.ts +++ b/libs/fabric/src/components/checkbox/checkbox.component.ts @@ -1,5 +1,15 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { ICheckboxProps } from 'office-ui-fabric-react/lib/Checkbox'; import { FormEvent } from 'react'; @@ -56,7 +66,7 @@ export class FabCheckboxComponent extends ReactWrapperComponent @Input() renderLabel?: InputRendererOptions; - @Output() readonly onChange = new EventEmitter<{ ev?: Event, checked?: boolean }>(); + @Output() readonly onChange = new EventEmitter<{ ev?: Event; checked?: boolean }>(); /* Non-React props, more native support for Angular */ // support for two-way data binding for `@Input() checked`. diff --git a/libs/fabric/src/components/checkbox/checkbox.module.ts b/libs/fabric/src/components/checkbox/checkbox.module.ts index 46295a6..fb6fbcb 100644 --- a/libs/fabric/src/components/checkbox/checkbox.module.ts +++ b/libs/fabric/src/components/checkbox/checkbox.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { FabCheckboxComponent } from './checkbox.component'; -const components = [ - FabCheckboxComponent, -]; +const components = [FabCheckboxComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabCheckboxModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Checkbox', () => Checkbox); } - } diff --git a/libs/fabric/src/components/choice-group/choice-group.component.ts b/libs/fabric/src/components/choice-group/choice-group.component.ts index 04838b0..f88517f 100644 --- a/libs/fabric/src/components/choice-group/choice-group.component.ts +++ b/libs/fabric/src/components/choice-group/choice-group.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/lib/ChoiceGroup'; @Component({ @@ -24,7 +33,7 @@ import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/li styles: ['react-renderer'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FabChoiceGroupComponent extends ReactWrapperComponent { +export class FabChoiceGroupComponent extends ReactWrapperComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; @Input() componentRef?: IChoiceGroupProps['componentRef']; @@ -38,8 +47,8 @@ export class FabChoiceGroupComponent extends ReactWrapperComponent(); - @Output() readonly onChange = new EventEmitter<{ ev?: Event, option?: IChoiceGroupOption }>(); + @Output() readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption; evt?: Event }>(); + @Output() readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>(); constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); diff --git a/libs/fabric/src/components/choice-group/choice-group.module.ts b/libs/fabric/src/components/choice-group/choice-group.module.ts index 0901fd5..00c24d0 100644 --- a/libs/fabric/src/components/choice-group/choice-group.module.ts +++ b/libs/fabric/src/components/choice-group/choice-group.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup'; import { FabChoiceGroupComponent } from './choice-group.component'; -const components = [ - FabChoiceGroupComponent, -]; +const components = [FabChoiceGroupComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabChoiceGroupModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('ChoiceGroup', () => ChoiceGroup); } - } diff --git a/libs/fabric/src/components/combo-box/base-combo-box.component.ts b/libs/fabric/src/components/combo-box/base-combo-box.component.ts index 8524181..7e47191 100644 --- a/libs/fabric/src/components/combo-box/base-combo-box.component.ts +++ b/libs/fabric/src/components/combo-box/base-combo-box.component.ts @@ -24,8 +24,15 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent; - @Output() readonly onChanged = new EventEmitter<{ option?: IComboBoxOption, index?: number, value?: string, submitPendingValueEvent?: any }>(); - @Output() readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption, index?: number, value?: string }>(); + @Output() + readonly onChanged = new EventEmitter<{ + option?: IComboBoxOption; + index?: number; + value?: string; + submitPendingValueEvent?: any; + }>(); + @Output() + readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption; index?: number; value?: string }>(); @Output() readonly onMenuOpen = new EventEmitter(); @Output() readonly onMenuDismissed = new EventEmitter(); @Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>(); @@ -64,7 +71,7 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent ComboBox); registerElement('VirtualizedComboBox', () => VirtualizedComboBox); } - } diff --git a/libs/fabric/src/components/command-bar/command-bar.component.ts b/libs/fabric/src/components/command-bar/command-bar.component.ts index b80e354..57e1786 100644 --- a/libs/fabric/src/components/command-bar/command-bar.component.ts +++ b/libs/fabric/src/components/command-bar/command-bar.component.ts @@ -1,8 +1,19 @@ import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef, SimpleChanges, OnChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, + SimpleChanges, + OnChanges, +} from '@angular/core'; import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar'; import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu'; -import omit from "../../utils/omit"; +import omit from '../../utils/omit'; @Component({ selector: 'fab-command-bar', @@ -33,7 +44,6 @@ import omit from "../../utils/omit"; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabCommandBarComponent extends ReactWrapperComponent implements OnChanges { - @ViewChild('reactNode') protected reactNodeRef: ElementRef; @Input() componentRef?: ICommandBarProps['componentRef']; @@ -68,9 +78,24 @@ export class FabCommandBarComponent extends ReactWrapperComponent iconRenderer({ contextualMenuItemProps: props }) } as Pick, - renderer && { onRender: (item, dismissMenu) => renderer({ item, dismissMenu }) } as Pick, + iconRenderer && + ({ onRenderIcon: props => iconRenderer({ contextualMenuItemProps: props }) } as Pick< + ICommandBarItemProps, + 'onRenderIcon' + >), + renderer && + ({ onRender: (item, dismissMenu) => renderer({ item, dismissMenu }) } as Pick) ) as ICommandBarItemProps; } } -export interface ICommandBarItemOptions extends Pick { +export interface ICommandBarItemOptions + extends Pick< + ICommandBarItemProps, + | 'iconOnly' + | 'buttonStyles' + | 'cacheKey' + | 'renderedInOverflow' + | 'componentRef' + | 'key' + | 'text' + | 'secondaryText' + | 'iconProps' + | 'submenuIconProps' + | 'disabled' + | 'primaryDisabled' + | 'shortCut' + | 'canCheck' + | 'checked' + | 'split' + | 'data' + | 'onClick' + | 'href' + | 'target' + | 'rel' + | 'subMenuProps' + | 'getItemClassNames' + | 'getSplitButtonVerticalDividerClassNames' + | 'sectionProps' + | 'className' + | 'style' + | 'ariaLabel' + | 'title' + | 'onMouseDown' + | 'role' + | 'customOnRenderListLength' + | 'keytipProps' + | 'inactive' + > { readonly [propertyName: string]: any; readonly renderIcon?: InputRendererOptions<{ contextualMenuItemProps: IContextualMenuItemProps }>; - readonly render?: InputRendererOptions<{ item: any, dismissMenu: (ev?: any, dismissAll?: boolean) => void }>; + readonly render?: InputRendererOptions<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>; readonly data?: TData; } diff --git a/libs/fabric/src/components/command-bar/command-bar.module.ts b/libs/fabric/src/components/command-bar/command-bar.module.ts index bd23a1b..efff31c 100644 --- a/libs/fabric/src/components/command-bar/command-bar.module.ts +++ b/libs/fabric/src/components/command-bar/command-bar.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; import { FabCommandBarComponent } from './command-bar.component'; -const components = [ - FabCommandBarComponent, -]; +const components = [FabCommandBarComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabCommandBarModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('CommandBar', () => CommandBar); } - } diff --git a/libs/fabric/src/components/date-picker/date-picker.component.ts b/libs/fabric/src/components/date-picker/date-picker.component.ts index f276177..e71a731 100644 --- a/libs/fabric/src/components/date-picker/date-picker.component.ts +++ b/libs/fabric/src/components/date-picker/date-picker.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IDatePickerProps } from 'office-ui-fabric-react/lib/DatePicker'; @Component({ diff --git a/libs/fabric/src/components/date-picker/date-picker.module.ts b/libs/fabric/src/components/date-picker/date-picker.module.ts index 7a89414..9967bd4 100644 --- a/libs/fabric/src/components/date-picker/date-picker.module.ts +++ b/libs/fabric/src/components/date-picker/date-picker.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { DatePicker } from 'office-ui-fabric-react/lib/DatePicker'; import { FabDatePickerComponent } from './date-picker.component'; -const components = [ - FabDatePickerComponent, -]; +const components = [FabDatePickerComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabDatePickerModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('DatePicker', () => DatePicker); } - } diff --git a/libs/fabric/src/components/dialog/dialog.component.ts b/libs/fabric/src/components/dialog/dialog.component.ts index 786c0e7..befbeb2 100644 --- a/libs/fabric/src/components/dialog/dialog.component.ts +++ b/libs/fabric/src/components/dialog/dialog.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui-fabric-react/lib/Dialog'; @Component({ @@ -75,7 +84,6 @@ export class FabDialogComponent extends ReactWrapperComponent { `, styles: ['react-renderer'], changeDetection: ChangeDetectionStrategy.OnPush, - }) export class FabDialogFooterComponent extends ReactWrapperComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; @@ -116,7 +124,6 @@ export class FabDialogFooterComponent extends ReactWrapperComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; diff --git a/libs/fabric/src/components/dialog/dialog.module.ts b/libs/fabric/src/components/dialog/dialog.module.ts index bdc372a..fd3bb60 100644 --- a/libs/fabric/src/components/dialog/dialog.module.ts +++ b/libs/fabric/src/components/dialog/dialog.module.ts @@ -4,25 +4,19 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Dialog, DialogContent, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { FabDialogComponent, FabDialogContentComponent, FabDialogFooterComponent } from './dialog.component'; -const components = [ - FabDialogComponent, - FabDialogContentComponent, - FabDialogFooterComponent, -]; +const components = [FabDialogComponent, FabDialogContentComponent, FabDialogFooterComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabDialogModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Dialog', () => Dialog); registerElement('DialogContent', () => DialogContent); registerElement('DialogFooter', () => DialogFooter); } - } diff --git a/libs/fabric/src/components/divider/divider.component.ts b/libs/fabric/src/components/divider/divider.component.ts index 58c0898..495b8c6 100644 --- a/libs/fabric/src/components/divider/divider.component.ts +++ b/libs/fabric/src/components/divider/divider.component.ts @@ -22,5 +22,4 @@ export class FabDividerComponent extends ReactWrapperComponent VerticalDivider); } - } diff --git a/libs/fabric/src/components/fabric/fabric.component.ts b/libs/fabric/src/components/fabric/fabric.component.ts index 86f688a..4519b55 100644 --- a/libs/fabric/src/components/fabric/fabric.component.ts +++ b/libs/fabric/src/components/fabric/fabric.component.ts @@ -25,5 +25,4 @@ export class FabFabricComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/fabric/fabric.module.ts b/libs/fabric/src/components/fabric/fabric.module.ts index 841f212..49974cd 100644 --- a/libs/fabric/src/components/fabric/fabric.module.ts +++ b/libs/fabric/src/components/fabric/fabric.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; import { FabFabricComponent } from './fabric.component'; -const components = [ - FabFabricComponent, -]; +const components = [FabFabricComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabFabricModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Fabric', () => Fabric); } - } diff --git a/libs/fabric/src/components/grouped-list/grouped-list.component.ts b/libs/fabric/src/components/grouped-list/grouped-list.component.ts index 366590e..f897722 100644 --- a/libs/fabric/src/components/grouped-list/grouped-list.component.ts +++ b/libs/fabric/src/components/grouped-list/grouped-list.component.ts @@ -1,5 +1,15 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList'; import { IListProps } from 'office-ui-fabric-react/lib/List'; @@ -81,5 +91,5 @@ export class FabGroupedListComponent extends ReactWrapperComponent GroupedList); } - } diff --git a/libs/fabric/src/components/hover-card/hover-card.component.ts b/libs/fabric/src/components/hover-card/hover-card.component.ts index a3f3701..3d558f4 100644 --- a/libs/fabric/src/components/hover-card/hover-card.component.ts +++ b/libs/fabric/src/components/hover-card/hover-card.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { EventEmitter, ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, Output, ChangeDetectorRef } from '@angular/core'; +import { + EventEmitter, + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + Output, + ChangeDetectorRef, +} from '@angular/core'; import { IHoverCardProps, IExpandingCardProps } from 'office-ui-fabric-react/lib/HoverCard'; import { omit } from '../../utils/omit'; @@ -45,7 +54,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent boolean; // Workaround for bug in the Fabric React types (() => void) @Input() setInitialFocus?: IHoverCardProps['setInitialFocus']; - @Input() set expandingCardOptions(value: IExpandingCardOptions) { + @Input() + set expandingCardOptions(value: IExpandingCardOptions) { this._expandingCardOptions = value; if (value) { this.transformedExpandingCardProps = this._transformExpandingCardOptionsToProps(value); @@ -75,8 +85,16 @@ export class FabHoverCardComponent extends ReactWrapperComponent compactCardRenderer({ data }) } as Pick, - expandedCardRenderer && { onRenderExpandedCard: data => expandedCardRenderer({ data }) } as Pick, + compactCardRenderer && + ({ onRenderCompactCard: data => compactCardRenderer({ data }) } as Pick< + IExpandingCardProps, + 'onRenderCompactCard' + >), + expandedCardRenderer && + ({ onRenderExpandedCard: data => expandedCardRenderer({ data }) } as Pick< + IExpandingCardProps, + 'onRenderExpandedCard' + >) ); } } @@ -84,7 +102,25 @@ export class FabHoverCardComponent extends ReactWrapperComponent { +export interface IExpandingCardOptions + extends Pick< + IExpandingCardProps, + | 'componentRef' + | 'renderData' + | 'targetElement' + | 'onEnter' + | 'onLeave' + | 'compactCardHeight' + | 'expandedCardHeight' + | 'mode' + | 'theme' + | 'directionalHint' + | 'gapSpace' + | 'styles' + | 'directionalHintFixed' + | 'trapFocus' + | 'firstFocus' + > { readonly renderCompactCard?: InputRendererOptions; readonly renderExpandedCard?: InputRendererOptions; } @@ -92,4 +128,3 @@ export interface IExpandingCardOptions extends Pick { readonly data: T; } - diff --git a/libs/fabric/src/components/hover-card/hover-card.module.ts b/libs/fabric/src/components/hover-card/hover-card.module.ts index 6963eab..5068691 100644 --- a/libs/fabric/src/components/hover-card/hover-card.module.ts +++ b/libs/fabric/src/components/hover-card/hover-card.module.ts @@ -13,14 +13,12 @@ const components = [ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabHoverCardModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('HoverCard', () => HoverCard); registerElement('ExpandingCard', () => ExpandingCard); } - } diff --git a/libs/fabric/src/components/icon/icon.component.ts b/libs/fabric/src/components/icon/icon.component.ts index c8304b3..0652643 100644 --- a/libs/fabric/src/components/icon/icon.component.ts +++ b/libs/fabric/src/components/icon/icon.component.ts @@ -34,5 +34,4 @@ export class FabIconComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef, true); } - } diff --git a/libs/fabric/src/components/icon/icon.module.ts b/libs/fabric/src/components/icon/icon.module.ts index a7df819..17f9aae 100644 --- a/libs/fabric/src/components/icon/icon.module.ts +++ b/libs/fabric/src/components/icon/icon.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Icon } from 'office-ui-fabric-react/lib/Icon'; import { FabIconComponent } from './icon.component'; -const components = [ - FabIconComponent, -]; +const components = [FabIconComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabIconModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Icon', () => Icon); } - } diff --git a/libs/fabric/src/components/image/image.component.ts b/libs/fabric/src/components/image/image.component.ts index 8c39377..656d8c6 100644 --- a/libs/fabric/src/components/image/image.component.ts +++ b/libs/fabric/src/components/image/image.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image'; @Component({ @@ -34,7 +43,6 @@ import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabImageComponent extends ReactWrapperComponent { - @Input() alt?: IImageProps['alt']; @Input() crossOrigin?: IImageProps['crossOrigin']; @Input() height?: IImageProps['height']; @@ -61,5 +69,4 @@ export class FabImageComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/image/image.module.ts b/libs/fabric/src/components/image/image.module.ts index fc2ebd1..fbeb4d9 100644 --- a/libs/fabric/src/components/image/image.module.ts +++ b/libs/fabric/src/components/image/image.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Image } from 'office-ui-fabric-react/lib/Image'; import { FabImageComponent } from './image.component'; -const components = [ - FabImageComponent, -]; +const components = [FabImageComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabImageModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Image', () => Image); } - } diff --git a/libs/fabric/src/components/link/link.component.ts b/libs/fabric/src/components/link/link.component.ts index 8bb127e..dcf4272 100644 --- a/libs/fabric/src/components/link/link.component.ts +++ b/libs/fabric/src/components/link/link.component.ts @@ -71,5 +71,4 @@ export class FabLinkComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/link/link.module.ts b/libs/fabric/src/components/link/link.module.ts index 2b5af3a..ccbdd88 100644 --- a/libs/fabric/src/components/link/link.module.ts +++ b/libs/fabric/src/components/link/link.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Link } from 'office-ui-fabric-react/lib/Link'; import { FabLinkComponent } from './link.component'; -const components = [ - FabLinkComponent, -]; +const components = [FabLinkComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabLinkModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Link', () => Link); } - } diff --git a/libs/fabric/src/components/message-bar/message-bar.component.ts b/libs/fabric/src/components/message-bar/message-bar.component.ts index 5d2230e..15fae71 100644 --- a/libs/fabric/src/components/message-bar/message-bar.component.ts +++ b/libs/fabric/src/components/message-bar/message-bar.component.ts @@ -1,5 +1,15 @@ import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar'; import { BaseButton, Button } from 'office-ui-fabric-react/lib/Button'; @@ -66,7 +76,6 @@ export class FabMessageBarComponent extends ReactWrapperComponent { this.onDismiss.emit(ev && ev.nativeEvent); - } + }; } - } diff --git a/libs/fabric/src/components/message-bar/message-bar.module.ts b/libs/fabric/src/components/message-bar/message-bar.module.ts index 97386ac..b20daf1 100644 --- a/libs/fabric/src/components/message-bar/message-bar.module.ts +++ b/libs/fabric/src/components/message-bar/message-bar.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar'; import { FabMessageBarComponent } from './message-bar.component'; -const components = [ - FabMessageBarComponent, -]; +const components = [FabMessageBarComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabMessageBarModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('MessageBar', () => MessageBar); } - } diff --git a/libs/fabric/src/components/modal/modal.component.ts b/libs/fabric/src/components/modal/modal.component.ts index b971216..5dd2d58 100644 --- a/libs/fabric/src/components/modal/modal.component.ts +++ b/libs/fabric/src/components/modal/modal.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, EventEmitter, ChangeDetectorRef, Output } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + EventEmitter, + ChangeDetectorRef, + Output, +} from '@angular/core'; import { IModalProps } from 'office-ui-fabric-react/lib/Modal'; import { IAccessiblePopupProps } from 'office-ui-fabric-react/lib/common/IAccessiblePopupProps'; import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode'; @@ -37,7 +46,8 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d styles: ['react-renderer'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FabModalComponent extends ReactWrapperComponent implements IWithResponsiveModeState, IAccessiblePopupProps { +export class FabModalComponent extends ReactWrapperComponent + implements IWithResponsiveModeState, IAccessiblePopupProps { @ViewChild('reactNode') protected reactNodeRef: ElementRef; @Input() responsiveMode?: IModalProps['responsiveMode']; diff --git a/libs/fabric/src/components/modal/modal.module.ts b/libs/fabric/src/components/modal/modal.module.ts index 6088dea..f0ca063 100644 --- a/libs/fabric/src/components/modal/modal.module.ts +++ b/libs/fabric/src/components/modal/modal.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Modal } from 'office-ui-fabric-react/lib/Modal'; import { FabModalComponent } from './modal.component'; -const components = [ - FabModalComponent, -]; +const components = [FabModalComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabModalModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Modal', () => Modal); } - } diff --git a/libs/fabric/src/components/panel/panel.component.ts b/libs/fabric/src/components/panel/panel.component.ts index 4aafa76..dc656e4 100644 --- a/libs/fabric/src/components/panel/panel.component.ts +++ b/libs/fabric/src/components/panel/panel.component.ts @@ -1,5 +1,15 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Panel'; @Component({ @@ -97,21 +107,23 @@ export class FabPanelComponent extends ReactWrapperComponent implem this.onRenderFooterContent = this.createRenderPropHandler(this.renderFooterContent); } - onRenderHeader(props?: IPanelProps, defaultRender?: IPanelHeaderRenderer, headerTextId?: string | undefined): JSX.Element { + onRenderHeader( + props?: IPanelProps, + defaultRender?: IPanelHeaderRenderer, + headerTextId?: string | undefined + ): JSX.Element { if (!this.renderHeader) { return typeof defaultRender === 'function' ? defaultRender(props, defaultRender, headerTextId) : null; } return this._renderHeader({ props, headerTextId }); } - } /** * Counterpart of `IPanelHeaderRenderer`. */ export interface IPanelHeaderRenderContext { - readonly props?: IPanelProps - readonly headerTextId?: string | undefined + readonly props?: IPanelProps; + readonly headerTextId?: string | undefined; } - diff --git a/libs/fabric/src/components/panel/panel.module.ts b/libs/fabric/src/components/panel/panel.module.ts index 5363bc2..9ee63dd 100644 --- a/libs/fabric/src/components/panel/panel.module.ts +++ b/libs/fabric/src/components/panel/panel.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Panel } from 'office-ui-fabric-react/lib/Panel'; import { FabPanelComponent } from './panel.component'; -const components = [ - FabPanelComponent, -]; +const components = [FabPanelComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabPanelModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Panel', () => Panel); } - } diff --git a/libs/fabric/src/components/persona/persona.component.ts b/libs/fabric/src/components/persona/persona.component.ts index 8cf8d1c..ec952ff 100644 --- a/libs/fabric/src/components/persona/persona.component.ts +++ b/libs/fabric/src/components/persona/persona.component.ts @@ -1,9 +1,20 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { ImageLoadState } from 'office-ui-fabric-react/lib/components/Image/Image.types'; import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from 'office-ui-fabric-react/lib/Persona'; -export abstract class FabPersonaBaseComponent extends ReactWrapperComponent implements OnInit { +export abstract class FabPersonaBaseComponent extends ReactWrapperComponent + implements OnInit { @Input() text?: IPersonaProps['text']; @Input() size?: IPersonaProps['size']; @Input() imageShouldFadeIn?: IPersonaProps['imageShouldFadeIn']; @@ -152,4 +163,3 @@ export class FabPersonaCoinComponent extends FabPersonaBaseComponent Persona); registerElement('PersonaCoin', () => PersonaCoin); } - } diff --git a/libs/fabric/src/components/pickers/base-picker/base-picker.component.ts b/libs/fabric/src/components/pickers/base-picker/base-picker.component.ts index bf9ed96..fc5ccc8 100644 --- a/libs/fabric/src/components/pickers/base-picker/base-picker.component.ts +++ b/libs/fabric/src/components/pickers/base-picker/base-picker.component.ts @@ -1,11 +1,23 @@ import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + OnInit, + Output, + EventEmitter, + ChangeDetectorRef, +} from '@angular/core'; import { IBasePickerProps, BaseAutoFill } from 'office-ui-fabric-react/lib/Pickers'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; import { IPickerItemProps, IBasePickerSuggestionsProps } from 'office-ui-fabric-react/lib/Pickers'; import omit from '../../../utils/omit'; -export abstract class FabBasePickerComponent> extends ReactWrapperComponent implements OnInit { +export abstract class FabBasePickerComponent> + extends ReactWrapperComponent + implements OnInit { @Input() componentRef?: IBasePickerProps['componentRef']; @Input() resolveDelay?: IBasePickerProps['resolveDelay']; @Input() defaultSelectedItems?: IBasePickerProps['defaultSelectedItems']; @@ -26,7 +38,8 @@ export abstract class FabBasePickerComponent['onGetMoreResults']; @Input('validateInput') onValidateInput?: IBasePickerProps['onValidateInput']; - @Input() set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) { + @Input() + set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) { this._pickerSuggestionsOptions = value; if (value) { @@ -44,11 +57,14 @@ export abstract class FabBasePickerComponent(); @Output() readonly onFocus = new EventEmitter(); @Output() readonly onBlur = new EventEmitter(); - @Output() readonly onDismiss = new EventEmitter<{ ev?: any, selectedItem?: T }>(); + @Output() readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>(); @Output() readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>(); pickerSuggestionsProps: IBasePickerSuggestionsProps; - onRenderSuggestionsItem: (props?: IRenderSuggestionItemContext, defaultRender?: JsxRenderFunc>) => JSX.Element; + onRenderSuggestionsItem: ( + props?: IRenderSuggestionItemContext, + defaultRender?: JsxRenderFunc> + ) => JSX.Element; onRenderItem: (props?: IPickerItemProps, defaultRender?: JsxRenderFunc>) => JSX.Element; private _pickerSuggestionsOptions: IBasePickerSuggestionsOptions; @@ -84,7 +100,7 @@ export abstract class FabBasePickerComponent noResultFoundRenderer({}) } as Pick, - resultsFooterFullRenderer && { resultsFooterFull: () => resultsFooterFullRenderer({}) } as Pick, - resultsFooterRenderer && { resultsFooter: () => resultsFooterRenderer({}) } as Pick, + noResultFoundRenderer && + ({ onRenderNoResultFound: () => noResultFoundRenderer({}) } as Pick< + IBasePickerSuggestionsProps, + 'onRenderNoResultFound' + >), + resultsFooterFullRenderer && + ({ resultsFooterFull: () => resultsFooterFullRenderer({}) } as Pick< + IBasePickerSuggestionsProps, + 'resultsFooterFull' + >), + resultsFooterRenderer && + ({ resultsFooter: () => resultsFooterRenderer({}) } as Pick) ); } } -export interface IBasePickerSuggestionsOptions extends Pick { +export interface IBasePickerSuggestionsOptions + extends Pick< + IBasePickerSuggestionsProps, + | 'suggestionsHeaderText' + | 'mostRecentlyUsedHeaderText' + | 'noResultsFoundText' + | 'className' + | 'suggestionsClassName' + | 'suggestionsItemClassName' + | 'searchForMoreText' + | 'forceResolveText' + | 'loadingText' + | 'searchingText' + | 'resultsMaximumNumber' + | 'showRemoveButtons' + | 'suggestionsAvailableAlertText' + | 'suggestionsContainerAriaLabel' + > { readonly renderNoResultFound: InputRendererOptions<{}>; readonly renderResultsFooterFull: InputRendererOptions<{}>; readonly renderResultsFooter: InputRendererOptions<{}>; diff --git a/libs/fabric/src/components/pickers/base-picker/base-picker.module.ts b/libs/fabric/src/components/pickers/base-picker/base-picker.module.ts index e292619..583a7ca 100644 --- a/libs/fabric/src/components/pickers/base-picker/base-picker.module.ts +++ b/libs/fabric/src/components/pickers/base-picker/base-picker.module.ts @@ -5,13 +5,11 @@ import { BasePicker } from 'office-ui-fabric-react/lib/pickers'; @NgModule({ imports: [CommonModule], - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabBasePickerModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('BasePicker', () => BasePicker); } - } diff --git a/libs/fabric/src/components/pickers/tag-picker/tag-picker.component.ts b/libs/fabric/src/components/pickers/tag-picker/tag-picker.component.ts index 39f3404..e7bb6fa 100644 --- a/libs/fabric/src/components/pickers/tag-picker/tag-picker.component.ts +++ b/libs/fabric/src/components/pickers/tag-picker/tag-picker.component.ts @@ -1,5 +1,13 @@ import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; import { ITagPickerProps, ITag } from 'office-ui-fabric-react/lib/Pickers/TagPicker/TagPicker'; import { FabBasePickerComponent } from '../base-picker/base-picker.component'; @@ -51,4 +59,3 @@ export class FabTagPickerComponent extends FabBasePickerComponent TagPicker as any); } - } diff --git a/libs/fabric/src/components/pivot/pivot.component.ts b/libs/fabric/src/components/pivot/pivot.component.ts index e062416..cec93b1 100644 --- a/libs/fabric/src/components/pivot/pivot.component.ts +++ b/libs/fabric/src/components/pivot/pivot.component.ts @@ -1,5 +1,17 @@ import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent, passProp } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ContentChildren, + ElementRef, + EventEmitter, + Input, + OnInit, + Output, + QueryList, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot'; import * as React from 'react'; @@ -28,31 +40,40 @@ export class FabPivotItemComponent extends ReactWrapperComponent; + @Input() + renderItemLink?: InputRendererOptions; onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc) => JSX.Element; @@ -96,7 +117,6 @@ export class FabPivotItemComponent extends ReactWrapperComponent { - readonly PivotType = Pivot; readonly PivotItemType = PivotItem; @@ -116,7 +136,7 @@ export class FabPivotComponent extends ReactWrapperComponent { @Input() headersOnly?: IPivotProps['headersOnly']; @Input() getTabId?: IPivotProps['getTabId']; - @Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem, ev?: MouseEvent }>(); + @Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>(); constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef, true); diff --git a/libs/fabric/src/components/pivot/pivot.module.ts b/libs/fabric/src/components/pivot/pivot.module.ts index b68959b..9c74f27 100644 --- a/libs/fabric/src/components/pivot/pivot.module.ts +++ b/libs/fabric/src/components/pivot/pivot.module.ts @@ -4,23 +4,18 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot'; import { FabPivotComponent, FabPivotItemComponent } from './pivot.component'; -const components = [ - FabPivotComponent, - FabPivotItemComponent -]; +const components = [FabPivotComponent, FabPivotItemComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabPivotModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Pivot', () => Pivot); registerElement('PivotItem', () => PivotItem); } - } diff --git a/libs/fabric/src/components/search-box/search-box.component.ts b/libs/fabric/src/components/search-box/search-box.component.ts index 7b2eb33..5d07ed5 100644 --- a/libs/fabric/src/components/search-box/search-box.component.ts +++ b/libs/fabric/src/components/search-box/search-box.component.ts @@ -1,5 +1,15 @@ import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox'; import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu'; @@ -34,7 +44,6 @@ import omit from '../../utils/omit'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabSearchBoxComponent extends ReactWrapperComponent { - @ViewChild('reactNode') protected reactNodeRef: ElementRef; @Input() componentRef?: ISearchBoxProps['componentRef']; @@ -48,7 +57,8 @@ export class FabSearchBoxComponent extends ReactWrapperComponent iconRenderer(props) } as Pick, - textRenderer && { onRenderText: props => textRenderer(props) } as Pick, - descriptionRenderer && { onRenderDescription: props => descriptionRenderer(props) } as Pick, - ariaDescriptionRenderer && { onRenderAriaDescription: props => ariaDescriptionRenderer(props) } as Pick, - childrenRenderer && { onRenderChildren: props => childrenRenderer(props) } as Pick, - menuIconRenderer && { onRenderMenuIcon: props => menuIconRenderer(props) } as Pick, - menuRenderer && { onRenderMenu: props => menuRenderer(props) } as Pick, + iconRenderer && ({ onRenderIcon: props => iconRenderer(props) } as Pick), + textRenderer && ({ onRenderText: props => textRenderer(props) } as Pick), + descriptionRenderer && + ({ onRenderDescription: props => descriptionRenderer(props) } as Pick), + ariaDescriptionRenderer && + ({ onRenderAriaDescription: props => ariaDescriptionRenderer(props) } as Pick< + IButtonProps, + 'onRenderAriaDescription' + >), + childrenRenderer && + ({ onRenderChildren: props => childrenRenderer(props) } as Pick), + menuIconRenderer && + ({ onRenderMenuIcon: props => menuIconRenderer(props) } as Pick), + menuRenderer && ({ onRenderMenu: props => menuRenderer(props) } as Pick) ); } - } -export interface IButtonOptions extends Pick { +export interface IButtonOptions + extends Pick< + IButtonProps, + | 'componentRef' + | 'href' + | 'primary' + | 'uniqueId' + | 'disabled' + | 'allowDisabledFocus' + | 'primaryDisabled' + | 'styles' + | 'theme' + | 'checked' + | 'className' + | 'ariaLabel' + | 'ariaDescription' + | 'ariaHidden' + | 'text' + | 'iconProps' + | 'menuProps' + | 'onAfterMenuDismiss' + | 'split' + | 'menuIconProps' + | 'splitButtonAriaLabel' + | 'onMenuClick' + | 'secondaryText' + | 'toggled' + | 'data' + | 'getClassNames' + | 'getSplitButtonClassNames' + | 'menuTriggerKeyCode' + | 'keytipProps' + | 'persistMenu' + > { readonly renderIcon: InputRendererOptions; readonly renderText: InputRendererOptions; readonly renderDescription: InputRendererOptions; diff --git a/libs/fabric/src/components/search-box/search-box.module.ts b/libs/fabric/src/components/search-box/search-box.module.ts index 77a5036..db62a98 100644 --- a/libs/fabric/src/components/search-box/search-box.module.ts +++ b/libs/fabric/src/components/search-box/search-box.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox'; import { FabSearchBoxComponent } from './search-box.component'; -const components = [ - FabSearchBoxComponent, -]; +const components = [FabSearchBoxComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabSearchBoxModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('SearchBox', () => SearchBox); } - } diff --git a/libs/fabric/src/components/shimmer/shimmer.component.ts b/libs/fabric/src/components/shimmer/shimmer.component.ts index 649749e..0a6718e 100644 --- a/libs/fabric/src/components/shimmer/shimmer.component.ts +++ b/libs/fabric/src/components/shimmer/shimmer.component.ts @@ -1,5 +1,13 @@ import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + OnInit, + ChangeDetectorRef, +} from '@angular/core'; import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer'; import { IShimmerElementsGroupProps } from 'office-ui-fabric-react/lib/components/Shimmer/ShimmerElementsGroup/ShimmerElementsGroup.types'; @@ -36,7 +44,8 @@ export class FabShimmerComponent extends ReactWrapperComponent { @Input() className?: IShimmerProps['className']; @Input() theme?: IShimmerProps['theme']; - @Input() set renderCustomElementsGroup(value: InputRendererOptions<{}>) { + @Input() + set renderCustomElementsGroup(value: InputRendererOptions<{}>) { this._renderCustomElementsGroup = value; if (value) { diff --git a/libs/fabric/src/components/shimmer/shimmer.module.ts b/libs/fabric/src/components/shimmer/shimmer.module.ts index 2688a59..870e0be 100644 --- a/libs/fabric/src/components/shimmer/shimmer.module.ts +++ b/libs/fabric/src/components/shimmer/shimmer.module.ts @@ -4,23 +4,18 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Shimmer, ShimmerElementsGroup } from 'office-ui-fabric-react/lib/Shimmer'; import { FabShimmerComponent, FabShimmerElementsGroupComponent } from './shimmer.component'; -const components = [ - FabShimmerComponent, - FabShimmerElementsGroupComponent, -]; +const components = [FabShimmerComponent, FabShimmerElementsGroupComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabShimmerModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Shimmer', () => Shimmer); registerElement('ShimmerElementsGroup', () => ShimmerElementsGroup); } - } diff --git a/libs/fabric/src/components/slider/slider.component.ts b/libs/fabric/src/components/slider/slider.component.ts index ed75c06..cf86d7a 100644 --- a/libs/fabric/src/components/slider/slider.component.ts +++ b/libs/fabric/src/components/slider/slider.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + Output, + EventEmitter, + ChangeDetectorRef, +} from '@angular/core'; import { ISliderProps } from 'office-ui-fabric-react/lib/Slider'; @Component({ diff --git a/libs/fabric/src/components/slider/slider.module.ts b/libs/fabric/src/components/slider/slider.module.ts index ef4d101..c8832d1 100644 --- a/libs/fabric/src/components/slider/slider.module.ts +++ b/libs/fabric/src/components/slider/slider.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Slider } from 'office-ui-fabric-react/lib/Slider'; import { FabSliderComponent } from './slider.component'; -const components = [ - FabSliderComponent, -]; +const components = [FabSliderComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabSliderModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Slider', () => Slider); } - } diff --git a/libs/fabric/src/components/spinner/spinner.component.ts b/libs/fabric/src/components/spinner/spinner.component.ts index 486ae63..e79e213 100644 --- a/libs/fabric/src/components/spinner/spinner.component.ts +++ b/libs/fabric/src/components/spinner/spinner.component.ts @@ -38,5 +38,4 @@ export class FabSpinnerComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/spinner/spinner.module.ts b/libs/fabric/src/components/spinner/spinner.module.ts index 78ae8a0..f528034 100644 --- a/libs/fabric/src/components/spinner/spinner.module.ts +++ b/libs/fabric/src/components/spinner/spinner.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; import { FabSpinnerComponent } from './spinner.component'; -const components = [ - FabSpinnerComponent, -]; +const components = [FabSpinnerComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabSpinnerModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Spinner', () => Spinner); } - } diff --git a/libs/fabric/src/components/toggle/toggle.component.ts b/libs/fabric/src/components/toggle/toggle.component.ts index 790a8b0..4a58579 100644 --- a/libs/fabric/src/components/toggle/toggle.component.ts +++ b/libs/fabric/src/components/toggle/toggle.component.ts @@ -1,5 +1,14 @@ import { ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + EventEmitter, + Input, + Output, + ViewChild, + ChangeDetectorRef, +} from '@angular/core'; import { IToggleProps } from 'office-ui-fabric-react/lib/Toggle'; @Component({ @@ -58,5 +67,4 @@ export class FabToggleComponent extends ReactWrapperComponent { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef) { super(elementRef, changeDetectorRef); } - } diff --git a/libs/fabric/src/components/toggle/toggle.module.ts b/libs/fabric/src/components/toggle/toggle.module.ts index 906639a..b9a1b1c 100644 --- a/libs/fabric/src/components/toggle/toggle.module.ts +++ b/libs/fabric/src/components/toggle/toggle.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; import { FabToggleComponent } from './toggle.component'; -const components = [ - FabToggleComponent, -]; +const components = [FabToggleComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabToggleModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('Toggle', () => Toggle); } - } diff --git a/libs/fabric/src/components/tooltip/tooltip-host.component.ts b/libs/fabric/src/components/tooltip/tooltip-host.component.ts index e94df54..f4f5acc 100644 --- a/libs/fabric/src/components/tooltip/tooltip-host.component.ts +++ b/libs/fabric/src/components/tooltip/tooltip-host.component.ts @@ -1,5 +1,15 @@ import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core'; -import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, OnInit, EventEmitter, Output, ChangeDetectorRef } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + ViewChild, + OnInit, + EventEmitter, + Output, + ChangeDetectorRef, +} from '@angular/core'; import { ITooltipHostProps } from 'office-ui-fabric-react/lib/Tooltip'; import { ITooltipProps } from 'office-ui-fabric-react/lib/Tooltip'; import { omit } from '../../utils/omit'; @@ -26,7 +36,7 @@ import { omit } from '../../utils/omit'; `, - styles: [ 'react-renderer' ], + styles: ['react-renderer'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class FabTooltipHostComponent extends ReactWrapperComponent { @@ -43,19 +53,19 @@ export class FabTooltipHostComponent extends ReactWrapperComponent(); + @Output() readonly onTooltipToggle = new EventEmitter<{ isTooltipVisible: boolean }>(); transformedTooltipProps: ITooltipHostProps['tooltipProps']; private _tooltipOptions: ITooltipOptions; @@ -78,7 +88,7 @@ export class FabTooltipHostComponent extends ReactWrapperComponent contentRenderer(data) } as Pick, + contentRenderer && ({ onRenderContent: data => contentRenderer(data) } as Pick) ); } } @@ -86,6 +96,19 @@ export class FabTooltipHostComponent extends ReactWrapperComponent { +export interface ITooltipOptions + extends Pick< + ITooltipProps, + | 'componentRef' + | 'calloutProps' + | 'content' + | 'delay' + | 'maxWidth' + | 'targetElement' + | 'directionalHint' + | 'directionalHintForRTL' + | 'theme' + | 'styles' + > { readonly renderContent?: InputRendererOptions; } diff --git a/libs/fabric/src/components/tooltip/tooltip.module.ts b/libs/fabric/src/components/tooltip/tooltip.module.ts index 4b1cce4..beaebbb 100644 --- a/libs/fabric/src/components/tooltip/tooltip.module.ts +++ b/libs/fabric/src/components/tooltip/tooltip.module.ts @@ -4,21 +4,17 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import { FabTooltipHostComponent } from './tooltip-host.component'; -const components = [ - FabTooltipHostComponent, -]; +const components = [FabTooltipHostComponent]; @NgModule({ imports: [CommonModule], declarations: components, exports: components, - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }) export class FabTooltipModule { - constructor() { // Add any React elements to the registry (used by the renderer). registerElement('TooltipHost', () => TooltipHost); } - } diff --git a/libs/fabric/src/utils/omit.ts b/libs/fabric/src/utils/omit.ts index f1ccbde..4b9b18b 100644 --- a/libs/fabric/src/utils/omit.ts +++ b/libs/fabric/src/utils/omit.ts @@ -1,12 +1,10 @@ -export function omit(obj: T, ...keys: K[]): Partial /* Can replace with Exclude type from TS 2.8 */ { +export function omit( + obj: T, + ...keys: K[] +): Partial /* Can replace with Exclude type from TS 2.8 */ { return Object.keys(obj) .filter(key => !keys.includes(key as K)) - .reduce>((acc, key) => - Object.assign( - acc, - { [key]: obj[key] } - ), {} - ); + .reduce>((acc, key) => Object.assign(acc, { [key]: obj[key] }), {}); } export default omit; diff --git a/libs/fabric/src/utils/pick.ts b/libs/fabric/src/utils/pick.ts index 233aedf..efabb07 100644 --- a/libs/fabric/src/utils/pick.ts +++ b/libs/fabric/src/utils/pick.ts @@ -1,10 +1,5 @@ export function pick(obj: T, ...keys: K[]): Pick { - return keys.reduce>((acc, key) => - Object.assign( - acc, - { [key]: obj[key] } - ), {} as any - ); + return keys.reduce>((acc, key) => Object.assign(acc, { [key]: obj[key] }), {} as any); } export default pick;