oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
154 lines (153 loc) • 8.67 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const core_1 = require("@material-ui/core");
const utility_1 = require("../../../utility");
const lodash_1 = require("lodash");
const use_debounce_1 = require("use-debounce");
const withValidate_1 = require("../../Form/withValidate");
const fast_memoize_1 = __importDefault(require("fast-memoize"));
const prop_types_1 = __importDefault(require("prop-types"));
const InputComponent = (props) => {
const { id, name, type = 'text', value = '', caption, captionActive, defaultValue, variant = 'outlined', className, autoComplete = 'off', autoFocus = false, disabled, readOnly, required, errorText, helperText, multiline, rows, rowsMax, placeholder, fullWidth = true, onRef, disableUnderline = false, onChange, onBlur, onClick, onKeyPress, onKeyDown, onKeyUp, leftAdornments, rightAdornments, validate, numberFormat, maskFormat, setValidate, validateMessages, size, } = props;
const [inputFieldValue, setValue] = react_1.useState(value);
const setValidateData = fast_memoize_1.default((value) => {
!disabled && validate && setValidate && setValidate(id, value, validate, errorText);
onChange && onChange(utility_1.getTargetValue(id, name, numberFormat && value ? Number(value) : value));
});
const [debounceFunc] = use_debounce_1.useDebouncedCallback((value) => setValidateData(value), 250);
const input = react_1.useRef();
react_1.useEffect(() => {
onRef && onRef(input);
});
react_1.useEffect(() => {
setValue(value);
}, [value]);
react_1.useEffect(() => {
debounceFunc(inputFieldValue);
}, [inputFieldValue, debounceFunc, disabled]);
const handleChange = react_1.useCallback((e) => {
setValue(e.target.value);
}, []);
return (react_1.default.createElement(core_1.TextField, { id: id, name: name, type: type, label: caption, defaultValue: defaultValue, variant: variant, className: `oneframe-form-field ${className}`, autoComplete: autoComplete, autoFocus: autoFocus, disabled: disabled, error: utility_1.getErrorStatus(validateMessages, id, errorText), helperText: utility_1.getErrorMessage(validateMessages, id, errorText, helperText), multiline: multiline, rows: rows, value: inputFieldValue, rowsMax: rowsMax, placeholder: placeholder, fullWidth: fullWidth, spellCheck: false, required: required, onChange: (e) => handleChange(e), onBlur: (e) => onBlur && onBlur(e), onClick: (e) => onClick && onClick(e), onKeyPress: (e) => onKeyPress && onKeyPress(e), onKeyUp: (e) => onKeyUp && onKeyUp(e), onKeyDown: (e) => onKeyDown && onKeyDown(e), size: size, InputProps: Object.assign(Object.assign({}, utility_1.getAdornments(leftAdornments, rightAdornments, variant, disableUnderline, numberFormat, maskFormat)), { readOnly, className: 'oneframe-input-base' }), inputProps: {
className: 'oneframe-input',
}, InputLabelProps: Object.assign(Object.assign({}, ((props.hasOwnProperty('captionActive') && captionActive) || (maskFormat && maskFormat.guide)
? { shrink: true }
: {})), { className: 'oneframe-input-label' }), inputRef: input }));
};
InputComponent.propTypes = {
id: prop_types_1.default.string.isRequired,
name: prop_types_1.default.string.isRequired,
value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
defaultValue: prop_types_1.default.string,
className: prop_types_1.default.string,
caption: prop_types_1.default.string,
errorText: prop_types_1.default.string,
helperText: prop_types_1.default.string,
autoComplete: prop_types_1.default.string,
placeholder: prop_types_1.default.string,
type: prop_types_1.default.string,
captionActive: prop_types_1.default.bool,
readOnly: prop_types_1.default.bool,
disabled: prop_types_1.default.bool,
required: prop_types_1.default.bool,
disableUnderline: prop_types_1.default.bool,
autoFocus: prop_types_1.default.bool,
multiline: prop_types_1.default.bool,
fullWidth: prop_types_1.default.bool,
submitStatus: prop_types_1.default.bool,
rows: prop_types_1.default.number,
rowsMax: prop_types_1.default.number,
ref: prop_types_1.default.any,
error: prop_types_1.default.any,
InputProps: prop_types_1.default.any,
InputLabelProps: prop_types_1.default.any,
inputProps: prop_types_1.default.any,
inputRef: prop_types_1.default.any,
setValidate: prop_types_1.default.any,
validateMessages: prop_types_1.default.any,
maskFormat: prop_types_1.default.any,
onClick: prop_types_1.default.any,
onRef: prop_types_1.default.func,
onChange: prop_types_1.default.func,
onBlur: prop_types_1.default.func,
onKeyPress: prop_types_1.default.func,
onKeyDown: prop_types_1.default.func,
onKeyUp: prop_types_1.default.func,
variant: prop_types_1.default.oneOf(['standard', 'outlined', 'filled']),
leftAdornments: prop_types_1.default.oneOfType([prop_types_1.default.func]),
rightAdornments: prop_types_1.default.oneOfType([prop_types_1.default.func]),
validate: prop_types_1.default.arrayOf(prop_types_1.default.shape({
required: prop_types_1.default.oneOf([
'required',
'maxSelect',
'minSelect',
'min',
'max',
'maxLength',
'minLength',
'custom',
'email',
'pattern',
'url',
'creditcard',
'number',
]),
message: prop_types_1.default.string,
regex: prop_types_1.default.any,
validate: prop_types_1.default.oneOfType([prop_types_1.default.func, prop_types_1.default.bool]),
value: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
})),
numberFormat: prop_types_1.default.oneOfType([
prop_types_1.default.bool,
prop_types_1.default.shape({
prefix: prop_types_1.default.string,
suffix: prop_types_1.default.string,
format: prop_types_1.default.string,
mask: prop_types_1.default.string,
decimalScale: prop_types_1.default.number,
fixedDecimalScale: prop_types_1.default.bool,
allowNegative: prop_types_1.default.bool,
allowEmptyFormatting: prop_types_1.default.bool,
thousandSeparator: prop_types_1.default.oneOfType([prop_types_1.default.bool, prop_types_1.default.oneOf([',', '.', ' '])]),
decimalSeparator: prop_types_1.default.oneOfType([prop_types_1.default.bool, prop_types_1.default.oneOf([',', '.'])]),
type: prop_types_1.default.oneOf(['text', 'tel', 'password']),
returnValue: prop_types_1.default.oneOf(['floatValue', 'formattedValue', 'value']),
displayType: prop_types_1.default.oneOf(['text', 'input', undefined]),
removeFormatting: prop_types_1.default.func,
}),
]),
};
exports.InputTmp = InputComponent;
const MemoComponent = react_1.default.memo(InputComponent, (p, n) => lodash_1.isEqual(p.value, n.value) &&
lodash_1.isEqual(p.validateMessages, n.validateMessages) &&
lodash_1.isEqual(p.validate, n.validate) &&
lodash_1.isEqual(p.disabled, n.disabled) &&
lodash_1.isEqual(p.onChange, n.onChange) &&
lodash_1.isEqual(p.caption, n.caption) &&
lodash_1.isEqual(p.rows, n.rows) &&
lodash_1.isEqual(p.rowsMax, n.rows) &&
lodash_1.isEqual(p.error, n.error) &&
lodash_1.isEqual(p.errorText, n.errorText) &&
lodash_1.isEqual(p.multiline, n.multiline) &&
lodash_1.isEqual(p.readOnly, n.readOnly) &&
lodash_1.isEqual(p.helperText, n.helperText) &&
lodash_1.isEqual(p.type, n.type) &&
lodash_1.isEqual(p.placeholder, n.placeholder) &&
lodash_1.isEqual(p.variant, n.variant) &&
lodash_1.isEqual(p.numberFormat, n.numberFormat) &&
lodash_1.isEqual(p.leftAdornments, n.leftAdornments) &&
lodash_1.isEqual(p.rightAdornments, n.rightAdornments) &&
lodash_1.isEqual(p.maskFormat, n.maskFormat) &&
lodash_1.isEqual(p.className, n.className));
exports.default = withValidate_1.withValidate(MemoComponent);