react-form-ui-y
Version:
488 lines (468 loc) • 14.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dateWeekSty = 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 dateWeekSty = function dateWeekSty(_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 = {
//日期默认样式
dateBox: {
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"
},
//日期正在操作中样式
dateBoxFocus: {
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"
},
//日期禁用样式
dateBoxDis: {
padding: "0px 0px 0px 0.625rem",
margin: "0px",
width: "100%",
height: "2rem",
wordBreak: "keep-all",
boxSizing: "border-box",
display: "flex",
alignItems: "center",
textAlign: _this.props.textAlign,
color: "" + (_theme.publicForm.disValueColor || '#000')
},
//日期选中的文字
inputText: {
flex: "1",
overflow: "hidden",
textOverflow: "ellipsis",
textAlign: _this.props.textAlign
},
//日期svg
inputSvg: {
display: "flex",
alignItems: "center",
justifyContent: "center",
marginRight: "0.2rem"
},
//下拉出现的透明遮罩背景，点击其他地方消失
selectdialogMask: {
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0)",
position: "fixed",
top: "0",
left: "0",
zIndex: "5"
},
//下拉样式
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"
},
//日期盒子
DateFieldBoxSelect: {
width: "25.625rem",
height: "30rem",
display: "flex",
flexWrap: "wrap",
boxSizing: "border-box"
},
DateFieldBoxDialog: {
width: "25.625rem",
height: "34rem",
display: "flex",
flexWrap: "wrap",
boxSizing: "border-box"
},
//日期内容头部
dateHead: {
// background: _theme.dateWeek.dateHeadBg,
height: "3.75rem",
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
margin: "0px 1.25rem",
borderBottom: "#dfdfdf solid 0.08rem"
},
// dateHeadMonth: {
// color: "#fff",
// fontSize: "1.25rem",
// display: "flex",
// justifyContent: "center",
// },
dateYearBtn: {
width: "6.875rem",
height: "2.1875rem",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
border: "#dfdfdf solid 0.08rem",
borderRadius: "0.2rem",
cursor: "pointer",
zIndex: "1",
fontSize: "1.125rem",
padding: "0 0.625rem",
boxSizing: "border-box",
fontWeight: "bold"
},
dateMonthBtn: {
width: "5.4rem",
height: "2.1875rem",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
border: "#dfdfdf solid 0.08rem",
borderRadius: "0.2rem",
cursor: "pointer",
zIndex: "1",
fontSize: "1.125rem",
padding: "0 0.625rem",
boxSizing: "border-box",
fontWeight: "bold"
},
//年份
dateYearUl: {
listStyle: "none",
margin: "0",
padding: "0",
position: "absolute",
background: "#fff",
width: "6.875rem",
height: "0rem",
left: "1.25rem",
top: "3.3rem",
zIndex: "3",
transition: "all 500ms",
overflow: "hidden"
},
dateYearUlActive: {
listStyle: "none",
margin: "0",
padding: "0",
position: "absolute",
background: "#fff",
width: "6.875rem",
left: "1.25rem",
top: "3.3rem",
zIndex: "3",
height: "20rem",
border: "#eee solid 0.08rem",
boxShadow: "0.125rem 0.125rem 0.25rem -0.25rem #000",
overflow: "hidden",
boxSizing: "border-box"
},
dateYearRow: {
width: "6rem",
height: "2rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
// textIndent: "-1rem",
transition: "all 500ms"
},
dateYearActive: {
width: "6rem",
height: "2rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
background: "#eee",
color: _theme.dateRange.moveYear
// textIndent: "-1rem",
},
//月份
dateMonthUl: {
listStyle: "none",
margin: "0",
padding: "0",
position: "absolute",
background: "#fff",
width: "5.4rem",
height: "0rem",
right: "1.25rem",
top: "3.3rem",
zIndex: "3",
transition: "all 500ms",
overflow: "hidden",
boxSizing: "border-box"
},
dateMonthUlActive: {
listStyle: "none",
margin: "0",
padding: "0",
position: "absolute",
background: "#fff",
width: "5.4rem",
right: "1.25rem",
top: "3.3rem",
zIndex: "3",
height: "20rem",
border: "#eee solid 0.08rem",
boxShadow: "0.125rem 0.125rem 0.25rem -0.25rem #000",
overflow: "hidden",
boxSizing: "border-box"
},
dateMonthRow: {
width: "4rem",
height: "2rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
// textIndent: "-1rem",
transition: "all 500ms"
},
dateMonthActive: {
width: "4rem",
height: "2rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
background: "#eee",
color: _theme.date.moveYear
// textIndent: "-1rem",
},
//年份月份下拉的遮罩层
backbg: {
position: "absolute",
width: "100%",
height: "100%",
top: "0",
left: "0"
},
//星期或 左右按钮
dateDayBox: {
display: "flex",
flexWrap: "wrap",
margin: "0px 1.875rem",
width: "100%"
},
dateSwitchMonth: {
display: "flex",
width: "100%",
justifyContent: "space-between",
margin: "0.3rem 0.6rem 0"
},
handleDayText: {
// fontSize: "1.25rem",
fontSize: "1rem",
color: "" + (_theme.date.handleDayText || '#4aa5ff'),
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: "bold"
},
dateSvgClick: {
cursor: "pointer"
},
dateWeek: {
display: "flex",
alignItems: "center",
justifyContent: "space-around",
width: "100%",
// background: "#eee",
height: "3.125rem"
},
dateWeekDay: {
width: "1.5rem",
height: "1.5rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "1.25rem"
//margin: "0 0.125rem"
},
//天数
dateCont: {
height: "19.8rem",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
flex: "1",
margin: "0 1.875rem"
},
rosBox: {
display: "flex",
cursor: "pointer"
},
rosBoxCheck: {
display: "flex",
background: _theme.dateWeek.chooseDayRows,
cursor: "pointer"
},
rosBtnBox: {
width: "3rem",
height: "3rem",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
dateRow: {
display: "flex",
justifyContent: "space-around",
alignItems: "center",
padding: 0,
margin: "0",
width: "19.2rem",
height: "3.125rem"
},
dayBox: {
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative",
width: "1.5rem",
height: "1.5rem",
margin: "0 0.125rem",
fontSize: "1rem"
},
dayDefault: {
color: "#000",
fontSize: "1rem",
width: "0.3rem",
height: "0.3rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
cursor: "pointer"
},
dayDisabled: {
color: "#ccc",
fontSize: "1rem",
width: "0.3rem",
height: "0.3rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "50%",
cursor: "pointer"
},
dayToday: {
width: "0.3rem",
height: "0.3rem",
fontSize: "1rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "red",
cursor: "pointer"
},
dayActive: {
width: "100%",
height: "100%",
fontSize: "1rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
// background: "red",
color: _theme.dateWeek.today,
borderRadius: "0.1rem",
cursor: "pointer"
},
dayMoveOn: {
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "1rem",
height: "1.5rem",
width: "1.5rem",
background: "pink",
borderRadius: "0.1rem",
transition: "all 500ms",
color: "#000",
cursor: "pointer"
},
//loading
loadingBox: {
position: "absolute",
width: "100%",
height: "100%",
left: "0",
top: "0",
background: "red",
color: "#fff",
zIndex: "9",
display: "flex",
justifyContent: "center",
alignItems: "center"
},
//按钮
btnBox: {
display: "flex",
width: "88%",
justifyContent: "flex-end",
alignItems: "center",
height: "4rem",
borderTop: "#dfdfdf solid 0.08rem",
margin: "0 auto",
paddingRight: "1rem"
}
};
return _reactUtilsY._Object.merge(publicSty, sty);
};
exports.dateWeekSty = dateWeekSty;
//# sourceMappingURL=dateWeekStyle.js.map