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/).
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.
## Pull Requests Reviews
This is a simple guide to assist in reviewing Github pull requests locally within VS Code.
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)
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
[@angular-react/fabric](https://www.npmjs.com/package/@angular-react/fabric) |
[Documentation, quick start, and guides][ard] |
[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)
### Typical Use Cases
- 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)
## Libraries
- [**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).
# 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.
@ -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-c]: https://developer.microsoft.com/en-us/fabric#/components
[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
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -11,15 +10,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
port: 9876,
@ -27,7 +26,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
singleRun: false,
});
};

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

@ -1,27 +1,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<head>
<meta charset="utf-8" />
<title>Angular-React Demo</title>
<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>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</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>
<!-- 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/'" />
</head>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</html>

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

@ -117,24 +117,56 @@
<fab-calendar [strings]="strings" (onSelectDate)="onSelectDate($event)"></fab-calendar>
<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>
<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 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 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>
<ng-template let-index="index">
Custom content for index {{ index }}
</ng-template>
<ng-template let-index="index"> Custom content for index {{ index }} </ng-template>
</render>
</fab-details-list-column>
</columns>
<groups>
<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 [level]="1" key="group-1-2" name="Nested Group #1.2" [count]="2" [startIndex]="1"></fab-group-item>
<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 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,17 +1,7 @@
{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
"directive-selector": [true, "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
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -11,15 +10,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
port: 9876,
@ -27,7 +26,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
singleRun: false,
});
};

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

@ -1,27 +1,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<head>
<meta charset="utf-8" />
<title>Angular-React</title>
<title>Angular-React</title>
<script>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</script>
<script>
// Store the URL the user was trying to access when receiving the 404.
sessionStorage.redirect = location.href;
</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>
<!-- 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/'" />
</head>
<body>
<!-- IE required at least 512 bytes of data to show non-default 404. -->
</body>
</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,
})
export class DotComponent {
@Input()
x: string;
@Input()
y: string;
@Input()
size: string;
@Input()
color: string;
@Input()
backgroundColor: string;
@Input()
textOverride: string;
@Input() x: string;
@Input() y: string;
@Input() size: string;
@Input() color: string;
@Input() backgroundColor: string;
@Input() textOverride: string;
@Output('onMouseEnter')
mouseEnter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@Output('onMouseLeave')
mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@Output('onMouseEnter') readonly mouseEnter = new EventEmitter<MouseEvent>();
@Output('onMouseLeave') readonly mouseLeave = new EventEmitter<MouseEvent>();
onMouseEnter = ev => this.mouseEnter.emit(ev as any);
onMouseLeave = ev => this.mouseLeave.emit(ev as any);
onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev);
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;">
<symbol id="angular" aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-angular-icon">Angular icon</title>
<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 id="react" aria-labelledby="simpleicons-react-icon" role="img" viewBox="0 0 24 24">
<title id="simpleicons-react-icon">React icon</title>
<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 id="microsoft" aria-labelledby="simpleicons-microsoft-icon" role="img" viewBox="0 0 24 24">
<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 id="google" aria-labelledby="simpleicons-google-icon" role="img" viewBox="0 0 24 24">
<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>
</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">
<a mat-button routerLink=".">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
<use xlink:href="#angular" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#angular" /></svg>
</mat-icon>
<b>~</b>
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
<use xlink:href="#react" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#react" /></svg>
</mat-icon>
</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>
</a>
<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>
<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>
<a mat-button href="https://github.com/microsoft/angular-react">
<mat-icon>
<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>
<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>
</mat-icon>
</a>
</nav>
<nav class="secondary" [class.collapse]="collapseSecondaryNav">
<ng-container #container></ng-container>
</nav>
<nav class="secondary" [class.collapse]="collapseSecondaryNav"><ng-container #container></ng-container></nav>

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

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

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

