@react-form-fields/material-ui
Version:
Material UI Form Fields
29 lines • 2.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var CircularProgress_1 = require("@material-ui/core/CircularProgress/CircularProgress");
var InputAdornment_1 = require("@material-ui/core/InputAdornment/InputAdornment");
var TextField_1 = require("@material-ui/core/TextField/TextField");
var useConfigContext_1 = require("@react-form-fields/core/hooks/useConfigContext");
var useMask_1 = require("@react-form-fields/core/hooks/useMask");
var useValidation_1 = require("@react-form-fields/core/hooks/useValidation");
var React = require("react");
var FieldText = React.memo(function (props) {
var loading = props.loading, helperText = props.helperText, multiline = props.multiline, onBlur = props.onBlur, onChange = props.onChange, extraProps = tslib_1.__rest(props, ["loading", "helperText", "multiline", "onBlur", "onChange"]);
var config = useConfigContext_1.default();
var _a = useMask_1.default(props), maskedValue = _a.maskedValue, maskClean = _a.maskClean;
var _b = useValidation_1.default(props), setDirty = _b.setDirty, showError = _b.showError, errorMessage = _b.errorMessage;
var handleChange = React.useCallback(function (event) {
var value = maskClean(event.target ? event.target.value : event);
config.validationOn === 'onChange' && setDirty(true);
onChange(value);
}, [config.validationOn, maskClean, onChange, setDirty]);
var handleBlur = React.useCallback(function (e) {
onBlur && onBlur(e);
config.validationOn === 'onBlur' && setDirty(true);
}, [config.validationOn, onBlur, setDirty]);
return (React.createElement(TextField_1.default, tslib_1.__assign({}, tslib_1.__assign(tslib_1.__assign({ fullWidth: true, margin: 'normal', rows: multiline ? 4 : null }, extraProps), { multiline: multiline, value: ((maskedValue !== null && maskedValue !== void 0 ? maskedValue : '')).toString(), error: showError && !!errorMessage, helperText: showError ? errorMessage : helperText, onChange: handleChange, onBlur: handleBlur, submitted: null, touched: null, loading: null }), { InputProps: tslib_1.__assign({ endAdornment: !loading ? null : (React.createElement(InputAdornment_1.default, { position: 'end' },
React.createElement(CircularProgress_1.default, { color: 'secondary', size: 20 }))) }, (extraProps.InputProps || {})) })));
});
exports.default = FieldText;
//# sourceMappingURL=Text.js.map