react-form-ui-y
Version:
200 lines (186 loc) • 6.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.selectSty = undefined;
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _reactUtilsY = require("react-utils-y");
var _formStyle = require("../formStyle");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var selectSty = function selectSty(_theme, _this) {
var textWidth = _this.props.textWidth || "4rem"; //8rem
textWidth = textWidth && textWidth.indexOf('rem') >= 0 ? parseFloat(textWidth) : parseFloat(textWidth / 16);
var publicSty = (0, _formStyle.defaultPublic)(_theme, _this);
var sty = {
//select默认样式
selectBox: {
padding: "0px 0px 0px 0.625rem",
margin: "0px",
width: "100%",
height: "2rem",
wordBreak: "keep-all",
boxSizing: "border-box",
display: "flex",
alignItems: "center",
color: "" + (_theme.publicForm.valueColor || '#666666'),
cursor: "pointer"
},
//select正在操作中样式
selectBoxFocus: {
padding: "0px 0px 0px 0.625rem",
margin: "0px",
width: "100%",
height: "2rem",
wordBreak: "keep-all",
boxSizing: "border-box",
display: "flex",
alignItems: "center",
color: "" + (_theme.input.focusColor || '#666666'),
cursor: "pointer"
},
//select禁用样式
selectBoxDis: {
padding: "0px 0px 0px 0.625rem",
margin: "0px",
width: "100%",
height: "2rem",
wordBreak: "keep-all",
boxSizing: "border-box",
display: "flex",
alignItems: "center",
color: "" + (_theme.publicForm.disValueColor || '#000')
},
//选中的文字
inputText: {
flex: "1",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
textAlign: _this.props.valueAlign
},
//下拉svg
inputSvg: {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: "0.625rem",
marginLeft: "0.625rem"
},
//下拉值弹出框
dialogTit: {
color: "" + (_theme.select.dialogTit || '#000'),
height: "2.6rem"
},
//下拉样式
selectListBox_b_r: {
display: "flex",
flexDirection: "column",
border: "0.08rem solid #dfdfdf",
position: "absolute",
background: "#fff",
zIndex: "6",
top: '2.3rem',
left: "" + (_this.props.formType == "box" ? "" : _this.props.formText ? textWidth + 1.25 + "rem" : "") //1.25是校验*的宽度
},
selectListBox_t_r: {
display: "flex",
flexDirection: "column",
border: "0.08rem solid #dfdfdf",
position: "absolute",
background: "#fff",
zIndex: "6",
bottom: '2.3rem',
left: "" + (_this.props.formType == "box" ? "" : _this.props.formText ? textWidth + 1.25 + "rem" : "") //1.25是校验*的宽度
},
selectListBox_b_l: {
display: "flex",
flexDirection: "column",
border: "0.08rem solid #dfdfdf",
position: "absolute",
background: "#fff",
zIndex: "6",
top: '2.3rem',
right: "0"
},
selectListBox_t_l: {
display: "flex",
flexDirection: "column",
border: "0.08rem solid #dfdfdf",
position: "absolute",
background: "#fff",
zIndex: "6",
bottom: '2.3rem',
right: "0"
},
//默认item样式
selectItem: {
// margin: "0 0.8rem",
// padding: "0.3rem 0",
display: "flex",
alignItems: "center",
paddingLeft: "0.625rem",
paddingRight: "1rem",
paddingTop: "0.1875rem",
paddingBottom: "0.1875rem",
minHeight: "1.625rem",
wordBreak: "break-all",
transition: "all 500ms",
cursor: "pointer",
justifyContent: _this.props.selectAlign,
fontSize: "" + (_theme.select.selectSize || ''),
color: "#666666"
},
//选中item样式
selectItemCheck: {
// margin: "0 0.8rem",
// padding: "0.3rem 0",
display: "flex",
alignItems: "center",
paddingLeft: "0.625rem",
paddingRight: "1rem",
paddingTop: "0.1875rem",
paddingBottom: "0.1875rem",
minHeight: "1.625rem",
wordBreak: "break-all",
color: "" + (_theme.select.chooseItem || '#666666'),
transition: "all 500ms",
cursor: "pointer",
justifyContent: _this.props.selectAlign,
fontSize: "" + (_theme.select.selectSize || '')
},
//移动item样式
selectItemMove: {
// margin: "0 0.8rem",
// padding: "0.3rem 0",
display: "flex",
alignItems: "center",
paddingLeft: "0.625rem",
paddingRight: "1rem",
paddingTop: "0.1875rem",
paddingBottom: "0.1875rem",
minHeight: "1.625rem",
// background: "#eee",
background: "" + (_theme.select.moveItem || '#eee'),
wordBreak: "break-all",
transition: "all 500ms",
cursor: "pointer",
justifyContent: _this.props.selectAlign,
fontSize: "" + (_theme.select.selectSize || ''),
color: "#666666"
},
//下拉出现的透明遮罩背景，点击其他地方消失
selectdialogMask: {
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0)",
position: "fixed",
top: "0",
left: "0",
zIndex: "5"
}
};
return _reactUtilsY._Object.merge(publicSty, sty);
};
exports.selectSty = selectSty;
//# sourceMappingURL=selectStyle.js.map