mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
Merge pull request #23758 from ant-design/feature
chore: Merge feature into master
This commit is contained in:
二货机器人
GitHub
commit
e1299bfcc9
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext, ConfigConsumerProps } from '../config-provider';
|
||||
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
||||
|
||||
import {
|
||||
@ -50,9 +50,7 @@ export interface AffixState {
|
||||
}
|
||||
|
||||
class Affix extends React.Component<AffixProps, AffixState> {
|
||||
static defaultProps = {
|
||||
target: getDefaultTarget,
|
||||
};
|
||||
static contextType = ConfigContext;
|
||||
|
||||
state: AffixState = {
|
||||
status: AffixStatus.None,
|
||||
@ -66,14 +64,27 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
|
||||
private timeout: number;
|
||||
|
||||
context: ConfigConsumerProps;
|
||||
|
||||
private getTargetFunc() {
|
||||
const { getTargetContainer } = this.context;
|
||||
const { target } = this.props;
|
||||
|
||||
if (target !== undefined) {
|
||||
return target;
|
||||
}
|
||||
|
||||
return getTargetContainer || getDefaultTarget;
|
||||
}
|
||||
|
||||
// Event handler
|
||||
componentDidMount() {
|
||||
const { target } = this.props;
|
||||
if (target) {
|
||||
const targetFunc = this.getTargetFunc();
|
||||
if (targetFunc) {
|
||||
// [Legacy] Wait for parent component ref has its value.
|
||||
// We should use target as directly element instead of function which makes element check hard.
|
||||
this.timeout = setTimeout(() => {
|
||||
addObserveTarget(target(), this);
|
||||
addObserveTarget(targetFunc(), this);
|
||||
// Mock Event object.
|
||||
this.updatePosition();
|
||||
});
|
||||
@ -82,10 +93,10 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
|
||||
componentDidUpdate(prevProps: AffixProps) {
|
||||
const { prevTarget } = this.state;
|
||||
const { target } = this.props;
|
||||
const targetFunc = this.getTargetFunc();
|
||||
let newTarget = null;
|
||||
if (target) {
|
||||
newTarget = target() || null;
|
||||
if (targetFunc) {
|
||||
newTarget = targetFunc() || null;
|
||||
}
|
||||
|
||||
if (prevTarget !== newTarget) {
|
||||
@ -141,15 +152,16 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
// =================== Measure ===================
|
||||
measure = () => {
|
||||
const { status, lastAffix } = this.state;
|
||||
const { target, onChange } = this.props;
|
||||
if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !target) {
|
||||
const { onChange } = this.props;
|
||||
const targetFunc = this.getTargetFunc();
|
||||
if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !targetFunc) {
|
||||
return;
|
||||
}
|
||||
|
||||
const offsetTop = this.getOffsetTop();
|
||||
const offsetBottom = this.getOffsetBottom();
|
||||
|
||||
const targetNode = target();
|
||||
const targetNode = targetFunc();
|
||||
if (!targetNode) {
|
||||
return;
|
||||
}
|
||||
@ -220,15 +232,15 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
|
||||
@throttleByAnimationFrameDecorator()
|
||||
lazyUpdatePosition() {
|
||||
const { target } = this.props;
|
||||
const targetFunc = this.getTargetFunc();
|
||||
const { affixStyle } = this.state;
|
||||
|
||||
// Check position change before measure to make Safari smooth
|
||||
if (target && affixStyle) {
|
||||
if (targetFunc && affixStyle) {
|
||||
const offsetTop = this.getOffsetTop();
|
||||
const offsetBottom = this.getOffsetBottom();
|
||||
|
||||
const targetNode = target();
|
||||
const targetNode = targetFunc();
|
||||
if (targetNode && this.placeholderNode) {
|
||||
const targetRect = getTargetRect(targetNode);
|
||||
const placeholderReact = getTargetRect(this.placeholderNode);
|
||||
@ -249,7 +261,8 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
}
|
||||
|
||||
// =================== Render ===================
|
||||
renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
render = () => {
|
||||
const { getPrefixCls } = this.context;
|
||||
const { affixStyle, placeholderStyle } = this.state;
|
||||
const { prefixCls, children } = this.props;
|
||||
const className = classNames({
|
||||
@ -283,10 +296,6 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
</ResizeObserver>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return <ConfigConsumer>{this.renderAffix}</ConfigConsumer>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Affix;
|
||||
|
||||
@ -26,3 +26,9 @@ ReactDOM.render(
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="compact"] .code-box-demo .ant-alert {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
|
||||
&&-no-icon {
|
||||
padding: @alert-no-icon-padding-vertical 15px;
|
||||
.@{alert-prefix-cls}-close-icon {
|
||||
top: @alert-no-icon-padding-vertical + @font-size-base * @line-height-base / 2 -
|
||||
@font-size-base / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&&-closable {
|
||||
@ -21,14 +25,14 @@
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
top: @alert-icon-top;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
display: none;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @font-size-base + 8px;
|
||||
}
|
||||
|
||||
&-success {
|
||||
@ -71,12 +75,12 @@
|
||||
|
||||
&-close-icon {
|
||||
position: absolute;
|
||||
top: @padding-xs;
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
right: 16px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
font-size: @font-size-sm;
|
||||
line-height: 22px;
|
||||
line-height: @font-size-sm;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
@ -101,7 +105,7 @@
|
||||
|
||||
&-with-description {
|
||||
position: relative;
|
||||
padding: 15px 15px 15px 64px;
|
||||
padding: @alert-with-description-padding;
|
||||
color: @alert-text-color;
|
||||
line-height: @line-height-base;
|
||||
border-radius: @border-radius-base;
|
||||
@ -113,15 +117,15 @@
|
||||
|
||||
&-with-description &-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 24px;
|
||||
font-size: 24px;
|
||||
top: @alert-with-description-icon-top;
|
||||
left: @alert-with-description-icon-size;
|
||||
font-size: @alert-with-description-icon-size;
|
||||
}
|
||||
|
||||
&-with-description &-close-icon {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
top: @padding-xs;
|
||||
right: @padding-xs;
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import Affix from '../affix';
|
||||
import AnchorLink from './AnchorLink';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext, ConfigConsumerProps } from '../config-provider';
|
||||
import scrollTo from '../_util/scrollTo';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import AnchorContext from './context';
|
||||
|
||||
function getDefaultContainer() {
|
||||
return window;
|
||||
@ -88,23 +88,22 @@ export interface AntAnchor {
|
||||
) => void;
|
||||
}
|
||||
|
||||
export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
export default class Anchor extends React.Component<AnchorProps, AnchorState, ConfigConsumerProps> {
|
||||
static Link: typeof AnchorLink;
|
||||
|
||||
static defaultProps = {
|
||||
affix: true,
|
||||
showInkInFixed: false,
|
||||
getContainer: getDefaultContainer,
|
||||
};
|
||||
|
||||
static childContextTypes = {
|
||||
antAnchor: PropTypes.object,
|
||||
};
|
||||
static contextType = ConfigContext;
|
||||
|
||||
state = {
|
||||
activeLink: null,
|
||||
};
|
||||
|
||||
content: ConfigConsumerProps;
|
||||
|
||||
private inkNode: HTMLSpanElement;
|
||||
|
||||
// scroll scope's container
|
||||
@ -118,37 +117,38 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
|
||||
private prefixCls?: string;
|
||||
|
||||
getChildContext() {
|
||||
const antAnchor: AntAnchor = {
|
||||
registerLink: (link: string) => {
|
||||
if (!this.links.includes(link)) {
|
||||
this.links.push(link);
|
||||
}
|
||||
},
|
||||
unregisterLink: (link: string) => {
|
||||
const index = this.links.indexOf(link);
|
||||
if (index !== -1) {
|
||||
this.links.splice(index, 1);
|
||||
}
|
||||
},
|
||||
activeLink: this.state.activeLink,
|
||||
scrollTo: this.handleScrollTo,
|
||||
onClick: this.props.onClick,
|
||||
};
|
||||
return { antAnchor };
|
||||
}
|
||||
// Context
|
||||
registerLink = (link: string) => {
|
||||
if (!this.links.includes(link)) {
|
||||
this.links.push(link);
|
||||
}
|
||||
};
|
||||
|
||||
unregisterLink = (link: string) => {
|
||||
const index = this.links.indexOf(link);
|
||||
if (index !== -1) {
|
||||
this.links.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
getContainer = () => {
|
||||
const { getTargetContainer } = this.context;
|
||||
const { getContainer } = this.props;
|
||||
|
||||
const getFunc = getContainer || getTargetContainer || getDefaultContainer;
|
||||
|
||||
return getFunc();
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { getContainer } = this.props as AnchorDefaultProps;
|
||||
this.scrollContainer = getContainer();
|
||||
this.scrollContainer = this.getContainer();
|
||||
this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (this.scrollEvent) {
|
||||
const { getContainer } = this.props as AnchorDefaultProps;
|
||||
const currentContainer = getContainer();
|
||||
const currentContainer = this.getContainer();
|
||||
if (this.scrollContainer !== currentContainer) {
|
||||
this.scrollContainer = currentContainer;
|
||||
this.scrollEvent.remove();
|
||||
@ -178,8 +178,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
}
|
||||
|
||||
const linkSections: Array<Section> = [];
|
||||
const { getContainer } = this.props as AnchorDefaultProps;
|
||||
const container = getContainer();
|
||||
const container = this.getContainer();
|
||||
this.links.forEach(link => {
|
||||
const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
|
||||
if (!sharpLinkMatch) {
|
||||
@ -205,10 +204,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
}
|
||||
|
||||
handleScrollTo = (link: string) => {
|
||||
const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps;
|
||||
const { offsetTop, targetOffset } = this.props;
|
||||
|
||||
this.setCurrentActiveLink(link);
|
||||
const container = getContainer();
|
||||
const container = this.getContainer();
|
||||
const scrollTop = getScroll(container, true);
|
||||
const sharpLinkMatch = sharpMatcherRegx.exec(link);
|
||||
if (!sharpLinkMatch) {
|
||||
@ -228,7 +227,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
callback: () => {
|
||||
this.animating = false;
|
||||
},
|
||||
getContainer,
|
||||
getContainer: this.getContainer,
|
||||
});
|
||||
};
|
||||
|
||||
@ -274,7 +273,9 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
}
|
||||
};
|
||||
|
||||
renderAnchor = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
render = () => {
|
||||
const { getPrefixCls, direction } = this.context;
|
||||
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className = '',
|
||||
@ -283,7 +284,6 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
affix,
|
||||
showInkInFixed,
|
||||
children,
|
||||
getContainer,
|
||||
} = this.props;
|
||||
const { activeLink } = this.state;
|
||||
|
||||
@ -322,16 +322,24 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
|
||||
</div>
|
||||
);
|
||||
|
||||
return !affix ? (
|
||||
anchorContent
|
||||
) : (
|
||||
<Affix offsetTop={offsetTop} target={getContainer}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
return (
|
||||
<AnchorContext.Provider
|
||||
value={{
|
||||
registerLink: this.registerLink,
|
||||
unregisterLink: this.unregisterLink,
|
||||
activeLink: this.state.activeLink,
|
||||
scrollTo: this.handleScrollTo,
|
||||
onClick: this.props.onClick,
|
||||
}}
|
||||
>
|
||||
{!affix ? (
|
||||
anchorContent
|
||||
) : (
|
||||
<Affix offsetTop={offsetTop} target={this.getContainer}>
|
||||
{anchorContent}
|
||||
</Affix>
|
||||
)}
|
||||
</AnchorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return <ConfigConsumer>{this.renderAnchor}</ConfigConsumer>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { AntAnchor } from './Anchor';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import AnchorContext from './context';
|
||||
|
||||
export interface AnchorLinkProps {
|
||||
prefixCls?: string;
|
||||
@ -13,37 +13,33 @@ export interface AnchorLinkProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
class AnchorLink extends React.Component<AnchorLinkProps, any, AntAnchor> {
|
||||
static defaultProps = {
|
||||
href: '#',
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
antAnchor: PropTypes.object,
|
||||
};
|
||||
static contextType = AnchorContext;
|
||||
|
||||
context: {
|
||||
antAnchor: AntAnchor;
|
||||
};
|
||||
context: AntAnchor;
|
||||
|
||||
componentDidMount() {
|
||||
this.context.antAnchor.registerLink(this.props.href);
|
||||
this.context.registerLink(this.props.href);
|
||||
}
|
||||
|
||||
componentDidUpdate({ href: prevHref }: AnchorLinkProps) {
|
||||
const { href } = this.props;
|
||||
if (prevHref !== href) {
|
||||
this.context.antAnchor.unregisterLink(prevHref);
|
||||
this.context.antAnchor.registerLink(href);
|
||||
this.context.unregisterLink(prevHref);
|
||||
this.context.registerLink(href);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.context.antAnchor.unregisterLink(this.props.href);
|
||||
this.context.unregisterLink(this.props.href);
|
||||
}
|
||||
|
||||
handleClick = (e: React.MouseEvent<HTMLElement>) => {
|
||||
const { scrollTo, onClick } = this.context.antAnchor;
|
||||
const { scrollTo, onClick } = this.context;
|
||||
const { href, title } = this.props;
|
||||
if (onClick) {
|
||||
onClick(e, { title, href });
|
||||
@ -54,7 +50,7 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
|
||||
const prefixCls = getPrefixCls('anchor', customizePrefixCls);
|
||||
const active = this.context.antAnchor.activeLink === href;
|
||||
const active = this.context.activeLink === href;
|
||||
const wrapperClassName = classNames(className, `${prefixCls}-link`, {
|
||||
[`${prefixCls}-link-active`]: active,
|
||||
});
|
||||
|
||||
6
components/anchor/context.ts
Normal file
6
components/anchor/context.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
import { AntAnchor } from './Anchor';
|
||||
|
||||
const AnchorContext = React.createContext<AntAnchor>(null as any);
|
||||
|
||||
export default AnchorContext;
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
&-link {
|
||||
padding: 7px 0 7px 16px;
|
||||
padding: @anchor-link-padding;
|
||||
line-height: 1.143;
|
||||
|
||||
&-title {
|
||||
|
||||
@ -263,7 +263,5 @@ describe('Button', () => {
|
||||
throw new Error('Should not called!!!');
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('Button').instance()).toBe(null);
|
||||
});
|
||||
});
|
||||
|
||||
@ -104,16 +104,18 @@ export type NativeButtonProps = {
|
||||
|
||||
export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
|
||||
|
||||
interface ButtonTypeProps extends React.FC<ButtonProps> {
|
||||
interface CompoundedComponent
|
||||
extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
|
||||
Group: typeof Group;
|
||||
__ANT_BUTTON: boolean;
|
||||
}
|
||||
|
||||
const Button: ButtonTypeProps = ({ ...props }) => {
|
||||
const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
|
||||
const size = React.useContext(SizeContext);
|
||||
const [loading, setLoading] = React.useState(props.loading);
|
||||
const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
|
||||
const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
|
||||
const buttonRef = React.createRef<HTMLButtonElement>();
|
||||
const buttonRef = (ref as any) || React.createRef<HTMLElement>();
|
||||
let delayTimeout: number;
|
||||
|
||||
const isNeedInserted = () => {
|
||||
@ -162,116 +164,107 @@ const Button: ButtonTypeProps = ({ ...props }) => {
|
||||
(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
|
||||
}
|
||||
};
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
type,
|
||||
danger,
|
||||
shape,
|
||||
size: customizeSize,
|
||||
className,
|
||||
children,
|
||||
icon,
|
||||
ghost,
|
||||
block,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<SizeContext.Consumer>
|
||||
{size => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
type,
|
||||
danger,
|
||||
shape,
|
||||
size: customizeSize,
|
||||
className,
|
||||
children,
|
||||
icon,
|
||||
ghost,
|
||||
block,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
warning(
|
||||
!(typeof icon === 'string' && icon.length > 2),
|
||||
'Button',
|
||||
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
|
||||
);
|
||||
|
||||
warning(
|
||||
(type as string) !== 'danger',
|
||||
'Button',
|
||||
`\`type="danger"\` is deprecated. Please use \`danger\`.`,
|
||||
);
|
||||
|
||||
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
||||
const autoInsertSpace = autoInsertSpaceInButton !== false;
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
let sizeCls = '';
|
||||
switch (customizeSize || size) {
|
||||
case 'large':
|
||||
sizeCls = 'lg';
|
||||
break;
|
||||
case 'small':
|
||||
sizeCls = 'sm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const iconType = loading ? 'loading' : icon;
|
||||
|
||||
const classes = classNames(prefixCls, className, {
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${shape}`]: shape,
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
|
||||
[`${prefixCls}-background-ghost`]: ghost,
|
||||
[`${prefixCls}-loading`]: loading,
|
||||
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
|
||||
[`${prefixCls}-block`]: block,
|
||||
[`${prefixCls}-dangerous`]: !!danger,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
const iconNode =
|
||||
icon && !loading ? (
|
||||
icon
|
||||
) : (
|
||||
<LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={loading} />
|
||||
);
|
||||
|
||||
const kids =
|
||||
children || children === 0
|
||||
? spaceChildren(children, isNeedInserted() && autoInsertSpace)
|
||||
: null;
|
||||
|
||||
const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
|
||||
if (linkButtonRestProps.href !== undefined) {
|
||||
return (
|
||||
<a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
|
||||
{iconNode}
|
||||
{kids}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
|
||||
const { htmlType, ...otherProps } = rest as NativeButtonProps;
|
||||
|
||||
const buttonNode = (
|
||||
<button
|
||||
{...(omit(otherProps, ['loading']) as NativeButtonProps)}
|
||||
type={htmlType}
|
||||
className={classes}
|
||||
onClick={handleClick}
|
||||
ref={buttonRef}
|
||||
>
|
||||
{iconNode}
|
||||
{kids}
|
||||
</button>
|
||||
);
|
||||
|
||||
if (type === 'link') {
|
||||
return buttonNode;
|
||||
}
|
||||
|
||||
return <Wave>{buttonNode}</Wave>;
|
||||
}}
|
||||
</SizeContext.Consumer>
|
||||
warning(
|
||||
!(typeof icon === 'string' && icon.length > 2),
|
||||
'Button',
|
||||
`\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
|
||||
);
|
||||
|
||||
const prefixCls = getPrefixCls('btn', customizePrefixCls);
|
||||
const autoInsertSpace = autoInsertSpaceInButton !== false;
|
||||
|
||||
// large => lg
|
||||
// small => sm
|
||||
let sizeCls = '';
|
||||
switch (customizeSize || size) {
|
||||
case 'large':
|
||||
sizeCls = 'lg';
|
||||
break;
|
||||
case 'small':
|
||||
sizeCls = 'sm';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const iconType = loading ? 'loading' : icon;
|
||||
|
||||
const classes = classNames(prefixCls, className, {
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${shape}`]: shape,
|
||||
[`${prefixCls}-${sizeCls}`]: sizeCls,
|
||||
[`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
|
||||
[`${prefixCls}-background-ghost`]: ghost,
|
||||
[`${prefixCls}-loading`]: loading,
|
||||
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
|
||||
[`${prefixCls}-block`]: block,
|
||||
[`${prefixCls}-dangerous`]: !!danger,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
const iconNode =
|
||||
icon && !loading ? (
|
||||
icon
|
||||
) : (
|
||||
<LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={loading} />
|
||||
);
|
||||
|
||||
const kids =
|
||||
children || children === 0
|
||||
? spaceChildren(children, isNeedInserted() && autoInsertSpace)
|
||||
: null;
|
||||
|
||||
const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
|
||||
if (linkButtonRestProps.href !== undefined) {
|
||||
return (
|
||||
<a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
|
||||
{iconNode}
|
||||
{kids}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
|
||||
const { htmlType, ...otherProps } = rest as NativeButtonProps;
|
||||
|
||||
const buttonNode = (
|
||||
<button
|
||||
{...(omit(otherProps, ['loading']) as NativeButtonProps)}
|
||||
type={htmlType}
|
||||
className={classes}
|
||||
onClick={handleClick}
|
||||
ref={buttonRef}
|
||||
>
|
||||
{iconNode}
|
||||
{kids}
|
||||
</button>
|
||||
);
|
||||
|
||||
if (type === 'link') {
|
||||
return buttonNode;
|
||||
}
|
||||
|
||||
return <Wave>{buttonNode}</Wave>;
|
||||
};
|
||||
|
||||
const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
|
||||
|
||||
Button.displayName = 'Button';
|
||||
|
||||
Button.defaultProps = {
|
||||
loading: false,
|
||||
ghost: false,
|
||||
|
||||
@ -942,7 +942,7 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
|
||||
exports[`Calendar rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-picker-calendar ant-picker-calendar-full"
|
||||
class="ant-picker-calendar ant-picker-calendar-full ant-picker-calendar-rtl"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-calendar-header"
|
||||
|
||||
@ -98,7 +98,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
onPanelChange,
|
||||
onSelect,
|
||||
} = props;
|
||||
const { getPrefixCls } = React.useContext(ConfigContext);
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const prefixCls = getPrefixCls('picker', customizePrefixCls);
|
||||
const calendarPrefixCls = `${prefixCls}-calendar`;
|
||||
const today = generateConfig.getNow();
|
||||
@ -239,6 +239,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
className={classNames(calendarPrefixCls, className, {
|
||||
[`${calendarPrefixCls}-full`]: fullscreen,
|
||||
[`${calendarPrefixCls}-mini`]: !fullscreen,
|
||||
[`${calendarPrefixCls}-rtl`]: direction === 'rtl',
|
||||
})}
|
||||
style={style}
|
||||
>
|
||||
|
||||
@ -14,7 +14,6 @@
|
||||
justify-content: flex-end;
|
||||
padding: @padding-sm 0;
|
||||
|
||||
|
||||
.@{calendar-prefix-cls}-year-select {
|
||||
min-width: 80px;
|
||||
}
|
||||
@ -190,3 +189,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
44
components/calendar/style/rtl.less
Normal file
44
components/calendar/style/rtl.less
Normal file
@ -0,0 +1,44 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
|
||||
@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
|
||||
|
||||
.@{calendar-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-header {
|
||||
.@{calendar-prefix-cls}-month-select {
|
||||
.@{calendar-prefix-cls}-rtl & {
|
||||
margin-right: @padding-xs;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-mode-switch {
|
||||
.@{calendar-prefix-cls}-rtl & {
|
||||
margin-right: @padding-xs;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Full ==========================
|
||||
&-full {
|
||||
.@{calendar-picker-prefix-cls}-panel {
|
||||
.@{calendar-prefix-cls}-rtl& {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.@{calendar-picker-prefix-cls}-body {
|
||||
th {
|
||||
.@{calendar-prefix-cls}-rtl& {
|
||||
padding: 0 0 5px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -166,7 +166,7 @@
|
||||
display: block;
|
||||
min-width: 32px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -171,7 +171,7 @@
|
||||
display: inline-block;
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-right: @checkbox-group-item-margin-right;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
padding: @collapse-header-padding;
|
||||
padding-left: @collapse-header-padding-extra;
|
||||
color: @heading-color;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
.clearfix;
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: @padding-md;
|
||||
left: @collapse-header-arrow-left;
|
||||
display: inline-block;
|
||||
font-size: @font-size-sm;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@ -12358,9 +12358,8 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
|
||||
class="config-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="config-input-number-handler config-input-number-handler-up "
|
||||
class="config-input-number-handler config-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12386,9 +12385,8 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="config-input-number-handler config-input-number-handler-down "
|
||||
class="config-input-number-handler config-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12438,9 +12436,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
|
||||
class="config-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="config-input-number-handler config-input-number-handler-up "
|
||||
class="config-input-number-handler config-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12466,9 +12463,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="config-input-number-handler config-input-number-handler-down "
|
||||
class="config-input-number-handler config-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12518,9 +12514,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
|
||||
class="config-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="config-input-number-handler config-input-number-handler-up "
|
||||
class="config-input-number-handler config-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12546,9 +12541,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="config-input-number-handler config-input-number-handler-down "
|
||||
class="config-input-number-handler config-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12598,9 +12592,8 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12626,9 +12619,8 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12678,9 +12670,8 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
|
||||
class="prefix-InputNumber-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="prefix-InputNumber-handler prefix-InputNumber-handler-up "
|
||||
class="prefix-InputNumber-handler prefix-InputNumber-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -12706,9 +12697,8 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="prefix-InputNumber-handler prefix-InputNumber-handler-down "
|
||||
class="prefix-InputNumber-handler prefix-InputNumber-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
|
||||
@ -3,6 +3,7 @@ import { mount } from 'enzyme';
|
||||
import ConfigProvider from '..';
|
||||
import Button from '../../button';
|
||||
import Table from '../../table';
|
||||
import Input from '../../input';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
describe('ConfigProvider', () => {
|
||||
@ -54,4 +55,14 @@ describe('ConfigProvider', () => {
|
||||
|
||||
expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
|
||||
});
|
||||
|
||||
it('input autoComplete', () => {
|
||||
const wrapper = mount(
|
||||
<ConfigProvider input={{ autoComplete: 'off' }}>
|
||||
<Input />
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
expect(wrapper.find('input').props().autoComplete).toEqual('off');
|
||||
});
|
||||
});
|
||||
|
||||
41
components/config-provider/__tests__/target.test.js
Normal file
41
components/config-provider/__tests__/target.test.js
Normal file
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import ConfigProvider from '..';
|
||||
import Affix from '../../affix';
|
||||
import Anchor from '../../anchor';
|
||||
|
||||
describe('ConfigProvider.getTargetContainer', () => {
|
||||
it('Affix', () => {
|
||||
jest.useFakeTimers();
|
||||
const getTargetContainer = jest.fn(() => window);
|
||||
mount(
|
||||
<ConfigProvider getTargetContainer={getTargetContainer}>
|
||||
<Affix>
|
||||
<span />
|
||||
</Affix>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(getTargetContainer).toHaveBeenCalled();
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('Anchor', () => {
|
||||
jest.useFakeTimers();
|
||||
const getTargetContainer = jest.fn(() => window);
|
||||
mount(
|
||||
<ConfigProvider getTargetContainer={getTargetContainer}>
|
||||
<Anchor>
|
||||
<Anchor.Link href="#API" title="API" />
|
||||
</Anchor>
|
||||
</ConfigProvider>,
|
||||
);
|
||||
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(getTargetContainer).toHaveBeenCalled();
|
||||
jest.useRealTimers();
|
||||
});
|
||||
});
|
||||
@ -8,12 +8,16 @@ export interface CSPConfig {
|
||||
}
|
||||
|
||||
export interface ConfigConsumerProps {
|
||||
getTargetContainer?: () => HTMLElement;
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
rootPrefixCls?: string;
|
||||
getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
|
||||
renderEmpty: RenderEmptyHandler;
|
||||
csp?: CSPConfig;
|
||||
autoInsertSpaceInButton?: boolean;
|
||||
input?: {
|
||||
autoComplete?: string;
|
||||
};
|
||||
locale?: Locale;
|
||||
pageHeader?: {
|
||||
ghost: boolean;
|
||||
|
||||
@ -47,7 +47,7 @@ const FormSizeDemo = () => {
|
||||
<Input />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Input.Search />
|
||||
<Input.Search allowClear />
|
||||
</div>
|
||||
<div className="example">
|
||||
<Select defaultValue="demo" options={[{ value: 'demo' }]} />
|
||||
|
||||
@ -41,8 +41,10 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
||||
| componentSize | Config antd component size | `small` \| `middle` \| `large` | - | |
|
||||
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | |
|
||||
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |
|
||||
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
|
||||
| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | Function(componentName: string): ReactNode | - | |
|
||||
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | |
|
||||
| getTargetContainer | Config Affix, Anchor scroll target container. | () => HTMLElement | () => window | 4.2.0 |
|
||||
| locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | |
|
||||
| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant | |
|
||||
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' | |
|
||||
|
||||
@ -13,6 +13,7 @@ import { SizeType, SizeContextProvider } from './SizeContext';
|
||||
export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, ConfigConsumerProps };
|
||||
|
||||
export const configConsumerProps = [
|
||||
'getTargetContainer',
|
||||
'getPopupContainer',
|
||||
'rootPrefixCls',
|
||||
'getPrefixCls',
|
||||
@ -24,6 +25,7 @@ export const configConsumerProps = [
|
||||
];
|
||||
|
||||
export interface ConfigProviderProps {
|
||||
getTargetContainer?: () => HTMLElement;
|
||||
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
||||
prefixCls?: string;
|
||||
children?: React.ReactNode;
|
||||
@ -33,6 +35,9 @@ export interface ConfigProviderProps {
|
||||
form?: {
|
||||
validateMessages?: ValidateMessages;
|
||||
};
|
||||
input?: {
|
||||
autoComplete?: string;
|
||||
};
|
||||
locale?: Locale;
|
||||
pageHeader?: {
|
||||
ghost: boolean;
|
||||
@ -60,11 +65,13 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||
renderProvider = (context: ConfigConsumerProps, legacyLocale: Locale) => {
|
||||
const {
|
||||
children,
|
||||
getTargetContainer,
|
||||
getPopupContainer,
|
||||
renderEmpty,
|
||||
csp,
|
||||
autoInsertSpaceInButton,
|
||||
form,
|
||||
input,
|
||||
locale,
|
||||
pageHeader,
|
||||
componentSize,
|
||||
@ -82,6 +89,10 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||
space,
|
||||
};
|
||||
|
||||
if (getTargetContainer) {
|
||||
config.getTargetContainer = getTargetContainer;
|
||||
}
|
||||
|
||||
if (getPopupContainer) {
|
||||
config.getPopupContainer = getPopupContainer;
|
||||
}
|
||||
@ -94,6 +105,10 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
|
||||
config.pageHeader = pageHeader;
|
||||
}
|
||||
|
||||
if (input) {
|
||||
config.input = input;
|
||||
}
|
||||
|
||||
let childNode = children;
|
||||
|
||||
// Additional Form provider
|
||||
|
||||
@ -42,8 +42,10 @@ return (
|
||||
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
|
||||
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
|
||||
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |
|
||||
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
|
||||
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - | |
|
||||
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | |
|
||||
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
|
||||
| locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | |
|
||||
| prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant | |
|
||||
| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' | |
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
@import './panel';
|
||||
|
||||
@picker-prefix-cls: ~'@{ant-prefix}-picker';
|
||||
@picker-text-height: 40px;
|
||||
|
||||
.picker-padding(@input-height, @font-size, @padding-horizontal) {
|
||||
// font height probably 22.0001， So use floor better
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
|
||||
.@{picker-prefix-cls} {
|
||||
@picker-arrow-size: 7px;
|
||||
@picker-panel-width: 280px;
|
||||
@picker-year-month-cell-width: 60px;
|
||||
@picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;
|
||||
|
||||
&-panel {
|
||||
display: inline-block;
|
||||
@ -162,7 +162,7 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
height: 24px;
|
||||
height: @picker-panel-cell-height;
|
||||
transform: translateY(-50%);
|
||||
content: '';
|
||||
}
|
||||
@ -172,9 +172,9 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
min-width: @picker-panel-cell-height;
|
||||
height: @picker-panel-cell-height;
|
||||
line-height: @picker-panel-cell-height;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background @animation-duration-slow, border @animation-duration-slow;
|
||||
}
|
||||
@ -378,7 +378,7 @@
|
||||
&-quarter-panel,
|
||||
&-month-panel {
|
||||
.@{picker-prefix-cls}-content {
|
||||
height: 265px;
|
||||
height: @picker-panel-without-time-cell-height * 4;
|
||||
}
|
||||
|
||||
.@{picker-cell-inner-cls} {
|
||||
@ -540,10 +540,10 @@
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-content {
|
||||
width: 36px * 7;
|
||||
width: @picker-panel-cell-width * 7;
|
||||
|
||||
th {
|
||||
width: 36px;
|
||||
width: @picker-panel-cell-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -99,9 +99,9 @@
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
min-width: @picker-panel-cell-height;
|
||||
height: @picker-panel-cell-height;
|
||||
line-height: @picker-panel-cell-height;
|
||||
border-radius: @border-radius-base;
|
||||
transition: background @animation-duration-slow, border @animation-duration-slow;
|
||||
}
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
&-row {
|
||||
> th,
|
||||
> td {
|
||||
padding-bottom: @padding-md;
|
||||
padding-bottom: @descriptions-item-padding-bottom;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
@ -1,83 +1,59 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
style="height:2px;background-color:#7cb305"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-dashed"
|
||||
role="separator"
|
||||
style="border-color:#7cb305"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical"
|
||||
role="separator"
|
||||
style="height:60px;background-color:#7cb305"
|
||||
/>
|
||||
/>,
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical ant-divider-dashed"
|
||||
role="separator"
|
||||
style="height:60px;border-color:#7cb305"
|
||||
/>
|
||||
</div>
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-dashed"
|
||||
role="separator"
|
||||
/>
|
||||
/>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</div>
|
||||
</p>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
|
||||
<div>
|
||||
Text
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical"
|
||||
role="separator"
|
||||
/>
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical"
|
||||
role="separator"
|
||||
/>
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
|
||||
<div>
|
||||
exports[`renders ./components/divider/demo/plain.md correctly 1`] = `
|
||||
Array [
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-center"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
@ -85,12 +61,12 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
|
||||
>
|
||||
Text
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
@ -98,12 +74,12 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
|
||||
>
|
||||
Left Text
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-right"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-plain"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
@ -111,9 +87,80 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
|
||||
>
|
||||
Right Text
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</div>
|
||||
</p>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
|
||||
Array [
|
||||
"Text",
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical"
|
||||
role="separator"
|
||||
/>,
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Link
|
||||
</a>,
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical"
|
||||
role="separator"
|
||||
/>,
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
Link
|
||||
</a>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
|
||||
Array [
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Text
|
||||
</span>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Left Text
|
||||
</span>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
class="ant-divider-inner-text"
|
||||
>
|
||||
Right Text
|
||||
</span>
|
||||
</div>,
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>,
|
||||
]
|
||||
`;
|
||||
|
||||
@ -18,12 +18,12 @@ Use `style` to change default style.
|
||||
import { Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Divider style={{ height: 2, backgroundColor: '#7cb305' }} />
|
||||
<Divider style={{ borderColor: '#7cb305' }} dashed />
|
||||
<Divider type="vertical" style={{ height: 60, backgroundColor: '#7cb305' }} />
|
||||
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -17,7 +17,7 @@ Divider is `horizontal` by default. You can add text within Divider.
|
||||
import { Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
@ -32,7 +32,7 @@ ReactDOM.render(
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
47
components/divider/demo/plain.md
Normal file
47
components/divider/demo/plain.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
order: 2
|
||||
title:
|
||||
zh-CN: 分割文字使用正文样式
|
||||
en-US: Text without heading style
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `plain` 可以设置为更轻量的分割文字样式。
|
||||
|
||||
## en-US
|
||||
|
||||
You can use non-heading style of divider text by setting `plain`.
|
||||
|
||||
```jsx
|
||||
import { Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<Divider plain>Text</Divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<Divider orientation="left" plain>
|
||||
Left Text
|
||||
</Divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<Divider orientation="right" plain>
|
||||
Right Text
|
||||
</Divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 2
|
||||
order: 3
|
||||
title:
|
||||
zh-CN: 垂直分割线
|
||||
en-US: Vertical
|
||||
@ -17,13 +17,13 @@ Use `type="vertical"` make it vertical.
|
||||
import { Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
Text
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Link</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="#">Link</a>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -17,7 +17,7 @@ Divider with inner title, set `orientation="left/right"` to align it.
|
||||
import { Divider } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
@ -37,7 +37,7 @@ ReactDOM.render(
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
category: Components
|
||||
type: Other
|
||||
title: Divider
|
||||
cols: 1
|
||||
---
|
||||
|
||||
A divider line separates different content.
|
||||
@ -23,3 +22,4 @@ A divider line separates different content.
|
||||
| orientation | position of title inside divider | `left` \| `right` \| `center` | `center` | |
|
||||
| style | style object of container | CSSProperties | - | |
|
||||
| type | direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
|
||||
| plain | divider text show as plain style | boolean | true | 4.2.0 |
|
||||
|
||||
@ -10,6 +10,7 @@ export interface DividerProps {
|
||||
children?: React.ReactNode;
|
||||
dashed?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
plain?: boolean;
|
||||
}
|
||||
|
||||
const Divider: React.FC<DividerProps> = props => (
|
||||
@ -22,13 +23,17 @@ const Divider: React.FC<DividerProps> = props => (
|
||||
className,
|
||||
children,
|
||||
dashed,
|
||||
plain,
|
||||
...restProps
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('divider', customizePrefixCls);
|
||||
const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
|
||||
const hasChildren = !!children;
|
||||
const classString = classNames(className, prefixCls, `${prefixCls}-${type}`, {
|
||||
[`${prefixCls}-with-text${orientationPrefix}`]: children,
|
||||
[`${prefixCls}-with-text`]: hasChildren,
|
||||
[`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
|
||||
[`${prefixCls}-dashed`]: !!dashed,
|
||||
[`${prefixCls}-plain`]: !!plain,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
return (
|
||||
|
||||
@ -14,10 +14,11 @@ subtitle: 分割线
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ---------------- | ----------------------------- | ------------ | ---- |
|
||||
| className | 分割线样式类 | string | - | |
|
||||
| dashed | 是否虚线 | boolean | false | |
|
||||
| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | |
|
||||
| style | 分割线样式对象 | CSSProperties | - | |
|
||||
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | -------------------------- | ----------------------------- | ------------ | ----- |
|
||||
| className | 分割线样式类 | string | - | |
|
||||
| dashed | 是否虚线 | boolean | false | |
|
||||
| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | |
|
||||
| style | 分割线样式对象 | CSSProperties | - | |
|
||||
| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |
|
||||
| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
|
||||
|
||||
@ -28,9 +28,7 @@
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-center,
|
||||
&-horizontal&-with-text-left,
|
||||
&-horizontal&-with-text-right {
|
||||
&-horizontal&-with-text {
|
||||
display: table;
|
||||
margin: 16px 0;
|
||||
color: @heading-color;
|
||||
@ -51,14 +49,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left,
|
||||
&-horizontal&-with-text-right {
|
||||
.@{divider-prefix-cls}-inner-text {
|
||||
display: inline-block;
|
||||
padding: 0 @divider-text-padding;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-left {
|
||||
&::before {
|
||||
top: 50%;
|
||||
@ -93,9 +83,7 @@
|
||||
border-width: 1px 0 0;
|
||||
}
|
||||
|
||||
&-horizontal&-with-text-center&-dashed,
|
||||
&-horizontal&-with-text-left&-dashed,
|
||||
&-horizontal&-with-text-right&-dashed {
|
||||
&-horizontal&-with-text&-dashed {
|
||||
border-top: 0;
|
||||
&::before,
|
||||
&::after {
|
||||
@ -106,6 +94,12 @@
|
||||
&-vertical&-dashed {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
|
||||
&-plain&-with-text {
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -16,31 +16,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
|
||||
```jsx
|
||||
import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
|
||||
|
||||
const pStyle = {
|
||||
fontSize: 16,
|
||||
lineHeight: '24px',
|
||||
display: 'block',
|
||||
marginBottom: 16,
|
||||
};
|
||||
|
||||
const DescriptionItem = ({ title, content }) => (
|
||||
<div
|
||||
className="site-description-item-profile-wrapper"
|
||||
style={{
|
||||
fontSize: 14,
|
||||
lineHeight: '22px',
|
||||
marginBottom: 7,
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="site-description-item-profile-p"
|
||||
style={{
|
||||
marginRight: 8,
|
||||
display: 'inline-block',
|
||||
}}
|
||||
>
|
||||
{title}:
|
||||
</p>
|
||||
<div className="site-description-item-profile-wrapper">
|
||||
<p className="site-description-item-profile-p-label">{title}:</p>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
@ -99,12 +77,10 @@ class App extends React.Component {
|
||||
onClose={this.onClose}
|
||||
visible={this.state.visible}
|
||||
>
|
||||
<p className="site-description-item-profile-p" style={{ ...pStyle, marginBottom: 24 }}>
|
||||
<p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
|
||||
User Profile
|
||||
</p>
|
||||
<p className="site-description-item-profile-p" style={pStyle}>
|
||||
Personal
|
||||
</p>
|
||||
<p className="site-description-item-profile-p">Personal</p>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<DescriptionItem title="Full Name" content="Lily" />
|
||||
@ -138,9 +114,7 @@ class App extends React.Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<p className="site-description-item-profile-p" style={pStyle}>
|
||||
Company
|
||||
</p>
|
||||
<p className="site-description-item-profile-p">Company</p>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<DescriptionItem title="Position" content="Programmer" />
|
||||
@ -166,9 +140,7 @@ class App extends React.Component {
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<p className="site-description-item-profile-p" style={pStyle}>
|
||||
Contacts
|
||||
</p>
|
||||
<p className="site-description-item-profile-p">Contacts</p>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<DescriptionItem title="Email" content="AntDesign@example.com" />
|
||||
@ -201,8 +173,32 @@ ReactDOM.render(<App />, mountNode);
|
||||
```css
|
||||
.site-description-item-profile-wrapper {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.site-description-item-profile-p {
|
||||
|
||||
[data-theme='compact'] .site-description-item-profile-wrapper {
|
||||
font-size: 12px;
|
||||
line-height: 1.66667;
|
||||
}
|
||||
|
||||
.ant-drawer-body p.site-description-item-profile-p {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 16px;
|
||||
line-height: 1.5715;
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
|
||||
font-size: 14px;
|
||||
line-height: 1.66667;
|
||||
}
|
||||
|
||||
.site-description-item-profile-p-label {
|
||||
margin-right: 8px;
|
||||
display: inline-block;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
```
|
||||
|
||||
@ -29,16 +29,13 @@ function handleMenuClick(e) {
|
||||
|
||||
const menu = (
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">
|
||||
<UserOutlined />
|
||||
<Menu.Item key="1" icon={<UserOutlined />}>
|
||||
1st menu item
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<UserOutlined />
|
||||
<Menu.Item key="2" icon={<UserOutlined />}>
|
||||
2nd menu item
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<UserOutlined />
|
||||
<Menu.Item key="3" icon={<UserOutlined />}>
|
||||
3rd item
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
|
||||
@ -30,15 +30,7 @@ const menu = (
|
||||
<Menu.Item key="01">Option 0</Menu.Item>
|
||||
<Menu.Item key="02">Option 0</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<MailOutlined />
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
|
||||
<Menu.ItemGroup key="g1" title="Item 1">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
@ -48,15 +40,7 @@ const menu = (
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
@ -64,15 +48,7 @@ const menu = (
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub4"
|
||||
title={
|
||||
<span>
|
||||
<SettingOutlined />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<Menu.Item key="11">Option 11</Menu.Item>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
.@{empty-prefix-cls} {
|
||||
margin: 0 8px;
|
||||
font-size: @empty-font-size;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
|
||||
&-image {
|
||||
|
||||
@ -1764,9 +1764,8 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -1792,9 +1791,8 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -3161,9 +3159,8 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -3189,9 +3186,8 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -4039,9 +4035,8 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -4067,9 +4062,8 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -6075,9 +6069,8 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -6103,9 +6096,8 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -6493,9 +6485,8 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -6521,9 +6512,8 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
|
||||
@ -73,9 +73,11 @@ Form field component for data bidirectional binding, validation, layout, and so
|
||||
| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | |
|
||||
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string\|ReactNode | - | |
|
||||
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | |
|
||||
| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
|
||||
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | |
|
||||
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | - | |
|
||||
| htmlFor | Set sub label `htmlFor` | string | - | |
|
||||
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
|
||||
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
|
||||
| label | Label text | string\|ReactNode | - | |
|
||||
| labelAlign | text align of label | `left` \| `right` | `right` | |
|
||||
@ -89,7 +91,7 @@ Form field component for data bidirectional binding, validation, layout, and so
|
||||
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false | |
|
||||
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - | |
|
||||
| validateTrigger | When to validate the value of children node | string \| string[] | onChange | |
|
||||
| valuePropName | Props of children node, for example, the prop of Switch is 'checked' | string | 'value' | |
|
||||
| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | 'value' | |
|
||||
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | |
|
||||
|
||||
After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
|
||||
@ -316,6 +318,13 @@ Components inside Form.Item with name property will turn into controlled mode, t
|
||||
|
||||
`resetFields` will re-mount component under Field to clean up customize component side effect(like asyn data, cached state, etc.). It's by design.
|
||||
|
||||
### Difference between Form initialValues and Item initialValue?
|
||||
|
||||
In most case, we always recommend to use Form `initialValues`. Use Item `initialValue` only when dynamic field usage. Priority follow the rules:
|
||||
|
||||
1. Form `initialValues` is the first priority
|
||||
2. Field `initialValue` is secondary \*. Not work when multiple Item with same `name` setting the `initialValue`
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
|
||||
@ -74,9 +74,11 @@ const validateMessages = {
|
||||
| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - | |
|
||||
| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | - | |
|
||||
| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | |
|
||||
| getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
|
||||
| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |
|
||||
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | - | |
|
||||
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | |
|
||||
| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
|
||||
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | |
|
||||
| label | `label` 标签的文本 | string\|ReactNode | - | |
|
||||
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
|
||||
@ -90,7 +92,7 @@ const validateMessages = {
|
||||
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false | |
|
||||
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
|
||||
| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange | |
|
||||
| valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' | |
|
||||
| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | 'value' | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准。 | [object](/components/grid/#Col) | - | |
|
||||
|
||||
被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
|
||||
@ -317,6 +319,13 @@ validator(rule, value, callback) => {
|
||||
|
||||
`resetFields` 会重置整个 Field，因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用（例如异步数据、状态等等）。
|
||||
|
||||
### Form 的 initialValues 与 Item 的 initialValue 区别？
|
||||
|
||||
在大部分场景下，我们总是推荐优先使用 Form 的 `initialValues`。只有存在动态字段时你才应该使用 Item 的 `initialValue`。默认值遵循以下规则：
|
||||
|
||||
1. Form 的 `initialValues` 拥有最高优先级
|
||||
2. Field 的 `initialValue` 次之 \*. 多个同 `name` Item 都设置 `initialValue` 时，则 Item 的 `initialValue` 不生效
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
|
||||
@ -74,7 +74,7 @@ Array [
|
||||
exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -109,7 +109,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -144,7 +144,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -179,7 +179,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -214,7 +214,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -254,7 +254,7 @@ Array [
|
||||
exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -305,7 +305,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -356,7 +356,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -439,7 +439,7 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
|
||||
exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -466,7 +466,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -493,7 +493,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -525,7 +525,7 @@ Array [
|
||||
exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -581,7 +581,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -637,7 +637,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
style="color:#333;font-weight:normal"
|
||||
>
|
||||
@ -1231,14 +1231,4 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col"
|
||||
>
|
||||
Current break point:
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `null`;
|
||||
|
||||
@ -12,23 +12,23 @@ title: useBreakpoint Hook
|
||||
Use `useBreakpoint` Hook povide personalized layout.
|
||||
|
||||
```jsx
|
||||
import { Row, Col, Grid } from 'antd';
|
||||
import { Grid, Tag } from 'antd';
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
function UseBreakpointDemo() {
|
||||
const screens = useBreakpoint();
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col>
|
||||
Current break point:
|
||||
{Object.entries(screens)
|
||||
.filter(screen => !!screen[1])
|
||||
.map(screen => screen[0])
|
||||
.join(' ')}
|
||||
</Col>
|
||||
</Row>
|
||||
<>
|
||||
Current break point:{' '}
|
||||
{Object.entries(screens)
|
||||
.filter(screen => !!screen[1])
|
||||
.map(screen => (
|
||||
<Tag color="blue" key={screen[0]}>
|
||||
{screen[0]}
|
||||
</Tag>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -8,9 +8,8 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -36,9 +35,8 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -91,9 +89,8 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -119,9 +116,8 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -176,7 +172,7 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -204,7 +200,7 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
|
||||
<span
|
||||
aria-disabled="true"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -272,9 +268,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -300,9 +295,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -378,9 +372,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -437,9 +430,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -465,9 +457,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -517,9 +508,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -545,9 +535,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -597,9 +586,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -625,9 +613,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
|
||||
@ -8,9 +8,8 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -36,9 +35,8 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
|
||||
@ -217,7 +217,11 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
resolveOnChange(this.input, e, this.props.onChange);
|
||||
};
|
||||
|
||||
renderInput = (prefixCls: string, size?: SizeType) => {
|
||||
renderInput = (
|
||||
prefixCls: string,
|
||||
size: SizeType | undefined,
|
||||
input: ConfigConsumerProps['input'] = {},
|
||||
) => {
|
||||
const { className, addonBefore, addonAfter, size: customizeSize, disabled } = this.props;
|
||||
// Fix https://fb.me/react-unknown-prop
|
||||
const otherProps = omit(this.props, [
|
||||
@ -236,6 +240,7 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
]);
|
||||
return (
|
||||
<input
|
||||
autoComplete={input.autoComplete}
|
||||
{...otherProps}
|
||||
onChange={this.handleChange}
|
||||
onFocus={this.onFocus}
|
||||
@ -280,11 +285,12 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
}
|
||||
};
|
||||
|
||||
renderComponent = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
|
||||
renderComponent = ({ getPrefixCls, direction, input }: ConfigConsumerProps) => {
|
||||
const { value, focused } = this.state;
|
||||
const { prefixCls: customizePrefixCls } = this.props;
|
||||
const prefixCls = getPrefixCls('input', customizePrefixCls);
|
||||
this.direction = direction;
|
||||
|
||||
return (
|
||||
<SizeContext.Consumer>
|
||||
{size => (
|
||||
@ -294,7 +300,7 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
prefixCls={prefixCls}
|
||||
inputType="input"
|
||||
value={fixControlledValue(value)}
|
||||
element={this.renderInput(prefixCls, size)}
|
||||
element={this.renderInput(prefixCls, size, input)}
|
||||
handleReset={this.handleReset}
|
||||
ref={this.saveClearableInput}
|
||||
direction={direction}
|
||||
|
||||
@ -24,15 +24,9 @@ describe('Input.Password', () => {
|
||||
const wrapper = mount(<Input.Password />);
|
||||
wrapper.find('input').simulate('change', { target: { value: '111' } });
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -54,32 +48,13 @@ describe('Input.Password', () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="111" autoFocus />, {
|
||||
attachTo: document.body,
|
||||
});
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode());
|
||||
document.activeElement.setSelectionRange(2, 2);
|
||||
expect(document.activeElement.selectionStart).toBe(2);
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mousedown');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('mouseup');
|
||||
wrapper
|
||||
.find('.ant-input-password-icon')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(document.activeElement).toBe(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at(0)
|
||||
.getDOMNode(),
|
||||
);
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('mousedown');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('mouseup');
|
||||
wrapper.find('.ant-input-password-icon').at(0).simulate('click');
|
||||
expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode());
|
||||
expect(document.activeElement.selectionStart).toBe(2);
|
||||
wrapper.unmount();
|
||||
});
|
||||
@ -92,13 +67,7 @@ describe('Input.Password', () => {
|
||||
.at('0')
|
||||
.simulate('change', { target: { value: 'value' } });
|
||||
await sleep();
|
||||
expect(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.getDOMNode()
|
||||
.getAttribute('value'),
|
||||
).toBeFalsy();
|
||||
expect(wrapper.find('input').at('0').getDOMNode().getAttribute('value')).toBeFalsy();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/20541
|
||||
@ -117,12 +86,6 @@ describe('Input.Password', () => {
|
||||
it('should not contain value attribute in input element with defautValue', async () => {
|
||||
const wrapper = mount(<Input.Password defaultValue="value" />);
|
||||
await sleep();
|
||||
expect(
|
||||
wrapper
|
||||
.find('input')
|
||||
.at('0')
|
||||
.getDOMNode()
|
||||
.getAttribute('value'),
|
||||
).toBeFalsy();
|
||||
expect(wrapper.find('input').at('0').getDOMNode().getAttribute('value')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -357,9 +357,8 @@ Array [
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -385,9 +384,8 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -1288,9 +1286,8 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
@ -1316,9 +1313,8 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
|
||||
@ -134,6 +134,35 @@
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{search-rtl-cls} & {
|
||||
margin-right: 0.5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
.@{search-rtl-cls} & {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{search-rtl-cls} & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
border-right: @border-width-base @border-style-base @input-border-color;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-enter-button) {
|
||||
.@{search-rtl-cls}& {
|
||||
padding-right: @input-padding-horizontal-base;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-enter-button {
|
||||
input {
|
||||
.@{search-rtl-cls}& {
|
||||
|
||||
@ -5,14 +5,61 @@
|
||||
|
||||
@search-prefix: ~'@{ant-prefix}-input-search';
|
||||
|
||||
.searchInputIcon(@input-height, @font-size) {
|
||||
.@{search-prefix}-icon {
|
||||
@horizontal-padding: (@input-height - @font-size) / 2;
|
||||
padding: 0 @horizontal-padding;
|
||||
|
||||
&::before {
|
||||
transform: translateX(-@horizontal-padding - @border-width-base);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: @input-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchInputIcon(@input-height-base, @font-size-base);
|
||||
|
||||
.@{ant-prefix}-input-affix-wrapper-lg {
|
||||
.searchInputIcon(@input-height-lg, @font-size-lg);
|
||||
}
|
||||
.@{ant-prefix}-input-affix-wrapper-sm {
|
||||
.searchInputIcon(@input-height-sm, @font-size-sm);
|
||||
}
|
||||
|
||||
.@{search-prefix} {
|
||||
&-icon {
|
||||
margin-left: 0.5em;
|
||||
color: @text-color-secondary;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&:hover {
|
||||
color: @input-icon-hover-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
border-left: @border-width-base @border-style-base @input-border-color;
|
||||
transition: all 0.3s;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&:not(&-enter-button) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-enter-button {
|
||||
|
||||
@ -485,9 +485,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 1
|
||||
</span>
|
||||
</li>
|
||||
@ -516,9 +514,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 2
|
||||
</span>
|
||||
</li>
|
||||
@ -547,9 +543,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 3
|
||||
</span>
|
||||
</li>
|
||||
@ -578,9 +572,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 4
|
||||
</span>
|
||||
</li>
|
||||
@ -609,9 +601,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 5
|
||||
</span>
|
||||
</li>
|
||||
@ -640,9 +630,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 6
|
||||
</span>
|
||||
</li>
|
||||
@ -671,9 +659,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 7
|
||||
</span>
|
||||
</li>
|
||||
@ -702,9 +688,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 8
|
||||
</span>
|
||||
</li>
|
||||
@ -877,9 +861,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 1
|
||||
</span>
|
||||
</li>
|
||||
@ -908,9 +890,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 2
|
||||
</span>
|
||||
</li>
|
||||
@ -939,9 +919,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 3
|
||||
</span>
|
||||
</li>
|
||||
@ -970,9 +948,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
<span>
|
||||
nav 4
|
||||
</span>
|
||||
</li>
|
||||
@ -1095,30 +1071,28 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1137,30 +1111,28 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="team"
|
||||
class="anticon anticon-team"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="team"
|
||||
class="anticon anticon-team"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="team"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="team"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M824.2 699.9a301.55 301.55 0 00-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 01612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 008-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 01612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Team
|
||||
</span>
|
||||
<path
|
||||
d="M824.2 699.9a301.55 301.55 0 00-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 01612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 008-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 01612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Team
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1193,6 +1165,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -1632,27 +1605,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
subnav 1
|
||||
</span>
|
||||
<i
|
||||
@ -1705,27 +1678,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="laptop"
|
||||
class="anticon anticon-laptop"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="laptop"
|
||||
class="anticon anticon-laptop"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="laptop"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="laptop"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
subnav 2
|
||||
</span>
|
||||
<i
|
||||
@ -1745,27 +1718,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="notification"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="notification"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
subnav 3
|
||||
</span>
|
||||
<i
|
||||
@ -1931,27 +1904,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
subnav 1
|
||||
</span>
|
||||
<i
|
||||
@ -2004,27 +1977,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="laptop"
|
||||
class="anticon anticon-laptop"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="laptop"
|
||||
class="anticon anticon-laptop"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="laptop"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="laptop"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
subnav 2
|
||||
</span>
|
||||
<i
|
||||
@ -2044,27 +2017,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="notification"
|
||||
class="anticon anticon-notification"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="notification"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="notification"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<path
|
||||
d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
subnav 3
|
||||
</span>
|
||||
<i
|
||||
|
||||
@ -42,42 +42,22 @@ class SiderDemo extends React.Component {
|
||||
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
|
||||
<Menu.Item key="1">
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
<Menu.Item key="1" icon={<PieChartOutlined />}>
|
||||
Option 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<DesktopOutlined />
|
||||
<span>Option 2</span>
|
||||
<Menu.Item key="2" icon={<DesktopOutlined />}>
|
||||
Option 2
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<UserOutlined />
|
||||
<span>User</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
|
||||
<Menu.Item key="3">Tom</Menu.Item>
|
||||
<Menu.Item key="4">Bill</Menu.Item>
|
||||
<Menu.Item key="5">Alex</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<TeamOutlined />
|
||||
<span>Team</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
|
||||
<Menu.Item key="6">Team 1</Menu.Item>
|
||||
<Menu.Item key="8">Team 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="9">
|
||||
<FileOutlined />
|
||||
</Menu.Item>
|
||||
<Menu.Item key="9" icon={<FileOutlined />} />
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout>
|
||||
|
||||
@ -42,17 +42,14 @@ class SiderDemo extends React.Component {
|
||||
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
||||
<Menu.Item key="1">
|
||||
<UserOutlined />
|
||||
<span>nav 1</span>
|
||||
<Menu.Item key="1" icon={<UserOutlined />}>
|
||||
nav 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<VideoCameraOutlined />
|
||||
<span>nav 2</span>
|
||||
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
|
||||
nav 2
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<UploadOutlined />
|
||||
<span>nav 3</span>
|
||||
<Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
nav 3
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
|
||||
@ -41,37 +41,29 @@ ReactDOM.render(
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
|
||||
<Menu.Item key="1">
|
||||
<UserOutlined />
|
||||
<span className="nav-text">nav 1</span>
|
||||
<Menu.Item key="1" icon={<UserOutlined />}>
|
||||
nav 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<VideoCameraOutlined />
|
||||
<span className="nav-text">nav 2</span>
|
||||
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
|
||||
nav 2
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<UploadOutlined />
|
||||
<span className="nav-text">nav 3</span>
|
||||
<Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
nav 3
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<BarChartOutlined />
|
||||
<span className="nav-text">nav 4</span>
|
||||
<Menu.Item key="4" icon={<BarChartOutlined />}>
|
||||
nav 4
|
||||
</Menu.Item>
|
||||
<Menu.Item key="5">
|
||||
<CloudOutlined />
|
||||
<span className="nav-text">nav 5</span>
|
||||
<Menu.Item key="5" icon={<CloudOutlined />}>
|
||||
nav 5
|
||||
</Menu.Item>
|
||||
<Menu.Item key="6">
|
||||
<AppstoreOutlined />
|
||||
<span className="nav-text">nav 6</span>
|
||||
<Menu.Item key="6" icon={<AppstoreOutlined />}>
|
||||
nav 6
|
||||
</Menu.Item>
|
||||
<Menu.Item key="7">
|
||||
<TeamOutlined />
|
||||
<span className="nav-text">nav 7</span>
|
||||
<Menu.Item key="7" icon={<TeamOutlined />}>
|
||||
nav 7
|
||||
</Menu.Item>
|
||||
<Menu.Item key="8">
|
||||
<ShopOutlined />
|
||||
<span className="nav-text">nav 8</span>
|
||||
<Menu.Item key="8" icon={<ShopOutlined />}>
|
||||
nav 8
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
|
||||
@ -37,21 +37,17 @@ ReactDOM.render(
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
|
||||
<Menu.Item key="1">
|
||||
<UserOutlined />
|
||||
<span className="nav-text">nav 1</span>
|
||||
<Menu.Item key="1" icon={<UserOutlined />}>
|
||||
nav 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<VideoCameraOutlined />
|
||||
<span className="nav-text">nav 2</span>
|
||||
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
|
||||
nav 2
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<UploadOutlined />
|
||||
<span className="nav-text">nav 3</span>
|
||||
<Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
nav 3
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<UserOutlined />
|
||||
<span className="nav-text">nav 4</span>
|
||||
<Menu.Item key="4" icon={<UserOutlined />}>
|
||||
nav 4
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
|
||||
@ -49,42 +49,22 @@ class SiderDemo extends React.Component {
|
||||
<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
|
||||
<Menu.Item key="1">
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
<Menu.Item key="1" icon={<PieChartOutlined />}>
|
||||
Option 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<DesktopOutlined />
|
||||
<span>Option 2</span>
|
||||
<Menu.Item key="2" icon={<DesktopOutlined />}>
|
||||
Option 2
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<UserOutlined />
|
||||
<span>User</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
|
||||
<Menu.Item key="3">Tom</Menu.Item>
|
||||
<Menu.Item key="4">Bill</Menu.Item>
|
||||
<Menu.Item key="5">Alex</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<TeamOutlined />
|
||||
<span>Team</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
|
||||
<Menu.Item key="6">Team 1</Menu.Item>
|
||||
<Menu.Item key="8">Team 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="9">
|
||||
<FileOutlined />
|
||||
</Menu.Item>
|
||||
<Menu.Item key="9" icon={<FileOutlined />} />
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout className="site-layout">
|
||||
|
||||
@ -38,43 +38,19 @@ ReactDOM.render(
|
||||
defaultOpenKeys={['sub1']}
|
||||
style={{ height: '100%', borderRight: 0 }}
|
||||
>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<UserOutlined />
|
||||
subnav 1
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
|
||||
<Menu.Item key="1">option1</Menu.Item>
|
||||
<Menu.Item key="2">option2</Menu.Item>
|
||||
<Menu.Item key="3">option3</Menu.Item>
|
||||
<Menu.Item key="4">option4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<LaptopOutlined />
|
||||
subnav 2
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
|
||||
<Menu.Item key="5">option5</Menu.Item>
|
||||
<Menu.Item key="6">option6</Menu.Item>
|
||||
<Menu.Item key="7">option7</Menu.Item>
|
||||
<Menu.Item key="8">option8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub3"
|
||||
title={
|
||||
<span>
|
||||
<NotificationOutlined />
|
||||
subnav 3
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
|
||||
<Menu.Item key="9">option9</Menu.Item>
|
||||
<Menu.Item key="10">option10</Menu.Item>
|
||||
<Menu.Item key="11">option11</Menu.Item>
|
||||
|
||||
@ -44,43 +44,19 @@ ReactDOM.render(
|
||||
defaultOpenKeys={['sub1']}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<UserOutlined />
|
||||
subnav 1
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
|
||||
<Menu.Item key="1">option1</Menu.Item>
|
||||
<Menu.Item key="2">option2</Menu.Item>
|
||||
<Menu.Item key="3">option3</Menu.Item>
|
||||
<Menu.Item key="4">option4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<LaptopOutlined />
|
||||
subnav 2
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
|
||||
<Menu.Item key="5">option5</Menu.Item>
|
||||
<Menu.Item key="6">option6</Menu.Item>
|
||||
<Menu.Item key="7">option7</Menu.Item>
|
||||
<Menu.Item key="8">option8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub3"
|
||||
title={
|
||||
<span>
|
||||
<NotificationOutlined />
|
||||
subnav 3
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
|
||||
<Menu.Item key="9">option9</Menu.Item>
|
||||
<Menu.Item key="10">option10</Menu.Item>
|
||||
<Menu.Item key="11">option11</Menu.Item>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { ListGridType, ColumnType, ListContext } from './index';
|
||||
import { ListGridType, ListContext } from './index';
|
||||
import { Col } from '../grid';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import { cloneElement } from '../_util/reactNode';
|
||||
@ -14,6 +14,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
extra?: React.ReactNode;
|
||||
actions?: React.ReactNode[];
|
||||
grid?: ListGridType;
|
||||
colStyle?: React.CSSProperties;
|
||||
}
|
||||
|
||||
export interface ListItemMetaProps {
|
||||
@ -54,10 +55,6 @@ export const Meta: React.FC<ListItemMetaProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
function getGrid(grid: ListGridType, t: ColumnType) {
|
||||
return grid[t] && Math.floor(24 / grid[t]!);
|
||||
}
|
||||
|
||||
export interface ListItemTypeProps extends React.FC<ListItemProps> {
|
||||
Meta: typeof Meta;
|
||||
}
|
||||
@ -85,7 +82,15 @@ const Item: ListItemTypeProps = props => {
|
||||
return !isItemContainsTextNodeAndNotSingular();
|
||||
};
|
||||
|
||||
const { prefixCls: customizePrefixCls, children, actions, extra, className, ...others } = props;
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
children,
|
||||
actions,
|
||||
extra,
|
||||
className,
|
||||
colStyle,
|
||||
...others
|
||||
} = props;
|
||||
const prefixCls = getPrefixCls('list', customizePrefixCls);
|
||||
const actionsContent = actions && actions.length > 0 && (
|
||||
<ul className={`${prefixCls}-item-action`} key="actions">
|
||||
@ -98,9 +103,9 @@ const Item: ListItemTypeProps = props => {
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
const Tag = grid ? 'div' : 'li';
|
||||
const Element = grid ? 'div' : 'li';
|
||||
const itemChildren = (
|
||||
<Tag
|
||||
<Element
|
||||
{...(others as any)} // `li` element `onCopy` prop args is not same as `div`
|
||||
className={classNames(`${prefixCls}-item`, className, {
|
||||
[`${prefixCls}-item-no-flex`]: !isFlexMode(),
|
||||
@ -117,19 +122,11 @@ const Item: ListItemTypeProps = props => {
|
||||
</div>,
|
||||
]
|
||||
: [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
|
||||
</Tag>
|
||||
</Element>
|
||||
);
|
||||
|
||||
return grid ? (
|
||||
<Col
|
||||
span={getGrid(grid, 'column')}
|
||||
xs={getGrid(grid, 'xs')}
|
||||
sm={getGrid(grid, 'sm')}
|
||||
md={getGrid(grid, 'md')}
|
||||
lg={getGrid(grid, 'lg')}
|
||||
xl={getGrid(grid, 'xl')}
|
||||
xxl={getGrid(grid, 'xxl')}
|
||||
>
|
||||
<Col flex={1} style={colStyle}>
|
||||
{itemChildren}
|
||||
</Col>
|
||||
) : (
|
||||
|
||||
@ -182,8 +182,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -213,8 +213,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -244,8 +244,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -275,8 +275,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-6"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -451,8 +451,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -482,8 +482,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -513,8 +513,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -544,8 +544,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -575,8 +575,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -606,8 +606,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
class="ant-col"
|
||||
style="padding-left:8px;padding-right:8px;flex:1 1 auto"
|
||||
>
|
||||
<div
|
||||
class="ant-list-item"
|
||||
@ -645,7 +645,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
|
||||
exports[`renders ./components/list/demo/simple.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
@ -745,7 +745,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
@ -810,7 +810,7 @@ Array [
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
|
||||
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
|
||||
role="separator"
|
||||
>
|
||||
<span
|
||||
@ -935,7 +935,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -974,7 +974,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1013,7 +1013,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1104,7 +1104,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1143,7 +1143,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1182,7 +1182,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1273,7 +1273,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1312,7 +1312,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
@ -1351,7 +1351,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal"
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
|
||||
@ -44,16 +44,16 @@ More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
|
||||
### List grid props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| column | column of grid, [optional number](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - | |
|
||||
| gutter | spacing between grid | number | 0 | |
|
||||
| xs | `<576px` column of grid | number | - | |
|
||||
| sm | `≥576px` column of grid | number | - | |
|
||||
| md | `≥768px` column of grid | number | - | |
|
||||
| lg | `≥992px` column of grid | number | - | |
|
||||
| xl | `≥1200px` column of grid | number | - | |
|
||||
| xxl | `≥1600px` column of grid | number | - | |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ------------------------ | ------ | ------- | ------- |
|
||||
| column | column of grid | number | - | |
|
||||
| gutter | spacing between grid | number | 0 | |
|
||||
| xs | `<576px` column of grid | number | - | |
|
||||
| sm | `≥576px` column of grid | number | - | |
|
||||
| md | `≥768px` column of grid | number | - | |
|
||||
| lg | `≥992px` column of grid | number | - | |
|
||||
| xl | `≥1200px` column of grid | number | - | |
|
||||
| xxl | `≥1600px` column of grid | number | - | |
|
||||
|
||||
### List.Item
|
||||
|
||||
|
||||
@ -2,16 +2,16 @@ import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import Spin, { SpinProps } from '../spin';
|
||||
import useBreakpoint from '../grid/hooks/useBreakpoint';
|
||||
import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
|
||||
import { RenderEmptyHandler, ConfigContext } from '../config-provider';
|
||||
|
||||
import Pagination, { PaginationConfig } from '../pagination';
|
||||
import { Row } from '../grid';
|
||||
|
||||
import Item from './Item';
|
||||
|
||||
export { ListItemProps, ListItemMetaProps } from './Item';
|
||||
|
||||
export type ColumnCount = 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
|
||||
export type ColumnCount = number;
|
||||
|
||||
export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
||||
|
||||
@ -218,20 +218,40 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
|
||||
}
|
||||
}
|
||||
|
||||
let childrenContent;
|
||||
childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
|
||||
const screens = useBreakpoint();
|
||||
const currentBreakpoint = React.useMemo(() => {
|
||||
for (let i = 0; i < responsiveArray.length; i += 1) {
|
||||
const breakpoint: Breakpoint = responsiveArray[i];
|
||||
if (screens[breakpoint]) {
|
||||
return breakpoint;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}, [screens]);
|
||||
|
||||
const colStyle = React.useMemo(() => {
|
||||
if (!grid) {
|
||||
return undefined;
|
||||
}
|
||||
const columnCount =
|
||||
currentBreakpoint && grid[currentBreakpoint] ? grid[currentBreakpoint] : grid.column;
|
||||
if (columnCount) {
|
||||
return {
|
||||
width: `${100 / columnCount}%`,
|
||||
maxWidth: `${100 / columnCount}%`,
|
||||
};
|
||||
}
|
||||
}, [grid?.column, currentBreakpoint]);
|
||||
|
||||
let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
|
||||
if (splitDataSource.length > 0) {
|
||||
const items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
|
||||
|
||||
const childrenList: Array<React.ReactNode> = [];
|
||||
React.Children.forEach(items, (child: any, index) => {
|
||||
childrenList.push(
|
||||
React.cloneElement(child, {
|
||||
key: keys[index],
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
const childrenList = React.Children.map(items, (child: any, index) =>
|
||||
React.cloneElement(child, {
|
||||
key: keys[index],
|
||||
colStyle,
|
||||
}),
|
||||
);
|
||||
childrenContent = grid ? (
|
||||
<Row gutter={grid.gutter}>{childrenList}</Row>
|
||||
) : (
|
||||
|
||||
@ -44,16 +44,16 @@ cols: 1
|
||||
|
||||
### List grid props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| column | 列数，[可选值](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - | |
|
||||
| gutter | 栅格间隔 | number | 0 | |
|
||||
| xs | `<576px` 展示的列数 | number | - | |
|
||||
| sm | `≥576px` 展示的列数 | number | - | |
|
||||
| md | `≥768px` 展示的列数 | number | - | |
|
||||
| lg | `≥992px` 展示的列数 | number | - | |
|
||||
| xl | `≥1200px` 展示的列数 | number | - | |
|
||||
| xxl | `≥1600px` 展示的列数 | number | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------ | -------------------- | ------ | ------ | ---- |
|
||||
| column | 列数 | number | - | |
|
||||
| gutter | 栅格间隔 | number | 0 | |
|
||||
| xs | `<576px` 展示的列数 | number | - | |
|
||||
| sm | `≥576px` 展示的列数 | number | - | |
|
||||
| md | `≥768px` 展示的列数 | number | - | |
|
||||
| lg | `≥992px` 展示的列数 | number | - | |
|
||||
| xl | `≥1200px` 展示的列数 | number | - | |
|
||||
| xxl | `≥1600px` 展示的列数 | number | - | |
|
||||
|
||||
### List.Item
|
||||
|
||||
|
||||
@ -76,7 +76,7 @@
|
||||
margin-bottom: 4px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
> a {
|
||||
color: @text-color;
|
||||
transition: all 0.3s;
|
||||
@ -88,7 +88,7 @@
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
font-size: @list-item-meta-description-font-size;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
&-action {
|
||||
@ -104,7 +104,7 @@
|
||||
padding: 0 @padding-xs;
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
overflow: hidden;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
line-height: 22px;
|
||||
line-height: @line-height-base;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
@ -15,6 +15,7 @@ export interface MenuItemProps
|
||||
rootPrefixCls?: string;
|
||||
disabled?: boolean;
|
||||
level?: number;
|
||||
icon?: React.ReactNode;
|
||||
title?: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
@ -37,9 +38,19 @@ export default class MenuItem extends React.Component<MenuItemProps> {
|
||||
this.menuItem = menuItem;
|
||||
};
|
||||
|
||||
renderItemChildren() {
|
||||
const { icon, children } = this.props;
|
||||
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
|
||||
// ref: https://github.com/ant-design/ant-design/pull/23456
|
||||
if (!icon || (React.isValidElement(children) && children.type === 'span')) {
|
||||
return children;
|
||||
}
|
||||
return <span>{children}</span>;
|
||||
}
|
||||
|
||||
renderItem = ({ siderCollapsed }: SiderContextProps) => {
|
||||
const { level, className, children, rootPrefixCls } = this.props;
|
||||
const { title, ...rest } = this.props;
|
||||
const { title, icon, ...rest } = this.props;
|
||||
|
||||
return (
|
||||
<MenuContext.Consumer>
|
||||
@ -60,6 +71,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
|
||||
// ref: https://github.com/ant-design/ant-design/issues/16742
|
||||
tooltipProps.visible = false;
|
||||
}
|
||||
const childrenLength = toArray(children).length;
|
||||
return (
|
||||
<Tooltip
|
||||
{...tooltipProps}
|
||||
@ -69,11 +81,15 @@ export default class MenuItem extends React.Component<MenuItemProps> {
|
||||
<Item
|
||||
{...rest}
|
||||
className={classNames(className, {
|
||||
[`${rootPrefixCls}-item-only-child`]: toArray(children).length === 1,
|
||||
[`${rootPrefixCls}-item-only-child`]:
|
||||
(icon ? childrenLength + 1 : childrenLength) === 1,
|
||||
})}
|
||||
title={title}
|
||||
ref={this.saveMenuItem}
|
||||
/>
|
||||
>
|
||||
{icon}
|
||||
{this.renderItemChildren()}
|
||||
</Item>
|
||||
</Tooltip>
|
||||
);
|
||||
}}
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { SubMenu as RcSubMenu } from 'rc-menu';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import omit from 'omit.js';
|
||||
import MenuContext, { MenuContextProps } from './MenuContext';
|
||||
|
||||
interface TitleEventEntity {
|
||||
@ -15,6 +15,7 @@ export interface SubMenuProps {
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
title?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
onTitleClick?: (e: TitleEventEntity) => void;
|
||||
onTitleMouseEnter?: (e: TitleEventEntity) => void;
|
||||
@ -41,13 +42,30 @@ class SubMenu extends React.Component<SubMenuProps, any> {
|
||||
this.subMenu = subMenu;
|
||||
};
|
||||
|
||||
renderTitle() {
|
||||
const { icon, title } = this.props;
|
||||
if (!icon) {
|
||||
return title;
|
||||
}
|
||||
// inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
|
||||
// ref: https://github.com/ant-design/ant-design/pull/23456
|
||||
const titleIsSpan = React.isValidElement(title) && title.type === 'span';
|
||||
return (
|
||||
<>
|
||||
{icon}
|
||||
{titleIsSpan ? title : <span>{title}</span>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { rootPrefixCls, popupClassName } = this.props;
|
||||
return (
|
||||
<MenuContext.Consumer>
|
||||
{({ antdMenuTheme }: MenuContextProps) => (
|
||||
<RcSubMenu
|
||||
{...this.props}
|
||||
{...omit(this.props, ['icon'])}
|
||||
title={this.renderTitle()}
|
||||
ref={this.saveSubMenu}
|
||||
popupClassName={classNames(
|
||||
rootPrefixCls,
|
||||
|
||||
@ -48,7 +48,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Navigation One
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
|
||||
@ -94,7 +96,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Navigation Two
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
|
||||
@ -145,7 +149,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Navigation Three - Submenu
|
||||
<span>
|
||||
Navigation Three - Submenu
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
@ -325,30 +331,28 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -534,30 +538,28 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -609,30 +611,28 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -737,30 +737,28 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -779,30 +777,28 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -814,7 +810,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
@ -824,12 +820,12 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
/>
|
||||
</button>
|
||||
Change Mode
|
||||
<span
|
||||
class="ant-divider"
|
||||
style="margin:0 1em"
|
||||
/>
|
||||
</button>,
|
||||
" Change Mode",
|
||||
<div
|
||||
class="ant-divider ant-divider-vertical"
|
||||
role="separator"
|
||||
/>,
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
@ -839,10 +835,10 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
/>
|
||||
</button>
|
||||
Change Style
|
||||
<br />
|
||||
<br />
|
||||
</button>,
|
||||
" Change Style",
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-light ant-menu-root ant-menu-inline"
|
||||
role="menu"
|
||||
@ -873,7 +869,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Navigation One
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
@ -900,7 +898,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
Navigation Two
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
|
||||
@ -914,30 +914,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -994,30 +992,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Four
|
||||
</span>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1025,12 +1021,12 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
|
||||
</div>
|
||||
<div />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<button
|
||||
aria-checked="true"
|
||||
checked=""
|
||||
@ -1043,9 +1039,9 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
>
|
||||
Dark
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
</button>,
|
||||
<br />,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
|
||||
role="menu"
|
||||
@ -1063,30 +1059,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1138,30 +1132,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="appstore"
|
||||
class="anticon anticon-appstore"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="appstore"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<path
|
||||
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Two
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1180,30 +1172,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
role="button"
|
||||
style="padding-left:24px"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1211,8 +1201,8 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
|
||||
</div>
|
||||
<div />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
@ -1231,30 +1221,28 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
class="ant-menu-submenu-title"
|
||||
role="button"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
@ -1311,30 +1299,28 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
|
||||
class="ant-menu-submenu-title"
|
||||
role="button"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
<span
|
||||
aria-label="setting"
|
||||
class="anticon anticon-setting"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="setting"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<path
|
||||
d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation Three
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
|
||||
@ -1,5 +1,145 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Menu Menu.Item with icon children auto wrap span 1`] = `
|
||||
<ul
|
||||
class="ant-menu ant-menu-light ant-menu-root ant-menu-vertical"
|
||||
role="menu"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-vertical"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-menu-submenu-title"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-vertical"
|
||||
role="menuitem"
|
||||
>
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="ant-menu-submenu-title"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="mail"
|
||||
class="anticon anticon-mail"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="mail"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Navigation One
|
||||
</span>
|
||||
<i
|
||||
class="ant-menu-submenu-arrow"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
|
||||
exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<ul
|
||||
class="ant-menu ant-menu-light ant-menu-root ant-menu-rtl ant-menu-vertical"
|
||||
@ -49,6 +189,26 @@ exports[`Menu should controlled collapse work 1`] = `
|
||||
role="menuitem"
|
||||
style="padding-left: 24px;"
|
||||
>
|
||||
<span
|
||||
aria-label="pie-chart"
|
||||
class="anticon anticon-pie-chart"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="pie-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Option 1
|
||||
</span>
|
||||
@ -66,6 +226,26 @@ exports[`Menu should controlled collapse work 2`] = `
|
||||
role="menuitem"
|
||||
style="padding-left: 24px;"
|
||||
>
|
||||
<span
|
||||
aria-label="pie-chart"
|
||||
class="anticon anticon-pie-chart"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="pie-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Option 1
|
||||
</span>
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import {
|
||||
MailOutlined,
|
||||
InboxOutlined,
|
||||
AppstoreOutlined,
|
||||
PieChartOutlined,
|
||||
UserOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import Menu from '..';
|
||||
import Icon from '../../icon';
|
||||
import Layout from '../../layout';
|
||||
import Tooltip from '../../tooltip';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
@ -62,12 +68,7 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
||||
});
|
||||
|
||||
it('should accept defaultOpenKeys in mode inline', () => {
|
||||
@ -80,12 +81,7 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
||||
});
|
||||
|
||||
it('should accept defaultOpenKeys in mode vertical', () => {
|
||||
@ -98,12 +94,7 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
||||
});
|
||||
|
||||
it('horizontal', () => {
|
||||
@ -116,31 +107,17 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
wrapper.setProps({ openKeys: [] });
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
|
||||
wrapper.setProps({ openKeys: ['1'] });
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it('inline', () => {
|
||||
@ -153,31 +130,17 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
wrapper.setProps({ openKeys: [] });
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
|
||||
wrapper.setProps({ openKeys: ['1'] });
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it('vertical', () => {
|
||||
@ -190,31 +153,17 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
wrapper.setProps({ openKeys: [] });
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
|
||||
wrapper.setProps({ openKeys: ['1'] });
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/pulls/4677
|
||||
@ -243,33 +192,18 @@ describe('Menu', () => {
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(false);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
wrapper.setProps({ mode: 'vertical' });
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(false);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
wrapper.setProps({ mode: 'inline' });
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(false);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
});
|
||||
|
||||
it('should always follow openKeys when inlineCollapsed is switched', () => {
|
||||
const wrapper = mount(
|
||||
<Menu defaultOpenKeys={['1']} mode="inline">
|
||||
<Menu.Item key="menu1">
|
||||
<Icon type="inbox" />
|
||||
<InboxOutlined />
|
||||
<span>Option</span>
|
||||
</Menu.Item>
|
||||
<SubMenu key="1" title="submenu1">
|
||||
@ -278,18 +212,8 @@ describe('Menu', () => {
|
||||
</SubMenu>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-inline'),
|
||||
).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(false);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
|
||||
wrapper.setProps({ inlineCollapsed: true });
|
||||
// 动画结束后套样式;
|
||||
@ -297,37 +221,22 @@ describe('Menu', () => {
|
||||
wrapper.update();
|
||||
wrapper.simulate('transitionEnd', { propertyName: 'width' });
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-root')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-vertical'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('ul.ant-menu-root').at(0).hasClass('ant-menu-vertical')).toBe(true);
|
||||
expect(wrapper.find('ul.ant-menu-sub').length).toBe(0);
|
||||
|
||||
wrapper.setProps({ inlineCollapsed: false });
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-inline'),
|
||||
).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(false);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
});
|
||||
|
||||
it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
|
||||
const wrapper = mount(
|
||||
<Menu defaultOpenKeys={['not-existed']} mode="inline">
|
||||
<Menu.Item key="menu1">
|
||||
<Icon type="inbox" />
|
||||
<InboxOutlined />
|
||||
<span>Option</span>
|
||||
</Menu.Item>
|
||||
<SubMenu key="1" title="submenu1">
|
||||
@ -341,36 +250,15 @@ describe('Menu', () => {
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
wrapper.simulate('transitionEnd', { propertyName: 'width' });
|
||||
wrapper
|
||||
.find('.ant-menu-submenu-title')
|
||||
.at(0)
|
||||
.simulate('mouseEnter');
|
||||
wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-submenu')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-submenu-vertical'),
|
||||
).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-submenu')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-submenu-open'),
|
||||
).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-vertical'),
|
||||
).toBe(true);
|
||||
expect(
|
||||
wrapper
|
||||
.find('ul.ant-menu-sub')
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(false);
|
||||
expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(
|
||||
true,
|
||||
);
|
||||
expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
|
||||
expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
|
||||
});
|
||||
|
||||
it('inlineCollapsed Menu.Item Tooltip can be removed', () => {
|
||||
@ -399,48 +287,12 @@ describe('Menu', () => {
|
||||
</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(
|
||||
wrapper
|
||||
.find(Menu.Item)
|
||||
.at(0)
|
||||
.find(Tooltip)
|
||||
.props().title,
|
||||
).toBe('item');
|
||||
expect(
|
||||
wrapper
|
||||
.find(Menu.Item)
|
||||
.at(1)
|
||||
.find(Tooltip)
|
||||
.props().title,
|
||||
).toBe('title');
|
||||
expect(
|
||||
wrapper
|
||||
.find(Menu.Item)
|
||||
.at(2)
|
||||
.find(Tooltip)
|
||||
.props().title,
|
||||
).toBe('item');
|
||||
expect(
|
||||
wrapper
|
||||
.find(Menu.Item)
|
||||
.at(3)
|
||||
.find(Tooltip)
|
||||
.props().title,
|
||||
).toBe(null);
|
||||
expect(
|
||||
wrapper
|
||||
.find(Menu.Item)
|
||||
.at(4)
|
||||
.find(Tooltip)
|
||||
.props().title,
|
||||
).toBe('');
|
||||
expect(
|
||||
wrapper
|
||||
.find(Menu.Item)
|
||||
.at(4)
|
||||
.find(Tooltip)
|
||||
.props().title,
|
||||
).toBe('');
|
||||
expect(wrapper.find(Menu.Item).at(0).find(Tooltip).props().title).toBe('item');
|
||||
expect(wrapper.find(Menu.Item).at(1).find(Tooltip).props().title).toBe('title');
|
||||
expect(wrapper.find(Menu.Item).at(2).find(Tooltip).props().title).toBe('item');
|
||||
expect(wrapper.find(Menu.Item).at(3).find(Tooltip).props().title).toBe(null);
|
||||
expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe('');
|
||||
expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe('');
|
||||
});
|
||||
|
||||
describe('open submenu when click submenu title', () => {
|
||||
@ -453,10 +305,7 @@ describe('Menu', () => {
|
||||
});
|
||||
|
||||
const toggleMenu = (wrapper, index, event) => {
|
||||
wrapper
|
||||
.find('.ant-menu-submenu-title')
|
||||
.at(index)
|
||||
.simulate(event);
|
||||
wrapper.find('.ant-menu-submenu-title').at(index).simulate(event);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
};
|
||||
@ -474,21 +323,13 @@ describe('Menu', () => {
|
||||
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
||||
toggleMenu(wrapper, 0, 'click');
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
toggleMenu(wrapper, 0, 'click');
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it('vertical', () => {
|
||||
@ -504,21 +345,13 @@ describe('Menu', () => {
|
||||
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
||||
toggleMenu(wrapper, 0, 'mouseenter');
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
toggleMenu(wrapper, 0, 'mouseleave');
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
it('horizontal', () => {
|
||||
@ -535,21 +368,13 @@ describe('Menu', () => {
|
||||
expect(wrapper.find('.ant-menu-sub').length).toBe(0);
|
||||
toggleMenu(wrapper, 0, 'mouseenter');
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).not.toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
|
||||
true,
|
||||
);
|
||||
toggleMenu(wrapper, 0, 'mouseleave');
|
||||
expect(
|
||||
wrapper
|
||||
.find('.ant-menu-sub')
|
||||
.hostNodes()
|
||||
.at(0)
|
||||
.hasClass('ant-menu-hidden'),
|
||||
).toBe(true);
|
||||
expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
|
||||
true,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -558,7 +383,7 @@ describe('Menu', () => {
|
||||
const wrapper = mount(
|
||||
<Menu mode="inline" inlineCollapsed>
|
||||
<Menu.Item key="1" title="bamboo lucky">
|
||||
<Icon type="pie-chart" />
|
||||
<PieChartOutlined />
|
||||
<span>
|
||||
Option 1
|
||||
<img
|
||||
@ -600,7 +425,7 @@ describe('Menu', () => {
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<Icon type="user" />
|
||||
<UserOutlined />
|
||||
<span>User</span>
|
||||
</span>
|
||||
}
|
||||
@ -631,10 +456,7 @@ describe('Menu', () => {
|
||||
<Menu.Item key="test2">Navigation Two</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
wrapper
|
||||
.find('Menu')
|
||||
.at(1)
|
||||
.simulate('mouseenter');
|
||||
wrapper.find('Menu').at(1).simulate('mouseenter');
|
||||
expect(onMouseEnter).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
@ -642,12 +464,9 @@ describe('Menu', () => {
|
||||
it('get correct animation type when switched from inline', () => {
|
||||
const wrapper = mount(<Menu mode="inline" />);
|
||||
wrapper.setProps({ mode: 'horizontal' });
|
||||
expect(
|
||||
wrapper
|
||||
.find('InternalMenu')
|
||||
.instance()
|
||||
.getOpenMotionProps(''),
|
||||
).toEqual({ motion: { motionName: '' } });
|
||||
expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({
|
||||
motion: { motionName: '' },
|
||||
});
|
||||
});
|
||||
|
||||
it('warning if use `openAnimation` as object', () => {
|
||||
@ -664,22 +483,14 @@ describe('Menu', () => {
|
||||
it('motion object', () => {
|
||||
const motion = { test: true };
|
||||
const wrapper = mount(<Menu motion={motion} />);
|
||||
expect(
|
||||
wrapper
|
||||
.find('InternalMenu')
|
||||
.instance()
|
||||
.getOpenMotionProps(''),
|
||||
).toEqual({ motion });
|
||||
expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({ motion });
|
||||
});
|
||||
|
||||
it('legacy openTransitionName', () => {
|
||||
const wrapper = mount(<Menu openTransitionName="legacy" />);
|
||||
expect(
|
||||
wrapper
|
||||
.find('InternalMenu')
|
||||
.instance()
|
||||
.getOpenMotionProps(''),
|
||||
).toEqual({ openTransitionName: 'legacy' });
|
||||
expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({
|
||||
openTransitionName: 'legacy',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -687,11 +498,11 @@ describe('Menu', () => {
|
||||
const wrapper = mount(
|
||||
<Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
|
||||
<Menu.Item key="mail">
|
||||
<Icon type="mail" />
|
||||
<MailOutlined />
|
||||
Navigation One
|
||||
</Menu.Item>
|
||||
<Menu.Item key="app">
|
||||
<Icon type="appstore" />
|
||||
<AppstoreOutlined />
|
||||
Navigation Two
|
||||
</Menu.Item>
|
||||
<Menu.Item key="alipay">
|
||||
@ -701,20 +512,28 @@ describe('Menu', () => {
|
||||
</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
wrapper
|
||||
.find('MenuItem')
|
||||
.first()
|
||||
.simulate('mouseenter');
|
||||
wrapper.find('MenuItem').first().simulate('mouseenter');
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
|
||||
});
|
||||
|
||||
it('MenuItem should render icon and icon should be the first child when icon exists', () => {
|
||||
const wrapper = mount(
|
||||
<Menu>
|
||||
<Menu.Item key="mail" icon={<MailOutlined />}>
|
||||
Navigation One
|
||||
</Menu.Item>
|
||||
</Menu>,
|
||||
);
|
||||
expect(wrapper.find('.ant-menu-item .anticon').hasClass('anticon-mail')).toBe(true);
|
||||
});
|
||||
|
||||
it('should controlled collapse work', () => {
|
||||
const wrapper = mount(
|
||||
<Menu mode="inline" inlineCollapsed={false}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="pie-chart" />
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
</Menu.Item>
|
||||
</Menu>,
|
||||
@ -732,7 +551,7 @@ describe('Menu', () => {
|
||||
const wrapper = mount(
|
||||
<Menu mode="inline" inlineCollapsed={false}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="pie-chart" />
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
</Menu.Item>
|
||||
</Menu>,
|
||||
@ -790,10 +609,7 @@ describe('Menu', () => {
|
||||
</Menu>,
|
||||
);
|
||||
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 1');
|
||||
wrapper
|
||||
.find('.ant-menu-item')
|
||||
.at(1)
|
||||
.simulate('click');
|
||||
wrapper.find('.ant-menu-item').at(1).simulate('click');
|
||||
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
|
||||
wrapper.setProps({ inlineCollapsed: true });
|
||||
jest.runAllTimers();
|
||||
@ -808,4 +624,20 @@ describe('Menu', () => {
|
||||
expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('Menu.Item with icon children auto wrap span', () => {
|
||||
const wrapper = mount(
|
||||
<Menu>
|
||||
<Menu.Item key="1" icon={<MailOutlined />}>
|
||||
Navigation One
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<MailOutlined />}>
|
||||
<span>Navigation One</span>
|
||||
</Menu.Item>
|
||||
<Menu.SubMenu key="3" icon={<MailOutlined />} title="Navigation One" />
|
||||
<Menu.SubMenu key="4" icon={<MailOutlined />} title={<span>Navigation One</span>} />
|
||||
</Menu>,
|
||||
);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -34,22 +34,13 @@ class App extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
|
||||
<Menu.Item key="mail">
|
||||
<MailOutlined />
|
||||
<Menu.Item key="mail" icon={<MailOutlined />}>
|
||||
Navigation One
|
||||
</Menu.Item>
|
||||
<Menu.Item key="app" disabled>
|
||||
<AppstoreOutlined />
|
||||
<Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
|
||||
Navigation Two
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
title={
|
||||
<>
|
||||
<SettingOutlined />
|
||||
Navigation Three - Submenu
|
||||
</>
|
||||
}
|
||||
>
|
||||
<SubMenu icon={<SettingOutlined />} title="Navigation Three - Submenu">
|
||||
<Menu.ItemGroup title="Item 1">
|
||||
<Menu.Item key="setting:1">Option 1</Menu.Item>
|
||||
<Menu.Item key="setting:2">Option 2</Menu.Item>
|
||||
|
||||
@ -55,41 +55,22 @@ class App extends React.Component {
|
||||
theme="dark"
|
||||
inlineCollapsed={this.state.collapsed}
|
||||
>
|
||||
<Menu.Item key="1">
|
||||
<PieChartOutlined />
|
||||
<span>Option 1</span>
|
||||
<Menu.Item key="1" icon={<PieChartOutlined />}>
|
||||
Option 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<DesktopOutlined />
|
||||
<span>Option 2</span>
|
||||
<Menu.Item key="2" icon={<DesktopOutlined />}>
|
||||
Option 2
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<ContainerOutlined />
|
||||
<span>Option 3</span>
|
||||
<Menu.Item key="3" icon={<ContainerOutlined />}>
|
||||
Option 3
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<MailOutlined />
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<Menu.Item key="7">Option 7</Menu.Item>
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
|
||||
@ -51,15 +51,7 @@ class Sider extends React.Component {
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</Menu.ItemGroup>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
|
||||
@ -60,15 +60,7 @@ class Sider extends React.Component {
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
@ -76,15 +68,7 @@ class Sider extends React.Component {
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub4"
|
||||
title={
|
||||
<span>
|
||||
<SettingOutlined />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<Menu.Item key="11">Option 11</Menu.Item>
|
||||
|
||||
@ -14,7 +14,7 @@ title:
|
||||
Show the dynamic switching mode (between 'inline' and 'vertical').
|
||||
|
||||
```jsx
|
||||
import { Menu, Switch } from 'antd';
|
||||
import { Menu, Switch, Divider } from 'antd';
|
||||
import {
|
||||
MailOutlined,
|
||||
CalendarOutlined,
|
||||
@ -44,9 +44,9 @@ class Sider extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Switch onChange={this.changeMode} /> Change Mode
|
||||
<span className="ant-divider" style={{ margin: '0 1em' }} />
|
||||
<Divider type="vertical" />
|
||||
<Switch onChange={this.changeTheme} /> Change Style
|
||||
<br />
|
||||
<br />
|
||||
@ -57,23 +57,13 @@ class Sider extends React.Component {
|
||||
mode={this.state.mode}
|
||||
theme={this.state.theme}
|
||||
>
|
||||
<Menu.Item key="1">
|
||||
<MailOutlined />
|
||||
<Menu.Item key="1" icon={<MailOutlined />}>
|
||||
Navigation One
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<CalendarOutlined />
|
||||
<Menu.Item key="2" icon={<CalendarOutlined />}>
|
||||
Navigation Two
|
||||
</Menu.Item>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
<SubMenu key="sub1-2" title="Submenu">
|
||||
@ -81,22 +71,14 @@ class Sider extends React.Component {
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<SettingOutlined />
|
||||
<span>Navigation Four</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
|
||||
<Menu.Item key="7">Option 7</Menu.Item>
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ class Sider extends React.Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Switch
|
||||
checked={this.state.theme === 'dark'}
|
||||
onChange={this.changeTheme}
|
||||
@ -57,29 +57,13 @@ class Sider extends React.Component {
|
||||
selectedKeys={[this.state.current]}
|
||||
mode="inline"
|
||||
>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<MailOutlined />
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
<Menu.Item key="3">Option 3</Menu.Item>
|
||||
<Menu.Item key="4">Option 4</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={
|
||||
<span>
|
||||
<AppstoreOutlined />
|
||||
<span>Navigation Two</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
|
||||
<Menu.Item key="5">Option 5</Menu.Item>
|
||||
<Menu.Item key="6">Option 6</Menu.Item>
|
||||
<SubMenu key="sub3" title="Submenu">
|
||||
@ -87,22 +71,14 @@ class Sider extends React.Component {
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub4"
|
||||
title={
|
||||
<span>
|
||||
<SettingOutlined />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<Menu.Item key="11">Option 11</Menu.Item>
|
||||
<Menu.Item key="12">Option 12</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,15 +25,7 @@ function handleClick(e) {
|
||||
|
||||
ReactDOM.render(
|
||||
<Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={
|
||||
<span>
|
||||
<MailOutlined />
|
||||
<span>Navigation One</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
|
||||
<Menu.ItemGroup title="Item 1">
|
||||
<Menu.Item key="1">Option 1</Menu.Item>
|
||||
<Menu.Item key="2">Option 2</Menu.Item>
|
||||
@ -59,15 +51,7 @@ ReactDOM.render(
|
||||
<Menu.Item key="8">Option 8</Menu.Item>
|
||||
</SubMenu>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub4"
|
||||
title={
|
||||
<span>
|
||||
<SettingOutlined />
|
||||
<span>Navigation Three</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
|
||||
<Menu.Item key="9">Option 9</Menu.Item>
|
||||
<Menu.Item key="10">Option 10</Menu.Item>
|
||||
<Menu.Item key="11">Option 11</Menu.Item>
|
||||
|
||||
@ -52,11 +52,31 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
|
||||
### Menu.Item
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| -------- | ------------------------------------ | ------- | ------------- | ------- |
|
||||
| disabled | Whether menu item is disabled | boolean | false | |
|
||||
| key | Unique ID of the menu item | string | | |
|
||||
| title | Set display title for collapsed item | string | | |
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| -------- | ------------------------------------ | --------- | ------------- | ------- |
|
||||
| disabled | Whether menu item is disabled | boolean | false | |
|
||||
| key | Unique ID of the menu item | string | | |
|
||||
| title | Set display title for collapsed item | string | | |
|
||||
| icon | icon of the menu item | ReactNode | | 4.2.0 |
|
||||
|
||||
> Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.
|
||||
>
|
||||
> ```jsx
|
||||
> <Menu.Item>
|
||||
> <PieChartOutlined />
|
||||
> <span>Option 1</span>
|
||||
> </Menu.Item>
|
||||
> <Menu.SubMenu
|
||||
> title={
|
||||
> <>
|
||||
> <PieChartOutlined />
|
||||
> <span>Option 2</span>
|
||||
> </>
|
||||
> }
|
||||
> >
|
||||
> ...
|
||||
> </Menu.SubMenu>
|
||||
> ```
|
||||
|
||||
### Menu.SubMenu
|
||||
|
||||
@ -66,7 +86,8 @@ More layouts with navigation: [Layout](/components/layout).
|
||||
| children | Sub-menus or sub-menu items | Array<MenuItem\|SubMenu> | | |
|
||||
| disabled | Whether sub-menu is disabled | boolean | false | |
|
||||
| key | Unique ID of the sub-menu | string | | |
|
||||
| title | Title of the sub-menu | string\|ReactNode | | |
|
||||
| title | Title of sub menu | string\|ReactNode | | |
|
||||
| icon | Icon of sub menu | ReactNode | | 4.2.0 |
|
||||
| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | | |
|
||||
|
||||
### Menu.ItemGroup
|
||||
|
||||
@ -53,22 +53,43 @@ subtitle: 导航菜单
|
||||
|
||||
### Menu.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------------------ | ------- | ------ | ---- |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| key | item 的唯一标志 | string | | |
|
||||
| title | 设置收缩时展示的悬浮标题 | string | | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------------------ | --------- | ------ | ----- |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| key | item 的唯一标志 | string | | |
|
||||
| title | 设置收缩时展示的悬浮标题 | string | | |
|
||||
| icon | 菜单图标 | ReactNode | | 4.2.0 |
|
||||
|
||||
> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
|
||||
>
|
||||
> ```jsx
|
||||
> <Menu.Item>
|
||||
> <PieChartOutlined />
|
||||
> <span>Option 1</span>
|
||||
> </Menu.Item>
|
||||
> <Menu.SubMenu
|
||||
> title={
|
||||
> <>
|
||||
> <PieChartOutlined />
|
||||
> <span>Option 2</span>
|
||||
> </>
|
||||
> }
|
||||
> >
|
||||
> ...
|
||||
> </Menu.SubMenu>
|
||||
> ```
|
||||
|
||||
### Menu.SubMenu
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------- | -------------- | --------------------------- | ------ | ---- |
|
||||
| popupClassName | 子菜单样式 | string | | |
|
||||
| children | 子菜单的菜单项 | Array<MenuItem\|SubMenu> | | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| key | 唯一标志 | string | | |
|
||||
| title | 子菜单项值 | string\|ReactNode | | |
|
||||
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------- | -------------- | --------------------------- | ------ | ----- |
|
||||
| popupClassName | 子菜单样式 | string | | |
|
||||
| children | 子菜单的菜单项 | Array<MenuItem\|SubMenu> | | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| key | 唯一标志 | string | | |
|
||||
| title | 子菜单项值 | string\|ReactNode | | |
|
||||
| icon | 菜单图标 | ReactNode | | 4.2.0 |
|
||||
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | |
|
||||
|
||||
### Menu.ItemGroup
|
||||
|
||||
|
||||
@ -172,14 +172,14 @@
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
padding: @menu-item-padding;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
|
||||
background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 10px;
|
||||
margin-right: @menu-item-icon-margin-right;
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
|
||||
+ span {
|
||||
@ -329,7 +329,7 @@
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
line-height: 46px;
|
||||
line-height: @menu-horizontal-line-height;
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
|
||||
@ -88,6 +88,16 @@ describe('notification', () => {
|
||||
notification.destroy();
|
||||
});
|
||||
|
||||
it('should be able to config rtl', () => {
|
||||
notification.config({
|
||||
rtl: true,
|
||||
});
|
||||
notification.open({
|
||||
message: 'whatever',
|
||||
});
|
||||
expect(document.querySelectorAll('.ant-notification-rtl').length).toBe(1);
|
||||
});
|
||||
|
||||
it('should be able to open with icon', async () => {
|
||||
const openNotificationWithIcon = async type => {
|
||||
const iconPrefix = '.ant-notification-notice-icon';
|
||||
|
||||
@ -55,6 +55,7 @@ notification.config({
|
||||
placement: 'bottomRight',
|
||||
bottom: 50,
|
||||
duration: 3,
|
||||
rtl: true,
|
||||
});
|
||||
```
|
||||
|
||||
@ -66,6 +67,7 @@ notification.config({
|
||||
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
|
||||
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |
|
||||
| rtl | whether to enable RTL mode | boolean | `false` |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import * as React from 'react';
|
||||
import Notification from 'rc-notification';
|
||||
import { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
|
||||
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import classNames from 'classnames';
|
||||
import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
|
||||
import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
|
||||
import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
|
||||
@ -29,8 +30,10 @@ export interface ConfigProps {
|
||||
placement?: NotificationPlacement;
|
||||
getContainer?: () => HTMLElement;
|
||||
closeIcon?: React.ReactNode;
|
||||
rtl?: boolean;
|
||||
}
|
||||
|
||||
let rtl = false;
|
||||
function setNotificationConfig(options: ConfigProps) {
|
||||
const { duration, placement, bottom, top, getContainer, closeIcon } = options;
|
||||
if (duration !== undefined) {
|
||||
@ -51,6 +54,9 @@ function setNotificationConfig(options: ConfigProps) {
|
||||
if (closeIcon !== undefined) {
|
||||
defaultCloseIcon = closeIcon;
|
||||
}
|
||||
if (options.rtl !== undefined) {
|
||||
rtl = options.rtl;
|
||||
}
|
||||
}
|
||||
|
||||
function getPlacementStyle(
|
||||
@ -122,11 +128,15 @@ function getNotificationInstance(
|
||||
</span>
|
||||
);
|
||||
|
||||
const notificationClass = classNames(`${outerPrefixCls}-${placement}`, {
|
||||
[`${outerPrefixCls}-rtl`]: rtl === true,
|
||||
});
|
||||
|
||||
notificationInstance[cacheKey] = new Promise(resolve => {
|
||||
Notification.newInstance(
|
||||
{
|
||||
prefixCls: outerPrefixCls,
|
||||
className: `${outerPrefixCls}-${placement}`,
|
||||
className: notificationClass,
|
||||
style: getPlacementStyle(placement, top, bottom),
|
||||
getContainer,
|
||||
closeIcon: closeIconToRender,
|
||||
|
||||
@ -56,6 +56,7 @@ notification.config({
|
||||
placement: 'bottomRight',
|
||||
bottom: 50,
|
||||
duration: 3,
|
||||
rtl: true,
|
||||
});
|
||||
```
|
||||
|
||||
@ -67,6 +68,7 @@ notification.config({
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
|
||||
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | `false` |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
||||
@ -4,8 +4,6 @@
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
@notification-width: 384px;
|
||||
@notification-padding-vertical: 16px;
|
||||
@notification-padding-horizontal: 24px;
|
||||
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
|
||||
@notification-margin-bottom: 16px;
|
||||
|
||||
@ -212,3 +210,5 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
53
components/notification/style/rtl.less
Normal file
53
components/notification/style/rtl.less
Normal file
@ -0,0 +1,53 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
|
||||
.@{notification-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-notice {
|
||||
&-closable &-message {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-icon &-message {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-icon &-description {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
.@{notification-prefix-cls}-rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -163,12 +163,21 @@ ReactDOM.render(
|
||||
}
|
||||
|
||||
#components-page-header-demo-content .example-link {
|
||||
line-height: 24px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
[data-theme='compact'] #components-page-header-demo-content .example-link {
|
||||
line-height: 20px;
|
||||
}
|
||||
#components-page-header-demo-content .example-link-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
[data-theme='compact'] #components-page-header-demo-content .example-link-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#components-page-header-demo-content .ant-page-header-rtl .example-link {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
margin-bottom: 0;
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
font-size: @heading-4-size;
|
||||
font-size: @page-header-heading-title;
|
||||
line-height: 32px;
|
||||
.text-overflow-ellipsis;
|
||||
}
|
||||
@ -77,8 +77,8 @@
|
||||
&-sub-title {
|
||||
margin-right: @margin-sm;
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
font-size: @page-header-heading-sub-title;
|
||||
line-height: @line-height-base;
|
||||
.text-overflow-ellipsis;
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
.@{ant-prefix}-tabs-nav {
|
||||
.@{ant-prefix}-tabs-tab {
|
||||
padding: @tabs-horizontal-padding-sm;
|
||||
font-size: 16px;
|
||||
font-size: @page-header-tabs-tab-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
font-size: @font-size-base;
|
||||
> .@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
top: 8px; // 4px for padding-top, 4px for vertical middle;
|
||||
top: 4px + (@line-height-base * @font-size-base - @font-size-base)/2; // 4px for padding-top, 4px for vertical middle;
|
||||
color: @warning-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
width: 2em;
|
||||
margin-left: 8px;
|
||||
color: @text-color-secondary;
|
||||
font-size: 1em;
|
||||
font-size: @progress-text-font-size;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
@ -159,6 +159,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @progress-text-color;
|
||||
font-size: @progress-circle-text-font-size;
|
||||
line-height: 1;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-right: @radio-wrapper-margin-right;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -38,6 +38,7 @@
|
||||
.reset-component;
|
||||
|
||||
position: relative;
|
||||
top: @radio-top;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import RcRate from 'rc-rate';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
import StarFilled from '@ant-design/icons/StarFilled';
|
||||
|
||||
import Tooltip from '../tooltip';
|
||||
@ -35,12 +34,9 @@ const Rate = React.forwardRef<unknown, RateProps>((props, ref) => {
|
||||
};
|
||||
|
||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||
const { prefixCls, className, ...restProps } = props;
|
||||
const { prefixCls, ...restProps } = props;
|
||||
const rateProps = omit(restProps, ['tooltips']);
|
||||
const ratePrefixCls = getPrefixCls('rate', prefixCls);
|
||||
const rateClassNames = classNames(className, {
|
||||
[`${ratePrefixCls}-rtl`]: direction === 'rtl',
|
||||
});
|
||||
|
||||
return (
|
||||
<RcRate
|
||||
@ -48,7 +44,7 @@ const Rate = React.forwardRef<unknown, RateProps>((props, ref) => {
|
||||
characterRender={characterRender}
|
||||
{...rateProps}
|
||||
prefixCls={ratePrefixCls}
|
||||
className={rateClassNames}
|
||||
direction={direction}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: @rate-star-color;
|
||||
font-size: 20px;
|
||||
font-size: @rate-star-size;
|
||||
line-height: unset;
|
||||
list-style: none;
|
||||
outline: none;
|
||||
@ -79,7 +79,7 @@
|
||||
|
||||
&-text {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
margin: 0 8px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,11 +23,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
.@{rate-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,26 +34,26 @@
|
||||
text-align: center;
|
||||
|
||||
> .anticon {
|
||||
font-size: 72px;
|
||||
font-size: @result-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: @heading-color;
|
||||
font-size: 24px;
|
||||
font-size: @result-title-font-size;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: @text-color-secondary;
|
||||
font-size: 14px;
|
||||
font-size: @result-subtitle-font-size;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
margin-top: 32px;
|
||||
margin: @result-extra-margin;
|
||||
text-align: center;
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
|
||||
@ -118,10 +118,6 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-open &.anticon-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&:not(.@{iconfont-css-prefix}-down) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user