react-form-fy
Version:
646 lines (637 loc) • 18.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dateRangeStyles = exports.iconBtnStyles = exports.dateAmi = exports.dateStyles = exports.center = exports.LenovoDownStyle = exports.inputStyle = exports.textareaStyle = exports.publicStyles = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _theme = require('./theme');
var _utilsFy = require('utils-fy');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultTheme = {
default: "#00BCD4", //亮色1
first: "#5ed0df", //亮色2
second: "#ededed", //灰色1
third: "#747474" //灰色2
};
var platType = _utilsFy.Platform.equipment;
var center = function center() {
return {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};
};
var publicStyles = function publicStyles(theme) {
return {
formBox: {
display: "inline-flex",
width: "100%",
margin: "0.3125rem 0",
WebkitAppearance: "none"
},
formText: {
width: "7.5rem",
display: "flex",
alignItems: "center",
height: "2.5rem"
},
formSvg: {
paddingRight: '0.3125rem'
},
formRequired: {
color: 'red',
padding: '0 0.5rem'
},
formVInput: {
width: "14.375rem",
position: "relative",
height: "3.5rem"
},
formVSwich: {
width: "14.375rem",
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
minHeight: "2.5rem",
position: "relative"
},
formSwichBox: {
minWidth: "6.25rem",
display: "flex",
alignItems: "center",
height: "2.5rem",
cursor: "pointer"
},
hintText: {
position: "absolute",
color: "#ccc",
margin: "0.125rem"
},
inputHintText: {
position: "absolute",
color: "#ccc",
margin: "0.125rem",
width: "100%",
height: "1.875rem",
lineHeight: "1.875rem"
},
errorBox: {
color: "red",
fontSize: "0.75rem",
width: "100%",
marginTop: "2.1875rem",
position: "absolute",
left: "0",
background: "#fff"
}
};
};
var inputStyle = function inputStyle(theme) {
return {
inputBox: {
padding: "0",
width: "100%",
border: "none",
outline: "none",
height: "1.875rem",
position: "relative",
background: "rgba(255, 255, 255, 0)",
fontSize: "1rem",
textOverflow: "ellipsis",
color: "#000"
},
tipDef: {
border: "none",
boxSizing: "content-box",
margin: "0",
position: "absolute",
width: "100%",
borderBottom: "0.08rem solid rgb(182, 182, 182)"
},
tipTwoBorder: {
borderBottom: "0.125rem solid rgb(182, 182, 182)"
},
tipDisabled: {
borderBottom: "0.08rem dashed rgb(182, 182, 182)"
},
tipBack: {
transform: "scaleX(0)",
transition: "all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms"
},
tipMove: {
borderBottom: "0.125rem solid " + (theme ? theme.default : defaultTheme.default),
transform: "scaleX(1)",
transition: "all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms"
}
};
};
var textareaStyle = function textareaStyle(theme) {
return {
tiptext: {
display: "flex",
justifyContent: "flex-end",
fontSize: "0.8rem",
position: "absolute",
zIndex: "1",
width: "100%"
},
textarea: {
width: "100%",
borderRadius: "0.3125rem",
outline: "none",
resize: "none",
overflow: "hidden",
fontSize: "1rem",
position: "relative",
background: "rgba(0, 0, 0, 0)",
padding: "0.2rem",
boxSizing: "border-box",
display: "block"
},
disabled: {
border: "0.08rem dashed rgb(182, 182, 182)"
},
defaultBorder: {
border: "0.08rem solid rgb(182, 182, 182)"
},
focusBorder: {
border: (theme ? theme.default : defaultTheme.default) + " solid 0.08rem"
}
};
};
var LenovoDownStyle = function LenovoDownStyle(theme) {
return {
pullDownDiv: {
boxShadow: "0",
position: "absolute",
width: "100%",
zIndex: "10",
marginTop: "0.1875rem",
transition: "all 300ms",
height: "0.08rem",
maxHeight: "14.375rem"
},
pullDownUl: {
display: "block",
background: "#fff",
padding: "0",
margin: "0"
},
pullDownLiDef: {
minHeight: "2.375rem",
display: "flex",
alignItems: "center",
paddingLeft: "0.625rem",
background: "#fff"
},
pullDownLiMove: {
minHeight: "2.375rem",
display: "flex",
alignItems: "center",
paddingLeft: "0.625rem",
background: "#eee"
},
dialogBackground: {
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0)",
position: "fixed",
top: "0",
left: "0",
zIndex: "1"
}
};
};
var dateStyles = function dateStyles(theme) {
return {
dateDialogBox: { //日期弹出框
position: "fixed",
left: "0",
top: "0",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 3
},
dateBack: { //日期黑色背景
position: "absolute",
left: "0",
top: "0",
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0.56)",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: "1"
},
dateBox: { //日期内容框框
width: "19.375rem",
height: "26.875rem",
background: "#fff",
borderRadius: "0.3125rem",
overflow: "hidden",
position: "absolute",
zIndex: "2",
left: "50%",
top: "50%",
margin: "-13.4375rem -9.6875rem"
},
dateHead: { //日期内容头部
background: theme ? theme.default : defaultTheme.default,
height: "4.375rem"
},
dateHeadNear: {
margin: "0",
color: "#fff",
paddingLeft: "1.25rem",
paddingTop: "0.3125rem"
},
dateHeadMonth: {
width: "100%",
color: "#fff",
fontSize: "1.75rem",
display: "flex",
justifyContent: "center"
},
yearListBox: { //选择年份样式
width: "19.375rem",
height: "19.375rem",
display: " flex",
flexWrap: "wrap",
alignItems: "center",
justifyContent: "center",
overflowY: "scroll"
},
yearListDefault: {
width: "100%",
height: "2.1875rem",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#6f6f6f",
transition: "all 500ms"
},
yearListSelected: {
width: "100%",
height: "2.1875rem",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "1.5rem",
color: "#00e676",
background: "#eee",
cursor: "pointer"
},
chooseMonthBox: { //选择月份标题样式
height: "2.5rem",
display: "flex",
alignItems: " center",
justifyContent: "space-between",
padding: "0 0.625rem"
},
chooseMonthBtn: {
cursor: "pointer"
},
monthListBox: { //月份选择样式
height: "14.0625rem",
display: "flex",
flexWrap: "wrap",
alignItems: "center",
justifyContent: "space-around",
padding: "0.3125rem"
},
monthList: {
width: "4.375rem",
height: "4.375rem",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#6f6f6f",
fontSize: "0.875rem",
cursor: "pointer"
},
calendarBox: { //首页日期内容
height: "16.25rem"
},
dateTitle: { //星期
display: "flex",
justifyContent: "space-around",
alignItems: "center",
height: "1.875rem",
color: "#a8a8a8",
fontSize: "0.75rem"
},
dateContBox: { //天
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between"
},
dateContDay: {
width: "2.5rem",
height: "2.375rem",
display: "flex",
justifyContent: "center",
alignItems: "center",
fontSize: "0.75rem",
cursor: "pointer"
},
dateContDayText: {
position: "absolute"
},
dateTextBox: {
position: "relative"
},
dateBtnBox: { //提交底部按钮
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "3.125rem",
position: "absolute",
bottom: "0",
width: "100%"
},
dateBtn: {
width: "5rem",
height: "1.875rem",
display: "flex",
justifyContent: "center",
alignItems: "enter",
boxShadow: "0.125rem 0.125rem 0.625rem -0.1875rem #c7c7c7",
marginRight: "1.25rem",
fontSize: "0.875rem",
lineHeight: "1.875rem"
}
};
};
var dateAmi = function dateAmi(theme) {
return {
disabled: {
position: "absolute",
color: "#ccc",
width: "1.25rem",
height: "1.25rem",
top: "50%",
left: "50%",
margin: "-0.625rem",
textAlign: "center"
},
dayTextOn: {
position: "absolute",
color: "#fff",
width: "1.25rem",
height: "1.25rem",
top: "50%",
left: "50%",
margin: "-0.625rem",
textAlign: "center"
},
dayTextUp: {
position: "absolute",
color: "#000",
width: "1.25rem",
height: "1.25rem",
top: "50%",
left: "50%",
margin: "-0.625rem",
textAlign: "center"
},
dayBackOn: {
display: "flex",
justifyContent: "center",
height: "2.1875rem",
width: "2.1875rem",
alignItems: "center",
background: theme ? theme.default : defaultTheme.default,
borderRadius: "50%"
},
dayBackMove: {
display: "flex",
justifyContent: "center",
height: "2.1875rem",
width: "2.1875rem",
alignItems: "center",
background: theme ? theme.first : defaultTheme.first,
borderRadius: "50%",
transition: "all 500ms"
},
dayBackDefault: {
display: "flex",
justifyContent: "center",
height: "0.3125rem",
width: "0.3125rem",
alignItems: "center",
background: "#fff",
borderRadius: "50%",
transition: "all 500ms"
}
};
};
var iconBtnStyles = function iconBtnStyles(size) {
return {
iconBox: {
display: "flex",
justifyContent: "center",
alignItems: "center",
position: "relative",
marginRight: "0.625rem",
height: size / 16 + "rem",
width: size / 16 + "rem"
},
svgBox: {
display: "block",
position: "absolute",
width: "100%",
height: "100%",
left: "0",
top: "0"
},
amibackDefault: {
borderRadius: "50%",
transition: "all 400ms",
background: "#fff",
transform: "scale(1,1)",
opacity: "1",
width: size / 2 / 16 + "rem",
height: size / 2 / 16 + "rem"
},
amibackMove: {
borderRadius: "50%",
transition: "all 400ms",
background: "#eeeeee",
transform: "scale(4,4)",
opacity: "0.5",
width: size / 2 / 16 + "rem",
height: size / 2 / 16 + "rem"
}
};
};
var dateRangeStyles = function dateRangeStyles(theme) {
return {
DateFieldBox: {
width: "100%",
display: "flex",
flexWrap: "wrap",
border: "0.08rem solid #eee",
padding: "0.625rem 0 0.3rem",
boxSizing: "border-box"
},
flexBoxpc: {
flex: 1,
margin: "0 0.625rem"
},
flexBoxapp: {
margin: "0 0.625rem",
width: "100%"
},
titleBox: {
display: 'flex',
height: "1.875rem",
justifyContent: "space-between",
alignItems: "center"
},
dateBox: {
width: "100%",
display: "flex",
flexDirection: "column"
},
dateWeek: {
display: "flex",
justifyContent: "space-around",
alignItems: "center",
width: "100%"
},
dateWeekDay: {
flex: "1",
height: "3rem",
display: "flex",
justifyContent: "center",
alignItems: "center"
},
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"
},
dateRow: {
width: "100%",
display: "flex",
height: platType ? "2.65rem" : "2.4rem",
justifyContent: "center",
alignItems: "center",
padding: 0,
margin: "0.125rem 0"
},
dayBox: {
flex: "1",
display: "flex",
height: "100%",
justifyContent: "center",
alignItems: "center",
position: "relative"
},
fixedBox: {
position: "absolute",
display: "flex",
width: "100%",
height: "100%",
top: 0,
right: 0,
zIndex: "-1"
},
fixedOn: {
flex: '1',
top: 0,
right: 0,
background: theme ? theme.first : defaultTheme.first
},
fixedOff: {
flex: '1',
top: 0,
right: 0,
background: "#fff"
},
dayDataOn: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: theme ? theme.default : defaultTheme.default,
color: "#fff",
borderRadius: "50%",
cursor: "pointer"
},
dayDataOn2: {
width: "100%",
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
background: theme ? theme.first : defaultTheme.first,
color: "#fff",
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"
},
textBox: {
width: "100%"
},
inputBox: {
width: "7.625rem",
height: "1.6rem",
margin: "0 0.625rem",
textAlign: "center",
border: "0.0625rem solid #808080",
fontSize: "100%"
},
btnBox: {
width: "100%",
textAlign: "right",
margin: platType ? "-0.625rem 0 0.625rem" : "1rem 0 0"
}
};
};
exports.publicStyles = publicStyles;
exports.textareaStyle = textareaStyle;
exports.inputStyle = inputStyle;
exports.LenovoDownStyle = LenovoDownStyle;
exports.center = center;
exports.dateStyles = dateStyles;
exports.dateAmi = dateAmi;
exports.iconBtnStyles = iconBtnStyles;
exports.dateRangeStyles = dateRangeStyles;
//# sourceMappingURL=publicStyle.js.map