Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update combobox with latest fundamental-styles #2188

Merged
merged 22 commits into from
Apr 9, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
426cc35
update combobox to 0.6.0
mikerodonnell89 Mar 2, 2020
fc1e467
add two column example source
mikerodonnell89 Mar 3, 2020
01b4c5c
two column combobox
mikerodonnell89 Mar 3, 2020
bf28d61
fix conflicts and start working on group
mikerodonnell89 Mar 17, 2020
8326354
groupBy progress - selecting item in 2nd group does not work
mikerodonnell89 Mar 17, 2020
370574a
fix selecting item in other group
mikerodonnell89 Mar 17, 2020
83f1adf
update list messages
mikerodonnell89 Mar 17, 2020
d58c0da
template cleanup
mikerodonnell89 Mar 18, 2020
1dc35aa
demonstrate groupFunction
mikerodonnell89 Mar 19, 2020
75d2456
fix tests
mikerodonnell89 Mar 19, 2020
cb2d986
fix tests again and rename menu keydown to list keydown
mikerodonnell89 Mar 19, 2020
acd72f7
fix build
mikerodonnell89 Mar 19, 2020
e9c90ba
force build
mikerodonnell89 Mar 20, 2020
24f6894
address pr comments
mikerodonnell89 Mar 23, 2020
5df98b7
Merge branch 'master' into fix/combobox-0.6.0
mikerodonnell89 Mar 26, 2020
86419f6
pr comments
mikerodonnell89 Mar 27, 2020
7dc1e58
accidentally committed hunk
mikerodonnell89 Mar 27, 2020
199994f
separate lifecycle logic in to own methods
mikerodonnell89 Mar 31, 2020
7019562
Merge branch 'master' into fix/combobox-0.6.0
mikerodonnell89 Apr 6, 2020
af94c79
more pr comments. open/close behavior will be addressed in a new branch
mikerodonnell89 Apr 6, 2020
8727889
Merge branch 'master' into fix/combobox-0.6.0
mikerodonnell89 Apr 7, 2020
4338b98
more combobox improvements
mikerodonnell89 Apr 7, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@
</fd-docs-section-title>
<description>
The input supports custom filters through the <code>filterFn</code> input function. Simply pass a function which
accepts an array and a search term, and then returns the desired filtered array.
accepts an array and a search term, handle filtering logic within this function, and then return the desired filtered array.
In this example, we are only populating the list with results where the search term matches the beginning of the result,
as opposed to the usual behavior where the list will be populated if the search term appears anywhere in the string.
</description>
<component-example>
<fd-combobox-dynamic-example></fd-combobox-dynamic-example>
Expand All @@ -27,8 +29,8 @@
Custom Search Function
</fd-docs-section-title>
<description>
Custom search function can be provided by <code>[searchFunction]</code> to combobox. It will be called on mouse
click on combobox's primary button, or on enter key press, while focused on combobox input.
A custom search function can be provided with the <code>[searchFn]</code> input. This function will be called when the primary
combobox button is clicked, or when the user presses the 'enter' key while focused in the combobox input.
</description>
<component-example>
<fd-combobox-search-function-example></fd-combobox-search-function-example>
Expand All @@ -41,8 +43,8 @@
Display Object Property
</fd-docs-section-title>
<description>
Passing object arrays to the Combobox is supported through the <code>displayFn</code> input function. To access the
<code>this</code> keyword inside the passed function, use an arrow function.
The <code>displayFn</code> input can be used to modify how the results are presented within the combobox. In this
example we are making the results all upper-cased.
</description>
<component-example>
<fd-combobox-displaywith-example></fd-combobox-displaywith-example>
Expand All @@ -59,8 +61,8 @@
</description>
<description>
By passing <code>[closeOnOutsideClick]="false"</code>, <code>[openOnKeyboardEvent]="false"</code> and
<code>[triggers]="[]"</code>, it is possible to fully control the <code>open</code> state of combobox. To change it
pass variable to <code>[open]</code>.
<code>[triggers]="[]"</code>, it is possible to fully control how the user will open and close the results list. The
open state can be controlled directly with the <code>[open]</code> input.
</description>
<component-example>
<fd-combobox-open-control-example></fd-combobox-open-control-example>
Expand All @@ -73,7 +75,7 @@
Observable Async Example
</fd-docs-section-title>
<description>
The <code>dropdownValues</code> input can accept an Observable with the async pipe, which could be useful for
The <code>dropdownValues</code> input can accept an Observable with an async pipe, which could be useful for
autocomplete.
</description>
<description>
Expand All @@ -90,8 +92,9 @@
Custom Item Template
</fd-docs-section-title>
<description>
The way the items are rendered in the popover list can be customized through providing an <code>itemTemplate</code>
to the component.
The way the items are rendered in the popover list can be customized by providing an <code>itemTemplate</code>
to the component. The <code>itemTemplate</code> should align with the contents of an <a [routerLink]="'/core/list'">fd-list-item</a>
directive.
</description>
<component-example>
<fd-combobox-template-example></fd-combobox-template-example>
Expand All @@ -100,26 +103,39 @@

