@crossed/ui/lib/commonjs/forms/DateInput/useDateInput.js

A universal & performant styling library for React Native, Next.js & React

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var useDateInput_exports = {};
__export(useDateInput_exports, {
  useDateInput: () => useDateInput
});
module.exports = __toCommonJS(useDateInput_exports);
var import_core = require("@crossed/core");
var import_react = require("react");
var import_utils = require("./utils");
var import_ts_pattern = require("ts-pattern");
var import_styled = require("@crossed/styled");
const useDateInput = ({
  value: valueProps,
  onChange: onChangeProps,
  defaultValue,
  locale = "en",
  format = "yyyy-mm-dd",
  placeholder = {}
}) => {
  const order = (0, import_utils.getOrderWithFormat)(locale, format);
  const separator = (0, import_utils.getSeparator)(locale);
  const inputRef = (0, import_react.useRef)([]);
  (0, import_react.useEffect)(() => {
    if (import_styled.isWeb) {
      inputRef.current = [];
      return () => {
        inputRef.current = [];
      };
    }
    return () => {
    };
  }, [locale]);
  const [value, setValue] = (0, import_core.useUncontrolled)({
    value: valueProps,
    defaultValue,
    onChange: onChangeProps
  });
  const add = (0, import_react.useCallback)((name, r) => {
    if (r) {
      const index = inputRef.current.findIndex(({ name: n }) => n === name);
      if (index >= 0) {
        inputRef.current[index] = { ref: r, name };
      } else {
        inputRef.current.push({ ref: r, name });
      }
    }
  }, []);
  const onChange = (0, import_react.useCallback)(
    (name, v) => {
      var _a;
      const valueNumber = Number(v);
      if (isNaN(valueNumber)) {
        setValue({
          ...value,
          [name === "dd" ? "day" : name === "mm" ? "month" : "year"]: ""
        });
        return;
      }
      if (name === "dd" && `${valueNumber}`.length <= 2) {
        setValue({ ...value, day: valueNumber });
      } else if (name === "mm" && `${valueNumber}`.length <= 2) {
        setValue({ ...value, month: valueNumber });
      } else if (name === "yyyy" && `${valueNumber}`.length <= 4) {
        setValue({ ...value, year: valueNumber });
      }
      const index = inputRef.current.findIndex(({ name: n }) => n === name);
      if (index >= 0 && index < 2) {
        const shouldNext = ["dd", "mm"].includes(name) ? `${v}`.length >= 2 : `${v}`.length >= 4;
        shouldNext && ((_a = inputRef.current[index + 1]) == null ? void 0 : _a.ref.focus());
      }
    },
    [setValue, value]
  );
  const setWithDate = (0, import_react.useCallback)(
    (date) => {
      if (date)
        setValue({
          day: date.getDate(),
          month: date.getMonth() + 1,
          year: date.getFullYear()
        });
    },
    [setValue]
  );
  const inputs = (0, import_react.useMemo)(() => {
    return order.map((e) => ({
      key: e,
      ref: (ref) => add(e, ref),
      onChangeText: (v) => onChange(e, v),
      ...(0, import_ts_pattern.match)(e).with("dd", (r) => {
        var _a, _b;
        return {
          value: (_a = value == null ? void 0 : value.day) == null ? void 0 : _a.toString().padStart(2, "0"),
          placeholder: placeholder.day ?? r,
          label: (_b = value == null ? void 0 : value.day) == null ? void 0 : _b.toLocaleString(locale, {
            minimumIntegerDigits: 2
          })
        };
      }).with("mm", (r) => {
        var _a, _b;
        return {
          value: (_a = value == null ? void 0 : value.month) == null ? void 0 : _a.toString().padStart(2, "0"),
          placeholder: placeholder.month ?? r,
          label: (_b = value == null ? void 0 : value.month) == null ? void 0 : _b.toLocaleString(locale, {
            minimumIntegerDigits: 2
          })
        };
      }).with("yyyy", (r) => {
        var _a;
        return {
          placeholder: placeholder.year ?? r,
          value: (_a = value == null ? void 0 : value.year) == null ? void 0 : _a.toString().padStart(4, "0")
        };
      }).exhaustive()
    }));
  }, [value, order, add, onChange, placeholder, locale]);
  const containerProps = (0, import_react.useMemo)(() => {
    return {
      onPress: () => {
        var _a;
        (_a = inputRef.current[0]) == null ? void 0 : _a.ref.focus();
      }
    };
  }, []);
  return {
    containerProps,
    value,
    onChange,
    inputs,
    separator,
    setWithDate
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useDateInput
});
//# sourceMappingURL=useDateInput.js.map