@ant-design/x
Version:
Craft AI-driven interfaces effortlessly
173 lines (172 loc) • 6.6 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = exports.default = void 0;
var _util = require("@ant-design/cssinjs/lib/util");
var _cssinjsUtils = require("@ant-design/cssinjs-utils");
var _fastColor = require("@ant-design/fast-color");
var _style = require("../../style");
var _genStyleUtils = require("../../theme/genStyleUtils");
var _item = _interopRequireDefault(require("./item"));
const genThoughtChainStyle = token => {
const {
componentCls,
calc
} = token;
return {
[componentCls]: {
[`&${componentCls}-box`]: {
display: 'flex',
flexDirection: 'column',
[`& ${componentCls}-node:last-of-type`]: {
[`> ${componentCls}-node-icon`]: {
'&:after': {
display: 'none'
}
}
}
},
[`${componentCls}-node`]: {
position: 'relative',
display: 'flex',
alignItems: 'baseline',
gap: token.marginSM,
[`${componentCls}-status-error`]: {
color: token.colorError
},
[`${componentCls}-status-success`]: {
color: token.colorSuccess
},
[`${componentCls}-status-loading`]: {
color: token.colorPrimary
}
},
[`${componentCls}-node-header`]: {
display: 'flex',
flexDirection: 'column'
},
[`${componentCls}-node-title`]: {
fontWeight: 500,
display: 'flex',
gap: token.marginXS
},
[`${componentCls}-node-collapsible`]: {
paddingInlineEnd: token.padding,
cursor: 'pointer'
},
[`${componentCls}-node-footer`]: {
marginBottom: token.margin
},
[`${componentCls}-node-content-box`]: {
marginBottom: token.margin
},
[`${componentCls}-node-collapse-icon`]: {
'& svg': {
transition: `transform ${token.motionDurationMid} ${token.motionEaseInOut}`
}
},
[`${componentCls}-node-description`]: {
color: token.colorTextDescription,
fontSize: token.fontSize,
lineHeight: token.lineHeight,
marginBlockEnd: token.margin
},
[`${componentCls}-node-icon`]: {
lineHeight: 1,
fontSize: token.iconSize,
'&:after': {
content: '""',
position: 'absolute',
height: (0, _util.unit)(calc('100%').sub(calc(token.iconSize).mul(token.lineHeight)).equal()),
borderInlineStart: `${(0, _util.unit)(token.lineWidth)} solid ${token.colorFillContent}`,
insetInlineStart: (0, _util.unit)(calc(token.iconSize).sub(1).div(2).equal()),
top: (0, _util.unit)(calc(token.iconSize).mul(token.lineHeight).equal())
}
},
[`${componentCls}-node-icon-dashed`]: {
'&:after': {
borderInlineStart: `${(0, _util.unit)(token.lineWidth)} dashed ${token.colorFillContent}`
}
},
[`${componentCls}-node-icon-dotted`]: {
'&:after': {
borderInlineStart: `${(0, _util.unit)(token.lineWidth)} dotted ${token.colorFillContent}`
}
},
[`${componentCls}-node-index-icon`]: {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
lineHeight: 1,
color: token.colorTextSecondary,
fontSize: token.fontSizeSM,
width: token.iconSize,
height: token.iconSize,
backgroundColor: token.colorFillContent,
borderRadius: (0, _util.unit)(calc(token.iconSize).div(2).equal())
},
[`&${componentCls}-rtl`]: {
direction: 'rtl',
[`${componentCls}-node-icon`]: {
'&:after': {
insetInlineStart: 'unset',
insetInlineEnd: (0, _util.unit)(calc(token.iconSize).sub(1).div(2).equal())
}
}
}
}
};
};
const prepareComponentToken = token => {
const itemMotionDescription = new _fastColor.FastColor(token.colorTextDescription).setA(0.25).toRgbString();
const colorTextBlinkDefault = token.colorTextDescription;
const colorTextBlink = token.colorTextBase;
const colorErrorTextDescription = new _fastColor.FastColor(token.colorErrorText).setA(0.45).toRgbString();
const colorErrorTextDisabled = new _fastColor.FastColor(token.colorErrorText).setA(0.45).toRgbString();
const itemSolidHoverBg = new _fastColor.FastColor(token.colorFillTertiary).setA(0.06).toRgbString();
const colorErrorTextDescriptionDisabled = new _fastColor.FastColor(token.colorErrorText).setA(0.25).toRgbString();
const colorDescriptionDisabled = new _fastColor.FastColor(token.colorTextDescription).setA(0.25).toRgbString();
const colorTitleDisabled = new _fastColor.FastColor(token.colorText).setA(0.45).toRgbString();
const colorErrorBgDisabled = new _fastColor.FastColor(token.colorErrorBg).setA(0.25).toRgbString();
const itemOutlinedHoverBg = itemSolidHoverBg;
const colorSuccessDisabled = new _fastColor.FastColor(token.colorSuccess).setA(0.45).toRgbString();
const colorPrimaryDisabled = new _fastColor.FastColor(token.colorPrimary).setA(0.45).toRgbString();
return {
colorDescriptionDisabled,
colorPrimaryDisabled,
colorSuccessDisabled,
colorTitleDisabled,
colorErrorTextDisabled,
colorErrorBgDisabled,
colorErrorTextDescriptionDisabled,
itemMotionDescription,
colorTextBlinkDefault,
colorTextBlink,
itemSolidBg: token.colorFillTertiary,
itemSolidHoverBg,
itemOutlinedBg: token.colorBgContainer,
itemOutlinedHoverBg,
itemBorderRadius: token.borderRadius,
iconSize: token.fontSize,
titleFontSize: token.fontSize,
descriptionFontSize: token.fontSize,
nodePadding: token.paddingSM,
titleFontWeight: 500,
borderColor: token.colorBorder,
borderWidth: token.lineWidth,
connectorColor: token.colorFillContent,
connectorWidth: token.lineWidth,
colorErrorTextDescription,
hoverTransitionDuration: `${token.motionDurationMid} ${token.motionEaseInOut}`
};
};
exports.prepareComponentToken = prepareComponentToken;
var _default = exports.default = (0, _genStyleUtils.genStyleHooks)('ThoughtChain', token => {
const compToken = (0, _cssinjsUtils.mergeToken)(token, {});
const {
componentCls
} = token;
return [genThoughtChainStyle(compToken), (0, _item.default)(compToken), (0, _style.genCollapseMotion)(compToken), (0, _style.blinkMotion)(compToken, `${componentCls}-motion-blink`)];
}, prepareComponentToken);