rimmel/dist/esm/types/sources/cut-source.d.ts

A Streams-Oriented UI library for the Rx.Observable Universe

/**
 * 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 &lt;input&gt; 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