antd
Version:
An enterprise-class UI design language and React components implementation
239 lines (232 loc) • 9.36 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { Keyframes } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style'; // ============================== Group ==============================
var floatButtonGroupStyle = function floatButtonGroupStyle(token) {
var _extends2, _$concat5, _ref;
var componentCls = token.componentCls,
floatButtonSize = token.floatButtonSize,
margin = token.margin,
radiusBase = token.radiusBase,
motionDurationSlow = token.motionDurationSlow;
var groupPrefixCls = "".concat(componentCls, "-group");
var moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
'0%': {
transform: "translate3d(0, ".concat(floatButtonSize, "px, 0)"),
transformOrigin: '0 0',
opacity: 0
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1
}
});
var moveDownOut = new Keyframes('antFloatButtonMoveDownOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1
},
'100%': {
transform: "translate3d(0, ".concat(floatButtonSize, "px, 0)"),
transformOrigin: '0 0',
opacity: 0
}
});
return _ref = {}, _defineProperty(_ref, groupPrefixCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
zIndex: 99,
display: 'block',
border: 'none',
position: 'fixed',
width: floatButtonSize,
height: 'auto',
boxShadow: 'none',
minHeight: floatButtonSize,
insetInlineEnd: token.floatButtonInsetInlineEnd,
insetBlockEnd: token.floatButtonInsetBlockEnd,
backgroundColor: token.colorBgContainer,
borderRadius: token.radiusBase
}, _defineProperty(_extends2, "".concat(groupPrefixCls, "-wrap"), {
zIndex: -1,
display: 'block',
position: 'relative',
marginBottom: margin
}), _defineProperty(_extends2, '&&-rtl', {
direction: 'rtl'
}), _defineProperty(_extends2, componentCls, {
position: 'static'
}), _extends2))), _defineProperty(_ref, "".concat(groupPrefixCls, "-circle"), _defineProperty({}, "".concat(componentCls, "-circle:not(:last-child)"), _defineProperty({
marginBottom: token.margin
}, "".concat(componentCls, "-body"), {
width: floatButtonSize,
height: floatButtonSize
}))), _defineProperty(_ref, "".concat(groupPrefixCls, "-square"), (_$concat5 = {}, _defineProperty(_$concat5, "".concat(componentCls, "-square"), {
borderRadius: 0,
padding: 0,
'&:first-child': {
borderStartStartRadius: radiusBase,
borderStartEndRadius: radiusBase
},
'&:last-child': {
borderEndStartRadius: radiusBase,
borderEndEndRadius: radiusBase
},
'&:not(:last-child)': {
borderBottom: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
}
}), _defineProperty(_$concat5, "".concat(groupPrefixCls, "-wrap"), _defineProperty({
display: 'block',
borderRadius: radiusBase,
boxShadow: token.boxShadowSecondary,
overflow: 'hidden'
}, "".concat(componentCls, "-square"), _defineProperty({
boxShadow: 'none',
marginTop: 0,
borderRadius: 0,
padding: token.paddingXXS,
'&:first-child': {
borderStartStartRadius: radiusBase,
borderStartEndRadius: radiusBase
},
'&:last-child': {
borderEndStartRadius: radiusBase,
borderEndEndRadius: radiusBase
},
'&:not(:last-child)': {
borderBottom: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
}
}, "".concat(componentCls, "-body"), {
width: floatButtonSize - token.paddingXXS * 2,
height: floatButtonSize - token.paddingXXS * 2
}))), _$concat5)), _defineProperty(_ref, "".concat(groupPrefixCls, "-wrap-enter,").concat(groupPrefixCls, "-wrap-enter-active"), {
animationName: moveDownIn,
animationDuration: motionDurationSlow
}), _defineProperty(_ref, "".concat(groupPrefixCls, "-wrap-leave"), {
animationName: moveDownOut,
animationDuration: motionDurationSlow
}), _defineProperty(_ref, "".concat(groupPrefixCls, "-circle-shadow"), {
boxShadow: 'none'
}), _defineProperty(_ref, "".concat(groupPrefixCls, "-square-shadow"), _defineProperty({
boxShadow: token.boxShadowSecondary
}, "".concat(componentCls, "-square"), _defineProperty({
boxShadow: 'none',
padding: token.paddingXXS
}, "".concat(componentCls, "-body"), {
width: floatButtonSize - token.paddingXXS * 2,
height: floatButtonSize - token.paddingXXS * 2
}))), _ref;
}; // ============================== Shared ==============================
var sharedFloatButtonStyle = function sharedFloatButtonStyle(token) {
var _$concat12, _$concat15, _ref2;
var componentCls = token.componentCls,
floatButtonIconSize = token.floatButtonIconSize,
floatButtonSize = token.floatButtonSize;
return _ref2 = {}, _defineProperty(_ref2, componentCls, _extends(_extends({}, resetComponent(token)), _defineProperty({
border: 'none',
position: 'fixed',
cursor: 'pointer',
overflow: 'hidden',
zIndex: 99,
display: 'block',
justifyContent: 'center',
alignItems: 'center',
width: floatButtonSize,
height: floatButtonSize,
insetInlineEnd: token.floatButtonInsetInlineEnd,
insetBlockEnd: token.floatButtonInsetBlockEnd,
boxShadow: token.boxShadowSecondary,
'&:empty': {
display: 'none'
}
}, "".concat(componentCls, "-body"), _defineProperty({
width: floatButtonSize,
height: floatButtonSize,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
transition: "all ".concat(token.motionDurationFast)
}, "".concat(componentCls, "-content"), _defineProperty({
overflow: 'hidden',
textAlign: 'center',
minHeight: floatButtonSize,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
padding: "2px 4px"
}, "".concat(componentCls, "-icon"), {
textAlign: 'center',
margin: 'auto',
width: floatButtonIconSize,
fontSize: floatButtonIconSize,
lineHeight: 1
}))))), _defineProperty(_ref2, "".concat(componentCls, "-circle"), _defineProperty({
height: floatButtonSize,
borderRadius: '50%'
}, "".concat(componentCls, "-body"), {
borderRadius: '50%'
})), _defineProperty(_ref2, "".concat(componentCls, "-square"), _defineProperty({
height: 'auto',
minHeight: floatButtonSize,
borderRadius: token.radiusBase
}, "".concat(componentCls, "-body"), {
height: 'auto',
borderRadius: token.radiusSM
})), _defineProperty(_ref2, "".concat(componentCls, "-default"), _defineProperty({
backgroundColor: token.colorBgContainer,
transition: "background-color ".concat(token.motionDurationFast)
}, "".concat(componentCls, "-body"), _defineProperty({
backgroundColor: token.colorBgContainer,
transition: "background-color ".concat(token.motionDurationFast),
'&:hover': {
backgroundColor: token.colorFillContent
}
}, "".concat(componentCls, "-content"), (_$concat12 = {}, _defineProperty(_$concat12, "".concat(componentCls, "-icon"), {
color: token.colorText
}), _defineProperty(_$concat12, "".concat(componentCls, "-description"), {
display: 'flex',
alignItems: 'center',
lineHeight: "".concat(token.fontSizeLG, "px"),
color: token.colorText,
fontSize: token.fontSizeSM
}), _$concat12)))), _defineProperty(_ref2, "".concat(componentCls, "-primary"), _defineProperty({
backgroundColor: token.colorPrimary
}, "".concat(componentCls, "-body"), _defineProperty({
backgroundColor: token.colorPrimary,
transition: "background-color ".concat(token.motionDurationFast),
'&:hover': {
backgroundColor: token.colorPrimaryHover
}
}, "".concat(componentCls, "-content"), (_$concat15 = {}, _defineProperty(_$concat15, "".concat(componentCls, "-icon"), {
color: token.colorTextLightSolid
}), _defineProperty(_$concat15, "".concat(componentCls, "-description"), {
display: 'flex',
alignItems: 'center',
lineHeight: "".concat(token.fontSizeLG, "px"),
color: token.colorTextLightSolid,
fontSize: token.fontSizeSM
}), _$concat15)))), _ref2;
}; // ============================== Export ==============================
export default genComponentStyleHook('FloatButton', function (token) {
var colorTextLightSolid = token.colorTextLightSolid,
colorBgContainer = token.colorBgContainer,
controlHeightLG = token.controlHeightLG,
marginXXL = token.marginXXL,
marginLG = token.marginLG,
fontSize = token.fontSize,
fontSizeIcon = token.fontSizeIcon,
controlItemBgHover = token.controlItemBgHover;
var floatButtonToken = mergeToken(token, {
floatButtonBackgroundColor: colorBgContainer,
floatButtonColor: colorTextLightSolid,
floatButtonHoverBackgroundColor: controlItemBgHover,
floatButtonFontSize: fontSize,
floatButtonIconSize: fontSizeIcon * 1.5,
floatButtonSize: controlHeightLG,
floatButtonInsetBlockEnd: marginXXL,
floatButtonInsetInlineEnd: marginLG
});
return [floatButtonGroupStyle(floatButtonToken), sharedFloatButtonStyle(floatButtonToken)];
});