@etsoo/materialui
Version:
TypeScript Material-UI Implementation
151 lines (150 loc) • 5.87 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextFieldEx = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const MUGlobal_1 = require("./MUGlobal");
const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
const Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
const shared_1 = require("@etsoo/shared");
const react_2 = require("@etsoo/react");
const ReactApp_1 = require("./app/ReactApp");
const TextField_1 = __importDefault(require("@mui/material/TextField"));
const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
// Global app
const app = (0, ReactApp_1.useAppContext)();
// Labels
const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
// Destructure
const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal_1.MUGlobal.textFieldVariant, ...rest } = props;
// Shrink
InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
// State
const [errorText, updateErrorText] = react_1.default.useState();
const [empty, updateEmpty] = react_1.default.useState(true);
// Read only
if (readOnly != null)
InputProps.readOnly = readOnly;
// Calculate
let errorEx = error;
let helperTextEx = helperText;
if (errorText != null) {
errorEx = true;
helperTextEx = errorText;
}
let typeEx = showPassword ? "password" : type;
let input;
const localRef = (ref) => {
input = ref;
if (input.value !== "") {
updateEmpty(false);
}
};
const doClear = () => {
if (input == null)
return;
react_2.ReactUtils.triggerChange(input, "", false);
input.focus();
};
const clearClick = () => {
if (onClear) {
onClear(doClear);
}
else {
doClear();
}
};
const preventDefault = (e) => {
// Prevent long press
if (e.isPropagationStopped())
e.stopPropagation();
if (e.isDefaultPrevented())
e.preventDefault();
};
const touchStart = async (e) => {
// Show the password
if (input) {
if (onVisibility) {
const result = await onVisibility(input);
if (result === false)
return;
}
input.blur();
input.type = "text";
}
preventDefault(e);
};
const touchEnd = (e) => {
// Show the password
if (input) {
if (onVisibility)
return;
input.type = "password";
}
preventDefault(e);
};
// Show password and/or clear button
if (!empty && (showPassword || showClear)) {
InputProps.endAdornment = ((0, jsx_runtime_1.jsxs)(InputAdornment_1.default, { position: "end", children: [showPassword && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: (0, jsx_runtime_1.jsx)(Visibility_1.default, {}) })), showClear && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: (0, jsx_runtime_1.jsx)(Clear_1.default, {}) }))] }));
}
// Extend key precess
const onKeyPressEx = onEnter == null
? onKeyDown
: (e) => {
if (e.key === shared_1.Keyboard.Keys.Enter) {
// Enter press callback
onEnter(e);
}
if (!e.isDefaultPrevented && onKeyDown != null) {
// Common press callback
onKeyDown(e);
}
};
react_1.default.useImperativeHandle(ref, () => ({
/**
* Set error
* @param error Error
*/
setError(error) {
updateErrorText(error);
}
}), []);
const isMounted = react_1.default.useRef(true);
const delayed = onChange != null && changeDelay != null && changeDelay >= 1
? (0, react_2.useDelayedExecutor)(onChange, changeDelay)
: undefined;
const onChangeEx = (event) => {
if (errorText != null) {
// Reset
updateErrorText(undefined);
}
if (showClear || showPassword) {
if (event.target.value === "") {
updateEmpty(true);
}
else if (empty) {
updateEmpty(false);
}
}
if (onChange == null)
return;
if (changeDelay == null || changeDelay < 1) {
onChange(event);
return;
}
delayed?.call(undefined, event);
};
react_1.default.useEffect(() => {
return () => {
isMounted.current = false;
delayed?.clear();
};
}, []);
// Textfield
return ((0, jsx_runtime_1.jsx)(TextField_1.default, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
});