@plaso-design/pro-card
Version:
@plaso-design/pro-card
187 lines (186 loc) • 6.38 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.cardLoading = void 0;
exports.useStyle = useStyle;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _cssinjs = require("@ant-design/cssinjs");
var _proProvider = require("@plaso-design/pro-provider");
var proCheckCardActive = function proCheckCardActive(token) {
return {
backgroundColor: token.colorPrimaryBg,
borderColor: token.colorPrimary
};
};
var proCheckCardDisabled = function proCheckCardDisabled(token) {
return (0, _defineProperty2.default)({
backgroundColor: token.colorBgContainerDisabled,
borderColor: token.colorBorder,
cursor: 'not-allowed'
}, token.componentCls, {
'&-description': {
color: token.colorTextDisabled
},
'&-title': {
color: token.colorTextDisabled
},
'&-avatar': {
opacity: '0.25'
}
});
};
var cardLoading = exports.cardLoading = new _cssinjs.Keyframes('card-loading', {
'0%': {
backgroundPosition: '0 50%'
},
'50%': {
backgroundPosition: '100% 50%'
},
'100%': {
backgroundPosition: '0 50%'
}
});
var genProStyle = function genProStyle(token) {
var _token$componentCls;
return (0, _defineProperty2.default)({}, token.componentCls, (_token$componentCls = {
position: 'relative',
display: 'inline-block',
width: '320px',
marginInlineEnd: '16px',
marginBlockEnd: '16px',
color: token.colorText,
fontSize: token.fontSize,
lineHeight: token.lineHeight,
verticalAlign: 'top',
backgroundColor: token.colorBgContainer,
borderRadius: token.borderRadius,
overflow: 'auto',
cursor: 'pointer',
transition: "all 0.3s",
'&:last-child': {
marginInlineEnd: 0
},
'& + &': {
marginInlineStart: '0 !important'
},
'&-bordered': {
border: "".concat(token.lineWidth, "px solid ").concat(token.colorBorder)
},
'&-group': {
display: 'inline-block'
}
}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_token$componentCls, "".concat(token.componentCls, "-loading"), {
overflow: 'hidden',
userSelect: 'none',
'&-content': (0, _defineProperty2.default)({
paddingInline: token.padding,
paddingBlock: token.paddingSM,
p: {
marginBlock: 0,
marginInline: 0
}
}, "".concat(token.componentCls, "-loading-block"), {
height: '14px',
marginBlock: '4px',
background: "linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))",
animationName: cardLoading,
animationDuration: '1.4s',
animationTimingFunction: 'ease',
animationIterationCount: 'infinite'
})
}), '&:focus', proCheckCardActive(token)), '&-checked', (0, _objectSpread2.default)((0, _objectSpread2.default)({}, proCheckCardActive(token)), {}, {
'&:after': {
position: 'absolute',
insetBlockStart: 2,
insetInlineEnd: 2,
width: 0,
height: 0,
border: "".concat(token.borderRadius + 4, "px solid ").concat(token.colorPrimary),
borderBlockEnd: "".concat(token.borderRadius + 4, "px solid transparent"),
borderInlineStart: "".concat(token.borderRadius + 4, "px solid transparent"),
borderStartEndRadius: "".concat(token.borderRadius, "px"),
content: "''"
}
})), '&-disabled', proCheckCardDisabled(token)), '&[disabled]', proCheckCardDisabled(token)), '&-checked&-disabled', {
'&:after': {
position: 'absolute',
insetBlockStart: 2,
insetInlineEnd: 2,
width: 0,
height: 0,
border: "".concat(token.borderRadius + 4, "px solid ").concat(token.colorTextDisabled),
borderBlockEnd: "".concat(token.borderRadius + 4, "px solid transparent"),
borderInlineStart: "".concat(token.borderRadius + 4, "px solid transparent"),
borderStartEndRadius: "".concat(token.borderRadius, "px"),
content: "''"
}
}), '&-lg', {
width: 440
}), '&-sm', {
width: 212
}), '&-cover', {
paddingInline: token.paddingXXS,
paddingBlock: token.paddingXXS,
img: {
width: '100%',
height: '100%',
overflow: 'hidden',
borderRadius: token.borderRadius
}
}), '&-content', {
display: 'flex',
paddingInline: token.paddingSM,
paddingBlock: token.padding
}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_token$componentCls, '&-body', {
paddingInline: token.paddingSM,
paddingBlock: token.padding
}), '&-avatar-header', {
display: 'flex',
alignItems: 'center'
}), '&-avatar', {
paddingInlineEnd: 8
}), '&-detail', {
overflow: 'hidden',
width: '100%',
'> div:not(:last-child)': {
marginBlockEnd: 4
}
}), '&-header', {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
lineHeight: token.lineHeight,
'&-left': {
display: 'flex',
alignItems: 'center',
gap: token.sizeSM
}
}), '&-title', {
overflow: 'hidden',
color: token.colorTextHeading,
fontWeight: '500',
fontSize: token.fontSize,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}), '&-description', {
color: token.colorTextSecondary
}), "&:not(".concat(token.componentCls, "-disabled)"), {
'&:hover': {
borderColor: token.colorPrimary
}
})));
};
function useStyle(prefixCls) {
return (0, _proProvider.useStyle)('CheckCard', function (token) {
var proListToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
componentCls: ".".concat(prefixCls)
});
return [genProStyle(proListToken)];
});
}