react-form-ui-y
Version:
235 lines (221 loc) • 7.61 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.textAlign
},
//下拉svg
inputSvg: {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: "0.625rem",
marginLeft: "0.625rem"
},
//下拉值弹出框
dialogTit: {
color: "" + (_theme.select.dialogTit || '#000'),
height: "2.6rem"
},
//下拉样式
chooseSelectBox: {
border: "#dfdfdf solid 0.08rem",
marginLeft: "-0.1rem"
},
chooseSelectCont: {
display: "flex",
flexWrap: "wrap",
// boxSizing: "border-box",
paddingLeft: "0.625rem",
paddingRight: "0.625rem",
paddingBottom: "0.375rem"
},
chooseSelectItem: {
background: "" + (_theme.selectCheckbox.chooseItemBg || '#eee'),
display: "flex",
fontSize: "0.875rem",
height: "1.5rem",
marginTop: "0.375rem",
marginRight: "0.375rem"
},
chooseSelectItemText: {
wordWrap: "break-word",
wordBreak: "break-all",
marginLeft: "0.625rem",
marginRight: "0.75rem",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "9rem",
display: "flex",
alignItems: "center"
},
delSelectItem: {
cursor: "pointer",
marginRight: "0.625rem",
display: "flex",
alignItems: "center"
},
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: {
wordBreak: "break-all",
paddingLeft: "0.625rem",
paddingRight: "1rem",
paddingTop: "0.1875rem",
paddingBottom: "0.1875rem",
minHeight: "1.625rem",
transition: "all 500ms",
display: "flex",
alignItems: "center",
cursor: "pointer",
justifyContent: _this.props.selectAlign == "center" ? "center" : "",
fontSize: "" + (_theme.selectCheckbox.selectSize || ''),
color: "#666666"
},
//选中item样式
selectItemCheck: {
wordBreak: "break-all",
paddingLeft: "0.625rem",
paddingRight: "1rem",
paddingTop: "0.1875rem",
paddingBottom: "0.1875rem",
minHeight: "1.625rem",
color: "" + (_theme.selectCheckbox.chooseItem || '#666666'),
fontSize: "" + (_theme.selectCheckbox.selectSize || ''),
transition: "all 500ms",
display: "flex",
alignItems: "center",
cursor: "pointer",
justifyContent: _this.props.selectAlign == "center" ? "center" : ""
},
//移动item样式
selectItemMove: {
wordBreak: "break-all",
paddingLeft: "0.625rem",
paddingRight: "1rem",
paddingTop: "0.1875rem",
paddingBottom: "0.1875rem",
minHeight: "1.625rem",
background: "" + (_theme.selectCheckbox.moveItem || '#eee'),
transition: "all 500ms",
display: "flex",
alignItems: "center",
cursor: "pointer",
justifyContent: _this.props.selectAlign == "center" ? "center" : "",
fontSize: "" + (_theme.selectCheckbox.selectSize || ''),
color: "#666666"
},
selectItemText: {
marginLeft: "0.5rem",
flex: "1"
},
//下拉出现的透明遮罩背景，点击其他地方消失
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