From 0b4cb6d14b79038e7b1485ef18352facd14d555d Mon Sep 17 00:00:00 2001 From: Stoovm Date: Tue, 16 Jan 2018 16:07:56 -0800 Subject: [PATCH] feat(docs): search and virtual scroll README refactor (#1093) * refactor(): updated search README.md from table to list * refactor(): virtual scroll README.md to use list rather table * refactor(): match messages format --- .../components/search/search.component.html | 75 +------------------ src/platform/core/search/README.md | 69 ----------------- src/platform/core/search/search-box/README.md | 59 +++++++++++++++ .../core/search/search-input/README.md | 62 +++++++++++++++ .../search-input/search-input.component.ts | 3 + src/platform/core/virtual-scroll/README.md | 27 ++++--- .../virtual-scroll-container.component.ts | 8 +- 7 files changed, 149 insertions(+), 154 deletions(-) delete mode 100644 src/platform/core/search/README.md create mode 100644 src/platform/core/search/search-box/README.md create mode 100644 src/platform/core/search/search-input/README.md diff --git a/src/app/components/components/search/search.component.html b/src/app/components/components/search/search.component.html index c22b8be340..77cb41d859 100644 --- a/src/app/components/components/search/search.component.html +++ b/src/app/components/components/search/search.component.html @@ -42,74 +42,7 @@

Search Box in Toolbar

- - TdSearchInputComponent - How to use this component - - -

]]>

-

Use ]]> element to generate a search input with its animated cancel button.

-

Properties:

-

The ]]> component has {{searchInputAttrs.length}} properties:

- - - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

- - - - -

Example:

-

HTML:

- - - - ]]> - -

Setup:

-

Import the [CovalentSearchModule] in your NgModule:

- - - - - - - TdSearchBoxComponent - How to use this component - - -

]]>

-

Use ]]> element to generate a search box with animations.

-

Properties:

-

The ]]> component has {{searchBoxAttrs.length}} properties:

- - - -

{{attr.name}}: {{attr.type}}

-

{{attr.description}}

- - - - -

Example:

-

HTML:

