synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
132 lines (131 loc) • 3.5 kB
JavaScript
import { jsx as m } from "react/jsx-runtime";
import h from "../utils/parseFreeTextUsingJsonSchemaType.js";
import { Autocomplete as C, TextField as O } from "@mui/material";
import { isNil as I } from "lodash-es";
import { memo as T, useState as S, useRef as R, useEffect as g, useMemo as k } from "react";
const F = {
width: "100%",
height: "100%",
"& .MuiTextField-root .MuiInputBase-root": {
height: "100%",
padding: "0 10px",
backgroundColor: "inherit",
borderRadius: 0
},
"& .MuiAutocomplete-inputRoot": {
padding: "0 10px",
backgroundColor: "inherit"
},
"& .MuiFormControl-root": { height: "100%" }
};
function y(e) {
return I(e) ? "" : typeof e == "object" ? JSON.stringify(e) : String(e);
}
function V({
rowData: e,
setRowData: t,
choices: a,
colType: i,
focus: u,
stopEditing: l,
active: n,
clearValue: M = void 0
}) {
const [A, p] = S(!1), s = R(null), r = y(e), [f, d] = S(r);
g(() => {
n ? s.current?.focus() : (p(!1), s.current?.blur(), f !== r && t(h(f, i)));
}, [n]), g(() => {
!u && !n && d(r);
}, [u, n, r]);
const v = !I(e) && e !== "", x = k(
() => ({
...F,
"& .MuiAutocomplete-inputRoot": {
padding: "0 10px",
backgroundColor: "inherit",
pointerEvents: u ? void 0 : "none"
},
"& .MuiAutocomplete-clearIndicator": {
visibility: n ? "visible" : "hidden",
pointerEvents: "auto"
},
"& .MuiAutocomplete-popupIndicator": {
visibility: n ? "visible" : "hidden",
pointerEvents: "auto"
},
"&:hover .MuiAutocomplete-clearIndicator": {
visibility: "visible"
},
"&:hover .MuiAutocomplete-popupIndicator": {
visibility: "visible"
}
}),
[n, u]
);
return /* @__PURE__ */ m(
C,
{
open: A,
onOpen: () => {
p(!0);
},
forcePopupIcon: !0,
disableClearable: !v,
freeSolo: !0,
disablePortal: !1,
options: a,
autoSelect: !0,
selectOnFocus: !0,
getOptionLabel: (o) => y(o),
value: e,
inputValue: f,
onInputChange: (o, c) => {
d(c);
},
onKeyDown: (o) => {
o.key === "Tab" ? (o.preventDefault(), l({ nextRow: !1 })) : o.key === "Enter" && (o.preventDefault(), l({ nextRow: !0 }));
},
onClose: () => {
p(!1), l({ nextRow: !1 });
},
onChange: (o, c, b) => {
t(b === "clear" ? M : b === "createOption" ? h(c, i) : c), setTimeout(() => l({ nextRow: !1 }), 0);
},
blurOnSelect: !0,
renderInput: (o) => /* @__PURE__ */ m(O, { ...o, inputRef: s }),
sx: x
}
);
}
const E = T(
V,
(e, t) => e.active === t.active && e.focus === t.focus && e.rowData === t.rowData && e.choices === t.choices && e.colType === t.colType && e.clearValue === t.clearValue
);
function J({
choices: e,
colType: t,
clearValue: a
}) {
return {
component: ((i) => /* @__PURE__ */ m(
E,
{
...i,
choices: e,
colType: t,
clearValue: a
}
)),
// If we update our enums to support labels, then we can update copy to copy the label and paste to lookup the mapping from label -> value
copyValue: ({ rowData: i }) => i,
pasteValue: ({ value: i }) => i,
disableKeys: !0,
keepFocus: !0
};
}
export {
V as AutocompleteCell,
J as autocompleteColumn,
y as castCellValueToString
};
//# sourceMappingURL=AutocompleteColumn.js.map