mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
feat: Float Button (#37520)
* feat: add FloatButton * feat: add FloatButton * feat: FloatButton * feat: FloatButton * fix: fix * feat: FloatButton * feat: FloatButton * feat: FloatButton * feat: FloatButton * feat: FloatButton * fix: add groupShape * feat: mergeShape * fix: fix * fix: fix style * fix: style fix * fix: fix * fix: style fix * fix: fix * fix: fix * fix: fix * fix: fix style * fix: fix style * fix: fix style * fix: style fix * feat: back-top * fix: style bug fix * fix: fix erroe * fix: add tiggerElement * fix: add tiggerElement * fix: add tiggerElement * fix: add tiggerElement * feat: add useMemo * docs: add docs * fix: bugFix * fix: bugFix * fix: bugfix * fix: style fix * fix: bugfix * test: add test case * fix: style fix * fix: style fix * fix: fix style * fix: fix style * fix: fix trigger action * fix: fix style * feat: add demo * fix: add demo * feat: add docs * fix: style ifx * feat: update maxSize of bundlesize * feat: add animation for group * fix: fix * fix: fix style * fix: fix test case * fix: fix test case * fix: fix type * fix: fix type * fix: update bundlesize * fix: fix * fix: fix style * fix: fix style * fix: updata snap * fix: fix CI * fix: fix style * fix: rename float button motion * fix: fix style * fix: bugFix * fix: fix style * fix: bugFix * fix: update docs * refactor: float button trigger * test: fix test case & update snapshot * fix: delete rest * docs: update demo * test: update snapshot * fix: fix eslint error * test: update snapshot * style: update icon fontSize to 18 * fix: fix style * fix: style fix * fix: test case fix * test: add test case * fix: style fix * test: update snap * fix: style fix * fix: style fix * fix: style fix * docs: demo update * fix: style fix * docs: update demo * test: update snapshot Co-authored-by: 黑雨 <wangning4567@163.com> Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
lijianan
GitHub
parent
6cbcb25d36
commit
a05b9d92c5
@ -25,6 +25,7 @@ Array [
|
||||
"Drawer",
|
||||
"Dropdown",
|
||||
"Empty",
|
||||
"FloatButton",
|
||||
"Form",
|
||||
"Grid",
|
||||
"Image",
|
||||
|
||||
102
components/float-button/BackTop.tsx
Normal file
102
components/float-button/BackTop.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
|
||||
import classNames from 'classnames';
|
||||
import CSSMotion from 'rc-motion';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import React, { memo, useContext, useEffect, useMemo, useRef } from 'react';
|
||||
import FloatButton, { floatButtonPrefixCls } from '.';
|
||||
import type { ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import scrollTo from '../_util/scrollTo';
|
||||
import { throttleByAnimationFrame } from '../_util/throttleByAnimationFrame';
|
||||
import FloatButtonGroupContext from './context';
|
||||
import type { BackTopProps, FloatButtonContentProps, FloatButtonShape } from './interface';
|
||||
import useStyle from './style';
|
||||
|
||||
const BackTop: React.FC<BackTopProps> = props => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className = '',
|
||||
type = 'default',
|
||||
shape = 'circle',
|
||||
visibilityHeight = 400,
|
||||
icon = <VerticalAlignTopOutlined />,
|
||||
description,
|
||||
target,
|
||||
onClick,
|
||||
duration = 450,
|
||||
} = props;
|
||||
|
||||
const [visible, setVisible] = useMergedState(false, { value: props.visible });
|
||||
|
||||
const ref = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
|
||||
|
||||
const scrollEvent = useRef<any>(null);
|
||||
|
||||
const getDefaultTarget = (): HTMLElement | Document | Window =>
|
||||
ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
|
||||
|
||||
const handleScroll = throttleByAnimationFrame(
|
||||
(e: React.UIEvent<HTMLElement> | { target: any }) => {
|
||||
const scrollTop = getScroll(e.target, true);
|
||||
setVisible(scrollTop > visibilityHeight!);
|
||||
},
|
||||
);
|
||||
|
||||
const bindScrollEvent = () => {
|
||||
const getTarget = target || getDefaultTarget;
|
||||
const container = getTarget();
|
||||
scrollEvent.current = addEventListener(container, 'scroll', (e: React.UIEvent<HTMLElement>) => {
|
||||
handleScroll(e);
|
||||
});
|
||||
handleScroll({ target: container });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
bindScrollEvent();
|
||||
return () => {
|
||||
if (scrollEvent.current) {
|
||||
scrollEvent.current.remove();
|
||||
}
|
||||
handleScroll.cancel();
|
||||
};
|
||||
}, [target]);
|
||||
|
||||
const scrollToTop: React.MouseEventHandler<HTMLDivElement> = e => {
|
||||
scrollTo(0, { getContainer: target || getDefaultTarget, duration });
|
||||
if (typeof onClick === 'function') {
|
||||
onClick(e);
|
||||
}
|
||||
};
|
||||
|
||||
const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
|
||||
|
||||
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
|
||||
const rootPrefixCls = getPrefixCls();
|
||||
const [wrapSSR] = useStyle(prefixCls);
|
||||
|
||||
const groupShape = useContext<FloatButtonShape | null>(FloatButtonGroupContext);
|
||||
|
||||
const mergeShape = groupShape || shape;
|
||||
|
||||
const contentProps = useMemo<FloatButtonContentProps>(
|
||||
() => ({ prefixCls, description, icon, type, shape: mergeShape }),
|
||||
[prefixCls, description, icon, type, mergeShape],
|
||||
);
|
||||
|
||||
return wrapSSR(
|
||||
<CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>
|
||||
{({ className: motionClassName }) => (
|
||||
<FloatButton
|
||||
ref={ref}
|
||||
{...contentProps}
|
||||
onClick={scrollToTop}
|
||||
className={classNames(className, motionClassName)}
|
||||
/>
|
||||
)}
|
||||
</CSSMotion>,
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(BackTop);
|
||||
33
components/float-button/FloatButtonContent.tsx
Normal file
33
components/float-button/FloatButtonContent.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import React, { memo } from 'react';
|
||||
import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
|
||||
import classNames from 'classnames';
|
||||
import type { FloatButtonContentProps } from './interface';
|
||||
|
||||
const FloatButtonContent: React.FC<FloatButtonContentProps> = props => {
|
||||
const { icon, description, prefixCls, className } = props;
|
||||
const defaultElement = (
|
||||
<div className={`${prefixCls}-icon`}>
|
||||
<FileTextOutlined />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
onClick={props.onClick}
|
||||
onFocus={props.onFocus}
|
||||
onMouseEnter={props.onMouseEnter}
|
||||
onMouseLeave={props.onMouseLeave}
|
||||
className={classNames(className, `${prefixCls}-content`)}
|
||||
>
|
||||
{icon || description ? (
|
||||
<>
|
||||
{icon && <div className={`${prefixCls}-icon`}>{icon}</div>}
|
||||
{description && <div className={`${prefixCls}-description`}>{description}</div>}
|
||||
</>
|
||||
) : (
|
||||
defaultElement
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(FloatButtonContent);
|
||||
98
components/float-button/FloatButtonGroup.tsx
Normal file
98
components/float-button/FloatButtonGroup.tsx
Normal file
@ -0,0 +1,98 @@
|
||||
import React, { useRef, memo, useContext } from 'react';
|
||||
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
|
||||
import classNames from 'classnames';
|
||||
import CSSMotion from 'rc-motion';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import FloatButton, { floatButtonPrefixCls } from '.';
|
||||
import type { ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { FloatButtonGroupProvider } from './context';
|
||||
import type { FloatButtonGroupProps } from './interface';
|
||||
import useStyle from './style';
|
||||
|
||||
const FloatButtonGroup: React.FC<FloatButtonGroupProps> = props => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
style,
|
||||
shape = 'circle',
|
||||
type = 'default',
|
||||
icon = <FileTextOutlined />,
|
||||
closeIcon = <CloseOutlined />,
|
||||
description,
|
||||
trigger,
|
||||
children,
|
||||
onOpenChange,
|
||||
} = props;
|
||||
|
||||
const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
|
||||
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
const groupPrefixCls = `${prefixCls}-group`;
|
||||
|
||||
const groupCls = classNames(groupPrefixCls, hashId, className, {
|
||||
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${groupPrefixCls}-${shape}`]: shape,
|
||||
[`${groupPrefixCls}-${shape}-shadow`]: !trigger,
|
||||
});
|
||||
|
||||
const wrapperCls = classNames(hashId, `${groupPrefixCls}-wrap`);
|
||||
|
||||
const [open, setOpen] = useMergedState(false, { value: props.open });
|
||||
|
||||
const clickAction = useRef<React.HTMLAttributes<HTMLDivElement>>({});
|
||||
|
||||
const hoverAction = useRef<React.HTMLAttributes<HTMLDivElement>>({});
|
||||
|
||||
if (trigger === 'click') {
|
||||
clickAction.current = {
|
||||
onClick() {
|
||||
setOpen(prevState => {
|
||||
onOpenChange?.(!prevState);
|
||||
return !prevState;
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
if (trigger === 'hover') {
|
||||
hoverAction.current = {
|
||||
onMouseEnter() {
|
||||
setOpen(true);
|
||||
onOpenChange?.(true);
|
||||
},
|
||||
onMouseLeave() {
|
||||
setOpen(false);
|
||||
onOpenChange?.(false);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return wrapSSR(
|
||||
<FloatButtonGroupProvider value={shape}>
|
||||
<div className={groupCls} style={style} {...hoverAction.current}>
|
||||
{trigger && ['click', 'hover'].includes(trigger) ? (
|
||||
<>
|
||||
<CSSMotion visible={open} motionName={`${groupPrefixCls}-wrap`}>
|
||||
{({ className: motionClassName }) => (
|
||||
<div className={classNames(motionClassName, wrapperCls)}>{children}</div>
|
||||
)}
|
||||
</CSSMotion>
|
||||
<FloatButton
|
||||
type={type}
|
||||
shape={shape}
|
||||
icon={open ? closeIcon : icon}
|
||||
description={description}
|
||||
{...clickAction.current}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
</FloatButtonGroupProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(FloatButtonGroup);
|
||||
@ -0,0 +1,3 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`BackTop rtl render component should be rendered correctly in RTL direction 1`] = `null`;
|
||||
@ -0,0 +1,660 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/float-button/demo/back-top.md extend context correctly 1`] = `
|
||||
<div
|
||||
style="height: 500vh; padding: 10px;"
|
||||
>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/basic.md extend context correctly 1`] = `
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/description.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
style="right: 24px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-float-btn-description"
|
||||
>
|
||||
帮助文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
style="right: 94px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-description"
|
||||
>
|
||||
帮助文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
style="right: 164px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-float-btn-description"
|
||||
>
|
||||
文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/group.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
|
||||
style="right: 24px;"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
|
||||
style="right: 94px;"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="sync"
|
||||
class="anticon anticon-sync"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sync"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/group-menu.md extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/shape.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="margin: 20px;"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="circle"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
圆形
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="square"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
方形
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/tooltip.md extend context correctly 1`] = `
|
||||
<div>
|
||||
<span>
|
||||
查看右下角的 FloatButton
|
||||
</span>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast"
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
>
|
||||
<span
|
||||
class="ant-tooltip-arrow-content"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
>
|
||||
<div>
|
||||
帮助文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/type.md extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
style="right: 24px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
style="right: 94px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
@ -0,0 +1,634 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/float-button/demo/back-top.md correctly 1`] = `
|
||||
<div
|
||||
style="height: 500vh; padding: 10px;"
|
||||
>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
<div>
|
||||
Scroll to bottom
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/basic.md correctly 1`] = `
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/description.md correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
style="right: 24px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-float-btn-description"
|
||||
>
|
||||
帮助文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
style="right: 94px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-description"
|
||||
>
|
||||
帮助文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
style="right: 164px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-float-btn-description"
|
||||
>
|
||||
文档
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/group.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
|
||||
style="right: 24px;"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-square ant-float-btn-group-square-shadow"
|
||||
style="right: 94px;"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-square"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="sync"
|
||||
class="anticon anticon-sync"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sync"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/group-menu.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/shape.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="margin: 20px;"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="circle"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
圆形
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
type="radio"
|
||||
value="square"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
方形
|
||||
</span>
|
||||
</label>
|
||||
</div>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="customer-service"
|
||||
class="anticon anticon-customer-service"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="customer-service"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/tooltip.md correctly 1`] = `
|
||||
<div>
|
||||
<span>
|
||||
查看右下角的 FloatButton
|
||||
</span>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/float-button/demo/type.md correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
|
||||
style="right: 24px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
style="right: 94px;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="question-circle"
|
||||
class="anticon anticon-question-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="question-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
<path
|
||||
d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
@ -0,0 +1,116 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FloatButtonGroup should correct render 1`] = `
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,79 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FloatButton rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle ant-float-btn-rtl"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`FloatButton should correct render 1`] = `
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
47
components/float-button/__tests__/back-top.test.tsx
Normal file
47
components/float-button/__tests__/back-top.test.tsx
Normal file
@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import FloatButton from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { fireEvent, render, sleep } from '../../../tests/utils';
|
||||
|
||||
const { BackTop } = FloatButton;
|
||||
describe('BackTop', () => {
|
||||
mountTest(BackTop);
|
||||
rtlTest(BackTop);
|
||||
|
||||
it('should scroll to top after click it', async () => {
|
||||
const { container } = render(<BackTop visible visibilityHeight={-1} />);
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
|
||||
window.scrollY = y;
|
||||
window.pageYOffset = y;
|
||||
document.documentElement.scrollTop = y;
|
||||
});
|
||||
window.scrollTo(0, 400);
|
||||
expect(document.documentElement.scrollTop).toBe(400);
|
||||
fireEvent.click(container.querySelector('.ant-float-btn')!);
|
||||
await sleep(500);
|
||||
expect(document.documentElement.scrollTop).toBe(0);
|
||||
scrollToSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('support onClick', () => {
|
||||
const onClick = jest.fn();
|
||||
const { container } = render(<BackTop visible visibilityHeight={-1} onClick={onClick} />);
|
||||
const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => {
|
||||
window.scrollY = y;
|
||||
window.pageYOffset = y;
|
||||
});
|
||||
document.dispatchEvent(new Event('scroll'));
|
||||
window.scrollTo(0, 400);
|
||||
fireEvent.click(container.querySelector('.ant-float-btn')!);
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
scrollToSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('invalid target', () => {
|
||||
const onClick = jest.fn();
|
||||
const { container } = render(<BackTop onClick={onClick} visible target={undefined} />);
|
||||
fireEvent.click(container.querySelector('.ant-float-btn')!);
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
3
components/float-button/__tests__/demo-extend.test.ts
Normal file
3
components/float-button/__tests__/demo-extend.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { extendTest } from '../../../tests/shared/demoTest';
|
||||
|
||||
extendTest('float-button');
|
||||
3
components/float-button/__tests__/demo.test.ts
Normal file
3
components/float-button/__tests__/demo.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('float-button');
|
||||
61
components/float-button/__tests__/group.test.tsx
Normal file
61
components/float-button/__tests__/group.test.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import FloatButton from '..';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
|
||||
describe('FloatButtonGroup', () => {
|
||||
it('should correct render', () => {
|
||||
const { container } = render(
|
||||
<FloatButton.Group>
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('support shape', () => {
|
||||
const [defaultShape, squareShape] = ['circle', 'square'] as const;
|
||||
const { container, rerender } = render(
|
||||
<FloatButton.Group shape={defaultShape}>
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
expect(container.querySelectorAll(`.ant-float-btn-${defaultShape}`)).toHaveLength(3);
|
||||
rerender(
|
||||
<FloatButton.Group shape={squareShape}>
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
expect(container.querySelectorAll(`.ant-float-btn-${squareShape}`)).toHaveLength(3);
|
||||
});
|
||||
it('support onOpenChange for click', () => {
|
||||
const onOpenChange = jest.fn();
|
||||
const { container } = render(
|
||||
<FloatButton.Group trigger="click" onOpenChange={onOpenChange}>
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
fireEvent.click(container.querySelector('.ant-float-btn')!);
|
||||
expect(onOpenChange).toHaveBeenCalled();
|
||||
});
|
||||
it('support onOpenChange for hover', () => {
|
||||
const onOpenChange = jest.fn();
|
||||
const { container } = render(
|
||||
<FloatButton.Group trigger="hover" onOpenChange={onOpenChange}>
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
fireEvent.mouseEnter(container.querySelector('.ant-float-btn-group')!);
|
||||
fireEvent.mouseLeave(container.querySelector('.ant-float-btn-group')!);
|
||||
expect(onOpenChange).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
5
components/float-button/__tests__/image.test.ts
Normal file
5
components/float-button/__tests__/image.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { imageDemoTest } from '../../../tests/shared/imageTest';
|
||||
|
||||
describe('float-button image', () => {
|
||||
imageDemoTest('float-button');
|
||||
});
|
||||
54
components/float-button/__tests__/index.test.tsx
Normal file
54
components/float-button/__tests__/index.test.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import FloatButton from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { fireEvent, render } from '../../../tests/utils';
|
||||
|
||||
describe('FloatButton', () => {
|
||||
mountTest(FloatButton);
|
||||
rtlTest(FloatButton);
|
||||
it('should correct render', () => {
|
||||
const { container } = render(<FloatButton />);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
it('should render <button> when harf not exist', () => {
|
||||
const { container } = render(<FloatButton href={undefined} />);
|
||||
expect(container.querySelector('button')).toBeTruthy();
|
||||
});
|
||||
it('should render <a> when harf exist', () => {
|
||||
const url = 'https://ant.design/index-cn';
|
||||
const target = '_blank';
|
||||
const { container } = render(<FloatButton href={url} target={target} />);
|
||||
expect(container.querySelector('a')).toBeTruthy();
|
||||
expect(container.querySelector('a')?.href).toBe(url);
|
||||
expect(container.querySelector('a')?.target).toBe(target);
|
||||
});
|
||||
it('support type', () => {
|
||||
const [defaultType, primaryType] = ['default', 'primary'] as const;
|
||||
const { container, rerender } = render(<FloatButton type={defaultType} />);
|
||||
expect(container.querySelector(`.ant-float-btn-${defaultType}`)).toBeTruthy();
|
||||
rerender(<FloatButton type={primaryType} />);
|
||||
expect(container.querySelector(`.ant-float-btn-${primaryType}`)).toBeTruthy();
|
||||
});
|
||||
it('support shape', () => {
|
||||
const [defaultShape, squareShape] = ['circle', 'square'] as const;
|
||||
const { container, rerender } = render(<FloatButton shape={defaultShape} />);
|
||||
expect(container.querySelector(`.ant-float-btn-${defaultShape}`)).toBeTruthy();
|
||||
rerender(<FloatButton shape={squareShape} />);
|
||||
expect(container.querySelector(`.ant-float-btn-${squareShape}`)).toBeTruthy();
|
||||
});
|
||||
it('support onClick', () => {
|
||||
const onClick = jest.fn();
|
||||
const { container } = render(<FloatButton onClick={onClick} />);
|
||||
fireEvent.click(container.querySelector('.ant-float-btn')!);
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
it('should console Error', () => {
|
||||
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
render(<FloatButton description="test" shape="circle" />);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: FloatButton] supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.',
|
||||
);
|
||||
errSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
8
components/float-button/context.ts
Normal file
8
components/float-button/context.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react';
|
||||
import type { FloatButtonShape } from './interface';
|
||||
|
||||
const FloatButtonGroupContext = React.createContext<FloatButtonShape | null>(null);
|
||||
|
||||
export const { Provider: FloatButtonGroupProvider } = FloatButtonGroupContext;
|
||||
|
||||
export default FloatButtonGroupContext;
|
||||
35
components/float-button/demo/back-top.md
Normal file
35
components/float-button/demo/back-top.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
order: 7
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 回到顶部
|
||||
en-US: BackTop
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
返回页面顶部的操作按钮。
|
||||
|
||||
## en-US
|
||||
|
||||
`BackTop` makes it easy to go back to the top of the page.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div style={{ height: '500vh', padding: 10 }}>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<div>Scroll to bottom</div>
|
||||
<FloatButton.BackTop />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
24
components/float-button/demo/basic.md
Normal file
24
components/float-button/demo/basic.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
order: 0
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 基本
|
||||
en-US: Basic
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
最简单的用法。
|
||||
|
||||
## en-US
|
||||
|
||||
The most basic usage.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
|
||||
const App: React.FC = () => <FloatButton onClick={() => console.log('click')} />;
|
||||
|
||||
export default App;
|
||||
```
|
||||
45
components/float-button/demo/description.md
Normal file
45
components/float-button/demo/description.md
Normal file
@ -0,0 +1,45 @@
|
||||
---
|
||||
order: 3
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 描述
|
||||
en-US: Description
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以通过 `description` 设置文字内容。
|
||||
|
||||
> 仅当 `shape` 属性为 `square` 时支持。由于空间较小，推荐使用比较精简的双数文字。
|
||||
|
||||
## en-US
|
||||
|
||||
Setting `description` prop to show FloatButton with description.
|
||||
|
||||
> supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
import { FileTextOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<FloatButton
|
||||
icon={<FileTextOutlined />}
|
||||
description="帮助文档"
|
||||
shape="square"
|
||||
style={{ right: 24 }}
|
||||
/>
|
||||
<FloatButton description="帮助文档" shape="square" style={{ right: 94 }} />
|
||||
<FloatButton
|
||||
icon={<FileTextOutlined />}
|
||||
description="文档"
|
||||
shape="square"
|
||||
style={{ right: 164 }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
30
components/float-button/demo/group-menu.md
Normal file
30
components/float-button/demo/group-menu.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
order: 6
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 菜单模式
|
||||
en-US: Menu mode
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式
|
||||
|
||||
## en-US
|
||||
|
||||
Open menu mode with `trigger`, which could be `hover` or `click`.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<FloatButton.Group icon={<CustomerServiceOutlined />} type="primary" trigger="click">
|
||||
<FloatButton />
|
||||
<FloatButton icon={<CommentOutlined />} />
|
||||
</FloatButton.Group>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
39
components/float-button/demo/group.md
Normal file
39
components/float-button/demo/group.md
Normal file
@ -0,0 +1,39 @@
|
||||
---
|
||||
order: 5
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 浮动按钮组
|
||||
en-US: FloatButton Group
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
按钮组合使用时，推荐使用 `<FloatButton.Group />`，并通过设置 `shape` 属性改变悬浮按钮组的形状。悬浮按钮组的 `shape` 会覆盖内部 FloatButton 的 `shape` 属性。
|
||||
|
||||
## en-US
|
||||
|
||||
When multiple buttons are used together, `<FloatButton.Group />` is recommended. By setting `shape` of FloatButton.Group, you can change the shape of group. `shape` of FloatButton.Group will override `shape` of FloatButton inside.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
import { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<FloatButton.Group shape="circle" style={{ right: 24 }}>
|
||||
<FloatButton icon={<QuestionCircleOutlined />} />
|
||||
<FloatButton />
|
||||
<FloatButton.BackTop visibilityHeight={-1} />
|
||||
</FloatButton.Group>
|
||||
<FloatButton.Group shape="square" style={{ right: 94 }}>
|
||||
<FloatButton icon={<QuestionCircleOutlined />} />
|
||||
<FloatButton />
|
||||
<FloatButton icon={<SyncOutlined />} />
|
||||
<FloatButton.BackTop visibilityHeight={-1} />
|
||||
</FloatButton.Group>
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
40
components/float-button/demo/shape.md
Normal file
40
components/float-button/demo/shape.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
order: 2
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 形状
|
||||
en-US: Shape
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
你可以通过 `shape` 设置不同的形状
|
||||
|
||||
## en-US
|
||||
|
||||
Change the shape of the FloatButton with `shape`.
|
||||
|
||||
```tsx
|
||||
import React, { useState } from 'react';
|
||||
import { FloatButton, Radio } from 'antd';
|
||||
import type { RadioChangeEvent, FloatButtonProps } from 'antd';
|
||||
import { CustomerServiceOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [shape, setShape] = useState<FloatButtonProps['shape']>('circle');
|
||||
const onChange = (e: RadioChangeEvent) => {
|
||||
setShape(e.target.value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Radio.Group onChange={onChange} value={shape} style={{ margin: 20 }}>
|
||||
<Radio value="circle">圆形</Radio>
|
||||
<Radio value="square">方形</Radio>
|
||||
</Radio.Group>
|
||||
<FloatButton icon={<CustomerServiceOutlined />} type="primary" shape={shape} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
28
components/float-button/demo/tooltip.md
Normal file
28
components/float-button/demo/tooltip.md
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
order: 4
|
||||
title:
|
||||
zh-CN: 含有气泡卡片的悬浮按钮
|
||||
en-US: FloatButton with tooltip
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
设置 tooltip 属性，即可开启气泡卡片
|
||||
|
||||
## en-US
|
||||
|
||||
Setting `tooltip` prop to show FloatButton with tooltip.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div>
|
||||
<span>查看右下角的 FloatButton</span>
|
||||
<FloatButton tooltip={<div>帮助文档</div>} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
30
components/float-button/demo/type.md
Normal file
30
components/float-button/demo/type.md
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
order: 1
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 类型
|
||||
en-US: Type
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过 `type` 改变悬浮按钮的类型
|
||||
|
||||
## en-US
|
||||
|
||||
Change the type of the FloatButton with `type`.
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { FloatButton } from 'antd';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<FloatButton icon={<QuestionCircleOutlined />} type="primary" style={{ right: 24 }} />
|
||||
<FloatButton icon={<QuestionCircleOutlined />} type="default" style={{ right: 94 }} />
|
||||
</>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
46
components/float-button/index.en-US.md
Normal file
46
components/float-button/index.en-US.md
Normal file
@ -0,0 +1,46 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
title: FloatButton
|
||||
cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
|
||||
---
|
||||
|
||||
FloatButton. Available since `5.0.0`.
|
||||
|
||||
## When To Use
|
||||
|
||||
- For global functionality on the site.
|
||||
- Buttons that can be seen wherever you browse.
|
||||
|
||||
## API
|
||||
|
||||
### common API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| icon | Set the icon component of button | ReactNode | - | |
|
||||
| description | Text and other | ReactNode | - | |
|
||||
| tooltip | The text shown in the tooltip | ReactNode \| () => ReactNode | | |
|
||||
| type | Setting button type | `default` \| `primary` | `default` | |
|
||||
| shape | Setting button shape | `circle` \| `square` | `circle` | |
|
||||
| onClick | Set the handler to handle `click` event | (event) => void | - | |
|
||||
| href | The target of hyperlink | string | - | |
|
||||
| target | Specifies where to display the linked URL | string | - | |
|
||||
|
||||
### FloatButton.Group
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| shape | Setting button shape of children | `circle` \| `square` | `circle` | |
|
||||
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | |
|
||||
| open | Whether the menu is visible or not | boolean | - | |
|
||||
| onOpenChange | Callback executed when active menu is changed | (open: boolean) => void | - | |
|
||||
|
||||
### FloatButton.BackTop
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| duration | Time to return to top（ms） | number | 450 | |
|
||||
| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | |
|
||||
| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | |
|
||||
| onClick | A callback function, which can be executed when you click the button | () => void | - | |
|
||||
108
components/float-button/index.tsx
Normal file
108
components/float-button/index.tsx
Normal file
@ -0,0 +1,108 @@
|
||||
import classNames from 'classnames';
|
||||
import React, { useContext, useMemo } from 'react';
|
||||
import type { ConfigConsumerProps } from '../config-provider';
|
||||
import BackTop from './BackTop';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import useStyle from './style';
|
||||
import Tooltip from '../tooltip';
|
||||
import Content from './FloatButtonContent';
|
||||
import type {
|
||||
CompoundedComponent,
|
||||
FloatButtonContentProps,
|
||||
FloatButtonProps,
|
||||
FloatButtonShape,
|
||||
} from './interface';
|
||||
import Group from './FloatButtonGroup';
|
||||
import FloatButtonGroupContext from './context';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
export const floatButtonPrefixCls = 'float-btn';
|
||||
|
||||
const FloatButton: React.ForwardRefRenderFunction<
|
||||
HTMLAnchorElement | HTMLButtonElement,
|
||||
FloatButtonProps
|
||||
> = (props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
type = 'default',
|
||||
shape = 'circle',
|
||||
icon,
|
||||
description,
|
||||
tooltip,
|
||||
...restProps
|
||||
} = props;
|
||||
const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
|
||||
const groupShape = useContext<FloatButtonShape | null>(FloatButtonGroupContext);
|
||||
const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
|
||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||
|
||||
const mergeShape = groupShape || shape;
|
||||
|
||||
const classString = classNames(
|
||||
hashId,
|
||||
prefixCls,
|
||||
className,
|
||||
`${prefixCls}-${type}`,
|
||||
`${prefixCls}-${mergeShape}`,
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
);
|
||||
|
||||
const contentProps = useMemo<FloatButtonContentProps>(
|
||||
() => ({ prefixCls, description, icon, type }),
|
||||
[prefixCls, description, icon, type],
|
||||
);
|
||||
|
||||
const buttonNode = tooltip ? (
|
||||
<Tooltip title={tooltip} placement="left">
|
||||
<div className={`${prefixCls}-body`}>
|
||||
<Content {...contentProps} />
|
||||
</div>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<div className={`${prefixCls}-body`}>
|
||||
<Content {...contentProps} />
|
||||
</div>
|
||||
);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
!(shape === 'circle' && description),
|
||||
'FloatButton',
|
||||
'supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.',
|
||||
);
|
||||
}
|
||||
|
||||
return wrapSSR(
|
||||
props.href ? (
|
||||
<a ref={ref as React.LegacyRef<HTMLAnchorElement>} {...restProps} className={classString}>
|
||||
{buttonNode}
|
||||
</a>
|
||||
) : (
|
||||
<button
|
||||
ref={ref as React.LegacyRef<HTMLButtonElement>}
|
||||
{...restProps}
|
||||
className={classString}
|
||||
type="button"
|
||||
>
|
||||
{buttonNode}
|
||||
</button>
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
FloatButton.displayName = 'FloatButton';
|
||||
}
|
||||
|
||||
const ForwardFloatButton = React.forwardRef<
|
||||
HTMLAnchorElement | HTMLButtonElement,
|
||||
FloatButtonProps
|
||||
>(FloatButton) as CompoundedComponent;
|
||||
|
||||
ForwardFloatButton.Group = Group;
|
||||
ForwardFloatButton.BackTop = BackTop;
|
||||
|
||||
export default ForwardFloatButton;
|
||||
47
components/float-button/index.zh-CN.md
Normal file
47
components/float-button/index.zh-CN.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
category: Components
|
||||
type: 其他
|
||||
subtitle: 悬浮按钮
|
||||
title: FloatButton
|
||||
cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
|
||||
---
|
||||
|
||||
悬浮按钮。自 `5.0.0` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 用于网站上的全局功能；
|
||||
- 无论浏览到何处都可以看见的按钮。
|
||||
|
||||
## API
|
||||
|
||||
### 共同的 API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| icon | 自定义图标 | ReactNode | - | |
|
||||
| description | 文字及其它内容 | ReactNode | - | |
|
||||
| tooltip | 气泡卡片的内容 | ReactNode \| () => ReactNode | - | |
|
||||
| type | 设置按钮类型 | `default` \| `primary` | `default` | |
|
||||
| shape | 设置按钮形状 | `circle` \| `square` | `circle` | |
|
||||
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
||||
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
||||
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
||||
|
||||
### FloatButton.Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------ | -------------------------------- | ----------------------- | -------- | ---- |
|
||||
| shape | 设置包含的 FloatButton 按钮形状 | `circle` \| `square` | `circle` | |
|
||||
| trigger | 触发方式（有触发方式为菜单模式） | `click` \| `hover` | - | |
|
||||
| open | 受控展开 | boolean | - | |
|
||||
| onOpenChange | 展开收起时的回调 | (open: boolean) => void | - | |
|
||||
|
||||
### FloatButton.BackTop
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ---------------- | ---------------------------------- | ----------------- | ------------ | ---- |
|
||||
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
||||
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
||||
| onClick | 点击按钮的回调函数 | () => void | - | |
|
||||
63
components/float-button/interface.ts
Normal file
63
components/float-button/interface.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import type React from 'react';
|
||||
import type Group from './FloatButtonGroup';
|
||||
import type BackTop from './BackTop';
|
||||
import type { TooltipProps } from '../tooltip';
|
||||
|
||||
export type FloatButtonType = 'default' | 'primary';
|
||||
|
||||
export type FloatButtonShape = 'circle' | 'square';
|
||||
|
||||
export type FloatButtonGroupTrigger = 'click' | 'hover';
|
||||
|
||||
export interface FloatButtonProps {
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
icon?: React.ReactNode;
|
||||
description?: React.ReactNode;
|
||||
type?: FloatButtonType;
|
||||
shape?: FloatButtonShape;
|
||||
tooltip?: TooltipProps['title'];
|
||||
href?: string;
|
||||
target?: React.HTMLAttributeAnchorTarget;
|
||||
onClick?: React.MouseEventHandler<HTMLElement>;
|
||||
}
|
||||
|
||||
export interface FloatButtonContentProps extends React.DOMAttributes<HTMLDivElement> {
|
||||
className?: string;
|
||||
icon?: FloatButtonProps['icon'];
|
||||
description?: FloatButtonProps['description'];
|
||||
prefixCls: FloatButtonProps['prefixCls'];
|
||||
}
|
||||
|
||||
export interface FloatButtonGroupProps extends FloatButtonProps {
|
||||
// 包含的 Float Button
|
||||
children: React.ReactNode;
|
||||
// 触发方式 (有触发方式为菜单模式）
|
||||
trigger?: FloatButtonGroupTrigger;
|
||||
// 受控展开
|
||||
open?: boolean;
|
||||
// 关闭按钮自定义图标
|
||||
closeIcon?: React.ReactNode;
|
||||
// 展开收起的回调
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export interface BackTopProps extends Omit<FloatButtonProps, 'target'> {
|
||||
visibilityHeight?: number;
|
||||
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
||||
target?: () => HTMLElement | Window | Document;
|
||||
prefixCls?: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
duration?: number;
|
||||
visible?: boolean; // Only for test. Don't use it.
|
||||
}
|
||||
|
||||
export type CompoundedComponent = React.ForwardRefExoticComponent<
|
||||
FloatButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>
|
||||
> & {
|
||||
Group: typeof Group;
|
||||
BackTop: typeof BackTop;
|
||||
};
|
||||
299
components/float-button/style/index.tsx
Normal file
299
components/float-button/style/index.tsx
Normal file
@ -0,0 +1,299 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { FullToken, GenerateStyle } from '../../theme';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme';
|
||||
import { resetComponent } from '../../style';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
}
|
||||
|
||||
type FloatButtonToken = FullToken<'FloatButton'> & {
|
||||
floatButtonColor: string;
|
||||
floatButtonBackgroundColor: string;
|
||||
floatButtonHoverBackgroundColor: string;
|
||||
floatButtonFontSize: number;
|
||||
floatButtonSize: number;
|
||||
floatButtonIconSize: number;
|
||||
|
||||
// Position
|
||||
floatButtonInsetBlockEnd: number;
|
||||
floatButtonInsetInlineEnd: number;
|
||||
};
|
||||
|
||||
// ============================== Group ==============================
|
||||
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => {
|
||||
const { componentCls, floatButtonSize, margin, radiusBase, motionDurationSlow } = token;
|
||||
const groupPrefixCls = `${componentCls}-group`;
|
||||
const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
|
||||
'0%': {
|
||||
transform: `translate3d(0, ${floatButtonSize}px, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
const moveDownOut = new Keyframes('antFloatButtonMoveDownOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
'100%': {
|
||||
transform: `translate3d(0, ${floatButtonSize}px, 0)`,
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
return {
|
||||
[groupPrefixCls]: {
|
||||
...resetComponent(token),
|
||||
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,
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
zIndex: -1,
|
||||
display: 'block',
|
||||
position: 'relative',
|
||||
marginBottom: margin,
|
||||
},
|
||||
'&&-rtl': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
[componentCls]: {
|
||||
position: 'static',
|
||||
},
|
||||
},
|
||||
[`${groupPrefixCls}-circle`]: {
|
||||
[`${componentCls}-circle:not(:last-child)`]: {
|
||||
marginBottom: token.margin,
|
||||
[`${componentCls}-body`]: {
|
||||
width: floatButtonSize,
|
||||
height: floatButtonSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
[`${groupPrefixCls}-square`]: {
|
||||
[`${componentCls}-square`]: {
|
||||
borderRadius: 0,
|
||||
padding: 0,
|
||||
'&:first-child': {
|
||||
borderStartStartRadius: radiusBase,
|
||||
borderStartEndRadius: radiusBase,
|
||||
},
|
||||
'&:last-child': {
|
||||
borderEndStartRadius: radiusBase,
|
||||
borderEndEndRadius: radiusBase,
|
||||
},
|
||||
'&:not(:last-child)': {
|
||||
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
},
|
||||
},
|
||||
[`${groupPrefixCls}-wrap`]: {
|
||||
display: 'block',
|
||||
borderRadius: radiusBase,
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
overflow: 'hidden',
|
||||
[`${componentCls}-square`]: {
|
||||
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: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
|
||||
},
|
||||
[`${componentCls}-body`]: {
|
||||
width: floatButtonSize - token.paddingXXS * 2,
|
||||
height: floatButtonSize - token.paddingXXS * 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
[`${groupPrefixCls}-wrap-enter,${groupPrefixCls}-wrap-enter-active`]: {
|
||||
animationName: moveDownIn,
|
||||
animationDuration: motionDurationSlow,
|
||||
},
|
||||
[`${groupPrefixCls}-wrap-leave`]: {
|
||||
animationName: moveDownOut,
|
||||
animationDuration: motionDurationSlow,
|
||||
},
|
||||
|
||||
[`${groupPrefixCls}-circle-shadow`]: {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
[`${groupPrefixCls}-square-shadow`]: {
|
||||
boxShadow: token.boxShadowSecondary,
|
||||
[`${componentCls}-square`]: {
|
||||
boxShadow: 'none',
|
||||
padding: token.paddingXXS,
|
||||
[`${componentCls}-body`]: {
|
||||
width: floatButtonSize - token.paddingXXS * 2,
|
||||
height: floatButtonSize - token.paddingXXS * 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Shared ==============================
|
||||
const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = token => {
|
||||
const { componentCls, floatButtonIconSize, floatButtonSize } = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
...resetComponent(token),
|
||||
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',
|
||||
},
|
||||
[`${componentCls}-body`]: {
|
||||
width: floatButtonSize,
|
||||
height: floatButtonSize,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
[`${componentCls}-content`]: {
|
||||
overflow: 'hidden',
|
||||
textAlign: 'center',
|
||||
minHeight: floatButtonSize,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: `2px 4px`,
|
||||
[`${componentCls}-icon`]: {
|
||||
textAlign: 'center',
|
||||
margin: 'auto',
|
||||
width: floatButtonIconSize,
|
||||
fontSize: floatButtonIconSize,
|
||||
lineHeight: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[`${componentCls}-circle`]: {
|
||||
height: floatButtonSize,
|
||||
borderRadius: '50%',
|
||||
[`${componentCls}-body`]: {
|
||||
borderRadius: '50%',
|
||||
},
|
||||
},
|
||||
[`${componentCls}-square`]: {
|
||||
height: 'auto',
|
||||
minHeight: floatButtonSize,
|
||||
borderRadius: token.radiusBase,
|
||||
[`${componentCls}-body`]: {
|
||||
height: 'auto',
|
||||
borderRadius: token.radiusSM,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-default`]: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
[`${componentCls}-body`]: {
|
||||
backgroundColor: token.colorBgContainer,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorFillContent,
|
||||
},
|
||||
[`${componentCls}-content`]: {
|
||||
[`${componentCls}-icon`]: {
|
||||
color: token.colorText,
|
||||
},
|
||||
[`${componentCls}-description`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
lineHeight: `${token.fontSizeLG}px`,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSizeSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[`${componentCls}-primary`]: {
|
||||
backgroundColor: token.colorPrimary,
|
||||
[`${componentCls}-body`]: {
|
||||
backgroundColor: token.colorPrimary,
|
||||
transition: `background-color ${token.motionDurationFast}`,
|
||||
'&:hover': {
|
||||
backgroundColor: token.colorPrimaryHover,
|
||||
},
|
||||
[`${componentCls}-content`]: {
|
||||
[`${componentCls}-icon`]: {
|
||||
color: token.colorTextLightSolid,
|
||||
},
|
||||
[`${componentCls}-description`]: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
lineHeight: `${token.fontSizeLG}px`,
|
||||
color: token.colorTextLightSolid,
|
||||
fontSize: token.fontSizeSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook<'FloatButton'>('FloatButton', token => {
|
||||
const {
|
||||
colorTextLightSolid,
|
||||
colorBgContainer,
|
||||
controlHeightLG,
|
||||
marginXXL,
|
||||
marginLG,
|
||||
fontSize,
|
||||
fontSizeIcon,
|
||||
controlItemBgHover,
|
||||
} = token;
|
||||
const floatButtonToken = mergeToken<FloatButtonToken>(token, {
|
||||
floatButtonBackgroundColor: colorBgContainer,
|
||||
floatButtonColor: colorTextLightSolid,
|
||||
floatButtonHoverBackgroundColor: controlItemBgHover,
|
||||
floatButtonFontSize: fontSize,
|
||||
floatButtonIconSize: fontSizeIcon * 1.5,
|
||||
floatButtonSize: controlHeightLG,
|
||||
|
||||
floatButtonInsetBlockEnd: marginXXL,
|
||||
floatButtonInsetInlineEnd: marginLG,
|
||||
});
|
||||
return [floatButtonGroupStyle(floatButtonToken), sharedFloatButtonStyle(floatButtonToken)];
|
||||
});
|
||||
@ -26,6 +26,8 @@ export { default as AutoComplete } from './auto-complete';
|
||||
export type { AutoCompleteProps } from './auto-complete';
|
||||
export { default as Avatar } from './avatar';
|
||||
export type { AvatarProps } from './avatar';
|
||||
export { default as FloatButton } from './float-button';
|
||||
export type { FloatButtonProps } from './float-button/interface';
|
||||
export { default as BackTop } from './back-top';
|
||||
export type { BackTopProps } from './back-top';
|
||||
export { default as Badge } from './badge';
|
||||
|
||||
@ -4,6 +4,7 @@ import type { ComponentToken as AnchorComponentToken } from '../anchor/style';
|
||||
import type { ComponentToken as AvatarComponentToken } from '../avatar/style';
|
||||
import type { ComponentToken as BackTopComponentToken } from '../back-top/style';
|
||||
import type { ComponentToken as ButtonComponentToken } from '../button/style';
|
||||
import type { ComponentToken as FloatButtonComponentToken } from '../float-button/style';
|
||||
import type { ComponentToken as CalendarComponentToken } from '../calendar/style';
|
||||
import type { ComponentToken as CarouselComponentToken } from '../carousel/style';
|
||||
import type { ComponentToken as CascaderComponentToken } from '../cascader/style';
|
||||
@ -88,6 +89,7 @@ export interface ComponentTokenMap {
|
||||
Drawer?: DrawerComponentToken;
|
||||
Dropdown?: DropdownComponentToken;
|
||||
Empty?: EmptyComponentToken;
|
||||
FloatButton?: FloatButtonComponentToken;
|
||||
Form?: {};
|
||||
Grid?: {};
|
||||
Image?: ImageComponentToken;
|
||||
|
||||
@ -330,7 +330,7 @@
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"maxSize": "370 kB"
|
||||
"maxSize": "372 kB"
|
||||
}
|
||||
],
|
||||
"tnpm": {
|
||||
|
||||
@ -25,6 +25,7 @@ Array [
|
||||
"Drawer",
|
||||
"Dropdown",
|
||||
"Empty",
|
||||
"FloatButton",
|
||||
"Form",
|
||||
"Grid",
|
||||
"Image",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user