@dnb/eufemia/cjs/extensions/forms/Field/Time/Time.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _includes = _interopRequireDefault(require("core-js-pure/stable/instance/includes.js"));
var _react = require("react");
var _utils = require("../../../../components/flex/utils.js");
var _index = require("../../hooks/index.js");
var _clsx = require("clsx");
var _index2 = _interopRequireDefault(require("../../FieldBlock/index.js"));
var _SegmentedField = _interopRequireDefault(require("../../../../components/input-masked/segmented-field/SegmentedField.js"));
var _useTranslation = _interopRequireDefault(require("../../hooks/useTranslation.js"));
var _index3 = require("../../utils/index.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Time(props = {}) {
  var _useTranslation$Time;
  const {
    label: timeLabel,
    errorRequired,
    hoursPlaceholder,
    minutesPlaceholder,
    secondsPlaceholder,
    hours: hoursLabel,
    minutes: minutesLabel,
    seconds: secondsLabel
  } = (_useTranslation$Time = (0, _useTranslation.default)().Time) !== null && _useTranslation$Time !== void 0 ? _useTranslation$Time : {};
  const {
    showSeconds
  } = props;
  const timeValidator = (0, _react.useCallback)(value => validateTime(value, showSeconds), [showSeconds]);
  const {
    onBlurValidator = timeValidator,
    onChangeValidator,
    errorMessages: propErrorMessages,
    validateInitially: validateInitiallyProp,
    validateContinuously,
    value: valueProp,
    transformIn: transformInProp,
    onStatusChange
  } = props;
  const errorMessages = (0, _react.useMemo)(() => ({
    'Field.errorRequired': errorRequired,
    ...propErrorMessages
  }), [errorRequired, propErrorMessages]);
  const fromInput = (0, _react.useCallback)(values => {
    const {
      hours,
      minutes,
      seconds
    } = values;
    if (!hours && !minutes && (!showSeconds || !seconds)) {
      return undefined;
    }
    return showSeconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
  }, [showSeconds]);
  const validateRequired = (0, _react.useCallback)((value, {
    required,
    error
  }) => {
    return required && !value ? error : undefined;
  }, []);
  const validateInitially = (0, _react.useMemo)(() => validateInitiallyProp || (valueProp ? true : undefined), [validateInitiallyProp, valueProp]);
  const fromExternal = (0, _react.useCallback)(external => {
    if (typeof external !== 'string') {
      return external;
    }
    const {
      hours,
      minutes,
      seconds
    } = stringToTimeValue(external);
    if (!hours && !minutes) {
      return undefined;
    }
    return seconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
  }, []);
  const transformIn = (0, _react.useCallback)(value => {
    if (!transformInProp) {
      return value;
    }
    const external = transformInProp(value);
    if (typeof external === 'string') {
      return external;
    }
    if (!external?.hours && !external?.minutes && !external?.seconds) {
      return value;
    }
    const hours = external.hours;
    const minutes = external.minutes;
    if (!hours && !minutes) {
      return undefined;
    }
    const seconds = external.seconds;
    return seconds ? `${hours}:${minutes}:${seconds}` : `${hours}:${minutes}`;
  }, [transformInProp]);
  const provideAdditionalArgs = (0, _react.useCallback)(value => {
    const {
      hours,
      minutes,
      seconds
    } = stringToTimeValue(value);
    return {
      hours: hours || undefined,
      minutes: minutes || undefined,
      ...(showSeconds && {
        seconds: seconds || undefined
      })
    };
  }, [showSeconds]);
  const preparedProps = {
    ...props,
    errorMessages,
    validateInitially,
    validateContinuously,
    fromExternal,
    transformIn,
    fromInput,
    provideAdditionalArgs,
    validateRequired,
    onBlurValidator: onBlurValidator,
    onChangeValidator,
    onStatusChange,
    exportValidators: {
      timeValidator
    }
  };
  const {
    id,
    path,
    itemPath,
    className,
    label = timeLabel,
    hasError,
    info,
    warning,
    disabled,
    size,
    value = '',
    htmlAttributes,
    handleFocus,
    handleBlur,
    handleChange,
    setDisplayValue
  } = (0, _index.useFieldProps)(preparedProps);
  const time = (0, _react.useMemo)(() => {
    const {
      hours,
      minutes,
      seconds
    } = stringToTimeValue(value);
    return {
      hours: hours || '',
      minutes: minutes || '',
      seconds: showSeconds && seconds || ''
    };
  }, [value, showSeconds]);
  (0, _react.useMemo)(() => {
    if ((path || itemPath) && time.hours && time.minutes) {
      setDisplayValue(time.seconds ? `${time.hours}:${time.minutes}:${time.seconds}` : `${time.hours}:${time.minutes}`);
    }
  }, [time.hours, time.minutes, time.seconds, itemPath, path, setDisplayValue]);
  const status = hasError ? 'error' : warning ? 'warning' : info ? 'information' : null;
  const fieldBlockProps = {
    id,
    forId: `${id}-input`,
    className: (0, _clsx.clsx)('dnb-forms-field-time', className),
    label,
    ...(0, _utils.pickSpacingProps)(props)
  };
  return (0, _jsxRuntime.jsx)(_index2.default, {
    ...fieldBlockProps,
    children: (0, _jsxRuntime.jsx)(_SegmentedField.default, {
      stretch: true,
      id: `${id}-input`,
      values: time,
      status: status === 'error',
      disabled: disabled,
      size: size,
      onChange: handleChange,
      onBlur: handleBlur,
      onFocus: handleFocus,
      delimiter: ":",
      inputMode: "numeric",
      inputs: [{
        id: 'hours',
        label: hoursLabel,
        mask: [/[0-9]/, /[0-9]/],
        spinButton: {
          min: 0,
          max: 24,
          getInitialValue: () => new Date().getHours()
        },
        placeholder: hoursPlaceholder?.repeat(2),
        ...htmlAttributes
      }, {
        id: 'minutes',
        label: minutesLabel,
        mask: [/[0-9]/, /[0-9]/],
        spinButton: {
          min: 0,
          max: 59,
          getInitialValue: () => new Date().getMinutes()
        },
        placeholder: minutesPlaceholder?.repeat(2),
        ...htmlAttributes
      }, ...(showSeconds ? [{
        id: 'seconds',
        label: secondsLabel,
        mask: [/[0-9]/, /[0-9]/],
        spinButton: {
          min: 0,
          max: 59,
          getInitialValue: () => new Date().getSeconds()
        },
        placeholder: secondsPlaceholder?.repeat(2),
        ...htmlAttributes
      }] : [])]
    })
  });
}
function stringToTimeValue(value) {
  if (typeof value !== 'string' || !(0, _includes.default)(value).call(value, ':')) {
    return {
      hours: undefined,
      minutes: undefined,
      seconds: undefined
    };
  }
  const [hours, minutes, seconds] = value.split(':');
  return {
    hours,
    minutes,
    seconds
  };
}
function validateTime(time, showSeconds) {
  if (!time || !(0, _includes.default)(time).call(time, ':')) {
    return undefined;
  }
  const {
    hours,
    minutes,
    seconds
  } = stringToTimeValue(time);
  if (!hours && !minutes && (!showSeconds || !seconds)) {
    return [];
  }
  const hoursNumber = Number(hours);
  const minutesNumber = Number(minutes);
  const secondsNumber = Number(seconds);
  const hoursInvalid = !hours || hours.length !== 2 || isNaN(hoursNumber) || hoursNumber < 0 || hoursNumber > 24;
  const minutesInvalid = !minutes || minutes.length !== 2 || isNaN(minutesNumber) || minutesNumber < 0 || minutesNumber > 59;
  const secondsInvalid = showSeconds && (!seconds || seconds.length !== 2 || isNaN(secondsNumber) || secondsNumber < 0 || secondsNumber > 59);
  const is24WithNonZero = hoursNumber === 24 && (minutesNumber !== 0 || showSeconds && secondsNumber !== 0);
  if (hoursInvalid || minutesInvalid || secondsInvalid || is24WithNonZero) {
    return new _index3.FormError('Time.errorInvalidTime');
  }
  return undefined;
}
Time._supportsEufemiaSpacingProps = true;
var _default = exports.default = Time;
//# sourceMappingURL=Time.js.map