rimmel
Version:
A Streams-Oriented UI library for the Rx.Observable Universe
70 lines • 2.57 kB
TypeScript
/**
* An Event Operator that "cuts" and emits the value of the underlying <input> element into a target observer
*
* This operator has side effects, as it will directly modify the underlying element
* @category Event Adapter Operators
* @template T the type of the target element
* @template I the type of Event sourced from the underlying element
* @template O the data type emitted into the target stream
* @returns OperatorFunction<Event, string>
*
* For simple, one-step input pipelines, see the {@link Cut | Cut (uppercase)} Event Adapter
*
* ## Examples
*
* ### UpperCut
*
* Create a custom Event Operator that feeds a stream with the uppercase content of a textbox, when hitting Enter on it
*
* ```ts
* import { Subject, filter, map } from 'rxjs';
* import { rml, inputPipe, cut } from 'rimmel';
*
* const onEnter = filter((e: KeyboardEvent) => e.key == 'Enter');
* const toUpperCase = map((s: string) => s.toUpperCase());
* const UpperCut = inputPipe(onEnter, cut, toUpperCase);
*
* const Component = () => {
* const stream = new Subject<string>();
*
* return rml`
* <input type="text" onkeypress="${UpperCut(stream)}" autofocus>
* [ <span>${stream}</span> ]
* `;
* };
* ```
*/
export declare const cut: <T extends (HTMLInputElement | HTMLElement), I extends Event, O extends string | number | Date | null>(source: import("rxjs").Observable<I>) => import("rxjs").Observable<O>;
/**
* An Event Adapter that "cuts" and emits the value of the underlying <input> element into a target observer
*
* @category Event Adapter Functions
* @param target A handler function or Observer to feed events into
* @returns EventSource<string>
*
* For advanced, multi-step input pipelines, see the {@link cut | cut (lowercase)} Operator
*
* ## Examples
*
* ### Feed a List
*
* Feed an [observable list](https://github.com/reactivehtml/observable-types
) with the uppercase content of a textbox, when hitting Enter on it
*
* ```ts
* import { Collection } from 'observable-types';
* import { Subject, filter, map } from 'rxjs';
* import { rml, Cut } from 'rimmel';
*
* const Component = () => {
* const list = Collection(['item1', 'item2', 'item3']);
*
* return rml`
* <ul>${list}</ul>
* Add new: <input type="text" onkeypress="${Cut(stream.push)}" autofocus>
* `;
* };
* ```
*/
export declare const Cut: (target: import("..").RMLTemplateExpressions.TargetEventHandler<string | number | Date | null>) => import("..").Observer<Event>;
//# sourceMappingURL=cut-source.d.ts.map