@activecollab/components
Version:
ActiveCollab Components
108 lines • 4.23 kB
JavaScript
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.$ticking;
return $ticking && css([".presentation{visibility:visible;}input{opacity:0;}"]);
});
export const EditableHours = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let defaultValue = _ref2.value,
onCancel = _ref2.onCancel,
onSave = _ref2.onSave,
allowEmptyValue = _ref2.allowEmptyValue,
_ref2$withLeadingZero = _ref2.withLeadingZero,
withLeadingZero = _ref2$withLeadingZero === void 0 ? true : _ref2$withLeadingZero,
_ref2$validation = _ref2.validation,
validation = _ref2$validation === void 0 ? validateTimeInput : _ref2$validation,
_ref2$incrementOnlySe = _ref2.incrementOnlySelected,
incrementOnlySelected = _ref2$incrementOnlySe === void 0 ? false : _ref2$incrementOnlySe,
_ref2$minuteIncrement = _ref2.minuteIncrement,
minuteIncrement = _ref2$minuteIncrement === void 0 ? 1 : _ref2$minuteIncrement,
className = _ref2.className,
externalEnterKeyPress = _ref2.onEnterKeyPress,
externalInputProps = _ref2.inputProps,
externalOnClick = _ref2.onClick,
ticking = _ref2.ticking,
onFocus = _ref2.onFocus,
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
const inputRef = useRef(null);
const handleRef = useForkRef(ref, inputRef);
const _useInputHours = useInputHours({
value: defaultValue,
withLeadingZero,
onSave,
validation,
allowEmptyValue,
onCancel,
minuteIncrement,
incrementOnlySelected,
onEnterKeyPress: externalEnterKeyPress,
onClick: externalOnClick
}, inputRef),
inputProps = _useInputHours.inputProps,
setCurrentValue = _useInputHours.setCurrentValue,
setPrevValue = _useInputHours.setPrevValue;
const value = inputProps.value,
onBlur = inputProps.onBlur,
onKeyDown = inputProps.onKeyDown,
onChange = inputProps.onChange,
onClick = inputProps.onClick,
onDoubleClick = inputProps.onDoubleClick;
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 _value$split = value.split(":"),
hours = _value$split[0],
minutes = _value$split[1];
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