@ -4,7 +4,12 @@
// justify-content: last-baseline;
/deep/ {
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
display: inline-block;
margin: 0;
padding-bottom: 4px;
@ -19,5 +24,4 @@
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 *ngTemplateOutlet="dotTemplate; context: { dot: dot, text: counter }"></ng-container>
</ng-container>
<ng-container *ngIf="dots">
<ng-content></ng-content>
</ng-container>
<ng-container *ngIf="dots"> <ng-content></ng-content> </ng-container>
</div>

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

@ -31,8 +31,10 @@ export interface TriangleConfig {
styleUrls: ['./triangle.component.scss'],
})
export class TriangleComponent implements OnInit, OnDestroy {
@ContentChild(TemplateRef)
dotTemplate;
@ContentChild(TemplateRef) readonly dotTemplate: TemplateRef<{
dot: SierpinskiTriangleDot;
text: number;
}>;
// These are initially undefined and default CONST is used unless another
// 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>
<div mat-tab-nav-bar>
<div mat-tab-nav-bar>
<a mat-tab-link routerLink="fabric" routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">
<mat-icon>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
<use xlink:href="#microsoft" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><use xlink:href="#microsoft" /></svg>
</mat-icon>
Fabric
</a>
<a mat-tab-link routerLink="semantic-ui" routerLinkActive #rla2="routerLinkActive" [active]="rla2.isActive">
<mat-icon>
apps
</mat-icon>
<mat-icon> apps </mat-icon>
Semantic UI
</a>
</div>

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

@ -2,7 +2,11 @@
<h2>Button</h2>
<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>
<h3 class="button-height">{{ sampleContent }}</h3>
@ -10,10 +14,15 @@
<h2>Dialog</h2>
<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 }}
<fab-dialog-footer>
<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)="clickSave()" text="Save" contentStyle="margin-right: 10px;"></fab-default-button>
<fab-default-button (onClick)="toggleDialog()" text="Cancel"></fab-default-button>
</fab-dialog-footer>
</fab-dialog>

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,9 +4,7 @@
<h3>Pure Angular View</h3>
</div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>settings</mat-icon></button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleTriangle()">
<mat-icon *ngIf="!triangle.isActive">play_circle_outline</mat-icon>
@ -14,7 +12,14 @@
<span>{{ toggleTriangleLabel }}</span>
</button>
<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>
<label>Dot size</label>
</div>
@ -23,8 +28,16 @@
<app-triangle>
<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"
(onMouseEnter)="dot.hover = true" (onMouseLeave)="dot.hover = false">
<app-dot
[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 }}
</app-dot>
</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 {
DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;
@ViewChild(TriangleComponent)
triangle: TriangleComponent;
@ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
get toggleTriangleLabel() {
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>
</div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>settings</mat-icon></button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="toggleTriangle()">
<mat-icon *ngIf="!triangle.isActive">play_circle_outline</mat-icon>
@ -22,7 +20,14 @@
</mat-slide-toggle>
</div>
<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>
<label>Dot size</label>
</div>
@ -30,17 +35,19 @@
</app-page-header>
<span class="content" [class.collapsed]="contentCollapsed">
Every dot is an Angular Component. The counter is {{ 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>
Every dot is an Angular Component. The counter is
{{ 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
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
a smooth animation). The toggle between "Angular projection" and "React rendering" of the text counter within each dot
(currently set for {{ projectAsAngular ? 'Angular projection' : 'React rendering' }}) demonstrates a limitation of the
React elements. Each dot that is rendered by React is discrete. React does not collectively render the dots, and therefore
cannot use a global scheduler to ensure that the thread is not blocked and that smooth animation is preserved. When smooth
rendering is required, projection of DOM rendering by Angular (through the React element) is more performant.
and Angular both have advanced binding logic that schedules DOM updates when the thread is not busy (such as when
rendering a smooth animation). The toggle between "Angular projection" and "React rendering" of the text counter
within each dot (currently set for {{ projectAsAngular ? 'Angular projection' : 'React rendering' }}) demonstrates a
limitation of the React elements. Each dot that is rendered by React is discrete. React does not collectively render
the dots, and therefore cannot use a global scheduler to ensure that the thread is not blocked and that smooth
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>
<span class="collapse" (click)="contentCollapsed = true">[collapse]</span>
@ -48,9 +55,18 @@
<app-triangle>
<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"
(onMouseEnter)="dot.hover = true" (onMouseLeave)="dot.hover = false" [text]="projectAsAngular ? '' : text">
{{ projectAsAngular ? dot.textOverride ? dot.textOverride : text : '' }}
<app-react-dot
[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]="projectAsAngular ? '' : text"
>
{{ projectAsAngular ? (dot.textOverride ? dot.textOverride : text) : '' }}
</app-react-dot>
</ng-template>
<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;
}
.expand, .collapse {
.expand,
.collapse {
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 {
DEFAULT_DOT_SIZE = DEFAULT_DOT_SIZE;
@ViewChild(TriangleComponent)
triangle: TriangleComponent;
@ViewChild(TriangleComponent) readonly triangle: TriangleComponent;
projectAsAngular = true;
contentCollapsed = true;

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

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

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

@ -23,16 +23,16 @@
</mat-button-toggle-group>
<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>
<h3>React Rendered Dots (Angular Counter)</h3>
<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>
<h3>React Rendered Dots (React Counter)</h3>
<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>

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

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

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

@ -3,8 +3,6 @@
[text]="text"
(onMouseEnter)="onMouseEnter($event)"
(onMouseLeave)="onMouseLeave($event)"
>
<react-content>
<ng-content></ng-content>
</react-content>
>
<react-content> <ng-content></ng-content> </react-content>
</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 {
style: ReactDotStyle;
@Input()
x: string;
@Input()
y: string;
@Input()
size: string;
@Input('text')
_text: string;
@Input()
color: string;
@Input()
backgroundColor: string;
@Input()
textOverride: string;
@Input() x: string;
@Input() y: string;
@Input() size: string;
@Input('text') _text: string;
@Input() color: string;
@Input() backgroundColor: string;
@Input() textOverride: string;
@Output('onMouseEnter')
mouseEnter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@Output('onMouseLeave')
mouseLeave: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
@Output('onMouseEnter') readonly mouseEnter = new EventEmitter<MouseEvent>();
@Output('onMouseLeave') readonly mouseLeave = new EventEmitter<MouseEvent>();
onMouseEnter = ev => this.mouseEnter.emit(ev as any);
onMouseLeave = ev => this.mouseLeave.emit(ev as any);
onMouseEnter = (ev: MouseEvent) => this.mouseEnter.emit(ev);
onMouseLeave = (ev: MouseEvent) => this.mouseLeave.emit(ev);
get text() {
return this.textOverride && this._text ? this.textOverride : this._text;

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

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

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

@ -1,20 +1,19 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular-React</title>
<base href="/">
<head>
<meta charset="utf-8" />
<title>Angular-React</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<!-- Github Pages hack to allow SPA refresh without receiving 404. -->
<script>
(function () {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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/icon?family=Material+Icons" rel="stylesheet" />
</head>
<body>
<!-- Github Pages hack to allow SPA refresh without receiving 404. -->
<script>
(function() {
// Retrieve the URL the user was trying to access when receiving the 404.
var redirect = sessionStorage.redirect;
// Remove the URL from sessionStorage.
@ -26,8 +25,8 @@
}
})();
</script>
<!-- /Github Pages hack. -->
<!-- /Github Pages hack. -->
<app-root class="mat-typography"></app-root>
</body>
<app-root class="mat-typography"></app-root>
</body>
</html>

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

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

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

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

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

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

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

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

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

@ -1,17 +1,7 @@
{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
"directive-selector": [true, "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
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -16,15 +16,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
port: 9876,
@ -32,7 +32,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
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.
*
@ -17,4 +18,4 @@ type KnownKeysOfOptions = KnownKeys<Options>; // 'key' | 'title';
*/
type KnownKeys<T> = {
[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",
"compilerOptions": {
"outDir": "../../dist/out-tsc/libs/core",
"types": [
"jasmine",
"node"
]
"types": ["jasmine", "node"]
},
"files": [
"src/test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
"files": ["src/test.ts"],
"include": ["**/*.spec.ts", "**/*.d.ts"]
}

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

@ -1,17 +1,7 @@
{
"extends": "../../tslint.json",
"rules": {
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
]
"directive-selector": [true, "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)
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
[@angular-react/core](https://www.npmjs.com/package/@angular-react/core) |
[Documentation, quick start, and guides][ard] |
[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)
### Typical Use Cases
- 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)
@ -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.
High level stuff planned for Q2 2018 (April - June):
* Extend support for Fabric Buttons
* Extend support for Fabric Dialog
* Additional Fabric components TBD
* Table feature improvements
* Improve docs
- Extend support for Fabric Buttons
- Extend support for Fabric Dialog
- Additional Fabric components TBD
- Table feature improvements
- Improve docs
#### Available Fabric features
| Feature | Notes | Docs |
|------------------|--------------------------------------------------------|--------------|
| breadcrumb | Beta | [Docs][0] |
| button | Beta | [Docs][0] |
| callout | Beta | [Docs][0] |
| choice-group | Beta | [Docs][0] |
| combo-box | Beta | [Docs][0] |
| command-bar | Heavily tested, most scenarios covered. | [Docs][0] |
| contextual-menu | Beta | [Docs][0] |
| date-picker | Beta | [Docs][0] |
| dialog | Beta | [Docs][1] |
| divider | Beta | [Docs][0] |
| grouped-list | Beta | [Docs][0] |
| hover-card | Beta | [Docs][0] |
| icon | Beta | [Docs][0] |
| image | Beta | [Docs][0] |
| link | Beta | [Docs][0] |
| message-bar | Beta | [Docs][0] |
| modal | Beta | [Docs][0] |
| panel | Beta | [Docs][0] |
| persona | Beta | [Docs][0] |
| pickers | Beta | [Docs][0] |
| pivot | Beta | [Docs][0] |
| search-box | Beta | [Docs][0] |
| shimmer | Beta | [Docs][0] |
| slider | Beta | [Docs][0] |
| spinner | Beta | [Docs][0] |
| toggle | Beta | [Docs][0] |
| tooltip | Beta | [Docs][0] |
| Feature | Notes | Docs |
| --------------- | --------------------------------------- | --------- |
| breadcrumb | Beta | [Docs][0] |
| button | Beta | [Docs][0] |
| callout | Beta | [Docs][0] |
| choice-group | Beta | [Docs][0] |
| combo-box | Beta | [Docs][0] |
| command-bar | Heavily tested, most scenarios covered. | [Docs][0] |
| contextual-menu | Beta | [Docs][0] |
| date-picker | Beta | [Docs][0] |
| dialog | Beta | [Docs][1] |
| divider | Beta | [Docs][0] |
| grouped-list | Beta | [Docs][0] |
| hover-card | Beta | [Docs][0] |
| icon | Beta | [Docs][0] |
| image | Beta | [Docs][0] |
| link | Beta | [Docs][0] |
| message-bar | Beta | [Docs][0] |
| modal | Beta | [Docs][0] |
| panel | Beta | [Docs][0] |
| persona | Beta | [Docs][0] |
| pickers | Beta | [Docs][0] |
| pivot | Beta | [Docs][0] |
| search-box | Beta | [Docs][0] |
| shimmer | Beta | [Docs][0] |
| slider | Beta | [Docs][0] |
| spinner | Beta | [Docs][0] |
| toggle | Beta | [Docs][0] |
| tooltip | Beta | [Docs][0] |
#### In progress, planned, and non-planned Fabric features
| Feature | Status | Docs | Issue |
|------------------|-------------------------------------|--------------|----------------|
| bottom-nav | Not started, not planned | - | [TBD][0] |
| Feature | Status | Docs | Issue |
| ---------- | ------------------------ | ---- | -------- |
| bottom-nav | Not started, not planned | - | [TBD][0] |
[0]: 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-demo]: https://microsoft.github.io/angular-react/demo
[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
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
@ -13,15 +13,15 @@ module.exports = function (config) {
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
require('@angular-devkit/build-angular/plugins/karma'),
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
clearContext: false, // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage'),
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
fixWebpackSourcePaths: true,
},
reporters: ['progress', 'kjhtml'],
port: 9876,
@ -29,7 +29,6 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
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"
[theme]="theme"
[RenderItem]="renderItem && onRenderItem"
[ReduceData]="onReduceData">
[ReduceData]="onReduceData"
>
</Breadcrumb>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IBreadcrumbProps['componentRef'];
@Input()
items: IBreadcrumbProps['items'];
@Input()
className?: IBreadcrumbProps['className'];
@Input()
dividerAs?: IBreadcrumbProps['dividerAs'];
@Input()
maxDisplayedItems?: IBreadcrumbProps['maxDisplayedItems'];
@Input()
ariaLabel?: IBreadcrumbProps['ariaLabel'];
@Input()
overflowAriaLabel?: IBreadcrumbProps['overflowAriaLabel'];
@Input()
overflowIndex?: IBreadcrumbProps['overflowIndex'];
@Input()
styles?: IBreadcrumbProps['styles'];
@Input()
theme?: IBreadcrumbProps['theme'];
@Input() componentRef?: IBreadcrumbProps['componentRef'];
@Input() items: IBreadcrumbProps['items'];
@Input() className?: IBreadcrumbProps['className'];
@Input() dividerAs?: IBreadcrumbProps['dividerAs'];
@Input() maxDisplayedItems?: IBreadcrumbProps['maxDisplayedItems'];
@Input() ariaLabel?: IBreadcrumbProps['ariaLabel'];
@Input() overflowAriaLabel?: IBreadcrumbProps['overflowAriaLabel'];
@Input() overflowIndex?: IBreadcrumbProps['overflowIndex'];
@Input() styles?: IBreadcrumbProps['styles'];
@Input() theme?: IBreadcrumbProps['theme'];
@Input()
renderItem?: InputRendererOptions<IBreadcrumbItem>;
@Input('reduceData')
onReduceData?: IBreadcrumbProps['onReduceData'];
@Input() renderItem?: InputRendererOptions<IBreadcrumbItem>;
@Input('reduceData') onReduceData?: IBreadcrumbProps['onReduceData'];
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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</ActionButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabActionButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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';
export abstract class FabBaseButtonComponent extends ReactWrapperComponent<IButtonProps> implements OnInit {
@Input()
componentRef?: IButtonProps['componentRef'];
@Input()
href?: IButtonProps['href'];
@Input()
primary?: IButtonProps['primary'];
@Input()
uniqueId?: IButtonProps['uniqueId'];
@Input()
disabled?: IButtonProps['disabled'];
@Input()
primaryDisabled?: IButtonProps['primaryDisabled'];
@Input()
styles?: IButtonProps['styles'];
@Input()
theme?: IButtonProps['theme'];
@Input()
checked?: IButtonProps['checked'];
@Input()
className?: IButtonProps['className'];
@Input()
ariaLabel?: IButtonProps['ariaLabel'];
@Input()
ariaDescription?: IButtonProps['ariaDescription'];
@Input()
ariaHidden?: IButtonProps['ariaHidden'];
@Input()
text?: IButtonProps['text'];
@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() componentRef?: IButtonProps['componentRef'];
@Input() href?: IButtonProps['href'];
@Input() primary?: IButtonProps['primary'];
@Input() uniqueId?: IButtonProps['uniqueId'];
@Input() disabled?: IButtonProps['disabled'];
@Input() primaryDisabled?: IButtonProps['primaryDisabled'];
@Input() styles?: IButtonProps['styles'];
@Input() theme?: IButtonProps['theme'];
@Input() checked?: IButtonProps['checked'];
@Input() className?: IButtonProps['className'];
@Input() ariaLabel?: IButtonProps['ariaLabel'];
@Input() ariaDescription?: IButtonProps['ariaDescription'];
@Input() ariaHidden?: IButtonProps['ariaHidden'];
@Input() text?: IButtonProps['text'];
@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()
renderIcon?: InputRendererOptions<IButtonProps>;
@Input()
renderText?: InputRendererOptions<IButtonProps>;
@Input()
renderDescription?: InputRendererOptions<IButtonProps>;
@Input()
renderAriaDescription?: InputRendererOptions<IButtonProps>;
@Input()
renderChildren?: InputRendererOptions<IButtonProps>;
@Input()
renderMenuIcon?: InputRendererOptions<IButtonProps>;
@Input() renderIcon?: InputRendererOptions<IButtonProps>;
@Input() renderText?: InputRendererOptions<IButtonProps>;
@Input() renderDescription?: InputRendererOptions<IButtonProps>;
@Input() renderAriaDescription?: InputRendererOptions<IButtonProps>;
@Input() renderChildren?: InputRendererOptions<IButtonProps>;
@Input() renderMenuIcon?: InputRendererOptions<IButtonProps>;
@Output()
readonly onClick = new EventEmitter<MouseEvent>();
@Output()
readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>();
@Output()
readonly onAfterMenuDismiss = new EventEmitter<void>();
@Output() readonly onClick = new EventEmitter<MouseEvent>();
@Output() readonly onMenuClick = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; button?: IButtonProps }>();
@Output() readonly onAfterMenuDismiss = new EventEmitter<void>();
onRenderIcon: (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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</CommandBarButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCommandBarButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</CompoundButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCompoundButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</DefaultButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDefaultButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</IconButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabIconButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</MessageBarButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMessageBarButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</PrimaryButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPrimaryButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[MenuClick]="onMenuClickHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit($event)"
(onClick)="onClickHandler($event)">
(onClick)="onClickHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</SplitButton>
`,
@ -62,8 +63,7 @@ import { FabBaseButtonComponent } from './base-button.component';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSplitButtonComponent extends FabBaseButtonComponent {
@ViewChild('reactNode')
reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[allFocusable]="allFocusable"
[SelectDate]="onSelectDateHandler"
[Dismiss]="onDismissHandler">
[Dismiss]="onDismissHandler"
>
</Calendar>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCalendarComponent extends ReactWrapperComponent<ICalendarProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: ICalendarProps['componentRef'];
@Input()
className?: ICalendarProps['className'];
@Input()
isMonthPickerVisible?: ICalendarProps['isMonthPickerVisible'];
@Input()
isDayPickerVisible?: ICalendarProps['isDayPickerVisible'];
@Input()
showMonthPickerAsOverlay?: ICalendarProps['showMonthPickerAsOverlay'];
@Input()
today?: ICalendarProps['today'];
@Input()
value?: ICalendarProps['value'];
@Input()
firstDayOfWeek?: ICalendarProps['firstDayOfWeek'];
@Input()
dateRangeType?: ICalendarProps['dateRangeType'];
@Input()
autoNavigateOnSelection?: ICalendarProps['autoNavigateOnSelection'];
@Input()
showGoToToday?: ICalendarProps['showGoToToday'];
@Input()
strings: ICalendarProps['strings'];
@Input()
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'];
@Input() componentRef?: ICalendarProps['componentRef'];
@Input() className?: ICalendarProps['className'];
@Input() isMonthPickerVisible?: ICalendarProps['isMonthPickerVisible'];
@Input() isDayPickerVisible?: ICalendarProps['isDayPickerVisible'];
@Input() showMonthPickerAsOverlay?: ICalendarProps['showMonthPickerAsOverlay'];
@Input() today?: ICalendarProps['today'];
@Input() value?: ICalendarProps['value'];
@Input() firstDayOfWeek?: ICalendarProps['firstDayOfWeek'];
@Input() dateRangeType?: ICalendarProps['dateRangeType'];
@Input() autoNavigateOnSelection?: ICalendarProps['autoNavigateOnSelection'];
@Input() showGoToToday?: ICalendarProps['showGoToToday'];
@Input() strings: ICalendarProps['strings'];
@Input() 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()
readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
@Output()
readonly onDismiss = new EventEmitter<void>();
@Output() readonly onSelectDate = new EventEmitter<{ date: Date; selectedDateRangeArray?: Date[] }>();
@Output() readonly onDismiss = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

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

@ -2,7 +2,17 @@
// Licensed under the MIT License.
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 { 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()"
(onPositioned)="onPositioned.emit($event)"
(onDismiss)="onDismiss.emit($event)"
(onScroll)="onScroll.emit()">
(onScroll)="onScroll.emit()"
>
<ReactContent><ng-content></ng-content></ReactContent>
</Callout>
`,
@ -51,74 +62,41 @@ import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/pos
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCalloutComponent extends ReactWrapperComponent<ICalloutProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: ICalloutProps['componentRef'];
@Input()
target?: ICalloutProps['target'];
@Input()
directionalHint?: ICalloutProps['directionalHint'];
@Input()
directionalHintForRTL?: ICalloutProps['directionalHintForRTL'];
@Input()
gapSpace?: ICalloutProps['gapSpace'];
@Input()
beakWidth?: ICalloutProps['beakWidth'];
@Input()
calloutWidth?: ICalloutProps['calloutWidth'];
@Input()
backgroundColor?: ICalloutProps['backgroundColor'];
@Input()
bounds?: ICalloutProps['bounds'];
@Input()
minPagePadding?: ICalloutProps['minPagePadding'];
@Input()
isBeakVisible?: ICalloutProps['isBeakVisible'];
@Input()
preventDismissOnScroll?: ICalloutProps['preventDismissOnScroll'];
@Input()
preventDismissOnLostFocus?: ICalloutProps['preventDismissOnLostFocus'];
@Input()
coverTarget?: ICalloutProps['coverTarget'];
@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'];
@Input() componentRef?: ICalloutProps['componentRef'];
@Input() target?: ICalloutProps['target'];
@Input() directionalHint?: ICalloutProps['directionalHint'];
@Input() directionalHintForRTL?: ICalloutProps['directionalHintForRTL'];
@Input() gapSpace?: ICalloutProps['gapSpace'];
@Input() beakWidth?: ICalloutProps['beakWidth'];
@Input() calloutWidth?: ICalloutProps['calloutWidth'];
@Input() backgroundColor?: ICalloutProps['backgroundColor'];
@Input() bounds?: ICalloutProps['bounds'];
@Input() minPagePadding?: ICalloutProps['minPagePadding'];
@Input() isBeakVisible?: ICalloutProps['isBeakVisible'];
@Input() preventDismissOnScroll?: ICalloutProps['preventDismissOnScroll'];
@Input() preventDismissOnLostFocus?: ICalloutProps['preventDismissOnLostFocus'];
@Input() coverTarget?: ICalloutProps['coverTarget'];
@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()
readonly onLayerMounted = new EventEmitter<void>();
@Output()
readonly onPositioned = new EventEmitter<{ positions?: ICalloutPositionedInfo }>();
@Output()
readonly onDismiss = new EventEmitter<{ ev?: any }>();
@Output()
readonly onScroll = new EventEmitter<void>();
@Output() readonly onLayerMounted = new EventEmitter<void>();
@Output() readonly onPositioned = new EventEmitter<{ positions?: ICalloutPositionedInfo }>();
@Output() readonly onDismiss = new EventEmitter<{ ev?: any }>();
@Output() readonly onScroll = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

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

@ -42,61 +42,41 @@ import { FormEvent } from 'react';
[keytipProps]="keytipProps"
[styles]="styles"
[RenderLabel]="renderLabel && onRenderLabel"
[Change]="onChangeHandler">
[Change]="onChangeHandler"
>
</Checkbox>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabCheckboxComponent extends ReactWrapperComponent<ICheckboxProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: ICheckboxProps['componentRef'];
@Input()
className?: ICheckboxProps['className'];
@Input()
checked?: ICheckboxProps['checked'];
@Input()
defaultChecked?: ICheckboxProps['defaultChecked'];
@Input()
label?: ICheckboxProps['label'];
@Input()
disabled?: ICheckboxProps['disabled'];
@Input()
inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;
@Input()
boxSide?: ICheckboxProps['boxSide'];
@Input()
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() componentRef?: ICheckboxProps['componentRef'];
@Input() className?: ICheckboxProps['className'];
@Input() checked?: ICheckboxProps['checked'];
@Input() defaultChecked?: ICheckboxProps['defaultChecked'];
@Input() label?: ICheckboxProps['label'];
@Input() disabled?: ICheckboxProps['disabled'];
@Input() inputProps?: React.ButtonHTMLAttributes<HTMLElement | HTMLButtonElement>;
@Input() boxSide?: ICheckboxProps['boxSide'];
@Input() 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()
renderLabel?: InputRendererOptions<ICheckboxProps>;
@Input() renderLabel?: InputRendererOptions<ICheckboxProps>;
@Output()
readonly onChange = new EventEmitter<{ ev?: Event; checked?: boolean }>();
@Output() readonly onChange = new EventEmitter<{ ev?: Event; checked?: boolean }>();
/* Non-React props, more native support for Angular */
// support for two-way data binding for `@Input() checked`.
@Output()
readonly checkedChange = new EventEmitter<boolean>();
@Output() readonly checkedChange = new EventEmitter<boolean>();
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"
[Changed]="onChangedHandler"
[Change]="onChangeHandler"
>
>
</ChoiceGroup>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabChoiceGroupComponent extends ReactWrapperComponent<IChoiceGroupProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IChoiceGroupProps['componentRef'];
@Input()
options?: IChoiceGroupProps['options'];
@Input()
defaultSelectedKey?: IChoiceGroupProps['defaultSelectedKey'];
@Input()
selectedKey?: IChoiceGroupProps['selectedKey'];
@Input()
label?: IChoiceGroupProps['label'];
@Input()
theme?: IChoiceGroupProps['theme'];
@Input()
styles?: IChoiceGroupProps['styles'];
@Input()
ariaLabelledBy?: IChoiceGroupProps['ariaLabelledBy'];
@Input() componentRef?: IChoiceGroupProps['componentRef'];
@Input() options?: IChoiceGroupProps['options'];
@Input() defaultSelectedKey?: IChoiceGroupProps['defaultSelectedKey'];
@Input() selectedKey?: IChoiceGroupProps['selectedKey'];
@Input() label?: IChoiceGroupProps['label'];
@Input() theme?: IChoiceGroupProps['theme'];
@Input() styles?: IChoiceGroupProps['styles'];
@Input() ariaLabelledBy?: IChoiceGroupProps['ariaLabelledBy'];
/** HTML Input props */
@Input()
required?: IChoiceGroupProps['required'];
@Input() required?: IChoiceGroupProps['required'];
@Output()
readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption; evt?: Event }>();
@Output()
readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>();
@Output() readonly onChanged = new EventEmitter<{ option: IChoiceGroupOption; evt?: Event }>();
@Output() readonly onChange = new EventEmitter<{ ev?: Event; option?: IChoiceGroupOption }>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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';
export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent<IComboBoxProps> implements OnInit {
@Input()
componentRef?: IComboBoxProps['componentRef'];
@Input()
options: IComboBoxProps['options'];
@Input()
allowFreeform?: IComboBoxProps['allowFreeform'];
@Input()
autoComplete?: IComboBoxProps['autoComplete'];
@Input()
text?: IComboBoxProps['text'];
@Input()
buttonIconProps?: IComboBoxProps['buttonIconProps'];
@Input()
theme?: IComboBoxProps['theme'];
@Input()
styles?: IComboBoxProps['styles'];
@Input()
getClassNames?: IComboBoxProps['getClassNames'];
@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() componentRef?: IComboBoxProps['componentRef'];
@Input() options: IComboBoxProps['options'];
@Input() allowFreeform?: IComboBoxProps['allowFreeform'];
@Input() autoComplete?: IComboBoxProps['autoComplete'];
@Input() text?: IComboBoxProps['text'];
@Input() buttonIconProps?: IComboBoxProps['buttonIconProps'];
@Input() theme?: IComboBoxProps['theme'];
@Input() styles?: IComboBoxProps['styles'];
@Input() getClassNames?: IComboBoxProps['getClassNames'];
@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()
renderLowerContent?: InputRendererOptions<IComboBoxProps>;
@Input() renderLowerContent?: InputRendererOptions<IComboBoxProps>;
@Output()
readonly onChange = new EventEmitter<{
@Output() readonly onChange = new EventEmitter<{
event: Event;
option?: IComboBoxOption;
index?: number;
value?: string;
}>();
@Output()
readonly onPendingValueChanged = new EventEmitter<{ option?: IComboBoxOption; index?: number; value?: string }>();
@Output()
readonly onMenuOpen = new EventEmitter<void>();
@Output()
readonly onMenuDismissed = new EventEmitter<void>();
@Output()
readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
@Output() readonly onPendingValueChanged = new EventEmitter<{
option?: IComboBoxOption;
index?: number;
value?: string;
}>();
@Output() readonly onMenuOpen = new EventEmitter<void>();
@Output() readonly onMenuDismissed = new EventEmitter<void>();
@Output() readonly onScrollToItem = new EventEmitter<{ itemIndex: number }>();
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"
[ScrollToItem]="onScrollToItemHandler"
(onMenuOpen)="onMenuOpen.emit()"
(onMenuDismissed)="onMenuDismissed.emit()">
(onMenuDismissed)="onMenuDismissed.emit()"
>
</ComboBox>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabComboBoxComponent extends FabBaseComboBoxComponent {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[ScrollToItem]="onScrollToItemHandler"
(onMenuOpen)="onMenuOpen.emit()"
(onMenuDismissed)="onMenuDismissed.emit()">
(onMenuDismissed)="onMenuDismissed.emit()"
>
</VirtualizedComboBox>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[ReduceData]="onReduceData"
[GrowData]="onGrowData"
(onDataReduced)="onDataReduced"
(onDataGrown)="onDataGrown">
(onDataReduced)="(onDataReduced)"
(onDataGrown)="(onDataGrown)"
>
</CommandBar>
`,
styles: ['react-renderer'],
@ -61,50 +62,30 @@ import {
})
export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarProps>
implements OnChanges<FabCommandBarComponent>, AfterContentInit, OnDestroy {
@ContentChild(CommandBarItemsDirective)
readonly itemsDirective?: CommandBarItemsDirective;
@ContentChild(CommandBarFarItemsDirective)
readonly farItemsDirective?: CommandBarFarItemsDirective;
@ContentChild(CommandBarOverflowItemsDirective)
readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
@ContentChild(CommandBarItemsDirective) readonly itemsDirective?: CommandBarItemsDirective;
@ContentChild(CommandBarFarItemsDirective) readonly farItemsDirective?: CommandBarFarItemsDirective;
@ContentChild(CommandBarOverflowItemsDirective) readonly overflowItemsDirective?: CommandBarOverflowItemsDirective;
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: ICommandBarProps['componentRef'];
@Input()
overflowButtonProps?: ICommandBarProps['overflowButtonProps'];
@Input()
overflowButtonAs?: ICommandBarProps['overflowButtonAs'];
@Input()
buttonAs?: ICommandBarProps['buttonAs'];
@Input()
shiftOnReduce?: ICommandBarProps['shiftOnReduce'];
@Input()
className?: ICommandBarProps['className'];
@Input()
ariaLabel?: ICommandBarProps['ariaLabel'];
@Input()
styles?: ICommandBarProps['styles'];
@Input()
theme?: ICommandBarProps['theme'];
@Input()
onReduceData?: ICommandBarProps['onReduceData'];
@Input()
onGrowData?: ICommandBarProps['onGrowData'];
@Input() componentRef?: ICommandBarProps['componentRef'];
@Input() overflowButtonProps?: ICommandBarProps['overflowButtonProps'];
@Input() overflowButtonAs?: ICommandBarProps['overflowButtonAs'];
@Input() buttonAs?: ICommandBarProps['buttonAs'];
@Input() shiftOnReduce?: ICommandBarProps['shiftOnReduce'];
@Input() className?: ICommandBarProps['className'];
@Input() ariaLabel?: ICommandBarProps['ariaLabel'];
@Input() styles?: ICommandBarProps['styles'];
@Input() theme?: ICommandBarProps['theme'];
@Input() onReduceData?: ICommandBarProps['onReduceData'];
@Input() onGrowData?: ICommandBarProps['onGrowData'];
@Input()
items: ReadonlyArray<ICommandBarItemOptions>;
@Input()
farItems: ReadonlyArray<ICommandBarItemOptions>;
@Input()
overflowItems: ReadonlyArray<ICommandBarItemOptions>;
@Input() items: ReadonlyArray<ICommandBarItemOptions>;
@Input() farItems: ReadonlyArray<ICommandBarItemOptions>;
@Input() overflowItems: ReadonlyArray<ICommandBarItemOptions>;
@Output()
readonly onDataReduced = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
@Output()
readonly onDataGrown = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
@Output() readonly onDataReduced = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
@Output() readonly onDataGrown = new EventEmitter<{ movedItem: ICommandBarItemProps }>();
/** @internal */
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' })
export class CommandBarItemRenderDirective {
@ContentChild(TemplateRef)
readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderContext>;
}
/**
@ -26,31 +25,22 @@ export class CommandBarItemRenderDirective {
*/
@Directive({ selector: 'fab-command-bar-item > render-icon' })
export class CommandBarItemRenderIconDirective {
@ContentChild(TemplateRef)
readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<ICommandBarItemOptionsRenderIconContext>;
}
@Directive({ selector: 'fab-command-bar-item' })
export class CommandBarItemDirective extends ContextualMenuItemDirective
implements ICommandBarItemOptions, AfterContentInit {
@ContentChild(CommandBarItemRenderDirective)
readonly renderDirective: CommandBarItemRenderDirective;
@ContentChild(CommandBarItemRenderIconDirective)
readonly renderIconDirective: CommandBarItemRenderIconDirective;
@ContentChild(CommandBarItemRenderDirective) readonly renderDirective: CommandBarItemRenderDirective;
@ContentChild(CommandBarItemRenderIconDirective) readonly renderIconDirective: CommandBarItemRenderIconDirective;
// ICommandBarItemOptions implementation
@Input()
iconOnly?: ICommandBarItemOptions['iconOnly'];
@Input()
buttonStyles?: ICommandBarItemOptions['buttonStyles'];
@Input()
cacheKey?: ICommandBarItemOptions['cacheKey'];
@Input()
renderedInOverflow?: ICommandBarItemOptions['renderedInOverflow'];
@Input()
render: ICommandBarItemOptions['render'];
@Input()
renderIcon: ICommandBarItemOptions['renderIcon'];
@Input() iconOnly?: ICommandBarItemOptions['iconOnly'];
@Input() buttonStyles?: ICommandBarItemOptions['buttonStyles'];
@Input() cacheKey?: ICommandBarItemOptions['cacheKey'];
@Input() renderedInOverflow?: ICommandBarItemOptions['renderedInOverflow'];
@Input() render: ICommandBarItemOptions['render'];
@Input() renderIcon: ICommandBarItemOptions['renderIcon'];
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' })
export class CommandBarItemsDirective extends CommandBarItemsDirectiveBase {
@ContentChildren(CommandBarItemDirective)
readonly directiveItems: QueryList<CommandBarItemDirective>;
@ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
}
@Directive({ selector: 'fab-command-bar > far-items' })
export class CommandBarFarItemsDirective extends CommandBarItemsDirectiveBase {
@ContentChildren(CommandBarItemDirective)
readonly directiveItems: QueryList<CommandBarItemDirective>;
@ContentChildren(CommandBarItemDirective) readonly directiveItems: QueryList<CommandBarItemDirective>;
}
@Directive({ selector: 'fab-command-bar > overflow-items' })
export class CommandBarOverflowItemsDirective extends CommandBarItemsDirectiveBase {
@ContentChildren(CommandBarItemDirective)
readonly directiveItems: QueryList<CommandBarItemDirective>;
@ContentChildren(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,
OnChanges<ContextualMenuItemDirective>,
OnDestroy {
@ContentChildren(ContextualMenuItemDirective)
readonly menuItemsDirectives: QueryList<ContextualMenuItemDirective>;
@ContentChildren(ContextualMenuItemDirective) readonly menuItemsDirectives: QueryList<ContextualMenuItemDirective>;
@Input()
componentRef?: IContextualMenuItem['componentRef'];
@Input()
text?: IContextualMenuItem['text'];
@Input()
secondaryText?: IContextualMenuItem['secondaryText'];
@Input()
itemType?: IContextualMenuItem['itemType'];
@Input()
iconProps?: IContextualMenuItem['iconProps'];
@Input()
onRenderIcon?: IContextualMenuItem['onRenderIcon'];
@Input()
submenuIconProps?: IContextualMenuItem['submenuIconProps'];
@Input()
disabled?: IContextualMenuItem['disabled'];
@Input()
primaryDisabled?: IContextualMenuItem['primaryDisabled'];
@Input()
shortCut?: IContextualMenuItem['shortCut'];
@Input()
canCheck?: IContextualMenuItem['canCheck'];
@Input()
checked?: IContextualMenuItem['checked'];
@Input()
split?: IContextualMenuItem['split'];
@Input()
data?: IContextualMenuItem['data'];
@Input()
href?: IContextualMenuItem['href'];
@Input()
target?: IContextualMenuItem['target'];
@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'];
@Input() componentRef?: IContextualMenuItem['componentRef'];
@Input() text?: IContextualMenuItem['text'];
@Input() secondaryText?: IContextualMenuItem['secondaryText'];
@Input() itemType?: IContextualMenuItem['itemType'];
@Input() iconProps?: IContextualMenuItem['iconProps'];
@Input() onRenderIcon?: IContextualMenuItem['onRenderIcon'];
@Input() submenuIconProps?: IContextualMenuItem['submenuIconProps'];
@Input() disabled?: IContextualMenuItem['disabled'];
@Input() primaryDisabled?: IContextualMenuItem['primaryDisabled'];
@Input() shortCut?: IContextualMenuItem['shortCut'];
@Input() canCheck?: IContextualMenuItem['canCheck'];
@Input() checked?: IContextualMenuItem['checked'];
@Input() split?: IContextualMenuItem['split'];
@Input() data?: IContextualMenuItem['data'];
@Input() href?: IContextualMenuItem['href'];
@Input() target?: IContextualMenuItem['target'];
@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()
readonly click = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; item?: IContextualMenuItem }>();
@Output() readonly click = new EventEmitter<{ ev?: MouseEvent | KeyboardEvent; item?: IContextualMenuItem }>();
@Output()
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
*/
export abstract class ChangeableItemDirective<TItem> implements OnChanges<ChangeableItemDirective<TItem>>, OnInit {
@Input()
key: string;
@Input() key: string;
@Output()
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>
implements AfterContentInit, IChangeableItemsContainer<TItem>, OnDestroy {
@ContentChildren(ChangeableItemDirective)
readonly directiveItems: QueryList<ChangeableItemDirective<TItem>>;
@ContentChildren(ChangeableItemDirective) readonly directiveItems: QueryList<ChangeableItemDirective<TItem>>;
@Output()
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"
[showCloseButton]="showCloseButton"
[SelectDate]="onSelectDateHandler"
(onAfterMenuDismiss)="onAfterMenuDismiss.emit()">
(onAfterMenuDismiss)="onAfterMenuDismiss.emit()"
>
</DatePicker>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDatePickerComponent extends ReactWrapperComponent<IDatePickerProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IDatePickerProps['componentRef'];
@Input()
calendarProps?: IDatePickerProps['calendarProps'];
@Input()
label?: IDatePickerProps['label'];
@Input()
isRequired?: IDatePickerProps['isRequired'];
@Input()
disabled?: IDatePickerProps['disabled'];
@Input()
ariaLabel?: IDatePickerProps['ariaLabel'];
@Input()
underlined?: IDatePickerProps['underlined'];
@Input()
pickerAriaLabel?: IDatePickerProps['pickerAriaLabel'];
@Input()
isMonthPickerVisible?: IDatePickerProps['isMonthPickerVisible'];
@Input()
showMonthPickerAsOverlay?: IDatePickerProps['showMonthPickerAsOverlay'];
@Input()
allowTextInput?: IDatePickerProps['allowTextInput'];
@Input()
disableAutoFocus?: IDatePickerProps['disableAutoFocus'];
@Input()
placeholder?: IDatePickerProps['placeholder'];
@Input()
today?: IDatePickerProps['today'];
@Input()
value?: IDatePickerProps['value'];
@Input()
formatDate?: IDatePickerProps['formatDate'];
@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'];
@Input() componentRef?: IDatePickerProps['componentRef'];
@Input() calendarProps?: IDatePickerProps['calendarProps'];
@Input() label?: IDatePickerProps['label'];
@Input() isRequired?: IDatePickerProps['isRequired'];
@Input() disabled?: IDatePickerProps['disabled'];
@Input() ariaLabel?: IDatePickerProps['ariaLabel'];
@Input() underlined?: IDatePickerProps['underlined'];
@Input() pickerAriaLabel?: IDatePickerProps['pickerAriaLabel'];
@Input() isMonthPickerVisible?: IDatePickerProps['isMonthPickerVisible'];
@Input() showMonthPickerAsOverlay?: IDatePickerProps['showMonthPickerAsOverlay'];
@Input() allowTextInput?: IDatePickerProps['allowTextInput'];
@Input() disableAutoFocus?: IDatePickerProps['disableAutoFocus'];
@Input() placeholder?: IDatePickerProps['placeholder'];
@Input() today?: IDatePickerProps['today'];
@Input() value?: IDatePickerProps['value'];
@Input() formatDate?: IDatePickerProps['formatDate'];
@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()
readonly onSelectDate = new EventEmitter<{ date: Date | null | undefined }>();
@Output()
readonly onAfterMenuDismiss = new EventEmitter<void>();
@Output() readonly onSelectDate = new EventEmitter<{ date: Date | null | undefined }>();
@Output() readonly onAfterMenuDismiss = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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"
[RowDidMount]="onRowDidMountHandler"
[RowWillUnmount]="onRowWillUnmountHandler"
[ShouldVirtualize]="onShouldVirtualize">
[ShouldVirtualize]="onShouldVirtualize"
>
</DetailsList>
`,
styles: ['react-renderer'],
@ -111,140 +112,78 @@ import { DetailsListGroupsDirective } from './directives/details-list-groups.dir
})
export class FabDetailsListComponent extends ReactWrapperComponent<IDetailsListProps>
implements AfterContentInit, OnChanges<FabDetailsListComponent>, OnDestroy, OnInit {
@ContentChild(DetailsListColumnsDirective)
readonly columnsDirective?: DetailsListColumnsDirective;
@ContentChild(DetailsListGroupsDirective)
readonly groupsDirective?: DetailsListGroupsDirective;
@ContentChild(DetailsListColumnsDirective) readonly columnsDirective?: DetailsListColumnsDirective;
@ContentChild(DetailsListGroupsDirective) readonly groupsDirective?: DetailsListGroupsDirective;
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
theme?: IDetailsListProps['theme'];
@Input()
styles?: IDetailsListProps['styles'];
@Input()
componentRef?: IDetailsListProps['componentRef'];
@Input()
setKey?: IDetailsListProps['setKey'];
@Input()
items: IDetailsListProps['items'];
@Input()
listProps?: IDetailsListProps['listProps'];
@Input()
initialFocusedIndex?: IDetailsListProps['initialFocusedIndex'];
@Input()
className?: IDetailsListProps['className'];
@Input()
groupProps?: IDetailsListProps['groupProps'];
@Input()
indentWidth?: IDetailsListProps['indentWidth'];
@Input()
selection?: IDetailsListProps['selection'];
@Input()
selectionMode?: IDetailsListProps['selectionMode'];
@Input()
selectionPreservedOnEmptyClick?: IDetailsListProps['selectionPreservedOnEmptyClick'];
@Input()
selectionZoneProps?: IDetailsListProps['selectionZoneProps'];
@Input()
layoutMode?: IDetailsListProps['layoutMode'];
@Input()
checkboxVisibility?: IDetailsListProps['checkboxVisibility'];
@Input()
isHeaderVisible?: IDetailsListProps['isHeaderVisible'];
@Input()
constrainMode?: IDetailsListProps['constrainMode'];
@Input()
rowElementEventMap?: IDetailsListProps['rowElementEventMap'];
@Input()
dragDropEvents?: IDetailsListProps['dragDropEvents'];
@Input()
enableShimmer?: IDetailsListProps['enableShimmer'];
@Input()
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'];
@Input() theme?: IDetailsListProps['theme'];
@Input() styles?: IDetailsListProps['styles'];
@Input() componentRef?: IDetailsListProps['componentRef'];
@Input() setKey?: IDetailsListProps['setKey'];
@Input() items: IDetailsListProps['items'];
@Input() listProps?: IDetailsListProps['listProps'];
@Input() initialFocusedIndex?: IDetailsListProps['initialFocusedIndex'];
@Input() className?: IDetailsListProps['className'];
@Input() groupProps?: IDetailsListProps['groupProps'];
@Input() indentWidth?: IDetailsListProps['indentWidth'];
@Input() selection?: IDetailsListProps['selection'];
@Input() selectionMode?: IDetailsListProps['selectionMode'];
@Input() selectionPreservedOnEmptyClick?: IDetailsListProps['selectionPreservedOnEmptyClick'];
@Input() selectionZoneProps?: IDetailsListProps['selectionZoneProps'];
@Input() layoutMode?: IDetailsListProps['layoutMode'];
@Input() checkboxVisibility?: IDetailsListProps['checkboxVisibility'];
@Input() isHeaderVisible?: IDetailsListProps['isHeaderVisible'];
@Input() constrainMode?: IDetailsListProps['constrainMode'];
@Input() rowElementEventMap?: IDetailsListProps['rowElementEventMap'];
@Input() dragDropEvents?: IDetailsListProps['dragDropEvents'];
@Input() enableShimmer?: IDetailsListProps['enableShimmer'];
@Input() 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)
@Input()
skipViewportMeasures?: IDetailsListProps['skipViewportMeasures'];
@Input() skipViewportMeasures?: IDetailsListProps['skipViewportMeasures'];
// Render members
@Input()
renderDetailsFooter?: InputRendererOptions<IDetailsFooterProps>;
@Input()
renderDetailsHeader?: InputRendererOptions<IDetailsHeaderProps>;
@Input()
renderMissingItem?: InputRendererOptions<IMissingItemRenderContext>;
@Input()
renderRow?: InputRendererOptions<IDetailsRowProps>;
@Input() renderDetailsFooter?: InputRendererOptions<IDetailsFooterProps>;
@Input() renderDetailsHeader?: InputRendererOptions<IDetailsHeaderProps>;
@Input() renderMissingItem?: InputRendererOptions<IMissingItemRenderContext>;
@Input() renderRow?: InputRendererOptions<IDetailsRowProps>;
// Callback members
@Output()
readonly onActiveItemChanged = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
@Output()
readonly onColumnHeaderClick = new EventEmitter<{ ev?: Event; column?: IColumn }>();
@Output()
readonly onColumnHeaderContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
@Output()
readonly onColumnResize = new EventEmitter<{ column?: IColumn; newWidth?: number; columnIndex?: number }>();
@Output()
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 }>();
@Output() readonly onActiveItemChanged = new EventEmitter<{ item?: any; index?: number; ev?: Event }>();
@Output() readonly onColumnHeaderClick = new EventEmitter<{ ev?: Event; column?: IColumn }>();
@Output() readonly onColumnHeaderContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
@Output() readonly onColumnResize = new EventEmitter<{ column?: IColumn; newWidth?: number; columnIndex?: number }>();
@Output() 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
@Input()
columns: ReadonlyArray<IDetailsListColumnOptions>;
@Input()
groups: ReadonlyArray<IGroup>;
@Input() columns: ReadonlyArray<IDetailsListColumnOptions>;
@Input() groups: ReadonlyArray<IGroup>;
/** @internal */
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' })
export class DetailsListColumnRenderDirective {
@ContentChild(TemplateRef)
readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
@ContentChild(TemplateRef) readonly templateRef: TemplateRef<IDetailsListColumnOptionsRenderContext>;
}
/**
@ -22,79 +21,45 @@ export class DetailsListColumnRenderDirective {
@Directive({ selector: 'fab-details-list-column' })
export class DetailsListColumnDirective extends ChangeableItemDirective<IDetailsListColumnOptions>
implements AfterContentInit {
@ContentChild(DetailsListColumnRenderDirective)
readonly renderDirective: DetailsListColumnRenderDirective;
@ContentChild(DetailsListColumnRenderDirective) readonly renderDirective: DetailsListColumnRenderDirective;
@Input()
name: IColumn['name'];
@Input()
fieldName?: IColumn['fieldName'];
@Input()
className?: IColumn['className'];
@Input()
minWidth: IColumn['minWidth'];
@Input()
ariaLabel?: IColumn['ariaLabel'];
@Input()
isRowHeader?: IColumn['isRowHeader'];
@Input()
maxWidth?: IColumn['maxWidth'];
@Input()
columnActionsMode?: IColumn['columnActionsMode'];
@Input()
iconName?: IColumn['iconName'];
@Input()
isIconOnly?: IColumn['isIconOnly'];
@Input()
iconClassName?: IColumn['iconClassName'];
@Input()
isCollapsable?: IColumn['isCollapsable'];
@Input()
isSorted?: IColumn['isSorted'];
@Input()
isSortedDescending?: IColumn['isSortedDescending'];
@Input()
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'];
@Input() name: IColumn['name'];
@Input() fieldName?: IColumn['fieldName'];
@Input() className?: IColumn['className'];
@Input() minWidth: IColumn['minWidth'];
@Input() ariaLabel?: IColumn['ariaLabel'];
@Input() isRowHeader?: IColumn['isRowHeader'];
@Input() maxWidth?: IColumn['maxWidth'];
@Input() columnActionsMode?: IColumn['columnActionsMode'];
@Input() iconName?: IColumn['iconName'];
@Input() isIconOnly?: IColumn['isIconOnly'];
@Input() iconClassName?: IColumn['iconClassName'];
@Input() isCollapsable?: IColumn['isCollapsable'];
@Input() isSorted?: IColumn['isSorted'];
@Input() isSortedDescending?: IColumn['isSortedDescending'];
@Input() 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
@Input()
render: IDetailsListColumnOptions['render'];
@Input() render: IDetailsListColumnOptions['render'];
// Callback members
@Output()
readonly onColumnClick = new EventEmitter<{ ev: Event; column: IColumn }>();
@Output()
readonly onColumnContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
@Output()
readonly onColumnResize = new EventEmitter<{ width?: number }>();
@Output() readonly onColumnClick = new EventEmitter<{ ev: Event; column: IColumn }>();
@Output() readonly onColumnContextMenu = new EventEmitter<{ column?: IColumn; ev?: Event }>();
@Output() readonly onColumnResize = new EventEmitter<{ width?: number }>();
ngAfterContentInit() {
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' })
export class DetailsListColumnsDirective extends ChangeableItemsDirective<IDetailsListColumnOptions> {
@ContentChildren(DetailsListColumnDirective)
readonly directiveItems: QueryList<DetailsListColumnDirective>;
@ContentChildren(DetailsListColumnDirective) readonly directiveItems: QueryList<DetailsListColumnDirective>;
get items() {
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' })
export class DetailsListGroupsDirective extends ChangeableItemsDirective<IGroup> {
@ContentChildren(GroupItemDirective)
readonly directiveItems: QueryList<GroupItemDirective>;
@ContentChildren(GroupItemDirective) readonly directiveItems: QueryList<GroupItemDirective>;
get items() {
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',
exportAs: 'fabDialog',
template: `
<!-- prettier-ignore -->
<Dialog
#reactNode
[responsiveMode]="responsiveMode"
@ -36,7 +37,8 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
[modalProps]="modalProps"
[minWidth]="minWidth"
[maxWidth]="maxWidth"
(onDismiss)="onDismissHandler($event)">
(onDismiss)="onDismissHandler($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</Dialog>
`,
@ -44,42 +46,25 @@ import { IDialogContentProps, IDialogFooterProps, IDialogProps } from 'office-ui
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
responsiveMode?: IDialogProps['responsiveMode'];
@Input()
elementToFocusOnDismiss?: IDialogProps['elementToFocusOnDismiss'];
@Input()
ignoreExternalFocusing?: IDialogProps['ignoreExternalFocusing'];
@Input()
forceFocusInsideTrap?: IDialogProps['forceFocusInsideTrap'];
@Input()
firstFocusableSelector?: IDialogProps['firstFocusableSelector'];
@Input()
closeButtonAriaLabel?: IDialogProps['closeButtonAriaLabel'];
@Input()
isClickableOutsideFocusTrap?: IDialogProps['isClickableOutsideFocusTrap'];
@Input()
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'];
@Input() responsiveMode?: IDialogProps['responsiveMode'];
@Input() elementToFocusOnDismiss?: IDialogProps['elementToFocusOnDismiss'];
@Input() ignoreExternalFocusing?: IDialogProps['ignoreExternalFocusing'];
@Input() forceFocusInsideTrap?: IDialogProps['forceFocusInsideTrap'];
@Input() firstFocusableSelector?: IDialogProps['firstFocusableSelector'];
@Input() closeButtonAriaLabel?: IDialogProps['closeButtonAriaLabel'];
@Input() isClickableOutsideFocusTrap?: IDialogProps['isClickableOutsideFocusTrap'];
@Input() 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()
readonly onDismiss = new EventEmitter<MouseEvent>();
@Output() readonly onDismiss = new EventEmitter<MouseEvent>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);
@ -96,12 +81,7 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
selector: 'fab-dialog-footer',
exportAs: 'fabDialogFooter',
template: `
<DialogFooter
#reactNode
[componentRef]="componentRef"
[styles]="styles"
[theme]="theme"
[className]="className">
<DialogFooter #reactNode [componentRef]="componentRef" [styles]="styles" [theme]="theme" [className]="className">
<ReactContent><ng-content></ng-content></ReactContent>
</DialogFooter>
`,
@ -109,17 +89,12 @@ export class FabDialogComponent extends ReactWrapperComponent<IDialogProps> {
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFooterProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IDialogFooterProps['componentRef'];
@Input()
styles?: IDialogFooterProps['styles'];
@Input()
theme?: IDialogFooterProps['theme'];
@Input()
className?: IDialogFooterProps['className'];
@Input() componentRef?: IDialogFooterProps['componentRef'];
@Input() styles?: IDialogFooterProps['styles'];
@Input() theme?: IDialogFooterProps['theme'];
@Input() className?: IDialogFooterProps['className'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);
@ -146,7 +121,8 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
[responsiveMode]="responsiveMode"
[closeButtonAriaLabel]="closeButtonAriaLabel"
[type]="type"
(onDismiss)="onDismiss.emit($event && $event.nativeEvent)">
(onDismiss)="onDismiss.emit($event && $event.nativeEvent)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</DialogContent>
`,
@ -154,40 +130,24 @@ export class FabDialogFooterComponent extends ReactWrapperComponent<IDialogFoote
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabDialogContentComponent extends ReactWrapperComponent<IDialogContentProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IDialogContentProps['componentRef'];
@Input()
styles?: IDialogContentProps['styles'];
@Input()
theme?: IDialogContentProps['theme'];
@Input()
isMultiline?: IDialogContentProps['isMultiline'];
@Input()
showCloseButton?: IDialogContentProps['showCloseButton'];
@Input()
topButtonsProps?: IDialogContentProps['topButtonsProps'];
@Input()
className?: IDialogContentProps['className'];
@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'];
@Input() componentRef?: IDialogContentProps['componentRef'];
@Input() styles?: IDialogContentProps['styles'];
@Input() theme?: IDialogContentProps['theme'];
@Input() isMultiline?: IDialogContentProps['isMultiline'];
@Input() showCloseButton?: IDialogContentProps['showCloseButton'];
@Input() topButtonsProps?: IDialogContentProps['topButtonsProps'];
@Input() className?: IDialogContentProps['className'];
@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()
readonly onDismiss = new EventEmitter<MouseEvent>();
@Output() readonly onDismiss = new EventEmitter<MouseEvent>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

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

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

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

@ -2,17 +2,22 @@
// Licensed under the MIT License.
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';
@Component({
selector: 'fab-fabric',
exportAs: 'fabFabric',
template: `
<Fabric
#reactNode
[componentRef]="componentRef"
[theme]="theme">
<Fabric #reactNode [componentRef]="componentRef" [theme]="theme">
<ReactContent><ng-content></ng-content></ReactContent>
</Fabric>
`,
@ -20,13 +25,10 @@ import { IFabricProps } from 'office-ui-fabric-react/lib/Fabric';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabFabricComponent extends ReactWrapperComponent<IFabricProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IFabricProps['componentRef'];
@Input()
theme?: IFabricProps['theme'];
@Input() componentRef?: IFabricProps['componentRef'];
@Input() theme?: IFabricProps['theme'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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' })
export class GroupItemDirective extends ChangeableItemDirective<IGroup>
implements AfterContentInit, IChangeableItemsContainer<IGroup>, IGroup, OnDestroy {
@ContentChildren(GroupItemDirective)
readonly groupItemsDirectives: QueryList<GroupItemDirective>;
@ContentChildren(GroupItemDirective) readonly groupItemsDirectives: QueryList<GroupItemDirective>;
@Input()
name: IGroup['name'];
@Input()
startIndex: IGroup['startIndex'];
@Input()
count: IGroup['count'];
@Input()
children?: IGroup['children'];
@Input()
level?: IGroup['level'];
@Input()
isCollapsed?: IGroup['isCollapsed'];
@Input()
isShowingAll?: IGroup['isShowingAll'];
@Input()
isDropEnabled?: IGroup['isDropEnabled'];
@Input()
data?: IGroup['data'];
@Input()
ariaLabel?: IGroup['ariaLabel'];
@Input()
hasMoreData?: IGroup['hasMoreData'];
@Input() name: IGroup['name'];
@Input() startIndex: IGroup['startIndex'];
@Input() count: IGroup['count'];
@Input() children?: IGroup['children'];
@Input() level?: IGroup['level'];
@Input() isCollapsed?: IGroup['isCollapsed'];
@Input() isShowingAll?: IGroup['isShowingAll'];
@Input() isDropEnabled?: IGroup['isDropEnabled'];
@Input() data?: IGroup['data'];
@Input() ariaLabel?: IGroup['ariaLabel'];
@Input() hasMoreData?: IGroup['hasMoreData'];
@Output()
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"
[RenderCell]="renderCell && onRenderCell"
[GroupExpandStateChanged]="onGroupExpandStateChangedHandler"
>
>
</GroupedList>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabGroupedListComponent extends ReactWrapperComponent<IGroupedListProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IGroupedListProps['componentRef'];
@Input()
className?: IGroupedListProps['className'];
@Input()
dragDropEvents?: IGroupedListProps['dragDropEvents'];
@Input()
dragDropHelper?: IGroupedListProps['dragDropHelper'];
@Input()
eventsToRegister?: IGroupedListProps['eventsToRegister'];
@Input()
groups?: IGroupedListProps['groups'];
@Input()
items: IGroupedListProps['items'];
@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() componentRef?: IGroupedListProps['componentRef'];
@Input() className?: IGroupedListProps['className'];
@Input() dragDropEvents?: IGroupedListProps['dragDropEvents'];
@Input() dragDropHelper?: IGroupedListProps['dragDropHelper'];
@Input() eventsToRegister?: IGroupedListProps['eventsToRegister'];
@Input() groups?: IGroupedListProps['groups'];
@Input() items: IGroupedListProps['items'];
@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()
renderCell: InputRendererOptions<ICellRenderContext>;
@Input() renderCell: InputRendererOptions<ICellRenderContext>;
@Output()
readonly onGroupExpandStateChanged = new EventEmitter<{ isSomeGroupExpanded: boolean }>();
@Output() readonly onGroupExpandStateChanged = new EventEmitter<{ isSomeGroupExpanded: boolean }>();
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"
[openHotKey]="openHotKey"
(onCardVisible)="onCardVisible.emit()"
(onCardHide)="onCardHide.emit()">
(onCardHide)="onCardHide.emit()"
>
<ReactContent><ng-content></ng-content></ReactContent>
</HoverCard>
`,
@ -46,35 +47,21 @@ import { omit } from '../../utils/omit';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IHoverCardProps['componentRef'];
@Input()
setAriaDescribedBy?: IHoverCardProps['setAriaDescribedBy'];
@Input()
cardOpenDelay?: IHoverCardProps['cardOpenDelay'];
@Input()
cardDismissDelay?: IHoverCardProps['cardDismissDelay'];
@Input()
expandedCardOpenDelay?: IHoverCardProps['expandedCardOpenDelay'];
@Input()
sticky?: IHoverCardProps['sticky'];
@Input()
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() componentRef?: IHoverCardProps['componentRef'];
@Input() setAriaDescribedBy?: IHoverCardProps['setAriaDescribedBy'];
@Input() cardOpenDelay?: IHoverCardProps['cardOpenDelay'];
@Input() cardDismissDelay?: IHoverCardProps['cardDismissDelay'];
@Input() expandedCardOpenDelay?: IHoverCardProps['expandedCardOpenDelay'];
@Input() sticky?: IHoverCardProps['sticky'];
@Input() 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()
set expandingCardOptions(value: IExpandingCardOptions) {
this._expandingCardOptions = value;
@ -87,10 +74,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent<IHoverCardProps
return this._expandingCardOptions;
}
@Output()
readonly onCardVisible = new EventEmitter<void>();
@Output()
readonly onCardHide = new EventEmitter<void>();
@Output() readonly onCardVisible = new EventEmitter<void>();
@Output() readonly onCardHide = new EventEmitter<void>();
transformedExpandingCardProps: IExpandingCardProps;
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"
[imageProps]="imageProps"
[imageErrorAs]="imageErrorAs"
[styles]="styles">
[styles]="styles"
>
</Icon>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabIconComponent extends ReactWrapperComponent<IIconProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IIconProps['componentRef'];
@Input() componentRef?: IIconProps['componentRef'];
@Input()
iconName?: IIconProps['iconName'];
@Input()
ariaLabel?: IIconProps['ariaLabel'];
@Input()
iconType?: IIconProps['iconType'];
@Input()
imageProps?: IIconProps['imageProps'];
@Input()
imageErrorAs?: IIconProps['imageErrorAs'];
@Input()
styles?: IIconProps['styles'];
@Input() iconName?: IIconProps['iconName'];
@Input() ariaLabel?: IIconProps['ariaLabel'];
@Input() iconType?: IIconProps['iconType'];
@Input() imageProps?: IIconProps['imageProps'];
@Input() imageErrorAs?: IIconProps['imageErrorAs'];
@Input() styles?: IIconProps['styles'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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.
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';
@Component({
selector: 'fab-image',
exportAs: 'fabImage',
template: `
<Image
#reactNode
[alt]="alt"
[crossOrigin]="crossOrigin"
[height]="height"
[sizes]="sizes"
[src]="src"
[srcSet]="srcSet"
[useMap]="useMap"
[width]="width"
[styles]="styles"
[theme]="theme"
[className]="className"
[shouldFadeIn]="shouldFadeIn"
[shouldStartVisible]="shouldStartVisible"
[imageFit]="imageFit"
[errorSrc]="errorSrc"
[maximizeFrame]="maximizeFrame"
(onLoadingStateChange)="onLoadingStateChange.emit($event)"
[coverStyle]="coverStyle">
</Image>
<!-- prettier-ignore -->
<Image
#reactNode
[alt]="alt"
[crossOrigin]="crossOrigin"
[height]="height"
[sizes]="sizes"
[src]="src"
[srcSet]="srcSet"
[useMap]="useMap"
[width]="width"
[styles]="styles"
[theme]="theme"
[className]="className"
[shouldFadeIn]="shouldFadeIn"
[shouldStartVisible]="shouldStartVisible"
[imageFit]="imageFit"
[errorSrc]="errorSrc"
[maximizeFrame]="maximizeFrame"
(onLoadingStateChange)="onLoadingStateChange.emit($event)"
[coverStyle]="coverStyle"
>
</Image>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabImageComponent extends ReactWrapperComponent<IImageProps> {
@Input()
alt?: IImageProps['alt'];
@Input()
crossOrigin?: IImageProps['crossOrigin'];
@Input()
height?: IImageProps['height'];
@Input()
sizes?: IImageProps['sizes'];
@Input()
src?: IImageProps['src'];
@Input()
srcSet?: IImageProps['srcSet'];
@Input()
useMap?: IImageProps['useMap'];
@Input()
width?: IImageProps['width'];
@Input() alt?: IImageProps['alt'];
@Input() crossOrigin?: IImageProps['crossOrigin'];
@Input() height?: IImageProps['height'];
@Input() sizes?: IImageProps['sizes'];
@Input() src?: IImageProps['src'];
@Input() srcSet?: IImageProps['srcSet'];
@Input() useMap?: IImageProps['useMap'];
@Input() width?: IImageProps['width'];
@Input()
styles?: IImageProps['styles'];
@Input()
theme?: IImageProps['theme'];
@Input()
className?: IImageProps['className'];
@Input()
shouldFadeIn?: IImageProps['shouldFadeIn'];
@Input()
shouldStartVisible?: IImageProps['shouldStartVisible'];
@Input()
imageFit?: IImageProps['imageFit'];
@Input()
errorSrc?: IImageProps['errorSrc'];
@Input()
maximizeFrame?: IImageProps['maximizeFrame'];
@Input()
coverStyle?: IImageProps['coverStyle'];
@Input() styles?: IImageProps['styles'];
@Input() theme?: IImageProps['theme'];
@Input() className?: IImageProps['className'];
@Input() shouldFadeIn?: IImageProps['shouldFadeIn'];
@Input() shouldStartVisible?: IImageProps['shouldStartVisible'];
@Input() imageFit?: IImageProps['imageFit'];
@Input() errorSrc?: IImageProps['errorSrc'];
@Input() maximizeFrame?: IImageProps['maximizeFrame'];
@Input() coverStyle?: IImageProps['coverStyle'];
@Output()
readonly onLoadingStateChange = new EventEmitter<ImageLoadState>();
@Output() readonly onLoadingStateChange = new EventEmitter<ImageLoadState>();
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer);

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

@ -2,7 +2,15 @@
// Licensed under the MIT License.
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';
@Component({
@ -10,33 +18,32 @@ import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
exportAs: 'fabLink',
template: `
<Disguise
#reactNode
[disguiseRootAs]="LinkType"
[href]="href"
[type]="type"
[download]="download"
[hrefLang]="hrefLang"
[media]="media"
[rel]="rel"
[target]="target"
[autoFocus]="autoFocus"
[form]="form"
[formAction]="formAction"
[formEncType]="formEncType"
[formMethod]="formMethod"
[formNoValidate]="formNoValidate"
[formTarget]="formTarget"
[name]="name"
[value]="value"
[as]="linkAs"
[componentRef]="componentRef"
[disabled]="disabled"
[styles]="styles"
[theme]="theme"
[keytipProps]="keytipProps">
<ReactContent><ng-content></ng-content></ReactContent>
#reactNode
[disguiseRootAs]="LinkType"
[href]="href"
[type]="type"
[download]="download"
[hrefLang]="hrefLang"
[media]="media"
[rel]="rel"
[target]="target"
[autoFocus]="autoFocus"
[form]="form"
[formAction]="formAction"
[formEncType]="formEncType"
[formMethod]="formMethod"
[formNoValidate]="formNoValidate"
[formTarget]="formTarget"
[name]="name"
[value]="value"
[as]="linkAs"
[componentRef]="componentRef"
[disabled]="disabled"
[styles]="styles"
[theme]="theme"
[keytipProps]="keytipProps"
>
<ReactContent><ng-content></ng-content></ReactContent>
</Disguise>
`,
styles: ['react-renderer'],
@ -45,54 +52,31 @@ import { ILinkProps, Link } from 'office-ui-fabric-react/lib/Link';
export class FabLinkComponent extends ReactWrapperComponent<ILinkProps> {
readonly LinkType: any = Link;
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
href: ILinkProps['href'];
@Input()
type?: ILinkProps['type'];
@Input()
download?: ILinkProps['download'];
@Input()
hrefLang?: ILinkProps['hrefLang'];
@Input()
media?: ILinkProps['media'];
@Input()
rel?: ILinkProps['rel'];
@Input()
target?: ILinkProps['target'];
@Input()
autoFocus?: ILinkProps['autoFocus'];
@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() href: ILinkProps['href'];
@Input() type?: ILinkProps['type'];
@Input() download?: ILinkProps['download'];
@Input() hrefLang?: ILinkProps['hrefLang'];
@Input() media?: ILinkProps['media'];
@Input() rel?: ILinkProps['rel'];
@Input() target?: ILinkProps['target'];
@Input() autoFocus?: ILinkProps['autoFocus'];
@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()
componentRef?: ILinkProps['componentRef'];
@Input()
disabled?: ILinkProps['disabled'];
@Input()
styles?: ILinkProps['styles'];
@Input()
theme?: ILinkProps['theme'];
@Input('as')
linkAs?: string | React.ComponentClass | React.StatelessComponent;
@Input()
keytipProps?: ILinkProps['keytipProps'];
@Input() componentRef?: ILinkProps['componentRef'];
@Input() disabled?: ILinkProps['disabled'];
@Input() styles?: ILinkProps['styles'];
@Input() theme?: ILinkProps['theme'];
@Input('as') linkAs?: string | React.ComponentClass | React.StatelessComponent;
@Input() keytipProps?: ILinkProps['keytipProps'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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"
[styles]="styles"
[theme]="theme"
[ShouldStartSelection]="onShouldStartSelection">
[ShouldStartSelection]="onShouldStartSelection"
>
<ReactContent><ng-content></ng-content></ReactContent>
</MarqueeSelection>
`,
@ -36,27 +37,17 @@ import { IMarqueeSelectionProps } from 'office-ui-fabric-react/lib/MarqueeSelect
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMarqueeSelectionComponent extends ReactWrapperComponent<IMarqueeSelectionProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IMarqueeSelectionProps['componentRef'];
@Input()
selection: IMarqueeSelectionProps['selection'];
@Input()
rootProps?: IMarqueeSelectionProps['rootProps'];
@Input()
onShouldStartSelection?: (ev: MouseEvent) => boolean;
@Input()
isEnabled?: IMarqueeSelectionProps['isEnabled'];
@Input()
isDraggingConstrainedToRoot?: IMarqueeSelectionProps['isDraggingConstrainedToRoot'];
@Input()
className?: IMarqueeSelectionProps['className'];
@Input()
theme?: IMarqueeSelectionProps['theme'];
@Input()
styles?: IMarqueeSelectionProps['styles'];
@Input() componentRef?: IMarqueeSelectionProps['componentRef'];
@Input() selection: IMarqueeSelectionProps['selection'];
@Input() rootProps?: IMarqueeSelectionProps['rootProps'];
@Input() onShouldStartSelection?: (ev: MouseEvent) => boolean;
@Input() 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) {
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"
[styles]="styles"
[Dismiss]="onDismissInternal"
[actions]="actions">
[actions]="actions"
>
<ReactContent><ng-content></ng-content></ReactContent>
</MessageBar>
`,
@ -42,39 +43,25 @@ import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabMessageBarComponent extends ReactWrapperComponent<IMessageBarProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IMessageBarProps['componentRef'];
@Input()
messageBarType?: IMessageBarProps['messageBarType'];
@Input()
ariaLabel?: IMessageBarProps['ariaLabel'];
@Input()
isMultiline?: IMessageBarProps['isMultiline'];
@Input()
dismissButtonAriaLabel?: IMessageBarProps['dismissButtonAriaLabel'];
@Input()
truncated?: IMessageBarProps['truncated'];
@Input()
overflowButtonAriaLabel?: IMessageBarProps['overflowButtonAriaLabel'];
@Input()
className?: IMessageBarProps['className'];
@Input()
theme?: IMessageBarProps['theme'];
@Input()
styles?: IMessageBarProps['styles'];
@Input() componentRef?: IMessageBarProps['componentRef'];
@Input() messageBarType?: IMessageBarProps['messageBarType'];
@Input() ariaLabel?: IMessageBarProps['ariaLabel'];
@Input() isMultiline?: IMessageBarProps['isMultiline'];
@Input() dismissButtonAriaLabel?: IMessageBarProps['dismissButtonAriaLabel'];
@Input() truncated?: IMessageBarProps['truncated'];
@Input() overflowButtonAriaLabel?: IMessageBarProps['overflowButtonAriaLabel'];
@Input() className?: IMessageBarProps['className'];
@Input() theme?: IMessageBarProps['theme'];
@Input() styles?: IMessageBarProps['styles'];
@Input()
renderActions?: InputRendererOptions<{}>;
@Input() renderActions?: InputRendererOptions<{}>;
// Non-React prop, used together with onDismiss to allow it to be an Output EventEmitter.
@Input()
dismissable?: boolean = null;
@Input() dismissable?: boolean = null;
@Output()
readonly onDismiss = new EventEmitter<MouseEvent>();
@Output() readonly onDismiss = new EventEmitter<MouseEvent>();
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: `
<Modal
#reactNode
[responsiveMode]="responsiveMode"
[elementToFocusOnDismiss]="elementToFocusOnDismiss"
[ignoreExternalFocusing]="ignoreExternalFocusing"
[forceFocusInsideTrap]="forceFocusInsideTrap"
[firstFocusableSelector]="firstFocusableSelector"
[closeButtonAriaLabel]="closeButtonAriaLabel"
[isClickableOutsideFocusTrap]="isClickableOutsideFocusTrap"
[componentRef]="componentRef"
[isOpen]="isOpen"
[isDarkOverlay]="isDarkOverlay"
@ -44,7 +41,8 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
[subtitleAriaId]="subtitleAriaId"
[Dismiss]="onDismissHandler"
(onLayerDidMount)="onLayerDidMount.emit()"
(onDismissed)="onDismissed.emit()">
(onDismissed)="onDismissed.emit()"
>
<ReactContent><ng-content></ng-content></ReactContent>
</Modal>
`,
@ -53,50 +51,30 @@ import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/d
})
export class FabModalComponent extends ReactWrapperComponent<IModalProps>
implements IWithResponsiveModeState, IAccessiblePopupProps {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
responsiveMode?: IModalProps['responsiveMode'];
@Input() responsiveMode?: IModalProps['responsiveMode'];
@Input()
elementToFocusOnDismiss?: IModalProps['elementToFocusOnDismiss'];
@Input()
ignoreExternalFocusing?: IModalProps['ignoreExternalFocusing'];
@Input()
forceFocusInsideTrap?: IModalProps['forceFocusInsideTrap'];
@Input()
firstFocusableSelector?: IModalProps['firstFocusableSelector'];
@Input()
closeButtonAriaLabel?: IModalProps['closeButtonAriaLabel'];
@Input()
isClickableOutsideFocusTrap?: IModalProps['isClickableOutsideFocusTrap'];
@Input() elementToFocusOnDismiss?: IModalProps['elementToFocusOnDismiss'];
@Input() ignoreExternalFocusing?: IModalProps['ignoreExternalFocusing'];
@Input() forceFocusInsideTrap?: IModalProps['forceFocusInsideTrap'];
@Input() firstFocusableSelector?: IModalProps['firstFocusableSelector'];
@Input() closeButtonAriaLabel?: IModalProps['closeButtonAriaLabel'];
@Input() isClickableOutsideFocusTrap?: IModalProps['isClickableOutsideFocusTrap'];
@Input()
componentRef?: IModalProps['componentRef'];
@Input()
isOpen?: IModalProps['isOpen'];
@Input()
isDarkOverlay?: IModalProps['isDarkOverlay'];
@Input()
isBlocking?: IModalProps['isBlocking'];
@Input()
className?: IModalProps['className'];
@Input()
containerClassName?: IModalProps['containerClassName'];
@Input()
scrollableContentClassName?: IModalProps['scrollableContentClassName'];
@Input()
titleAriaId?: IModalProps['titleAriaId'];
@Input()
subtitleAriaId?: IModalProps['subtitleAriaId'];
@Input() componentRef?: IModalProps['componentRef'];
@Input() isOpen?: IModalProps['isOpen'];
@Input() isDarkOverlay?: IModalProps['isDarkOverlay'];
@Input() isBlocking?: IModalProps['isBlocking'];
@Input() className?: IModalProps['className'];
@Input() containerClassName?: IModalProps['containerClassName'];
@Input() scrollableContentClassName?: IModalProps['scrollableContentClassName'];
@Input() titleAriaId?: IModalProps['titleAriaId'];
@Input() subtitleAriaId?: IModalProps['subtitleAriaId'];
@Output()
readonly onLayerDidMount = new EventEmitter<void>();
@Output()
readonly onDismiss = new EventEmitter<MouseEvent>();
@Output()
readonly onDismissed = new EventEmitter<void>();
@Output() readonly onLayerDidMount = new EventEmitter<void>();
@Output() readonly onDismiss = new EventEmitter<MouseEvent>();
@Output() readonly onDismissed = new EventEmitter<void>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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"
[Dismiss]="onDismissHandler"
(onDismissed)="onDismissed.emit($event)"
(onLightDismissClick)="onLightDismissClick.emit($event)">
<ReactContent><ng-content></ng-content></ReactContent>
(onLightDismissClick)="onLightDismissClick.emit($event)"
>
<ReactContent><ng-content></ng-content></ReactContent>
</Panel>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPanelComponent extends ReactWrapperComponent<IPanelProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IPanelProps['componentRef'];
@Input()
isOpen?: IPanelProps['isOpen'];
@Input()
hasCloseButton?: IPanelProps['hasCloseButton'];
@Input()
isLightDismiss?: IPanelProps['isLightDismiss'];
@Input()
isHiddenOnDismiss?: IPanelProps['isHiddenOnDismiss'];
@Input()
isBlocking?: IPanelProps['isBlocking'];
@Input()
isFooterAtBottom?: IPanelProps['isFooterAtBottom'];
@Input()
headerText?: IPanelProps['headerText'];
@Input()
styles?: IPanelProps['styles'];
@Input()
theme?: IPanelProps['theme'];
@Input()
className?: IPanelProps['className'];
@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() componentRef?: IPanelProps['componentRef'];
@Input() isOpen?: IPanelProps['isOpen'];
@Input() hasCloseButton?: IPanelProps['hasCloseButton'];
@Input() isLightDismiss?: IPanelProps['isLightDismiss'];
@Input() isHiddenOnDismiss?: IPanelProps['isHiddenOnDismiss'];
@Input() isBlocking?: IPanelProps['isBlocking'];
@Input() isFooterAtBottom?: IPanelProps['isFooterAtBottom'];
@Input() headerText?: IPanelProps['headerText'];
@Input() styles?: IPanelProps['styles'];
@Input() theme?: IPanelProps['theme'];
@Input() className?: IPanelProps['className'];
@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()
renderNavigation?: InputRendererOptions<IPanelProps>;
@Input()
renderHeader?: InputRendererOptions<IPanelHeaderRenderContext>;
@Input()
renderBody?: InputRendererOptions<IPanelProps>;
@Input()
renderFooter?: InputRendererOptions<IPanelProps>;
@Input()
renderFooterContent?: InputRendererOptions<IPanelProps>;
@Input() renderNavigation?: InputRendererOptions<IPanelProps>;
@Input() renderHeader?: InputRendererOptions<IPanelHeaderRenderContext>;
@Input() renderBody?: InputRendererOptions<IPanelProps>;
@Input() renderFooter?: InputRendererOptions<IPanelProps>;
@Input() renderFooterContent?: InputRendererOptions<IPanelProps>;
@Output()
readonly onLightDismissClick = new EventEmitter<void>();
@Output()
readonly onDismiss = new EventEmitter<{ ev?: Event }>();
@Output()
readonly onDismissed = new EventEmitter<void>();
@Output() readonly onLightDismissClick = new EventEmitter<void>();
@Output() readonly onDismiss = new EventEmitter<{ ev?: Event }>();
@Output() readonly onDismissed = new EventEmitter<void>();
private _renderHeader: JsxRenderFunc<IPanelHeaderRenderContext>;
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>
implements OnInit {
@Input()
text?: IPersonaProps['text'];
@Input()
size?: IPersonaProps['size'];
@Input()
imageShouldFadeIn?: IPersonaProps['imageShouldFadeIn'];
@Input()
imageShouldStartVisible?: IPersonaProps['imageShouldStartVisible'];
@Input()
imageUrl?: IPersonaProps['imageUrl'];
@Input()
imageAlt?: IPersonaProps['imageAlt'];
@Input()
imageInitials?: IPersonaProps['imageInitials'];
@Input()
allowPhoneInitials?: IPersonaProps['allowPhoneInitials'];
@Input()
initialsColor?: IPersonaProps['initialsColor'];
@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() text?: IPersonaProps['text'];
@Input() size?: IPersonaProps['size'];
@Input() imageShouldFadeIn?: IPersonaProps['imageShouldFadeIn'];
@Input() imageShouldStartVisible?: IPersonaProps['imageShouldStartVisible'];
@Input() imageUrl?: IPersonaProps['imageUrl'];
@Input() imageAlt?: IPersonaProps['imageAlt'];
@Input() imageInitials?: IPersonaProps['imageInitials'];
@Input() allowPhoneInitials?: IPersonaProps['allowPhoneInitials'];
@Input() initialsColor?: IPersonaProps['initialsColor'];
@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()
renderCoin?: InputRendererOptions<IPersonaSharedProps>;
@Input()
renderInitials?: InputRendererOptions<IPersonaSharedProps>;
@Input() renderCoin?: InputRendererOptions<IPersonaSharedProps>;
@Input() renderInitials?: InputRendererOptions<IPersonaSharedProps>;
@Output()
readonly onPhotoLoadingStateChange = new EventEmitter<ImageLoadState>();
@Output() readonly onPhotoLoadingStateChange = new EventEmitter<ImageLoadState>();
onRenderCoin: (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"
[RenderTertiaryText]="renderTertiaryText && onRenderTertiaryText"
[RenderOptionalText]="renderOptionalText && onRenderOptionalText"
(onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)">
(onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)"
>
</Persona>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPersonaComponent extends FabPersonaBaseComponent<IPersonaProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IPersonaProps['componentRef'];
@Input()
className?: IPersonaProps['className'];
@Input()
styles?: IPersonaProps['styles'];
@Input()
coinProps?: IPersonaProps['coinProps'];
@Input() componentRef?: IPersonaProps['componentRef'];
@Input() className?: IPersonaProps['className'];
@Input() styles?: IPersonaProps['styles'];
@Input() coinProps?: IPersonaProps['coinProps'];
@Input()
renderPrimaryText?: InputRendererOptions<IPersonaProps>;
@Input()
renderSecondaryText?: InputRendererOptions<IPersonaProps>;
@Input()
renderTertiaryText?: InputRendererOptions<IPersonaProps>;
@Input()
renderOptionalText?: InputRendererOptions<IPersonaProps>;
@Input() renderPrimaryText?: InputRendererOptions<IPersonaProps>;
@Input() renderSecondaryText?: InputRendererOptions<IPersonaProps>;
@Input() renderTertiaryText?: InputRendererOptions<IPersonaProps>;
@Input() renderOptionalText?: InputRendererOptions<IPersonaProps>;
onRenderPrimaryText: (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"
[RenderInitials]="renderInitials && onRenderInitials"
[RenderCoin]="renderCoin && onRenderCoin"
(onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)">
(onPhotoLoadingStateChange)="onPhotoLoadingStateChange.emit($event)"
>
</PersonaCoin>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPersonaCoinComponent extends FabPersonaBaseComponent<IPersonaCoinProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IPersonaCoinProps['componentRef'];
@Input()
styles?: IPersonaCoinProps['styles'];
@Input()
className?: IPersonaCoinProps['className'];
@Input() componentRef?: IPersonaCoinProps['componentRef'];
@Input() styles?: IPersonaCoinProps['styles'];
@Input() className?: IPersonaCoinProps['className'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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>>
extends ReactWrapperComponent<TProps>
implements OnInit {
@Input()
componentRef?: IBasePickerProps<T>['componentRef'];
@Input()
resolveDelay?: IBasePickerProps<T>['resolveDelay'];
@Input()
defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
@Input()
getTextFromItem?: IBasePickerProps<T>['getTextFromItem'];
@Input()
className?: IBasePickerProps<T>['className'];
@Input()
searchingText?: IBasePickerProps<T>['searchingText'];
@Input()
disabled?: IBasePickerProps<T>['disabled'];
@Input()
itemLimit?: IBasePickerProps<T>['itemLimit'];
@Input()
createGenericItem?: IBasePickerProps<T>['createGenericItem'];
@Input()
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() componentRef?: IBasePickerProps<T>['componentRef'];
@Input() resolveDelay?: IBasePickerProps<T>['resolveDelay'];
@Input() defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
@Input() getTextFromItem?: IBasePickerProps<T>['getTextFromItem'];
@Input() className?: IBasePickerProps<T>['className'];
@Input() searchingText?: IBasePickerProps<T>['searchingText'];
@Input() disabled?: IBasePickerProps<T>['disabled'];
@Input() itemLimit?: IBasePickerProps<T>['itemLimit'];
@Input() createGenericItem?: IBasePickerProps<T>['createGenericItem'];
@Input() 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()
set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) {
@ -67,21 +48,14 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
return this._pickerSuggestionsOptions;
}
@Input()
renderItem?: InputRendererOptions<IPickerItemProps<T>>;
@Input()
renderSuggestionsItem?: InputRendererOptions<IRenderSuggestionItemContext<T>>;
@Input() renderItem?: InputRendererOptions<IPickerItemProps<T>>;
@Input() renderSuggestionsItem?: InputRendererOptions<IRenderSuggestionItemContext<T>>;
@Output()
readonly onChange = new EventEmitter<{ items?: T[] }>();
@Output()
readonly onFocus = new EventEmitter<FocusEvent>();
@Output()
readonly onBlur = new EventEmitter<FocusEvent>();
@Output()
readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
@Output()
readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
@Output() readonly onChange = new EventEmitter<{ items?: T[] }>();
@Output() readonly onFocus = new EventEmitter<FocusEvent>();
@Output() readonly onBlur = new EventEmitter<FocusEvent>();
@Output() readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
@Output() readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
pickerSuggestionsProps: IBasePickerSuggestionsProps;
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: `
<TagPicker
#reactNode
[componentRef]="componentRef"
[resolveDelay]="resolveDelay"
[defaultSelectedItems]="defaultSelectedItems"
@ -40,23 +39,21 @@ import { FabBasePickerComponent } from '../base-picker/base-picker.component';
[ResolveSuggestions]="onResolveSuggestions"
[GetMoreResults]="onGetMoreResults"
[ValidateInput]="onValidateInput"
[RenderItem]="renderItem &&onRenderItem"
[RenderItem]="renderItem && onRenderItem"
[RenderSuggestionsItem]="renderSuggestionsItem && onRenderSuggestionsItem"
[Change]="onChangeHandler"
[Focus]="onFocusHandler"
[Blur]="onBlurHandler"
[Dismiss]="onDismissHandler"
[RemoveSuggestion]="onRemoveSuggestionHandler">
[RemoveSuggestion]="onRemoveSuggestionHandler"
>
</TagPicker>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabTagPickerComponent extends FabBasePickerComponent<ITag, ITagPickerProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: 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"
[itemIcon]="itemIcon"
[keytipProps]="keytipProps"
[RenderItemLink]="renderItemLink && onRenderItemLink">
[RenderItemLink]="renderItemLink && onRenderItemLink"
>
<ReactContent><ng-content></ng-content></ReactContent>
</PivotItem>
`,
@ -42,44 +43,25 @@ import * as React from 'react';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps> implements OnInit {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@passProp()
@Input()
componentRef?: IPivotItemProps['componentRef'];
@Input() @passProp() componentRef?: IPivotItemProps['componentRef'];
@passProp()
@Input()
headerText?: IPivotItemProps['headerText'];
@Input() @passProp() headerText?: IPivotItemProps['headerText'];
@passProp()
@Input()
headerButtonProps?: IPivotItemProps['headerButtonProps'];
@Input() @passProp() headerButtonProps?: IPivotItemProps['headerButtonProps'];
@passProp()
@Input()
itemKey?: IPivotItemProps['itemKey'];
@Input() @passProp() itemKey?: IPivotItemProps['itemKey'];
@passProp()
@Input()
ariaLabel?: IPivotItemProps['ariaLabel'];
@Input() @passProp() ariaLabel?: IPivotItemProps['ariaLabel'];
@passProp()
@Input()
itemCount?: IPivotItemProps['itemCount'];
@Input() @passProp() itemCount?: IPivotItemProps['itemCount'];
@passProp()
@Input()
itemIcon?: IPivotItemProps['itemIcon'];
@Input() @passProp() itemIcon?: IPivotItemProps['itemIcon'];
@passProp()
@Input()
keytipProps?: IPivotItemProps['keytipProps'];
@Input() @passProp() keytipProps?: IPivotItemProps['keytipProps'];
@passProp()
@Input()
renderItemLink?: InputRendererOptions<IPivotItemProps>;
@Input() @passProp() renderItemLink?: InputRendererOptions<IPivotItemProps>;
onRenderItemLink: (props?: IPivotItemProps, defaultRender?: JsxRenderFunc<IPivotItemProps>) => JSX.Element;
@ -101,7 +83,6 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
[disguiseRootAs]="PivotType"
[disguiseChildrenAs]="PivotItemType"
[ngChildComponents]="pivotItems?.toArray()"
[componentRef]="componentRef"
[styles]="styles"
[theme]="theme"
@ -113,10 +94,9 @@ export class FabPivotItemComponent extends ReactWrapperComponent<IPivotItemProps
[linkFormat]="linkFormat"
[headersOnly]="headersOnly"
[getTabId]="getTabId"
[LinkClick]="onLinkClickHandler">
<ReactContent>
<ng-content select="fab-pivot-item"></ng-content>
</ReactContent>
[LinkClick]="onLinkClickHandler"
>
<ReactContent><ng-content select="fab-pivot-item"></ng-content></ReactContent>
</Disguise>
`,
styles: ['react-renderer'],
@ -126,37 +106,23 @@ export class FabPivotComponent extends ReactWrapperComponent<IPivotProps> {
readonly PivotType = Pivot;
readonly PivotItemType = PivotItem;
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@ContentChildren(FabPivotItemComponent)
pivotItems: QueryList<FabPivotItemComponent>;
@ContentChildren(FabPivotItemComponent) pivotItems: QueryList<FabPivotItemComponent>;
@Input()
componentRef?: IPivotProps['componentRef'];
@Input()
styles?: IPivotProps['styles'];
@Input()
theme?: IPivotProps['theme'];
@Input()
className?: IPivotProps['className'];
@Input()
initialSelectedIndex?: IPivotProps['initialSelectedIndex'];
@Input()
initialSelectedKey?: IPivotProps['initialSelectedKey'];
@Input()
selectedKey?: IPivotProps['selectedKey'];
@Input()
linkSize?: IPivotProps['linkSize'];
@Input()
linkFormat?: IPivotProps['linkFormat'];
@Input()
headersOnly?: IPivotProps['headersOnly'];
@Input()
getTabId?: IPivotProps['getTabId'];
@Input() componentRef?: IPivotProps['componentRef'];
@Input() styles?: IPivotProps['styles'];
@Input() theme?: IPivotProps['theme'];
@Input() className?: IPivotProps['className'];
@Input() initialSelectedIndex?: IPivotProps['initialSelectedIndex'];
@Input() initialSelectedKey?: IPivotProps['initialSelectedKey'];
@Input() selectedKey?: IPivotProps['selectedKey'];
@Input() linkSize?: IPivotProps['linkSize'];
@Input() linkFormat?: IPivotProps['linkFormat'];
@Input() headersOnly?: IPivotProps['headersOnly'];
@Input() getTabId?: IPivotProps['getTabId'];
@Output()
readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
@Output() readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>();
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
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"
[Search]="onSearchHandler"
[Clear]="onClearHandler"
[Escape]="onEscapeHandler">
[Escape]="onEscapeHandler"
>
</SearchBox>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: ISearchBoxProps['componentRef'];
@Input()
placeholder?: ISearchBoxProps['placeholder'];
@Input()
value?: ISearchBoxProps['value'];
@Input()
className?: ISearchBoxProps['className'];
@Input()
ariaLabel?: ISearchBoxProps['ariaLabel'];
@Input()
underlined?: ISearchBoxProps['underlined'];
@Input()
theme?: ISearchBoxProps['theme'];
@Input()
styles?: ISearchBoxProps['styles'];
@Input()
disableAnimation?: ISearchBoxProps['disableAnimation'];
@Input() componentRef?: ISearchBoxProps['componentRef'];
@Input() placeholder?: ISearchBoxProps['placeholder'];
@Input() value?: ISearchBoxProps['value'];
@Input() className?: ISearchBoxProps['className'];
@Input() ariaLabel?: ISearchBoxProps['ariaLabel'];
@Input() underlined?: ISearchBoxProps['underlined'];
@Input() theme?: ISearchBoxProps['theme'];
@Input() styles?: ISearchBoxProps['styles'];
@Input() disableAnimation?: ISearchBoxProps['disableAnimation'];
@Input()
set clearButtonOptions(value: IButtonOptions) {
this._clearButtonOptions = value;
@ -79,17 +70,12 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
return this._clearButtonOptions;
}
@Input()
iconProps?: ISearchBoxProps['iconProps'];
@Input() iconProps?: ISearchBoxProps['iconProps'];
@Output()
readonly onChange = new EventEmitter<{ newValue: any }>();
@Output()
readonly onSearch = new EventEmitter<{ newValue: any }>();
@Output()
readonly onClear = new EventEmitter<{ ev?: any }>();
@Output()
readonly onEscape = new EventEmitter<{ ev?: any }>();
@Output() readonly onChange = new EventEmitter<{ newValue: any }>();
@Output() readonly onSearch = new EventEmitter<{ newValue: any }>();
@Output() readonly onClear = new EventEmitter<{ ev?: any }>();
@Output() readonly onEscape = new EventEmitter<{ ev?: any }>();
clearButtonProps: IButtonProps;
@ -168,14 +154,14 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
export interface IButtonOptions
extends Omit<
IButtonProps,
| 'onRenderIcon'
| 'onRenderText'
| 'onRenderDescription'
| 'onRenderAriaDescription'
| 'onRenderChildren'
| 'onRenderMenuIcon'
> {
IButtonProps,
| 'onRenderIcon'
| 'onRenderText'
| 'onRenderDescription'
| 'onRenderAriaDescription'
| 'onRenderChildren'
| 'onRenderMenuIcon'
> {
readonly renderIcon: InputRendererOptions<IButtonProps>;
readonly renderText: 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"
[className]="className"
[theme]="theme"
[customElementsGroup]="customElementsGroup">
[customElementsGroup]="customElementsGroup"
>
<ReactContent><ng-content></ng-content></ReactContent>
</Shimmer>
`,
@ -37,25 +38,16 @@ import { IShimmerProps } from 'office-ui-fabric-react/lib/Shimmer';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IShimmerProps['componentRef'];
@Input()
width?: IShimmerProps['width'];
@Input()
isDataLoaded?: IShimmerProps['isDataLoaded'];
@Input()
shimmerElements?: IShimmerProps['shimmerElements'];
@Input()
ariaLabel?: IShimmerProps['ariaLabel'];
@Input()
styles?: IShimmerProps['styles'];
@Input()
className?: IShimmerProps['className'];
@Input()
theme?: IShimmerProps['theme'];
@Input() componentRef?: IShimmerProps['componentRef'];
@Input() width?: IShimmerProps['width'];
@Input() isDataLoaded?: IShimmerProps['isDataLoaded'];
@Input() shimmerElements?: IShimmerProps['shimmerElements'];
@Input() ariaLabel?: IShimmerProps['ariaLabel'];
@Input() styles?: IShimmerProps['styles'];
@Input() className?: IShimmerProps['className'];
@Input() theme?: IShimmerProps['theme'];
@Input()
set renderCustomElementsGroup(value: InputRendererOptions<{}>) {
@ -92,30 +84,22 @@ export class FabShimmerComponent extends ReactWrapperComponent<IShimmerProps> {
[width]="width"
[theme]="theme"
[styles]="styles"
>
>
</ShimmerElementsGroup>
`,
styles: ['react-renderer'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FabShimmerElementsGroupComponent extends ReactWrapperComponent<IShimmerElementsGroupProps> {
@ViewChild('reactNode')
protected reactNodeRef: ElementRef;
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
@Input()
componentRef?: IShimmerElementsGroupProps['componentRef'];
@Input()
rowHeight?: IShimmerElementsGroupProps['rowHeight'];
@Input()
shimmerElements?: IShimmerElementsGroupProps['shimmerElements'];
@Input()
flexWrap?: IShimmerElementsGroupProps['flexWrap'];
@Input()
width?: IShimmerElementsGroupProps['width'];
@Input()
theme?: IShimmerElementsGroupProps['theme'];
@Input()
styles?: IShimmerElementsGroupProps['styles'];
@Input() componentRef?: IShimmerElementsGroupProps['componentRef'];
@Input() rowHeight?: IShimmerElementsGroupProps['rowHeight'];
@Input() shimmerElements?: IShimmerElementsGroupProps['shimmerElements'];
@Input() flexWrap?: IShimmerElementsGroupProps['flexWrap'];
@Input() width?: IShimmerElementsGroupProps['width'];
@Input() theme?: IShimmerElementsGroupProps['theme'];
@Input() styles?: IShimmerElementsGroupProps['styles'];
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true });

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