microsoft
/
angular-react
зеркало из https://github.com/microsoft/angular-react.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Package upgrades, Prettier alignment (#38) 

- Package upgrades (non-breaking)
- Align repo to Prettier 1.15.3
  - [includes] Revert decorators to their previous position in components, before the change in 1.14.
This commit is contained in:
Ben Grynhaus 2018-12-01 21:25:27 +02:00 коммит произвёл GitHub
Родитель 13ff801cc7
Коммит 68f3581e9e
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
117 изменённых файлов: 12020 добавлений и 8105 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
CODE_OF_CONDUCT.md
Просмотреть файл

@ -1,3 +1,3 @@
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

3
CONTRIBUTING.md
Просмотреть файл

@ -14,6 +14,7 @@ For more information see the [Code of Conduct FAQ](https://opensource.microsoft.
or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
## Pull Requests Reviews ## Pull Requests Reviews
This is a simple guide to assist in reviewing Github pull requests locally within VS Code. This is a simple guide to assist in reviewing Github pull requests locally within VS Code.
See: https://gist.github.com/piscisaureus/3342247 See: https://gist.github.com/piscisaureus/3342247
@ -66,4 +67,4 @@ Fast-forward
... ...
``` ```
Note: "git pull" did not work for me by itself for the PR branch... Perhaps "git pull origin". Note: "git pull" did not work for me by itself for the PR branch... Perhaps "git pull origin".

12
README.md
Просмотреть файл

@ -2,11 +2,12 @@
[![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core) [![npm version](https://badge.fury.io/js/%40angular-react%2Fcore.svg)](https://www.npmjs.com/package/@angular-react/core)
Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons. Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.
Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer. Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer.
### Quick links ### Quick links
[@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) | [@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) |
[Documentation, quick start, and guides][ard] | [Documentation, quick start, and guides][ard] |
[Demo][ard-demo] | [Demo][ard-demo] |
@ -15,15 +16,18 @@ Use of Angular-React allows consuming any React elements, but specifically Offic
[Office UI Fabric](https://developer.microsoft.com/en-us/fabric) [Office UI Fabric](https://developer.microsoft.com/en-us/fabric)
### Typical Use Cases ### Typical Use Cases
- Use React component libraries with Angular - Use React component libraries with Angular
- Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written) - Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
## Libraries ## Libraries
- [**core**][lib-core]: Includes the Renderer and supporting logic to render Angular components with React implementations as React components. - [**core**][lib-core]: Includes the Renderer and supporting logic to render Angular components with React implementations as React components.
- [**fabric**][lib-fab]: The light-weight Angular component wrappers that expose the Fabric React component api through common Angular components (including both imperative AND declrative syntax in many cases). - [**fabric**][lib-fab]: The light-weight Angular component wrappers that expose the Fabric React component api through common Angular components (including both imperative AND declrative syntax in many cases).
# Roadmap # Roadmap
Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded. We have moved beyond the initial simple Fabric components and expanded coverage to much of the available [Office UI Fabric][fab-c] component library.
Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded. We have moved beyond the initial simple Fabric components and expanded coverage to much of the available [Office UI Fabric][fab-c] component library.
In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications. In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications.
@ -41,4 +45,4 @@ You can look through the issues (which should be up-to-date on who is working on
[fab]: https://developer.microsoft.com/en-us/fabric [fab]: https://developer.microsoft.com/en-us/fabric
[fab-c]: https://developer.microsoft.com/en-us/fabric#/components [fab-c]: https://developer.microsoft.com/en-us/fabric#/components
[lib-core]: https://www.npmjs.com/package/@angular-react/core [lib-core]: https://www.npmjs.com/package/@angular-react/core
[lib-fab]: https://www.npmjs.com/package/@angular-react/fabric [lib-fab]: https://www.npmjs.com/package/@angular-react/fabric

12
apps/demo/karma.conf.js
Просмотреть файл

@ -1,8 +1,7 @@
// Karma configuration file, see link for more information // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html // https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) { module.exports = function(config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -11,15 +10,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular-devkit/build-angular/plugins/karma'),
], ],
client: { client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false, // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'), dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'], reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true,
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
@ -27,7 +26,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['Chrome'],
singleRun: false singleRun: false,
}); });
}; };

34
apps/demo/src/404.html
Просмотреть файл

@ -1,27 +1,19 @@
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<head> <title>Angular-React Demo</title>
<meta charset="utf-8" />
<title>Angular-React Demo</title> <script>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</script>
<script> <!-- Immediately redirect to the base URL so we can use the SPA routing. -->
// Store the URL the user was trying to access when receiving the 404. <meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/demo/'" />
sessionStorage.redirect = location.href; </head>
</script>
<!-- Immediately redirect to the base URL so we can use the SPA routing. -->
<meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/demo/'"></meta>
</head>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</body>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</html> </html>

50
apps/demo/src/app/app.component.html
Просмотреть файл

@ -117,24 +117,56 @@
<fab-calendar [strings]="strings" (onSelectDate)="onSelectDate($event)"></fab-calendar> <fab-calendar [strings]="strings" (onSelectDate)="onSelectDate($event)"></fab-calendar>
<fab-marquee-selection [isEnabled]="marqueeEnabled" [selection]="selection"> <fab-marquee-selection [isEnabled]="marqueeEnabled" [selection]="selection">
<fab-details-list [selection]="selection" [items]="detailItems" (onColumnHeaderClick)="onColumnHeaderClicked($event)"> <fab-details-list
[selection]="selection"
[items]="detailItems"
(onColumnHeaderClick)="onColumnHeaderClicked($event)"
>
<columns> <columns>
<fab-details-list-column key="column-1" [minWidth]="150" name="Column #1" fieldName="field1" [isResizable]="true"> <fab-details-list-column
key="column-1"
[minWidth]="150"
name="Column #1"
fieldName="field1"
[isResizable]="true"
>
</fab-details-list-column> </fab-details-list-column>
<fab-details-list-column key="column-2" [minWidth]="150" name="Column #2" fieldName="field2" [isResizable]="true"> <fab-details-list-column
key="column-2"
[minWidth]="150"
name="Column #2"
fieldName="field2"
[isResizable]="true"
>
</fab-details-list-column> </fab-details-list-column>
<fab-details-list-column key="column-3" [minWidth]="150" name="Custom Column" fieldName="field3" [isResizable]="true"> <fab-details-list-column
key="column-3"
[minWidth]="150"
name="Custom Column"
fieldName="field3"
[isResizable]="true"
>
<render> <render>
<ng-template let-index="index"> <ng-template let-index="index"> Custom content for index {{ index }} </ng-template>
Custom content for index {{ index }}
</ng-template>
</render> </render>
</fab-details-list-column> </fab-details-list-column>
</columns> </columns>
<groups> <groups>
<fab-group-item key="group-1" name="Group #1" [count]="3" [startIndex]="0"> <fab-group-item key="group-1" name="Group #1" [count]="3" [startIndex]="0">
<fab-group-item [level]="1" key="group-1-1" name="Nested Group #1.1" [count]="1" [startIndex]="0"></fab-group-item> <fab-group-item
<fab-group-item [level]="1" key="group-1-2" name="Nested Group #1.2" [count]="2" [startIndex]="1"></fab-group-item> [level]="1"
key="group-1-1"
name="Nested Group #1.1"
[count]="1"
[startIndex]="0"
></fab-group-item>
<fab-group-item
[level]="1"
key="group-1-2"
name="Nested Group #1.2"
[count]="2"
[startIndex]="1"
></fab-group-item>
</fab-group-item> </fab-group-item>
<fab-group-item key="group-2" name="Group #2" [count]="1" [startIndex]="3"></fab-group-item> <fab-group-item key="group-2" name="Group #2" [count]="1" [startIndex]="3"></fab-group-item>
<fab-group-item key="group-3" name="Group #3" [count]="1" [startIndex]="4"></fab-group-item> <fab-group-item key="group-3" name="Group #3" [count]="1" [startIndex]="4"></fab-group-item>

6
apps/demo/src/app/app.component.ts
Просмотреть файл

@ -8,8 +8,10 @@ import { ICalendarStrings, IContextualMenuProps, ISelection, Selection } from 'o
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
}) })
export class AppComponent { export class AppComponent {
@ViewChild('customRange') @ViewChild('customRange') customRangeTemplate: TemplateRef<{
customRangeTemplate: TemplateRef<{ item: any; dismissMenu: (ev?: any, dismissAll?: boolean) => void }>; item: any;
dismissMenu: (ev?: any, dismissAll?: boolean) => void;
}>;
onClickEventHandler(ev) { onClickEventHandler(ev) {
console.log('onClick', { ev }); console.log('onClick', { ev });

2
apps/demo/src/app/app.module.ts
Просмотреть файл

@ -72,7 +72,7 @@ import { CounterComponent } from './counter/counter.component';
FabCalendarModule, FabCalendarModule,
FabDetailsListModule, FabDetailsListModule,
FabGroupModule, FabGroupModule,
FabMarqueeSelectionModule FabMarqueeSelectionModule,
], ],
declarations: [AppComponent, CounterComponent], declarations: [AppComponent, CounterComponent],
bootstrap: [AppComponent], bootstrap: [AppComponent],

2
apps/demo/src/app/counter/counter.component.ts
Просмотреть файл

@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/
selector: 'counter', selector: 'counter',
template: ` template: `
<fab-default-button [text]="count + '+'" (onClick)="onClick()"></fab-default-button> <fab-default-button [text]="count + '+'" (onClick)="onClick()"></fab-default-button>
`, `,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class CounterComponent { export class CounterComponent {

22
apps/demo/src/index.html
Просмотреть файл

@ -1,14 +1,14 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Angular-React Demo</title> <title>Angular-React Demo</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

9
apps/demo/tsconfig.app.json
Просмотреть файл

@ -4,11 +4,6 @@
"outDir": "../../dist/out-tsc/apps/demo", "outDir": "../../dist/out-tsc/apps/demo",
"module": "es2015" "module": "es2015"
}, },
"include": [ "include": ["**/*.ts"],
"**/*.ts" "exclude": ["**/*.spec.ts", "src/test.ts"]
],
"exclude": [
"**/*.spec.ts",
"src/test.ts"
]
} }

15
apps/demo/tsconfig.spec.json
Просмотреть файл

@ -2,18 +2,9 @@
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../../dist/out-tsc/apps/demo", "outDir": "../../dist/out-tsc/apps/demo",
"types": [ "types": ["jasmine", "node"],
"jasmine",
"node"
],
"module": "commonjs" "module": "commonjs"
}, },
"files": [ "files": ["src/test.ts", "src/polyfills.ts"],
"src/test.ts", "include": ["**/*.spec.ts", "**/*.d.ts"]
"src/polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
} }

14
apps/demo/tslint.json
Просмотреть файл

@ -1,17 +1,7 @@
{ {
"extends": "../../tslint.json", "extends": "../../tslint.json",
"rules": { "rules": {
"directive-selector": [ "directive-selector": [true, "attribute", "app", "camelCase"],
true, "component-selector": [true, "element", "app", "kebab-case"]
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
} }
} }

12
apps/docs/karma.conf.js
Просмотреть файл

@ -1,8 +1,7 @@
// Karma configuration file, see link for more information // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html // https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) { module.exports = function(config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -11,15 +10,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular-devkit/build-angular/plugins/karma'),
], ],
client: { client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false, // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'), dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'], reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true,
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
@ -27,7 +26,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['Chrome'],
singleRun: false singleRun: false,
}); });
}; };

34
apps/docs/src/404.html
Просмотреть файл

@ -1,27 +1,19 @@
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<head> <title>Angular-React</title>
<meta charset="utf-8" />
<title>Angular-React</title> <script>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</script>
<script> <!-- Immediately redirect to the base URL so we can use the SPA routing. -->
// Store the URL the user was trying to access when receiving the 404. <meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/'" />
sessionStorage.redirect = location.href; </head>
</script>
<!-- Immediately redirect to the base URL so we can use the SPA routing. -->
<meta http-equiv="refresh" content="0;URL='https://microsoft.github.io/angular-react/'"></meta>
</head>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</body>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</html> </html>

28
apps/docs/src/app/components/dot/dot.component.ts
Просмотреть файл

@ -8,24 +8,16 @@ import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class DotComponent { export class DotComponent {
@Input() @Input() x: string;
x: string; @Input() y: string;
@Input() @Input() size: string;
y: string; @Input() color: string;
@Input() @Input() backgroundColor: string;
size: string; @Input() textOverride: string;
@Input()
color: string;
@Input()
backgroundColor: string;
@Input()
textOverride: string;
@Output('onMouseEnter') @Output('onMouseEnter') readonly mouseEnter = new EventEmitter<MouseEvent>();
mouseEnter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>(); @Output('onMouseLeave') readonly mouseLeave = new EventEmitter<MouseEvent>();
@Output('onMouseLeave')
mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
onMouseEnter = ev => this.mouseEnter.emit(ev as any); onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev);
onMouseLeave = ev => this.mouseLeave.emit(ev as any); onMouseLeave = (ev: MouseEvent) => this.mouseLeave.emit(ev);
} }

23
apps/docs/src/app/components/icons/icons.component.html
Просмотреть файл

@ -1,35 +1,38 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="angular" aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24"> <symbol id="angular" aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-angular-icon">Angular icon</title> <title id="simpleicons-angular-icon">Angular icon</title>
<path d="M9.93 12.645h4.134L11.996 7.74" /> <path d="M9.93 12.645h4.134L11.996 7.74" />
<path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z" <path
d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"
/> />
</symbol> </symbol>
<symbol id="react" aria-labelledby="simpleicons-react-icon" role="img" viewBox="0 0 24 24"> <symbol id="react" aria-labelledby="simpleicons-react-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-react-icon">React icon</title> <title id="simpleicons-react-icon">React icon</title>
<circle cx="12" cy="12" r="2.139" /> <circle cx="12" cy="12" r="2.139" />
<path d="M6.008 16.255l-.472-.12C2.018 15.246 0 13.737 0 11.996s2.018-3.25 5.536-4.139l.472-.119.133.468a23.53 23.53 0 0 0 1.363 3.578l.101.213-.101.213a23.307 23.307 0 0 0-1.363 3.578l-.133.467zM5.317 8.95c-2.674.751-4.315 1.9-4.315 3.046 0 1.145 1.641 2.294 4.315 3.046a24.95 24.95 0 0 1 1.182-3.046A24.752 24.752 0 0 1 5.317 8.95zM17.992 16.255l-.133-.469a23.357 23.357 0 0 0-1.364-3.577l-.101-.213.101-.213a23.42 23.42 0 0 0 1.364-3.578l.133-.468.473.119c3.517.889 5.535 2.398 5.535 4.14s-2.018 3.25-5.535 4.139l-.473.12zm-.491-4.259c.48 1.039.877 2.06 1.182 3.046 2.675-.752 4.315-1.901 4.315-3.046 0-1.146-1.641-2.294-4.315-3.046a24.788 24.788 0 0 1-1.182 3.046z" <path
d="M6.008 16.255l-.472-.12C2.018 15.246 0 13.737 0 11.996s2.018-3.25 5.536-4.139l.472-.119.133.468a23.53 23.53 0 0 0 1.363 3.578l.101.213-.101.213a23.307 23.307 0 0 0-1.363 3.578l-.133.467zM5.317 8.95c-2.674.751-4.315 1.9-4.315 3.046 0 1.145 1.641 2.294 4.315 3.046a24.95 24.95 0 0 1 1.182-3.046A24.752 24.752 0 0 1 5.317 8.95zM17.992 16.255l-.133-.469a23.357 23.357 0 0 0-1.364-3.577l-.101-.213.101-.213a23.42 23.42 0 0 0 1.364-3.578l.133-.468.473.119c3.517.889 5.535 2.398 5.535 4.14s-2.018 3.25-5.535 4.139l-.473.12zm-.491-4.259c.48 1.039.877 2.06 1.182 3.046 2.675-.752 4.315-1.901 4.315-3.046 0-1.146-1.641-2.294-4.315-3.046a24.788 24.788 0 0 1-1.182 3.046z"
/> />
<path d="M5.31 8.945l-.133-.467C4.188 4.992 4.488 2.494 6 1.622c1.483-.856 3.864.155 6.359 2.716l.34.349-.34.349a23.552 23.552 0 0 0-2.422 2.967l-.135.193-.235.02a23.657 23.657 0 0 0-3.785.61l-.472.119zm1.896-6.63c-.268 0-.505.058-.705.173-.994.573-1.17 2.565-.485 5.253a25.122 25.122 0 0 1 3.233-.501 24.847 24.847 0 0 1 2.052-2.544c-1.56-1.519-3.037-2.381-4.095-2.381zM16.795 22.677c-.001 0-.001 0 0 0-1.425 0-3.255-1.073-5.154-3.023l-.34-.349.34-.349a23.53 23.53 0 0 0 2.421-2.968l.135-.193.234-.02a23.63 23.63 0 0 0 3.787-.609l.472-.119.134.468c.987 3.484.688 5.983-.824 6.854a2.38 2.38 0 0 1-1.205.308zm-4.096-3.381c1.56 1.519 3.037 2.381 4.095 2.381h.001c.267 0 .505-.058.704-.173.994-.573 1.171-2.566.485-5.254a25.02 25.02 0 0 1-3.234.501 24.674 24.674 0 0 1-2.051 2.545z" <path
d="M5.31 8.945l-.133-.467C4.188 4.992 4.488 2.494 6 1.622c1.483-.856 3.864.155 6.359 2.716l.34.349-.34.349a23.552 23.552 0 0 0-2.422 2.967l-.135.193-.235.02a23.657 23.657 0 0 0-3.785.61l-.472.119zm1.896-6.63c-.268 0-.505.058-.705.173-.994.573-1.17 2.565-.485 5.253a25.122 25.122 0 0 1 3.233-.501 24.847 24.847 0 0 1 2.052-2.544c-1.56-1.519-3.037-2.381-4.095-2.381zM16.795 22.677c-.001 0-.001 0 0 0-1.425 0-3.255-1.073-5.154-3.023l-.34-.349.34-.349a23.53 23.53 0 0 0 2.421-2.968l.135-.193.234-.02a23.63 23.63 0 0 0 3.787-.609l.472-.119.134.468c.987 3.484.688 5.983-.824 6.854a2.38 2.38 0 0 1-1.205.308zm-4.096-3.381c1.56 1.519 3.037 2.381 4.095 2.381h.001c.267 0 .505-.058.704-.173.994-.573 1.171-2.566.485-5.254a25.02 25.02 0 0 1-3.234.501 24.674 24.674 0 0 1-2.051 2.545z"
/> />
<path d="M18.69 8.945l-.472-.119a23.479 23.479 0 0 0-3.787-.61l-.234-.02-.135-.193a23.414 23.414 0 0 0-2.421-2.967l-.34-.349.34-.349C14.135 1.778 16.515.767 18 1.622c1.512.872 1.812 3.37.824 6.855l-.134.468zM14.75 7.24c1.142.104 2.227.273 3.234.501.686-2.688.509-4.68-.485-5.253-.988-.571-2.845.304-4.8 2.208A24.849 24.849 0 0 1 14.75 7.24zM7.206 22.677A2.38 2.38 0 0 1 6 22.369c-1.512-.871-1.812-3.369-.823-6.854l.132-.468.472.119c1.155.291 2.429.496 3.785.609l.235.02.134.193a23.596 23.596 0 0 0 2.422 2.968l.34.349-.34.349c-1.898 1.95-3.728 3.023-5.151 3.023zm-1.19-6.427c-.686 2.688-.509 4.681.485 5.254.987.563 2.843-.305 4.8-2.208a24.998 24.998 0 0 1-2.052-2.545 24.976 24.976 0 0 1-3.233-.501z" <path
d="M18.69 8.945l-.472-.119a23.479 23.479 0 0 0-3.787-.61l-.234-.02-.135-.193a23.414 23.414 0 0 0-2.421-2.967l-.34-.349.34-.349C14.135 1.778 16.515.767 18 1.622c1.512.872 1.812 3.37.824 6.855l-.134.468zM14.75 7.24c1.142.104 2.227.273 3.234.501.686-2.688.509-4.68-.485-5.253-.988-.571-2.845.304-4.8 2.208A24.849 24.849 0 0 1 14.75 7.24zM7.206 22.677A2.38 2.38 0 0 1 6 22.369c-1.512-.871-1.812-3.369-.823-6.854l.132-.468.472.119c1.155.291 2.429.496 3.785.609l.235.02.134.193a23.596 23.596 0 0 0 2.422 2.968l.34.349-.34.349c-1.898 1.95-3.728 3.023-5.151 3.023zm-1.19-6.427c-.686 2.688-.509 4.681.485 5.254.987.563 2.843-.305 4.8-2.208a24.998 24.998 0 0 1-2.052-2.545 24.976 24.976 0 0 1-3.233-.501z"
/> />
<path d="M12 16.878c-.823 0-1.669-.036-2.516-.106l-.235-.02-.135-.193a30.388 30.388 0 0 1-1.35-2.122 30.354 30.354 0 0 1-1.166-2.228l-.1-.213.1-.213a30.3 30.3 0 0 1 1.166-2.228c.414-.716.869-1.43 1.35-2.122l.135-.193.235-.02a29.785 29.785 0 0 1 5.033 0l.234.02.134.193a30.006 30.006 0 0 1 2.517 4.35l.101.213-.101.213a29.6 29.6 0 0 1-2.517 4.35l-.134.193-.234.02c-.847.07-1.694.106-2.517.106zm-2.197-1.084c1.48.111 2.914.111 4.395 0a29.006 29.006 0 0 0 2.196-3.798 28.585 28.585 0 0 0-2.197-3.798 29.031 29.031 0 0 0-4.394 0 28.477 28.477 0 0 0-2.197 3.798 29.114 29.114 0 0 0 2.197 3.798z" <path
d="M12 16.878c-.823 0-1.669-.036-2.516-.106l-.235-.02-.135-.193a30.388 30.388 0 0 1-1.35-2.122 30.354 30.354 0 0 1-1.166-2.228l-.1-.213.1-.213a30.3 30.3 0 0 1 1.166-2.228c.414-.716.869-1.43 1.35-2.122l.135-.193.235-.02a29.785 29.785 0 0 1 5.033 0l.234.02.134.193a30.006 30.006 0 0 1 2.517 4.35l.101.213-.101.213a29.6 29.6 0 0 1-2.517 4.35l-.134.193-.234.02c-.847.07-1.694.106-2.517.106zm-2.197-1.084c1.48.111 2.914.111 4.395 0a29.006 29.006 0 0 0 2.196-3.798 28.585 28.585 0 0 0-2.197-3.798 29.031 29.031 0 0 0-4.394 0 28.477 28.477 0 0 0-2.197 3.798 29.114 29.114 0 0 0 2.197 3.798z"
/> />
</symbol> </symbol>
<symbol id="microsoft" aria-labelledby="simpleicons-microsoft-icon" role="img" viewBox="0 0 24 24"> <symbol id="microsoft" aria-labelledby="simpleicons-microsoft-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-microsoft-icon">Microsoft icon</title> <title id="simpleicons-microsoft-icon">Microsoft icon</title>
<path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z" <path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z" />
/>
</symbol> </symbol>
<symbol id="google" aria-labelledby="simpleicons-google-icon" role="img" viewBox="0 0 24 24"> <symbol id="google" aria-labelledby="simpleicons-google-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-google-icon">Google icon</title> <title id="simpleicons-google-icon">Google icon</title>
<path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z" <path
d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
/> />
</symbol> </symbol>
</svg> </svg>

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 4.2 KiB

После

Ширина:  |  Высота:  |  Размер: 4.2 KiB

44
apps/docs/src/app/components/navbar/navbar.component.html
Просмотреть файл

