Skip to content

Commit b155012

Browse files
author
Ben Grynhaus
committed
[Fabric] Added 'Omit' type and adjust types
# Conflicts: # libs/fabric/src/lib/components/command-bar/command-bar.component.ts
1 parent 9e9c904 commit b155012

File tree

8 files changed

+149
-199
lines changed

8 files changed

+149
-199
lines changed

‎libs/fabric/src/lib/components/command-bar/command-bar.component.ts‎

Lines changed: 2 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
import { Subscription } from 'rxjs';
1919
import { ICommandBarItemProps, ICommandBarProps } from 'office-ui-fabric-react/lib/CommandBar';
2020
import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu';
21-
21+
import { Omit } from '../../declarations/omit';
2222
import omit from '../../utils/omit';
2323
import { TypedChanges, OnChanges } from '../../types/angular/typed-changes';
2424
import {
@@ -220,44 +220,7 @@ export class FabCommandBarComponent extends ReactWrapperComponent<ICommandBarPro
220220
}
221221
}
222222

223-
export interface ICommandBarItemOptions<TData = any>
224-
extends Pick<
225-
ICommandBarItemProps,
226-
| 'iconOnly'
227-
| 'buttonStyles'
228-
| 'cacheKey'
229-
| 'renderedInOverflow'
230-
| 'componentRef'
231-
| 'key'
232-
| 'text'
233-
| 'secondaryText'
234-
| 'iconProps'
235-
| 'submenuIconProps'
236-
| 'disabled'
237-
| 'primaryDisabled'
238-
| 'shortCut'
239-
| 'canCheck'
240-
| 'checked'
241-
| 'split'
242-
| 'data'
243-
| 'onClick'
244-
| 'href'
245-
| 'target'
246-
| 'rel'
247-
| 'subMenuProps'
248-
| 'getItemClassNames'
249-
| 'getSplitButtonVerticalDividerClassNames'
250-
| 'sectionProps'
251-
| 'className'
252-
| 'style'
253-
| 'ariaLabel'
254-
| 'title'
255-
| 'onMouseDown'
256-
| 'role'
257-
| 'customOnRenderListLength'
258-
| 'keytipProps'
259-
| 'inactive'
260-
> {
223+
export interface ICommandBarItemOptions<TData = any> extends Omit<ICommandBarItemProps, 'onRender' | 'onRenderIcon'> {
261224
readonly [propertyName: string]: any;
262225
readonly renderIcon?: InputRendererOptions<ICommandBarItemOptionsRenderIconContext>;
263226
readonly render?: InputRendererOptions<ICommandBarItemOptionsRenderContext>;

‎libs/fabric/src/lib/components/pickers/base-picker/base-picker.component.ts‎

Lines changed: 63 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,56 @@
1-
import { ReactWrapperComponent, InputRendererOptions, JsxRenderFunc } from '@angular-react/core';
2-
import {
3-
ChangeDetectionStrategy,
4-
Component,
5-
ElementRef,
6-
Input,
7-
ViewChild,
8-
OnInit,
9-
Output,
10-
EventEmitter,
11-
ChangeDetectorRef,
12-
} from '@angular/core';
13-
import { IBasePickerProps, BaseAutoFill } from 'office-ui-fabric-react/lib/Pickers';
1+
import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core';
2+
import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
143
import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
15-
import { IPickerItemProps, IBasePickerSuggestionsProps } from 'office-ui-fabric-react/lib/Pickers';
4+
import {
5+
BaseAutoFill,
6+
IBasePickerProps,
7+
IBasePickerSuggestionsProps,
8+
IPickerItemProps,
9+
} from 'office-ui-fabric-react/lib/Pickers';
10+
import { Omit } from '../../../declarations/omit';
1611
import omit from '../../../utils/omit';
1712

1813
export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<T>>
1914
extends ReactWrapperComponent<TProps>
2015
implements OnInit {
21-
@Input() componentRef?: IBasePickerProps<T>['componentRef'];
22-
@Input() resolveDelay?: IBasePickerProps<T>['resolveDelay'];
23-
@Input() defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
24-
@Input() getTextFromItem?: IBasePickerProps<T>['getTextFromItem'];
25-
@Input() className?: IBasePickerProps<T>['className'];
26-
@Input() searchingText?: IBasePickerProps<T>['searchingText'];
27-
@Input() disabled?: IBasePickerProps<T>['disabled'];
28-
@Input() itemLimit?: IBasePickerProps<T>['itemLimit'];
29-
@Input() createGenericItem?: IBasePickerProps<T>['createGenericItem'];
30-
@Input() removeButtonAriaLabel?: IBasePickerProps<T>['removeButtonAriaLabel'];
31-
@Input() selectedItems?: IBasePickerProps<T>['selectedItems'];
32-
@Input() enableSelectedSuggestionAlert?: IBasePickerProps<T>['enableSelectedSuggestionAlert'];
33-
@Input() inputProps?: IBasePickerProps<T>['inputProps'];
34-
@Input('itemSelected') onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;
35-
@Input('inputChange') onInputChange?: (input: string) => string;
36-
@Input('emptyInputFocus') onEmptyInputFocus?: IBasePickerProps<T>['onEmptyInputFocus'];
37-
@Input('resolveSuggestions') onResolveSuggestions: IBasePickerProps<T>['onResolveSuggestions'];
38-
@Input('getMoreResults') onGetMoreResults?: IBasePickerProps<T>['onGetMoreResults'];
39-
@Input('validateInput') onValidateInput?: IBasePickerProps<T>['onValidateInput'];
16+
@Input()
17+
componentRef?: IBasePickerProps<T>['componentRef'];
18+
@Input()
19+
resolveDelay?: IBasePickerProps<T>['resolveDelay'];
20+
@Input()
21+
defaultSelectedItems?: IBasePickerProps<T>['defaultSelectedItems'];
22+
@Input()
23+
getTextFromItem?: IBasePickerProps<T>['getTextFromItem'];
24+
@Input()
25+
className?: IBasePickerProps<T>['className'];
26+
@Input()
27+
searchingText?: IBasePickerProps<T>['searchingText'];
28+
@Input()
29+
disabled?: IBasePickerProps<T>['disabled'];
30+
@Input()
31+
itemLimit?: IBasePickerProps<T>['itemLimit'];
32+
@Input()
33+
createGenericItem?: IBasePickerProps<T>['createGenericItem'];
34+
@Input()
35+
removeButtonAriaLabel?: IBasePickerProps<T>['removeButtonAriaLabel'];
36+
@Input()
37+
selectedItems?: IBasePickerProps<T>['selectedItems'];
38+
@Input()
39+
enableSelectedSuggestionAlert?: IBasePickerProps<T>['enableSelectedSuggestionAlert'];
40+
@Input()
41+
inputProps?: IBasePickerProps<T>['inputProps'];
42+
@Input('itemSelected')
43+
onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;
44+
@Input('inputChange')
45+
onInputChange?: (input: string) => string;
46+
@Input('emptyInputFocus')
47+
onEmptyInputFocus?: IBasePickerProps<T>['onEmptyInputFocus'];
48+
@Input('resolveSuggestions')
49+
onResolveSuggestions: IBasePickerProps<T>['onResolveSuggestions'];
50+
@Input('getMoreResults')
51+
onGetMoreResults?: IBasePickerProps<T>['onGetMoreResults'];
52+
@Input('validateInput')
53+
onValidateInput?: IBasePickerProps<T>['onValidateInput'];
4054

4155
@Input()
4256
set pickerSuggestionsOptions(value: IBasePickerSuggestionsOptions) {
@@ -51,14 +65,21 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
5165
return this._pickerSuggestionsOptions;
5266
}
5367

54-
@Input() renderItem?: InputRendererOptions<IPickerItemProps<T>>;
55-
@Input() renderSuggestionsItem?: InputRendererOptions<IRenderSuggestionItemContext<T>>;
56-
57-
@Output() readonly onChange = new EventEmitter<{ items?: T[] }>();
58-
@Output() readonly onFocus = new EventEmitter<FocusEvent>();
59-
@Output() readonly onBlur = new EventEmitter<FocusEvent>();
60-
@Output() readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
61-
@Output() readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
68+
@Input()
69+
renderItem?: InputRendererOptions<IPickerItemProps<T>>;
70+
@Input()
71+
renderSuggestionsItem?: InputRendererOptions<IRenderSuggestionItemContext<T>>;
72+
73+
@Output()
74+
readonly onChange = new EventEmitter<{ items?: T[] }>();
75+
@Output()
76+
readonly onFocus = new EventEmitter<FocusEvent>();
77+
@Output()
78+
readonly onBlur = new EventEmitter<FocusEvent>();
79+
@Output()
80+
readonly onDismiss = new EventEmitter<{ ev?: any; selectedItem?: T }>();
81+
@Output()
82+
readonly onRemoveSuggestion = new EventEmitter<{ item: IPersonaProps }>();
6283

6384
pickerSuggestionsProps: IBasePickerSuggestionsProps;
6485
onRenderSuggestionsItem: (
@@ -140,23 +161,7 @@ export abstract class FabBasePickerComponent<T, TProps extends IBasePickerProps<
140161
}
141162

142163
export interface IBasePickerSuggestionsOptions
143-
extends Pick<
144-
IBasePickerSuggestionsProps,
145-
| 'suggestionsHeaderText'
146-
| 'mostRecentlyUsedHeaderText'
147-
| 'noResultsFoundText'
148-
| 'className'
149-
| 'suggestionsClassName'
150-
| 'suggestionsItemClassName'
151-
| 'searchForMoreText'
152-
| 'forceResolveText'
153-
| 'loadingText'
154-
| 'searchingText'
155-
| 'resultsMaximumNumber'
156-
| 'showRemoveButtons'
157-
| 'suggestionsAvailableAlertText'
158-
| 'suggestionsContainerAriaLabel'
159-
> {
164+
extends Omit<IBasePickerSuggestionsProps, 'onRenderNoResultFound' | 'resultsFooterFull' | 'resultsFooter'> {
160165
readonly renderNoResultFound: InputRendererOptions<{}>;
161166
readonly renderResultsFooterFull: InputRendererOptions<{}>;
162167
readonly renderResultsFooter: InputRendererOptions<{}>;

‎libs/fabric/src/lib/components/search-box/search-box.component.ts‎

Lines changed: 45 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { ReactWrapperComponent, InputRendererOptions } from '@angular-react/core';
1+
import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core';
22
import {
33
ChangeDetectionStrategy,
4+
ChangeDetectorRef,
45
Component,
56
ElementRef,
67
EventEmitter,
78
Input,
89
Output,
910
ViewChild,
10-
OnInit,
11-
ChangeDetectorRef,
1211
} from '@angular/core';
13-
import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox';
1412
import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
1513
import { IContextualMenuProps } from 'office-ui-fabric-react/lib/ContextualMenu';
14+
import { ISearchBoxProps } from 'office-ui-fabric-react/lib/SearchBox';
15+
import { Omit } from '../../declarations/omit';
1616
import omit from '../../utils/omit';
1717

1818
@Component({
@@ -23,9 +23,7 @@ import omit from '../../utils/omit';
2323
#reactNode
2424
[componentRef]="componentRef"
2525
[placeholder]="placeholder"
26-
[labelText]="labelText"
2726
[value]="value"
28-
[defaultValue]="defaultValue"
2927
[className]="className"
3028
[ariaLabel]="ariaLabel"
3129
[clearButtonProps]="clearButtonProps"
@@ -36,27 +34,34 @@ import omit from '../../utils/omit';
3634
[Change]="onChangeHandler"
3735
[Search]="onSearchHandler"
3836
[Clear]="onClearHandler"
39-
[Escape]="onEscapeHandler"
40-
[Changed]="onChangedHandler">
37+
[Escape]="onEscapeHandler">
4138
</SearchBox>
4239
`,
4340
styles: ['react-renderer'],
4441
changeDetection: ChangeDetectionStrategy.OnPush,
4542
})
4643
export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps> {
47-
@ViewChild('reactNode') protected reactNodeRef: ElementRef;
48-
49-
@Input() componentRef?: ISearchBoxProps['componentRef'];
50-
@Input() placeholder?: ISearchBoxProps['placeholder'];
51-
@Input() labelText?: ISearchBoxProps['labelText'];
52-
@Input() value?: ISearchBoxProps['value'];
53-
@Input() defaultValue?: ISearchBoxProps['defaultValue'];
54-
@Input() className?: ISearchBoxProps['className'];
55-
@Input() ariaLabel?: ISearchBoxProps['ariaLabel'];
56-
@Input() underlined?: ISearchBoxProps['underlined'];
57-
@Input() theme?: ISearchBoxProps['theme'];
58-
@Input() styles?: ISearchBoxProps['styles'];
59-
@Input() disableAnimation?: ISearchBoxProps['disableAnimation'];
44+
@ViewChild('reactNode')
45+
protected reactNodeRef: ElementRef;
46+
47+
@Input()
48+
componentRef?: ISearchBoxProps['componentRef'];
49+
@Input()
50+
placeholder?: ISearchBoxProps['placeholder'];
51+
@Input()
52+
value?: ISearchBoxProps['value'];
53+
@Input()
54+
className?: ISearchBoxProps['className'];
55+
@Input()
56+
ariaLabel?: ISearchBoxProps['ariaLabel'];
57+
@Input()
58+
underlined?: ISearchBoxProps['underlined'];
59+
@Input()
60+
theme?: ISearchBoxProps['theme'];
61+
@Input()
62+
styles?: ISearchBoxProps['styles'];
63+
@Input()
64+
disableAnimation?: ISearchBoxProps['disableAnimation'];
6065
@Input()
6166
set clearButtonOptions(value: IButtonOptions) {
6267
this._clearButtonOptions = value;
@@ -70,11 +75,14 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
7075
return this._clearButtonOptions;
7176
}
7277

73-
@Output() readonly onChange = new EventEmitter<{ newValue: any }>();
74-
@Output() readonly onSearch = new EventEmitter<{ newValue: any }>();
75-
@Output() readonly onClear = new EventEmitter<{ ev?: any }>();
76-
@Output() readonly onEscape = new EventEmitter<{ ev?: any }>();
77-
@Output() readonly onChanged = new EventEmitter<{ newValue: any }>();
78+
@Output()
79+
readonly onChange = new EventEmitter<{ newValue: any }>();
80+
@Output()
81+
readonly onSearch = new EventEmitter<{ newValue: any }>();
82+
@Output()
83+
readonly onClear = new EventEmitter<{ ev?: any }>();
84+
@Output()
85+
readonly onEscape = new EventEmitter<{ ev?: any }>();
7886

7987
clearButtonProps: IButtonProps;
8088

@@ -87,34 +95,31 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
8795
this.onSearchHandler = this.onSearchHandler.bind(this);
8896
this.onClearHandler = this.onClearHandler.bind(this);
8997
this.onEscapeHandler = this.onEscapeHandler.bind(this);
90-
this.onChangedHandler = this.onChangedHandler.bind(this);
9198
}
9299

93100
onChangeHandler(newValue: any) {
94101
this.onChange.emit({
95102
newValue,
96103
});
97104
}
105+
98106
onSearchHandler(newValue: any) {
99107
this.onSearch.emit({
100108
newValue,
101109
});
102110
}
111+
103112
onClearHandler(ev?: any) {
104113
this.onClear.emit({
105114
ev: (ev && ev.nativeElement) || ev,
106115
});
107116
}
117+
108118
onEscapeHandler(ev?: any) {
109119
this.onEscape.emit({
110120
ev: (ev && ev.nativeElement) || ev,
111121
});
112122
}
113-
onChangedHandler(newValue: any) {
114-
this.onChange.emit({
115-
newValue,
116-
});
117-
}
118123

119124
private _transformButtonOptionsToProps(options: IButtonOptions): IButtonProps {
120125
const sharedProperties = omit(
@@ -158,38 +163,15 @@ export class FabSearchBoxComponent extends ReactWrapperComponent<ISearchBoxProps
158163
}
159164

160165
export interface IButtonOptions
161-
extends Pick<
166+
extends Omit<
162167
IButtonProps,
163-
| 'componentRef'
164-
| 'href'
165-
| 'primary'
166-
| 'uniqueId'
167-
| 'disabled'
168-
| 'allowDisabledFocus'
169-
| 'primaryDisabled'
170-
| 'styles'
171-
| 'theme'
172-
| 'checked'
173-
| 'className'
174-
| 'ariaLabel'
175-
| 'ariaDescription'
176-
| 'ariaHidden'
177-
| 'text'
178-
| 'iconProps'
179-
| 'menuProps'
180-
| 'onAfterMenuDismiss'
181-
| 'split'
182-
| 'menuIconProps'
183-
| 'splitButtonAriaLabel'
184-
| 'onMenuClick'
185-
| 'secondaryText'
186-
| 'toggled'
187-
| 'data'
188-
| 'getClassNames'
189-
| 'getSplitButtonClassNames'
190-
| 'menuTriggerKeyCode'
191-
| 'keytipProps'
192-
| 'persistMenu'
168+
| 'onRenderIcon'
169+
| 'onRenderText'
170+
| 'onRenderDescription'
171+
| 'onRenderAriaDescription'
172+
| 'onRenderChildren'
173+
| 'onRenderMenuIcon'
174+
| 'onRenderMenu'
193175
> {
194176
readonly renderIcon: InputRendererOptions<IButtonProps>;
195177
readonly renderText: InputRendererOptions<IButtonProps>;

0 commit comments

Comments
 (0)