@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
86 lines (85 loc) • 3.12 kB
JavaScript
import * as React from 'react';
import { Icon } from '../../../components/icons';
import useProperty from '../../../components/utils/useProperty';
const fillStyle = {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
};
const hostStyle = {
...fillStyle,
boxSizing: 'border-box',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
};
const inputStyle = {
position: 'relative',
background: 'transparent',
boxSizing: 'border-box',
minWidth: 0,
outline: 'none',
width: '100%',
border: 'none',
};
const disallowedChars = new Set(['e', 'E']);
const preventDisallowedChars = (e) => {
// prevent the user from entering the 'e' character - issue #2839
if (disallowedChars.has(e.key)) {
e.preventDefault();
}
};
export const InternalAdaptableNumberEditor = React.forwardRef(function InternalAdaptableNumberEditorFn(props, ref) {
const inputRef = React.useRef(null);
const focus = () => {
inputRef.current?.focus();
};
const [value, setValue] = useProperty(props, 'value', props.defaultValue, {
onChange: (value) => {
if (value !== '' && value == Number(value)) {
value = Number(value);
}
props.onValueChange?.(value);
},
});
React.useEffect(() => {
// When the editor is opened by typing, the value is not set, even if the user
// dismisses the editing by pressing enter or clicking outside, this forces the value to be set.
setValue(props.defaultValue);
}, []);
React.useImperativeHandle(ref, () => {
return {
focus,
setValue,
};
});
const showClear = props.showClearButton && props.emptyValue != null && value != props.emptyValue;
return (React.createElement("div", { style: hostStyle, onKeyDown: (e) => {
if (e.key === 'Tab' && showClear && document.activeElement === inputRef.current) {
e.stopPropagation();
}
} },
React.createElement("input", { "data-name": "AdaptableNumberEditorInput", type: props.type ?? 'number', value: value, onKeyDown: preventDisallowedChars, onChange: React.useCallback((event) => {
setValue(event.target.value);
}, []), style: inputStyle, ref: inputRef }),
showClear ? (React.createElement("div", { style: {
display: 'inline-block',
marginRight: 'var(--ab-space-1)',
marginLeft: 'var(--ab-space-1)',
}, onClick: (e) => {
if (props.emptyValue != null) {
setValue(props.emptyValue);
e.stopPropagation();
focus();
}
}, onKeyDown: (e) => {
if (props.emptyValue != null && e.key === 'Enter') {
setValue(props.emptyValue);
e.stopPropagation();
focus();
}
} },
React.createElement(Icon, { size: 18, name: "close", tabIndex: 0 }))) : null));
});