@ -1,34 +1,52 @@
<nav mat-tab-nav-bar #primary class="primary"> <nav mat-tab-nav-bar #primary class="primary">
<a mat-button routerLink="."> <a mat-button routerLink=".">
<mat-icon> <mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#angular" /></svg>
<use xlink:href="#angular" />
</svg>
</mat-icon> </mat-icon>
<b>~</b> <b>~</b>
<mat-icon> <mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#react" /></svg>
<use xlink:href="#react" />
</svg>
</mat-icon> </mat-icon>
</a> </a>
<a mat-tab-link routerLink="performance" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive" [routerLinkActiveOptions]="{ exact: false }"> <a
mat-tab-link
routerLink="performance"
routerLinkActive
#rla1="routerLinkActive"
[active]="rla1.isActive"
[routerLinkActiveOptions]="{ exact: false }"
>
<div>Performance</div> <div>Performance</div>
</a> </a>
<a mat-tab-link routerLink="components" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive" [routerLinkActiveOptions]="{ exact: false }"><div>Components</div></a> <a
<a mat-tab-link routerLink="docs" routerLinkActive #rla3="routerLinkActive" [active]="rla3.isActive" [routerLinkActiveOptions]="{ exact: false }"><div>Docs</div></a> mat-tab-link
routerLink="components"
routerLinkActive
#rla2="routerLinkActive"
[active]="rla2.isActive"
[routerLinkActiveOptions]="{ exact: false }"
><div>Components</div></a
>
<a
mat-tab-link
routerLink="docs"
routerLinkActive
#rla3="routerLinkActive"
[active]="rla3.isActive"
[routerLinkActiveOptions]="{ exact: false }"
><div>Docs</div></a
>
<div class="spacer"></div> <div class="spacer"></div>
<a mat-button href="https://github.com/microsoft/angular-react"> <a mat-button href="https://github.com/microsoft/angular-react">
<mat-icon> <mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-github-icon">GitHub icon</title> <title id="simpleicons-github-icon">GitHub icon</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" <path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
/> />
</svg> </svg>
</mat-icon> </mat-icon>
</a> </a>
</nav> </nav>
<nav class="secondary" [class.collapse]="collapseSecondaryNav"> <nav class="secondary" [class.collapse]="collapseSecondaryNav"><ng-container #container></ng-container></nav>
<ng-container #container></ng-container>
</nav>

11
apps/docs/src/app/components/navbar/navbar.component.scss
Просмотреть файл

