react-form-fy
Version:
195 lines (157 loc) • 10.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /**
* gufuyan
* @content 单选组件
* @date 2017-05-13 3.0版本
* @param props
* @constructor
*/
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _iconBtn = require('./iconBtn');
var _iconBtn2 = _interopRequireDefault(_iconBtn);
var _reactUiSvg = require('react-ui-svg');
var svg = _interopRequireWildcard(_reactUiSvg);
var _theme = require('./theme');
var _publicStyle = require('./publicStyle');
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var propTypes = {
inputName: _react.PropTypes.string.isRequired,
svgName: _react.PropTypes.string,
showFormText: _react.PropTypes.bool,
formText: _react.PropTypes.string,
data: _react.PropTypes.array.isRequired,
getValue: _react.PropTypes.func.isRequired,
required: _react.PropTypes.bool,
dataObj: _react.PropTypes.object.isRequired,
textIconWidth: _react.PropTypes.string,
textIconHeight: _react.PropTypes.string,
upSvgType: _react.PropTypes.string,
onSvgType: _react.PropTypes.string,
radioOnFill: _react.PropTypes.string,
radioUpFill: _react.PropTypes.string,
textWidth: _react.PropTypes.string,
valueWidth: _react.PropTypes.string
};
/**
* 遍历单选的DOM树，根据是否选中的判断展示不同的IconBtn
* @param props
* @constructor
*/
var TraversalRadio = function TraversalRadio(props) {
return _react2.default.createElement(
'div',
{ style: props.publicStyles.formSwichBox, className: 'aaa', onClick: props.handleChange.bind(undefined, props.value) },
typeof props.radioValue == "string" && props.radioValue == props.value.text || _typeof(props.radioValue) == "object" && props.radioValue.text == props.value.text ? _react2.default.createElement(_iconBtn2.default, _extends({ svgType: props.onSvgType || "RadioOn",
fill: !props.disabled ? props.radioOnFill : "#ccc"
//handleChange={""}
}, props)) : _react2.default.createElement(_iconBtn2.default, _extends({ svgType: props.upSvgType || "RadioUp",
fill: !props.disabled ? props.radioUpFill : "#ccc"
//handleChange={""}
}, props)),
_react2.default.createElement(
'label',
null,
props.value.text
)
);
};
var RadioField = function (_Component) {
_inherits(RadioField, _Component);
function RadioField(props) {
_classCallCheck(this, RadioField);
var _this = _possibleConstructorReturn(this, (RadioField.__proto__ || Object.getPrototypeOf(RadioField)).call(this, props));
_this.handleChange = function (values) {
if (_this.props.disabled) {
return false;
}
_this.setState({ error: 1 });
_this.props.getValue && _this.props.getValue('radio', _this.props.inputName, values.text, values.value, values);
};
_this.state = {
error: 0, // 0 没有触发过 1 已触发过
styles: {
publicStyles: (0, _publicStyle.publicStyles)(_this.props.themeObj)
}
};
return _this;
}
/**
* 点击单选按钮方法
* @param value
*/
_createClass(RadioField, [{
key: 'render',
value: function render() {
var _this2 = this;
var props = _objectWithoutProperties(this.props, []);
var Svg = svg[props.svgName];
var required = props.required || false;
var errorState = void 0;
if (required) {
var req = props.dataObj.required,
radioValue = this.state.radioValue,
error = this.state.error;
if (req && radioValue || !req && error != -1) errorState = false;
if (req && !radioValue || !req && error == -1) errorState = props.dataObj[props.inputName] ? false : true;
}
var styles = eval('(' + JSON.stringify(this.state.styles) + ')');
styles.publicStyles.formText.width = props.textWidth || '7.5rem';
styles.publicStyles.formVSwich.width = props.valueWidth || '14.375rem';
var publicStyles = styles.publicStyles;
return _react2.default.createElement(
'div',
{ style: publicStyles.formBox },
props.showFormText == false ? null : _react2.default.createElement(
'div',
{ style: publicStyles.formText },
props.svgName ? _react2.default.createElement(Svg, { fill: _theme.svgFill,
width: props.textIconWidth || _theme.formTextIconSize / 16 + "rem",
height: props.textIconHeight || _theme.formTextIconSize / 16 + "rem",
style: publicStyles.formSvg }) : null,
_react2.default.createElement(
'span',
null,
props.formText || "i am radio",
required ? _react2.default.createElement(
'label',
{ style: publicStyles.formRequired },
'*'
) : null
)
),
_react2.default.createElement(
'div',
{ style: publicStyles.formVSwich },
props.data.map(function (value, index) {
return _react2.default.createElement(TraversalRadio, _extends({ key: index,
value: value,
radioValue: props.dataObj[props.inputName],
handleChange: _this2.handleChange,
publicStyles: publicStyles
}, _this2.props));
}),
required == true ? errorState == true ? _react2.default.createElement(
'span',
{ style: publicStyles.errorBox },
'\u8BE5\u503C\u4E0D\u80FD\u4E3A\u7A7A\uFF01'
) : null : null
)
);
}
}]);
return RadioField;
}(_react.Component);
RadioField.propTypes = propTypes;
exports.default = RadioField;
//# sourceMappingURL=radioField.js.map