<separator></separator>

<fd-docs-section-title [id]="'combobox-inReactiveForm'" [componentName]="'combobox'">
Combobox In A Reactive Form
<fd-docs-section-title [id]="'combobox-columns'" [componentName]="'combobox'">
Combobox with Two Columns
</fd-docs-section-title>
<description>
This examples shows how to put <code>combobox</code> in a Reactive Form. Also how to sets it's state to
<code>disabled</code>
The <code>[itemTemplate]</code> input can be used to create a combobox with two columns of information. Note that a
<code>displayFn</code> is required for this example so the combobox knows how to display the selected item.
</description>
<component-example>
<fd-combobox-disabled-example></fd-combobox-disabled-example>
<fd-combobox-columns-example></fd-combobox-columns-example>
</component-example>
<code-example [exampleFiles]="comboboxDisabledExample"></code-example>
<code-example [exampleFiles]="comboboxColumnsExample"></code-example>

<fd-docs-section-title [id]="'combobox-group'" [componentName]="'combobox'">
Combobox with Groups
</fd-docs-section-title>
<description>
Grouping data within a set of values can be achieved by passing a function to the <code>[groupFn]</code> input. This
function should accept an object of key/value pairs as the parameter. Each key will be a group name and the corresponding
value for that key will be an array of any type. A <code>[displayFn]</code> can be used to specify what to display
from that array.
</description>
<component-example>
<fd-combobox-group-example></fd-combobox-group-example>
</component-example>
<code-example [exampleFiles]="comboboxGroupExample"></code-example>

<separator></separator>

<fd-docs-section-title [id]="'combobox-customHeight'" [componentName]="'combobox'">
Custom Height Example
</fd-docs-section-title>
<description>
There is also the possibility to define a fixed height for the dropdown list by specifying the desired height using
the <code>[maxHeight]</code> attribute.
Use the <code>[maxHeight]</code> input to set a maximum height for the results list.
</description>
<component-example>
<fd-combobox-height-example></fd-combobox-height-example>
Expand All @@ -135,12 +151,23 @@
The Combobox component may also be used within Angular Reactive Forms.
</description>
<description>
Also in combobox can be used <code>[communicateByObject]</code>. Enabling this option changes the way the component
communicates with the outside. When combobox communicates by objects, writing in text input doesn't change binded
value, until it matches one of displayed dropdown options. Also on this mode, combobox on communication uses model
with same type as it's passed to <code>[dropdownValues]</code>
Use the <code>[communicateByObject]</code> boolean input if you are using custom objects for the <code>dropdownValues</code>
or if you want the combobox to only trigger onChange when a value is selected, rather than every time the input changes.
</description>
<component-example>
<fd-combobox-forms-example></fd-combobox-forms-example>
</component-example>
<code-example [exampleFiles]="comboboxFormExample"></code-example>

<separator></separator>

