antd-v5
Version:
An enterprise-class UI design language and React components implementation
83 lines (82 loc) • 2.68 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _multiple = require("../../select/style/multiple");
var _internal = require("../../theme/internal");
const genSize = (token, suffix) => {
const {
componentCls,
selectHeight,
fontHeight,
lineWidth,
calc
} = token;
const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
const height = token.calc(fontHeight).add(2).equal();
const restHeight = () => calc(selectHeight).sub(height).sub(calc(lineWidth).mul(2));
const paddingTop = token.max(restHeight().div(2).equal(), 0);
const paddingBottom = token.max(restHeight().sub(paddingTop).equal(), 0);
return [(0, _multiple.genSelectionStyle)(token, suffix), {
[`${componentCls}-multiple${suffixCls}`]: {
paddingTop,
paddingBottom,
paddingInlineStart: paddingTop
}
}];
};
const genPickerMultipleStyle = token => {
const {
componentCls,
calc,
lineWidth
} = token;
const smallToken = (0, _internal.mergeToken)(token, {
fontHeight: token.fontSize,
selectHeight: token.controlHeightSM,
multipleSelectItemHeight: token.controlHeightXS,
borderRadius: token.borderRadiusSM,
borderRadiusSM: token.borderRadiusXS
});
const largeToken = (0, _internal.mergeToken)(token, {
fontHeight: calc(token.multipleItemHeightLG).sub(calc(lineWidth).mul(2).equal()).equal(),
fontSize: token.fontSizeLG,
selectHeight: token.controlHeightLG,
multipleSelectItemHeight: token.multipleItemHeightLG,
borderRadius: token.borderRadiusLG,
borderRadiusSM: token.borderRadius
});
return [
// ======================== Size ========================
genSize(smallToken, 'small'), genSize(token), genSize(largeToken, 'large'),
// ====================== Selection ======================
(0, _multiple.genSelectionStyle)(token), {
[`${componentCls}${componentCls}-multiple`]: {
width: '100%',
// ==================== Selector =====================
[`${componentCls}-selector`]: {
flex: 'auto',
padding: 0,
'&:after': {
margin: 0
}
},
// ==================== Selection ====================
[`${componentCls}-selection-item`]: {
marginBlock: 0
},
// ====================== Input ======================
// Input is `readonly`, which is used for a11y only
[`${componentCls}-multiple-input`]: {
width: 0,
height: 0,
border: 0,
visibility: 'hidden',
position: 'absolute',
zIndex: -1
}
}
}];
};
var _default = exports.default = genPickerMultipleStyle;
;