The class to use as the super class of the generated
mixin class. Should be an instance of the LitElement
class or a descendant
of it.
The generated mixin class.
When using the mixin, the
requiredQueryStringParams
,
y resultAttributes
,
and tableHeader
properties of the extended class must be set in the component's constructor.
The renderForm
method must be overridden to define the form part of the component's
template. It is recommended that the form's elements' values are bound to the
URL query string parameters using the inherited
queryStringController
since their values will automatically be reflected in the URL query string
parameters.
Lastly, note the due to TypeScript's lack of support for partial type argument inference the mixin function is curried. This means the function returns another function that must also be called to generate the mixin class:
@customElement('lis-pangene-lookup-element')
export class LisPangeneLookupElement extends
LisSearchMixin(LitElement)<PangeneSearchData, PangeneSearchResult>() // <-- curried function call
{
// set properties in the constructor
constructor() {
super();
// configure query string parameters
this.requiredQueryStringParams = [['query']];
// configure results table
this.resultAttributes = ['name', 'description'];
this.tableHeader = {name: 'Name', description: 'Description'};
}
// define the form part of the template
override renderForm() {
// NOTE:
// 1) the input element has a name attribute, which all form elemnts are required to have
// 2) the input value is set to a URL query string parameter value
return html`
<form>
<fieldset class="uk-fieldset">
<legend class="uk-legend">Pangene lookup</legend>
<div class="uk-margin">
<input
name="query" // <-- all form elements need a name
class="uk-input"
type="text"
placeholder="Input"
aria-label="Input"
.value=${this.queryStringController.getParameter('query')}>
</div>
<div class="uk-margin">
<button type="submit" class="uk-button uk-button-primary">Search</button>
</div>
</fieldset>
</form>
`;
}
}
By default, the LisSearchMixin
renders
search results using the LisSimpleTableElement | LisSimpleTableElement
.
If this is too restrictive, a class that uses the mixin may override its
renderResults
method to draw the results portion of the template itself.
For example:
@customElement('lis-pangene-lookup-element')
export class LisPangeneLookupElement extends
LisSearchMixin(LitElement)<PangeneSearchData, PangeneSearchResult>() // <-- curried function call
{
// set properties in the constructor
constructor() {
super();
// configure query string parameters
this.requiredQueryStringParams = [['query']];
// no need to configure the results table since we're going to override it
}
// define the form part of the template
override renderForm() {
...
}
// define the results part of the template
override renderResults() {
// this is actually the default implementation provided by the mixin
return html`
<lis-simple-table-element
caption="Lookup Results"
.dataAttributes=${this.resultAttributes}
.header=${this.tableHeader}
.data=${this.searchResults}>
</lis-simple-table-element>
`;
}
}
Generated using TypeDoc
A mixin that encapsulates code that implements a search component. The mixin is a function that uses the factory pattern to generate a class to be extended by a component. To use the mixin, call the function with the appropriate template arguments and extend the class it returns when defining a component.