<fd-docs-section-title [id]="'combobox-disabled'" [componentName]="'combobox'">
Disabled Combobox
</fd-docs-section-title>
<description>
This example shows how to use a a disabled combobox in a reactive form.
</description>
<component-example>
<fd-combobox-disabled-example></fd-combobox-disabled-example>
</component-example>
<code-example [exampleFiles]="comboboxDisabledExample"></code-example>
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ import * as comboboxTemplateH from '!raw-loader!./examples/combobox-template-exa
import * as comboboxTemplateT from '!raw-loader!./examples/combobox-template-example.component.ts';
import * as comboboxDisabledTemplateH from '!raw-loader!./examples/combobox-disabled-example.component.html';
import * as comboboxDisabledTemplateT from '!raw-loader!./examples/combobox-disabled-example.component.ts';
import * as comboboxColumnsTemplateH from '!raw-loader!./examples/combobox-columns-example.component.html';
import * as comboboxColumnsTemplateT from '!raw-loader!./examples/combobox-columns-example.component.ts';
import * as comboboxGroupTemplateH from '!raw-loader!./examples/combobox-group-example.component.html';
import * as comboboxGroupTemplateT from '!raw-loader!./examples/combobox-group-example.component.ts';
import * as comboboxDisabledTemplateScss from '!raw-loader!./examples/combobox-disabled-example.component.scss';
import * as comboboxFormT from '!raw-loader!./examples/combobox-forms-example.component.ts';
import * as comboboxFormH from '!raw-loader!./examples/combobox-forms-example.component.html';
Expand Down Expand Up @@ -127,6 +131,34 @@ export class ComboboxDocsComponent {
}
];

comboboxColumnsExample: ExampleFile[] = [
{
language: 'html',
code: comboboxColumnsTemplateH,
fileName: 'combobox-columns-example'
},
{
language: 'typescript',
component: 'ComboboxColumnsExampleComponent',
code: comboboxColumnsTemplateT,
fileName: 'combobox-columns-example'
}
];

comboboxGroupExample: ExampleFile[] = [
{
language: 'html',
code: comboboxGroupTemplateH,
fileName: 'combobox-group-example'
},
{
language: 'typescript',
component: 'ComboboxGroupExampleComponent',
code: comboboxGroupTemplateT,
fileName: 'combobox-group-example'
}
];

