react-form-ui-y
Version:
290 lines (269 loc) • 11.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formTypeDom = exports.verifyFn = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactSvgY = require('react-svg-y');
var _reactSvgY2 = _interopRequireDefault(_reactSvgY);
var _reactDialogY = require('react-dialog-y');
var _reactDialogY2 = _interopRequireDefault(_reactDialogY);
var _reactScrollY = require('react-scroll-y');
var _reactScrollY2 = _interopRequireDefault(_reactScrollY);
var _publicField = require('../publicField');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//select 获取值
var getValue = function getValue(_this) {
var formDataValue = _this.props.formData[_this.props.dataType || "default"];
var inputData = formDataValue && formDataValue[_this.props.inputName];
return inputData && inputData.text ? inputData.text.join() : "";
};
//select 的校验
var verifyFn = function verifyFn(_this) {
var required = _this.props.required || false,
initFocusState = _this.state.initFocusState,
value = getValue(_this);
var errorText = _this.props.errorText || "该值不能为空!";
var errorState = false;
var subVerifyRes = _this.props.subVerifyRes && _this.props.subVerifyRes[_this.props.dataType || "default"];
//如果是必填
if (required && (subVerifyRes == "fail" || initFocusState == 1)) {
if (value.trim()) {
errorState = false;
} else {
errorState = true;
}
}
return { errorState: errorState, errorText: errorText };
};
/**
* 下拉内容展示区
* @returns {XML}
*/
var selectCont = function selectCont(_this, styles, inputData, width, theme) {
return [inputData.obj.length ? _react2.default.createElement(
'div',
{ key: 1, style: styles.chooseSelectBox },
_react2.default.createElement(
_reactScrollY2.default,
{ shouldUpdate: _this.state.shouldUpdateChoose,
initScroll: _this.initScrollChoose,
botFixed: false,
width: width,
maxHeight: '8.2rem',
bottomScroll: 'N'
},
_react2.default.createElement(
'div',
{ style: styles.chooseSelectCont },
(inputData.obj || []).map(function (item, index) {
return _react2.default.createElement(
'div',
{ key: index, style: styles.chooseSelectItem },
_react2.default.createElement(
'label',
{ style: styles.chooseSelectItemText },
item.text
),
_react2.default.createElement(
'div',
{ style: styles.delSelectItem, onClick: _this.handleSelect.bind(undefined, item) },
_react2.default.createElement(_reactSvgY2.default, { type: 'Clear', width: '1rem', height: '1rem', fill: 'red' })
)
);
})
)
)
) : null, _react2.default.createElement(
'div',
{ key: 2, style: styles.searchBox },
_react2.default.createElement('input', { style: styles.searchInput,
value: _this.state.inputValue
//onFocus={_this.onfocus}
// onBlur={_this.onblur}
, onChange: _this.onchange,
onKeyUp: _this.keyupFn
}),
_this.state.inputValue ? "" : _react2.default.createElement(
'div',
{ style: styles.inputTip },
'\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u641C\u7D22'
),
_react2.default.createElement(
'div',
{ style: styles.searchBtn, onClick: _this.searchFn },
_react2.default.createElement(_reactSvgY2.default, { type: 'Query', width: '1rem', height: '1rem', fill: theme.selectLenovoCheckbox.searchSvgFill })
)
), _this.props.requestLoading ? _react2.default.createElement(
'div',
{ key: 3, style: styles.loadingBox },
'\u6B63\u5728\u52A0\u8F7D\u4E2D...'
) : null, _react2.default.createElement(
_reactScrollY2.default,
{ key: 4, shouldUpdate: _this.state.shouldUpdateList,
initScroll: _this.initScrollList,
requestFlag: _this.props.requestFlag,
requestDataBack: _this.props.onRequestService && _this.props.onRequestService.bind(_this, "page", _this.state.inputValue ? _this.state.inputValue.trim() : ""),
botFixed: false,
width: width,
maxHeight: '20rem',
bottomScroll: 'N'
},
_this.props.dataSource.map(function (item, index) {
return _react2.default.createElement(
'div',
{ key: index,
style: _this.state.moveSelect == item.text ? styles.selectItemMove : (inputData.value || []).indexOf(item.value) >= 0 ? styles.selectItemCheck : styles.selectItem,
onMouseMove: _this.moveSelect.bind(undefined, item),
onMouseLeave: _this.leaveSelect.bind(undefined, item),
onClick: _this.handleSelect.bind(undefined, item) },
(inputData.value || []).indexOf(item.value) >= 0 ? _react2.default.createElement(_reactSvgY2.default, { type: 'CheckboxOn', width: '1rem', height: '1rem',
fill: theme.selectCheckbox.svgFill }) : _react2.default.createElement(_reactSvgY2.default, { type: 'CheckboxUp', width: '1rem', height: '1rem',
fill: theme.selectCheckbox.svgFill }),
_react2.default.createElement(
'div',
{ style: styles.selectItemText },
item.text
)
);
}),
!(_this.props.dataSource && _this.props.dataSource.length > 0) ? _react2.default.createElement(
'div',
{ style: styles.selectItem },
'\u8FD8\u6CA1\u6709\u4E0B\u62C9\u9009\u9879\uFF0C\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u67E5\u8BE2'
) : null
)];
};
/**
* selectType 为 select 的类型
*/
var defaultSelect = function defaultSelect(_this, styles, value, theme) {
var width = parseFloat(styles.formBox.width) - 0.2 + "rem";
var formDataValue = _this.props.formData[_this.props.dataType || "default"];
var inputData = formDataValue && formDataValue[_this.props.inputName];
return [_react2.default.createElement('div', { key: '1', onClick: _this.closeSelect, style: styles.selectdialogMask }), _react2.default.createElement(
'div',
{ key: '2', style: styles[(0, _publicField.setLocationClass)(_this)] },
selectCont(_this, styles, inputData, _this.props.selectWidth || width, theme)
)];
};
/**
* selectType 为 dialog 的类型
*/
var defaultDialog = function defaultDialog(_this, styles, value, theme) {
var width = parseFloat(styles.formBox.width);
var widthScroll = (width < 30 ? 30 : width) + "rem";
var widthDialog = (width < 30 ? 30 : width) + 4 + "rem";
var formDataValue = _this.props.formData[_this.props.dataType || "default"];
var inputData = formDataValue && formDataValue[_this.props.inputName];
var dialogSty = {
maxWidth: widthDialog,
width: widthDialog,
maxHeight: "35rem"
};
return [_react2.default.createElement(
_reactDialogY2.default,
{ key: '1', open: _this.state.showSelect,
onRequestClose: _this.closeSelect,
contentStyle: dialogSty,
bodyStyle: dialogSty
},
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ style: styles.dialogTit },
'\u8BF7\u9009\u62E9',
_this.props.formText
),
selectCont(_this, styles, inputData, widthScroll, theme)
)
)];
};
/**
* input value dom
*/
var formValueDom = function formValueDom(_this, styles, value, theme) {
return [!value ? _react2.default.createElement(
'span',
{ key: 1, style: styles.inputHintText },
_this.props.hintText
) : null, _this.props.disabled ? _react2.default.createElement(
'div',
{ key: 2, style: styles.selectBoxDis, title: value },
value
) : _react2.default.createElement(
'div',
{ key: 3,
style: _this.state.focusState ? styles.selectBoxFocus : styles.selectBox,
title: value,
onClick: _this.showSelectFn
},
_react2.default.createElement(
'div',
{ style: styles.inputText },
value,
' '
),
_react2.default.createElement(
'div',
{ style: styles.inputSvg },
_react2.default.createElement(_reactSvgY2.default, { type: 'Bottom', width: '1rem', height: '1rem', fill: theme.publicForm.inputSvgFill })
)
)];
};
/**
* formType 是 default 类型
* @param verifyFlag 校验返回值
*/
var defaultDom = function defaultDom(_this, styles, verifyFlag, _theme) {
if (!_this.props.inputName) {
return _react2.default.createElement(
'div',
null,
'inputName\u4E3A\u5FC5\u8981\u53C2\u6570'
);
}
var value = getValue(_this);
var selectType = _this.props.selectType || "select";
return _react2.default.createElement(
'div',
{ ref: 'formBox', style: styles.formBox },
(0, _publicField.formContDefault)(_this, styles, verifyFlag, getValue(_this), formValueDom, _theme),
(0, _publicField.defaultError)(verifyFlag, styles),
_this.state.showSelect && selectType == "select" && defaultSelect(_this, styles, value, _theme),
_this.state.showSelect && selectType == "dialog" && defaultDialog(_this, styles, value, _theme)
);
};
/**
* formType 是 box 类型
* @param verifyFlag 校验返回值
*/
var boxDom = function boxDom(_this, styles, verifyFlag, _theme) {
if (!_this.props.inputName) {
return _react2.default.createElement(
'div',
null,
'inputName\u4E3A\u5FC5\u8981\u53C2\u6570'
);
}
var value = getValue(_this);
var selectType = _this.props.selectType || "select";
return _react2.default.createElement(
'div',
{ ref: 'formBox', style: styles.formBox },
(0, _publicField.formContBox)(_this, styles, verifyFlag, getValue(_this), formValueDom, _theme),
(0, _publicField.boxError)(verifyFlag, styles),
_this.state.showSelect && selectType == "select" && defaultSelect(_this, styles, value, _theme),
_this.state.showSelect && selectType == "dialog" && defaultDialog(_this, styles, value, _theme)
);
};
var formTypeDom = {
defaultDom: defaultDom,
boxDom: boxDom
};
exports.verifyFn = verifyFn;
exports.formTypeDom = formTypeDom;
//# sourceMappingURL=subpage.js.map