@aokiapp/rjsf-mantine-theme/lib/widgets/AltDateWidget.mjs

Mantine theme, fields and widgets for react-jsonschema-form

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useReducer, useEffect, useCallback } from 'react';
import { parseDateString, toDateString, getDateElementProps, TranslatableString, ariaDescribedByIds, pad } from '@rjsf/utils';
import { Stack, Grid, Group, Button } from '@mantine/core';

function rangeOptions(start, stop) {
  const options = [];
  for (let i = start; i <= stop; i++) {
    options.push({ value: i, label: pad(i, 2) });
  }
  return options;
}
function readyForChange(state) {
  return Object.values(state).every((value) => value !== -1);
}
function DateElement({
  type,
  range,
  value,
  select,
  rootId,
  name,
  disabled,
  readonly,
  autofocus,
  registry,
  onBlur,
  onFocus
}) {
  const id = rootId + "_" + type;
  const { SelectWidget } = registry.widgets;
  return /* @__PURE__ */ jsx(
    SelectWidget,
    {
      schema: { type: "integer" },
      id,
      name,
      className: "form-control",
      options: { enumOptions: rangeOptions(range[0], range[1]) },
      placeholder: type,
      value,
      disabled,
      readonly,
      autofocus,
      onChange: (value2) => select(type, value2),
      onBlur,
      onFocus,
      registry,
      label: "",
      "aria-describedby": ariaDescribedByIds(rootId)
    }
  );
}
function AltDateWidget({
  time = false,
  disabled = false,
  readonly = false,
  autofocus = false,
  options,
  id,
  name,
  registry,
  onBlur,
  onFocus,
  onChange,
  value,
  className
}) {
  const { translateString } = registry;
  const [lastValue, setLastValue] = useState(value);
  const [state, setState] = useReducer(
    (state2, action) => {
      return { ...state2, ...action };
    },
    parseDateString(value, time)
  );
  useEffect(() => {
    const stateValue = toDateString(state, time);
    if (readyForChange(state) && stateValue !== value) {
      onChange(stateValue);
    } else if (lastValue !== value) {
      setLastValue(value);
      setState(parseDateString(value, time));
    }
  }, [time, value, onChange, state, lastValue]);
  const handleChange = useCallback((property, value2) => {
    setState({ [property]: value2 });
  }, []);
  const handleSetNow = useCallback(
    (event) => {
      event.preventDefault();
      if (disabled || readonly) {
        return;
      }
      const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), time);
      onChange(toDateString(nextState, time));
    },
    [disabled, onChange, readonly, time]
  );
  const handleClear = useCallback(
    (event) => {
      event.preventDefault();
      if (disabled || readonly) {
        return;
      }
      onChange(void 0);
    },
    [disabled, readonly, onChange]
  );
  return /* @__PURE__ */ jsxs(Stack, { className: `armt-widget-altdate ${className ?? ""}`, gap: "xs", children: [
    /* @__PURE__ */ jsx(Grid, { children: getDateElementProps(
      state,
      time,
      options.yearsRange,
      options.format
    ).map((elemProps, i) => /* @__PURE__ */ jsx(Grid.Col, { span: 4, children: /* @__PURE__ */ jsx(
      DateElement,
      {
        rootId: id,
        name,
        select: handleChange,
        ...elemProps,
        disabled,
        readonly,
        registry,
        onBlur,
        onFocus,
        autofocus: autofocus && i === 0
      }
    ) }, i)) }),
    /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
      (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /* @__PURE__ */ jsx(Button, { variant: "filled", onClick: handleSetNow, children: translateString(TranslatableString.NowLabel) }),
      (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClear, children: translateString(TranslatableString.ClearLabel) })
    ] })
  ] });
}

export { AltDateWidget as default };
//# sourceMappingURL=AltDateWidget.mjs.map