mithril-materialized
Version:
A materialize library for mithril.
58 lines (57 loc) • 1.99 kB
TypeScript
import { FactoryComponent } from 'mithril';
/**
* Attributes for the AnalogClock component
*/
export interface AnalogClockAttrs {
/** Current hours value (1-12 for 12-hour, 0-23 for 24-hour) */
hours: number;
/** Current minutes value (0-59) */
minutes: number;
/** Current AM/PM value (only relevant in 12-hour mode) */
amOrPm: 'AM' | 'PM';
/** Current view mode: 'hours' or 'minutes' */
currentView: 'hours' | 'minutes';
/** Whether to use 12-hour format (true) or 24-hour format (false) */
twelveHour: boolean;
/** Radius of the clock dial (default: 135) */
dialRadius?: number;
/** Radius of outer clock ticks (default: 105) */
outerRadius?: number;
/** Radius of inner clock ticks for 24-hour mode (default: 70) */
innerRadius?: number;
/** Radius of tick circles (default: 20) */
tickRadius?: number;
/** Round minutes to nearest 5 when dragging (default: false) */
roundBy5?: boolean;
/** Enable haptic feedback vibration (default: true) */
vibrate?: boolean;
/** Callback when time changes */
onTimeChange: (hours: number, minutes: number) => void;
/** Callback when view changes (optional) */
onViewChange?: (view: 'hours' | 'minutes') => void;
/** Optional reference to external hours display element for updates */
spanHours?: HTMLElement;
/** Optional reference to external minutes display element for updates */
spanMinutes?: HTMLElement;
}
/**
* AnalogClock component - A draggable analog clock face for time selection
*
* @example
* ```typescript
* m(AnalogClock, {
* hours: 10,
* minutes: 30,
* amOrPm: 'AM',
* currentView: 'hours',
* twelveHour: true,
* onTimeChange: (hours, minutes) => {
* console.log(`Time changed to ${hours}:${minutes}`);
* },
* onViewChange: (view) => {
* console.log(`View changed to ${view}`);
* }
* })
* ```
*/
export declare const AnalogClock: FactoryComponent<AnalogClockAttrs>;