@etsoo/materialui
Version:
TypeScript Material-UI Implementation
209 lines (208 loc) • 9.11 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TiplistPro = TiplistPro;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@etsoo/react");
const shared_1 = require("@etsoo/shared");
const react_2 = __importDefault(require("react"));
const InputField_1 = require("./InputField");
const ReactApp_1 = require("./app/ReactApp");
const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
/**
* TiplistPro
* @param props Props
* @returns Component
*/
function TiplistPro(props) {
// Global app
const app = (0, ReactApp_1.useAppContext)();
// Labels
const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
// Destruct
const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
if (width && sx)
Object.assign(sx, { width: `${width}px` });
// Value input ref
const inputRef = react_2.default.createRef();
// Local value
let localValue = value ?? defaultValue;
// One time calculation for input's default value (uncontrolled)
const localIdValue = idValue ??
(localValue != null && typeof localValue === "object"
? localValue.id
: null);
// Changable states
const [states, stateUpdate] = react_2.default.useReducer((currentState, newState) => {
return { ...currentState, ...newState };
}, {
// Loading unknown
open: false,
options: [],
value: null
});
react_2.default.useEffect(() => {
if (localValue != value)
stateUpdate({ value: localValue });
}, [localValue]);
// Input value
const inputValue = react_2.default.useMemo(() => states.value && typeof states.value === "object"
? states.value.id
: undefined, [states.value]);
// Ref
const state = react_2.default.useRef({
idLoaded: false,
idSet: false,
isMounted: false
});
// Change handler
const changeHandle = (event) => {
// Stop processing with auto trigger event
if (event.nativeEvent.cancelable && !event.nativeEvent.composed) {
stateUpdate({ options: [] });
return;
}
// Stop bubble
event.stopPropagation();
// Call with delay
delayed.call(undefined, event.currentTarget.value);
};
// Directly load data
const loadDataDirect = (keyword, id) => {
// Reset options
// setOptions([]);
if (id == null) {
// Reset real value
const input = inputRef.current;
if (input && input.value !== "") {
// Different value, trigger change event
react_1.ReactUtils.triggerChange(input, "", false);
}
if (states.options.length > 0) {
// Reset options
stateUpdate({ options: [] });
}
}
// Loading indicator
if (!states.loading)
stateUpdate({ loading: true });
// Load list
loadData(keyword, id, maxItems).then((options) => {
if (!state.current.isMounted)
return;
if (options != null && options.length >= maxItems) {
options.push({ id: -1, name: "n/a" });
}
if (id && options && onValueChange) {
const option = options.find((o) => o["id"] === id);
if (option)
onValueChange(option);
}
// Indicates loading completed
stateUpdate({
loading: false,
...(options != null && { options })
});
});
};
const delayed = (0, react_1.useDelayedExecutor)(loadDataDirect, 480);
const setInputValue = (value) => {
stateUpdate({ value });
// Input value
const input = inputRef.current;
if (input) {
// Update value
const newValue = value?.id.toString() ?? "";
if (newValue !== input.value) {
// Different value, trigger change event
react_1.ReactUtils.triggerChange(input, newValue, false);
}
}
};
react_2.default.useEffect(() => {
if (localIdValue == null) {
if (inputValue != null)
setInputValue(null);
return;
}
if (state.current.idLoaded) {
state.current.idLoaded = false;
state.current.idSet = false;
}
}, [localIdValue]);
react_2.default.useEffect(() => {
if (localIdValue != null && localIdValue !== "") {
if (state.current.idLoaded) {
// Set default
if (!state.current.idSet && states.options.length > 0) {
stateUpdate({
value: states.options.find((o) => o.id === localIdValue)
});
state.current.idSet = true;
}
}
else {
// Load id data
loadDataDirect(undefined, localIdValue);
state.current.idLoaded = true;
}
}
}, [localIdValue, states.options]);
react_2.default.useEffect(() => {
state.current.isMounted = true;
return () => {
state.current.isMounted = false;
delayed.clear();
};
}, []);
// Layout
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
if (typeof value === "object") {
// Set value
setInputValue(value);
}
// Custom
if (onChange != null)
onChange(event, value, reason, details);
if (onValueChange) {
if (typeof value === "object")
onValueChange(value == null ? null : value);
}
// For clear case
if (reason === "clear") {
stateUpdate({ options: [], open: event.type === "click" });
loadDataDirect();
}
}, open: states.open, openOnFocus: openOnFocus, onOpen: () => {
// Should load
const loading = states.loading ? true : states.options.length === 0;
stateUpdate({ open: true, loading });
// If not loading
if (loading)
loadDataDirect(undefined, states.value && typeof states.value === "object"
? states.value.id
: undefined);
}, onClose: () => {
stateUpdate({
open: false,
...(!states.value && { options: [] })
});
}, loading: states.loading, renderInput: (params) => ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { minChars: minChars, ...inputProps, ...params, onChange: changeHandle, label: label, name: name + "Input", onBlur: (event) => {
if (states.value == null && onChange)
onChange(event, event.target.value, "blur", undefined);
}, "data-reset": inputReset })), isOptionEqualToValue: (option, value) => option.id === value.id, sx: sx, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
if (item.id === -1)
return true;
return getOptionDisabled ? getOptionDisabled(item) : false;
}, getOptionLabel: (item) => {
if (typeof item === "string")
return item;
if (item["id"] === -1)
return (more ?? "More") + "...";
if (getOptionLabel == null)
return shared_1.DataTypes.getListItemLabel(item);
return getOptionLabel(item);
}, ...rest })] }));
}