comboboxTemplateExample: ExampleFile[] = [
{
language: 'html',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ import {ComboboxFormsExampleComponent} from './examples/combobox-forms-example.c
import {ComboboxDisabledExampleComponent} from './examples/combobox-disabled-example.component';
import {ComboboxHeightExampleComponent} from './examples/combobox-height-example.component';
import {ComboboxOpenControlExampleComponent} from './examples/combobox-open-control-example.component';
import { ComboboxModule, FormModule } from '@fundamental-ngx/core';
import { ComboboxColumnsExampleComponent } from './examples/combobox-columns-example.component';
import { ComboboxGroupExampleComponent } from './examples/combobox-group-example.component';
import { ComboboxModule, FormModule, ListModule } from '@fundamental-ngx/core';

const routes: Routes = [
{
Expand All @@ -32,7 +34,8 @@ const routes: Routes = [
imports: [
RouterModule.forChild(routes),
SharedDocumentationModule,
ComboboxModule
ComboboxModule,
ListModule
],
exports: [RouterModule],
declarations: [
Expand All @@ -47,7 +50,9 @@ const routes: Routes = [
ComboboxDisabledExampleComponent,
ComboboxDisplaywithExampleComponent,
ComboboxOpenControlExampleComponent,
ComboboxSearchFunctionExampleComponent
ComboboxSearchFunctionExampleComponent,
ComboboxColumnsExampleComponent,
ComboboxGroupExampleComponent
]
})
export class ComboboxDocsModule {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<fd-combobox [(ngModel)]="searchTerm"
[dropdownValues]="dropdownValues"
[itemTemplate]="columnTemplate"
[placeholder]="'Type some text...'"
[maxHeight]="'250px'"
[displayFn]="displayFunc">
</fd-combobox>

<ng-template #columnTemplate let-item>
<span fd-list-title>{{item.name}}</span>
<span fd-list-secondary>{{item.price}}</span>
</ng-template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { Component } from '@angular/core';

@Component({
selector: 'fd-combobox-columns-example',
templateUrl: './combobox-columns-example.component.html'
})
export class ComboboxColumnsExampleComponent {

searchTerm = '';

dropdownValues = [
{name: 'Apple', price: '1.00 USD'},
{name: 'Banana', price: '0.50 USD'},
{name: 'Kiwi', price: '1.00 USD'},
{name: 'Pineapple', price: '3.00 USD'},
{name: 'Strawberries', price: '4.00 USD'}
];

displayFunc(obj: {name: string, price: string}): string {
salarenko marked this conversation as resolved.
Show resolved Hide resolved
if (obj) {
return obj.name + ' - ' + obj.price;
}
}

}
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
<form [formGroup]="customForm">
<fieldset fd-fieldset class="flex-form">
<div fd-form-item>
<label fd-form-label for="form-combo-1">Select Fruit:</label>
<fd-combobox
formControlName="comboControl"
[dropdownValues]="dropdownValues"
fd-form-control
id="form-combo-1"></fd-combobox>
Disabled: {{ customForm.controls.comboControl.disabled }}<br/>
Selected Value: {{ customForm.controls.comboControl.value }}
</div>
<div fd-form-item>
<label fd-form-label for="form-combo-2">Select Fruit:</label>
<fd-combobox
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export class ComboboxDisabledExampleComponent {
];

customForm = new FormGroup({
comboControl: new FormControl('Banana', Validators.required),
disabledComboControl: new FormControl({ value: 'Kiwi', disabled: true }, Validators.required)
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
[displayFn]="myDisplayFunction"
[communicateByObject]="true"
formControlName="itemOnDropdownMode">
<li fd-list-message [type]="'information'">More information</li>
</fd-combobox>
<fd-form-message [type]="'information'">More information</fd-form-message>
</div>
Expand All @@ -25,6 +26,7 @@
[placeholder]="'Type some text...'"
[displayFn]="myDisplayFunction"
formControlName="item">
<li fd-list-message [type]="'information'">More information</li>
</fd-combobox>
<fd-form-message [type]="'information'">More information</fd-form-message>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<fd-combobox [(ngModel)]="searchTerm"
[dropdownValues]="dropdownValues"
[groupFn]="groupFunc"
[displayFn]="displayFunc"
[placeholder]="'Type some text...'"
[maxHeight]="'250px'">
</fd-combobox>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Component } from '@angular/core';

@Component({
selector: 'fd-combobox-group-example',
templateUrl: './combobox-group-example.component.html'
})
export class ComboboxGroupExampleComponent {

searchTerm = '';

dropdownValues = [
{name: 'Apple', type: 'Fruits'},
{name: 'Banana', type: 'Fruits'},
{name: 'Pineapple', type: 'Fruits'},
{name: 'Strawberry', type: 'Fruits'},
{name: 'Broccoli', type: 'Vegetables'},
{name: 'Carrot', type: 'Vegetables'},
{name: 'Jalapeño', type: 'Vegetables'},
{name: 'Spinach', type: 'Vegetables'}
];

displayFunc(obj: {name: string, price: string}): string | void {
if (obj) {
return obj.name;
}
}

groupFunc(items: {name: string, type: string}[]): {} {
return {
Fruits: items.filter(item => item.type === 'Fruits'),
Vegetables: items.filter(item => item.type === 'Vegetables')
}
}

}
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<fd-combobox [(ngModel)]="searchTerm"
[dropdownValues]="dropdownValues"
[searchFunction]="customSearchFunction"
[searchFn]="customSearchFunction"
[placeholder]="'Type to filter the list...'">
</fd-combobox>
<br/>
Expand Down
Loading