mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-20 01:11:25 +00:00
Remove Unused Knockout Components (#783)
This commit is contained in:
Steve Faulkner
GitHub
@@ -1,27 +0,0 @@
|
||||
import template from "./error-display-component.html";
|
||||
|
||||
/**
|
||||
* Helper class for ko component registration
|
||||
* This component displays an error as designed in:
|
||||
* https://microsoft.sharepoint.com/teams/DPX/Modern/DocDB/_layouts/15/WopiFrame.aspx?sourcedoc={66864d4a-f925-4cbe-9eb4-79f8d191a115}&action=edit&wd=target%28DocumentDB%20emulator%2Eone%7CE617D0A7-F77C-4968-B75A-1451049F4FEA%2FError%20notification%7CAA1E4BC9-4D72-472C-B40C-2437FA217226%2F%29
|
||||
* TODO: support "More details"
|
||||
*/
|
||||
export class ErrorDisplayComponent {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: ErrorDisplayViewModel,
|
||||
template,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parameters for this component
|
||||
*/
|
||||
interface ErrorDisplayParams {
|
||||
errorMsg: ko.Observable<string>; // Primary message
|
||||
}
|
||||
|
||||
class ErrorDisplayViewModel {
|
||||
public constructor(public params: ErrorDisplayParams) {}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
<div class="warningErrorContainer" data-bind="visible: !!params.errorMsg()">
|
||||
<div class="warningErrorContent">
|
||||
<span><img src="/error_red.svg" alt="Error" /></span>
|
||||
<span class="settingErrorMsg warningErrorDetailsLinkContainer" data-bind="text: params.errorMsg()"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,186 +0,0 @@
|
||||
/**
|
||||
* How to use this component:
|
||||
*
|
||||
* In your html markup, use:
|
||||
* <input-typeahead params="{
|
||||
choices:choices,
|
||||
selection:selection,
|
||||
inputValue:inputValue,
|
||||
placeholder:'Enter source',
|
||||
typeaheadOverrideOptions:typeaheadOverrideOptions
|
||||
}"></input-typeahead>
|
||||
* The parameters are documented below.
|
||||
*
|
||||
* Notes:
|
||||
* - dynamic:true by default, this allows choices to change after initialization.
|
||||
* To turn it off, use:
|
||||
* typeaheadOverrideOptions: { dynamic:false }
|
||||
*
|
||||
*/
|
||||
|
||||
import "jquery-typeahead";
|
||||
import template from "./input-typeahead.html";
|
||||
|
||||
/**
|
||||
* Helper class for ko component registration
|
||||
*/
|
||||
export class InputTypeaheadComponent {
|
||||
constructor() {
|
||||
return {
|
||||
viewModel: InputTypeaheadViewModel,
|
||||
template,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export interface Item {
|
||||
caption: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parameters for this component
|
||||
*/
|
||||
interface InputTypeaheadParams {
|
||||
/**
|
||||
* List of choices available in the dropdown.
|
||||
*/
|
||||
choices: ko.ObservableArray<Item>;
|
||||
|
||||
/**
|
||||
* Gets updated when user clicks on the choice in the dropdown
|
||||
*/
|
||||
selection?: ko.Observable<Item>;
|
||||
|
||||
/**
|
||||
* The current string value of <input>
|
||||
*/
|
||||
inputValue?: ko.Observable<string>;
|
||||
|
||||
/**
|
||||
* Define what text you want as the input placeholder
|
||||
*/
|
||||
placeholder: string;
|
||||
|
||||
/**
|
||||
* Override default jquery-typeahead options
|
||||
* WARNING: do not override input, source or callback to avoid breaking the components behavior.
|
||||
*/
|
||||
typeaheadOverrideOptions?: any;
|
||||
|
||||
/**
|
||||
* This function gets called when pressing ENTER on the input box
|
||||
*/
|
||||
submitFct?: (inputValue: string | null, selection: Item | null) => void;
|
||||
|
||||
/**
|
||||
* Typehead comes with a Search button that we normally remove.
|
||||
* If you want to use it, turn this on
|
||||
*/
|
||||
showSearchButton?: boolean;
|
||||
}
|
||||
|
||||
interface OnClickItem {
|
||||
matchedKey: string;
|
||||
value: any;
|
||||
caption: string;
|
||||
group: string;
|
||||
}
|
||||
|
||||
interface Cache {
|
||||
inputValue: string | null;
|
||||
selection: Item | null;
|
||||
}
|
||||
|
||||
class InputTypeaheadViewModel {
|
||||
private static instanceCount = 0; // Generate unique id for each component's typeahead instance
|
||||
private instanceNumber: number;
|
||||
private params: InputTypeaheadParams;
|
||||
|
||||
private cache: Cache;
|
||||
|
||||
public constructor(params: InputTypeaheadParams) {
|
||||
this.instanceNumber = InputTypeaheadViewModel.instanceCount++;
|
||||
this.params = params;
|
||||
|
||||
this.params.choices.subscribe(this.initializeTypeahead.bind(this));
|
||||
this.cache = {
|
||||
inputValue: null,
|
||||
selection: null,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Must execute once ko is rendered, so that it can find the input element by id
|
||||
*/
|
||||
private initializeTypeahead() {
|
||||
let params = this.params;
|
||||
let cache = this.cache;
|
||||
let options: any = {
|
||||
input: `#${this.getComponentId()}`, //'.input-typeahead',
|
||||
order: "asc",
|
||||
minLength: 0,
|
||||
searchOnFocus: true,
|
||||
source: {
|
||||
display: "caption",
|
||||
data: () => {
|
||||
return this.params.choices();
|
||||
},
|
||||
},
|
||||
callback: {
|
||||
onClick: (_node: unknown, _a: unknown, item: OnClickItem) => {
|
||||
cache.selection = item;
|
||||
|
||||
if (params.selection) {
|
||||
params.selection(item);
|
||||
}
|
||||
},
|
||||
onResult(_node: unknown, query: any) {
|
||||
cache.inputValue = query;
|
||||
if (params.inputValue) {
|
||||
params.inputValue(query);
|
||||
}
|
||||
},
|
||||
},
|
||||
template: (_query: string, item: any) => {
|
||||
// Don't display id if caption *IS* the id
|
||||
return item.caption === item.value
|
||||
? "<span>{{caption}}</span>"
|
||||
: "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
|
||||
},
|
||||
dynamic: true,
|
||||
};
|
||||
|
||||
// Override options
|
||||
if (params.typeaheadOverrideOptions) {
|
||||
for (let p in params.typeaheadOverrideOptions) {
|
||||
options[p] = params.typeaheadOverrideOptions[p];
|
||||
}
|
||||
}
|
||||
|
||||
($ as any).typeahead(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get this component id
|
||||
* @return unique id per instance
|
||||
*/
|
||||
private getComponentId(): string {
|
||||
return `input-typeahead${this.instanceNumber}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Executed once ko is done rendering bindings
|
||||
* Use ko's "template: afterRender" callback to do that without actually using any template.
|
||||
* Another way is to call it within setTimeout() in constructor.
|
||||
*/
|
||||
public afterRender(): void {
|
||||
this.initializeTypeahead();
|
||||
}
|
||||
|
||||
public submit(): void {
|
||||
if (this.params.submitFct) {
|
||||
this.params.submitFct(this.cache.inputValue, this.cache.selection);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<span class="input-typeahead-container">
|
||||
<form class="input-typehead" data-bind="submit:submit">
|
||||
<div class="typeahead__container">
|
||||
<div class="typeahead__field">
|
||||
<span class="typeahead__query">
|
||||
<input
|
||||
name="q"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
data-bind="attr: { placeholder: params.placeholder, id:getComponentId() }, value:params.inputValue, template: { afterRender:afterRender() }"
|
||||
/>
|
||||
</span>
|
||||
<span class="typeahead__button" data-bind="visible:params.showSearchButton">
|
||||
<button type="submit"><span class="typeahead__search-icon"></span></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</span>
|
||||
Reference in New Issue
Block a user