rimmel
Version:
A Streams-Oriented UI library for the Rx.Observable Universe
90 lines (87 loc) • 3 kB
JavaScript
import { map } from 'rxjs';
import { inputPipe } from '../utils/input-pipe.js';
import { autoValue } from '../utils/auto-value.js';
/**
* An Event Operator that emits the value of the underlying <input> element into a target observer
*
* @category Event Adapter Operators
* @returns OperatorFunction<Event, string | number | date | null>
*
* For simple, one-step input pipelines, see the {@link Cut | Cut (uppercase)} Event Adapter
*
* ## Examples
*
* ### ValidInfo
*
* Create a custom Event Operator that feeds a stream with validated data, once a custom validator passes
*
* ```ts
* import { Subject, filter } from 'rxjs';
* import { rml, inputPipe, value } from 'rimmel';
*
* const isValid = filter((s: string) => IS_VALID_IMPL(s) );
* const ValidInfo = inputPipe(value, isValid);
*
* const Component = () => {
* const stream = new Subject<string>();
*
* return rml`
* <input type="text" onchange="${ValidInfo(stream)}" autofocus>
* [ <span>${stream}</span> ]
* `;
* };
* ```
*/
const value = map((e) => autoValue(e.target));
/**
* An Event Adapter emitting the value of the underlying <input> element instead of a regular DOM Event object
*
* ## Example
* Copy the value of a text box on change
*
* ```ts
* import { Subject } from 'rxjs';
* import { rml, Value } from 'rimmel';
*
* const Component = () => {
* const stream = new Subject<string>();
*
* return rml`
* <input type="text" onchange="${Value(stream)}" autofocus>
* [ <span>${stream}</span> ]
* `;
* };
* ```
*/
const Value = inputPipe(value);
/**
* An Event Source Operator emitting the value of the underlying <input> element instead of a regular DOM Event object
* @returns OperatorFunction<Event, string>
*/
const valueAsString = map((e) => e.target.value);
/**
* An Event Source Operator for valueAsNumber
* Emits the numeric value of the underlying <input type="number"> or <input type="range"> instead of a regular DOM Event object
* @returns OperatorFunction<Event, number | null>
*/
const valueAsNumber = map((e) => e.target.valueAsNumber);
/**
* An Event Source for valueAsNumber
* Emits the numeric value of the underlying <input type="number"> or <input type="range"> instead of a regular DOM Event object
* @returns EventSource<number>
*/
const ValueAsNumber = inputPipe(valueAsNumber);
/**
* An Event Source Operator for valueAsDate
* Emits the numeric value of the underlying `<input type="date">` instead of a regular DOM Event object
* @returns OperatorFunction<Event, Date | null>
*/
const valueAsDate = map((e) => e.target.valueAsDate);
/**
* An Event Adapter for valueAsDate
* Emits the numeric value of the underlying `<input type="date">` instead of a regular DOM Event object
* @returns EventSource<Date | null>
*/
const ValueAsDate = inputPipe(valueAsDate);
export { Value, ValueAsDate, ValueAsNumber, value, valueAsDate, valueAsNumber, valueAsString };
//# sourceMappingURL=value-source.js.map