react-form-ui-y
Version:
558 lines (532 loc) • 16.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dateRangeStyle = 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 dateRangeStyle = function dateRangeStyle(_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"
},
DateFieldBox: {
width: "42rem", //双日期用"66.25rem" 单用42rem
height: "30rem",
display: "flex",
flexWrap: "wrap",
boxSizing: "border-box"
},
//日期内容头部
dateHead: {
// background: _theme.dateRange.dateHeadBg,
height: "3.75rem",
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
margin: "0px 1.875rem",
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: "5rem",
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.875rem",
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.875rem",
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: "5rem",
height: "0rem",
right: "1.875rem",
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: "5rem",
right: "1.875rem",
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",
zIndex: "1"
},
//天数渲染
flexBox: {
width: "25.625rem",
height: "25.375rem",
paddingLeft: "1.875rem",
boxSizing: "border-box"
},
//上下月份按钮 和展示区
titleBox: {
height: "3.125rem",
display: 'flex',
justifyContent: "center",
alignItems: "center"
},
leftBox: {
width: "3.125rem",
height: "3.125rem",
display: 'flex',
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
},
monthText: {
flex: "1",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold"
},
rightBox: {
width: "3.125rem",
height: "3.125rem",
display: 'flex',
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
},
// dateBox: {
// width: "100%",
// display: "flex",
// flexDirection: "column"
// },
//星期
dateWeek: {
width: "100%",
height: "3.125rem",
display: "flex",
alignItems: "center",
color: "#666666",
justifyContent: "space-between"
},
dateWeekDay: {
width: "3.125rem",
height: "3.125rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "1.25rem"
},
monthSty: {
height: "60%",
width: "80%",
background: "#fff",
borderRadius: "0.5rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
color: "#000"
},
//日历展示区
dateDay: {
// flex: "10",
// display: "flex",
// flexWrap: "wrap",
// flexDirection: "column"
// height: "17rem",
},
dateRow: {
width: "100%",
display: "flex",
height: "3.125rem",
justifyContent: "space-around",
alignItems: "center",
padding: 0,
margin: 0,
listStyle: "none"
},
dayBox: {
flex: "1",
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative",
fontSize: "1rem",
width: "1.5rem",
height: "1.5rem"
},
fixedBox: {
position: "absolute",
display: "flex",
width: "100%",
height: "100%",
top: 0,
right: 0,
zIndex: "-1"
},
fixedOn: {
flex: '1',
top: 0,
right: 0,
background: "blue"
},
fixedOff: {
flex: '1',
top: 0,
right: 0,
background: "#fff"
},
dayDataOn: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: _theme.dateRange.bothEndsDay,
color: "#fff",
borderRadius: "0.1rem",
cursor: "pointer"
},
dayDataOn2: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: _theme.dateRange.middleDay, //( theme ? theme.first : defaultTheme.first ),
color: "#000",
cursor: "pointer"
},
dayDataDisabled: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: "#fff",
color: "rgba(0,0,0,0.45)",
borderRadius: "50%"
},
dayDataOff: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: "#fff",
color: "#000",
borderRadius: "50%",
cursor: "pointer"
},
//input 选择文本展示区
inputBtnBox: {
width: "40rem", //双51.3rem 单40rem
height: "4rem",
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
position: "absolute"
},
inputBox: {
// width: "5.625rem",
// height: "2rem",
margin: "0 0.625rem",
// textAlign: "center",
// border: "0.0625rem solid rgb(204, 203, 203)",
fontSize: "1rem",
// background: "#eee",
// borderRadius: "0.2rem",
outline: "none",
fontWeight: "bold",
color: _theme.dateRange.chooseDateText
},
inputTo: {
fontSize: "1rem",
outline: "none",
fontWeight: "bold",
color: _theme.dateRange.chooseDateText
},
clearDateBtn: {
// position: "absolute",
// right: "38.5%",
marginLeft: "1rem"
},
//快捷按钮
fastBtnBox: {
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
flexDirection: "column",
width: "14rem"
},
fastItem: {
width: "10rem",
height: "2.2rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
},
fastChooseItem: {
width: "10rem",
height: "2.2rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
cursor: "pointer",
background: "#edf6ff"
},
//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: {
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
marginTop: "2rem",
marginBottom: "2rem"
}
};
return _reactUtilsY._Object.merge(publicSty, sty);
};
exports.dateRangeStyle = dateRangeStyle;
//# sourceMappingURL=dateRangeStyle.js.map