react-form-fy
Version:
213 lines (178 loc) • 11.3 kB
JavaScript
'use strict';
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; }; /**
* gufuyan
* @content 多选组件
* @date 2017-04-30 1.0版本
* @param props
* @constructor
*/
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactUiSvg = require('react-ui-svg');
var svg = _interopRequireWildcard(_reactUiSvg);
var _iconBtn = require('./iconBtn');
var _iconBtn2 = _interopRequireDefault(_iconBtn);
var _publicStyle = require('./publicStyle');
var _theme = require('./theme');
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; }
Array.prototype.S = String.fromCharCode(2);
Array.prototype.in_array = function (e) {
var r = new RegExp(this.S + e + this.S);
return r.test(this.S + this.join(this.S) + this.S);
};
Array.prototype.removeByValue = function (val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) {
this.splice(i, 1);
break;
}
}
};
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,
checkOnFill: _react.PropTypes.string,
checkUpFill: _react.PropTypes.string,
textWidth: _react.PropTypes.string,
valueWidth: _react.PropTypes.string
};
/**
* 遍历单选的DOM树，根据是否选中的判断展示不同的IconBtn
* @param props
* @constructor
*/
var TraversalCheckBox = function TraversalCheckBox(props) {
return _react2.default.createElement(
'div',
{ style: props.publicStyles.formSwichBox,
onClick: props.handleChange.bind(undefined, { value: props.val, indexKey: props.indexKey }) },
props.checkValue.in_array(props.val.text) ? _react2.default.createElement(_iconBtn2.default, _extends({ svgType: props.onSvgType || "CheckboxOn",
fill: !props.disabled ? props.checkOnFill : "#ccc",
value: { value: props.val, indexKey: props.indexKey }
//handleChange={""}
}, props)) : _react2.default.createElement(_iconBtn2.default, _extends({ svgType: props.upSvgType || "CheckboxUp",
fill: !props.disabled ? props.checkUpFill : "#ccc",
value: { value: props.val, indexKey: props.indexKey }
//handleChange={""}
}, props)),
_react2.default.createElement(
'label',
null,
props.val.text
)
);
};
var CheckboxField = function (_Component) {
_inherits(CheckboxField, _Component);
function CheckboxField(props) {
_classCallCheck(this, CheckboxField);
var _this = _possibleConstructorReturn(this, (CheckboxField.__proto__ || Object.getPrototypeOf(CheckboxField)).call(this, props));
_this.handleChange = function (values, e) {
if (_this.props.disabled) {
return false;
}
if (!(_this.props.dataObj[_this.props.inputName] instanceof Array)) {
_this.props.dataObj[_this.props.inputName] = [];
}
var checkValue = _this.props.dataObj[_this.props.inputName];
checkValue.in_array(values.value.text) ? checkValue.removeByValue(values.value.text) : checkValue.push(values.value.text);
_this.setState({ selectKey: values.indexKey });
_this.props.getValue && _this.props.getValue('checkBox', _this.props.inputName, checkValue, values.value);
};
_this.state = {
selectKey: -1,
styles: {
publicStyles: (0, _publicStyle.publicStyles)(_this.props.themeObj)
}
};
return _this;
}
_createClass(CheckboxField, [{
key: 'render',
value: function render() {
var _this2 = this;
var props = _objectWithoutProperties(this.props, []);
if (!(props.dataObj[props.inputName] instanceof Array)) {
props.dataObj[props.inputName] = [];
}
var Svg = svg[props.svgName];
var required = props.required || false;
var errorState = void 0;
var req = props.dataObj.required,
checkValue = props.dataObj[props.inputName],
selectKey = this.state.selectKey;
if (required) {
if (req && checkValue.length || !req && selectKey == -1 && checkValue.length) errorState = false;
if (req && !checkValue.length || !req && selectKey != -1 && !checkValue.length) errorState = 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 checkbox",
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(TraversalCheckBox, _extends({ key: index,
indexKey: index,
selectKey: _this2.state.selectKey,
val: value,
checkValue: checkValue,
handleChange: _this2.handleChange,
publicStyles: publicStyles
}, _this2.props));
}),
required == true ? errorState == true ? _react2.default.createElement(
'span',
{ className: 'errorTipBox', style: publicStyles.errorBox },
'\u8BE5\u503C\u4E0D\u80FD\u4E3A\u7A7A\uFF01'
) : null : null
)
);
}
}]);
return CheckboxField;
}(_react.Component);
CheckboxField.propTypes = propTypes;
exports.default = CheckboxField;
//# sourceMappingURL=checkboxField.js.map