@activecollab/components/dist/esm/components/EditableHours/EditableHours.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["value", "onCancel", "onSave", "allowEmptyValue", "withLeadingZero", "validation", "incrementOnlySelected", "minuteIncrement", "className", "onEnterKeyPress", "inputProps", "onClick", "ticking", "onFocus"];
import React, { useEffect, useMemo, useRef } from "react";
import styled, { css } from "styled-components";
import { useInputHours } from "../../hooks/useInputHours";
import { formatHours, validateTimeInput } from "../../utils";
import useForkRef from "../../utils/useForkRef";
import { EditableContent } from "../EditableContent";
const StyledEditableContent = styled(EditableContent).withConfig({
  displayName: "EditableHours__StyledEditableContent",
  componentId: "sc-nvi34j-0"
})(["", ""], _ref => {
  let {
    $ticking
  } = _ref;
  return $ticking && css([".presentation{visibility:visible;}input{opacity:0;}"]);
});
export const EditableHours = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
  let {
      value: defaultValue,
      onCancel,
      onSave,
      allowEmptyValue,
      withLeadingZero = true,
      validation = validateTimeInput,
      incrementOnlySelected = false,
      minuteIncrement = 1,
      className,
      onEnterKeyPress: externalEnterKeyPress,
      inputProps: externalInputProps,
      onClick: externalOnClick,
      ticking,
      onFocus
    } = _ref2,
    rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
  const inputRef = useRef(null);
  const handleRef = useForkRef(ref, inputRef);
  const {
    inputProps,
    setCurrentValue,
    setPrevValue
  } = useInputHours({
    value: defaultValue,
    withLeadingZero,
    onSave,
    validation,
    allowEmptyValue,
    onCancel,
    minuteIncrement,
    incrementOnlySelected,
    onEnterKeyPress: externalEnterKeyPress,
    onClick: externalOnClick
  }, inputRef);
  const {
    value,
    onBlur,
    onKeyDown,
    onChange,
    onClick,
    onDoubleClick
  } = inputProps;
  useEffect(() => {
    let _value;
    if (defaultValue !== undefined) {
      _value = formatHours(defaultValue, withLeadingZero);
    }
    setCurrentValue(prevState => {
      if (prevState !== _value) {
        return _value;
      }
      return prevState;
    });
    setPrevValue(prevState => {
      if (prevState !== _value) {
        return _value;
      }
      return prevState;
    });
  }, [defaultValue, setCurrentValue, setPrevValue, withLeadingZero]);
  const splitTime = useMemo(() => {
    if (value && ticking) {
      const [hours, minutes] = value.split(":");
      return {
        hours,
        minutes
      };
    }
  }, [value, ticking]);
  return /*#__PURE__*/React.createElement(StyledEditableContent, _extends({
    ref: handleRef,
    className: className,
    inputProps: _extends({}, externalInputProps, {
      value,
      onBlur,
      onKeyDown,
      onChange,
      onClick,
      onDoubleClick,
      onFocus,
      type: "text"
    }),
    $ticking: ticking
  }, rest), ticking && /*#__PURE__*/React.createElement(React.Fragment, null, splitTime == null ? void 0 : splitTime.hours, /*#__PURE__*/React.createElement("span", {
    className: "tw-animate-ping"
  }, ":"), splitTime == null ? void 0 : splitTime.minutes));
});
EditableHours.displayName = "EditableHours";
//# sourceMappingURL=EditableHours.js.map