ssc-grid
Version:
React grid component for SSC 3.0
333 lines (276 loc) • 9.38 kB
JavaScript
'use strict';
exports.__esModule = true;
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _FormGroup = require('react-bootstrap/lib/FormGroup');
var _FormGroup2 = _interopRequireDefault(_FormGroup);
var _HelpBlock = require('react-bootstrap/lib/HelpBlock');
var _HelpBlock2 = _interopRequireDefault(_HelpBlock);
var _validation = require('./utils/validation');
var validationUtils = _interopRequireWildcard(_validation);
var _sscRefer = require('ssc-refer');
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 }; }
/**
* 带有校验功能的文本框控件
*/
var ValidateRefers = function (_Component) {
(0, _inherits3['default'])(ValidateRefers, _Component);
function ValidateRefers(props) {
(0, _classCallCheck3['default'])(this, ValidateRefers);
var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));
_this.renderlabelKey = function (option) {
var label = '';
if (option) {
if (option.code) {
label = option.code;
}
if (option.name) {
label += ' ' + option.name;
}
}
return label;
};
_this.state = {
/**
* 帮助信息文本
* @type {String}
*/
helpText: '',
/**
* Set validationState to one of 'success', 'warning' or 'error' to show
* validation state. Set validationState to null (or undefined) to hide
* validation state
* @type {String}
*/
validationState: null
};
_this.handleBlur = _this.handleBlur.bind(_this);
_this.handleChange = _this.handleChange.bind(_this);
_this.handleFocus = _this.handleFocus.bind(_this);
return _this;
}
/**
* 重置参照组件，重置校验状态
* @public
*/
ValidateRefers.prototype.reset = function reset() {
this.refers.getInstance().clear();
this.setState({
helpText: '',
validationState: null
});
};
/**
* 父级组件主动校验
* @public
* @return {booean} 校验成功还是失败
*/
ValidateRefers.prototype.doValidate = function doValidate() {
return this.setValidationState(this.getRefersDisplayValue());
};
/**
* 获取参照的值，这里只处理第一个被选中的值
* @return {Object} 比如
* ```js
* {
* id: '',
* code: '',
* name: '',
* }
* ```
* 如果没有一个被选中，则返回null
*/
ValidateRefers.prototype.getRefersValue = function getRefersValue(selected) {
if (!selected) {
selected = this.refers.getInstance().getData();
}
return selected.length > 0 ? selected[0] : null;
};
/**
* 获取参照的值，这里只处理第一个被选中的值
* @return {Object} 比如
* ```js
* {
* id: '',
* code: '',
* name: '',
* }
* ```
*/
ValidateRefers.prototype.getRefersDisplayValue = function getRefersDisplayValue(selected) {
var value = this.getRefersValue(selected);
// 这里假设参照值的结构中`name`字段是用于显示的值
return value ? value.name : '';
};
/**
* 校验状态并设置组件状态
* @param {String} value 文本框内的值
* @return {boolean} 校验成功还是失败
*/
ValidateRefers.prototype.setValidationState = function setValidationState(value) {
var _validationUtils$calc = validationUtils.calcValidationState(value, this.props.validators),
validationState = _validationUtils$calc.validationState,
helpText = _validationUtils$calc.helpText;
this.setState({ helpText: helpText, validationState: validationState });
return validationState === 'success';
};
ValidateRefers.prototype.handleBlur = function handleBlur(event) {
this.setValidationState(this.getRefersDisplayValue());
if (this.props.onBlur) {
this.props.onBlur(event);
}
};
ValidateRefers.prototype.handleChange = function handleChange(selected) {
this.setState({ selected: selected });
this.setValidationState(this.getRefersDisplayValue(selected));
if (this.props.onChange) {
this.props.onChange(selected);
}
};
ValidateRefers.prototype.handleFocus = function handleFocus(event) {
if (this.props.onFocus) {
this.props.onFocus(event);
}
};
ValidateRefers.prototype._renderMenuItemChildren = function _renderMenuItemChildren(option, props, index) {
var label = option.code + ' ' + option.name;
return _react2['default'].createElement(
'span',
{ title: label, key: index },
label,
' '
);
};
ValidateRefers.prototype.render = function render() {
var _this2 = this;
return _react2['default'].createElement(
_FormGroup2['default'],
{
controlId: this.props.controlId,
validationState: this.state.validationState
},
_react2['default'].createElement(_sscRefer.Refers, (0, _extends3['default'])({
ref: function ref(c) {
return _this2.refers = c;
}
}, this.props, {
labelKey: this.props.labelKey || 'name'
// labelKey={this.renderlabelKey.bind(this)}
, disabled: this.props.disabled === true,
minLength: 0,
align: 'justify',
emptyLabel: '',
multiple: this.props.multiple || false,
onChange: this.handleChange,
onBlur: this.handleBlur,
onFocus: this.handleFocus,
placeholder: this.props.placeholder || '请选择...',
referType: 'list',
selected: this.props.selected,
renderMenuItemChildren: this.props.renderMenuItemChildren || this._renderMenuItemChildren
})),
_react2['default'].createElement(
_HelpBlock2['default'],
null,
this.state.helpText
)
);
};
return ValidateRefers;
}(_react.Component);
/**
* 控件(control/widget)分类
* Command input: Button, Drop-down list, ...
* Data input-output: Checkbox Color picker Combo box Cycle button Date Picker Grid view List box List builder Radio button Scrollbar Search box Slider Spinner Text box
* 来源：https://en.wikipedia.org/wiki/Widget_(GUI)
* 第二来源：https://docs.joomla.org/Standard_form_field_types
* Joomla的名称和Web更贴切，wikipedia不区分Web还是Client
*/
ValidateRefers.displayName = 'ValidateRefers';
exports['default'] = ValidateRefers;
ValidateRefers.propTypes = {
/**
* To ensure accessibility, set controlId on <FormGroup>
* https://react-bootstrap.github.io/components.html#forms
*/
controlId: _propTypes2['default'].string,
/**
* 是否禁用输入框
*/
disabled: _propTypes2['default'].bool,
/**
* 是否多选
*/
multiple: _propTypes2['default'].bool,
/**
* 请参照参照文档https://ssc-refer.github.io/
*/
labelKey: _propTypes2['default'].string,
/**
* 当光标离开输入框
*/
onBlur: _propTypes2['default'].func,
/**
* 当文本框内容被修改时候调用
*/
onChange: _propTypes2['default'].func,
/**
* 当文本框被聚焦
*/
onFocus: _propTypes2['default'].func,
/**
* 文本框占位字符
*/
placeholder: _propTypes2['default'].string,
/**
* 参照配置参数
* ```js
* referConfig = {
* referConditions: {"refCode":"dept","refType":"tree","rootName":"部门"};
* }
* ```
*/
referConditions: _propTypes2['default'].shape({
refCode: _propTypes2['default'].string,
refType: _propTypes2['default'].string,
rootName: _propTypes2['default'].string
}).isRequired,
/**
* referDataUrl: "http://172.20.4.220/ficloud/refbase_ctr/queryRefJSON";
*/
referDataUrl: _propTypes2['default'].string.isRequired,
/**
* 参照初始值
*/
selected: _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
id: _propTypes2['default'].string,
code: _propTypes2['default'].string,
name: _propTypes2['default'].string
})).isRequired,
/**
* 带有校验功能的输入框
*/
validators: _propTypes2['default'].arrayOf(_propTypes2['default'].shape({
type: _propTypes2['default'].string
})),
/**
* 自定义参照下拉列表
*/
renderMenuItemChildren: _propTypes2['default'].func
};
ValidateRefers.defaultProps = {
selected: [],
validators: []
};
module.exports = exports['default'];