@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
38 lines (37 loc) • 2.19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import FieldWrap from '../../../components/FieldWrap';
import SimpleButton from '../../../components/SimpleButton';
import Input from '../../../components/Input';
import { twMerge } from '../../../twMerge';
import { cn } from '../../../lib/utils';
export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
let closeButtonTooltip = props.value ? 'Clear' : null;
const inputRef = React.useRef(null);
const { focusOnClear = true } = props;
const clearDisabled = StringExtensions.IsNullOrEmpty(props.value.toString());
return (_jsxs(FieldWrap, { onClick: props.onClick, className: twMerge('twa:bg-input-background twa:text-input-foreground twa:overflow-visible twa:w-full twa:rounded-input', props.className), style: props.style, children: [_jsx(Input, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, className: cn('twa:min-w-0 twa:flex-1', props.inputClassName), ref: (r) => {
inputRef.current = r;
if (!ref) {
return;
}
if (typeof ref === 'function') {
ref(r);
}
else {
ref.current = r;
}
}, type: "text", placeholder: props.placeholder, value: props.value, onChange: (x) => props.OnTextChange(x.target.value) }), props.actionTools, _jsx(SimpleButton, { variant: "text", icon: "close", tooltip: closeButtonTooltip, className: "twa:mr-1 twa:p-0", onClick: () => {
props.OnTextChange('');
const input = inputRef.current;
if (!focusOnClear) {
return;
}
requestAnimationFrame(() => {
if (input && input.focus) {
input.focus();
}
});
}, disabled: clearDisabled })] }));
});