@6thquake/react-material
Version:
React components that implement Google's Material Design.
282 lines (232 loc) • 9.13 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
var _FormHelperText = _interopRequireDefault(require("../FormHelperText"));
var _FormControl = _interopRequireDefault(require("../FormControl"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _formsyReact = require("formsy-react");
var _recompose = require("recompose");
var _withFormItem = _interopRequireDefault(require("../Form/withFormItem"));
var _withForm = _interopRequireDefault(require("../Form/withForm"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var style = function style(theme) {
return {
formHelpTextContainer: {
marginTop: '-8px',
minHeight: '12px'
},
formHelperTextRoot: {
marginTop: 0
}
};
};
var RadioGroup =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(RadioGroup, _Component);
function RadioGroup() {
var _getPrototypeOf2;
var _this;
(0, _classCallCheck2.default)(this, RadioGroup);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(RadioGroup)).call.apply(_getPrototypeOf2, [this].concat(args)));
_this.onChange = function (event) {
// setValue() will set the value of the component, which in
// turn will validate it and the rest of the form
// Important: Don't skip this step. This pattern is required
// for Formsy to work.
var value = event.target.value;
_this.props.setValue(value);
var onChange = _this.props.onChange;
onChange && onChange(event, value);
};
return _this;
}
(0, _createClass2.default)(RadioGroup, [{
key: "renderFormComponent",
value: function renderFormComponent() {
var _this$props = this.props,
classes = _this$props.classes,
getErrorMessage = _this$props.getErrorMessage,
getErrorMessages = _this$props.getErrorMessages,
getValue = _this$props.getValue,
hasValue = _this$props.hasValue,
isFormDisabled = _this$props.isFormDisabled,
isValid = _this$props.isValid,
isPristine = _this$props.isPristine,
isFormSubmitted = _this$props.isFormSubmitted,
isRequired = _this$props.isRequired,
isValidValue = _this$props.isValidValue,
resetValue = _this$props.resetValue,
setValidations = _this$props.setValidations,
setValue = _this$props.setValue,
showRequired = _this$props.showRequired,
showError = _this$props.showError,
validationError = _this$props.validationError,
validationErrors = _this$props.validationErrors,
validations = _this$props.validations,
innerRef = _this$props.innerRef,
value = _this$props.value,
onChange = _this$props.onChange,
children = _this$props.children,
formInputRef = _this$props.formInputRef,
rest = (0, _objectWithoutProperties2.default)(_this$props, ["classes", "getErrorMessage", "getErrorMessages", "getValue", "hasValue", "isFormDisabled", "isValid", "isPristine", "isFormSubmitted", "isRequired", "isValidValue", "resetValue", "setValidations", "setValue", "showRequired", "showError", "validationError", "validationErrors", "validations", "innerRef", "value", "onChange", "children", "formInputRef"]);
var error = false;
var helperText = null;
var isDisabled = isFormDisabled();
if (!isDisabled) {
if (!isPristine()) {
helperText = getErrorMessage();
error = !isValid();
}
}
var helpTextClasses = {
root: classes.formHelperTextRoot
};
var restClasses = (0, _omit.default)(classes, ['formHelpTextContainer', 'formHelperTextRoot']);
return _react.default.createElement(_FormControl.default, {
component: "fieldset",
required: this.props.required,
error: error
}, this.props.label && _react.default.createElement(_FormLabel.default, {
component: "legend"
}, this.props.label), _react.default.createElement(_RadioGroup.default, (0, _extends2.default)({
classes: restClasses,
value: getValue(),
disabled: isDisabled,
onChange: this.onChange,
ref: formInputRef
}, rest), children), _react.default.createElement("div", {
className: classes.formHelpTextContainer
}, error && _react.default.createElement(_FormHelperText.default, {
classes: helpTextClasses,
error: true
}, helperText)));
}
}, {
key: "render",
value: function render() {
return this.renderFormComponent();
}
}]);
return RadioGroup;
}(_react.Component);
RadioGroup.displayName = 'RadioGroup';
RadioGroup.propTypes = (0, _extends2.default)({
classes: _propTypes.default.object.isRequired
}, _formsyReact.propTypes);
RadioGroup.defaultProps = {
formInputRef: _react.default.createRef()
};
var FormComponent = (0, _recompose.compose)(_formsyReact.withFormsy, _withFormItem.default, (0, _withStyles.default)(style, {
name: 'RMRadioGroup'
}))(RadioGroup);
var C =
/*#__PURE__*/
function (_Component2) {
(0, _inherits2.default)(C, _Component2);
function C() {
(0, _classCallCheck2.default)(this, C);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf3.default)(C).apply(this, arguments));
}
(0, _createClass2.default)(C, [{
key: "getChildContext",
value: function getChildContext() {
var _this$props2 = this.props,
row = _this$props2.row,
size = _this$props2.size,
circular = _this$props2.circular,
classes = _this$props2.classes;
return {
row: row,
size: size,
circular: circular,
classes: classes
};
}
}, {
key: "render",
value: function render() {
var _this$props3 = this.props,
circular = _this$props3.circular,
size = _this$props3.size,
classes = _this$props3.classes,
props = (0, _objectWithoutProperties2.default)(_this$props3, ["circular", "size", "classes"]);
classes = classes || {};
var _classes = classes,
checked = _classes.checked,
classesPro = (0, _objectWithoutProperties2.default)(_classes, ["checked"]);
return _react.default.createElement(_RadioGroup.default, (0, _extends2.default)({}, props, {
classes: classesPro
}));
}
}]);
return C;
}(_react.Component);
C.childContextTypes = {
row: _propTypes.default.bool,
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
circular: _propTypes.default.bool,
classes: _propTypes.default.object
};
C.propTypes = {
/**
* @ignore
*/
children: _propTypes.default.node,
/**
* 是否圆角，只对按钮样式生效
*/
circular: _propTypes.default.bool,
/**
* The name used to reference the value of the control.
*/
name: _propTypes.default.string,
/**
* @ignore
*/
onBlur: _propTypes.default.func,
/**
* Callback fired when a radio button is selected.
*
* @param {object} event The event source of the callback.
* You can pull out the new value by accessing `event.target.value`.
* @param {string} value The `value` of the selected radio button
*/
onChange: _propTypes.default.func,
/**
* @ignore
*/
onKeyDown: _propTypes.default.func,
/**
* 大小，只对按钮样式生效
*/
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
/**
* Value of the selected radio button.
*/
value: _propTypes.default.string
};
C.defaultProps = {
size: 'medium',
circular: false
};
var _default = (0, _recompose.compose)(_withForm.default)(FormComponent, C);
exports.default = _default;