@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
44 lines (43 loc) • 1.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptableDateInlineInput = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const date_fns_1 = require("date-fns");
const react_1 = require("react");
const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
const AdaptableContext_1 = require("../../AdaptableContext");
exports.AdaptableDateInlineInput = React.forwardRef((props, ref) => {
const [hasFocus, setHasFocus] = (0, react_1.useState)(false);
const dateInputOptions = (0, AdaptableContext_1.useAdaptable)().adaptableOptions.userInterfaceOptions.dateInputOptions;
const dateProps = {
format: dateInputOptions.dateFormat,
locale: dateInputOptions.locale,
};
const [inputValue, setInputValue] = (0, react_1.useState)(() => {
return props.value;
});
React.useEffect(() => {
if (hasFocus) {
return;
}
setInputValue(props.value);
}, [props.value]);
const handleInputChange = (e) => {
setInputValue(e.currentTarget.value);
const date = (0, date_fns_1.parse)(e.currentTarget.value, dateProps.format, new Date());
if ((0, date_fns_1.isValid)(date)) {
props.onChange(e.currentTarget.value);
}
else {
props.onChange(undefined);
}
};
return (React.createElement(Input_1.default, { ...props, onFocus: (event) => {
props.onFocus?.(event);
setHasFocus(true);
}, onBlur: (event) => {
props.onBlur?.(event);
setHasFocus(false);
}, ref: ref, value: inputValue, onChange: (e) => handleInputChange(e), placeholder: props.placeholder ?? dateProps.format, style: props.style, disabled: props.disabled }));
});