- - - - ]]> - - - \ No newline at end of file + + + + diff --git a/src/platform/core/search/README.md b/src/platform/core/search/README.md deleted file mode 100644 index c02d410664..0000000000 --- a/src/platform/core/search/README.md +++ /dev/null @@ -1,69 +0,0 @@ -# td-search-input - -`td-search-input` element to generate a search input with its animated cancel button. - -## API Summary - -Properties: - -| Name | Type | Description | -| --- | --- | 650--- | -| `debounce?` | `number` | Debounce timeout between keypresses. Defaults to 400. -| `placeholder?` | `string` | Placeholder for the underlying input component. -| `showUnderline?` | `boolean` | Sets if the input underline should be visible. Defaults to 'false'. -| `searchDebounce` | `function($event)` | Event emitted after the [debounce] timeout. -| `search` | `function($event)` | Event emitted after the key enter has been pressed. -| `clear?` | `function` | Event emitted after the clear icon has been clicked. - -## Usage - -Example for HTML usage: - - ```html - - - ``` - -# td-search-box - -`td-search-box` element to generate a search box with animations. - -## API Summary - -Properties: - -| Name | Type | Description | -| --- | --- | 650--- | -| `debounce?` | `number` | Debounce timeout between keypresses. Defaults to 400. -| `placeholder?` | `string` | Placeholder for the underlying input component. -| `backIcon?` | `string` | The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon. -| `showUnderline?` | `boolean` | Sets if the input underline should be visible. Defaults to 'false'. -| `alwaysVisible?` | `boolean` | Sets if the input should always be visible. Defaults to 'false'. -| `searchDebounce` | `function($event)` | Event emitted after the [debounce] timeout. -| `search` | `function($event)` | Event emitted after the key enter has been pressed. -| `clear?` | `function` | Event emitted after the clear icon has been clicked. - -## Usage - -Example for HTML usage: - - ```html - - - ``` - -## Setup - -Import the [CovalentSearchModule] in your NgModule: - -```typescript -import { CovalentSearchModule } from '@covalent/core/search'; -@NgModule({ - imports: [ - CovalentSearchModule, - ... - ], - ... -}) -export class MyModule {} -``` diff --git a/src/platform/core/search/search-box/README.md b/src/platform/core/search/search-box/README.md new file mode 100644 index 0000000000..4e306072d1 --- /dev/null +++ b/src/platform/core/search/search-box/README.md @@ -0,0 +1,59 @@ +# TdSearchBoxComponent: td-search-box + +`td-search-box` element to generate a search box with animations. + +## API Summary + +#### Inputs + ++ backIcon?: string + + The icon used to close the search toggle, only shown when [alwaysVisible] is false. Defaults to 'search' icon. ++ searchIcon?: string + + The icon used to open/focus the search toggle. Defaults to 'search' icon. ++ clearIcon?: string + + The icon used to clear the search input. Defaults to 'cancel' icon. ++ showUnderline?: boolean + + Sets if the input underline should be visible. Defaults to 'false'. ++ debounce?: number + + Debounce timeout between keypresses. Defaults to 400. ++ alwaysVisible?: boolean + + Sets if the input should always be visible. Defaults to 'false'. ++ placeholder?: string + + Placeholder for the underlying input component. + +#### Events + ++ searchDebounce?: string + + Event emitted after the [debounce] timeout. + + Emits a [string]. ++ search?: string + + Event emitted after the key enter has been pressed. + + Emits a [string]. ++ clear?: string + + Event emitted after the clear icon has been clicked. + + Emits [void]. + +## Setup + +Import the [CovalentSearchModule] in your NgModule: + +```typescript +import { CovalentSearchModule } from '@covalent/core/search'; +@NgModule({ + imports: [ + CovalentSearchModule, + ... + ], + ... +}) +export class MyModule {} +``` + +## Usage + +Example for HTML usage: + +```html + + +``` diff --git a/src/platform/core/search/search-input/README.md b/src/platform/core/search/search-input/README.md new file mode 100644 index 0000000000..9b9c95fc85 --- /dev/null +++ b/src/platform/core/search/search-input/README.md @@ -0,0 +1,62 @@ +# TdSearchInputComponent: td-search-input + +`td-search-input` element to generate a search input with its animated cancel button. + +## API Summary + +#### Inputs + ++ debounce?: number + + Debounce timeout between keypresses. Defaults to 400. ++ placeholder?: string + + Placeholder for the underlying input component. ++ showUnderline?: boolean + + Sets if the input underline should be visible. Defaults to 'false'. ++ clearIcon?: string + + The icon used to clear the search input. Defaults to 'cancel' icon. + +#### Events + ++ searchDebounce: function + + Event emitted after the [debounce] timeout. + + Emits a [string]. ++ search: function + + Event emitted after the key enter has been pressed. + + Emits a [string]. ++ clear: function + + Event emitted after the clear icon has been clicked. + + Emits [void]. ++ blur: function + + Event emitted after the blur event has been called in underlying input. + + Emits [void]. + +#### Methods ++ focus: function + + Method to focus to underlying input. ++ clearSearch: function + + Method to clear the underlying input. + + ## Setup + +Import the [CovalentSearchModule] in your NgModule: + +```typescript +import { CovalentSearchModule } from '@covalent/core/search'; +@NgModule({ + imports: [ + CovalentSearchModule, + ... + ], + ... +}) +export class MyModule {} +``` + +## Usage + +Example for HTML usage: + +```html + + +``` diff --git a/src/platform/core/search/search-input/search-input.component.ts b/src/platform/core/search/search-input/search-input.component.ts index ffc3592e7d..45a77f207d 100644 --- a/src/platform/core/search/search-input/search-input.component.ts +++ b/src/platform/core/search/search-input/search-input.component.ts @@ -141,6 +141,9 @@ export class TdSearchInputComponent extends _TdSearchInputMixinBase implements I this.onSearch.emit(this.value); } + /** + * Method to clear the underlying input. + */ clearSearch(): void { this.value = ''; this._changeDetectorRef.markForCheck(); diff --git a/src/platform/core/virtual-scroll/README.md b/src/platform/core/virtual-scroll/README.md index 4c9ce2808b..49524ca57a 100644 --- a/src/platform/core/virtual-scroll/README.md +++ b/src/platform/core/virtual-scroll/README.md @@ -6,16 +6,23 @@ ## API Summary -Properties: - -| Name | Type | Description | -| --- | --- | 650--- | -| `data` | `any[]` | List of items to virtually iterate on. -| `trackBy?` | `TrackByFunction` | This accepts the same trackBy function [ngFor] does. https://angular.io/api/core/TrackByFunction -| `refresh` | `function()` | Method to refresh and recalculate the virtual rows -| `scrollTo` | `function(row)` | Method to scroll to a specific row of the list. -| `scrollToStart` | `function()` | Method to scroll to the start of the list. -| `scrollToEnd` | `function()` | Method to scroll to the end of the list. +#### Inputs + ++ data?: any[] + + List of items to virtually iterate on. ++ trackBy?: TrackByFunction + + This accepts the same trackBy function [ngFor] does. + +#### Methods + ++ refresh?: function() + + Method to refresh and recalculate the virtual rows ++ scrollTo?: function(row: number) + + Method to scroll to a specific row of the list. ++ scrollToStart?: function() + + Method to scroll to the start of the list. ++ scrollToEnd?: function() + + Method to scroll to the end of the list. ## Setup diff --git a/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts b/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts index 582b3511ec..0c640a4237 100644 --- a/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts +++ b/src/platform/core/virtual-scroll/virtual-scroll-container.component.ts @@ -1,4 +1,4 @@ -import { Component, Directive, Input, Output, EventEmitter, ContentChild, AfterViewInit, ViewChild, +import { Component, Directive, Input, EventEmitter, ContentChild, AfterViewInit, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef, QueryList, ViewChildren, ElementRef, HostListener, Renderer2, AfterViewChecked, OnDestroy, TrackByFunction } from '@angular/core'; import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; @@ -27,7 +27,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi private _fromRow: number = 0; private _toRow: number = 0; - + private _data: any[]; private _virtualData: any[]; @@ -129,7 +129,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi } } } - + /** * Method to refresh and recalculate the virtual rows * e.g. after changing the [data] content @@ -180,7 +180,7 @@ export class TdVirtualScrollContainerComponent implements AfterViewInit, AfterVi this._fromRow = 0; this._toRow = 0; } - + let offset: number = 0; if (this._scrollVerticalOffset > (TD_VIRTUAL_OFFSET * this.rowHeight)) { offset = this.fromRow * this.rowHeight;