286 lines
8.4 KiB
JavaScript
286 lines
8.4 KiB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
import _isNull from "lodash/isNull";
|
|
import _isUndefined from "lodash/isUndefined";
|
|
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import Input from '../Input';
|
|
import ErrorMessage from '../ErrorMessage';
|
|
import { getUnhandledProps, defaultProps, prefix } from '../utils';
|
|
import { PLACEMENT_8 } from '../constants';
|
|
import FormContext, { FormValueContext, FormErrorContext, FormPlaintextContext } from '../Form/FormContext';
|
|
|
|
var FormControl =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
_inheritsLoose(FormControl, _React$Component);
|
|
|
|
function FormControl(_props, context) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, _props, context) || this;
|
|
|
|
_this.handleFieldChange = function (value, event) {
|
|
var _this$props = _this.props,
|
|
name = _this$props.name,
|
|
onChange = _this$props.onChange;
|
|
var onFieldChange = _this.context.onFieldChange;
|
|
|
|
var checkTrigger = _this.getCheckTrigger();
|
|
|
|
_this.setState({
|
|
value: value
|
|
});
|
|
|
|
_this.handleFieldCheck(value, checkTrigger === 'change').then(function (checkResult) {
|
|
_this.setState({
|
|
checkResult: checkResult
|
|
});
|
|
});
|
|
|
|
onFieldChange(name, value, event);
|
|
onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
|
|
};
|
|
|
|
_this.handleFieldBlur = function (event) {
|
|
var _this$props$onBlur, _this$props2;
|
|
|
|
var checkTrigger = _this.getCheckTrigger();
|
|
|
|
var value = _this.getValue() || _this.state.value;
|
|
|
|
_this.handleFieldCheck(value, checkTrigger === 'blur');
|
|
|
|
(_this$props$onBlur = (_this$props2 = _this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props2, event);
|
|
};
|
|
|
|
_this.handleFieldCheck = function (value, isCheckTrigger, callback) {
|
|
var _this$props3 = _this.props,
|
|
name = _this$props3.name,
|
|
formValue = _this$props3.formValue,
|
|
checkAsync = _this$props3.checkAsync;
|
|
var _this$context = _this.context,
|
|
onFieldError = _this$context.onFieldError,
|
|
onFieldSuccess = _this$context.onFieldSuccess,
|
|
model = _this$context.model;
|
|
|
|
var callbackEvents = function callbackEvents(checkResult) {
|
|
if (isCheckTrigger) {
|
|
if (checkResult.hasError) {
|
|
onFieldError(name, checkResult.errorMessage, callback);
|
|
} else {
|
|
onFieldSuccess(name, callback);
|
|
}
|
|
}
|
|
|
|
return checkResult;
|
|
};
|
|
|
|
if (checkAsync) {
|
|
return model.checkForFieldAsync(name, value, formValue).then(function (checkResult) {
|
|
return callbackEvents(checkResult);
|
|
});
|
|
}
|
|
|
|
return Promise.resolve(callbackEvents(model.checkForField(name, value, formValue)));
|
|
};
|
|
|
|
_this.addPrefix = function (name) {
|
|
return prefix(_this.props.classPrefix)(name);
|
|
};
|
|
|
|
_this.renderError = function (formError, errorMessage) {
|
|
var _this$props4 = _this.props,
|
|
errorPlacement = _this$props4.errorPlacement,
|
|
name = _this$props4.name;
|
|
|
|
if (formError) {
|
|
errorMessage = formError[name];
|
|
}
|
|
|
|
return React.createElement(ErrorMessage, {
|
|
show: !!errorMessage,
|
|
className: _this.addPrefix('message-wrapper'),
|
|
placement: errorPlacement
|
|
}, errorMessage);
|
|
};
|
|
|
|
_this.renderAccepter = function () {
|
|
var _this$props5 = _this.props,
|
|
name = _this$props5.name,
|
|
Component = _this$props5.accepter,
|
|
props = _objectWithoutPropertiesLoose(_this$props5, ["name", "accepter"]);
|
|
|
|
var _this$context$formDef = _this.context.formDefaultValue,
|
|
formDefaultValue = _this$context$formDef === void 0 ? {} : _this$context$formDef;
|
|
var unhandled = getUnhandledProps(FormControl, props);
|
|
|
|
var value = _this.getValue();
|
|
|
|
var readOnly = _this.getReadOnly();
|
|
|
|
return React.createElement(Component, _extends({}, unhandled, {
|
|
readOnly: readOnly,
|
|
name: name,
|
|
onChange: _this.handleFieldChange,
|
|
onBlur: _this.handleFieldBlur,
|
|
defaultValue: formDefaultValue[name],
|
|
value: value
|
|
}));
|
|
};
|
|
|
|
if (!context || !context.onFieldChange) {
|
|
throw new Error("\n <FormControl> must be inside a component decorated with <Form>.\n And need to update React to 16.6.0 +.\n ");
|
|
}
|
|
|
|
var _context$formDefaultV = context.formDefaultValue,
|
|
_formDefaultValue = _context$formDefaultV === void 0 ? {} : _context$formDefaultV;
|
|
|
|
var _name = _props.name;
|
|
_this.state = {
|
|
checkResult: {},
|
|
value: _this.getValue(_props) || _formDefaultValue[_name]
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
var _proto = FormControl.prototype;
|
|
|
|
_proto.getValue = function getValue(props) {
|
|
var _ref = props || this.props,
|
|
formValue = _ref.formValue,
|
|
name = _ref.name,
|
|
value = _ref.value;
|
|
|
|
if (!_isUndefined(value)) {
|
|
return value;
|
|
}
|
|
|
|
if (!formValue) {
|
|
return;
|
|
}
|
|
|
|
return formValue[name];
|
|
};
|
|
|
|
_proto.getCheckTrigger = function getCheckTrigger() {
|
|
var checkTrigger = this.context.checkTrigger;
|
|
return this.props.checkTrigger || checkTrigger;
|
|
};
|
|
|
|
_proto.getReadOnly = function getReadOnly() {
|
|
var readOnly = this.context.readOnly;
|
|
|
|
if (!_isUndefined(readOnly)) {
|
|
return readOnly;
|
|
}
|
|
|
|
return this.props.readOnly;
|
|
};
|
|
|
|
_proto.getPlaintext = function getPlaintext() {
|
|
var plaintext = this.context.plaintext;
|
|
|
|
if (!_isUndefined(plaintext)) {
|
|
return plaintext;
|
|
}
|
|
|
|
return this.props.plaintext;
|
|
};
|
|
|
|
_proto.checkErrorFromContext = function checkErrorFromContext() {
|
|
var errorFromContext = this.context.errorFromContext;
|
|
var errorMessage = this.props.errorMessage;
|
|
|
|
if (typeof errorMessage !== 'undefined') {
|
|
return this.renderError(undefined, errorMessage);
|
|
}
|
|
|
|
if (errorFromContext) {
|
|
return React.createElement(FormErrorContext.Consumer, null, this.renderError);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var plaintextDefaultValue = this.props.plaintextDefaultValue;
|
|
var readOnly = this.getReadOnly();
|
|
var plaintext = this.getPlaintext();
|
|
var value = this.getValue();
|
|
var classes = classNames(this.addPrefix('wrapper'), {
|
|
'read-only': readOnly,
|
|
plaintext: plaintext
|
|
});
|
|
|
|
if (plaintext && (_isUndefined(value) || _isNull(value))) {
|
|
return React.createElement("div", {
|
|
className: classes
|
|
}, React.createElement("div", {
|
|
className: this.addPrefix('default-value')
|
|
}, plaintextDefaultValue));
|
|
}
|
|
|
|
return React.createElement("div", {
|
|
className: classes
|
|
}, React.createElement(FormPlaintextContext.Provider, {
|
|
value: plaintext
|
|
}, this.renderAccepter()), this.checkErrorFromContext());
|
|
};
|
|
|
|
return FormControl;
|
|
}(React.Component);
|
|
|
|
FormControl.contextType = FormContext;
|
|
FormControl.propTypes = {
|
|
name: PropTypes.string,
|
|
checkTrigger: PropTypes.oneOf(['change', 'blur', 'none']),
|
|
checkAsync: PropTypes.bool,
|
|
accepter: PropTypes.elementType,
|
|
onChange: PropTypes.func,
|
|
onBlur: PropTypes.func,
|
|
classPrefix: PropTypes.string,
|
|
errorMessage: PropTypes.node,
|
|
errorPlacement: PropTypes.oneOf(PLACEMENT_8),
|
|
formValue: PropTypes.object,
|
|
readOnly: PropTypes.bool,
|
|
plaintext: PropTypes.bool,
|
|
plaintextDefaultValue: PropTypes.node,
|
|
value: PropTypes.any
|
|
};
|
|
FormControl.defaultProps = {
|
|
accepter: Input,
|
|
errorPlacement: 'bottomStart',
|
|
plaintextDefaultValue: '--'
|
|
};
|
|
|
|
var FormControlWrapper =
|
|
/*#__PURE__*/
|
|
function (_React$Component2) {
|
|
_inheritsLoose(FormControlWrapper, _React$Component2);
|
|
|
|
function FormControlWrapper() {
|
|
return _React$Component2.apply(this, arguments) || this;
|
|
}
|
|
|
|
var _proto2 = FormControlWrapper.prototype;
|
|
|
|
_proto2.render = function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(FormValueContext.Consumer, null, function (formValue) {
|
|
return React.createElement(FormControl, _extends({}, _this2.props, {
|
|
formValue: formValue
|
|
}));
|
|
});
|
|
};
|
|
|
|
return FormControlWrapper;
|
|
}(React.Component);
|
|
|
|
var EnhancedFormControl = defaultProps({
|
|
classPrefix: 'form-control'
|
|
})(FormControlWrapper);
|
|
export default EnhancedFormControl; |