alinea/dist/field/number/NumberField.view.js

Headless git-based CMS

import {
  dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";

// src/field/number/NumberField.view.tsx
import { useField } from "alinea/dashboard/editor/UseField";
import { InputLabel } from "alinea/dashboard/view/InputLabel";
import { IcRoundNumbers } from "alinea/ui/icons/IcRoundNumbers";
import { useEffect, useRef } from "react";

// src/field/number/NumberField.module.scss
var NumberField_module_default = {
  "root-input": "alinea-NumberField-input",
  "rootInput": "alinea-NumberField-input"
};

// src/field/number/NumberField.view.tsx
import { jsx } from "react/jsx-runtime";
var styles = dist_default(NumberField_module_default);
function tryParseNumber(input) {
  const value = Number.parseFloat(input);
  return Number.isNaN(value) ? null : value;
}
function NumberInput({ field }) {
  const { options, value, mutator, error } = useField(field);
  const { minValue, maxValue, readOnly, step } = options;
  const ref = useRef(null);
  const defaultValue = String(value ?? "");
  useEffect(() => {
    const input = ref.current;
    if (!input) return;
    const currentInput = tryParseNumber(input.value);
    if (currentInput === value) return;
    input.value = defaultValue;
  }, [defaultValue]);
  return /* @__PURE__ */ jsx(InputLabel, { asLabel: true, ...options, error, icon: IcRoundNumbers, children: /* @__PURE__ */ jsx(
    "input",
    {
      type: "number",
      ref,
      className: styles.root.input(),
      defaultValue,
      onChange: ({ currentTarget }) => {
        const newValue = tryParseNumber(currentTarget.value);
        if (newValue !== value) mutator(newValue);
      },
      onBlur: ({ currentTarget }) => {
        const newValue = tryParseNumber(currentTarget.value);
        if (newValue !== value) mutator(newValue);
        currentTarget.value = String(newValue ?? "");
      },
      min: minValue,
      max: maxValue,
      readOnly,
      step: step || 1
    }
  ) });
}
export {
  NumberInput
};