antd
Version:
An enterprise-class UI design language and React components implementation
258 lines (245 loc) • 12.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { genComponentStyleHook, mergeToken } from '../../theme';
import genStepsCustomIconStyle from './custom-icon';
import genStepsLabelPlacementStyle from './label-placement';
import genStepsNavStyle from './nav';
import genStepsProgressStyle from './progress';
import genStepsProgressDotStyle from './progress-dot';
import genStepsRTLStyle from './rtl';
import genStepsSmallStyle from './small';
import genStepsVerticalStyle from './vertical';
import { resetComponent } from '../../style';
var StepItemStatusEnum;
(function (StepItemStatusEnum) {
StepItemStatusEnum["wait"] = "wait";
StepItemStatusEnum["process"] = "process";
StepItemStatusEnum["finish"] = "finish";
StepItemStatusEnum["error"] = "error";
})(StepItemStatusEnum || (StepItemStatusEnum = {}));
var genStepsItemStatusStyle = function genStepsItemStatusStyle(status, token) {
var _ref;
var prefix = "".concat(token.componentCls, "-item");
var iconColorKey = "".concat(status, "IconColor");
var titleColorKey = "".concat(status, "TitleColor");
var descriptionColorKey = "".concat(status, "DescriptionColor");
var tailColorKey = "".concat(status, "TailColor");
var iconBgColorKey = "".concat(status, "IconBgColor");
var iconBorderColorKey = "".concat(status, "IconBorderColor");
var dotColorKey = "".concat(status, "DotColor");
return _ref = {}, _defineProperty(_ref, "".concat(prefix, "-").concat(status, " ").concat(prefix, "-icon"), _defineProperty({
backgroundColor: token[iconBgColorKey],
borderColor: token[iconBorderColorKey]
}, "> ".concat(token.componentCls, "-icon"), _defineProperty({
color: token[iconColorKey]
}, "".concat(token.componentCls, "-icon-dot"), {
background: token[dotColorKey]
}))), _defineProperty(_ref, "".concat(prefix, "-").concat(status).concat(prefix, "-custom ").concat(prefix, "-icon"), _defineProperty({}, "> ".concat(token.componentCls, "-icon"), {
color: token[dotColorKey]
})), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-content > ").concat(prefix, "-title"), {
color: token[titleColorKey],
'&::after': {
backgroundColor: token[tailColorKey]
}
}), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-content > ").concat(prefix, "-description"), {
color: token[descriptionColorKey]
}), _defineProperty(_ref, "".concat(prefix, "-").concat(status, " > ").concat(prefix, "-container > ").concat(prefix, "-tail::after"), {
backgroundColor: token[tailColorKey]
}), _ref;
};
var genStepsItemStyle = function genStepsItemStyle(token) {
var _extends2, _extends4;
var componentCls = token.componentCls,
motionDurationSlow = token.motionDurationSlow;
var stepsItemCls = "".concat(componentCls, "-item"); // .ant-steps-item
return _extends(_extends(_extends(_extends(_extends(_extends((_extends2 = {}, _defineProperty(_extends2, stepsItemCls, {
position: 'relative',
display: 'inline-block',
flex: 1,
overflow: 'hidden',
verticalAlign: 'top',
'&:last-child': _defineProperty({
flex: 'none'
}, "> ".concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-tail, > ").concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-content > ").concat(stepsItemCls, "-title::after"), {
display: 'none'
})
}), _defineProperty(_extends2, "".concat(stepsItemCls, "-container"), {
outline: 'none'
}), _defineProperty(_extends2, "".concat(stepsItemCls, "-icon, ").concat(stepsItemCls, "-content"), {
display: 'inline-block',
verticalAlign: 'top'
}), _defineProperty(_extends2, "".concat(stepsItemCls, "-icon"), _defineProperty({
width: token.stepsIconSize,
height: token.stepsIconSize,
marginTop: 0,
marginBottom: 0,
marginInlineStart: 0,
marginInlineEnd: token.marginXS,
fontSize: token.stepsIconFontSize,
fontFamily: token.fontFamily,
lineHeight: "".concat(token.stepsIconSize, "px"),
textAlign: 'center',
borderRadius: token.stepsIconSize,
border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " transparent"),
transition: "background-color ".concat(motionDurationSlow, ", border-color ").concat(motionDurationSlow)
}, "".concat(componentCls, "-icon"), {
position: 'relative',
top: token.stepsIconTop,
color: token.colorPrimary,
lineHeight: 1
})), _defineProperty(_extends2, "".concat(stepsItemCls, "-tail"), {
position: 'absolute',
top: token.marginSM,
insetInlineStart: 0,
width: '100%',
'&::after': {
display: 'inline-block',
width: '100%',
height: token.lineWidth,
background: token.colorSplit,
borderRadius: token.lineWidth,
transition: "background ".concat(motionDurationSlow),
content: '""'
}
}), _defineProperty(_extends2, "".concat(stepsItemCls, "-title"), {
position: 'relative',
display: 'inline-block',
paddingInlineEnd: token.padding,
color: token.colorText,
fontSize: token.fontSizeLG,
lineHeight: "".concat(token.stepsTitleLineHeight, "px"),
'&::after': {
position: 'absolute',
top: token.stepsTitleLineHeight / 2,
insetInlineStart: '100%',
display: 'block',
width: 9999,
height: token.lineWidth,
background: token.processTailColor,
content: '""'
}
}), _defineProperty(_extends2, "".concat(stepsItemCls, "-subtitle"), {
display: 'inline',
marginInlineStart: token.marginXS,
color: token.colorTextDescription,
fontWeight: 'normal',
fontSize: token.fontSizeBase
}), _defineProperty(_extends2, "".concat(stepsItemCls, "-description"), {
color: token.colorTextDescription,
fontSize: token.fontSizeBase
}), _extends2), genStepsItemStatusStyle(StepItemStatusEnum.wait, token)), genStepsItemStatusStyle(StepItemStatusEnum.process, token)), _defineProperty({}, "".concat(stepsItemCls, "-process > ").concat(stepsItemCls, "-container > ").concat(stepsItemCls, "-title"), {
fontWeight: token.fontWeightStrong
})), genStepsItemStatusStyle(StepItemStatusEnum.finish, token)), genStepsItemStatusStyle(StepItemStatusEnum.error, token)), (_extends4 = {}, _defineProperty(_extends4, "".concat(stepsItemCls).concat(componentCls, "-next-error > ").concat(componentCls, "-item-title::after"), {
background: token.colorError
}), _defineProperty(_extends4, "".concat(stepsItemCls, "-disabled"), {
cursor: 'not-allowed'
}), _extends4));
}; // ============================= Clickable ===========================
var genStepsClickableStyle = function genStepsClickableStyle(token) {
var _$concat5, _not$concat2, _$concat8, _ref2;
var componentCls = token.componentCls,
motionDurationSlow = token.motionDurationSlow;
return _ref2 = {}, _defineProperty(_ref2, "& ".concat(componentCls, "-item"), _defineProperty({}, "&:not(".concat(componentCls, "-item-active)"), (_not$concat2 = {}, _defineProperty(_not$concat2, "& > ".concat(componentCls, "-item-container[role='button']"), (_$concat5 = {
cursor: 'pointer'
}, _defineProperty(_$concat5, "".concat(componentCls, "-item"), _defineProperty({}, "&-title, &-subtitle, &-description, &-icon ".concat(componentCls, "-icon"), {
transition: "color ".concat(motionDurationSlow)
})), _defineProperty(_$concat5, '&:hover', _defineProperty({}, "".concat(componentCls, "-item"), _defineProperty({}, "&-title, &-subtitle, &-description", {
color: token.colorPrimary
}))), _$concat5)), _defineProperty(_not$concat2, "&:not(".concat(componentCls, "-item-process)"), _defineProperty({}, "& > ".concat(componentCls, "-item-container[role='button']:hover"), _defineProperty({}, "".concat(componentCls, "-item"), {
'&-icon': _defineProperty({
borderColor: token.colorPrimary
}, "".concat(componentCls, "-icon"), {
color: token.colorPrimary
})
}))), _not$concat2))), _defineProperty(_ref2, "&".concat(componentCls, "-horizontal:not(").concat(componentCls, "-label-vertical)"), _defineProperty({}, "".concat(componentCls, "-item"), (_$concat8 = {
paddingInlineStart: token.padding,
whiteSpace: 'nowrap',
'&:first-child': {
paddingInlineStart: 0
}
}, _defineProperty(_$concat8, "&:last-child ".concat(componentCls, "-item-title"), {
paddingInlineEnd: 0
}), _defineProperty(_$concat8, '&-tail', {
display: 'none'
}), _defineProperty(_$concat8, '&-description', {
maxWidth: token.descriptionWidth,
whiteSpace: 'normal'
}), _$concat8))), _ref2;
};
var genStepsStyle = function genStepsStyle(token) {
var componentCls = token.componentCls; // .ant-steps
return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), {
display: 'flex',
width: '100%',
fontSize: 0,
textAlign: 'initial'
}), genStepsItemStyle(token)), genStepsClickableStyle(token)), genStepsCustomIconStyle(token)), genStepsSmallStyle(token)), genStepsVerticalStyle(token)), genStepsLabelPlacementStyle(token)), genStepsProgressDotStyle(token)), genStepsNavStyle(token)), genStepsRTLStyle(token)), genStepsProgressStyle(token)));
}; // ============================== Export ==============================
export default genComponentStyleHook('Steps', function (token) {
var wireframe = token.wireframe,
colorTextDisabled = token.colorTextDisabled,
fontSizeHeading3 = token.fontSizeHeading3,
fontSize = token.fontSize,
controlHeight = token.controlHeight,
controlHeightLG = token.controlHeightLG,
colorTextLightSolid = token.colorTextLightSolid,
colorText = token.colorText,
colorPrimary = token.colorPrimary,
colorTextLabel = token.colorTextLabel,
colorTextDescription = token.colorTextDescription,
colorFillContent = token.colorFillContent,
controlItemBgActive = token.controlItemBgActive,
colorError = token.colorError,
colorBgContainer = token.colorBgContainer;
var stepsIconSize = token.controlHeight;
var processTailColor = token.colorSplit;
var stepsToken = mergeToken(token, {
// Steps variable default.less
processTailColor: processTailColor,
stepsNavArrowColor: colorTextDisabled,
stepsIconSize: stepsIconSize,
stepsIconCustomSize: stepsIconSize,
stepsIconCustomTop: 0,
stepsIconCustomFontSize: fontSizeHeading3,
stepsIconTop: -0.5,
stepsIconFontSize: fontSize,
stepsTitleLineHeight: controlHeight,
stepsSmallIconSize: fontSizeHeading3,
stepsDotSize: controlHeight / 4,
stepsCurrentDotSize: controlHeightLG / 4,
stepsNavContentMaxWidth: 'auto',
// Steps component less variable
processIconColor: colorTextLightSolid,
processTitleColor: colorText,
processDescriptionColor: colorText,
processIconBgColor: colorPrimary,
processIconBorderColor: colorPrimary,
processDotColor: colorPrimary,
waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
waitTitleColor: colorTextDescription,
waitDescriptionColor: colorTextDescription,
waitTailColor: processTailColor,
waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
waitDotColor: colorTextDisabled,
finishIconColor: colorPrimary,
finishTitleColor: colorText,
finishDescriptionColor: colorTextDescription,
finishTailColor: colorPrimary,
finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive,
finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive,
finishDotColor: colorPrimary,
errorIconColor: colorTextLightSolid,
errorTitleColor: colorError,
errorDescriptionColor: colorError,
errorTailColor: processTailColor,
errorIconBgColor: colorError,
errorIconBorderColor: colorError,
errorDotColor: colorError,
stepsNavActiveColor: colorPrimary,
stepsProgressSize: controlHeightLG
});
return [genStepsStyle(stepsToken)];
}, {
descriptionWidth: 140
});