@antdv/pro-utils
Version:
@antdv/pro-utils
134 lines (133 loc) • 3.94 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { useStyle as useAntdStyle } from "@antdv/pro-provider";
const genProStyle = (token) => {
return {
[token.componentCls]: {
"display": "inline-flex",
"gap": token.marginXXS,
"alignItems": "center",
"height": "30px",
"paddingBlock": 0,
"paddingInline": 8,
"fontSize": token.fontSize,
"lineHeight": "30px",
"borderRadius": "2px",
"cursor": "pointer",
"&:hover": {
backgroundColor: token.colorBgTextHover
},
"&-active": {
paddingBlock: 0,
paddingInline: 8,
backgroundColor: token.colorBgTextHover,
[`&${token.componentCls}-allow-clear:hover:not(${token.componentCls}-disabled)`]: {
[`${token.componentCls}-arrow`]: {
display: "none"
},
[`${token.componentCls}-close`]: {
display: "inline-flex"
}
}
},
[`${token.antCls}-select`]: {
[`${token.antCls}-select-clear`]: {
borderRadius: "50%"
}
},
[`${token.antCls}-picker`]: {
[`${token.antCls}-picker-clear`]: {
borderRadius: "50%"
}
},
"&-icon": {
"color": token.colorIcon,
"transition": "color 0.3s",
"fontSize": 12,
"verticalAlign": "middle",
[`&${token.componentCls}-close`]: {
display: "none",
fontSize: 12,
alignItems: "center",
justifyContent: "center",
color: token.colorTextPlaceholder,
borderRadius: "50%"
},
"&:hover": {
color: token.colorIconHover
}
},
"&-disabled": {
color: token.colorTextPlaceholder,
cursor: "not-allowed",
[`${token.componentCls}-icon`]: {
color: token.colorTextPlaceholder
}
},
"&-small": {
height: "24px",
paddingBlock: 0,
paddingInline: 4,
fontSize: token.fontSizeSM,
lineHeight: "24px",
[`&${token.componentCls}-active`]: {
paddingBlock: 0,
paddingInline: 8
},
[`${token.componentCls}-icon`]: {
paddingBlock: 0,
paddingInline: 0
},
[`${token.componentCls}-close`]: {
marginBlockStart: "-2px",
paddingBlock: 4,
paddingInline: 4,
fontSize: "6px"
}
},
"&-bordered": {
height: "32px",
paddingBlock: 0,
paddingInline: 8,
border: `${token.lineWidth}px solid ${token.colorBorder}`,
borderRadius: "@border-radius-base"
},
"&-bordered&-small": {
height: "24px",
paddingBlock: 0,
paddingInline: 8
},
"&-bordered&-active": {
backgroundColor: token.colorBgContainer
}
}
};
};
function useStyle(prefixCls) {
return useAntdStyle("FieldLabel", (token) => {
const proToken = __spreadProps(__spreadValues({}, token), {
componentCls: `.${prefixCls.value}`
});
return [genProStyle(proToken)];
});
}
export {
useStyle
};