1
This commit is contained in:
+15
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import type { FloatButtonElement, FloatButtonProps, FloatButtonRef } from './FloatButton';
|
||||
export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
|
||||
visibilityHeight?: number;
|
||||
onClick?: React.MouseEventHandler<FloatButtonElement>;
|
||||
target?: () => HTMLElement | Window | Document;
|
||||
prefixCls?: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
style?: React.CSSProperties;
|
||||
duration?: number;
|
||||
}
|
||||
declare const BackTop: React.ForwardRefExoticComponent<BackTopProps & React.RefAttributes<FloatButtonRef>>;
|
||||
export default BackTop;
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _react = _interopRequireWildcard(require("react"));
|
||||
var _VerticalAlignTopOutlined = _interopRequireDefault(require("@ant-design/icons/VerticalAlignTopOutlined"));
|
||||
var _motion = _interopRequireDefault(require("@rc-component/motion"));
|
||||
var _ref = require("@rc-component/util/lib/ref");
|
||||
var _clsx = require("clsx");
|
||||
var _getScroll = _interopRequireDefault(require("../_util/getScroll"));
|
||||
var _scrollTo = _interopRequireDefault(require("../_util/scrollTo"));
|
||||
var _throttleByAnimationFrame = _interopRequireDefault(require("../_util/throttleByAnimationFrame"));
|
||||
var _configProvider = require("../config-provider");
|
||||
var _context = require("../config-provider/context");
|
||||
var _context2 = require("./context");
|
||||
var _FloatButton = _interopRequireWildcard(require("./FloatButton"));
|
||||
const defaultIcon = /*#__PURE__*/_react.default.createElement(_VerticalAlignTopOutlined.default, null);
|
||||
const BackTop = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
||||
const {
|
||||
backTopIcon: contextIcon
|
||||
} = (0, _context.useComponentConfig)('floatButton');
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
type = 'default',
|
||||
shape = 'circle',
|
||||
visibilityHeight = 400,
|
||||
icon,
|
||||
target,
|
||||
onClick,
|
||||
duration = 450,
|
||||
...restProps
|
||||
} = props;
|
||||
const mergedIcon = icon ?? contextIcon ?? defaultIcon;
|
||||
const [visible, setVisible] = (0, _react.useState)(visibilityHeight === 0);
|
||||
const internalRef = _react.default.useRef(null);
|
||||
_react.default.useImperativeHandle(ref, () => ({
|
||||
nativeElement: internalRef.current
|
||||
}));
|
||||
const getDefaultTarget = () => internalRef.current?.ownerDocument || window;
|
||||
const handleScroll = (0, _throttleByAnimationFrame.default)(e => {
|
||||
const scrollTop = (0, _getScroll.default)(e.target);
|
||||
setVisible(scrollTop >= visibilityHeight);
|
||||
});
|
||||
(0, _react.useEffect)(() => {
|
||||
const getTarget = target || getDefaultTarget;
|
||||
const container = getTarget();
|
||||
handleScroll({
|
||||
target: container
|
||||
});
|
||||
container?.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
handleScroll.cancel();
|
||||
container?.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, [target]);
|
||||
const scrollToTop = e => {
|
||||
(0, _scrollTo.default)(0, {
|
||||
getContainer: target || getDefaultTarget,
|
||||
duration
|
||||
});
|
||||
onClick?.(e);
|
||||
};
|
||||
const {
|
||||
getPrefixCls
|
||||
} = (0, _react.useContext)(_configProvider.ConfigContext);
|
||||
const prefixCls = getPrefixCls(_FloatButton.floatButtonPrefixCls, customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const groupShape = (0, _react.useContext)(_context2.GroupContext)?.shape;
|
||||
const mergedShape = groupShape || shape;
|
||||
const contentProps = {
|
||||
prefixCls,
|
||||
icon: mergedIcon,
|
||||
type,
|
||||
shape: mergedShape,
|
||||
...restProps
|
||||
};
|
||||
return /*#__PURE__*/_react.default.createElement(_motion.default, {
|
||||
visible: visible,
|
||||
motionName: `${rootPrefixCls}-fade`
|
||||
}, ({
|
||||
className: motionClassName
|
||||
}, setRef) => (/*#__PURE__*/_react.default.createElement(_FloatButton.default, {
|
||||
ref: (0, _ref.composeRef)(internalRef, setRef),
|
||||
...contentProps,
|
||||
onClick: scrollToTop,
|
||||
className: (0, _clsx.clsx)(className, motionClassName)
|
||||
})));
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
BackTop.displayName = 'FloatButton.BackTop';
|
||||
}
|
||||
var _default = exports.default = BackTop;
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
|
||||
import type { BadgeProps } from '../badge';
|
||||
import type { ButtonSemanticClassNames, ButtonSemanticName, ButtonSemanticStyles } from '../button/Button';
|
||||
import type { ButtonHTMLType } from '../button/buttonHelpers';
|
||||
import type { TooltipProps } from '../tooltip';
|
||||
import type BackTop from './BackTop';
|
||||
import type FloatButtonGroup from './FloatButtonGroup';
|
||||
import type PurePanel from './PurePanel';
|
||||
export type FloatButtonElement = HTMLAnchorElement & HTMLButtonElement;
|
||||
export interface FloatButtonRef {
|
||||
nativeElement: FloatButtonElement | null;
|
||||
}
|
||||
export type FloatButtonType = 'default' | 'primary';
|
||||
export type FloatButtonShape = 'circle' | 'square';
|
||||
export type FloatButtonGroupTrigger = 'click' | 'hover';
|
||||
export type FloatButtonBadgeProps = Omit<BadgeProps, 'status' | 'text' | 'title' | 'children'>;
|
||||
export type FloatButtonSemanticName = ButtonSemanticName;
|
||||
export type FloatButtonClassNamesType = SemanticClassNamesType<FloatButtonProps, ButtonSemanticClassNames>;
|
||||
export type FloatButtonStylesType = SemanticStylesType<FloatButtonProps, ButtonSemanticStyles>;
|
||||
export interface FloatButtonProps extends React.DOMAttributes<FloatButtonElement> {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
style?: React.CSSProperties;
|
||||
classNames?: FloatButtonClassNamesType;
|
||||
styles?: FloatButtonStylesType;
|
||||
icon?: React.ReactNode;
|
||||
/** @deprecated Please use `content` instead. */
|
||||
description?: React.ReactNode;
|
||||
content?: React.ReactNode;
|
||||
type?: FloatButtonType;
|
||||
shape?: FloatButtonShape;
|
||||
tooltip?: React.ReactNode | TooltipProps;
|
||||
href?: string;
|
||||
target?: React.HTMLAttributeAnchorTarget;
|
||||
badge?: FloatButtonBadgeProps;
|
||||
/**
|
||||
* @since 5.21.0
|
||||
* @default button
|
||||
*/
|
||||
htmlType?: ButtonHTMLType;
|
||||
'aria-label'?: React.HtmlHTMLAttributes<HTMLElement>['aria-label'];
|
||||
}
|
||||
export declare const floatButtonPrefixCls = "float-btn";
|
||||
declare const InternalFloatButton: React.ForwardRefExoticComponent<FloatButtonProps & React.RefAttributes<FloatButtonElement>>;
|
||||
type CompoundedComponent = typeof InternalFloatButton & {
|
||||
Group: typeof FloatButtonGroup;
|
||||
BackTop: typeof BackTop;
|
||||
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
|
||||
};
|
||||
declare const FloatButton: CompoundedComponent;
|
||||
export default FloatButton;
|
||||
+128
@@ -0,0 +1,128 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.floatButtonPrefixCls = exports.default = void 0;
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
var _FileTextOutlined = _interopRequireDefault(require("@ant-design/icons/FileTextOutlined"));
|
||||
var _util = require("@rc-component/util");
|
||||
var _clsx = require("clsx");
|
||||
var _convertToTooltipProps = _interopRequireDefault(require("../_util/convertToTooltipProps"));
|
||||
var _hooks = require("../_util/hooks");
|
||||
var _warning = require("../_util/warning");
|
||||
var _badge = _interopRequireDefault(require("../badge"));
|
||||
var _Button = _interopRequireDefault(require("../button/Button"));
|
||||
var _configProvider = require("../config-provider");
|
||||
var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
|
||||
var _tooltip = _interopRequireDefault(require("../tooltip"));
|
||||
var _context = require("./context");
|
||||
var _style = _interopRequireDefault(require("./style"));
|
||||
const floatButtonPrefixCls = exports.floatButtonPrefixCls = 'float-btn';
|
||||
const InternalFloatButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
rootClassName,
|
||||
style,
|
||||
type = 'default',
|
||||
shape = 'circle',
|
||||
icon,
|
||||
description,
|
||||
content,
|
||||
tooltip,
|
||||
badge = {},
|
||||
classNames,
|
||||
styles,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
getPrefixCls,
|
||||
direction
|
||||
} = _react.default.useContext(_configProvider.ConfigContext);
|
||||
const groupContext = _react.default.useContext(_context.GroupContext);
|
||||
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
|
||||
const rootCls = (0, _useCSSVarCls.default)(prefixCls);
|
||||
const {
|
||||
shape: contextShape,
|
||||
individual: contextIndividual,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles
|
||||
} = groupContext || {};
|
||||
const mergedShape = contextShape || shape;
|
||||
const mergedIndividual = contextIndividual ?? true;
|
||||
const mergedContent = content ?? description;
|
||||
// =========== Merged Props for Semantic ==========
|
||||
const mergedProps = {
|
||||
...props,
|
||||
type,
|
||||
shape: mergedShape
|
||||
};
|
||||
// ============================ Styles ============================
|
||||
const [hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
|
||||
const floatButtonClassNames = _react.default.useMemo(() => ({
|
||||
icon: `${prefixCls}-icon`,
|
||||
content: `${prefixCls}-content`
|
||||
}), [prefixCls]);
|
||||
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([floatButtonClassNames, contextClassNames, classNames], [contextStyles, styles], {
|
||||
props: mergedProps
|
||||
});
|
||||
// ============================= Icon =============================
|
||||
const mergedIcon = !mergedContent && !icon ? /*#__PURE__*/_react.default.createElement(_FileTextOutlined.default, null) : icon;
|
||||
// ============================ zIndex ============================
|
||||
const [zIndex] = (0, _hooks.useZIndex)('FloatButton', style?.zIndex);
|
||||
const mergedStyle = {
|
||||
...style,
|
||||
zIndex
|
||||
};
|
||||
// ============================ Badge =============================
|
||||
// 虽然在 ts 中已经 omit 过了,但是为了防止多余的属性被透传进来,这里再 omit 一遍,以防万一
|
||||
const badgeProps = (0, _util.omit)(badge, ['title', 'children', 'status', 'text']);
|
||||
const badgeNode = 'badge' in props && (/*#__PURE__*/_react.default.createElement(_badge.default, {
|
||||
...badgeProps,
|
||||
className: (0, _clsx.clsx)(badgeProps.className, `${prefixCls}-badge`, {
|
||||
[`${prefixCls}-badge-dot`]: badgeProps.dot
|
||||
})
|
||||
}));
|
||||
// =========================== Tooltip ============================
|
||||
const tooltipProps = (0, _convertToTooltipProps.default)(tooltip);
|
||||
// =========================== Warning ============================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('FloatButton');
|
||||
process.env.NODE_ENV !== "production" ? warning(!(mergedShape === 'circle' && mergedContent), 'usage', 'supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.') : void 0;
|
||||
warning.deprecated(!description, 'description', 'content');
|
||||
}
|
||||
// ============================ Render ============================
|
||||
let node = /*#__PURE__*/_react.default.createElement(_Button.default, {
|
||||
...restProps,
|
||||
ref: ref,
|
||||
// Styles
|
||||
className: (0, _clsx.clsx)(hashId, cssVarCls, rootCls, prefixCls, className, rootClassName, `${prefixCls}-${type}`, `${prefixCls}-${mergedShape}`, {
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-individual`]: mergedIndividual,
|
||||
[`${prefixCls}-icon-only`]: !mergedContent
|
||||
}),
|
||||
classNames: mergedClassNames,
|
||||
styles: mergedStyles,
|
||||
style: mergedStyle,
|
||||
shape: mergedShape,
|
||||
// Others
|
||||
type: type,
|
||||
size: "large",
|
||||
icon: mergedIcon,
|
||||
_skipSemantic: true
|
||||
}, mergedContent, badgeNode);
|
||||
if (tooltipProps) {
|
||||
node = /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
||||
...tooltipProps
|
||||
}, node);
|
||||
}
|
||||
return node;
|
||||
});
|
||||
const FloatButton = InternalFloatButton;
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
FloatButton.displayName = 'FloatButton';
|
||||
}
|
||||
var _default = exports.default = FloatButton;
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
import React from 'react';
|
||||
import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
|
||||
import type { FloatButtonGroupTrigger, FloatButtonProps } from './FloatButton';
|
||||
export type FloatButtonGroupSemanticName = keyof FloatButtonGroupSemanticClassNames & keyof FloatButtonGroupSemanticStyles;
|
||||
export type FloatButtonGroupSemanticClassNames = {
|
||||
root?: string;
|
||||
list?: string;
|
||||
item?: string;
|
||||
itemIcon?: string;
|
||||
itemContent?: string;
|
||||
trigger?: string;
|
||||
triggerIcon?: string;
|
||||
triggerContent?: string;
|
||||
};
|
||||
export type FloatButtonGroupSemanticStyles = {
|
||||
root?: React.CSSProperties;
|
||||
list?: React.CSSProperties;
|
||||
item?: React.CSSProperties;
|
||||
itemIcon?: React.CSSProperties;
|
||||
itemContent?: React.CSSProperties;
|
||||
trigger?: React.CSSProperties;
|
||||
triggerIcon?: React.CSSProperties;
|
||||
triggerContent?: React.CSSProperties;
|
||||
};
|
||||
export type FloatButtonGroupClassNamesType = SemanticClassNamesType<FloatButtonGroupProps, FloatButtonGroupSemanticClassNames>;
|
||||
export type FloatButtonGroupStylesType = SemanticStylesType<FloatButtonGroupProps, FloatButtonGroupSemanticStyles>;
|
||||
export interface FloatButtonGroupProps extends Omit<FloatButtonProps, 'classNames' | 'styles'> {
|
||||
classNames?: FloatButtonGroupClassNamesType;
|
||||
styles?: FloatButtonGroupStylesType;
|
||||
trigger?: FloatButtonGroupTrigger;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
closeIcon?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
placement?: 'top' | 'left' | 'right' | 'bottom';
|
||||
}
|
||||
declare const FloatButtonGroup: React.FC<Readonly<FloatButtonGroupProps>>;
|
||||
export default FloatButtonGroup;
|
||||
+217
@@ -0,0 +1,217 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
|
||||
var _FileTextOutlined = _interopRequireDefault(require("@ant-design/icons/FileTextOutlined"));
|
||||
var _motion = _interopRequireDefault(require("@rc-component/motion"));
|
||||
var _util = require("@rc-component/util");
|
||||
var _clsx = require("clsx");
|
||||
var _hooks = require("../_util/hooks");
|
||||
var _warning = require("../_util/warning");
|
||||
var _context = require("../config-provider/context");
|
||||
var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
|
||||
var _flex = _interopRequireDefault(require("../flex"));
|
||||
var _space = _interopRequireDefault(require("../space"));
|
||||
var _context2 = require("./context");
|
||||
var _FloatButton = _interopRequireWildcard(require("./FloatButton"));
|
||||
var _style = _interopRequireDefault(require("./style"));
|
||||
const FloatButtonGroup = props => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
rootClassName,
|
||||
shape = 'circle',
|
||||
type = 'default',
|
||||
placement,
|
||||
icon = /*#__PURE__*/_react.default.createElement(_FileTextOutlined.default, null),
|
||||
closeIcon,
|
||||
trigger,
|
||||
children,
|
||||
onOpenChange,
|
||||
open: customOpen,
|
||||
onClick: onTriggerButtonClick,
|
||||
...floatButtonProps
|
||||
} = props;
|
||||
const {
|
||||
direction,
|
||||
getPrefixCls,
|
||||
closeIcon: contextCloseIcon,
|
||||
classNames: contextClassNames,
|
||||
styles: contextStyles,
|
||||
className: contextClassName,
|
||||
style: contextStyle
|
||||
} = (0, _context.useComponentConfig)('floatButtonGroup');
|
||||
const mergedCloseIcon = closeIcon ?? contextCloseIcon ?? /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, null);
|
||||
const prefixCls = getPrefixCls(_FloatButton.floatButtonPrefixCls, customizePrefixCls);
|
||||
const rootCls = (0, _useCSSVarCls.default)(prefixCls);
|
||||
const [hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
|
||||
const groupPrefixCls = `${prefixCls}-group`;
|
||||
const isMenuMode = trigger && ['click', 'hover'].includes(trigger);
|
||||
// ============================ zIndex ============================
|
||||
const [zIndex] = (0, _hooks.useZIndex)('FloatButton', style?.zIndex);
|
||||
// ============================= Refs =============================
|
||||
const floatButtonGroupRef = _react.default.useRef(null);
|
||||
// ========================== Placement ==========================
|
||||
const mergedPlacement = ['top', 'left', 'right', 'bottom'].includes(placement) ? placement : 'top';
|
||||
// ========================== Open ==========================
|
||||
const [open, setOpen] = (0, _util.useControlledState)(false, customOpen);
|
||||
const hoverTrigger = trigger === 'hover';
|
||||
const clickTrigger = trigger === 'click';
|
||||
const triggerOpen = (0, _util.useEvent)(nextOpen => {
|
||||
if (open !== nextOpen) {
|
||||
setOpen(nextOpen);
|
||||
onOpenChange?.(nextOpen);
|
||||
}
|
||||
});
|
||||
// ===================== Trigger: Hover =====================
|
||||
const onMouseEnter = () => {
|
||||
if (hoverTrigger) {
|
||||
triggerOpen(true);
|
||||
}
|
||||
};
|
||||
const onMouseLeave = () => {
|
||||
if (hoverTrigger) {
|
||||
triggerOpen(false);
|
||||
}
|
||||
};
|
||||
// ===================== Trigger: Click =====================
|
||||
const onInternalTriggerButtonClick = e => {
|
||||
if (clickTrigger) {
|
||||
triggerOpen(!open);
|
||||
}
|
||||
onTriggerButtonClick?.(e);
|
||||
};
|
||||
_react.default.useEffect(() => {
|
||||
if (clickTrigger) {
|
||||
const onDocClick = e => {
|
||||
// Skip if click on the group
|
||||
if (floatButtonGroupRef.current?.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
triggerOpen(false);
|
||||
};
|
||||
document.addEventListener('click', onDocClick, {
|
||||
capture: true
|
||||
});
|
||||
return () => document.removeEventListener('click', onDocClick, {
|
||||
capture: true
|
||||
});
|
||||
}
|
||||
}, [clickTrigger]);
|
||||
// ======================== Warning =========================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = (0, _warning.devUseWarning)('FloatButton.Group');
|
||||
process.env.NODE_ENV !== "production" ? warning(!('open' in props) || !!trigger, 'usage', '`open` need to be used together with `trigger`') : void 0;
|
||||
}
|
||||
// ======================== Contexts ========================
|
||||
const individual = shape === 'circle';
|
||||
// =========== Merged Props for Semantic ==========
|
||||
const mergedProps = {
|
||||
...props,
|
||||
shape,
|
||||
type,
|
||||
placement: mergedPlacement
|
||||
};
|
||||
// ============================ Styles ============================
|
||||
const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
|
||||
props: mergedProps
|
||||
});
|
||||
const listContext = _react.default.useMemo(() => ({
|
||||
shape,
|
||||
individual,
|
||||
classNames: {
|
||||
root: mergedClassNames.item,
|
||||
icon: mergedClassNames.itemIcon,
|
||||
content: mergedClassNames.itemContent
|
||||
},
|
||||
styles: {
|
||||
root: mergedStyles.item,
|
||||
icon: mergedStyles.itemIcon,
|
||||
content: mergedStyles.itemContent
|
||||
}
|
||||
}), [shape, individual, mergedClassNames, mergedStyles]);
|
||||
const triggerContext = _react.default.useMemo(() => ({
|
||||
...listContext,
|
||||
individual: true,
|
||||
classNames: {
|
||||
root: mergedClassNames.trigger,
|
||||
icon: mergedClassNames.triggerIcon,
|
||||
content: mergedClassNames.triggerContent
|
||||
},
|
||||
styles: {
|
||||
root: mergedStyles.trigger,
|
||||
icon: mergedStyles.triggerIcon,
|
||||
content: mergedStyles.triggerContent
|
||||
}
|
||||
}), [listContext, mergedClassNames, mergedStyles]);
|
||||
// ========================= Render =========================
|
||||
// >>> List
|
||||
let listNode;
|
||||
const listCls = `${groupPrefixCls}-list`;
|
||||
const renderList = motionClassName => {
|
||||
const vertical = mergedPlacement === 'top' || mergedPlacement === 'bottom';
|
||||
const sharedProps = {
|
||||
className: (0, _clsx.clsx)(listCls, mergedClassNames.list, motionClassName),
|
||||
style: mergedStyles.list
|
||||
};
|
||||
if (individual) {
|
||||
listNode = /*#__PURE__*/_react.default.createElement(_flex.default, {
|
||||
vertical: vertical,
|
||||
...sharedProps
|
||||
}, children);
|
||||
} else {
|
||||
listNode = /*#__PURE__*/_react.default.createElement(_space.default.Compact, {
|
||||
vertical: vertical,
|
||||
...sharedProps
|
||||
}, children);
|
||||
}
|
||||
return listNode;
|
||||
};
|
||||
// >>> Render
|
||||
return /*#__PURE__*/_react.default.createElement(_context2.GroupContext.Provider, {
|
||||
value: listContext
|
||||
}, /*#__PURE__*/_react.default.createElement("div", {
|
||||
className: (0, _clsx.clsx)(groupPrefixCls, hashId, cssVarCls, rootCls, contextClassName, mergedClassNames.root, className, rootClassName, {
|
||||
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${groupPrefixCls}-individual`]: individual,
|
||||
[`${groupPrefixCls}-${mergedPlacement}`]: isMenuMode,
|
||||
[`${groupPrefixCls}-menu-mode`]: isMenuMode
|
||||
}),
|
||||
style: {
|
||||
...contextStyle,
|
||||
zIndex,
|
||||
...mergedStyles.root,
|
||||
...style
|
||||
},
|
||||
// ref
|
||||
ref: floatButtonGroupRef,
|
||||
// Hover trigger
|
||||
onMouseEnter: onMouseEnter,
|
||||
onMouseLeave: onMouseLeave
|
||||
}, isMenuMode ? (/*#__PURE__*/_react.default.createElement(_motion.default, {
|
||||
visible: open,
|
||||
motionName: `${listCls}-motion`
|
||||
}, ({
|
||||
className: motionClassName
|
||||
}) => renderList(motionClassName))) : renderList(), isMenuMode && (/*#__PURE__*/_react.default.createElement(_context2.GroupContext.Provider, {
|
||||
value: triggerContext
|
||||
}, /*#__PURE__*/_react.default.createElement(_FloatButton.default, {
|
||||
type: type,
|
||||
icon: open ? mergedCloseIcon : icon,
|
||||
"aria-label": props['aria-label'],
|
||||
className: `${groupPrefixCls}-trigger`,
|
||||
onClick: onInternalTriggerButtonClick,
|
||||
...floatButtonProps
|
||||
})))));
|
||||
};
|
||||
var _default = exports.default = FloatButtonGroup;
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import type { FloatButtonProps } from './FloatButton';
|
||||
import type { FloatButtonGroupProps } from './FloatButtonGroup';
|
||||
export interface PureFloatButtonProps extends Omit<FloatButtonProps, 'target'> {
|
||||
backTop?: boolean;
|
||||
}
|
||||
type ClassNamesType = PureFloatButtonProps['classNames'] | FloatButtonGroupProps['classNames'];
|
||||
type StylesType = PureFloatButtonProps['styles'] | FloatButtonGroupProps['styles'];
|
||||
export interface PurePanelProps extends Omit<PureFloatButtonProps, 'classNames' | 'styles'>, Omit<FloatButtonGroupProps, 'children' | 'classNames' | 'styles'> {
|
||||
/** Convert to FloatGroup when configured */
|
||||
items?: PureFloatButtonProps[];
|
||||
classNames?: ClassNamesType;
|
||||
styles?: StylesType;
|
||||
}
|
||||
/** @private Internal Component. Do not use in your production. */
|
||||
declare const PurePanel: React.FC<PurePanelProps>;
|
||||
export default PurePanel;
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
/* eslint-disable react/no-array-index-key */
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var React = _interopRequireWildcard(require("react"));
|
||||
var _clsx = require("clsx");
|
||||
var _configProvider = require("../config-provider");
|
||||
var _BackTop = _interopRequireDefault(require("./BackTop"));
|
||||
var _FloatButton = _interopRequireWildcard(require("./FloatButton"));
|
||||
var _FloatButtonGroup = _interopRequireDefault(require("./FloatButtonGroup"));
|
||||
const PureFloatButton = ({
|
||||
backTop,
|
||||
...props
|
||||
}) => backTop ? /*#__PURE__*/React.createElement(_BackTop.default, {
|
||||
...props,
|
||||
visibilityHeight: 0
|
||||
}) : /*#__PURE__*/React.createElement(_FloatButton.default, {
|
||||
...props
|
||||
});
|
||||
/** @private Internal Component. Do not use in your production. */
|
||||
const PurePanel = ({
|
||||
className,
|
||||
items,
|
||||
classNames: cls,
|
||||
styles,
|
||||
prefixCls: customizePrefixCls,
|
||||
...restProps
|
||||
}) => {
|
||||
const {
|
||||
getPrefixCls
|
||||
} = React.useContext(_configProvider.ConfigContext);
|
||||
const prefixCls = getPrefixCls(_FloatButton.floatButtonPrefixCls, customizePrefixCls);
|
||||
const pureCls = `${prefixCls}-pure`;
|
||||
if (items) {
|
||||
return /*#__PURE__*/React.createElement(_FloatButtonGroup.default, {
|
||||
className: (0, _clsx.clsx)(className, pureCls),
|
||||
classNames: cls,
|
||||
styles: styles,
|
||||
...restProps
|
||||
}, items.map((item, index) => (/*#__PURE__*/React.createElement(PureFloatButton, {
|
||||
key: index,
|
||||
...item
|
||||
}))));
|
||||
}
|
||||
return /*#__PURE__*/React.createElement(PureFloatButton, {
|
||||
className: (0, _clsx.clsx)(className, pureCls),
|
||||
classNames: cls,
|
||||
styles: styles,
|
||||
...restProps
|
||||
});
|
||||
};
|
||||
var _default = exports.default = PurePanel;
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
import type { FloatButtonProps, FloatButtonShape } from './FloatButton';
|
||||
export interface GroupContextProps {
|
||||
shape: FloatButtonShape;
|
||||
/** Current Buttons are in same container or individual */
|
||||
individual: boolean;
|
||||
/** FloatButton classNames */
|
||||
classNames?: FloatButtonProps['classNames'];
|
||||
/** FloatButton styles */
|
||||
styles?: FloatButtonProps['styles'];
|
||||
}
|
||||
export declare const GroupContext: React.Context<GroupContextProps | null>;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.GroupContext = void 0;
|
||||
var _react = _interopRequireDefault(require("react"));
|
||||
const GroupContext = exports.GroupContext = /*#__PURE__*/_react.default.createContext(null);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import FloatButton from './FloatButton';
|
||||
export type { FloatButtonProps, FloatButtonRef, FloatButtonSemanticName } from './FloatButton';
|
||||
export type { FloatButtonGroupProps, FloatButtonGroupSemanticClassNames, FloatButtonGroupSemanticName, FloatButtonGroupSemanticStyles, } from './FloatButtonGroup';
|
||||
export default FloatButton;
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _BackTop = _interopRequireDefault(require("./BackTop"));
|
||||
var _FloatButton = _interopRequireDefault(require("./FloatButton"));
|
||||
var _FloatButtonGroup = _interopRequireDefault(require("./FloatButtonGroup"));
|
||||
var _PurePanel = _interopRequireDefault(require("./PurePanel"));
|
||||
_FloatButton.default.BackTop = _BackTop.default;
|
||||
_FloatButton.default.Group = _FloatButtonGroup.default;
|
||||
_FloatButton.default._InternalPanelDoNotUseOrYouWillBeFired = _PurePanel.default;
|
||||
var _default = exports.default = _FloatButton.default;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { FloatButtonToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/interface';
|
||||
declare const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject>;
|
||||
export default genFloatButtonStyle;
|
||||
+109
@@ -0,0 +1,109 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
||||
const genFloatButtonStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
floatButtonSize,
|
||||
iconCls,
|
||||
antCls,
|
||||
floatButtonIconSize
|
||||
} = token;
|
||||
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'float-btn');
|
||||
const badgeCls = `${componentCls}-badge`;
|
||||
const R = Math.SQRT2;
|
||||
const offsetR = (R - 1) / R;
|
||||
const offsetSquare = token.calc(token.borderRadius).mul(offsetR).equal();
|
||||
const offsetCircle = token.calc(token.controlHeight).div(2).mul(offsetR).equal();
|
||||
return {
|
||||
[componentCls]: [
|
||||
// ==============================================================
|
||||
// == Variable ==
|
||||
// ==============================================================
|
||||
{
|
||||
[varName('size')]: (0, _cssinjs.unit)(floatButtonSize)
|
||||
},
|
||||
// ==============================================================
|
||||
// == Template ==
|
||||
// ==============================================================
|
||||
{
|
||||
flexDirection: 'column',
|
||||
margin: 0,
|
||||
padding: `${(0, _cssinjs.unit)(token.paddingXXS)} 0`,
|
||||
width: varRef('size'),
|
||||
minHeight: varRef('size'),
|
||||
height: 'auto',
|
||||
wordBreak: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
gap: token.calc(token.paddingXXS).div(2).equal(),
|
||||
'&-rtl': {
|
||||
direction: 'rtl'
|
||||
},
|
||||
// ======================== Individual ========================
|
||||
// Not in group
|
||||
[`&${componentCls}-individual`]: {
|
||||
position: 'fixed',
|
||||
zIndex: token.zIndexPopupBase,
|
||||
insetInlineEnd: token.floatButtonInsetInlineEnd,
|
||||
bottom: token.floatButtonInsetBlockEnd,
|
||||
boxShadow: token.boxShadowSecondary
|
||||
},
|
||||
// =========================== Pure ===========================
|
||||
[`&${componentCls}-pure`]: {
|
||||
position: 'relative',
|
||||
inset: 'auto'
|
||||
},
|
||||
// ========================== Empty ===========================
|
||||
'&:empty': {
|
||||
display: 'none'
|
||||
},
|
||||
// =========================== Icon ===========================
|
||||
[`${componentCls}-icon`]: {
|
||||
lineHeight: 1
|
||||
},
|
||||
// Icon Only will has large icon Size
|
||||
[`&${componentCls}-icon-only`]: {
|
||||
[iconCls]: {
|
||||
fontSize: floatButtonIconSize
|
||||
}
|
||||
},
|
||||
// =========================== Desc ===========================
|
||||
[`${componentCls}-content`]: {
|
||||
fontSize: token.fontSizeSM
|
||||
},
|
||||
// ========================== Badge ===========================
|
||||
[badgeCls]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
[`&:not(${badgeCls}-dot)`]: {
|
||||
transform: 'translate(50%, -50%)'
|
||||
}
|
||||
},
|
||||
// RTL
|
||||
[`&-rtl ${badgeCls}:not(${badgeCls}-dot)`]: {
|
||||
transform: 'translate(-50%, -50%)'
|
||||
},
|
||||
// Shape: square
|
||||
'&-square': {
|
||||
[`${badgeCls}-dot`]: {
|
||||
marginTop: offsetSquare,
|
||||
marginInlineEnd: offsetSquare
|
||||
}
|
||||
},
|
||||
// Shape: circle
|
||||
'&-circle': {
|
||||
[badgeCls]: {
|
||||
marginTop: offsetCircle,
|
||||
marginInlineEnd: offsetCircle
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
};
|
||||
var _default = exports.default = genFloatButtonStyle;
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { FloatButtonToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/interface';
|
||||
declare const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject>;
|
||||
export default genGroupStyle;
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _cssinjs = require("@ant-design/cssinjs");
|
||||
var _style = require("../../style");
|
||||
var _genStyleUtils = require("../../theme/util/genStyleUtils");
|
||||
const genGroupStyle = token => {
|
||||
const {
|
||||
componentCls,
|
||||
antCls,
|
||||
floatButtonSize,
|
||||
padding
|
||||
} = token;
|
||||
const groupCls = `${componentCls}-group`;
|
||||
const listCls = `${groupCls}-list`;
|
||||
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'float-btn');
|
||||
return {
|
||||
[groupCls]: [
|
||||
// ==============================================================
|
||||
// == Variable ==
|
||||
// ==============================================================
|
||||
{
|
||||
[varName('list-transform-start')]: `translate(0,${(0, _cssinjs.unit)(floatButtonSize)})`,
|
||||
[varName('list-trigger-offset')]: `calc(${(0, _cssinjs.unit)(floatButtonSize)} + ${(0, _cssinjs.unit)(padding)})`
|
||||
},
|
||||
// ==============================================================
|
||||
// == Template ==
|
||||
// ==============================================================
|
||||
{
|
||||
...(0, _style.resetComponent)(token),
|
||||
position: 'fixed',
|
||||
zIndex: token.zIndexPopupBase,
|
||||
insetInlineEnd: token.floatButtonInsetInlineEnd,
|
||||
bottom: token.floatButtonInsetBlockEnd,
|
||||
gap: padding,
|
||||
'&-rtl': {
|
||||
direction: 'rtl'
|
||||
},
|
||||
// =========================== Pure ===========================
|
||||
[`&${componentCls}-pure`]: {
|
||||
position: 'relative',
|
||||
inset: 'auto'
|
||||
},
|
||||
// ========================== Button ==========================
|
||||
[componentCls]: {
|
||||
position: 'relative',
|
||||
inset: 'auto'
|
||||
}
|
||||
},
|
||||
// ==============================================================
|
||||
// == List ==
|
||||
// ==============================================================
|
||||
{
|
||||
// ======================== Individual ========================
|
||||
// Not in group
|
||||
[`&:not(${groupCls}-individual) ${listCls}`]: {
|
||||
boxShadow: token.boxShadowSecondary
|
||||
},
|
||||
[`&${groupCls}-individual ${listCls}`]: {
|
||||
gap: padding
|
||||
},
|
||||
// =========================== Menu ===========================
|
||||
[`&-menu-mode ${listCls}`]: {
|
||||
position: 'absolute'
|
||||
},
|
||||
// ========================== Motion ==========================
|
||||
[listCls]: {
|
||||
borderRadius: token.borderRadiusLG,
|
||||
'&-motion': {
|
||||
transition: `all ${token.motionDurationSlow}`,
|
||||
'&-enter, &-appear': {
|
||||
opacity: 0,
|
||||
transform: varRef('list-transform-start'),
|
||||
'&-active': {
|
||||
opacity: 1,
|
||||
transform: `translate(0, 0)`
|
||||
}
|
||||
},
|
||||
'&-leave': {
|
||||
'&-active': {
|
||||
opacity: 0,
|
||||
transform: varRef('list-transform-start')
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// ======================== Placements ========================
|
||||
'&-top': {
|
||||
[listCls]: {
|
||||
bottom: varRef('list-trigger-offset')
|
||||
}
|
||||
},
|
||||
'&-bottom': {
|
||||
[listCls]: {
|
||||
[varName('list-transform-start')]: `translate(0, calc(${(0, _cssinjs.unit)(floatButtonSize)} * -1))`,
|
||||
top: varRef('list-trigger-offset')
|
||||
}
|
||||
},
|
||||
'&-left': {
|
||||
[listCls]: {
|
||||
[varName('list-transform-start')]: `translate(${(0, _cssinjs.unit)(floatButtonSize)}, 0)`,
|
||||
right: varRef('list-trigger-offset')
|
||||
}
|
||||
},
|
||||
'&-right': {
|
||||
[listCls]: {
|
||||
[varName('list-transform-start')]: `translate(calc(${(0, _cssinjs.unit)(floatButtonSize)} * -1), 0)`,
|
||||
left: varRef('list-trigger-offset')
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
};
|
||||
var _default = exports.default = genGroupStyle;
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
import type { FullToken, GetDefaultToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export type ComponentToken = object;
|
||||
/**
|
||||
* @desc FloatButton 组件的 Token
|
||||
* @descEN Token for FloatButton component
|
||||
*/
|
||||
export type FloatButtonToken = FullToken<'FloatButton'> & {
|
||||
/**
|
||||
* @desc FloatButton 尺寸
|
||||
* @descEN Size of FloatButton
|
||||
*/
|
||||
floatButtonSize: number;
|
||||
/**
|
||||
* @desc FloatButton 图标尺寸
|
||||
* @descEN Icon size of FloatButton
|
||||
*/
|
||||
floatButtonIconSize: number | string;
|
||||
/**
|
||||
* @desc FloatButton 底部内边距
|
||||
* @descEN Bottom inset of FloatButton
|
||||
*/
|
||||
floatButtonInsetBlockEnd: number;
|
||||
/**
|
||||
* @desc FloatButton 右侧内边距
|
||||
* @descEN Right inset of FloatButton
|
||||
*/
|
||||
floatButtonInsetInlineEnd: number;
|
||||
};
|
||||
export declare const prepareComponentToken: GetDefaultToken<'FloatButton'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.prepareComponentToken = exports.default = void 0;
|
||||
var _fade = require("../../style/motion/fade");
|
||||
var _internal = require("../../theme/internal");
|
||||
var _button = _interopRequireDefault(require("./button"));
|
||||
var _group = _interopRequireDefault(require("./group"));
|
||||
// ============================== Export ==============================
|
||||
const prepareComponentToken = () => ({});
|
||||
exports.prepareComponentToken = prepareComponentToken;
|
||||
var _default = exports.default = (0, _internal.genStyleHooks)('FloatButton', token => {
|
||||
const {
|
||||
controlHeightLG,
|
||||
marginXXL,
|
||||
marginLG,
|
||||
fontSizeIcon,
|
||||
calc
|
||||
} = token;
|
||||
const floatButtonToken = (0, _internal.mergeToken)(token, {
|
||||
floatButtonIconSize: calc(fontSizeIcon).mul(1.5).equal(),
|
||||
floatButtonSize: controlHeightLG,
|
||||
floatButtonInsetBlockEnd: marginXXL,
|
||||
floatButtonInsetInlineEnd: marginLG
|
||||
});
|
||||
return [(0, _button.default)(floatButtonToken), (0, _group.default)(floatButtonToken), (0, _fade.initFadeMotion)(token)];
|
||||
}, prepareComponentToken, {
|
||||
// Should be higher than Button (-999)
|
||||
order: -998
|
||||
});
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
declare const getOffset: (radius: number) => number;
|
||||
export default getOffset;
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
const getOffset = radius => {
|
||||
if (radius === 0) {
|
||||
return 0;
|
||||
}
|
||||
// 如果要考虑通用性,这里应该用三角函数 Math.sin(45)
|
||||
// 但是这个场景比较特殊,始终是等腰直角三角形,所以直接用 Math.sqrt() 开方即可
|
||||
return radius - Math.sqrt(radius ** 2 / 2);
|
||||
};
|
||||
var _default = exports.default = getOffset;
|
||||
Reference in New Issue
Block a user