@ -47,7 +47,6 @@
background: $smoke; background: $smoke;
/deep/ .mat-tab-nav-bar { /deep/ .mat-tab-nav-bar {
.mat-tab-links { .mat-tab-links {
display: flex; display: flex;
overflow-y: auto; overflow-y: auto;
@ -104,11 +103,8 @@
} }
&.collapse { &.collapse {
/deep/ .mat-tab-nav-bar { /deep/ .mat-tab-nav-bar {
.mat-tab-links { .mat-tab-links {
.mat-tab-link { .mat-tab-link {
height: $navSecondaryHeightCollapsed; height: $navSecondaryHeightCollapsed;
@ -123,9 +119,7 @@
} }
&.stack { &.stack {
svg { svg {
&:first-child { &:first-child {
margin: -30%; margin: -30%;
height: 70%; height: 70%;
@ -152,7 +146,6 @@
@include mediaMobile { @include mediaMobile {
:host { :host {
nav.primary { nav.primary {
/deep/ .mat-button:first-child { /deep/ .mat-button:first-child {
.mat-button-wrapper { .mat-button-wrapper {
b { b {
@ -171,7 +164,6 @@
} }
/deep/ .mat-tab-links { /deep/ .mat-tab-links {
.mat-tab-link { .mat-tab-link {
padding: 0 3%; padding: 0 3%;
min-width: 0; min-width: 0;
@ -180,11 +172,8 @@
} }
nav.secondary { nav.secondary {
/deep/ .mat-tab-nav-bar { /deep/ .mat-tab-nav-bar {
.mat-tab-links { .mat-tab-links {
.mat-tab-link { .mat-tab-link {
height: $navSecondaryHeightNarrow; height: $navSecondaryHeightNarrow;

8
apps/docs/src/app/components/page-header/page-header.component.scss
Просмотреть файл

@ -4,7 +4,12 @@
// justify-content: last-baseline; // justify-content: last-baseline;
/deep/ { /deep/ {
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding-bottom: 4px; padding-bottom: 4px;
@ -19,5 +24,4 @@
margin-left: -8px; margin-left: -8px;
} }
} }
} }

4
apps/docs/src/app/components/triangle/triangle.component.html
Просмотреть файл

@ -4,7 +4,5 @@
<ng-container *ngFor="let dot of dots"> <ng-container *ngFor="let dot of dots">
<ng-container *ngTemplateOutlet="dotTemplate; context: { dot: dot, text: counter }"></ng-container> <ng-container *ngTemplateOutlet="dotTemplate; context: { dot: dot, text: counter }"></ng-container>
</ng-container> </ng-container>
<ng-container *ngIf="dots"> <ng-container *ngIf="dots"> <ng-content></ng-content> </ng-container>
<ng-content></ng-content>
</ng-container>
</div> </div>

6
apps/docs/src/app/components/triangle/triangle.component.ts
Просмотреть файл

@ -31,8 +31,10 @@ export interface TriangleConfig {
styleUrls: ['./triangle.component.scss'], styleUrls: ['./triangle.component.scss'],
}) })
export class TriangleComponent implements OnInit, OnDestroy { export class TriangleComponent implements OnInit, OnDestroy {
@ContentChild(TemplateRef) @ContentChild(TemplateRef) readonly dotTemplate: TemplateRef<{
dotTemplate; dot: SierpinskiTriangleDot;
text: number;
}>;
// These are initially undefined and default CONST is used unless another // These are initially undefined and default CONST is used unless another
// value is provided in hte config. Whether default of config value are used, // value is provided in hte config. Whether default of config value are used,

10
apps/docs/src/app/containers/component-docs/component-docs.component.html
Просмотреть файл

@ -1,17 +1,13 @@
<app-sub-nav> <app-sub-nav>
<div mat-tab-nav-bar> <div mat-tab-nav-bar>
<a mat-tab-link routerLink="fabric" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive"> <a mat-tab-link routerLink="fabric" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
<mat-icon> <mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#microsoft" /></svg>
<use xlink:href="#microsoft" />
</svg>
</mat-icon> </mat-icon>
Fabric Fabric
</a> </a>
<a mat-tab-link routerLink="semantic-ui" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive"> <a mat-tab-link routerLink="semantic-ui" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">
<mat-icon> <mat-icon> apps </mat-icon>
apps
</mat-icon>
Semantic UI Semantic UI
</a> </a>
</div> </div>

17
apps/docs/src/app/containers/component-docs/fabric/fabric.component.html
Просмотреть файл

@ -2,7 +2,11 @@
<h2>Button</h2> <h2>Button</h2>
<fab-default-button text="Toggle Disabled" (onClick)="toggle()"></fab-default-button> <fab-default-button text="Toggle Disabled" (onClick)="toggle()"></fab-default-button>
<fab-default-button [disabled]="disabled" (onClick)="click()" text="Primary Button{{ disabled ? ' (0)' : ' (2)' }}"></fab-default-button> <fab-default-button
[disabled]="disabled"
(onClick)="click()"
text="Primary Button{{ disabled ? ' (0)' : ' (2)' }}"
></fab-default-button>
<fab-default-button [primary]="false" (onClick)="click()" text="Secondary Button"></fab-default-button> <fab-default-button [primary]="false" (onClick)="click()" text="Secondary Button"></fab-default-button>
<h3 class="button-height">{{ sampleContent }}</h3> <h3 class="button-height">{{ sampleContent }}</h3>
@ -10,10 +14,15 @@
<h2>Dialog</h2> <h2>Dialog</h2>
<fab-default-button text="Toggle Dialog" (onClick)="toggleDialog()"></fab-default-button> <fab-default-button text="Toggle Dialog" (onClick)="toggleDialog()"></fab-default-button>
<fab-dialog [hidden]="dialogHidden" (onDismiss)="toggleDialog()" title="Fabric [React] Dialog" subText="Use Fabric React components inside your Angular app!"> <fab-dialog
[hidden]="dialogHidden"
(onDismiss)="toggleDialog()"
title="Fabric [React] Dialog"
subText="Use Fabric React components inside your Angular app!"
>
{{ sampleContent2 }} {{ sampleContent3 }} {{ sampleContent2 }} {{ sampleContent3 }}
<fab-dialog-footer> <fab-dialog-footer>
<fab-default-button (onClick)="clickSave()" text='Save' contentStyle="margin-right: 10px;"></fab-default-button> <fab-default-button (onClick)="clickSave()" text="Save" contentStyle="margin-right: 10px;"></fab-default-button>
<fab-default-button (onClick)="toggleDialog()" text='Cancel'></fab-default-button> <fab-default-button (onClick)="toggleDialog()" text="Cancel"></fab-default-button>
</fab-dialog-footer> </fab-dialog-footer>
</fab-dialog> </fab-dialog>

1
apps/docs/src/app/containers/component-docs/semantic-ui/semantic-ui.component.scss
Просмотреть файл

@ -1,4 +1,3 @@
:host { :host {
display: block; display: block;
} }

8
apps/docs/src/app/containers/docs/docs.component.html
Просмотреть файл

@ -1,15 +1,11 @@
<app-sub-nav> <app-sub-nav>
<div mat-tab-nav-bar> <div mat-tab-nav-bar>
<a mat-tab-link routerLink="getting-started" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive"> <a mat-tab-link routerLink="getting-started" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
<mat-icon> <mat-icon> directions_run </mat-icon>
directions_run
</mat-icon>
Quick Start Quick Start
</a> </a>
<a mat-tab-link routerLink="wrappers" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive"> <a mat-tab-link routerLink="wrappers" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">
<mat-icon> <mat-icon> card_giftcard </mat-icon>
card_giftcard
</mat-icon>
Wrappers Wrappers
</a> </a>
</div> </div>

4
apps/docs/src/app/containers/docs/getting-started/getting-started.component.html
Просмотреть файл

@ -1,3 +1 @@
<p> <p>getting-started works!</p>
getting-started works!
</p>

4
apps/docs/src/app/containers/docs/wrappers/wrappers.component.html
Просмотреть файл

@ -1,3 +1 @@
<p> <p>wrappers works!</p>
wrappers works!
</p>

4
apps/docs/src/app/containers/landing/landing.component.html
Просмотреть файл

@ -1,6 +1,4 @@
<h1>Angular React</h1> <h1>Angular React</h1>
<h2>React components inside Angular!</h2> <h2>React components inside Angular!</h2>
<p style="margin-top:2000px;"> <p style="margin-top:2000px;">landing works!</p>
landing works!
</p>

1
apps/docs/src/app/containers/landing/landing.component.scss
Просмотреть файл

@ -1,4 +1,3 @@
:host { :host {
display: block; display: block;
} }

25
apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.html
Просмотреть файл

@ -4,9 +4,7 @@
<h3>Pure Angular View</h3> <h3>Pure Angular View</h3>
</div> </div>
<button mat-icon-button [matMenuTriggerFor]="menu"> <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>settings</mat-icon></button>
<mat-icon>settings</mat-icon>
</button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleTriangle()"> <button mat-menu-item (click)="toggleTriangle()">
<mat-icon *ngIf="!triangle.isActive">play_circle_outline</mat-icon> <mat-icon *ngIf="!triangle.isActive">play_circle_outline</mat-icon>
@ -14,7 +12,14 @@
<span>{{ toggleTriangleLabel }}</span> <span>{{ toggleTriangleLabel }}</span>
</button> </button>
<div mat-menu-item> <div mat-menu-item>
<mat-slider [value]="DEFAULT_DOT_SIZE" max="60" min="10" step="10" tick-interval="1" (change)="dotSizeChanged($event)"> <mat-slider
[value]="DEFAULT_DOT_SIZE"
max="60"
min="10"
step="10"
tick-interval="1"
(change)="dotSizeChanged($event)"
>
</mat-slider> </mat-slider>
<label>Dot size</label> <label>Dot size</label>
</div> </div>
@ -23,8 +28,16 @@
<app-triangle> <app-triangle>
<ng-template let-text="text" let-dot="dot"> <ng-template let-text="text" let-dot="dot">
<app-dot [size]="dot.size" [x]="dot.x" [y]="dot.y" [color]="dot.color" [textOverride]="dot.textOverride" [backgroundColor]="dot.backgroundColor" <app-dot
(onMouseEnter)="dot.hover = true" (onMouseLeave)="dot.hover = false"> [size]="dot.size"
[x]="dot.x"
[y]="dot.y"
[color]="dot.color"
[textOverride]="dot.textOverride"
[backgroundColor]="dot.backgroundColor"
(onMouseEnter)="dot.hover = true"
(onMouseLeave)="dot.hover = false"
>
{{ text }} {{ text }}
</app-dot> </app-dot>
</ng-template> </ng-template>

3
apps/docs/src/app/containers/performance/angular-perf/angular-perf.component.ts
Просмотреть файл

@ -11,8 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl
export class AngularPerfComponent { export class AngularPerfComponent {
DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE; DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;
@ViewChild(TriangleComponent) @ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
triangle: TriangleComponent;
get toggleTriangleLabel() { get toggleTriangleLabel() {
return this.triangle.isActive ? 'Stop' : 'Restart'; return this.triangle.isActive ? 'Stop' : 'Restart';

46
apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.html
Просмотреть файл

@ -4,9 +4,7 @@
<h3>React Rendered Dots</h3> <h3>React Rendered Dots</h3>
</div> </div>
<button mat-icon-button [matMenuTriggerFor]="menu"> <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>settings</mat-icon></button>
<mat-icon>settings</mat-icon>
</button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleTriangle()"> <button mat-menu-item (click)="toggleTriangle()">
<mat-icon *ngIf="!triangle.isActive">play_circle_outline</mat-icon> <mat-icon *ngIf="!triangle.isActive">play_circle_outline</mat-icon>
@ -22,7 +20,14 @@
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
<div mat-menu-item> <div mat-menu-item>
<mat-slider [value]="DEFAULT_DOT_SIZE" max="60" min="10" step="10" tick-interval="1" (change)="dotSizeChanged($event)"> <mat-slider
[value]="DEFAULT_DOT_SIZE"
max="60"
min="10"
step="10"
tick-interval="1"
(change)="dotSizeChanged($event)"
>
</mat-slider> </mat-slider>
<label>Dot size</label> <label>Dot size</label>
</div> </div>
@ -30,17 +35,19 @@
</app-page-header> </app-page-header>
<span class="content" [class.collapsed]="contentCollapsed"> <span class="content" [class.collapsed]="contentCollapsed">
Every dot is an Angular Component. The counter is {{ projectAsAngular ? 'projected by Angular' : 'rendered by React' }} Every dot is an Angular Component. The counter is
Within the component is a React Element that is rendered by the Angular-React renderer.<span class="spacer"><br /><br /></span> {{ projectAsAngular ? 'projected by Angular' : 'rendered by React' }} Within the component is a React Element that is
rendered by the Angular-React renderer.<span class="spacer"><br /><br /></span>
This performance demonstration visualizes the impact of DOM binging and re-rendering on the single-threaded javascript This performance demonstration visualizes the impact of DOM binging and re-rendering on the single-threaded javascript
process. In this case, the animation is interupted by the rendering of the text counter with each tick (second). React process. In this case, the animation is interupted by the rendering of the text counter with each tick (second). React
and Angular both have advanced binding logic that schedules DOM updates when the thread is not busy (such as when rendering and Angular both have advanced binding logic that schedules DOM updates when the thread is not busy (such as when
a smooth animation). The toggle between "Angular projection" and "React rendering" of the text counter within each dot rendering a smooth animation). The toggle between "Angular projection" and "React rendering" of the text counter
(currently set for {{ projectAsAngular ? 'Angular projection' : 'React rendering' }}) demonstrates a limitation of the within each dot (currently set for {{ projectAsAngular ? 'Angular projection' : 'React rendering' }}) demonstrates a
React elements. Each dot that is rendered by React is discrete. React does not collectively render the dots, and therefore limitation of the React elements. Each dot that is rendered by React is discrete. React does not collectively render
cannot use a global scheduler to ensure that the thread is not blocked and that smooth animation is preserved. When smooth the dots, and therefore cannot use a global scheduler to ensure that the thread is not blocked and that smooth
rendering is required, projection of DOM rendering by Angular (through the React element) is more performant. animation is preserved. When smooth rendering is required, projection of DOM rendering by Angular (through the React
element) is more performant.
<div class="expand" (click)="contentCollapsed = false"></div> <div class="expand" (click)="contentCollapsed = false"></div>
<span class="collapse" (click)="contentCollapsed = true">[collapse]</span> <span class="collapse" (click)="contentCollapsed = true">[collapse]</span>
@ -48,9 +55,18 @@
<app-triangle> <app-triangle>
<ng-template let-text="text" let-dot="dot"> <ng-template let-text="text" let-dot="dot">
<app-react-dot [size]="dot.size" [x]="dot.x" [y]="dot.y" [color]="dot.color" [textOverride]="dot.textOverride" [backgroundColor]="dot.backgroundColor" <app-react-dot
(onMouseEnter)="dot.hover = true" (onMouseLeave)="dot.hover = false" [text]="projectAsAngular ? '' : text"> [size]="dot.size"
{{ projectAsAngular ? dot.textOverride ? dot.textOverride : text : '' }} [x]="dot.x"
[y]="dot.y"
[color]="dot.color"
[textOverride]="dot.textOverride"
[backgroundColor]="dot.backgroundColor"
(onMouseEnter)="dot.hover = true"
(onMouseLeave)="dot.hover = false"
[text]="projectAsAngular ? '' : text"
>
{{ projectAsAngular ? (dot.textOverride ? dot.textOverride : text) : '' }}
</app-react-dot> </app-react-dot>
</ng-template> </ng-template>
<div class="message mat-h1">{{ triangle.dots?.length }} Dots</div> <div class="message mat-h1">{{ triangle.dots?.length }} Dots</div>

3
apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.scss
Просмотреть файл

@ -27,7 +27,8 @@
bottom: 0; bottom: 0;
} }
.expand, .collapse { .expand,
.collapse {
cursor: pointer; cursor: pointer;
} }

3
apps/docs/src/app/containers/performance/mixed-perf/mixed-perf.component.ts
Просмотреть файл

@ -11,8 +11,7 @@ import { TriangleComponent, DEFAULT_DOT_SIZE } from '../../../components/triangl
export class MixedPerfComponent { export class MixedPerfComponent {
DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE; DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;
@ViewChild(TriangleComponent) @ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
triangle: TriangleComponent;
projectAsAngular = true; projectAsAngular = true;
contentCollapsed = true; contentCollapsed = true;

12
apps/docs/src/app/containers/performance/performance.component.html
Просмотреть файл

@ -2,20 +2,14 @@
<div mat-tab-nav-bar> <div mat-tab-nav-bar>
<a mat-tab-link routerLink="angular" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive"> <a mat-tab-link routerLink="angular" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
<mat-icon> <mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#angular" /></svg>
<use xlink:href="#angular" />
</svg>
</mat-icon> </mat-icon>
Angular Angular
</a> </a>
<a mat-tab-link routerLink="mixed" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive"> <a mat-tab-link routerLink="mixed" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">
<mat-icon class="stack"> <mat-icon class="stack">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#angular" /></svg>
<use xlink:href="#angular" /> <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#react" /></svg>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
<use xlink:href="#react" />
</svg>
</mat-icon> </mat-icon>
Mixed Mixed
</a> </a>

6
apps/docs/src/app/containers/performance/profiles/profiles.component.html
Просмотреть файл

@ -23,16 +23,16 @@
</mat-button-toggle-group> </mat-button-toggle-group>
<div class="perf-angular perf-image"> <div class="perf-angular perf-image">
<img (click)="zoom1 = !zoom1" [class.zoom]="zoom1" src='assets/angular_perf.png' /> <img (click)="zoom1 = !zoom1" [class.zoom]="zoom1" src="assets/angular_perf.png" />
</div> </div>
<h3>React Rendered Dots (Angular Counter)</h3> <h3>React Rendered Dots (Angular Counter)</h3>
<div class="perf-mixed perf-image"> <div class="perf-mixed perf-image">
<img (click)="zoom2 = !zoom2" [class.zoom]="zoom2" src='assets/angular_react_angular_perf.png' /> <img (click)="zoom2 = !zoom2" [class.zoom]="zoom2" src="assets/angular_react_angular_perf.png" />
</div> </div>
<h3>React Rendered Dots (React Counter)</h3> <h3>React Rendered Dots (React Counter)</h3>
<div class="perf-react perf-image"> <div class="perf-react perf-image">
<img (click)="zoom3 = !zoom3" [class.zoom]="zoom3" src='assets/angular_react_perf.png' /> <img (click)="zoom3 = !zoom3" [class.zoom]="zoom3" src="assets/angular_react_perf.png" />
</div> </div>
</div> </div>

18
apps/docs/src/app/containers/performance/profiles/profiles.component.scss
Просмотреть файл

@ -30,27 +30,27 @@
} }
.perf-images.summary .perf-image img { .perf-images.summary .perf-image img {
margin-top: -58.3%; margin-top: -58.3%;
margin-bottom: -1%; margin-bottom: -1%;
} }
.perf-images.heap .perf-image img { .perf-images.heap .perf-image img {
margin-top: -40.3%; margin-top: -40.3%;
margin-bottom: -27.7%; margin-bottom: -27.7%;
} }
.perf-images.detail-zoom .perf-image img { .perf-images.detail-zoom .perf-image img {
margin-top: -22.1%; margin-top: -22.1%;
margin-bottom: -39%; margin-bottom: -39%;
} }
.perf-images.detail .perf-image img { .perf-images.detail .perf-image img {
margin-bottom: -57.2%; margin-bottom: -57.2%;
} }
.perf-images .perf-image img.zoom { .perf-images .perf-image img.zoom {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }

6
apps/docs/src/app/react-components/react-dot/react-dot.component.html
Просмотреть файл

@ -3,8 +3,6 @@
[text]="text" [text]="text"
(onMouseEnter)="onMouseEnter($event)" (onMouseEnter)="onMouseEnter($event)"
(onMouseLeave)="onMouseLeave($event)" (onMouseLeave)="onMouseLeave($event)"
> >
<react-content> <react-content> <ng-content></ng-content> </react-content>
<ng-content></ng-content>
</react-content>
</ReactDot> </ReactDot>

31
apps/docs/src/app/react-components/react-dot/react-dot.component.ts
Просмотреть файл

@ -14,28 +14,19 @@ import * as ReactDOM from 'react-dom';
export class ReactDotComponent implements OnChanges { export class ReactDotComponent implements OnChanges {
style: ReactDotStyle; style: ReactDotStyle;
@Input() @Input() x: string;
x: string; @Input() y: string;
@Input() @Input() size: string;
y: string; @Input('text') _text: string;
@Input() @Input() color: string;
size: string; @Input() backgroundColor: string;
@Input('text') @Input() textOverride: string;
_text: string;
@Input()
color: string;
@Input()
backgroundColor: string;
@Input()
textOverride: string;
@Output('onMouseEnter') @Output('onMouseEnter') readonly mouseEnter = new EventEmitter<MouseEvent>();
mouseEnter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>(); @Output('onMouseLeave') readonly mouseLeave = new EventEmitter<MouseEvent>();
@Output('onMouseLeave')
mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
onMouseEnter = ev => this.mouseEnter.emit(ev as any); onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev);
onMouseLeave = ev => this.mouseLeave.emit(ev as any); onMouseLeave = (ev: MouseEvent) => this.mouseLeave.emit(ev);
get text() { get text() {
return this.textOverride && this._text ? this.textOverride : this._text; return this.textOverride && this._text ? this.textOverride : this._text;

2
apps/docs/src/app/styles/variables.scss
Просмотреть файл

@ -1,7 +1,7 @@
$navPrimaryHeight: 48px; $navPrimaryHeight: 48px;
$navSecondaryHeight: $navPrimaryHeight * 2; $navSecondaryHeight: $navPrimaryHeight * 2;
$navSecondaryHeightNarrow: $navPrimaryHeight * 1.3; $navSecondaryHeightNarrow: $navPrimaryHeight * 1.3;
$navSecondaryHeightCollapsed: $navPrimaryHeight * 0.70; $navSecondaryHeightCollapsed: $navPrimaryHeight * 0.7;
$rubberbandScrollBuffer: 200px; $rubberbandScrollBuffer: 200px;
$oil: rgba(30, 30, 30, 0.94); $oil: rgba(30, 30, 30, 0.94);

35
apps/docs/src/index.html
Просмотреть файл

@ -1,20 +1,19 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Angular-React</title> <title>Angular-React</title>
<base href="/"> <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
rel="stylesheet"> </head>
</head> <body>
<body> <!-- Github Pages hack to allow SPA refresh without receiving 404. -->
<!-- Github Pages hack to allow SPA refresh without receiving 404. --> <script>
<script> (function() {
(function () {
// Retrieve the URL the user was trying to access when receiving the 404. // Retrieve the URL the user was trying to access when receiving the 404.
var redirect = sessionStorage.redirect; var redirect = sessionStorage.redirect;
// Remove the URL from sessionStorage. // Remove the URL from sessionStorage.
@ -26,8 +25,8 @@
} }
})(); })();
</script> </script>
<!-- /Github Pages hack. --> <!-- /Github Pages hack. -->
<app-root class="mat-typography"></app-root> <app-root class="mat-typography"></app-root>
</body> </body>
</html> </html>

3
apps/docs/src/styles.scss
Просмотреть файл

@ -2,7 +2,8 @@
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import './app/styles/variables.scss'; @import './app/styles/variables.scss';
html, body { html,
body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }

4
apps/docs/src/tsconfig.packages.json
Просмотреть файл

@ -8,7 +8,5 @@
"**/*.ts" "**/*.ts"
/* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */ /* add all lazy-loaded libraries here: "../../../libs/my-lib/index.ts" */
], ],
"exclude": [ "exclude": ["**/*.spec.ts"]
"**/*.spec.ts"
]
} }

9
apps/docs/tsconfig.app.json
Просмотреть файл

@ -4,11 +4,6 @@
"outDir": "../../dist/out-tsc/apps/docs", "outDir": "../../dist/out-tsc/apps/docs",
"module": "es2015" "module": "es2015"
}, },
"include": [ "include": ["**/*.ts"],
"**/*.ts" "exclude": ["**/*.spec.ts", "src/test.ts"]
],
"exclude": [
"**/*.spec.ts",
"src/test.ts"
]
} }

15
apps/docs/tsconfig.spec.json
Просмотреть файл

@ -2,18 +2,9 @@
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../../dist/out-tsc/apps/docs", "outDir": "../../dist/out-tsc/apps/docs",
"types": [ "types": ["jasmine", "node"],
"jasmine",
"node"
],
"module": "commonjs" "module": "commonjs"
}, },
"files": [ "files": ["src/test.ts", "src/polyfills.ts"],
"src/test.ts", "include": ["**/*.spec.ts", "**/*.d.ts"]
"src/polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
} }

14
apps/docs/tslint.json
Просмотреть файл

@ -1,17 +1,7 @@
{ {
"extends": "../../tslint.json", "extends": "../../tslint.json",
"rules": { "rules": {
"directive-selector": [ "directive-selector": [true, "attribute", "app", "camelCase"],
true, "component-selector": [true, "element", "app", "kebab-case"]
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
} }
} }

11
libs/core/karma.conf.js
Просмотреть файл

@ -7,7 +7,7 @@
// Karma configuration file, see link for more information // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html // https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) { module.exports = function(config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -16,15 +16,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular-devkit/build-angular/plugins/karma'),
], ],
client: { client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false, // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'), dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'], reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true,
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
@ -32,7 +32,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['Chrome'],
singleRun: false singleRun: false,
}); });
}; };

3
libs/core/src/lib/declarations/known-keys.d.ts поставляемый
Просмотреть файл

@ -1,3 +1,4 @@
// prettier-ignore
/** /**
* Get the known keys (i.e. no index signature) of T. * Get the known keys (i.e. no index signature) of T.
* *
@ -17,4 +18,4 @@ type KnownKeysOfOptions = KnownKeys<Options>; // 'key' | 'title';
*/ */
type KnownKeys<T> = { type KnownKeys<T> = {
[K in keyof T]: string extends K ? never : number extends K ? never : K [K in keyof T]: string extends K ? never : number extends K ? never : K
} extends { [_ in keyof T]: infer U } ?U: never; } extends { [_ in keyof T]: infer U } ? U : never;

14
libs/core/tsconfig.spec.json
Просмотреть файл

@ -2,16 +2,8 @@
"extends": "../../tsconfig.json", "extends": "../../tsconfig.json",
"compilerOptions": { "compilerOptions": {
"outDir": "../../dist/out-tsc/libs/core", "outDir": "../../dist/out-tsc/libs/core",
"types": [ "types": ["jasmine", "node"]
"jasmine",
"node"
]
}, },
"files": [ "files": ["src/test.ts"],
"src/test.ts" "include": ["**/*.spec.ts", "**/*.d.ts"]
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
} }

14
libs/core/tslint.json
Просмотреть файл

@ -1,17 +1,7 @@
{ {
"extends": "../../tslint.json", "extends": "../../tslint.json",
"rules": { "rules": {
"directive-selector": [ "directive-selector": [true, "attribute", "app", "camelCase"],
true, "component-selector": [true, "element", "app", "kebab-case"]
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
} }
} }

83
libs/fabric/README.md
Просмотреть файл

@ -2,11 +2,12 @@
[![npm version](https://badge.fury.io/js/%40angular-react%2Ffabric.svg)](https://www.npmjs.com/package/@angular-react/fabric) [![npm version](https://badge.fury.io/js/%40angular-react%2Ffabric.svg)](https://www.npmjs.com/package/@angular-react/fabric)
Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons. Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of [Office UI Fabric][fab], where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.
Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer. Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer.
#### Quick links #### Quick links
[@angular-react/core](https://www.npmjs.com/package/@angular-react/core) | [@angular-react/core](https://www.npmjs.com/package/@angular-react/core) |
[Documentation, quick start, and guides][ard] | [Documentation, quick start, and guides][ard] |
[Demo][ard-demo] | [Demo][ard-demo] |
@ -15,6 +16,7 @@ Use of Angular-React allows consuming any React elements, but specifically Offic
[Office Fabric](https://developer.microsoft.com/en-us/fabric) [Office Fabric](https://developer.microsoft.com/en-us/fabric)
### Typical Use Cases ### Typical Use Cases
- Use React component libraries with Angular - Use React component libraries with Angular
- Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written) - Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)
@ -27,54 +29,53 @@ If you'd like to contribute, you must follow our [contributing guidelines](https
You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment. You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.
High level stuff planned for Q2 2018 (April - June): High level stuff planned for Q2 2018 (April - June):
* Extend support for Fabric Buttons
* Extend support for Fabric Dialog - Extend support for Fabric Buttons
* Additional Fabric components TBD - Extend support for Fabric Dialog
* Table feature improvements - Additional Fabric components TBD
* Improve docs - Table feature improvements
- Improve docs
#### Available Fabric features #### Available Fabric features
| Feature | Notes | Docs | | Feature | Notes | Docs |
|------------------|--------------------------------------------------------|--------------| | --------------- | --------------------------------------- | --------- |
| breadcrumb | Beta | [Docs][0] | | breadcrumb | Beta | [Docs][0] |
| button | Beta | [Docs][0] | | button | Beta | [Docs][0] |
| callout | Beta | [Docs][0] | | callout | Beta | [Docs][0] |
| choice-group | Beta | [Docs][0] | | choice-group | Beta | [Docs][0] |
| combo-box | Beta | [Docs][0] | | combo-box | Beta | [Docs][0] |
| command-bar | Heavily tested, most scenarios covered. | [Docs][0] | | command-bar | Heavily tested, most scenarios covered. | [Docs][0] |
| contextual-menu | Beta | [Docs][0] | | contextual-menu | Beta | [Docs][0] |
| date-picker | Beta | [Docs][0] | | date-picker | Beta | [Docs][0] |
| dialog | Beta | [Docs][1] | | dialog | Beta | [Docs][1] |
| divider | Beta | [Docs][0] | | divider | Beta | [Docs][0] |
| grouped-list | Beta | [Docs][0] | | grouped-list | Beta | [Docs][0] |
| hover-card | Beta | [Docs][0] | | hover-card | Beta | [Docs][0] |
| icon | Beta | [Docs][0] | | icon | Beta | [Docs][0] |
| image | Beta | [Docs][0] | | image | Beta | [Docs][0] |
| link | Beta | [Docs][0] | | link | Beta | [Docs][0] |
| message-bar | Beta | [Docs][0] | | message-bar | Beta | [Docs][0] |
| modal | Beta | [Docs][0] | | modal | Beta | [Docs][0] |
| panel | Beta | [Docs][0] | | panel | Beta | [Docs][0] |
| persona | Beta | [Docs][0] | | persona | Beta | [Docs][0] |
| pickers | Beta | [Docs][0] | | pickers | Beta | [Docs][0] |
| pivot | Beta | [Docs][0] | | pivot | Beta | [Docs][0] |
| search-box | Beta | [Docs][0] | | search-box | Beta | [Docs][0] |
| shimmer | Beta | [Docs][0] | | shimmer | Beta | [Docs][0] |
| slider | Beta | [Docs][0] | | slider | Beta | [Docs][0] |
| spinner | Beta | [Docs][0] | | spinner | Beta | [Docs][0] |
| toggle | Beta | [Docs][0] | | toggle | Beta | [Docs][0] |
| tooltip | Beta | [Docs][0] | | tooltip | Beta | [Docs][0] |
#### In progress, planned, and non-planned Fabric features #### In progress, planned, and non-planned Fabric features
| Feature | Status | Docs | Issue | | Feature | Status | Docs | Issue |
|------------------|-------------------------------------|--------------|----------------| | ---------- | ------------------------ | ---- | -------- |
| bottom-nav | Not started, not planned | - | [TBD][0] | | bottom-nav | Not started, not planned | - | [TBD][0] |
[0]: https://microsoft.github.io/angular-react/docs/fabric [0]: https://microsoft.github.io/angular-react/docs/fabric
[1]: https://microsoft.github.io/angular-react/docs/fabric [1]: https://microsoft.github.io/angular-react/docs/fabric
[ard]: https://microsoft.github.io/angular-react [ard]: https://microsoft.github.io/angular-react
[ard-demo]: https://microsoft.github.io/angular-react/demo [ard-demo]: https://microsoft.github.io/angular-react/demo
[getting-started]: https://microsoft.github.io/angular-react/docs/getting-started [getting-started]: https://microsoft.github.io/angular-react/docs/getting-started

11
libs/fabric/karma.conf.js
Просмотреть файл

@ -4,7 +4,7 @@
// Karma configuration file, see link for more information // Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html // https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) { module.exports = function(config) {
config.set({ config.set({
basePath: '', basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'], frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -13,15 +13,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'), require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'), require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma') require('@angular-devkit/build-angular/plugins/karma'),
], ],
client: { client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser clearContext: false, // leave Jasmine Spec Runner output visible in browser
}, },
coverageIstanbulReporter: { coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'), dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'], reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true fixWebpackSourcePaths: true,
}, },
reporters: ['progress', 'kjhtml'], reporters: ['progress', 'kjhtml'],
port: 9876, port: 9876,
@ -29,7 +29,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO, logLevel: config.LOG_INFO,
autoWatch: true, autoWatch: true,
browsers: ['Chrome'], browsers: ['Chrome'],
singleRun: false singleRun: false,
}); });
}; };

42
libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts
Просмотреть файл

@ -31,41 +31,29 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br
[styles]="styles" [styles]="styles"
[theme]="theme" [theme]="theme"
[RenderItem]="renderItem && onRenderItem" [RenderItem]="renderItem && onRenderItem"
[ReduceData]="onReduceData"> [ReduceData]="onReduceData"
>
</Breadcrumb> </Breadcrumb>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit { export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IBreadcrumbProps['componentRef'];
componentRef?: IBreadcrumbProps['componentRef']; @Input() items: IBreadcrumbProps['items'];
@Input() @Input() className?: IBreadcrumbProps['className'];
items: IBreadcrumbProps['items']; @Input() dividerAs?: IBreadcrumbProps['dividerAs'];
@Input() @Input() maxDisplayedItems?: IBreadcrumbProps['maxDisplayedItems'];
className?: IBreadcrumbProps['className']; @Input() ariaLabel?: IBreadcrumbProps['ariaLabel'];
@Input() @Input() overflowAriaLabel?: IBreadcrumbProps['overflowAriaLabel'];
dividerAs?: IBreadcrumbProps['dividerAs']; @Input() overflowIndex?: IBreadcrumbProps['overflowIndex'];
@Input() @Input() styles?: IBreadcrumbProps['styles'];
maxDisplayedItems?: IBreadcrumbProps['maxDisplayedItems']; @Input() theme?: IBreadcrumbProps['theme'];
@Input()
ariaLabel?: IBreadcrumbProps['ariaLabel'];
@Input()
overflowAriaLabel?: IBreadcrumbProps['overflowAriaLabel'];
@Input()
overflowIndex?: IBreadcrumbProps['overflowIndex'];
@Input()
styles?: IBreadcrumbProps['styles'];
@Input()
theme?: IBreadcrumbProps['theme'];
@Input() @Input() renderItem?: InputRendererOptions<IBreadcrumbItem>;
renderItem?: InputRendererOptions<IBreadcrumbItem>; @Input('reduceData') onReduceData?: IBreadcrumbProps['onReduceData'];
@Input('reduceData')
onReduceData?: IBreadcrumbProps['onReduceData'];
onRenderItem: (props?: IBreadcrumbItem, defaultRender?: JsxRenderFunc<IBreadcrumbItem>) => JSX.Element; onRenderItem: (props?: IBreadcrumbItem, defaultRender?: JsxRenderFunc<IBreadcrumbItem>) => JSX.Element;

6
libs/fabric/src/lib/components/button/action-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</ActionButton> </ActionButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabActionButtonComponent extends FabBaseButtonComponent { export class FabActionButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

111
libs/fabric/src/lib/components/button/base-button.component.ts
Просмотреть файл

@ -6,82 +6,45 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Out
import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit { export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit {
@Input() @Input() componentRef?: IButtonProps['componentRef'];
componentRef?: IButtonProps['componentRef']; @Input() href?: IButtonProps['href'];
@Input() @Input() primary?: IButtonProps['primary'];
href?: IButtonProps['href']; @Input() uniqueId?: IButtonProps['uniqueId'];
@Input() @Input() disabled?: IButtonProps['disabled'];
primary?: IButtonProps['primary']; @Input() primaryDisabled?: IButtonProps['primaryDisabled'];
@Input() @Input() styles?: IButtonProps['styles'];
uniqueId?: IButtonProps['uniqueId']; @Input() theme?: IButtonProps['theme'];
@Input() @Input() checked?: IButtonProps['checked'];
disabled?: IButtonProps['disabled']; @Input() className?: IButtonProps['className'];
@Input() @Input() ariaLabel?: IButtonProps['ariaLabel'];
primaryDisabled?: IButtonProps['primaryDisabled']; @Input() ariaDescription?: IButtonProps['ariaDescription'];
@Input() @Input() ariaHidden?: IButtonProps['ariaHidden'];
styles?: IButtonProps['styles']; @Input() text?: IButtonProps['text'];
@Input() @Input() iconProps?: IButtonProps['iconProps'];
theme?: IButtonProps['theme']; @Input() menuProps?: IButtonProps['menuProps'];
@Input() @Input() split?: IButtonProps['split'];
checked?: IButtonProps['checked']; @Input() menuIconProps?: IButtonProps['menuIconProps'];
@Input() @Input() splitButtonAriaLabel?: IButtonProps['splitButtonAriaLabel'];
className?: IButtonProps['className']; @Input() menuAs?: IButtonProps['menuAs'];
@Input() @Input() secondaryText?: IButtonProps['secondaryText'];
ariaLabel?: IButtonProps['ariaLabel']; @Input() toggle?: IButtonProps['toggle'];
@Input() @Input() data?: IButtonProps['data'];
ariaDescription?: IButtonProps['ariaDescription']; @Input() getClassNames?: IButtonProps['getClassNames'];
@Input() @Input() getSplitButtonClassNames?: IButtonProps['getSplitButtonClassNames'];
ariaHidden?: IButtonProps['ariaHidden']; @Input() menuTriggerKeyCode?: IButtonProps['menuTriggerKeyCode'];
@Input() @Input() keytipProps?: IButtonProps['keytipProps'];
text?: IButtonProps['text']; @Input() persistMenu?: IButtonProps['persistMenu'];
@Input()
iconProps?: IButtonProps['iconProps'];
@Input()
menuProps?: IButtonProps['menuProps'];
@Input()
split?: IButtonProps['split'];
@Input()
menuIconProps?: IButtonProps['menuIconProps'];
@Input()
splitButtonAriaLabel?: IButtonProps['splitButtonAriaLabel'];
@Input()
menuAs?: IButtonProps['menuAs'];
@Input()
secondaryText?: IButtonProps['secondaryText'];
@Input()
toggle?: IButtonProps['toggle'];
@Input()
data?: IButtonProps['data'];
@Input()
getClassNames?: IButtonProps['getClassNames'];
@Input()
getSplitButtonClassNames?: IButtonProps['getSplitButtonClassNames'];
@Input()
menuTriggerKeyCode?: IButtonProps['menuTriggerKeyCode'];
@Input()
keytipProps?: IButtonProps['keytipProps'];
@Input()
persistMenu?: IButtonProps['persistMenu'];
@Input() @Input() renderIcon?: InputRendererOptions<IButtonProps>;
renderIcon?: InputRendererOptions<IButtonProps>; @Input() renderText?: InputRendererOptions<IButtonProps>;
@Input() @Input() renderDescription?: InputRendererOptions<IButtonProps>;
renderText?: InputRendererOptions<IButtonProps>; @Input() renderAriaDescription?: InputRendererOptions<IButtonProps>;
@Input() @Input() renderChildren?: InputRendererOptions<IButtonProps>;
renderDescription?: InputRendererOptions<IButtonProps>; @Input() renderMenuIcon?: InputRendererOptions<IButtonProps>;
@Input()
renderAriaDescription?: InputRendererOptions<IButtonProps>;
@Input()
renderChildren?: InputRendererOptions<IButtonProps>;
@Input()
renderMenuIcon?: InputRendererOptions<IButtonProps>;
@Output() @Output() readonly onClick = new EventEmitter<MouseEvent>();
readonly onClick = new EventEmitter<MouseEvent>(); @Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>();
@Output() @Output() readonly onAfterMenuDismiss = new EventEmitter<void>();
readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>();
@Output()
readonly onAfterMenuDismiss = new EventEmitter<void>();
onRenderIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element; onRenderIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;
onRenderText: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element; onRenderText: (props?: IButtonProps, defaultRender?: JsxRenderFunc<IButtonProps>) => JSX.Element;

6
libs/fabric/src/lib/components/button/command-bar-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</CommandBarButton> </CommandBarButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabCommandBarButtonComponent extends FabBaseButtonComponent { export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/button/compound-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</CompoundButton> </CompoundButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabCompoundButtonComponent extends FabBaseButtonComponent { export class FabCompoundButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/button/default-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</DefaultButton> </DefaultButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabDefaultButtonComponent extends FabBaseButtonComponent { export class FabDefaultButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/button/icon-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</IconButton> </IconButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabIconButtonComponent extends FabBaseButtonComponent { export class FabIconButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/button/messagebar-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</MessageBarButton> </MessageBarButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabMessageBarButtonComponent extends FabBaseButtonComponent { export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/button/primary-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</PrimaryButton> </PrimaryButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabPrimaryButtonComponent extends FabBaseButtonComponent { export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/button/split-button.component.ts
Просмотреть файл

@ -54,7 +54,8 @@ import { FabBaseButtonComponent } from './base-button.component';
[RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon" [RenderMenuIcon]="renderMenuIcon && onRenderMenuIcon"
[MenuClick]="onMenuClickHandler" [MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)" (onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)"> (onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</SplitButton> </SplitButton>
`, `,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabSplitButtonComponent extends FabBaseButtonComponent { export class FabSplitButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

87
libs/fabric/src/lib/components/calendar/calendar.component.ts
Просмотреть файл

@ -47,71 +47,44 @@ import { ICalendarProps } from 'office-ui-fabric-react/lib/Calendar';
[showCloseButton]="showCloseButton" [showCloseButton]="showCloseButton"
[allFocusable]="allFocusable" [allFocusable]="allFocusable"
[SelectDate]="onSelectDateHandler" [SelectDate]="onSelectDateHandler"
[Dismiss]="onDismissHandler"> [Dismiss]="onDismissHandler"
>
</Calendar> </Calendar>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> { export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: ICalendarProps['componentRef'];
componentRef?: ICalendarProps['componentRef']; @Input() className?: ICalendarProps['className'];
@Input() @Input() isMonthPickerVisible?: ICalendarProps['isMonthPickerVisible'];
className?: ICalendarProps['className']; @Input() isDayPickerVisible?: ICalendarProps['isDayPickerVisible'];
@Input() @Input() showMonthPickerAsOverlay?: ICalendarProps['showMonthPickerAsOverlay'];
isMonthPickerVisible?: ICalendarProps['isMonthPickerVisible']; @Input() today?: ICalendarProps['today'];
@Input() @Input() value?: ICalendarProps['value'];
isDayPickerVisible?: ICalendarProps['isDayPickerVisible']; @Input() firstDayOfWeek?: ICalendarProps['firstDayOfWeek'];
@Input() @Input() dateRangeType?: ICalendarProps['dateRangeType'];
showMonthPickerAsOverlay?: ICalendarProps['showMonthPickerAsOverlay']; @Input() autoNavigateOnSelection?: ICalendarProps['autoNavigateOnSelection'];
@Input() @Input() showGoToToday?: ICalendarProps['showGoToToday'];
today?: ICalendarProps['today']; @Input() strings: ICalendarProps['strings'];
@Input() @Input() highlightCurrentMonth?: ICalendarProps['highlightCurrentMonth'];
value?: ICalendarProps['value']; @Input() highlightSelectedMonth?: ICalendarProps['highlightSelectedMonth'];
@Input() @Input() navigationIcons?: ICalendarProps['navigationIcons'];
firstDayOfWeek?: ICalendarProps['firstDayOfWeek']; @Input() showWeekNumbers?: ICalendarProps['showWeekNumbers'];
@Input() @Input() firstWeekOfYear?: ICalendarProps['firstWeekOfYear'];
dateRangeType?: ICalendarProps['dateRangeType']; @Input() dateTimeFormatter?: ICalendarProps['dateTimeFormatter'];
@Input() @Input() minDate?: ICalendarProps['minDate'];
autoNavigateOnSelection?: ICalendarProps['autoNavigateOnSelection']; @Input() maxDate?: ICalendarProps['maxDate'];
@Input() @Input() showSixWeeksByDefault?: ICalendarProps['showSixWeeksByDefault'];
showGoToToday?: ICalendarProps['showGoToToday']; @Input() workWeekDays?: ICalendarProps['workWeekDays'];
@Input() @Input() selectDateOnClick?: ICalendarProps['selectDateOnClick'];
strings: ICalendarProps['strings']; @Input() showCloseButton?: ICalendarProps['showCloseButton'];
@Input() @Input() allFocusable?: ICalendarProps['allFocusable'];
highlightCurrentMonth?: ICalendarProps['highlightCurrentMonth'];
@Input()
highlightSelectedMonth?: ICalendarProps['highlightSelectedMonth'];
@Input()
navigationIcons?: ICalendarProps['navigationIcons'];
@Input()
showWeekNumbers?: ICalendarProps['showWeekNumbers'];
@Input()
firstWeekOfYear?: ICalendarProps['firstWeekOfYear'];
@Input()
dateTimeFormatter?: ICalendarProps['dateTimeFormatter'];
@Input()
minDate?: ICalendarProps['minDate'];
@Input()
maxDate?: ICalendarProps['maxDate'];
@Input()
showSixWeeksByDefault?: ICalendarProps['showSixWeeksByDefault'];
@Input()
workWeekDays?: ICalendarProps['workWeekDays'];
@Input()
selectDateOnClick?: ICalendarProps['selectDateOnClick'];
@Input()
showCloseButton?: ICalendarProps['showCloseButton'];
@Input()
allFocusable?: ICalendarProps['allFocusable'];
@Output() @Output() readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>(); @Output() readonly onDismiss = new EventEmitter<void>();
@Output()
readonly onDismiss = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

114
libs/fabric/src/lib/components/callout/callout.component.ts
Просмотреть файл

@ -2,7 +2,17 @@
// Licensed under the MIT License. // Licensed under the MIT License.
import { ReactWrapperComponent } from '@angular-react/core'; import { ReactWrapperComponent } from '@angular-react/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
Output,
Renderer2,
ViewChild,
} from '@angular/core';
import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout'; import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning/positioning.types'; import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning/positioning.types';
@ -43,7 +53,8 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
(onLayerMounted)="onLayerMounted.emit()" (onLayerMounted)="onLayerMounted.emit()"
(onPositioned)="onPositioned.emit($event)" (onPositioned)="onPositioned.emit($event)"
(onDismiss)="onDismiss.emit($event)" (onDismiss)="onDismiss.emit($event)"
(onScroll)="onScroll.emit()"> (onScroll)="onScroll.emit()"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</Callout> </Callout>
`, `,
@ -51,74 +62,41 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> { export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: ICalloutProps['componentRef'];
componentRef?: ICalloutProps['componentRef']; @Input() target?: ICalloutProps['target'];
@Input() @Input() directionalHint?: ICalloutProps['directionalHint'];
target?: ICalloutProps['target']; @Input() directionalHintForRTL?: ICalloutProps['directionalHintForRTL'];
@Input() @Input() gapSpace?: ICalloutProps['gapSpace'];
directionalHint?: ICalloutProps['directionalHint']; @Input() beakWidth?: ICalloutProps['beakWidth'];
@Input() @Input() calloutWidth?: ICalloutProps['calloutWidth'];
directionalHintForRTL?: ICalloutProps['directionalHintForRTL']; @Input() backgroundColor?: ICalloutProps['backgroundColor'];
@Input() @Input() bounds?: ICalloutProps['bounds'];
gapSpace?: ICalloutProps['gapSpace']; @Input() minPagePadding?: ICalloutProps['minPagePadding'];
@Input() @Input() isBeakVisible?: ICalloutProps['isBeakVisible'];
beakWidth?: ICalloutProps['beakWidth']; @Input() preventDismissOnScroll?: ICalloutProps['preventDismissOnScroll'];
@Input() @Input() preventDismissOnLostFocus?: ICalloutProps['preventDismissOnLostFocus'];
calloutWidth?: ICalloutProps['calloutWidth']; @Input() coverTarget?: ICalloutProps['coverTarget'];
@Input() @Input() role?: ICalloutProps['role'];
backgroundColor?: ICalloutProps['backgroundColor']; @Input() ariaLabel?: ICalloutProps['ariaLabel'];
@Input() @Input() ariaLabelledBy?: ICalloutProps['ariaLabelledBy'];
bounds?: ICalloutProps['bounds']; @Input() ariaDescribedBy?: ICalloutProps['ariaDescribedBy'];
@Input() @Input() className?: ICalloutProps['className'];
minPagePadding?: ICalloutProps['minPagePadding']; @Input() doNotLayer?: ICalloutProps['doNotLayer'];
@Input() @Input() directionalHintFixed?: ICalloutProps['directionalHintFixed'];
isBeakVisible?: ICalloutProps['isBeakVisible']; @Input() finalHeight?: ICalloutProps['finalHeight'];
@Input() @Input() hideOverflow?: ICalloutProps['hideOverflow'];
preventDismissOnScroll?: ICalloutProps['preventDismissOnScroll']; @Input() setInitialFocus?: ICalloutProps['setInitialFocus'];
@Input() @Input() calloutMaxHeight?: ICalloutProps['calloutMaxHeight'];
preventDismissOnLostFocus?: ICalloutProps['preventDismissOnLostFocus']; @Input() theme?: ICalloutProps['theme'];
@Input() @Input() styles?: ICalloutProps['styles'];
coverTarget?: ICalloutProps['coverTarget']; @Input() hidden?: ICalloutProps['hidden'];
@Input()
role?: ICalloutProps['role'];
@Input()
ariaLabel?: ICalloutProps['ariaLabel'];
@Input()
ariaLabelledBy?: ICalloutProps['ariaLabelledBy'];
@Input()
ariaDescribedBy?: ICalloutProps['ariaDescribedBy'];
@Input()
className?: ICalloutProps['className'];
@Input()
doNotLayer?: ICalloutProps['doNotLayer'];
@Input()
directionalHintFixed?: ICalloutProps['directionalHintFixed'];
@Input()
finalHeight?: ICalloutProps['finalHeight'];
@Input()
hideOverflow?: ICalloutProps['hideOverflow'];
@Input()
setInitialFocus?: ICalloutProps['setInitialFocus'];
@Input()
calloutMaxHeight?: ICalloutProps['calloutMaxHeight'];
@Input()
theme?: ICalloutProps['theme'];
@Input()
styles?: ICalloutProps['styles'];
@Input()
hidden?: ICalloutProps['hidden'];
@Output() @Output() readonly onLayerMounted = new EventEmitter<void>();
readonly onLayerMounted = new EventEmitter<void>(); @Output() readonly onPositioned = new EventEmitter<{ positions?: ICalloutPositionedInfo }>();
@Output() @Output() readonly onDismiss = new EventEmitter<{ ev?: any }>();
readonly onPositioned = new EventEmitter<{ positions?: ICalloutPositionedInfo }>(); @Output() readonly onScroll = new EventEmitter<void>();
@Output()
readonly onDismiss = new EventEmitter<{ ev?: any }>();
@Output()
readonly onScroll = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

66
libs/fabric/src/lib/components/checkbox/checkbox.component.ts
Просмотреть файл

@ -42,61 +42,41 @@ import { FormEvent } from 'react';
[keytipProps]="keytipProps" [keytipProps]="keytipProps"
[styles]="styles" [styles]="styles"
[RenderLabel]="renderLabel && onRenderLabel" [RenderLabel]="renderLabel && onRenderLabel"
[Change]="onChangeHandler"> [Change]="onChangeHandler"
>
</Checkbox> </Checkbox>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit { export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: ICheckboxProps['componentRef'];
componentRef?: ICheckboxProps['componentRef']; @Input() className?: ICheckboxProps['className'];
@Input() @Input() checked?: ICheckboxProps['checked'];
className?: ICheckboxProps['className']; @Input() defaultChecked?: ICheckboxProps['defaultChecked'];
@Input() @Input() label?: ICheckboxProps['label'];
checked?: ICheckboxProps['checked']; @Input() disabled?: ICheckboxProps['disabled'];
@Input() @Input() inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;
defaultChecked?: ICheckboxProps['defaultChecked']; @Input() boxSide?: ICheckboxProps['boxSide'];
@Input() @Input() theme?: ICheckboxProps['theme'];
label?: ICheckboxProps['label']; @Input() ariaLabel?: ICheckboxProps['ariaLabel'];
@Input() @Input() ariaLabelledBy?: ICheckboxProps['ariaLabelledBy'];
disabled?: ICheckboxProps['disabled']; @Input() ariaDescribedBy?: ICheckboxProps['ariaDescribedBy'];
@Input() @Input() ariaPositionInSet?: ICheckboxProps['ariaPositionInSet'];
inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>; @Input() ariaSetSize?: ICheckboxProps['ariaSetSize'];
@Input() @Input() checkmarkIconProps?: ICheckboxProps['checkmarkIconProps'];
boxSide?: ICheckboxProps['boxSide']; @Input() keytipProps?: ICheckboxProps['keytipProps'];
@Input() @Input() styles?: ICheckboxProps['styles'];
theme?: ICheckboxProps['theme'];
@Input()
ariaLabel?: ICheckboxProps['ariaLabel'];
@Input()
ariaLabelledBy?: ICheckboxProps['ariaLabelledBy'];
@Input()
ariaDescribedBy?: ICheckboxProps['ariaDescribedBy'];
@Input()
ariaPositionInSet?: ICheckboxProps['ariaPositionInSet'];
@Input()
ariaSetSize?: ICheckboxProps['ariaSetSize'];
@Input()
checkmarkIconProps?: ICheckboxProps['checkmarkIconProps'];
@Input()
keytipProps?: ICheckboxProps['keytipProps'];
@Input()
styles?: ICheckboxProps['styles'];
@Input() @Input() renderLabel?: InputRendererOptions<ICheckboxProps>;
renderLabel?: InputRendererOptions<ICheckboxProps>;
@Output() @Output() readonly onChange = new EventEmitter<{ ev?: Event; checked?: boolean }>();
readonly onChange = new EventEmitter<{ ev?: Event; checked?: boolean }>();
/* Non-React props, more native support for Angular */ /* Non-React props, more native support for Angular */
// support for two-way data binding for `@Input() checked`. // support for two-way data binding for `@Input() checked`.
@Output() @Output() readonly checkedChange = new EventEmitter<boolean>();
readonly checkedChange = new EventEmitter<boolean>();
onRenderLabel: (props?: ICheckboxProps, defaultRender?: JsxRenderFunc<ICheckboxProps>) => JSX.Element; onRenderLabel: (props?: ICheckboxProps, defaultRender?: JsxRenderFunc<ICheckboxProps>) => JSX.Element;

38
libs/fabric/src/lib/components/choice-group/choice-group.component.ts
Просмотреть файл

@ -32,41 +32,29 @@ import { IChoiceGroupOption, IChoiceGroupProps } from 'office-ui-fabric-react/li
[ariaLabelledBy]="ariaLabelledBy" [ariaLabelledBy]="ariaLabelledBy"
[Changed]="onChangedHandler" [Changed]="onChangedHandler"
[Change]="onChangeHandler" [Change]="onChangeHandler"
> >
</ChoiceGroup> </ChoiceGroup>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> { export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IChoiceGroupProps['componentRef'];
componentRef?: IChoiceGroupProps['componentRef']; @Input() options?: IChoiceGroupProps['options'];
@Input() @Input() defaultSelectedKey?: IChoiceGroupProps['defaultSelectedKey'];
options?: IChoiceGroupProps['options']; @Input() selectedKey?: IChoiceGroupProps['selectedKey'];
@Input() @Input() label?: IChoiceGroupProps['label'];
defaultSelectedKey?: IChoiceGroupProps['defaultSelectedKey']; @Input() theme?: IChoiceGroupProps['theme'];
@Input() @Input() styles?: IChoiceGroupProps['styles'];
selectedKey?: IChoiceGroupProps['selectedKey']; @Input() ariaLabelledBy?: IChoiceGroupProps['ariaLabelledBy'];
@Input()
label?: IChoiceGroupProps['label'];
@Input()
theme?: IChoiceGroupProps['theme'];
@Input()
styles?: IChoiceGroupProps['styles'];
@Input()
ariaLabelledBy?: IChoiceGroupProps['ariaLabelledBy'];
/** HTML Input props */ /** HTML Input props */
@Input() @Input() required?: IChoiceGroupProps['required'];
required?: IChoiceGroupProps['required'];
@Output() @Output() readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption; evt?: Event }>();
readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption; evt?: Event }>(); @Output() readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>();
@Output()
readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

76
libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts
Просмотреть файл

@ -6,61 +6,41 @@ import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Out
import { IComboBox, IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox'; import { IComboBox, IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox';
export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit { export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit {
@Input() @Input() componentRef?: IComboBoxProps['componentRef'];
componentRef?: IComboBoxProps['componentRef']; @Input() options: IComboBoxProps['options'];
@Input() @Input() allowFreeform?: IComboBoxProps['allowFreeform'];
options: IComboBoxProps['options']; @Input() autoComplete?: IComboBoxProps['autoComplete'];
@Input() @Input() text?: IComboBoxProps['text'];
allowFreeform?: IComboBoxProps['allowFreeform']; @Input() buttonIconProps?: IComboBoxProps['buttonIconProps'];
@Input() @Input() theme?: IComboBoxProps['theme'];
autoComplete?: IComboBoxProps['autoComplete']; @Input() styles?: IComboBoxProps['styles'];
@Input() @Input() getClassNames?: IComboBoxProps['getClassNames'];
text?: IComboBoxProps['text']; @Input() caretDownButtonStyles?: IComboBoxProps['caretDownButtonStyles'];
@Input() @Input() comboBoxOptionStyles?: IComboBoxProps['comboBoxOptionStyles'];
buttonIconProps?: IComboBoxProps['buttonIconProps']; @Input() scrollSelectedToTop?: IComboBoxProps['scrollSelectedToTop'];
@Input() @Input() dropdownWidth?: IComboBoxProps['dropdownWidth'];
theme?: IComboBoxProps['theme']; @Input() useComboBoxAsMenuWidth?: IComboBoxProps['useComboBoxAsMenuWidth'];
@Input() @Input() multiSelect?: IComboBoxProps['multiSelect'];
styles?: IComboBoxProps['styles']; @Input() isButtonAriaHidden?: IComboBoxProps['isButtonAriaHidden'];
@Input() @Input() keytipProps?: IComboBoxProps['keytipProps'];
getClassNames?: IComboBoxProps['getClassNames']; @Input() resolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
@Input()
caretDownButtonStyles?: IComboBoxProps['caretDownButtonStyles'];
@Input()
comboBoxOptionStyles?: IComboBoxProps['comboBoxOptionStyles'];
@Input()
scrollSelectedToTop?: IComboBoxProps['scrollSelectedToTop'];
@Input()
dropdownWidth?: IComboBoxProps['dropdownWidth'];
@Input()
useComboBoxAsMenuWidth?: IComboBoxProps['useComboBoxAsMenuWidth'];
@Input()
multiSelect?: IComboBoxProps['multiSelect'];
@Input()
isButtonAriaHidden?: IComboBoxProps['isButtonAriaHidden'];
@Input()
keytipProps?: IComboBoxProps['keytipProps'];
@Input()
resolveOptions?: (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike<IComboBoxOption[]>;
@Input() @Input() renderLowerContent?: InputRendererOptions<IComboBoxProps>;
renderLowerContent?: InputRendererOptions<IComboBoxProps>;
@Output() @Output() readonly onChange = new EventEmitter<{
readonly onChange = new EventEmitter<{
event: Event; event: Event;
option?: IComboBoxOption; option?: IComboBoxOption;
index?: number; index?: number;
value?: string; value?: string;
}>(); }>();
@Output() @Output() readonly onPendingValueChanged = new EventEmitter<{
readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption; index?: number; value?: string }>(); option?: IComboBoxOption;
@Output() index?: number;
readonly onMenuOpen = new EventEmitter<void>(); value?: string;
@Output() }>();
readonly onMenuDismissed = new EventEmitter<void>(); @Output() readonly onMenuOpen = new EventEmitter<void>();
@Output() @Output() readonly onMenuDismissed = new EventEmitter<void>();
readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>(); @Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element; onRenderLowerContent: (props?: IComboBoxProps, defaultRender?: JsxRenderFunc<IComboBoxProps>) => JSX.Element;

6
libs/fabric/src/lib/components/combo-box/combo-box.component.ts
Просмотреть файл

@ -41,15 +41,15 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
[ResolveOptions]="resolveOptions" [ResolveOptions]="resolveOptions"
[ScrollToItem]="onScrollToItemHandler" [ScrollToItem]="onScrollToItemHandler"
(onMenuOpen)="onMenuOpen.emit()" (onMenuOpen)="onMenuOpen.emit()"
(onMenuDismissed)="onMenuDismissed.emit()"> (onMenuDismissed)="onMenuDismissed.emit()"
>
</ComboBox> </ComboBox>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabComboBoxComponent extends FabBaseComboBoxComponent { export class FabComboBoxComponent extends FabBaseComboBoxComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

6
libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts
Просмотреть файл

@ -41,15 +41,15 @@ import { FabBaseComboBoxComponent } from './base-combo-box.component';
[ResolveOptions]="resolveOptions" [ResolveOptions]="resolveOptions"
[ScrollToItem]="onScrollToItemHandler" [ScrollToItem]="onScrollToItemHandler"
(onMenuOpen)="onMenuOpen.emit()" (onMenuOpen)="onMenuOpen.emit()"
(onMenuDismissed)="onMenuDismissed.emit()"> (onMenuDismissed)="onMenuDismissed.emit()"
>
</VirtualizedComboBox> </VirtualizedComboBox>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent { export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

65
libs/fabric/src/lib/components/command-bar/command-bar.component.ts
Просмотреть файл

@ -52,8 +52,9 @@ import {
[theme]="theme" [theme]="theme"
[ReduceData]="onReduceData" [ReduceData]="onReduceData"
[GrowData]="onGrowData" [GrowData]="onGrowData"
(onDataReduced)="onDataReduced" (onDataReduced)="(onDataReduced)"
(onDataGrown)="onDataGrown"> (onDataGrown)="(onDataGrown)"
>
</CommandBar> </CommandBar>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
@ -61,50 +62,30 @@ import {
}) })
export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps> export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>
implements OnChanges<FabCommandBarComponent>, AfterContentInit, OnDestroy { implements OnChanges<FabCommandBarComponent>, AfterContentInit, OnDestroy {
@ContentChild(CommandBarItemsDirective) @ContentChild(CommandBarItemsDirective) readonly itemsDirective?: CommandBarItemsDirective;
readonly itemsDirective?: CommandBarItemsDirective; @ContentChild(CommandBarFarItemsDirective) readonly farItemsDirective?: CommandBarFarItemsDirective;
@ContentChild(CommandBarFarItemsDirective) @ContentChild(CommandBarOverflowItemsDirective) readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
readonly farItemsDirective?: CommandBarFarItemsDirective;
@ContentChild(CommandBarOverflowItemsDirective)
readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: ICommandBarProps['componentRef'];
componentRef?: ICommandBarProps['componentRef']; @Input() overflowButtonProps?: ICommandBarProps['overflowButtonProps'];
@Input() @Input() overflowButtonAs?: ICommandBarProps['overflowButtonAs'];
overflowButtonProps?: ICommandBarProps['overflowButtonProps']; @Input() buttonAs?: ICommandBarProps['buttonAs'];
@Input() @Input() shiftOnReduce?: ICommandBarProps['shiftOnReduce'];
overflowButtonAs?: ICommandBarProps['overflowButtonAs']; @Input() className?: ICommandBarProps['className'];
@Input() @Input() ariaLabel?: ICommandBarProps['ariaLabel'];
buttonAs?: ICommandBarProps['buttonAs']; @Input() styles?: ICommandBarProps['styles'];
@Input() @Input() theme?: ICommandBarProps['theme'];
shiftOnReduce?: ICommandBarProps['shiftOnReduce']; @Input() onReduceData?: ICommandBarProps['onReduceData'];
@Input() @Input() onGrowData?: ICommandBarProps['onGrowData'];
className?: ICommandBarProps['className'];
@Input()
ariaLabel?: ICommandBarProps['ariaLabel'];
@Input()
styles?: ICommandBarProps['styles'];
@Input()
theme?: ICommandBarProps['theme'];
@Input()
onReduceData?: ICommandBarProps['onReduceData'];
@Input()
onGrowData?: ICommandBarProps['onGrowData'];
@Input() @Input() items: ReadonlyArray<ICommandBarItemOptions>;
items: ReadonlyArray<ICommandBarItemOptions>; @Input() farItems: ReadonlyArray<ICommandBarItemOptions>;
@Input() @Input() overflowItems: ReadonlyArray<ICommandBarItemOptions>;
farItems: ReadonlyArray<ICommandBarItemOptions>;
@Input()
overflowItems: ReadonlyArray<ICommandBarItemOptions>;
@Output() @Output() readonly onDataReduced = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
readonly onDataReduced = new EventEmitter<{ movedItem: ICommandBarItemProps }>(); @Output() readonly onDataGrown = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
@Output()
readonly onDataGrown = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
/** @internal */ /** @internal */
transformedItems_: ReadonlyArray<ICommandBarItemProps>; transformedItems_: ReadonlyArray<ICommandBarItemProps>;

30
libs/fabric/src/lib/components/command-bar/directives/command-bar-item.directives.ts
Просмотреть файл

@ -17,8 +17,7 @@ export type CommandBarItemChangedPayload = ItemChangedPayload<ICommandBarItemOpt
*/ */
@Directive({ selector: 'fab-command-bar-item > render' }) @Directive({ selector: 'fab-command-bar-item > render' })
export class CommandBarItemRenderDirective { export class CommandBarItemRenderDirective {
@ContentChild(TemplateRef) @ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
} }
/** /**
@ -26,31 +25,22 @@ export class CommandBarItemRenderDirective {
*/ */
@Directive({ selector: 'fab-command-bar-item > render-icon' }) @Directive({ selector: 'fab-command-bar-item > render-icon' })
export class CommandBarItemRenderIconDirective { export class CommandBarItemRenderIconDirective {
@ContentChild(TemplateRef) @ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
} }
@Directive({ selector: 'fab-command-bar-item' }) @Directive({ selector: 'fab-command-bar-item' })
export class CommandBarItemDirective extends ContextualMenuItemDirective export class CommandBarItemDirective extends ContextualMenuItemDirective
implements ICommandBarItemOptions, AfterContentInit { implements ICommandBarItemOptions, AfterContentInit {
@ContentChild(CommandBarItemRenderDirective) @ContentChild(CommandBarItemRenderDirective) readonly renderDirective: CommandBarItemRenderDirective;
readonly renderDirective: CommandBarItemRenderDirective; @ContentChild(CommandBarItemRenderIconDirective) readonly renderIconDirective: CommandBarItemRenderIconDirective;
@ContentChild(CommandBarItemRenderIconDirective)
readonly renderIconDirective: CommandBarItemRenderIconDirective;
// ICommandBarItemOptions implementation // ICommandBarItemOptions implementation
@Input() @Input() iconOnly?: ICommandBarItemOptions['iconOnly'];
iconOnly?: ICommandBarItemOptions['iconOnly']; @Input() buttonStyles?: ICommandBarItemOptions['buttonStyles'];
@Input() @Input() cacheKey?: ICommandBarItemOptions['cacheKey'];
buttonStyles?: ICommandBarItemOptions['buttonStyles']; @Input() renderedInOverflow?: ICommandBarItemOptions['renderedInOverflow'];
@Input() @Input() render: ICommandBarItemOptions['render'];
cacheKey?: ICommandBarItemOptions['cacheKey']; @Input() renderIcon: ICommandBarItemOptions['renderIcon'];
@Input()
renderedInOverflow?: ICommandBarItemOptions['renderedInOverflow'];
@Input()
render: ICommandBarItemOptions['render'];
@Input()
renderIcon: ICommandBarItemOptions['renderIcon'];
ngAfterContentInit() { ngAfterContentInit() {
super.ngAfterContentInit(); super.ngAfterContentInit();

9
libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts
Просмотреть файл

@ -28,18 +28,15 @@ export abstract class CommandBarItemsDirectiveBase extends ChangeableItemsDirect
@Directive({ selector: 'fab-command-bar > items' }) @Directive({ selector: 'fab-command-bar > items' })
export class CommandBarItemsDirective extends CommandBarItemsDirectiveBase { export class CommandBarItemsDirective extends CommandBarItemsDirectiveBase {
@ContentChildren(CommandBarItemDirective) @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
readonly directiveItems: QueryList<CommandBarItemDirective>;
} }
@Directive({ selector: 'fab-command-bar > far-items' }) @Directive({ selector: 'fab-command-bar > far-items' })
export class CommandBarFarItemsDirective extends CommandBarItemsDirectiveBase { export class CommandBarFarItemsDirective extends CommandBarItemsDirectiveBase {
@ContentChildren(CommandBarItemDirective) @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
readonly directiveItems: QueryList<CommandBarItemDirective>;
} }
@Directive({ selector: 'fab-command-bar > overflow-items' }) @Directive({ selector: 'fab-command-bar > overflow-items' })
export class CommandBarOverflowItemsDirective extends CommandBarItemsDirectiveBase { export class CommandBarOverflowItemsDirective extends CommandBarItemsDirectiveBase {
@ContentChildren(CommandBarItemDirective) @ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
readonly directiveItems: QueryList<CommandBarItemDirective>;
} }

102
libs/fabric/src/lib/components/contextual-menu/directives/contextual-menu-item.directive.ts
Просмотреть файл

@ -26,76 +26,42 @@ export class ContextualMenuItemDirective extends ChangeableItemDirective<IContex
IContextualMenuItem, IContextualMenuItem,
OnChanges<ContextualMenuItemDirective>, OnChanges<ContextualMenuItemDirective>,
OnDestroy { OnDestroy {
@ContentChildren(ContextualMenuItemDirective) @ContentChildren(ContextualMenuItemDirective) readonly menuItemsDirectives: QueryList<ContextualMenuItemDirective>;
readonly menuItemsDirectives: QueryList<ContextualMenuItemDirective>;
@Input() @Input() componentRef?: IContextualMenuItem['componentRef'];
componentRef?: IContextualMenuItem['componentRef']; @Input() text?: IContextualMenuItem['text'];
@Input() @Input() secondaryText?: IContextualMenuItem['secondaryText'];
text?: IContextualMenuItem['text']; @Input() itemType?: IContextualMenuItem['itemType'];
@Input() @Input() iconProps?: IContextualMenuItem['iconProps'];
secondaryText?: IContextualMenuItem['secondaryText']; @Input() onRenderIcon?: IContextualMenuItem['onRenderIcon'];
@Input() @Input() submenuIconProps?: IContextualMenuItem['submenuIconProps'];
itemType?: IContextualMenuItem['itemType']; @Input() disabled?: IContextualMenuItem['disabled'];
@Input() @Input() primaryDisabled?: IContextualMenuItem['primaryDisabled'];
iconProps?: IContextualMenuItem['iconProps']; @Input() shortCut?: IContextualMenuItem['shortCut'];
@Input() @Input() canCheck?: IContextualMenuItem['canCheck'];
onRenderIcon?: IContextualMenuItem['onRenderIcon']; @Input() checked?: IContextualMenuItem['checked'];
@Input() @Input() split?: IContextualMenuItem['split'];
submenuIconProps?: IContextualMenuItem['submenuIconProps']; @Input() data?: IContextualMenuItem['data'];
@Input() @Input() href?: IContextualMenuItem['href'];
disabled?: IContextualMenuItem['disabled']; @Input() target?: IContextualMenuItem['target'];
@Input() @Input() rel?: IContextualMenuItem['rel'];
primaryDisabled?: IContextualMenuItem['primaryDisabled']; @Input() subMenuProps?: IContextualMenuItem['subMenuProps'];
@Input() @Input() getItemClassNames?: IContextualMenuItem['getItemClassNames'];
shortCut?: IContextualMenuItem['shortCut']; @Input() getSplitButtonVerticalDividerClassNames?: IContextualMenuItem['getSplitButtonVerticalDividerClassNames'];
@Input() @Input() sectionProps?: IContextualMenuItem['sectionProps'];
canCheck?: IContextualMenuItem['canCheck']; @Input() className?: IContextualMenuItem['className'];
@Input() @Input() style?: IContextualMenuItem['style'];
checked?: IContextualMenuItem['checked']; @Input() ariaLabel?: IContextualMenuItem['ariaLabel'];
@Input() @Input() title?: IContextualMenuItem['title'];
split?: IContextualMenuItem['split']; @Input() onRender?: IContextualMenuItem['onRender'];
@Input() @Input() onMouseDown?: IContextualMenuItem['onMouseDown'];
data?: IContextualMenuItem['data']; @Input() role?: IContextualMenuItem['role'];
@Input() @Input() customOnRenderListLength?: IContextualMenuItem['customOnRenderListLength'];
href?: IContextualMenuItem['href']; @Input() keytipProps?: IContextualMenuItem['keytipProps'];
@Input() @Input() inactive?: IContextualMenuItem['inactive'];
target?: IContextualMenuItem['target']; @Input() name?: IContextualMenuItem['name'];
@Input()
rel?: IContextualMenuItem['rel'];
@Input()
subMenuProps?: IContextualMenuItem['subMenuProps'];
@Input()
getItemClassNames?: IContextualMenuItem['getItemClassNames'];
@Input()
getSplitButtonVerticalDividerClassNames?: IContextualMenuItem['getSplitButtonVerticalDividerClassNames'];
@Input()
sectionProps?: IContextualMenuItem['sectionProps'];
@Input()
className?: IContextualMenuItem['className'];
@Input()
style?: IContextualMenuItem['style'];
@Input()
ariaLabel?: IContextualMenuItem['ariaLabel'];
@Input()
title?: IContextualMenuItem['title'];
@Input()
onRender?: IContextualMenuItem['onRender'];
@Input()
onMouseDown?: IContextualMenuItem['onMouseDown'];
@Input()
role?: IContextualMenuItem['role'];
@Input()
customOnRenderListLength?: IContextualMenuItem['customOnRenderListLength'];
@Input()
keytipProps?: IContextualMenuItem['keytipProps'];
@Input()
inactive?: IContextualMenuItem['inactive'];
@Input()
name?: IContextualMenuItem['name'];
@Output() @Output() readonly click = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; item?: IContextualMenuItem }>();
readonly click = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; item?: IContextualMenuItem }>();
@Output() @Output()
get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, IContextualMenuItem>> { get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, IContextualMenuItem>> {

3
libs/fabric/src/lib/components/core/shared/changeable-item.directive.ts
Просмотреть файл

@ -11,8 +11,7 @@ import { ChangeableItemHelper } from './changeable-helper';
* Parent class for wrapper directive for single item with OnChanges * Parent class for wrapper directive for single item with OnChanges
*/ */
export abstract class ChangeableItemDirective<TItem> implements OnChanges<ChangeableItemDirective<TItem>>, OnInit { export abstract class ChangeableItemDirective<TItem> implements OnChanges<ChangeableItemDirective<TItem>>, OnInit {
@Input() @Input() key: string;
key: string;
@Output() @Output()
get onItemChanged(): EventEmitter<ItemChangedPayload<string, TItem>> { get onItemChanged(): EventEmitter<ItemChangedPayload<string, TItem>> {

3
libs/fabric/src/lib/components/core/shared/changeable-items.directive.ts
Просмотреть файл

@ -12,8 +12,7 @@ import { ChangeableItemDirective } from './changeable-item.directive';
*/ */
export abstract class ChangeableItemsDirective<TItem> export abstract class ChangeableItemsDirective<TItem>
implements AfterContentInit, IChangeableItemsContainer<TItem>, OnDestroy { implements AfterContentInit, IChangeableItemsContainer<TItem>, OnDestroy {
@ContentChildren(ChangeableItemDirective) @ContentChildren(ChangeableItemDirective) readonly directiveItems: QueryList<ChangeableItemDirective<TItem>>;
readonly directiveItems: QueryList<ChangeableItemDirective<TItem>>;
@Output() @Output()
get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, TItem>> { get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, TItem>> {

108
libs/fabric/src/lib/components/date-picker/date-picker.component.ts
Просмотреть файл

@ -54,85 +54,51 @@ import { IDatePickerProps } from 'office-ui-fabric-react';
[allFocusable]="allFocusable" [allFocusable]="allFocusable"
[showCloseButton]="showCloseButton" [showCloseButton]="showCloseButton"
[SelectDate]="onSelectDateHandler" [SelectDate]="onSelectDateHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit()"> (onAfterMenuDismiss)="onAfterMenuDismiss.emit()"
>
</DatePicker> </DatePicker>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> { export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IDatePickerProps['componentRef'];
componentRef?: IDatePickerProps['componentRef']; @Input() calendarProps?: IDatePickerProps['calendarProps'];
@Input() @Input() label?: IDatePickerProps['label'];
calendarProps?: IDatePickerProps['calendarProps']; @Input() isRequired?: IDatePickerProps['isRequired'];
@Input() @Input() disabled?: IDatePickerProps['disabled'];
label?: IDatePickerProps['label']; @Input() ariaLabel?: IDatePickerProps['ariaLabel'];
@Input() @Input() underlined?: IDatePickerProps['underlined'];
isRequired?: IDatePickerProps['isRequired']; @Input() pickerAriaLabel?: IDatePickerProps['pickerAriaLabel'];
@Input() @Input() isMonthPickerVisible?: IDatePickerProps['isMonthPickerVisible'];
disabled?: IDatePickerProps['disabled']; @Input() showMonthPickerAsOverlay?: IDatePickerProps['showMonthPickerAsOverlay'];
@Input() @Input() allowTextInput?: IDatePickerProps['allowTextInput'];
ariaLabel?: IDatePickerProps['ariaLabel']; @Input() disableAutoFocus?: IDatePickerProps['disableAutoFocus'];
@Input() @Input() placeholder?: IDatePickerProps['placeholder'];
underlined?: IDatePickerProps['underlined']; @Input() today?: IDatePickerProps['today'];
@Input() @Input() value?: IDatePickerProps['value'];
pickerAriaLabel?: IDatePickerProps['pickerAriaLabel']; @Input() formatDate?: IDatePickerProps['formatDate'];
@Input() @Input() parseDateFromString?: IDatePickerProps['parseDateFromString'];
isMonthPickerVisible?: IDatePickerProps['isMonthPickerVisible']; @Input() firstDayOfWeek?: IDatePickerProps['firstDayOfWeek'];
@Input() @Input() strings?: IDatePickerProps['strings'];
showMonthPickerAsOverlay?: IDatePickerProps['showMonthPickerAsOverlay']; @Input() highlightCurrentMonth?: IDatePickerProps['highlightCurrentMonth'];
@Input() @Input() highlightSelectedMonth?: IDatePickerProps['highlightSelectedMonth'];
allowTextInput?: IDatePickerProps['allowTextInput']; @Input() showWeekNumbers?: IDatePickerProps['showWeekNumbers'];
@Input() @Input() firstWeekOfYear?: IDatePickerProps['firstWeekOfYear'];
disableAutoFocus?: IDatePickerProps['disableAutoFocus']; @Input() showGoToToday?: IDatePickerProps['showGoToToday'];
@Input() @Input() borderless?: IDatePickerProps['borderless'];
placeholder?: IDatePickerProps['placeholder']; @Input() className?: IDatePickerProps['className'];
@Input() @Input() dateTimeFormatter?: IDatePickerProps['dateTimeFormatter'];
today?: IDatePickerProps['today']; @Input() minDate?: IDatePickerProps['minDate'];
@Input() @Input() maxDate?: IDatePickerProps['maxDate'];
value?: IDatePickerProps['value']; @Input() initialPickerDate?: IDatePickerProps['initialPickerDate'];
@Input() @Input() allFocusable?: IDatePickerProps['allFocusable'];
formatDate?: IDatePickerProps['formatDate']; @Input() showCloseButton?: IDatePickerProps['showCloseButton'];
@Input()
parseDateFromString?: IDatePickerProps['parseDateFromString'];
@Input()
firstDayOfWeek?: IDatePickerProps['firstDayOfWeek'];
@Input()
strings?: IDatePickerProps['strings'];
@Input()
highlightCurrentMonth?: IDatePickerProps['highlightCurrentMonth'];
@Input()
highlightSelectedMonth?: IDatePickerProps['highlightSelectedMonth'];
@Input()
showWeekNumbers?: IDatePickerProps['showWeekNumbers'];
@Input()
firstWeekOfYear?: IDatePickerProps['firstWeekOfYear'];
@Input()
showGoToToday?: IDatePickerProps['showGoToToday'];
@Input()
borderless?: IDatePickerProps['borderless'];
@Input()
className?: IDatePickerProps['className'];
@Input()
dateTimeFormatter?: IDatePickerProps['dateTimeFormatter'];
@Input()
minDate?: IDatePickerProps['minDate'];
@Input()
maxDate?: IDatePickerProps['maxDate'];
@Input()
initialPickerDate?: IDatePickerProps['initialPickerDate'];
@Input()
allFocusable?: IDatePickerProps['allFocusable'];
@Input()
showCloseButton?: IDatePickerProps['showCloseButton'];
@Output() @Output() readonly onSelectDate = new EventEmitter<{ date: Date | null | undefined }>();
readonly onSelectDate = new EventEmitter<{ date: Date | null | undefined }>(); @Output() readonly onAfterMenuDismiss = new EventEmitter<void>();
@Output()
readonly onAfterMenuDismiss = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

189
libs/fabric/src/lib/components/details-list/details-list.component.ts
Просмотреть файл

@ -103,7 +103,8 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
[ItemInvoked]="onItemInvokedHandler" [ItemInvoked]="onItemInvokedHandler"
[RowDidMount]="onRowDidMountHandler" [RowDidMount]="onRowDidMountHandler"
[RowWillUnmount]="onRowWillUnmountHandler" [RowWillUnmount]="onRowWillUnmountHandler"
[ShouldVirtualize]="onShouldVirtualize"> [ShouldVirtualize]="onShouldVirtualize"
>
</DetailsList> </DetailsList>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
@ -111,140 +112,78 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
}) })
export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps> export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps>
implements AfterContentInit, OnChanges<FabDetailsListComponent>, OnDestroy, OnInit { implements AfterContentInit, OnChanges<FabDetailsListComponent>, OnDestroy, OnInit {
@ContentChild(DetailsListColumnsDirective) @ContentChild(DetailsListColumnsDirective) readonly columnsDirective?: DetailsListColumnsDirective;
readonly columnsDirective?: DetailsListColumnsDirective; @ContentChild(DetailsListGroupsDirective) readonly groupsDirective?: DetailsListGroupsDirective;
@ContentChild(DetailsListGroupsDirective)
readonly groupsDirective?: DetailsListGroupsDirective;
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() theme?: IDetailsListProps['theme'];
theme?: IDetailsListProps['theme']; @Input() styles?: IDetailsListProps['styles'];
@Input() @Input() componentRef?: IDetailsListProps['componentRef'];
styles?: IDetailsListProps['styles']; @Input() setKey?: IDetailsListProps['setKey'];
@Input() @Input() items: IDetailsListProps['items'];
componentRef?: IDetailsListProps['componentRef']; @Input() listProps?: IDetailsListProps['listProps'];
@Input() @Input() initialFocusedIndex?: IDetailsListProps['initialFocusedIndex'];
setKey?: IDetailsListProps['setKey']; @Input() className?: IDetailsListProps['className'];
@Input() @Input() groupProps?: IDetailsListProps['groupProps'];
items: IDetailsListProps['items']; @Input() indentWidth?: IDetailsListProps['indentWidth'];
@Input() @Input() selection?: IDetailsListProps['selection'];
listProps?: IDetailsListProps['listProps']; @Input() selectionMode?: IDetailsListProps['selectionMode'];
@Input() @Input() selectionPreservedOnEmptyClick?: IDetailsListProps['selectionPreservedOnEmptyClick'];
initialFocusedIndex?: IDetailsListProps['initialFocusedIndex']; @Input() selectionZoneProps?: IDetailsListProps['selectionZoneProps'];
@Input() @Input() layoutMode?: IDetailsListProps['layoutMode'];
className?: IDetailsListProps['className']; @Input() checkboxVisibility?: IDetailsListProps['checkboxVisibility'];
@Input() @Input() isHeaderVisible?: IDetailsListProps['isHeaderVisible'];
groupProps?: IDetailsListProps['groupProps']; @Input() constrainMode?: IDetailsListProps['constrainMode'];
@Input() @Input() rowElementEventMap?: IDetailsListProps['rowElementEventMap'];
indentWidth?: IDetailsListProps['indentWidth']; @Input() dragDropEvents?: IDetailsListProps['dragDropEvents'];
@Input() @Input() enableShimmer?: IDetailsListProps['enableShimmer'];
selection?: IDetailsListProps['selection']; @Input() viewport?: IDetailsListProps['viewport'];
@Input() @Input() ariaLabelForListHeader?: IDetailsListProps['ariaLabelForListHeader'];
selectionMode?: IDetailsListProps['selectionMode']; @Input() ariaLabelForSelectAllCheckbox?: IDetailsListProps['ariaLabelForSelectAllCheckbox'];
@Input() @Input() ariaLabelForSelectionColumn?: IDetailsListProps['ariaLabelForSelectionColumn'];
selectionPreservedOnEmptyClick?: IDetailsListProps['selectionPreservedOnEmptyClick']; @Input() getRowAriaLabel?: IDetailsListProps['getRowAriaLabel'];
@Input() @Input() getRowAriaDescribedBy?: IDetailsListProps['getRowAriaDescribedBy'];
selectionZoneProps?: IDetailsListProps['selectionZoneProps']; @Input() getKey?: IDetailsListProps['getKey'];
@Input() @Input() ariaLabel?: IDetailsListProps['ariaLabel'];
layoutMode?: IDetailsListProps['layoutMode']; @Input() checkButtonAriaLabel?: IDetailsListProps['checkButtonAriaLabel'];
@Input() @Input() ariaLabelForGrid?: IDetailsListProps['ariaLabelForGrid'];
checkboxVisibility?: IDetailsListProps['checkboxVisibility']; @Input() shouldApplyApplicationRole?: IDetailsListProps['shouldApplyApplicationRole'];
@Input() @Input() minimumPixelsForDrag?: IDetailsListProps['minimumPixelsForDrag'];
isHeaderVisible?: IDetailsListProps['isHeaderVisible']; @Input() compact?: IDetailsListProps['compact'];
@Input() @Input() usePageCache?: IDetailsListProps['usePageCache'];
constrainMode?: IDetailsListProps['constrainMode']; @Input() onShouldVirtualize?: (props: IListProps) => boolean;
@Input() @Input() checkboxCellClassName?: IDetailsListProps['checkboxCellClassName'];
rowElementEventMap?: IDetailsListProps['rowElementEventMap']; @Input() enterModalSelectionOnTouch?: IDetailsListProps['enterModalSelectionOnTouch'];
@Input() @Input() columnReorderOptions?: IDetailsListProps['columnReorderOptions'];
dragDropEvents?: IDetailsListProps['dragDropEvents']; @Input() getGroupHeight?: IDetailsListProps['getGroupHeight'];
@Input() @Input() useReducedRowRenderer?: IDetailsListProps['useReducedRowRenderer'];
enableShimmer?: IDetailsListProps['enableShimmer']; @Input() cellStyleProps?: IDetailsListProps['cellStyleProps'];
@Input() @Input() disableSelectionZone?: IDetailsListProps['disableSelectionZone'];
viewport?: IDetailsListProps['viewport'];
@Input()
ariaLabelForListHeader?: IDetailsListProps['ariaLabelForListHeader'];
@Input()
ariaLabelForSelectAllCheckbox?: IDetailsListProps['ariaLabelForSelectAllCheckbox'];
@Input()
ariaLabelForSelectionColumn?: IDetailsListProps['ariaLabelForSelectionColumn'];
@Input()
getRowAriaLabel?: IDetailsListProps['getRowAriaLabel'];
@Input()
getRowAriaDescribedBy?: IDetailsListProps['getRowAriaDescribedBy'];
@Input()
getKey?: IDetailsListProps['getKey'];
@Input()
ariaLabel?: IDetailsListProps['ariaLabel'];
@Input()
checkButtonAriaLabel?: IDetailsListProps['checkButtonAriaLabel'];
@Input()
ariaLabelForGrid?: IDetailsListProps['ariaLabelForGrid'];
@Input()
shouldApplyApplicationRole?: IDetailsListProps['shouldApplyApplicationRole'];
@Input()
minimumPixelsForDrag?: IDetailsListProps['minimumPixelsForDrag'];
@Input()
compact?: IDetailsListProps['compact'];
@Input()
usePageCache?: IDetailsListProps['usePageCache'];
@Input()
onShouldVirtualize?: (props: IListProps) => boolean;
@Input()
checkboxCellClassName?: IDetailsListProps['checkboxCellClassName'];
@Input()
enterModalSelectionOnTouch?: IDetailsListProps['enterModalSelectionOnTouch'];
@Input()
columnReorderOptions?: IDetailsListProps['columnReorderOptions'];
@Input()
getGroupHeight?: IDetailsListProps['getGroupHeight'];
@Input()
useReducedRowRenderer?: IDetailsListProps['useReducedRowRenderer'];
@Input()
cellStyleProps?: IDetailsListProps['cellStyleProps'];
@Input()
disableSelectionZone?: IDetailsListProps['disableSelectionZone'];
// Inherited members (IWithViewportProps) // Inherited members (IWithViewportProps)
@Input() @Input() skipViewportMeasures?: IDetailsListProps['skipViewportMeasures'];
skipViewportMeasures?: IDetailsListProps['skipViewportMeasures'];
// Render members // Render members
@Input() @Input() renderDetailsFooter?: InputRendererOptions<IDetailsFooterProps>;
renderDetailsFooter?: InputRendererOptions<IDetailsFooterProps>; @Input() renderDetailsHeader?: InputRendererOptions<IDetailsHeaderProps>;
@Input() @Input() renderMissingItem?: InputRendererOptions<IMissingItemRenderContext>;
renderDetailsHeader?: InputRendererOptions<IDetailsHeaderProps>; @Input() renderRow?: InputRendererOptions<IDetailsRowProps>;
@Input()
renderMissingItem?: InputRendererOptions<IMissingItemRenderContext>;
@Input()
renderRow?: InputRendererOptions<IDetailsRowProps>;
// Callback members // Callback members
@Output() @Output() readonly onActiveItemChanged = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
readonly onActiveItemChanged = new EventEmitter<{ item?: any; index?: number; ev?: Event }>(); @Output() readonly onColumnHeaderClick = new EventEmitter<{ ev?: Event; column?: IColumn }>();
@Output() @Output() readonly onColumnHeaderContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
readonly onColumnHeaderClick = new EventEmitter<{ ev?: Event; column?: IColumn }>(); @Output() readonly onColumnResize = new EventEmitter<{ column?: IColumn; newWidth?: number; columnIndex?: number }>();
@Output() @Output() readonly onDidUpdate = new EventEmitter<{ detailsList?: DetailsListBase }>();
readonly onColumnHeaderContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>(); @Output() readonly onItemContextMenu = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
@Output() @Output() readonly onItemInvoked = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
readonly onColumnResize = new EventEmitter<{ column?: IColumn; newWidth?: number; columnIndex?: number }>(); @Output() readonly onRowDidMount = new EventEmitter<{ item?: any; index?: number }>();
@Output() @Output() readonly onRowWillUnmount = new EventEmitter<{ item?: any; index?: number }>();
readonly onDidUpdate = new EventEmitter<{ detailsList?: DetailsListBase }>();
@Output()
readonly onItemContextMenu = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
@Output()
readonly onItemInvoked = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
@Output()
readonly onRowDidMount = new EventEmitter<{ item?: any; index?: number }>();
@Output()
readonly onRowWillUnmount = new EventEmitter<{ item?: any; index?: number }>();
// Directive members // Directive members
@Input() @Input() columns: ReadonlyArray<IDetailsListColumnOptions>;
columns: ReadonlyArray<IDetailsListColumnOptions>; @Input() groups: ReadonlyArray<IGroup>;
@Input()
groups: ReadonlyArray<IGroup>;
/** @internal */ /** @internal */
transformedColumns_: ReadonlyArray<IColumn>; transformedColumns_: ReadonlyArray<IColumn>;

105
libs/fabric/src/lib/components/details-list/directives/details-list-column.directive.ts
Просмотреть файл

@ -12,8 +12,7 @@ import { ChangeableItemDirective } from '../../core/shared/changeable-item.direc
*/ */
@Directive({ selector: 'fab-details-list-column > render' }) @Directive({ selector: 'fab-details-list-column > render' })
export class DetailsListColumnRenderDirective { export class DetailsListColumnRenderDirective {
@ContentChild(TemplateRef) @ContentChild(TemplateRef) readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
} }
/** /**
@ -22,79 +21,45 @@ export class DetailsListColumnRenderDirective {
@Directive({ selector: 'fab-details-list-column' }) @Directive({ selector: 'fab-details-list-column' })
export class DetailsListColumnDirective extends ChangeableItemDirective<IDetailsListColumnOptions> export class DetailsListColumnDirective extends ChangeableItemDirective<IDetailsListColumnOptions>
implements AfterContentInit { implements AfterContentInit {
@ContentChild(DetailsListColumnRenderDirective) @ContentChild(DetailsListColumnRenderDirective) readonly renderDirective: DetailsListColumnRenderDirective;
readonly renderDirective: DetailsListColumnRenderDirective;
@Input() @Input() name: IColumn['name'];
name: IColumn['name']; @Input() fieldName?: IColumn['fieldName'];
@Input() @Input() className?: IColumn['className'];
fieldName?: IColumn['fieldName']; @Input() minWidth: IColumn['minWidth'];
@Input() @Input() ariaLabel?: IColumn['ariaLabel'];
className?: IColumn['className']; @Input() isRowHeader?: IColumn['isRowHeader'];
@Input() @Input() maxWidth?: IColumn['maxWidth'];
minWidth: IColumn['minWidth']; @Input() columnActionsMode?: IColumn['columnActionsMode'];
@Input() @Input() iconName?: IColumn['iconName'];
ariaLabel?: IColumn['ariaLabel']; @Input() isIconOnly?: IColumn['isIconOnly'];
@Input() @Input() iconClassName?: IColumn['iconClassName'];
isRowHeader?: IColumn['isRowHeader']; @Input() isCollapsable?: IColumn['isCollapsable'];
@Input() @Input() isSorted?: IColumn['isSorted'];
maxWidth?: IColumn['maxWidth']; @Input() isSortedDescending?: IColumn['isSortedDescending'];
@Input() @Input() isResizable?: IColumn['isResizable'];
columnActionsMode?: IColumn['columnActionsMode']; @Input() isMultiline?: IColumn['isMultiline'];
@Input() @Input() onRender?: IColumn['onRender'];
iconName?: IColumn['iconName']; @Input() onRenderDivider?: IColumn['onRenderDivider'];
@Input() @Input() isFiltered?: IColumn['isFiltered'];
isIconOnly?: IColumn['isIconOnly']; @Input() isGrouped?: IColumn['isGrouped'];
@Input() @Input() data?: IColumn['data'];
iconClassName?: IColumn['iconClassName']; @Input() calculatedWidth?: IColumn['calculatedWidth'];
@Input() @Input() currentWidth?: IColumn['currentWidth'];
isCollapsable?: IColumn['isCollapsable']; @Input() headerClassName?: IColumn['headerClassName'];
@Input() @Input() isPadded?: IColumn['isPadded'];
isSorted?: IColumn['isSorted']; @Input() sortAscendingAriaLabel?: IColumn['sortAscendingAriaLabel'];
@Input() @Input() sortDescendingAriaLabel?: IColumn['sortDescendingAriaLabel'];
isSortedDescending?: IColumn['isSortedDescending']; @Input() groupAriaLabel?: IColumn['groupAriaLabel'];
@Input() @Input() filterAriaLabel?: IColumn['filterAriaLabel'];
isResizable?: IColumn['isResizable'];
@Input()
isMultiline?: IColumn['isMultiline'];
@Input()
onRender?: IColumn['onRender'];
@Input()
onRenderDivider?: IColumn['onRenderDivider'];
@Input()
isFiltered?: IColumn['isFiltered'];
@Input()
isGrouped?: IColumn['isGrouped'];
@Input()
data?: IColumn['data'];
@Input()
calculatedWidth?: IColumn['calculatedWidth'];
@Input()
currentWidth?: IColumn['currentWidth'];
@Input()
headerClassName?: IColumn['headerClassName'];
@Input()
isPadded?: IColumn['isPadded'];
@Input()
sortAscendingAriaLabel?: IColumn['sortAscendingAriaLabel'];
@Input()
sortDescendingAriaLabel?: IColumn['sortDescendingAriaLabel'];
@Input()
groupAriaLabel?: IColumn['groupAriaLabel'];
@Input()
filterAriaLabel?: IColumn['filterAriaLabel'];
// Render members // Render members
@Input() @Input() render: IDetailsListColumnOptions['render'];
render: IDetailsListColumnOptions['render'];
// Callback members // Callback members
@Output() @Output() readonly onColumnClick = new EventEmitter<{ ev: Event; column: IColumn }>();
readonly onColumnClick = new EventEmitter<{ ev: Event; column: IColumn }>(); @Output() readonly onColumnContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
@Output() @Output() readonly onColumnResize = new EventEmitter<{ width?: number }>();
readonly onColumnContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
@Output()
readonly onColumnResize = new EventEmitter<{ width?: number }>();
ngAfterContentInit() { ngAfterContentInit() {
if (this.renderDirective && this.renderDirective.templateRef) { if (this.renderDirective && this.renderDirective.templateRef) {

3
libs/fabric/src/lib/components/details-list/directives/details-list-columns.directive.ts
Просмотреть файл

@ -12,8 +12,7 @@ import { DetailsListColumnDirective, IDetailsListColumnOptions } from './details
*/ */
@Directive({ selector: 'fab-details-list > columns' }) @Directive({ selector: 'fab-details-list > columns' })
export class DetailsListColumnsDirective extends ChangeableItemsDirective<IDetailsListColumnOptions> { export class DetailsListColumnsDirective extends ChangeableItemsDirective<IDetailsListColumnOptions> {
@ContentChildren(DetailsListColumnDirective) @ContentChildren(DetailsListColumnDirective) readonly directiveItems: QueryList<DetailsListColumnDirective>;
readonly directiveItems: QueryList<DetailsListColumnDirective>;
get items() { get items() {
return this.directiveItems.map<IDetailsListColumnOptions>(directiveItem => ({ return this.directiveItems.map<IDetailsListColumnOptions>(directiveItem => ({

3
libs/fabric/src/lib/components/details-list/directives/details-list-groups.directive.ts
Просмотреть файл

@ -12,8 +12,7 @@ import { GroupItemDirective } from '../../group';
*/ */
@Directive({ selector: 'fab-details-list > groups' }) @Directive({ selector: 'fab-details-list > groups' })
export class DetailsListGroupsDirective extends ChangeableItemsDirective<IGroup> { export class DetailsListGroupsDirective extends ChangeableItemsDirective<IGroup> {
@ContentChildren(GroupItemDirective) @ContentChildren(GroupItemDirective) readonly directiveItems: QueryList<GroupItemDirective>;
readonly directiveItems: QueryList<GroupItemDirective>;
get items() { get items() {
return this.directiveItems.toArray(); return this.directiveItems.toArray();

128
libs/fabric/src/lib/components/dialog/dialog.component.ts
Просмотреть файл

@ -19,6 +19,7 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
selector: 'fab-dialog', selector: 'fab-dialog',
exportAs: 'fabDialog', exportAs: 'fabDialog',
template: ` template: `
<!-- prettier-ignore -->
<Dialog <Dialog
#reactNode #reactNode
[responsiveMode]="responsiveMode" [responsiveMode]="responsiveMode"
@ -36,7 +37,8 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
[modalProps]="modalProps" [modalProps]="modalProps"
[minWidth]="minWidth" [minWidth]="minWidth"
[maxWidth]="maxWidth" [maxWidth]="maxWidth"
(onDismiss)="onDismissHandler($event)"> (onDismiss)="onDismissHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</Dialog> </Dialog>
`, `,
@ -44,42 +46,25 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> { export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() responsiveMode?: IDialogProps['responsiveMode'];
responsiveMode?: IDialogProps['responsiveMode']; @Input() elementToFocusOnDismiss?: IDialogProps['elementToFocusOnDismiss'];
@Input() @Input() ignoreExternalFocusing?: IDialogProps['ignoreExternalFocusing'];
elementToFocusOnDismiss?: IDialogProps['elementToFocusOnDismiss']; @Input() forceFocusInsideTrap?: IDialogProps['forceFocusInsideTrap'];
@Input() @Input() firstFocusableSelector?: IDialogProps['firstFocusableSelector'];
ignoreExternalFocusing?: IDialogProps['ignoreExternalFocusing']; @Input() closeButtonAriaLabel?: IDialogProps['closeButtonAriaLabel'];
@Input() @Input() isClickableOutsideFocusTrap?: IDialogProps['isClickableOutsideFocusTrap'];
forceFocusInsideTrap?: IDialogProps['forceFocusInsideTrap']; @Input() componentRef?: IDialogProps['componentRef'];
@Input() @Input() styles?: IDialogProps['styles'];
firstFocusableSelector?: IDialogProps['firstFocusableSelector']; @Input() theme?: IDialogProps['theme'];
@Input() @Input() dialogContentProps?: IDialogProps['dialogContentProps'];
closeButtonAriaLabel?: IDialogProps['closeButtonAriaLabel']; @Input() hidden?: IDialogProps['hidden'];
@Input() @Input() modalProps?: IDialogProps['modalProps'];
isClickableOutsideFocusTrap?: IDialogProps['isClickableOutsideFocusTrap']; @Input() minWidth?: IDialogProps['minWidth'];
@Input() @Input() maxWidth?: IDialogProps['maxWidth'];
componentRef?: IDialogProps['componentRef'];
@Input()
styles?: IDialogProps['styles'];
@Input()
theme?: IDialogProps['theme'];
@Input()
dialogContentProps?: IDialogProps['dialogContentProps'];
@Input()
hidden?: IDialogProps['hidden'];
@Input()
modalProps?: IDialogProps['modalProps'];
@Input()
minWidth?: IDialogProps['minWidth'];
@Input()
maxWidth?: IDialogProps['maxWidth'];
@Output() @Output() readonly onDismiss = new EventEmitter<MouseEvent>();
readonly onDismiss = new EventEmitter<MouseEvent>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);
@ -96,12 +81,7 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
selector: 'fab-dialog-footer', selector: 'fab-dialog-footer',
exportAs: 'fabDialogFooter', exportAs: 'fabDialogFooter',
template: ` template: `
<DialogFooter <DialogFooter #reactNode [componentRef]="componentRef" [styles]="styles" [theme]="theme" [className]="className">
#reactNode
[componentRef]="componentRef"
[styles]="styles"
[theme]="theme"
[className]="className">
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</DialogFooter> </DialogFooter>
`, `,
@ -109,17 +89,12 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> { export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IDialogFooterProps['componentRef'];
componentRef?: IDialogFooterProps['componentRef']; @Input() styles?: IDialogFooterProps['styles'];
@Input() @Input() theme?: IDialogFooterProps['theme'];
styles?: IDialogFooterProps['styles']; @Input() className?: IDialogFooterProps['className'];
@Input()
theme?: IDialogFooterProps['theme'];
@Input()
className?: IDialogFooterProps['className'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);
@ -146,7 +121,8 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
[responsiveMode]="responsiveMode" [responsiveMode]="responsiveMode"
[closeButtonAriaLabel]="closeButtonAriaLabel" [closeButtonAriaLabel]="closeButtonAriaLabel"
[type]="type" [type]="type"
(onDismiss)="onDismiss.emit($event && $event.nativeEvent)"> (onDismiss)="onDismiss.emit($event && $event.nativeEvent)"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</DialogContent> </DialogContent>
`, `,
@ -154,40 +130,24 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> { export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IDialogContentProps['componentRef'];
componentRef?: IDialogContentProps['componentRef']; @Input() styles?: IDialogContentProps['styles'];
@Input() @Input() theme?: IDialogContentProps['theme'];
styles?: IDialogContentProps['styles']; @Input() isMultiline?: IDialogContentProps['isMultiline'];
@Input() @Input() showCloseButton?: IDialogContentProps['showCloseButton'];
theme?: IDialogContentProps['theme']; @Input() topButtonsProps?: IDialogContentProps['topButtonsProps'];
@Input() @Input() className?: IDialogContentProps['className'];
isMultiline?: IDialogContentProps['isMultiline']; @Input() subTextId?: IDialogContentProps['subTextId'];
@Input() @Input() subText?: IDialogContentProps['subText'];
showCloseButton?: IDialogContentProps['showCloseButton']; @Input() titleId?: IDialogContentProps['titleId'];
@Input() @Input() title?: IDialogContentProps['title'];
topButtonsProps?: IDialogContentProps['topButtonsProps']; @Input() responsiveMode?: IDialogContentProps['responsiveMode'];
@Input() @Input() closeButtonAriaLabel?: IDialogContentProps['closeButtonAriaLabel'];
className?: IDialogContentProps['className']; @Input() type?: IDialogContentProps['type'];
@Input()
subTextId?: IDialogContentProps['subTextId'];
@Input()
subText?: IDialogContentProps['subText'];
@Input()
titleId?: IDialogContentProps['titleId'];
@Input()
title?: IDialogContentProps['title'];
@Input()
responsiveMode?: IDialogContentProps['responsiveMode'];
@Input()
closeButtonAriaLabel?: IDialogContentProps['closeButtonAriaLabel'];
@Input()
type?: IDialogContentProps['type'];
@Output() @Output() readonly onDismiss = new EventEmitter<MouseEvent>();
readonly onDismiss = new EventEmitter<MouseEvent>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

21
libs/fabric/src/lib/components/divider/divider.component.ts
Просмотреть файл

@ -2,27 +2,30 @@
// Licensed under the MIT License. // Licensed under the MIT License.
import { ReactWrapperComponent } from '@angular-react/core'; import { ReactWrapperComponent } from '@angular-react/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Input,
Renderer2,
ViewChild,
} from '@angular/core';
import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider'; import { IVerticalDividerProps } from 'office-ui-fabric-react/lib/Divider';
@Component({ @Component({
selector: 'fab-vertical-divider', selector: 'fab-vertical-divider',
exportAs: 'fabVerticalDivider', exportAs: 'fabVerticalDivider',
template: ` template: `
<VerticalDivider <VerticalDivider #reactNode [getClassNames]="getClassNames"> </VerticalDivider>
#reactNode
[getClassNames]="getClassNames">
</VerticalDivider>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerProps> { export class FabDividerComponent extends ReactWrapperComponent<IVerticalDividerProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() getClassNames?: IVerticalDividerProps['getClassNames'];
getClassNames?: IVerticalDividerProps['getClassNames'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

24
libs/fabric/src/lib/components/fabric/fabric.component.ts
Просмотреть файл

@ -2,17 +2,22 @@
// Licensed under the MIT License. // Licensed under the MIT License.
import { ReactWrapperComponent } from '@angular-react/core'; import { ReactWrapperComponent } from '@angular-react/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Input,
Renderer2,
ViewChild,
} from '@angular/core';
import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric'; import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
@Component({ @Component({
selector: 'fab-fabric', selector: 'fab-fabric',
exportAs: 'fabFabric', exportAs: 'fabFabric',
template: ` template: `
<Fabric <Fabric #reactNode [componentRef]="componentRef" [theme]="theme">
#reactNode
[componentRef]="componentRef"
[theme]="theme">
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</Fabric> </Fabric>
`, `,
@ -20,13 +25,10 @@ import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> { export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IFabricProps['componentRef'];
componentRef?: IFabricProps['componentRef']; @Input() theme?: IFabricProps['theme'];
@Input()
theme?: IFabricProps['theme'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

36
libs/fabric/src/lib/components/group/directives/group-item.directive.ts
Просмотреть файл

@ -20,31 +20,19 @@ import { ChangeableItemDirective } from '../../core/shared/changeable-item.direc
@Directive({ selector: 'fab-group-item' }) @Directive({ selector: 'fab-group-item' })
export class GroupItemDirective extends ChangeableItemDirective<IGroup> export class GroupItemDirective extends ChangeableItemDirective<IGroup>
implements AfterContentInit, IChangeableItemsContainer<IGroup>, IGroup, OnDestroy { implements AfterContentInit, IChangeableItemsContainer<IGroup>, IGroup, OnDestroy {
@ContentChildren(GroupItemDirective) @ContentChildren(GroupItemDirective) readonly groupItemsDirectives: QueryList<GroupItemDirective>;
readonly groupItemsDirectives: QueryList<GroupItemDirective>;
@Input() @Input() name: IGroup['name'];
name: IGroup['name']; @Input() startIndex: IGroup['startIndex'];
@Input() @Input() count: IGroup['count'];
startIndex: IGroup['startIndex']; @Input() children?: IGroup['children'];
@Input() @Input() level?: IGroup['level'];
count: IGroup['count']; @Input() isCollapsed?: IGroup['isCollapsed'];
@Input() @Input() isShowingAll?: IGroup['isShowingAll'];
children?: IGroup['children']; @Input() isDropEnabled?: IGroup['isDropEnabled'];
@Input() @Input() data?: IGroup['data'];
level?: IGroup['level']; @Input() ariaLabel?: IGroup['ariaLabel'];
@Input() @Input() hasMoreData?: IGroup['hasMoreData'];
isCollapsed?: IGroup['isCollapsed'];
@Input()
isShowingAll?: IGroup['isShowingAll'];
@Input()
isDropEnabled?: IGroup['isDropEnabled'];
@Input()
data?: IGroup['data'];
@Input()
ariaLabel?: IGroup['ariaLabel'];
@Input()
hasMoreData?: IGroup['hasMoreData'];
@Output() @Output()
get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, IGroup>> { get onChildItemChanged(): EventEmitter<ItemChangedPayload<string, IGroup>> {

53
libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts
Просмотреть файл

@ -40,50 +40,33 @@ import { IListProps } from 'office-ui-fabric-react/lib/List';
[groupProps]="groupProps" [groupProps]="groupProps"
[RenderCell]="renderCell && onRenderCell" [RenderCell]="renderCell && onRenderCell"
[GroupExpandStateChanged]="onGroupExpandStateChangedHandler" [GroupExpandStateChanged]="onGroupExpandStateChangedHandler"
> >
</GroupedList> </GroupedList>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit { export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IGroupedListProps['componentRef'];
componentRef?: IGroupedListProps['componentRef']; @Input() className?: IGroupedListProps['className'];
@Input() @Input() dragDropEvents?: IGroupedListProps['dragDropEvents'];
className?: IGroupedListProps['className']; @Input() dragDropHelper?: IGroupedListProps['dragDropHelper'];
@Input() @Input() eventsToRegister?: IGroupedListProps['eventsToRegister'];
dragDropEvents?: IGroupedListProps['dragDropEvents']; @Input() groups?: IGroupedListProps['groups'];
@Input() @Input() items: IGroupedListProps['items'];
dragDropHelper?: IGroupedListProps['dragDropHelper']; @Input() listProps?: IGroupedListProps['listProps'];
@Input() @Input() selection?: IGroupedListProps['selection'];
eventsToRegister?: IGroupedListProps['eventsToRegister']; @Input() selectionMode?: IGroupedListProps['selectionMode'];
@Input() @Input() viewport?: IGroupedListProps['viewport'];
groups?: IGroupedListProps['groups']; @Input() usePageCache?: IGroupedListProps['usePageCache'];
@Input() @Input() shouldVirtualize?: (props: IListProps) => boolean;
items: IGroupedListProps['items']; @Input() groupProps?: IGroupRenderProps;
@Input()
listProps?: IGroupedListProps['listProps'];
@Input()
selection?: IGroupedListProps['selection'];
@Input()
selectionMode?: IGroupedListProps['selectionMode'];
@Input()
viewport?: IGroupedListProps['viewport'];
@Input()
usePageCache?: IGroupedListProps['usePageCache'];
@Input()
shouldVirtualize?: (props: IListProps) => boolean;
@Input()
groupProps?: IGroupRenderProps;
@Input() @Input() renderCell: InputRendererOptions<ICellRenderContext>;
renderCell: InputRendererOptions<ICellRenderContext>;
@Output() @Output() readonly onGroupExpandStateChanged = new EventEmitter<{ isSomeGroupExpanded: boolean }>();
readonly onGroupExpandStateChanged = new EventEmitter<{ isSomeGroupExpanded: boolean }>();
private _renderCell: JsxRenderFunc<ICellRenderContext>; private _renderCell: JsxRenderFunc<ICellRenderContext>;

51
libs/fabric/src/lib/components/hover-card/hover-card.component.ts
Просмотреть файл

@ -38,7 +38,8 @@ import { omit } from '../../utils/omit';
[setInitialFocus]="setInitialFocus" [setInitialFocus]="setInitialFocus"
[openHotKey]="openHotKey" [openHotKey]="openHotKey"
(onCardVisible)="onCardVisible.emit()" (onCardVisible)="onCardVisible.emit()"
(onCardHide)="onCardHide.emit()"> (onCardHide)="onCardHide.emit()"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</HoverCard> </HoverCard>
`, `,
@ -46,35 +47,21 @@ import { omit } from '../../utils/omit';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> { export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IHoverCardProps['componentRef'];
componentRef?: IHoverCardProps['componentRef']; @Input() setAriaDescribedBy?: IHoverCardProps['setAriaDescribedBy'];
@Input() @Input() cardOpenDelay?: IHoverCardProps['cardOpenDelay'];
setAriaDescribedBy?: IHoverCardProps['setAriaDescribedBy']; @Input() cardDismissDelay?: IHoverCardProps['cardDismissDelay'];
@Input() @Input() expandedCardOpenDelay?: IHoverCardProps['expandedCardOpenDelay'];
cardOpenDelay?: IHoverCardProps['cardOpenDelay']; @Input() sticky?: IHoverCardProps['sticky'];
@Input() @Input() instantOpenOnClick?: IHoverCardProps['instantOpenOnClick'];
cardDismissDelay?: IHoverCardProps['cardDismissDelay']; @Input() styles?: IHoverCardProps['styles'];
@Input() @Input() target?: IHoverCardProps['target'];
expandedCardOpenDelay?: IHoverCardProps['expandedCardOpenDelay']; @Input() trapFocus?: IHoverCardProps['trapFocus'];
@Input() @Input() shouldBlockHoverCard?: () => boolean; // Workaround for bug in the Fabric React types (() => void)
sticky?: IHoverCardProps['sticky']; @Input() setInitialFocus?: IHoverCardProps['setInitialFocus'];
@Input() @Input() openHotKey?: IHoverCardProps['openHotKey'];
instantOpenOnClick?: IHoverCardProps['instantOpenOnClick'];
@Input()
styles?: IHoverCardProps['styles'];
@Input()
target?: IHoverCardProps['target'];
@Input()
trapFocus?: IHoverCardProps['trapFocus'];
@Input()
shouldBlockHoverCard?: () => boolean; // Workaround for bug in the Fabric React types (() => void)
@Input()
setInitialFocus?: IHoverCardProps['setInitialFocus'];
@Input()
openHotKey?: IHoverCardProps['openHotKey'];
@Input() @Input()
set expandingCardOptions(value: IExpandingCardOptions) { set expandingCardOptions(value: IExpandingCardOptions) {
this._expandingCardOptions = value; this._expandingCardOptions = value;
@ -87,10 +74,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
return this._expandingCardOptions; return this._expandingCardOptions;
} }
@Output() @Output() readonly onCardVisible = new EventEmitter<void>();
readonly onCardVisible = new EventEmitter<void>(); @Output() readonly onCardHide = new EventEmitter<void>();
@Output()
readonly onCardHide = new EventEmitter<void>();
transformedExpandingCardProps: IExpandingCardProps; transformedExpandingCardProps: IExpandingCardProps;
private _expandingCardOptions: IExpandingCardOptions; private _expandingCardOptions: IExpandingCardOptions;

27
libs/fabric/src/lib/components/icon/icon.component.ts
Просмотреть файл

@ -24,31 +24,24 @@ import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
[iconType]="iconType" [iconType]="iconType"
[imageProps]="imageProps" [imageProps]="imageProps"
[imageErrorAs]="imageErrorAs" [imageErrorAs]="imageErrorAs"
[styles]="styles"> [styles]="styles"
>
</Icon> </Icon>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabIconComponent extends ReactWrapperComponent<IIconProps> { export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IIconProps['componentRef'];
componentRef?: IIconProps['componentRef'];
@Input() @Input() iconName?: IIconProps['iconName'];
iconName?: IIconProps['iconName']; @Input() ariaLabel?: IIconProps['ariaLabel'];
@Input() @Input() iconType?: IIconProps['iconType'];
ariaLabel?: IIconProps['ariaLabel']; @Input() imageProps?: IIconProps['imageProps'];
@Input() @Input() imageErrorAs?: IIconProps['imageErrorAs'];
iconType?: IIconProps['iconType']; @Input() styles?: IIconProps['styles'];
@Input()
imageProps?: IIconProps['imageProps'];
@Input()
imageErrorAs?: IIconProps['imageErrorAs'];
@Input()
styles?: IIconProps['styles'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true }); super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });

115
libs/fabric/src/lib/components/image/image.component.ts
Просмотреть файл

@ -2,82 +2,73 @@
// Licensed under the MIT License. // Licensed under the MIT License.
import { ReactWrapperComponent } from '@angular-react/core'; import { ReactWrapperComponent } from '@angular-react/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
Output,
Renderer2,
ViewChild,
} from '@angular/core';
import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image'; import { IImageProps, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
@Component({ @Component({
selector: 'fab-image', selector: 'fab-image',
exportAs: 'fabImage', exportAs: 'fabImage',
template: ` template: `
<Image <!-- prettier-ignore -->
#reactNode <Image
#reactNode
[alt]="alt" [alt]="alt"
[crossOrigin]="crossOrigin" [crossOrigin]="crossOrigin"
[height]="height" [height]="height"
[sizes]="sizes" [sizes]="sizes"
[src]="src" [src]="src"
[srcSet]="srcSet" [srcSet]="srcSet"
[useMap]="useMap" [useMap]="useMap"
[width]="width" [width]="width"
[styles]="styles"
[styles]="styles" [theme]="theme"
[theme]="theme" [className]="className"
[className]="className" [shouldFadeIn]="shouldFadeIn"
[shouldFadeIn]="shouldFadeIn" [shouldStartVisible]="shouldStartVisible"
[shouldStartVisible]="shouldStartVisible" [imageFit]="imageFit"
[imageFit]="imageFit" [errorSrc]="errorSrc"
[errorSrc]="errorSrc" [maximizeFrame]="maximizeFrame"
[maximizeFrame]="maximizeFrame" (onLoadingStateChange)="onLoadingStateChange.emit($event)"
(onLoadingStateChange)="onLoadingStateChange.emit($event)" [coverStyle]="coverStyle"
[coverStyle]="coverStyle"> >
</Image> </Image>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabImageComponent extends ReactWrapperComponent<IImageProps> { export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
@Input() @Input() alt?: IImageProps['alt'];
alt?: IImageProps['alt']; @Input() crossOrigin?: IImageProps['crossOrigin'];
@Input() @Input() height?: IImageProps['height'];
crossOrigin?: IImageProps['crossOrigin']; @Input() sizes?: IImageProps['sizes'];
@Input() @Input() src?: IImageProps['src'];
height?: IImageProps['height']; @Input() srcSet?: IImageProps['srcSet'];
@Input() @Input() useMap?: IImageProps['useMap'];
sizes?: IImageProps['sizes']; @Input() width?: IImageProps['width'];
@Input()
src?: IImageProps['src'];
@Input()
srcSet?: IImageProps['srcSet'];
@Input()
useMap?: IImageProps['useMap'];
@Input()
width?: IImageProps['width'];
@Input() @Input() styles?: IImageProps['styles'];
styles?: IImageProps['styles']; @Input() theme?: IImageProps['theme'];
@Input() @Input() className?: IImageProps['className'];
theme?: IImageProps['theme']; @Input() shouldFadeIn?: IImageProps['shouldFadeIn'];
@Input() @Input() shouldStartVisible?: IImageProps['shouldStartVisible'];
className?: IImageProps['className']; @Input() imageFit?: IImageProps['imageFit'];
@Input() @Input() errorSrc?: IImageProps['errorSrc'];
shouldFadeIn?: IImageProps['shouldFadeIn']; @Input() maximizeFrame?: IImageProps['maximizeFrame'];
@Input() @Input() coverStyle?: IImageProps['coverStyle'];
shouldStartVisible?: IImageProps['shouldStartVisible'];
@Input()
imageFit?: IImageProps['imageFit'];
@Input()
errorSrc?: IImageProps['errorSrc'];
@Input()
maximizeFrame?: IImageProps['maximizeFrame'];
@Input()
coverStyle?: IImageProps['coverStyle'];
@Output() @Output() readonly onLoadingStateChange = new EventEmitter<ImageLoadState>();
readonly onLoadingStateChange = new EventEmitter<ImageLoadState>();
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

132
libs/fabric/src/lib/components/link/link.component.ts
Просмотреть файл

@ -2,7 +2,15 @@
// Licensed under the MIT License. // Licensed under the MIT License.
import { ReactWrapperComponent } from '@angular-react/core'; import { ReactWrapperComponent } from '@angular-react/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, Renderer2, ViewChild } from '@angular/core'; import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Input,
Renderer2,
ViewChild,
} from '@angular/core';
import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link'; import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
@Component({ @Component({
@ -10,33 +18,32 @@ import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
exportAs: 'fabLink', exportAs: 'fabLink',
template: ` template: `
<Disguise <Disguise
#reactNode #reactNode
[disguiseRootAs]="LinkType" [disguiseRootAs]="LinkType"
[href]="href"
[href]="href" [type]="type"
[type]="type" [download]="download"
[download]="download" [hrefLang]="hrefLang"
[hrefLang]="hrefLang" [media]="media"
[media]="media" [rel]="rel"
[rel]="rel" [target]="target"
[target]="target" [autoFocus]="autoFocus"
[autoFocus]="autoFocus" [form]="form"
[form]="form" [formAction]="formAction"
[formAction]="formAction" [formEncType]="formEncType"
[formEncType]="formEncType" [formMethod]="formMethod"
[formMethod]="formMethod" [formNoValidate]="formNoValidate"
[formNoValidate]="formNoValidate" [formTarget]="formTarget"
[formTarget]="formTarget" [name]="name"
[name]="name" [value]="value"
[value]="value" [as]="linkAs"
[as]="linkAs" [componentRef]="componentRef"
[disabled]="disabled"
[componentRef]="componentRef" [styles]="styles"
[disabled]="disabled" [theme]="theme"
[styles]="styles" [keytipProps]="keytipProps"
[theme]="theme" >
[keytipProps]="keytipProps"> <ReactContent><ng-content></ng-content></ReactContent>
<ReactContent><ng-content></ng-content></ReactContent>
</Disguise> </Disguise>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
@ -45,54 +52,31 @@ import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> { export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
readonly LinkType: any = Link; readonly LinkType: any = Link;
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() href: ILinkProps['href'];
href: ILinkProps['href']; @Input() type?: ILinkProps['type'];
@Input() @Input() download?: ILinkProps['download'];
type?: ILinkProps['type']; @Input() hrefLang?: ILinkProps['hrefLang'];
@Input() @Input() media?: ILinkProps['media'];
download?: ILinkProps['download']; @Input() rel?: ILinkProps['rel'];
@Input() @Input() target?: ILinkProps['target'];
hrefLang?: ILinkProps['hrefLang']; @Input() autoFocus?: ILinkProps['autoFocus'];
@Input() @Input() form?: ILinkProps['form'];
media?: ILinkProps['media']; @Input() formAction?: ILinkProps['formAction'];
@Input() @Input() formEncType?: ILinkProps['formEncType'];
rel?: ILinkProps['rel']; @Input() formMethod?: ILinkProps['formMethod'];
@Input() @Input() formNoValidate?: ILinkProps['formNoValidate'];
target?: ILinkProps['target']; @Input() formTarget?: ILinkProps['formTarget'];
@Input() @Input() name?: ILinkProps['name'];
autoFocus?: ILinkProps['autoFocus']; @Input() value?: ILinkProps['value'];
@Input()
form?: ILinkProps['form'];
@Input()
formAction?: ILinkProps['formAction'];
@Input()
formEncType?: ILinkProps['formEncType'];
@Input()
formMethod?: ILinkProps['formMethod'];
@Input()
formNoValidate?: ILinkProps['formNoValidate'];
@Input()
formTarget?: ILinkProps['formTarget'];
@Input()
name?: ILinkProps['name'];
@Input()
value?: ILinkProps['value'];
@Input() @Input() componentRef?: ILinkProps['componentRef'];
componentRef?: ILinkProps['componentRef']; @Input() disabled?: ILinkProps['disabled'];
@Input() @Input() styles?: ILinkProps['styles'];
disabled?: ILinkProps['disabled']; @Input() theme?: ILinkProps['theme'];
@Input() @Input('as') linkAs?: string | React.ComponentClass | React.StatelessComponent;
styles?: ILinkProps['styles']; @Input() keytipProps?: ILinkProps['keytipProps'];
@Input()
theme?: ILinkProps['theme'];
@Input('as')
linkAs?: string | React.ComponentClass | React.StatelessComponent;
@Input()
keytipProps?: ILinkProps['keytipProps'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

33
libs/fabric/src/lib/components/marquee-selection/marquee-selection.component.ts
Просмотреть файл

@ -28,7 +28,8 @@ import { IMarqueeSelectionProps } from 'office-ui-fabric-react/lib/MarqueeSelect
[rootProps]="rootProps" [rootProps]="rootProps"
[styles]="styles" [styles]="styles"
[theme]="theme" [theme]="theme"
[ShouldStartSelection]="onShouldStartSelection"> [ShouldStartSelection]="onShouldStartSelection"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</MarqueeSelection> </MarqueeSelection>
`, `,
@ -36,27 +37,17 @@ import { IMarqueeSelectionProps } from 'office-ui-fabric-react/lib/MarqueeSelect
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> { export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IMarqueeSelectionProps['componentRef'];
componentRef?: IMarqueeSelectionProps['componentRef']; @Input() selection: IMarqueeSelectionProps['selection'];
@Input() @Input() rootProps?: IMarqueeSelectionProps['rootProps'];
selection: IMarqueeSelectionProps['selection']; @Input() onShouldStartSelection?: (ev: MouseEvent) => boolean;
@Input() @Input() isEnabled?: IMarqueeSelectionProps['isEnabled'];
rootProps?: IMarqueeSelectionProps['rootProps']; @Input() isDraggingConstrainedToRoot?: IMarqueeSelectionProps['isDraggingConstrainedToRoot'];
@Input() @Input() className?: IMarqueeSelectionProps['className'];
onShouldStartSelection?: (ev: MouseEvent) => boolean; @Input() theme?: IMarqueeSelectionProps['theme'];
@Input() @Input() styles?: IMarqueeSelectionProps['styles'];
isEnabled?: IMarqueeSelectionProps['isEnabled'];
@Input()
isDraggingConstrainedToRoot?: IMarqueeSelectionProps['isDraggingConstrainedToRoot'];
@Input()
className?: IMarqueeSelectionProps['className'];
@Input()
theme?: IMarqueeSelectionProps['theme'];
@Input()
styles?: IMarqueeSelectionProps['styles'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true }); super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true });

45
libs/fabric/src/lib/components/message-bar/message-bar.component.ts
Просмотреть файл

@ -34,7 +34,8 @@ import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
[theme]="theme" [theme]="theme"
[styles]="styles" [styles]="styles"
[Dismiss]="onDismissInternal" [Dismiss]="onDismissInternal"
[actions]="actions"> [actions]="actions"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</MessageBar> </MessageBar>
`, `,
@ -42,39 +43,25 @@ import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit { export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IMessageBarProps['componentRef'];
componentRef?: IMessageBarProps['componentRef']; @Input() messageBarType?: IMessageBarProps['messageBarType'];
@Input() @Input() ariaLabel?: IMessageBarProps['ariaLabel'];
messageBarType?: IMessageBarProps['messageBarType']; @Input() isMultiline?: IMessageBarProps['isMultiline'];
@Input() @Input() dismissButtonAriaLabel?: IMessageBarProps['dismissButtonAriaLabel'];
ariaLabel?: IMessageBarProps['ariaLabel']; @Input() truncated?: IMessageBarProps['truncated'];
@Input() @Input() overflowButtonAriaLabel?: IMessageBarProps['overflowButtonAriaLabel'];
isMultiline?: IMessageBarProps['isMultiline']; @Input() className?: IMessageBarProps['className'];
@Input() @Input() theme?: IMessageBarProps['theme'];
dismissButtonAriaLabel?: IMessageBarProps['dismissButtonAriaLabel']; @Input() styles?: IMessageBarProps['styles'];
@Input()
truncated?: IMessageBarProps['truncated'];
@Input()
overflowButtonAriaLabel?: IMessageBarProps['overflowButtonAriaLabel'];
@Input()
className?: IMessageBarProps['className'];
@Input()
theme?: IMessageBarProps['theme'];
@Input()
styles?: IMessageBarProps['styles'];
@Input() @Input() renderActions?: InputRendererOptions<{}>;
renderActions?: InputRendererOptions<{}>;
// Non-React prop, used together with onDismiss to allow it to be an Output EventEmitter. // Non-React prop, used together with onDismiss to allow it to be an Output EventEmitter.
@Input() @Input() dismissable?: boolean = null;
dismissable?: boolean = null;
@Output() @Output() readonly onDismiss = new EventEmitter<MouseEvent>();
readonly onDismiss = new EventEmitter<MouseEvent>();
actions: JSX.Element; actions: JSX.Element;

66
libs/fabric/src/lib/components/modal/modal.component.ts
Просмотреть файл

@ -23,16 +23,13 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
template: ` template: `
<Modal <Modal
#reactNode #reactNode
[responsiveMode]="responsiveMode" [responsiveMode]="responsiveMode"
[elementToFocusOnDismiss]="elementToFocusOnDismiss" [elementToFocusOnDismiss]="elementToFocusOnDismiss"
[ignoreExternalFocusing]="ignoreExternalFocusing" [ignoreExternalFocusing]="ignoreExternalFocusing"
[forceFocusInsideTrap]="forceFocusInsideTrap" [forceFocusInsideTrap]="forceFocusInsideTrap"
[firstFocusableSelector]="firstFocusableSelector" [firstFocusableSelector]="firstFocusableSelector"
[closeButtonAriaLabel]="closeButtonAriaLabel" [closeButtonAriaLabel]="closeButtonAriaLabel"
[isClickableOutsideFocusTrap]="isClickableOutsideFocusTrap" [isClickableOutsideFocusTrap]="isClickableOutsideFocusTrap"
[componentRef]="componentRef" [componentRef]="componentRef"
[isOpen]="isOpen" [isOpen]="isOpen"
[isDarkOverlay]="isDarkOverlay" [isDarkOverlay]="isDarkOverlay"
@ -44,7 +41,8 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
[subtitleAriaId]="subtitleAriaId" [subtitleAriaId]="subtitleAriaId"
[Dismiss]="onDismissHandler" [Dismiss]="onDismissHandler"
(onLayerDidMount)="onLayerDidMount.emit()" (onLayerDidMount)="onLayerDidMount.emit()"
(onDismissed)="onDismissed.emit()"> (onDismissed)="onDismissed.emit()"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</Modal> </Modal>
`, `,
@ -53,50 +51,30 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
}) })
export class FabModalComponent extends ReactWrapperComponent<IModalProps> export class FabModalComponent extends ReactWrapperComponent<IModalProps>
implements IWithResponsiveModeState, IAccessiblePopupProps { implements IWithResponsiveModeState, IAccessiblePopupProps {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() responsiveMode?: IModalProps['responsiveMode'];
responsiveMode?: IModalProps['responsiveMode'];
@Input() @Input() elementToFocusOnDismiss?: IModalProps['elementToFocusOnDismiss'];
elementToFocusOnDismiss?: IModalProps['elementToFocusOnDismiss']; @Input() ignoreExternalFocusing?: IModalProps['ignoreExternalFocusing'];
@Input() @Input() forceFocusInsideTrap?: IModalProps['forceFocusInsideTrap'];
ignoreExternalFocusing?: IModalProps['ignoreExternalFocusing']; @Input() firstFocusableSelector?: IModalProps['firstFocusableSelector'];
@Input() @Input() closeButtonAriaLabel?: IModalProps['closeButtonAriaLabel'];
forceFocusInsideTrap?: IModalProps['forceFocusInsideTrap']; @Input() isClickableOutsideFocusTrap?: IModalProps['isClickableOutsideFocusTrap'];
@Input()
firstFocusableSelector?: IModalProps['firstFocusableSelector'];
@Input()
closeButtonAriaLabel?: IModalProps['closeButtonAriaLabel'];
@Input()
isClickableOutsideFocusTrap?: IModalProps['isClickableOutsideFocusTrap'];
@Input() @Input() componentRef?: IModalProps['componentRef'];
componentRef?: IModalProps['componentRef']; @Input() isOpen?: IModalProps['isOpen'];
@Input() @Input() isDarkOverlay?: IModalProps['isDarkOverlay'];
isOpen?: IModalProps['isOpen']; @Input() isBlocking?: IModalProps['isBlocking'];
@Input() @Input() className?: IModalProps['className'];
isDarkOverlay?: IModalProps['isDarkOverlay']; @Input() containerClassName?: IModalProps['containerClassName'];
@Input() @Input() scrollableContentClassName?: IModalProps['scrollableContentClassName'];
isBlocking?: IModalProps['isBlocking']; @Input() titleAriaId?: IModalProps['titleAriaId'];
@Input() @Input() subtitleAriaId?: IModalProps['subtitleAriaId'];
className?: IModalProps['className'];
@Input()
containerClassName?: IModalProps['containerClassName'];
@Input()
scrollableContentClassName?: IModalProps['scrollableContentClassName'];
@Input()
titleAriaId?: IModalProps['titleAriaId'];
@Input()
subtitleAriaId?: IModalProps['subtitleAriaId'];
@Output() @Output() readonly onLayerDidMount = new EventEmitter<void>();
readonly onLayerDidMount = new EventEmitter<void>(); @Output() readonly onDismiss = new EventEmitter<MouseEvent>();
@Output() @Output() readonly onDismissed = new EventEmitter<void>();
readonly onDismiss = new EventEmitter<MouseEvent>();
@Output()
readonly onDismissed = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer); super(elementRef, changeDetectorRef, renderer);

98
libs/fabric/src/lib/components/panel/panel.component.ts
Просмотреть файл

@ -52,79 +52,49 @@ import { IPanelHeaderRenderer, IPanelProps } from 'office-ui-fabric-react/lib/Pa
[RenderFooterContent]="renderFooterContent && onRenderFooterContent" [RenderFooterContent]="renderFooterContent && onRenderFooterContent"
[Dismiss]="onDismissHandler" [Dismiss]="onDismissHandler"
(onDismissed)="onDismissed.emit($event)" (onDismissed)="onDismissed.emit($event)"
(onLightDismissClick)="onLightDismissClick.emit($event)"> (onLightDismissClick)="onLightDismissClick.emit($event)"
<ReactContent><ng-content></ng-content></ReactContent> >
<ReactContent><ng-content></ng-content></ReactContent>
</Panel> </Panel>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit { export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IPanelProps['componentRef'];
componentRef?: IPanelProps['componentRef']; @Input() isOpen?: IPanelProps['isOpen'];
@Input() @Input() hasCloseButton?: IPanelProps['hasCloseButton'];
isOpen?: IPanelProps['isOpen']; @Input() isLightDismiss?: IPanelProps['isLightDismiss'];
@Input() @Input() isHiddenOnDismiss?: IPanelProps['isHiddenOnDismiss'];
hasCloseButton?: IPanelProps['hasCloseButton']; @Input() isBlocking?: IPanelProps['isBlocking'];
@Input() @Input() isFooterAtBottom?: IPanelProps['isFooterAtBottom'];
isLightDismiss?: IPanelProps['isLightDismiss']; @Input() headerText?: IPanelProps['headerText'];
@Input() @Input() styles?: IPanelProps['styles'];
isHiddenOnDismiss?: IPanelProps['isHiddenOnDismiss']; @Input() theme?: IPanelProps['theme'];
@Input() @Input() className?: IPanelProps['className'];
isBlocking?: IPanelProps['isBlocking']; @Input() type?: IPanelProps['type'];
@Input() @Input() customWidth?: IPanelProps['customWidth'];
isFooterAtBottom?: IPanelProps['isFooterAtBottom']; @Input() closeButtonAriaLabel?: IPanelProps['closeButtonAriaLabel'];
@Input() @Input() headerClassName?: IPanelProps['headerClassName'];
headerText?: IPanelProps['headerText']; @Input() elementToFocusOnDismiss?: IPanelProps['elementToFocusOnDismiss'];
@Input() @Input() ignoreExternalFocusing?: IPanelProps['ignoreExternalFocusing'];
styles?: IPanelProps['styles']; @Input() forceFocusInsideTrap?: IPanelProps['forceFocusInsideTrap'];
@Input() @Input() firstFocusableSelector?: IPanelProps['firstFocusableSelector'];
theme?: IPanelProps['theme']; @Input() focusTrapZoneProps?: IPanelProps['focusTrapZoneProps'];
@Input() @Input() layerProps?: IPanelProps['layerProps'];
className?: IPanelProps['className']; @Input() componentId?: IPanelProps['componentId'];
@Input()
type?: IPanelProps['type'];
@Input()
customWidth?: IPanelProps['customWidth'];
@Input()
closeButtonAriaLabel?: IPanelProps['closeButtonAriaLabel'];
@Input()
headerClassName?: IPanelProps['headerClassName'];
@Input()
elementToFocusOnDismiss?: IPanelProps['elementToFocusOnDismiss'];
@Input()
ignoreExternalFocusing?: IPanelProps['ignoreExternalFocusing'];
@Input()
forceFocusInsideTrap?: IPanelProps['forceFocusInsideTrap'];
@Input()
firstFocusableSelector?: IPanelProps['firstFocusableSelector'];
@Input()
focusTrapZoneProps?: IPanelProps['focusTrapZoneProps'];
@Input()
layerProps?: IPanelProps['layerProps'];
@Input()
componentId?: IPanelProps['componentId'];
@Input() @Input() renderNavigation?: InputRendererOptions<IPanelProps>;
renderNavigation?: InputRendererOptions<IPanelProps>; @Input() renderHeader?: InputRendererOptions<IPanelHeaderRenderContext>;
@Input() @Input() renderBody?: InputRendererOptions<IPanelProps>;
renderHeader?: InputRendererOptions<IPanelHeaderRenderContext>; @Input() renderFooter?: InputRendererOptions<IPanelProps>;
@Input() @Input() renderFooterContent?: InputRendererOptions<IPanelProps>;
renderBody?: InputRendererOptions<IPanelProps>;
@Input()
renderFooter?: InputRendererOptions<IPanelProps>;
@Input()
renderFooterContent?: InputRendererOptions<IPanelProps>;
@Output() @Output() readonly onLightDismissClick = new EventEmitter<void>();
readonly onLightDismissClick = new EventEmitter<void>(); @Output() readonly onDismiss = new EventEmitter<{ ev?: Event }>();
@Output() @Output() readonly onDismissed = new EventEmitter<void>();
readonly onDismiss = new EventEmitter<{ ev?: Event }>();
@Output()
readonly onDismissed = new EventEmitter<void>();
private _renderHeader: JsxRenderFunc<IPanelHeaderRenderContext>; private _renderHeader: JsxRenderFunc<IPanelHeaderRenderContext>;
onRenderNavigation: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element; onRenderNavigation: (props?: IPanelProps, defaultRender?: JsxRenderFunc<IPanelProps>) => JSX.Element;

108
libs/fabric/src/lib/components/persona/persona.component.ts
Просмотреть файл

@ -20,50 +20,29 @@ import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from 'office-ui
export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps> extends ReactWrapperComponent<TProps> export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps> extends ReactWrapperComponent<TProps>
implements OnInit { implements OnInit {
@Input() @Input() text?: IPersonaProps['text'];
text?: IPersonaProps['text']; @Input() size?: IPersonaProps['size'];
@Input() @Input() imageShouldFadeIn?: IPersonaProps['imageShouldFadeIn'];
size?: IPersonaProps['size']; @Input() imageShouldStartVisible?: IPersonaProps['imageShouldStartVisible'];
@Input() @Input() imageUrl?: IPersonaProps['imageUrl'];
imageShouldFadeIn?: IPersonaProps['imageShouldFadeIn']; @Input() imageAlt?: IPersonaProps['imageAlt'];
@Input() @Input() imageInitials?: IPersonaProps['imageInitials'];
imageShouldStartVisible?: IPersonaProps['imageShouldStartVisible']; @Input() allowPhoneInitials?: IPersonaProps['allowPhoneInitials'];
@Input() @Input() initialsColor?: IPersonaProps['initialsColor'];
imageUrl?: IPersonaProps['imageUrl']; @Input() presence?: IPersonaProps['presence'];
@Input() @Input() secondaryText?: IPersonaProps['secondaryText'];
imageAlt?: IPersonaProps['imageAlt']; @Input() tertiaryText?: IPersonaProps['tertiaryText'];
@Input() @Input() optionalText?: IPersonaProps['optionalText'];
imageInitials?: IPersonaProps['imageInitials']; @Input() hidePersonaDetails?: IPersonaProps['hidePersonaDetails'];
@Input() @Input() showUnknownPersonaCoin?: IPersonaProps['showUnknownPersonaCoin'];
allowPhoneInitials?: IPersonaProps['allowPhoneInitials']; @Input() showInitialsUntilImageLoads?: IPersonaProps['showInitialsUntilImageLoads'];
@Input() @Input() coinSize?: IPersonaProps['coinSize'];
initialsColor?: IPersonaProps['initialsColor']; @Input() theme?: IPersonaProps['theme'];
@Input()
presence?: IPersonaProps['presence'];
@Input()
secondaryText?: IPersonaProps['secondaryText'];
@Input()
tertiaryText?: IPersonaProps['tertiaryText'];
@Input()
optionalText?: IPersonaProps['optionalText'];
@Input()
hidePersonaDetails?: IPersonaProps['hidePersonaDetails'];
@Input()
showUnknownPersonaCoin?: IPersonaProps['showUnknownPersonaCoin'];
@Input()
showInitialsUntilImageLoads?: IPersonaProps['showInitialsUntilImageLoads'];
@Input()
coinSize?: IPersonaProps['coinSize'];
@Input()
theme?: IPersonaProps['theme'];
@Input() @Input() renderCoin?: InputRendererOptions<IPersonaSharedProps>;
renderCoin?: InputRendererOptions<IPersonaSharedProps>; @Input() renderInitials?: InputRendererOptions<IPersonaSharedProps>;
@Input()
renderInitials?: InputRendererOptions<IPersonaSharedProps>;
@Output() @Output() readonly onPhotoLoadingStateChange = new EventEmitter<ImageLoadState>();
readonly onPhotoLoadingStateChange = new EventEmitter<ImageLoadState>();
onRenderCoin: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc<IPersonaSharedProps>) => JSX.Element; onRenderCoin: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc<IPersonaSharedProps>) => JSX.Element;
onRenderInitials: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc<IPersonaSharedProps>) => JSX.Element; onRenderInitials: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc<IPersonaSharedProps>) => JSX.Element;
@ -112,33 +91,25 @@ export abstract class FabPersonaBaseComponent<TProps extends IPersonaSharedProps
[RenderSecondaryText]="renderSecondaryText && onRenderSecondaryText" [RenderSecondaryText]="renderSecondaryText && onRenderSecondaryText"
[RenderTertiaryText]="renderTertiaryText && onRenderTertiaryText" [RenderTertiaryText]="renderTertiaryText && onRenderTertiaryText"
[RenderOptionalText]="renderOptionalText && onRenderOptionalText" [RenderOptionalText]="renderOptionalText && onRenderOptionalText"
(onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)"> (onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)"
>
</Persona> </Persona>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit { export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IPersonaProps['componentRef'];
componentRef?: IPersonaProps['componentRef']; @Input() className?: IPersonaProps['className'];
@Input() @Input() styles?: IPersonaProps['styles'];
className?: IPersonaProps['className']; @Input() coinProps?: IPersonaProps['coinProps'];
@Input()
styles?: IPersonaProps['styles'];
@Input()
coinProps?: IPersonaProps['coinProps'];
@Input() @Input() renderPrimaryText?: InputRendererOptions<IPersonaProps>;
renderPrimaryText?: InputRendererOptions<IPersonaProps>; @Input() renderSecondaryText?: InputRendererOptions<IPersonaProps>;
@Input() @Input() renderTertiaryText?: InputRendererOptions<IPersonaProps>;
renderSecondaryText?: InputRendererOptions<IPersonaProps>; @Input() renderOptionalText?: InputRendererOptions<IPersonaProps>;
@Input()
renderTertiaryText?: InputRendererOptions<IPersonaProps>;
@Input()
renderOptionalText?: InputRendererOptions<IPersonaProps>;
onRenderPrimaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc<IPersonaProps>) => JSX.Element; onRenderPrimaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc<IPersonaProps>) => JSX.Element;
onRenderSecondaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc<IPersonaProps>) => JSX.Element; onRenderSecondaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc<IPersonaProps>) => JSX.Element;
@ -188,22 +159,19 @@ export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps>
[className]="className" [className]="className"
[RenderInitials]="renderInitials && onRenderInitials" [RenderInitials]="renderInitials && onRenderInitials"
[RenderCoin]="renderCoin && onRenderCoin" [RenderCoin]="renderCoin && onRenderCoin"
(onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)"> (onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)"
>
</PersonaCoin> </PersonaCoin>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit { export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IPersonaCoinProps['componentRef'];
componentRef?: IPersonaCoinProps['componentRef']; @Input() styles?: IPersonaCoinProps['styles'];
@Input() @Input() className?: IPersonaCoinProps['className'];
styles?: IPersonaCoinProps['styles'];
@Input()
className?: IPersonaCoinProps['className'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

78
libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts
Просмотреть файл

@ -15,44 +15,25 @@ import omit from '../../../utils/omit';
export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>> export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>>
extends ReactWrapperComponent<TProps> extends ReactWrapperComponent<TProps>
implements OnInit { implements OnInit {
@Input() @Input() componentRef?: IBasePickerProps<T>['componentRef'];
componentRef?: IBasePickerProps<T>['componentRef']; @Input() resolveDelay?: IBasePickerProps<T>['resolveDelay'];
@Input() @Input() defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
resolveDelay?: IBasePickerProps<T>['resolveDelay']; @Input() getTextFromItem?: IBasePickerProps<T>['getTextFromItem'];
@Input() @Input() className?: IBasePickerProps<T>['className'];
defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems']; @Input() searchingText?: IBasePickerProps<T>['searchingText'];
@Input() @Input() disabled?: IBasePickerProps<T>['disabled'];
getTextFromItem?: IBasePickerProps<T>['getTextFromItem']; @Input() itemLimit?: IBasePickerProps<T>['itemLimit'];
@Input() @Input() createGenericItem?: IBasePickerProps<T>['createGenericItem'];
className?: IBasePickerProps<T>['className']; @Input() removeButtonAriaLabel?: IBasePickerProps<T>['removeButtonAriaLabel'];
@Input() @Input() selectedItems?: IBasePickerProps<T>['selectedItems'];
searchingText?: IBasePickerProps<T>['searchingText']; @Input() enableSelectedSuggestionAlert?: IBasePickerProps<T>['enableSelectedSuggestionAlert'];
@Input() @Input() inputProps?: IBasePickerProps<T>['inputProps'];
disabled?: IBasePickerProps<T>['disabled']; @Input('itemSelected') onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;
@Input() @Input('inputChange') onInputChange?: (input: string) => string;
itemLimit?: IBasePickerProps<T>['itemLimit']; @Input('emptyInputFocus') onEmptyInputFocus?: IBasePickerProps<T>['onEmptyInputFocus'];
@Input() @Input('resolveSuggestions') onResolveSuggestions: IBasePickerProps<T>['onResolveSuggestions'];
createGenericItem?: IBasePickerProps<T>['createGenericItem']; @Input('getMoreResults') onGetMoreResults?: IBasePickerProps<T>['onGetMoreResults'];
@Input() @Input('validateInput') onValidateInput?: IBasePickerProps<T>['onValidateInput'];
removeButtonAriaLabel?: IBasePickerProps<T>['removeButtonAriaLabel'];
@Input()
selectedItems?: IBasePickerProps<T>['selectedItems'];
@Input()
enableSelectedSuggestionAlert?: IBasePickerProps<T>['enableSelectedSuggestionAlert'];
@Input()
inputProps?: IBasePickerProps<T>['inputProps'];
@Input('itemSelected')
onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;
@Input('inputChange')
onInputChange?: (input: string) => string;
@Input('emptyInputFocus')
onEmptyInputFocus?: IBasePickerProps<T>['onEmptyInputFocus'];
@Input('resolveSuggestions')
onResolveSuggestions: IBasePickerProps<T>['onResolveSuggestions'];
@Input('getMoreResults')
onGetMoreResults?: IBasePickerProps<T>['onGetMoreResults'];
@Input('validateInput')
onValidateInput?: IBasePickerProps<T>['onValidateInput'];
@Input() @Input()
set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) { set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) {
@ -67,21 +48,14 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
return this._pickerSuggestionsOptions; return this._pickerSuggestionsOptions;
} }
@Input() @Input() renderItem?: InputRendererOptions<IPickerItemProps<T>>;
renderItem?: InputRendererOptions<IPickerItemProps<T>>; @Input() renderSuggestionsItem?: InputRendererOptions<IRenderSuggestionItemContext<T>>;
@Input()
renderSuggestionsItem?: InputRendererOptions<IRenderSuggestionItemContext<T>>;
@Output() @Output() readonly onChange = new EventEmitter<{ items?: T[] }>();
readonly onChange = new EventEmitter<{ items?: T[] }>(); @Output() readonly onFocus = new EventEmitter<FocusEvent>();
@Output() @Output() readonly onBlur = new EventEmitter<FocusEvent>();
readonly onFocus = new EventEmitter<FocusEvent>(); @Output() readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
@Output() @Output() readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
readonly onBlur = new EventEmitter<FocusEvent>();
@Output()
readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
@Output()
readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
pickerSuggestionsProps: IBasePickerSuggestionsProps; pickerSuggestionsProps: IBasePickerSuggestionsProps;
onRenderSuggestionsItem: ( onRenderSuggestionsItem: (

11
libs/fabric/src/lib/components/pickers/tag-picker/tag-picker.component.ts
Просмотреть файл

@ -19,7 +19,6 @@ import { FabBasePickerComponent } from '../base-picker/base-picker.component';
template: ` template: `
<TagPicker <TagPicker
#reactNode #reactNode
[componentRef]="componentRef" [componentRef]="componentRef"
[resolveDelay]="resolveDelay" [resolveDelay]="resolveDelay"
[defaultSelectedItems]="defaultSelectedItems" [defaultSelectedItems]="defaultSelectedItems"
@ -40,23 +39,21 @@ import { FabBasePickerComponent } from '../base-picker/base-picker.component';
[ResolveSuggestions]="onResolveSuggestions" [ResolveSuggestions]="onResolveSuggestions"
[GetMoreResults]="onGetMoreResults" [GetMoreResults]="onGetMoreResults"
[ValidateInput]="onValidateInput" [ValidateInput]="onValidateInput"
[RenderItem]="renderItem && onRenderItem"
[RenderItem]="renderItem &&onRenderItem"
[RenderSuggestionsItem]="renderSuggestionsItem && onRenderSuggestionsItem" [RenderSuggestionsItem]="renderSuggestionsItem && onRenderSuggestionsItem"
[Change]="onChangeHandler" [Change]="onChangeHandler"
[Focus]="onFocusHandler" [Focus]="onFocusHandler"
[Blur]="onBlurHandler" [Blur]="onBlurHandler"
[Dismiss]="onDismissHandler" [Dismiss]="onDismissHandler"
[RemoveSuggestion]="onRemoveSuggestionHandler"> [RemoveSuggestion]="onRemoveSuggestionHandler"
>
</TagPicker> </TagPicker>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPickerProps> { export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPickerProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) {
super(elementRef, changeDetectorRef, renderer, ngZone); super(elementRef, changeDetectorRef, renderer, ngZone);

92
libs/fabric/src/lib/components/pivot/pivot.component.ts
Просмотреть файл

@ -34,7 +34,8 @@ import * as React from 'react';
[itemCount]="itemCount" [itemCount]="itemCount"
[itemIcon]="itemIcon" [itemIcon]="itemIcon"
[keytipProps]="keytipProps" [keytipProps]="keytipProps"
[RenderItemLink]="renderItemLink && onRenderItemLink"> [RenderItemLink]="renderItemLink && onRenderItemLink"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</PivotItem> </PivotItem>
`, `,
@ -42,44 +43,25 @@ import * as React from 'react';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps> implements OnInit { export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps> implements OnInit {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@passProp() @Input() @passProp() componentRef?: IPivotItemProps['componentRef'];
@Input()
componentRef?: IPivotItemProps['componentRef'];
@passProp() @Input() @passProp() headerText?: IPivotItemProps['headerText'];
@Input()
headerText?: IPivotItemProps['headerText'];
@passProp() @Input() @passProp() headerButtonProps?: IPivotItemProps['headerButtonProps'];
@Input()
headerButtonProps?: IPivotItemProps['headerButtonProps'];
@passProp() @Input() @passProp() itemKey?: IPivotItemProps['itemKey'];
@Input()
itemKey?: IPivotItemProps['itemKey'];
@passProp() @Input() @passProp() ariaLabel?: IPivotItemProps['ariaLabel'];
@Input()
ariaLabel?: IPivotItemProps['ariaLabel'];
@passProp() @Input() @passProp() itemCount?: IPivotItemProps['itemCount'];
@Input()
itemCount?: IPivotItemProps['itemCount'];
@passProp() @Input() @passProp() itemIcon?: IPivotItemProps['itemIcon'];
@Input()
itemIcon?: IPivotItemProps['itemIcon'];
@passProp() @Input() @passProp() keytipProps?: IPivotItemProps['keytipProps'];
@Input()
keytipProps?: IPivotItemProps['keytipProps'];
@passProp() @Input() @passProp() renderItemLink?: InputRendererOptions<IPivotItemProps>;
@Input()
renderItemLink?: InputRendererOptions<IPivotItemProps>;
onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element; onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element;
@ -101,7 +83,6 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
[disguiseRootAs]="PivotType" [disguiseRootAs]="PivotType"
[disguiseChildrenAs]="PivotItemType" [disguiseChildrenAs]="PivotItemType"
[ngChildComponents]="pivotItems?.toArray()" [ngChildComponents]="pivotItems?.toArray()"
[componentRef]="componentRef" [componentRef]="componentRef"
[styles]="styles" [styles]="styles"
[theme]="theme" [theme]="theme"
@ -113,10 +94,9 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
[linkFormat]="linkFormat" [linkFormat]="linkFormat"
[headersOnly]="headersOnly" [headersOnly]="headersOnly"
[getTabId]="getTabId" [getTabId]="getTabId"
[LinkClick]="onLinkClickHandler"> [LinkClick]="onLinkClickHandler"
<ReactContent> >
<ng-content select="fab-pivot-item"></ng-content> <ReactContent><ng-content select="fab-pivot-item"></ng-content></ReactContent>
</ReactContent>
</Disguise> </Disguise>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
@ -126,37 +106,23 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
readonly PivotType = Pivot; readonly PivotType = Pivot;
readonly PivotItemType = PivotItem; readonly PivotItemType = PivotItem;
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@ContentChildren(FabPivotItemComponent) @ContentChildren(FabPivotItemComponent) pivotItems: QueryList<FabPivotItemComponent>;
pivotItems: QueryList<FabPivotItemComponent>;
@Input() @Input() componentRef?: IPivotProps['componentRef'];
componentRef?: IPivotProps['componentRef']; @Input() styles?: IPivotProps['styles'];
@Input() @Input() theme?: IPivotProps['theme'];
styles?: IPivotProps['styles']; @Input() className?: IPivotProps['className'];
@Input() @Input() initialSelectedIndex?: IPivotProps['initialSelectedIndex'];
theme?: IPivotProps['theme']; @Input() initialSelectedKey?: IPivotProps['initialSelectedKey'];
@Input() @Input() selectedKey?: IPivotProps['selectedKey'];
className?: IPivotProps['className']; @Input() linkSize?: IPivotProps['linkSize'];
@Input() @Input() linkFormat?: IPivotProps['linkFormat'];
initialSelectedIndex?: IPivotProps['initialSelectedIndex']; @Input() headersOnly?: IPivotProps['headersOnly'];
@Input() @Input() getTabId?: IPivotProps['getTabId'];
initialSelectedKey?: IPivotProps['initialSelectedKey'];
@Input()
selectedKey?: IPivotProps['selectedKey'];
@Input()
linkSize?: IPivotProps['linkSize'];
@Input()
linkFormat?: IPivotProps['linkFormat'];
@Input()
headersOnly?: IPivotProps['headersOnly'];
@Input()
getTabId?: IPivotProps['getTabId'];
@Output() @Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true }); super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });

64
libs/fabric/src/lib/components/search-box/search-box.component.ts
Просмотреть файл

@ -38,34 +38,25 @@ import omit from '../../utils/omit';
[Change]="onChangeHandler" [Change]="onChangeHandler"
[Search]="onSearchHandler" [Search]="onSearchHandler"
[Clear]="onClearHandler" [Clear]="onClearHandler"
[Escape]="onEscapeHandler"> [Escape]="onEscapeHandler"
>
</SearchBox> </SearchBox>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> { export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: ISearchBoxProps['componentRef'];
componentRef?: ISearchBoxProps['componentRef']; @Input() placeholder?: ISearchBoxProps['placeholder'];
@Input() @Input() value?: ISearchBoxProps['value'];
placeholder?: ISearchBoxProps['placeholder']; @Input() className?: ISearchBoxProps['className'];
@Input() @Input() ariaLabel?: ISearchBoxProps['ariaLabel'];
value?: ISearchBoxProps['value']; @Input() underlined?: ISearchBoxProps['underlined'];
@Input() @Input() theme?: ISearchBoxProps['theme'];
className?: ISearchBoxProps['className']; @Input() styles?: ISearchBoxProps['styles'];
@Input() @Input() disableAnimation?: ISearchBoxProps['disableAnimation'];
ariaLabel?: ISearchBoxProps['ariaLabel'];
@Input()
underlined?: ISearchBoxProps['underlined'];
@Input()
theme?: ISearchBoxProps['theme'];
@Input()
styles?: ISearchBoxProps['styles'];
@Input()
disableAnimation?: ISearchBoxProps['disableAnimation'];
@Input() @Input()
set clearButtonOptions(value: IButtonOptions) { set clearButtonOptions(value: IButtonOptions) {
this._clearButtonOptions = value; this._clearButtonOptions = value;
@ -79,17 +70,12 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
return this._clearButtonOptions; return this._clearButtonOptions;
} }
@Input() @Input() iconProps?: ISearchBoxProps['iconProps'];
iconProps?: ISearchBoxProps['iconProps'];
@Output() @Output() readonly onChange = new EventEmitter<{ newValue: any }>();
readonly onChange = new EventEmitter<{ newValue: any }>(); @Output() readonly onSearch = new EventEmitter<{ newValue: any }>();
@Output() @Output() readonly onClear = new EventEmitter<{ ev?: any }>();
readonly onSearch = new EventEmitter<{ newValue: any }>(); @Output() readonly onEscape = new EventEmitter<{ ev?: any }>();
@Output()
readonly onClear = new EventEmitter<{ ev?: any }>();
@Output()
readonly onEscape = new EventEmitter<{ ev?: any }>();
clearButtonProps: IButtonProps; clearButtonProps: IButtonProps;
@ -168,14 +154,14 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
export interface IButtonOptions export interface IButtonOptions
extends Omit< extends Omit<
IButtonProps, IButtonProps,
| 'onRenderIcon' | 'onRenderIcon'
| 'onRenderText' | 'onRenderText'
| 'onRenderDescription' | 'onRenderDescription'
| 'onRenderAriaDescription' | 'onRenderAriaDescription'
| 'onRenderChildren' | 'onRenderChildren'
| 'onRenderMenuIcon' | 'onRenderMenuIcon'
> { > {
readonly renderIcon: InputRendererOptions<IButtonProps>; readonly renderIcon: InputRendererOptions<IButtonProps>;
readonly renderText: InputRendererOptions<IButtonProps>; readonly renderText: InputRendererOptions<IButtonProps>;
readonly renderDescription: InputRendererOptions<IButtonProps>; readonly renderDescription: InputRendererOptions<IButtonProps>;

56
libs/fabric/src/lib/components/shimmer/shimmer.component.ts
Просмотреть файл

@ -29,7 +29,8 @@ import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
[styles]="styles" [styles]="styles"
[className]="className" [className]="className"
[theme]="theme" [theme]="theme"
[customElementsGroup]="customElementsGroup"> [customElementsGroup]="customElementsGroup"
>
<ReactContent><ng-content></ng-content></ReactContent> <ReactContent><ng-content></ng-content></ReactContent>
</Shimmer> </Shimmer>
`, `,
@ -37,25 +38,16 @@ import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> { export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IShimmerProps['componentRef'];
componentRef?: IShimmerProps['componentRef']; @Input() width?: IShimmerProps['width'];
@Input() @Input() isDataLoaded?: IShimmerProps['isDataLoaded'];
width?: IShimmerProps['width']; @Input() shimmerElements?: IShimmerProps['shimmerElements'];
@Input() @Input() ariaLabel?: IShimmerProps['ariaLabel'];
isDataLoaded?: IShimmerProps['isDataLoaded']; @Input() styles?: IShimmerProps['styles'];
@Input() @Input() className?: IShimmerProps['className'];
shimmerElements?: IShimmerProps['shimmerElements']; @Input() theme?: IShimmerProps['theme'];
@Input()
ariaLabel?: IShimmerProps['ariaLabel'];
@Input()
styles?: IShimmerProps['styles'];
@Input()
className?: IShimmerProps['className'];
@Input()
theme?: IShimmerProps['theme'];
@Input() @Input()
set renderCustomElementsGroup(value: InputRendererOptions<{}>) { set renderCustomElementsGroup(value: InputRendererOptions<{}>) {
@ -92,30 +84,22 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
[width]="width" [width]="width"
[theme]="theme" [theme]="theme"
[styles]="styles" [styles]="styles"
> >
</ShimmerElementsGroup> </ShimmerElementsGroup>
`, `,
styles: ['react-renderer'], styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShimmerElementsGroupProps> { export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShimmerElementsGroupProps> {
@ViewChild('reactNode') @ViewChild('reactNode') protected reactNodeRef: ElementRef;
protected reactNodeRef: ElementRef;
@Input() @Input() componentRef?: IShimmerElementsGroupProps['componentRef'];
componentRef?: IShimmerElementsGroupProps['componentRef']; @Input() rowHeight?: IShimmerElementsGroupProps['rowHeight'];
@Input() @Input() shimmerElements?: IShimmerElementsGroupProps['shimmerElements'];
rowHeight?: IShimmerElementsGroupProps['rowHeight']; @Input() flexWrap?: IShimmerElementsGroupProps['flexWrap'];
@Input() @Input() width?: IShimmerElementsGroupProps['width'];
shimmerElements?: IShimmerElementsGroupProps['shimmerElements']; @Input() theme?: IShimmerElementsGroupProps['theme'];
@Input() @Input() styles?: IShimmerElementsGroupProps['styles'];
flexWrap?: IShimmerElementsGroupProps['flexWrap'];
@Input()
width?: IShimmerElementsGroupProps['width'];
@Input()
theme?: IShimmerElementsGroupProps['theme'];
@Input()
styles?: IShimmerElementsGroupProps['styles'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true }); super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше