react-form-ui-y
Version:
257 lines (233 loc) • 9.04 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getTheme = exports.boxError = exports.defaultError = exports.defaultFormText = exports.setWidStyles = exports.formContBox = exports.formContDefault = exports.setLocationClass = exports.setLocationFn = exports.renderBox = undefined;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactUtilsY = require("react-utils-y");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
//公用获取主题的方法
var getTheme = function getTheme(_this) {
// designationTheme 指定的主题， theme redux设置的全局主题,
var themeName = _this.props.designationTheme || _this.props.theme || "default";
//表单的类型， 如 ： 是带框类型的啊， 或者带线类型的啊
var formType = _this.props.formType ? _this.props.formType + "_type" : "default_type";
var _theme = _this.state.theme[themeName].form[formType];
if (!_theme) {
_theme = _this.state.theme["default"].form["default_type"];
}
return _theme;
};
//公用设置样式
var setWidStyles = function setWidStyles(_this, _styles, type) {
var styles = Object.assign({}, _styles);
var textWidth = _this.props.textWidth || "4rem"; //8rem
textWidth = textWidth && textWidth.indexOf('rem') >= 0 ? parseFloat(textWidth) : parseFloat(textWidth / 16);
var valueWidth = _this.props.valueWidth || '14.375rem';
valueWidth = valueWidth && valueWidth.indexOf('rem') >= 0 ? parseFloat(valueWidth) : parseFloat(valueWidth / 16);
//设置表单的总宽度
if (_this.props.formText) {
styles.formBox.width = textWidth + valueWidth + 1.25 + "rem"; //1.25是校验*的宽度
} else if (!_this.props.formText && _this.props.required) {
styles.formBox.width = 1.25 + valueWidth + "rem";
} else {
styles.formBox.width = valueWidth + "rem";
}
//表单textwidth
styles.formText.width = _this.props.formText ? textWidth + "rem" : "2rem";
if (_this.props.formType == "box") {
//表单valuewidth
styles.formVInput_box.width = valueWidth + "rem";
//提示
styles.inputHintText.width = valueWidth + "rem";
} else {
//表单valuewidth
styles.formVInput_delfault.width = valueWidth + "rem";
styles.formVInputFocus_delfault.width = valueWidth + "rem";
styles.formVInputError_delfault.width = valueWidth + "rem";
styles.formVInputDisabled_delfault.width = valueWidth + "rem";
//提示
styles.inputHintText.width = valueWidth + "rem";
//报错提示
styles.errorBox_delfault.width = valueWidth + "rem";
}
if (type == "textarea") {
var maxHeight = _this.props.maxHeight || "600px";
maxHeight = maxHeight && maxHeight.indexOf('rem') >= 0 ? parseFloat(maxHeight) : parseFloat(maxHeight) / 16;
styles.textareaDis.maxHeight = maxHeight + "rem";
}
// this.props.maxHeight || "600px"
return styles;
};
//公用设置下拉位置
var setLocationFn = function setLocationFn(_this, e) {
var formBox = _this.refs.formBox;
var marginTop = e.nativeEvent.clientY - e.nativeEvent.offsetY;
var marginBottom = window.innerHeight - marginTop - formBox.offsetHeight;
if (marginBottom > marginTop) {
_this.setState({
selLocationH: "bottom"
});
} else {
if (marginBottom > 352) {
_this.setState({
selLocationH: "bottom"
});
} else {
_this.setState({
selLocationH: "top"
});
}
}
var marginLeft = e.nativeEvent.clientX - e.nativeEvent.offsetX;
var marginRight = window.innerWidth - marginLeft - formBox.offsetWidth;
if (marginRight > marginLeft) {
_this.setState({
selLocationW: "right"
});
} else {
if (marginRight > 352) {
_this.setState({
selLocationW: "right"
});
} else {
_this.setState({
selLocationW: "left"
});
}
}
};
//获取位置信息的样式名
var setLocationClass = function setLocationClass(_this) {
var h = _this.state.selLocationH;
var w = _this.state.selLocationW;
var className = "selectListBox_b_r";
if (h == "bottom" && w == "right") {
className = "selectListBox_b_r";
}
if (h == "top" && w == "right") {
className = "selectListBox_t_r";
}
if (h == "bottom" && w == "left") {
className = "selectListBox_b_l";
}
if (h == "top" && w == "left") {
className = "selectListBox_t_l";
}
return className;
};
//defautl 和 box 类型
//表单公用文字描述
var defaultFormText = function defaultFormText(_this, styles) {
return [_this.props.formText ? _react2.default.createElement(
"div",
{ key: 1, style: styles.formText },
_react2.default.createElement(
"span",
{ style: _this.props.disabled ? styles.formTextSpanDis : styles.formTextSpan },
_this.props.formText
)
) : null, _this.props.formText && !_this.props.required ? _react2.default.createElement("label", { key: 2, style: styles.formRequired }) : null, _this.props.required ? _react2.default.createElement(
"label",
{ key: 2, style: styles.formRequired },
"*"
) : null, _react2.default.createElement(
"span",
{ key: 3, style: styles.formTextSpanLine },
" "
)];
};
//表单公用报错 default
var defaultError = function defaultError(verifyFlag, styles) {
return verifyFlag.errorState ? _react2.default.createElement(
"div",
{ style: styles.errorBox_delfault },
_react2.default.createElement(
"p",
{ style: styles.errorText },
verifyFlag.errorText
)
) : null;
};
//表单公用报错 box
var boxError = function boxError(verifyFlag, styles) {
return verifyFlag.errorState ? _react2.default.createElement(
"div",
{ style: styles.errorBox_box },
_react2.default.createElement(
"p",
{ style: styles.errorText },
verifyFlag.errorText
)
) : null;
};
/**
* formType 是 default 类型
* @param verifyFlag 校验返回值
* @param formValueDom subpage传来
*/
var formContDefault = function formContDefault(_this, styles, verifyFlag, value, formValueDom, _theme) {
return _react2.default.createElement(
"div",
{ style: styles.formCont_default },
defaultFormText(_this, styles),
_react2.default.createElement(
"div",
{ style: _this.state.focusState ? styles.formVInputFocus_delfault : verifyFlag.errorState ? styles.formVInputError_delfault : _this.props.disabled ? styles.formVInputDisabled_delfault : styles.formVInput_delfault },
formValueDom(_this, styles, value, _theme)
)
);
};
/**
* formType 是 box 类型
* @param verifyFlag 校验返回值
* @param formValueDom subpage传来
*/
var formContBox = function formContBox(_this, styles, verifyFlag, value, formValueDom, _theme) {
return _react2.default.createElement(
"div",
{ style: _this.props.disabled ? styles.formContDiabled_box : _this.state.focusState ? styles.formContFocus_box : styles.formCont_box },
defaultFormText(_this, styles),
_react2.default.createElement(
"div",
{ style: styles.formVInput_box },
formValueDom(_this, styles, value, _theme)
)
);
};
//初始化渲染
var renderBox = function renderBox(_this, styleFn, formTypeDom, verifyFn) {
var formType = _this.props.formType || "default";
var _theme = getTheme(_this);
var styles = _reactUtilsY._Object.merge({}, styleFn(_theme, _this));
var resSetWidStyles = setWidStyles(_this, styles),
resVerifyFn = verifyFn(_this);
switch (formType) {
case "default":
return formTypeDom[formType + "Dom"](_this, resSetWidStyles, resVerifyFn, _theme);
break;
case "box":
return formTypeDom[formType + "Dom"](_this, resSetWidStyles, resVerifyFn, _theme);
break;
default:
return _react2.default.createElement(
"div",
null,
"\u6CA1\u6709\u5BF9\u5E94formType\u4E3A",
_this.props.formType,
"\u7684\u7C7B\u578B"
);
}
};
exports.renderBox = renderBox;
exports.setLocationFn = setLocationFn;
exports.setLocationClass = setLocationClass;
exports.formContDefault = formContDefault;
exports.formContBox = formContBox;
exports.setWidStyles = setWidStyles;
exports.defaultFormText = defaultFormText;
exports.defaultError = defaultError;
exports.boxError = boxError;
exports.getTheme = getTheme;
//# sourceMappingURL=publicField.js.map