@goaltime/timescape/dist/preact.js

A flexible, headless date and time input library for JavaScript. Provides tools for building fully customizable date and time input fields, with support for libraries like React, Preact, Vue, Svelte and Solid.

import {
  $NOW,
  TimescapeManager,
  marry
} from "./chunk-D4WPLDQ2.js";

// src/integrations/preact.ts
import * as signals from "@preact/signals";
import { useEffect, useState } from "preact/hooks";
var { useSignalEffect, useSignal } = signals;
var useTimescape = (options = {}) => {
  const [manager] = useState(() => {
    const { date, ...rest } = options;
    return new TimescapeManager(date, rest);
  });
  const optionsSignal = useSignal(options);
  useEffect(() => {
    return manager.on("changeDate", (nextDate) => {
      optionsSignal.value = { ...optionsSignal.value, date: nextDate };
    });
  }, [manager, optionsSignal]);
  useSignalEffect(() => {
    manager.date = optionsSignal.value.date;
    manager.minDate = optionsSignal.value.minDate;
    manager.maxDate = optionsSignal.value.maxDate;
    manager.digits = optionsSignal.value.digits;
    manager.wrapAround = optionsSignal.value.wrapAround;
    manager.hour12 = optionsSignal.value.hour12;
    manager.snapToStep = optionsSignal.value.snapToStep;
    manager.wheelControl = optionsSignal.value.wheelControl;
    manager.disallowPartial = optionsSignal.value.disallowPartial;
  });
  useEffect(() => () => manager.remove(), [manager]);
  return {
    _manager: manager,
    getInputProps: (type, opts) => ({
      ref: (element) => {
        if (!element) return;
        manager.registerElement(element, type, opts?.autofocus);
        if (opts?.ref) opts.ref.current = element;
      }
    }),
    getSelectProps: (type, opts) => ({
      ref: (element) => {
        if (!element) return;
        manager.registerSelect(element, type);
        if (opts?.ref) opts.ref.current = element;
      }
    }),
    getRootProps: () => ({
      ref: (element) => element && manager.registerRoot(element)
    }),
    options: optionsSignal
  };
};
var useTimescapeRange = (options = {}) => {
  const from = useTimescape(options.from);
  const to = useTimescape(options.to);
  useEffect(() => {
    marry(from._manager, to._manager);
  }, [from._manager, to._manager]);
  return {
    getRootProps: () => ({
      ref: (element) => {
        if (!element) return;
        from._manager.registerRoot(element);
        to._manager.registerRoot(element);
      }
    }),
    from: {
      getInputProps: from.getInputProps,
      options: from.options
    },
    to: {
      getInputProps: to.getInputProps,
      options: to.options
    }
  };
};
export {
  $NOW,
  useTimescape,
  useTimescapeRange
};