mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
Merge origin/4.0-prepare into feat-dark-palette
This commit is contained in:
ycjcl868
commit
52e9c20b10
@ -31,13 +31,13 @@
|
||||
|
||||
## 🖥 支持环境
|
||||
|
||||
- 现代浏览器和 IE9 及以上。
|
||||
- 现代浏览器和 IE11 及以上。
|
||||
- 支持服务端渲染。
|
||||
- [Electron](http://electron.atom.io/)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
## 📦 安装
|
||||
|
||||
|
||||
@ -37,7 +37,7 @@ English | [简体中文](./README-zh_CN.md)
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
## 📦 Install
|
||||
|
||||
|
||||
@ -1,23 +1,3 @@
|
||||
// matchMedia polyfill for
|
||||
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||
let enquire: any;
|
||||
|
||||
// TODO: Will be removed in antd 4.0 because we will no longer support ie9
|
||||
if (typeof window !== 'undefined') {
|
||||
const matchMediaPolyfill = (mediaQuery: string) => {
|
||||
return {
|
||||
media: mediaQuery,
|
||||
matches: false,
|
||||
addListener() {},
|
||||
removeListener() {},
|
||||
};
|
||||
};
|
||||
// ref: https://github.com/ant-design/ant-design/issues/18774
|
||||
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
|
||||
// eslint-disable-next-line global-require
|
||||
enquire = require('enquire.js');
|
||||
}
|
||||
|
||||
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
|
||||
export type BreakpointMap = Partial<Record<Breakpoint, string>>;
|
||||
|
||||
@ -42,6 +22,7 @@ let subUid = -1;
|
||||
let screens = {};
|
||||
|
||||
const responsiveObserve = {
|
||||
matchHandlers: {},
|
||||
dispatch(pointMap: BreakpointMap) {
|
||||
screens = pointMap;
|
||||
if (subscribers.length < 1) {
|
||||
@ -73,31 +54,32 @@ const responsiveObserve = {
|
||||
}
|
||||
},
|
||||
unregister() {
|
||||
Object.keys(responsiveMap).map((screen: Breakpoint) =>
|
||||
enquire.unregister(responsiveMap[screen]),
|
||||
);
|
||||
Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
|
||||
const matchMediaQuery = responsiveMap[screen]!;
|
||||
const handler = this.matchHandlers[matchMediaQuery];
|
||||
if (handler && handler.mql && handler.listener) {
|
||||
handler.mql.removeListener(handler.listener);
|
||||
}
|
||||
});
|
||||
},
|
||||
register() {
|
||||
Object.keys(responsiveMap).map((screen: Breakpoint) =>
|
||||
enquire.register(responsiveMap[screen], {
|
||||
match: () => {
|
||||
const pointMap = {
|
||||
...screens,
|
||||
[screen]: true,
|
||||
};
|
||||
this.dispatch(pointMap);
|
||||
},
|
||||
unmatch: () => {
|
||||
const pointMap = {
|
||||
...screens,
|
||||
[screen]: false,
|
||||
};
|
||||
this.dispatch(pointMap);
|
||||
},
|
||||
// Keep a empty destory to avoid triggering unmatch when unregister
|
||||
destroy() {},
|
||||
}),
|
||||
);
|
||||
Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
|
||||
const matchMediaQuery = responsiveMap[screen]!;
|
||||
const listener = ({ matches }: { matches: boolean }) => {
|
||||
this.dispatch({
|
||||
...screens,
|
||||
[screen]: matches,
|
||||
});
|
||||
};
|
||||
const mql = window.matchMedia(matchMediaQuery);
|
||||
mql.addListener(listener);
|
||||
this.matchHandlers[matchMediaQuery] = {
|
||||
mql,
|
||||
listener,
|
||||
};
|
||||
|
||||
listener(mql);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
@ -299,6 +298,4 @@ class Affix extends React.Component<AffixProps, AffixState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Affix);
|
||||
|
||||
export default Affix;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import { AntAnchor } from './Anchor';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -83,6 +82,4 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(AnchorLink);
|
||||
|
||||
export default AnchorLink;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
function getNumberArray(num: string | number | undefined | null) {
|
||||
@ -208,6 +207,4 @@ class ScrollNumber extends React.Component<ScrollNumberProps, ScrollNumberState>
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(ScrollNumber);
|
||||
|
||||
export default ScrollNumber;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import Animate from 'rc-animate';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
@ -40,13 +39,6 @@ export default class Badge extends React.Component<BadgeProps, any> {
|
||||
overflowCount: 99,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
count: PropTypes.node,
|
||||
showZero: PropTypes.bool,
|
||||
dot: PropTypes.bool,
|
||||
overflowCount: PropTypes.number,
|
||||
};
|
||||
|
||||
getNumberedDispayCount() {
|
||||
const { count, overflowCount } = this.props;
|
||||
const displayCount =
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import toArray from 'rc-util/lib/Children/toArray';
|
||||
import omit from 'omit.js';
|
||||
@ -68,12 +67,6 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
|
||||
separator: '/',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
separator: PropTypes.node,
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
getPath = (path: string, params: any) => {
|
||||
path = (path || '').replace(/^\//, '');
|
||||
Object.keys(params).forEach(key => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
import omit from 'omit.js';
|
||||
|
||||
@ -21,12 +20,6 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
|
||||
separator: '/',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
separator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
||||
href: PropTypes.string,
|
||||
};
|
||||
|
||||
renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
|
||||
const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
/* eslint-disable react/button-has-type */
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { LoadingOutlined } from '@ant-design/icons';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import omit from 'omit.js';
|
||||
|
||||
import Group from './button-group';
|
||||
@ -124,19 +122,6 @@ class Button extends React.Component<ButtonProps, ButtonState> {
|
||||
htmlType: 'button',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
type: PropTypes.string,
|
||||
shape: PropTypes.oneOf(ButtonShapes),
|
||||
size: PropTypes.oneOf(ButtonSizes),
|
||||
htmlType: PropTypes.oneOf(ButtonHTMLTypes),
|
||||
onClick: PropTypes.func,
|
||||
loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
||||
className: PropTypes.string,
|
||||
icon: PropTypes.node,
|
||||
block: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
private delayTimeout: number;
|
||||
|
||||
private buttonNode: HTMLElement | null;
|
||||
@ -318,6 +303,4 @@ class Button extends React.Component<ButtonProps, ButtonState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Button);
|
||||
|
||||
export default Button;
|
||||
|
||||
@ -4,21 +4,6 @@ import { Settings } from 'react-slick';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import warning from '../_util/warning';
|
||||
|
||||
// matchMedia polyfill for
|
||||
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||
// TODO: Will be removed in antd 4.0 because we will no longer support ie9
|
||||
if (typeof window !== 'undefined') {
|
||||
const matchMediaPolyfill = (mediaQuery: string) => {
|
||||
return {
|
||||
media: mediaQuery,
|
||||
matches: false,
|
||||
addListener() {},
|
||||
removeListener() {},
|
||||
};
|
||||
};
|
||||
// ref: https://github.com/ant-design/ant-design/issues/18774
|
||||
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
|
||||
}
|
||||
// Use require over import (will be lifted up)
|
||||
// make sure matchMedia polyfill run before require('react-slick')
|
||||
// Fix https://github.com/ant-design/ant-design/issues/6560
|
||||
|
||||
@ -4,7 +4,6 @@ import arrayTreeFilter from 'array-tree-filter';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { CloseCircleFilled, DownOutlined, RightOutlined, RedoOutlined } from '@ant-design/icons';
|
||||
|
||||
import Input from '../input';
|
||||
@ -601,6 +600,4 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Cascader);
|
||||
|
||||
export default Cascader;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import RcCheckbox from 'rc-checkbox';
|
||||
import shallowEqual from 'shallowequal';
|
||||
@ -174,6 +173,4 @@ class Checkbox extends React.Component<CheckboxProps, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Checkbox);
|
||||
|
||||
export default Checkbox;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import shallowEqual from 'shallowequal';
|
||||
import omit from 'omit.js';
|
||||
@ -187,6 +186,4 @@ class CheckboxGroup extends React.Component<CheckboxGroupProps, CheckboxGroupSta
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(CheckboxGroup);
|
||||
|
||||
export default CheckboxGroup;
|
||||
|
||||
@ -18444,7 +18444,20 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
|
||||
>
|
||||
<div
|
||||
class="config-upload config-upload-select config-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="config-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<span />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="config-upload-list config-upload-list-text"
|
||||
>
|
||||
@ -18556,7 +18569,20 @@ exports[`ConfigProvider components Upload normal 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<span />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
@ -18668,7 +18694,20 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
|
||||
>
|
||||
<div
|
||||
class="prefix-Upload prefix-Upload-select prefix-Upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="prefix-Upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<span />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
|
||||
@ -54,7 +54,6 @@ import Tree from '../../tree';
|
||||
import TreeSelect from '../../tree-select';
|
||||
import Upload from '../../upload';
|
||||
|
||||
jest.mock('draft-js/lib/generateRandomKey', () => () => '123');
|
||||
jest.mock('rc-util/lib/Portal');
|
||||
|
||||
describe('ConfigProvider', () => {
|
||||
|
||||
@ -5,24 +5,6 @@ import Descriptions from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
|
||||
jest.mock('enquire.js', () => {
|
||||
let that;
|
||||
let unmatchFun;
|
||||
return {
|
||||
unregister: jest.fn(),
|
||||
register: (media, options) => {
|
||||
if (media === '(max-width: 575px)') {
|
||||
that = this;
|
||||
options.match.call(that);
|
||||
unmatchFun = options.unmatch;
|
||||
}
|
||||
},
|
||||
callunmatch() {
|
||||
unmatchFun.call(that);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Descriptions', () => {
|
||||
mountTest(Descriptions);
|
||||
|
||||
@ -38,8 +20,6 @@ describe('Descriptions', () => {
|
||||
});
|
||||
|
||||
it('when max-width: 575px，column=1', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const enquire = require('enquire.js');
|
||||
const wrapper = mount(
|
||||
<Descriptions>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
@ -51,14 +31,11 @@ describe('Descriptions', () => {
|
||||
);
|
||||
expect(wrapper.find('tr')).toHaveLength(5);
|
||||
expect(wrapper.find('.ant-descriptions-item-no-label')).toHaveLength(1);
|
||||
|
||||
enquire.callunmatch();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
it('when max-width: 575px，column=2', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const enquire = require('enquire.js');
|
||||
const wrapper = mount(
|
||||
<Descriptions column={{ xs: 2 }}>
|
||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||
@ -68,8 +45,6 @@ describe('Descriptions', () => {
|
||||
</Descriptions>,
|
||||
);
|
||||
expect(wrapper.find('tr')).toHaveLength(2);
|
||||
|
||||
enquire.callunmatch();
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import RcDrawer from 'rc-drawer';
|
||||
import createReactContext from '@ant-design/create-react-context';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
@ -10,7 +9,7 @@ import { ConfigConsumerProps } from '../config-provider';
|
||||
import { withConfigConsumer } from '../config-provider/context';
|
||||
import { tuple } from '../_util/type';
|
||||
|
||||
const DrawerContext = createReactContext<Drawer | null>(null);
|
||||
const DrawerContext = React.createContext<Drawer | null>(null);
|
||||
|
||||
type EventType =
|
||||
| React.KeyboardEvent<HTMLDivElement>
|
||||
|
||||
@ -4038,7 +4038,48 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
id="validate_other_upload"
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Click to upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
/>
|
||||
@ -4073,7 +4114,58 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
|
||||
<span>
|
||||
<div
|
||||
class="ant-upload ant-upload-drag"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload ant-upload-btn"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
id="validate_other_dragger"
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="ant-upload-drag-container"
|
||||
>
|
||||
<p
|
||||
class="ant-upload-drag-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="inbox"
|
||||
class="anticon anticon-inbox"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="inbox"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="ant-upload-text"
|
||||
>
|
||||
Click or drag file to this area to upload
|
||||
</p>
|
||||
<p
|
||||
class="ant-upload-hint"
|
||||
>
|
||||
Support for a single or bulk upload.
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import scrollIntoView from 'dom-scroll-into-view';
|
||||
import scrollIntoView from 'scroll-into-view-if-needed';
|
||||
import Form from '..';
|
||||
import Input from '../../input';
|
||||
import Button from '../../button';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
jest.mock('dom-scroll-into-view');
|
||||
jest.mock('scroll-into-view-if-needed');
|
||||
|
||||
const delay = () =>
|
||||
new Promise(resolve => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import { useForm as useRcForm, FormInstance as RcFormInstance } from 'rc-field-form';
|
||||
import scrollIntoView from 'dom-scroll-into-view';
|
||||
import scrollIntoView from 'scroll-into-view-if-needed';
|
||||
|
||||
type InternalNamePath = (string | number)[];
|
||||
|
||||
@ -70,26 +70,6 @@ export function getFieldId(namePath: InternalNamePath, formName?: string): strin
|
||||
return formName ? `${formName}_${mergedId}` : mergedId;
|
||||
}
|
||||
|
||||
// Source: https://github.com/react-component/form/blob/master/src/createDOMForm.js
|
||||
function getScrollableContainer(current: HTMLElement) {
|
||||
let node: HTMLElement | null = current;
|
||||
let nodeName;
|
||||
/* eslint no-cond-assign:0 */
|
||||
while (node && (nodeName = node.nodeName.toLowerCase()) !== 'body') {
|
||||
const { overflowY } = getComputedStyle(node);
|
||||
// https://stackoverflow.com/a/36900407/3040605
|
||||
if (
|
||||
node !== current &&
|
||||
(overflowY === 'auto' || overflowY === 'scroll') &&
|
||||
node.scrollHeight > node.clientHeight
|
||||
) {
|
||||
return node;
|
||||
}
|
||||
node = node.parentElement;
|
||||
}
|
||||
return nodeName === 'body' ? node!.ownerDocument : node;
|
||||
}
|
||||
|
||||
export interface FormInstance extends RcFormInstance {
|
||||
scrollToField: (name: string | number | InternalNamePath) => void;
|
||||
__INTERNAL__: {
|
||||
@ -107,8 +87,9 @@ export function useForm(form?: FormInstance): [FormInstance] {
|
||||
const node: HTMLElement | null = fieldId ? document.getElementById(fieldId) : null;
|
||||
|
||||
if (node) {
|
||||
scrollIntoView(node, getScrollableContainer(node), {
|
||||
onlyScrollIfNeeded: true,
|
||||
scrollIntoView(node, {
|
||||
scrollMode: 'if-needed',
|
||||
block: 'nearest',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import createContext, { Context } from '@ant-design/create-react-context';
|
||||
import { createContext, Context } from 'react';
|
||||
|
||||
export interface RowContextState {
|
||||
gutter?: [number, number];
|
||||
|
||||
@ -3,24 +3,6 @@ import { render, mount } from 'enzyme';
|
||||
import { Col, Row } from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
|
||||
jest.mock('enquire.js', () => {
|
||||
let that;
|
||||
let unmatchFun;
|
||||
return {
|
||||
unregister: jest.fn(),
|
||||
register: (media, options) => {
|
||||
if (media === '(max-width: 575px)') {
|
||||
that = this;
|
||||
options.match.call(that);
|
||||
unmatchFun = options.unmatch;
|
||||
}
|
||||
},
|
||||
callunmatch() {
|
||||
unmatchFun.call(that);
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
describe('Grid', () => {
|
||||
mountTest(Row);
|
||||
mountTest(Col);
|
||||
@ -88,22 +70,11 @@ describe('Grid', () => {
|
||||
});
|
||||
|
||||
it('should work correct when gutter is object', () => {
|
||||
// eslint-disable-next-line global-require
|
||||
const enquire = require('enquire.js');
|
||||
const wrapper = mount(<Row gutter={{ xs: 20 }} />);
|
||||
expect(wrapper.find('div').prop('style')).toEqual({
|
||||
marginLeft: -10,
|
||||
marginRight: -10,
|
||||
});
|
||||
enquire.callunmatch();
|
||||
expect(
|
||||
wrapper
|
||||
.update()
|
||||
.find('div')
|
||||
.prop('style'),
|
||||
).toEqual({});
|
||||
wrapper.unmount();
|
||||
expect(enquire.unregister).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should work currect when gutter is array', () => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import { CloseCircleFilled } from '@ant-design/icons';
|
||||
import { tuple } from '../_util/type';
|
||||
@ -16,7 +15,7 @@ export function hasPrefixSuffix(props: InputProps | ClearableInputProps) {
|
||||
*/
|
||||
interface BasicProps {
|
||||
prefixCls: string;
|
||||
inputType: (typeof ClearableInputType)[number];
|
||||
inputType: typeof ClearableInputType[number];
|
||||
value?: any;
|
||||
defaultValue?: any;
|
||||
allowClear?: boolean;
|
||||
@ -31,7 +30,7 @@ interface BasicProps {
|
||||
* This props only for input.
|
||||
*/
|
||||
interface ClearableInputProps extends BasicProps {
|
||||
size?: (typeof InputSizes)[number];
|
||||
size?: typeof InputSizes[number];
|
||||
suffix?: React.ReactNode;
|
||||
prefix?: React.ReactNode;
|
||||
addonBefore?: React.ReactNode;
|
||||
@ -168,6 +167,4 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(ClearableLabeledInput);
|
||||
|
||||
export default ClearableLabeledInput;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import Group from './Group';
|
||||
@ -16,7 +15,7 @@ export const InputSizes = tuple('small', 'default', 'large');
|
||||
export interface InputProps
|
||||
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
|
||||
prefixCls?: string;
|
||||
size?: (typeof InputSizes)[number];
|
||||
size?: typeof InputSizes[number];
|
||||
onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
|
||||
addonBefore?: React.ReactNode;
|
||||
addonAfter?: React.ReactNode;
|
||||
@ -60,7 +59,7 @@ export function resolveOnChange(
|
||||
|
||||
export function getInputClassName(
|
||||
prefixCls: string,
|
||||
size?: (typeof InputSizes)[number],
|
||||
size?: typeof InputSizes[number],
|
||||
disabled?: boolean,
|
||||
) {
|
||||
return classNames(prefixCls, {
|
||||
@ -87,28 +86,6 @@ class Input extends React.Component<InputProps, InputState> {
|
||||
type: 'text',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
type: PropTypes.string,
|
||||
id: PropTypes.string,
|
||||
size: PropTypes.oneOf(InputSizes),
|
||||
maxLength: PropTypes.number,
|
||||
disabled: PropTypes.bool,
|
||||
value: PropTypes.any,
|
||||
defaultValue: PropTypes.any,
|
||||
className: PropTypes.string,
|
||||
addonBefore: PropTypes.node,
|
||||
addonAfter: PropTypes.node,
|
||||
prefixCls: PropTypes.string,
|
||||
onPressEnter: PropTypes.func,
|
||||
onKeyDown: PropTypes.func,
|
||||
onKeyUp: PropTypes.func,
|
||||
onFocus: PropTypes.func,
|
||||
onBlur: PropTypes.func,
|
||||
prefix: PropTypes.node,
|
||||
suffix: PropTypes.node,
|
||||
allowClear: PropTypes.bool,
|
||||
};
|
||||
|
||||
input: HTMLInputElement;
|
||||
|
||||
clearableInput: ClearableLabeledInput;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import ResizeObserver from 'rc-resize-observer';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
@ -115,6 +114,4 @@ class ResizableTextArea extends React.Component<TextAreaProps, TextAreaState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(ResizableTextArea);
|
||||
|
||||
export default ResizableTextArea;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import ClearableLabeledInput from './ClearableLabeledInput';
|
||||
import ResizableTextArea, { AutoSizeType } from './ResizableTextArea';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -123,6 +122,4 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(TextArea);
|
||||
|
||||
export default TextArea;
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import createContext, { Context } from '@ant-design/create-react-context';
|
||||
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { BarsOutlined, RightOutlined, LeftOutlined } from '@ant-design/icons';
|
||||
@ -10,22 +7,6 @@ import { LayoutContext, LayoutContextProps } from './layout';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
import isNumeric from '../_util/isNumeric';
|
||||
|
||||
// matchMedia polyfill for
|
||||
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||
// TODO: Will be removed in antd 4.0 because we will no longer support ie9
|
||||
if (typeof window !== 'undefined') {
|
||||
const matchMediaPolyfill = (mediaQuery: string) => {
|
||||
return {
|
||||
media: mediaQuery,
|
||||
matches: false,
|
||||
addListener() {},
|
||||
removeListener() {},
|
||||
};
|
||||
};
|
||||
// ref: https://github.com/ant-design/ant-design/issues/18774
|
||||
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill as any;
|
||||
}
|
||||
|
||||
const dimensionMaxMap = {
|
||||
xs: '479.98px',
|
||||
sm: '575.98px',
|
||||
@ -40,7 +21,7 @@ export interface SiderContextProps {
|
||||
collapsedWidth?: string | number;
|
||||
}
|
||||
|
||||
export const SiderContext: Context<SiderContextProps> = createContext({});
|
||||
export const SiderContext: React.Context<SiderContextProps> = React.createContext({});
|
||||
|
||||
export type CollapseType = 'clickTrigger' | 'responsive';
|
||||
|
||||
@ -272,8 +253,6 @@ class InternalSider extends React.Component<InternalSideProps, SiderState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(InternalSider);
|
||||
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
export default class Sider extends React.Component {
|
||||
render() {
|
||||
|
||||
@ -154,16 +154,6 @@ describe('Sider', () => {
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
beforeAll(() => {
|
||||
Object.defineProperty(window, 'matchMedia', {
|
||||
value: jest.fn(() => ({
|
||||
matches: true,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
})),
|
||||
});
|
||||
});
|
||||
|
||||
it('should trigger onBreakpoint', async () => {
|
||||
const onBreakpoint = jest.fn();
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import createContext from '@ant-design/create-react-context';
|
||||
import { SiderProps } from './Sider';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
@ -19,7 +18,7 @@ export interface LayoutContextProps {
|
||||
removeSider: (id: string) => void;
|
||||
};
|
||||
}
|
||||
export const LayoutContext = createContext<LayoutContextProps>({
|
||||
export const LayoutContext = React.createContext<LayoutContextProps>({
|
||||
siderHook: {
|
||||
addSider: () => null,
|
||||
removeSider: () => null,
|
||||
|
||||
@ -36,10 +36,6 @@ function setMomentLocale(locale: Locale) {
|
||||
}
|
||||
|
||||
export default class LocaleProvider extends React.Component<LocaleProviderProps, any> {
|
||||
static propTypes = {
|
||||
locale: PropTypes.object,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
locale: {},
|
||||
};
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import RcMentions from 'rc-mentions';
|
||||
import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
|
||||
import Spin from '../spin';
|
||||
@ -172,6 +171,4 @@ class Mentions extends React.Component<MentionProps, MentionState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Mentions);
|
||||
|
||||
export default Mentions;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import createContext from '@ant-design/create-react-context';
|
||||
import { createContext } from 'react';
|
||||
|
||||
export type MenuTheme = 'light' | 'dark';
|
||||
|
||||
|
||||
@ -6,13 +6,6 @@ import Layout from '../../layout';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
|
||||
jest.mock('mutationobserver-shim', () => {
|
||||
global.MutationObserver = function MutationObserver() {
|
||||
this.observe = () => {};
|
||||
this.disconnect = () => {};
|
||||
};
|
||||
});
|
||||
|
||||
const { SubMenu } = Menu;
|
||||
|
||||
describe('Menu', () => {
|
||||
|
||||
@ -2,7 +2,6 @@ import * as React from 'react';
|
||||
import RcMenu, { Divider, ItemGroup } from 'rc-menu';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import SubMenu from './SubMenu';
|
||||
import Item from './MenuItem';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
@ -334,8 +333,6 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(InternalMenu);
|
||||
|
||||
// We should keep this as ref-able
|
||||
export default class Menu extends React.Component<MenuProps, {}> {
|
||||
static Divider = Divider;
|
||||
|
||||
@ -232,12 +232,8 @@
|
||||
width: 6px;
|
||||
height: 1.5px;
|
||||
// background + background-image to makes before & after cross have same color.
|
||||
// Since `linear-gradient` not work on IE9, we should hack it.
|
||||
// ref: https://github.com/ant-design/ant-design/issues/15910
|
||||
background: @menu-bg;
|
||||
background: ~'@{menu-item-color} \9';
|
||||
background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
|
||||
background-image: ~'none \9';
|
||||
border-radius: 2px;
|
||||
transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
|
||||
top 0.3s @ease-in-out;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import Dialog from 'rc-dialog';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
@ -151,22 +150,6 @@ export default class Modal extends React.Component<ModalProps, {}> {
|
||||
okType: 'primary' as ButtonType,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
onOk: PropTypes.func,
|
||||
onCancel: PropTypes.func,
|
||||
okText: PropTypes.node,
|
||||
cancelText: PropTypes.node,
|
||||
centered: PropTypes.bool,
|
||||
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
confirmLoading: PropTypes.bool,
|
||||
visible: PropTypes.bool,
|
||||
footer: PropTypes.node,
|
||||
title: PropTypes.node,
|
||||
closable: PropTypes.bool,
|
||||
closeIcon: PropTypes.node,
|
||||
};
|
||||
|
||||
handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
const { onCancel } = this.props;
|
||||
if (onCancel) {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { ExclamationCircleFilled } from '@ant-design/icons';
|
||||
|
||||
import Tooltip, { AbstractTooltipProps } from '../tooltip';
|
||||
@ -166,6 +165,4 @@ class Popconfirm extends React.Component<PopconfirmProps, PopconfirmState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Popconfirm);
|
||||
|
||||
export default Popconfirm;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import * as PropTypes from 'prop-types';
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
@ -56,20 +55,6 @@ export default class Progress extends React.Component<ProgressProps> {
|
||||
strokeLinecap: 'round',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
status: PropTypes.oneOf(ProgressStatuses),
|
||||
type: PropTypes.oneOf(ProgressTypes),
|
||||
showInfo: PropTypes.bool,
|
||||
percent: PropTypes.number,
|
||||
width: PropTypes.number,
|
||||
strokeWidth: PropTypes.number,
|
||||
strokeLinecap: PropTypes.oneOf(['round', 'square']),
|
||||
strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
trailColor: PropTypes.string,
|
||||
format: PropTypes.func,
|
||||
gapDegree: PropTypes.number,
|
||||
};
|
||||
|
||||
getPercentNumber() {
|
||||
const { successPercent, percent = 0 } = this.props;
|
||||
return parseInt(
|
||||
|
||||
@ -2,7 +2,6 @@ import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import shallowEqual from 'shallowequal';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import Radio from './radio';
|
||||
import {
|
||||
RadioGroupProps,
|
||||
@ -161,5 +160,4 @@ class RadioGroup extends React.Component<RadioGroupProps, RadioGroupState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(RadioGroup);
|
||||
export default RadioGroup;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import RcRate from 'rc-rate';
|
||||
import omit from 'omit.js';
|
||||
import { StarFilled } from '@ant-design/icons';
|
||||
@ -28,11 +27,6 @@ interface RateNodeProps {
|
||||
}
|
||||
|
||||
export default class Rate extends React.Component<RateProps, any> {
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
character: PropTypes.node,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
character: <StarFilled />,
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import debounce from 'lodash/debounce';
|
||||
@ -72,15 +71,6 @@ class Spin extends React.Component<SpinProps, SpinState> {
|
||||
wrapperClassName: '',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
spinning: PropTypes.bool,
|
||||
size: PropTypes.oneOf(SpinSizes),
|
||||
wrapperClassName: PropTypes.string,
|
||||
indicator: PropTypes.element,
|
||||
};
|
||||
|
||||
static setDefaultIndicator(indicator: React.ReactNode) {
|
||||
defaultIndicator = indicator;
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import * as moment from 'moment';
|
||||
import interopDefault from '../_util/interopDefault';
|
||||
import Statistic, { StatisticProps } from './Statistic';
|
||||
@ -86,6 +85,4 @@ class Countdown extends React.Component<CountdownProps, {}> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Countdown);
|
||||
|
||||
export default Countdown;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import RcSteps from 'rc-steps';
|
||||
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
|
||||
|
||||
@ -40,12 +39,6 @@ export default class Steps extends React.Component<StepsProps, any> {
|
||||
current: 0,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
iconPrefix: PropTypes.string,
|
||||
current: PropTypes.number,
|
||||
};
|
||||
|
||||
renderSteps = ({ getPrefixCls }: ConfigConsumerProps) => {
|
||||
const prefixCls = getPrefixCls('steps', this.props.prefixCls);
|
||||
const iconPrefix = getPrefixCls('', this.props.iconPrefix);
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
@import 'motion/move';
|
||||
@import 'motion/other';
|
||||
@import 'motion/slide';
|
||||
@import 'motion/swing';
|
||||
@import 'motion/zoom';
|
||||
|
||||
// For common/openAnimation
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
.swing-motion(@className, @keyframeName) {
|
||||
.@{className}-enter,
|
||||
.@{className}-appear {
|
||||
.motion-common();
|
||||
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active,
|
||||
.@{className}-appear.@{className}-appear-active {
|
||||
animation-name: ~'@{keyframeName}In';
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
|
||||
.swing-motion(swing, antSwing);
|
||||
|
||||
@keyframes antSwingIn {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
@ -3,16 +3,7 @@
|
||||
// Placeholder text
|
||||
.placeholder(@color: @input-placeholder-color) {
|
||||
// Firefox
|
||||
&::-moz-placeholder {
|
||||
color: @color;
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
// Internet Explorer 10+
|
||||
&:-ms-input-placeholder {
|
||||
color: @color;
|
||||
}
|
||||
// Safari and Chrome
|
||||
&::-webkit-input-placeholder {
|
||||
&::placeholder {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
|
||||
@ -28,16 +28,9 @@
|
||||
}
|
||||
|
||||
// for iconfont font size
|
||||
// fix chrome 12px bug, support ie
|
||||
// fix chrome 12px bug
|
||||
.iconfont-size-under-12px(@size, @rotate: 0deg) {
|
||||
display: inline-block;
|
||||
@font-scale: unit(@size / 12px);
|
||||
|
||||
font-size: 12px;
|
||||
// IE9
|
||||
font-size: ~'@{size} \9';
|
||||
transform: scale(@font-scale) rotate(@rotate);
|
||||
:root & {
|
||||
font-size: @font-size-sm; // reset IE9 and above
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import RcSwitch from 'rc-switch';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
@ -33,16 +32,6 @@ export interface SwitchProps {
|
||||
export default class Switch extends React.Component<SwitchProps, {}> {
|
||||
static __ANT_SWITCH = true;
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
// HACK: https://github.com/ant-design/ant-design/issues/5368
|
||||
// size=default and size=large are the same
|
||||
size: PropTypes.oneOf(['small', 'default', 'large']) as PropTypes.Requireable<
|
||||
SwitchProps['size']
|
||||
>,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
private rcSwitch: typeof RcSwitch;
|
||||
|
||||
constructor(props: SwitchProps) {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import omit from 'omit.js';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { CloseOutlined } from '@ant-design/icons';
|
||||
|
||||
import CheckableTag from './CheckableTag';
|
||||
@ -133,6 +132,4 @@ class Tag extends React.Component<TagProps, TagState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Tag);
|
||||
|
||||
export default Tag;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import RcTooltip from 'rc-tooltip';
|
||||
import classNames from 'classnames';
|
||||
import { AlignType, ActionType, BuildInPlacements } from 'rc-trigger/lib/interface';
|
||||
@ -280,6 +279,4 @@ class Tooltip extends React.Component<TooltipProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Tooltip);
|
||||
|
||||
export default Tooltip;
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
|
||||
import Lazyload from 'react-lazy-load';
|
||||
import Checkbox from '../checkbox';
|
||||
|
||||
export default class ListItem extends React.Component<any, any> {
|
||||
@ -10,16 +9,7 @@ export default class ListItem extends React.Component<any, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
renderedText,
|
||||
renderedEl,
|
||||
item,
|
||||
lazy,
|
||||
checked,
|
||||
disabled,
|
||||
prefixCls,
|
||||
onClick,
|
||||
} = this.props;
|
||||
const { renderedText, renderedEl, item, checked, disabled, prefixCls, onClick } = this.props;
|
||||
|
||||
const className = classNames({
|
||||
[`${prefixCls}-content-item`]: true,
|
||||
@ -42,20 +32,7 @@ export default class ListItem extends React.Component<any, any> {
|
||||
<span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>
|
||||
</li>
|
||||
);
|
||||
let children: JSX.Element | null = null;
|
||||
if (lazy) {
|
||||
const lazyProps = {
|
||||
height: 32,
|
||||
offset: 500,
|
||||
throttle: 0,
|
||||
debounce: false,
|
||||
...lazy,
|
||||
};
|
||||
children = <Lazyload {...lazyProps}>{listItem}</Lazyload>;
|
||||
} else {
|
||||
children = listItem;
|
||||
}
|
||||
|
||||
return children;
|
||||
return listItem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -388,62 +388,363 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-transfer-list-content"
|
||||
>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content1"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content1
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content2"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content2
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content4"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content4
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content5"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content5
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content7"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content7
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content8"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content8
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content10"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content10
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content11"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content11
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content13"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content13
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content14"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content14
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content16"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content16
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content17"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content17
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item ant-transfer-list-content-item-disabled"
|
||||
title="content19"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-checkbox-disabled"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
disabled=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content19
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content20"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content20
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -543,30 +844,156 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-transfer-list-content"
|
||||
>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<div
|
||||
class="LazyLoad"
|
||||
style="height:32px"
|
||||
/>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content3"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content3
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content6"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content6
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content9"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content9
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content12"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content12
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content15"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content15
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="ant-transfer-list-content-item"
|
||||
title="content18"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
class="ant-transfer-list-content-item-text"
|
||||
>
|
||||
content18
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -480,7 +480,6 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
handleFilter={[Function]}
|
||||
itemUnit="item"
|
||||
itemsUnit="items"
|
||||
lazy={Object {}}
|
||||
notFoundContent={
|
||||
<Context.Consumer>
|
||||
[Function]
|
||||
@ -593,7 +592,6 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
}
|
||||
itemUnit="item"
|
||||
itemsUnit="items"
|
||||
lazy={Object {}}
|
||||
notFoundContent={
|
||||
<Context.Consumer>
|
||||
[Function]
|
||||
@ -615,78 +613,74 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
]
|
||||
}
|
||||
>
|
||||
<Animate
|
||||
animation={Object {}}
|
||||
<ul
|
||||
className="ant-transfer-list-content"
|
||||
component="ul"
|
||||
componentProps={
|
||||
Object {
|
||||
"onScroll": [Function],
|
||||
}
|
||||
}
|
||||
onAppear={[Function]}
|
||||
onEnd={[Function]}
|
||||
onEnter={[Function]}
|
||||
onLeave={[Function]}
|
||||
transitionAppear={false}
|
||||
transitionEnter={true}
|
||||
transitionLeave={false}
|
||||
transitionName=""
|
||||
onScroll={[Function]}
|
||||
>
|
||||
<ul
|
||||
className="ant-transfer-list-content"
|
||||
onScroll={[Function]}
|
||||
<ListItem
|
||||
checked={false}
|
||||
item={
|
||||
Object {
|
||||
"key": "a",
|
||||
"title": "title",
|
||||
}
|
||||
}
|
||||
key="a"
|
||||
onClick={[Function]}
|
||||
prefixCls="ant-transfer-list"
|
||||
renderedEl="label"
|
||||
renderedText="title value"
|
||||
>
|
||||
<AnimateChild
|
||||
animation={Object {}}
|
||||
key="a"
|
||||
transitionAppear={false}
|
||||
transitionEnter={true}
|
||||
transitionLeave={false}
|
||||
transitionName=""
|
||||
<li
|
||||
className="ant-transfer-list-content-item"
|
||||
onClick={[Function]}
|
||||
title="title value"
|
||||
>
|
||||
<ListItem
|
||||
<Checkbox
|
||||
checked={false}
|
||||
item={
|
||||
Object {
|
||||
"key": "a",
|
||||
"title": "title",
|
||||
}
|
||||
}
|
||||
key="a"
|
||||
lazy={Object {}}
|
||||
onClick={[Function]}
|
||||
prefixCls="ant-transfer-list"
|
||||
renderedEl="label"
|
||||
renderedText="title value"
|
||||
indeterminate={false}
|
||||
>
|
||||
<LazyLoad
|
||||
debounce={false}
|
||||
elementType="div"
|
||||
height={32}
|
||||
offset={500}
|
||||
offsetBottom={0}
|
||||
offsetHorizontal={0}
|
||||
offsetLeft={0}
|
||||
offsetRight={0}
|
||||
offsetTop={0}
|
||||
offsetVertical={0}
|
||||
throttle={0}
|
||||
<label
|
||||
className="ant-checkbox-wrapper"
|
||||
>
|
||||
<div
|
||||
className="LazyLoad"
|
||||
style={
|
||||
Object {
|
||||
"height": 32,
|
||||
"width": undefined,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</LazyLoad>
|
||||
</ListItem>
|
||||
</AnimateChild>
|
||||
</ul>
|
||||
</Animate>
|
||||
<Checkbox
|
||||
checked={false}
|
||||
className=""
|
||||
defaultChecked={false}
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
prefixCls="ant-checkbox"
|
||||
style={Object {}}
|
||||
type="checkbox"
|
||||
>
|
||||
<span
|
||||
className="ant-checkbox"
|
||||
style={Object {}}
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="ant-checkbox-input"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</Checkbox>
|
||||
</label>
|
||||
</Checkbox>
|
||||
<span
|
||||
className="ant-transfer-list-content-item-text"
|
||||
>
|
||||
label
|
||||
</span>
|
||||
</li>
|
||||
</ListItem>
|
||||
</ul>
|
||||
</ListBody>
|
||||
</div>
|
||||
</div>
|
||||
@ -899,7 +893,6 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
handleFilter={[Function]}
|
||||
itemUnit="item"
|
||||
itemsUnit="items"
|
||||
lazy={Object {}}
|
||||
notFoundContent={
|
||||
<Context.Consumer>
|
||||
[Function]
|
||||
|
||||
@ -30,7 +30,6 @@ const listCommonProps = {
|
||||
],
|
||||
selectedKeys: ['a'],
|
||||
targetKeys: ['b'],
|
||||
lazy: false,
|
||||
};
|
||||
|
||||
const listDisabledProps = {
|
||||
@ -47,7 +46,6 @@ const listDisabledProps = {
|
||||
],
|
||||
selectedKeys: ['a', 'b'],
|
||||
targetKeys: [],
|
||||
lazy: false,
|
||||
};
|
||||
|
||||
const searchTransferProps = {
|
||||
@ -91,7 +89,6 @@ const searchTransferProps = {
|
||||
],
|
||||
selectedKeys: [],
|
||||
targetKeys: ['3', '4'],
|
||||
lazy: false,
|
||||
};
|
||||
|
||||
describe('Transfer', () => {
|
||||
|
||||
@ -22,23 +22,12 @@ const listCommonProps = {
|
||||
],
|
||||
checkedKeys: ['a'],
|
||||
notFoundContent: 'Not Found',
|
||||
lazy: false,
|
||||
};
|
||||
|
||||
describe('Transfer.List', () => {
|
||||
beforeAll(() => {
|
||||
jest.useFakeTimers();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<List {...listCommonProps} />);
|
||||
jest.runAllTimers();
|
||||
wrapper.update();
|
||||
expect(wrapper.find('ListBody').state().mounted).toBeTruthy();
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
@ -60,7 +60,6 @@ describe('Transfer.Search', () => {
|
||||
.find('.ant-input')
|
||||
.at(0)
|
||||
.simulate('change', { target: { value: 'a' } });
|
||||
jest.runAllTimers();
|
||||
expect(onSearch).toHaveBeenCalledWith('left', 'a');
|
||||
|
||||
onSearch.mockReset();
|
||||
@ -84,7 +83,6 @@ describe('Transfer.Search', () => {
|
||||
.find('.ant-input')
|
||||
.at(0)
|
||||
.simulate('change', { target: { value: 'a' } });
|
||||
jest.runAllTimers();
|
||||
|
||||
expect(errorSpy.mock.calls.length).toBe(0);
|
||||
expect(onSearchChange).not.toHaveBeenCalled();
|
||||
|
||||
@ -25,7 +25,6 @@ One or more elements can be selected from either column, one click on the proper
|
||||
| disabled | Whether disabled transfer | boolean | false | |
|
||||
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | | |
|
||||
| footer | A function used for rendering the footer. | (props) => ReactNode | | |
|
||||
| lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` | |
|
||||
| listStyle | A custom CSS style used for rendering the transfer columns. | object\|({direction: 'left'\|'right'}) => object | | |
|
||||
| locale | i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` | |
|
||||
| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] | |
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import * as PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import List, { TransferListProps } from './list';
|
||||
import Operation from './operation';
|
||||
import Search from './search';
|
||||
@ -58,8 +56,7 @@ export interface TransferProps {
|
||||
footer?: (props: TransferListProps) => React.ReactNode;
|
||||
rowKey?: (record: TransferItem) => string;
|
||||
onSearch?: (direction: TransferDirection, value: string) => void;
|
||||
lazy?: {} | boolean;
|
||||
onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLDivElement>) => void;
|
||||
onScroll?: (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => void;
|
||||
children?: (props: TransferListBodyProps) => React.ReactNode;
|
||||
showSelectAll?: boolean;
|
||||
}
|
||||
@ -87,28 +84,6 @@ class Transfer extends React.Component<TransferProps, any> {
|
||||
listStyle: () => {},
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
dataSource: PropTypes.array as PropTypes.Validator<TransferItem[]>,
|
||||
render: PropTypes.func,
|
||||
targetKeys: PropTypes.array,
|
||||
onChange: PropTypes.func,
|
||||
height: PropTypes.number,
|
||||
style: PropTypes.object,
|
||||
listStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
||||
operationStyle: PropTypes.object,
|
||||
className: PropTypes.string,
|
||||
titles: PropTypes.array,
|
||||
operations: PropTypes.array,
|
||||
showSearch: PropTypes.bool,
|
||||
filterOption: PropTypes.func,
|
||||
locale: PropTypes.object,
|
||||
footer: PropTypes.func,
|
||||
rowKey: PropTypes.func,
|
||||
lazy: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(nextProps: TransferProps) {
|
||||
if (nextProps.selectedKeys) {
|
||||
const targetKeys = nextProps.targetKeys || [];
|
||||
@ -259,16 +234,16 @@ class Transfer extends React.Component<TransferProps, any> {
|
||||
onRightItemSelect = (selectedKey: string, checked: boolean) =>
|
||||
this.onItemSelect('right', selectedKey, checked);
|
||||
|
||||
handleScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLDivElement>) => {
|
||||
handleScroll = (direction: TransferDirection, e: React.SyntheticEvent<HTMLUListElement>) => {
|
||||
const { onScroll } = this.props;
|
||||
if (onScroll) {
|
||||
onScroll(direction, e);
|
||||
}
|
||||
};
|
||||
|
||||
handleLeftScroll = (e: React.SyntheticEvent<HTMLDivElement>) => this.handleScroll('left', e);
|
||||
handleLeftScroll = (e: React.SyntheticEvent<HTMLUListElement>) => this.handleScroll('left', e);
|
||||
|
||||
handleRightScroll = (e: React.SyntheticEvent<HTMLDivElement>) => this.handleScroll('right', e);
|
||||
handleRightScroll = (e: React.SyntheticEvent<HTMLUListElement>) => this.handleScroll('right', e);
|
||||
|
||||
handleSelectChange(direction: TransferDirection, holder: string[]) {
|
||||
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
|
||||
@ -335,7 +310,6 @@ class Transfer extends React.Component<TransferProps, any> {
|
||||
operationStyle,
|
||||
filterOption,
|
||||
render,
|
||||
lazy,
|
||||
children,
|
||||
showSelectAll,
|
||||
} = this.props;
|
||||
@ -374,7 +348,6 @@ class Transfer extends React.Component<TransferProps, any> {
|
||||
showSearch={showSearch}
|
||||
renderList={children}
|
||||
footer={footer}
|
||||
lazy={lazy}
|
||||
onScroll={this.handleLeftScroll}
|
||||
disabled={disabled}
|
||||
direction="left"
|
||||
@ -407,7 +380,6 @@ class Transfer extends React.Component<TransferProps, any> {
|
||||
showSearch={showSearch}
|
||||
renderList={children}
|
||||
footer={footer}
|
||||
lazy={lazy}
|
||||
onScroll={this.handleRightScroll}
|
||||
disabled={disabled}
|
||||
direction="right"
|
||||
@ -429,6 +401,4 @@ class Transfer extends React.Component<TransferProps, any> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Transfer);
|
||||
|
||||
export default Transfer;
|
||||
|
||||
@ -28,7 +28,6 @@ title: Transfer
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | | (inputValue, option): boolean | | |
|
||||
| footer | 底部渲染函数 | (props) => ReactNode | | |
|
||||
| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object\|boolean | `{ height: 32, offset: 32 }` | |
|
||||
| listStyle | 两个穿梭框的自定义样式 | object\|({direction: 'left'\|'right'}) => object | | |
|
||||
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | `{ itemUnit: '项', itemsUnit: '项', searchPlaceholder: '请输入搜索内容' }` | |
|
||||
| operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] | |
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import * as ReactDOM from 'react-dom';
|
||||
import omit from 'omit.js';
|
||||
import classNames from 'classnames';
|
||||
import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
|
||||
@ -7,7 +6,6 @@ import Checkbox from '../checkbox';
|
||||
import { TransferItem, TransferDirection, RenderResult, RenderResultObject } from './index';
|
||||
import Search from './search';
|
||||
import defaultRenderList, { TransferListBodyProps, OmitProps } from './renderListBody';
|
||||
import triggerEvent from '../_util/triggerEvent';
|
||||
|
||||
const defaultRender = () => null;
|
||||
|
||||
@ -46,8 +44,7 @@ export interface TransferListProps {
|
||||
itemsUnit: string;
|
||||
renderList?: RenderListFunction;
|
||||
footer?: (props: TransferListProps) => React.ReactNode;
|
||||
lazy?: boolean | {};
|
||||
onScroll: Function;
|
||||
onScroll: (e: React.UIEvent<HTMLUListElement>) => void;
|
||||
disabled?: boolean;
|
||||
direction: TransferDirection;
|
||||
showSelectAll?: boolean;
|
||||
@ -75,7 +72,6 @@ export default class TransferList extends React.Component<TransferListProps, Tra
|
||||
dataSource: [],
|
||||
titleText: '',
|
||||
showSearch: false,
|
||||
lazy: {},
|
||||
};
|
||||
|
||||
timer: number;
|
||||
@ -220,18 +216,6 @@ export default class TransferList extends React.Component<TransferListProps, Tra
|
||||
} = e;
|
||||
this.setState({ filterValue });
|
||||
handleFilter(e);
|
||||
if (!filterValue) {
|
||||
return;
|
||||
}
|
||||
// Manually trigger scroll event for lazy search bug
|
||||
// https://github.com/ant-design/ant-design/issues/5631
|
||||
this.triggerScrollTimer = window.setTimeout(() => {
|
||||
const transferNode = ReactDOM.findDOMNode(this) as Element;
|
||||
const listNode = transferNode.querySelectorAll('.ant-transfer-list-content')[0];
|
||||
if (listNode) {
|
||||
triggerEvent(listNode, 'scroll');
|
||||
}
|
||||
}, 0);
|
||||
};
|
||||
|
||||
handleClear = () => {
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { findDOMNode } from 'react-dom';
|
||||
import Animate from 'rc-animate';
|
||||
import raf from '../_util/raf';
|
||||
import { Omit, tuple } from '../_util/type';
|
||||
import { TransferItem } from '.';
|
||||
import { TransferListProps, RenderedItem } from './list';
|
||||
import ListItem from './ListItem';
|
||||
|
||||
export const OmitProps = tuple('handleFilter', 'handleClear', 'checkedKeys');
|
||||
export type OmitProp = (typeof OmitProps)[number];
|
||||
export type OmitProp = typeof OmitProps[number];
|
||||
type PartialTransferListProps = Omit<TransferListProps, OmitProp>;
|
||||
|
||||
export interface TransferListBodyProps extends PartialTransferListProps {
|
||||
@ -18,41 +15,6 @@ export interface TransferListBodyProps extends PartialTransferListProps {
|
||||
}
|
||||
|
||||
class ListBody extends React.Component<TransferListBodyProps> {
|
||||
state = {
|
||||
mounted: false,
|
||||
};
|
||||
|
||||
private mountId: number;
|
||||
|
||||
private lazyId: number;
|
||||
|
||||
componentDidMount() {
|
||||
this.mountId = raf(() => {
|
||||
this.setState({ mounted: true });
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: TransferListBodyProps) {
|
||||
const { filteredRenderItems, lazy } = this.props;
|
||||
if (prevProps.filteredRenderItems.length !== filteredRenderItems.length && lazy !== false) {
|
||||
// TODO: Replace this with ref when react 15 support removed.
|
||||
const container = findDOMNode(this);
|
||||
|
||||
raf.cancel(this.lazyId);
|
||||
this.lazyId = raf(() => {
|
||||
if (container) {
|
||||
const scrollEvent = new Event('scroll', { bubbles: true });
|
||||
container.dispatchEvent(scrollEvent);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
raf.cancel(this.mountId);
|
||||
raf.cancel(this.lazyId);
|
||||
}
|
||||
|
||||
onItemSelect = (item: TransferItem) => {
|
||||
const { onItemSelect, selectedKeys } = this.props;
|
||||
const checked = selectedKeys.indexOf(item.key) >= 0;
|
||||
@ -60,24 +22,16 @@ class ListBody extends React.Component<TransferListBodyProps> {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { mounted } = this.state;
|
||||
const {
|
||||
prefixCls,
|
||||
onScroll,
|
||||
filteredRenderItems,
|
||||
lazy,
|
||||
selectedKeys,
|
||||
disabled: globalDisabled,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Animate
|
||||
component="ul"
|
||||
componentProps={{ onScroll }}
|
||||
className={`${prefixCls}-content`}
|
||||
transitionName={mounted ? `${prefixCls}-content-item-highlight` : ''}
|
||||
transitionLeave={false}
|
||||
>
|
||||
<ul className={`${prefixCls}-content`} onScroll={onScroll}>
|
||||
{filteredRenderItems.map(({ renderedEl, renderedText, item }: RenderedItem) => {
|
||||
const { disabled } = item;
|
||||
const checked = selectedKeys.indexOf(item.key) >= 0;
|
||||
@ -87,7 +41,6 @@ class ListBody extends React.Component<TransferListBodyProps> {
|
||||
disabled={globalDisabled || disabled}
|
||||
key={item.key}
|
||||
item={item}
|
||||
lazy={lazy}
|
||||
renderedText={renderedText}
|
||||
renderedEl={renderedEl}
|
||||
checked={checked}
|
||||
@ -96,7 +49,7 @@ class ListBody extends React.Component<TransferListBodyProps> {
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Animate>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import omit from 'omit.js';
|
||||
import debounce from 'lodash/debounce';
|
||||
import { conductExpandParent } from 'rc-tree/lib/util';
|
||||
import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { FileOutlined, FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
|
||||
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
||||
|
||||
@ -243,6 +242,4 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(DirectoryTree);
|
||||
|
||||
export default DirectoryTree;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import toArray from 'rc-util/lib/Children/toArray';
|
||||
import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
|
||||
import copy from 'copy-to-clipboard';
|
||||
@ -485,8 +484,6 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Base);
|
||||
|
||||
export default withConfigConsumer<InternalBlockProps>({
|
||||
prefixCls: 'typography',
|
||||
})(Base);
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import * as React from 'react';
|
||||
import KeyCode from 'rc-util/lib/KeyCode';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import { EnterOutlined } from '@ant-design/icons';
|
||||
|
||||
import TextArea from '../input/TextArea';
|
||||
@ -134,6 +133,4 @@ class Editable extends React.Component<EditableProps, EditableState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Editable);
|
||||
|
||||
export default Editable;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { polyfill } from 'react-lifecycles-compat';
|
||||
import RcUpload from 'rc-upload';
|
||||
import classNames from 'classnames';
|
||||
import uniqBy from 'lodash/uniqBy';
|
||||
@ -377,6 +376,4 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
}
|
||||
}
|
||||
|
||||
polyfill(Upload);
|
||||
|
||||
export default Upload;
|
||||
|
||||
@ -6,7 +6,50 @@ exports[`renders ./components/upload/demo/avatar.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture-card"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<div>
|
||||
<span
|
||||
aria-label="plus"
|
||||
class="anticon anticon-plus"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="plus"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs />
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
/>
|
||||
<path
|
||||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-upload-text"
|
||||
>
|
||||
Upload
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
`;
|
||||
|
||||
@ -16,7 +59,47 @@ exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Click to Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
@ -29,7 +112,47 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
@ -318,7 +441,49 @@ exports[`renders ./components/upload/demo/directory.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
directory="directory"
|
||||
style="display:none"
|
||||
type="file"
|
||||
webkitdirectory="webkitdirectory"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload Directory
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
@ -329,7 +494,58 @@ exports[`renders ./components/upload/demo/drag.md correctly 1`] = `
|
||||
<span>
|
||||
<div
|
||||
class="ant-upload ant-upload-drag"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload ant-upload-btn"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
multiple=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<div
|
||||
class="ant-upload-drag-container"
|
||||
>
|
||||
<p
|
||||
class="ant-upload-drag-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="inbox"
|
||||
class="anticon anticon-inbox"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="inbox"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</p>
|
||||
<p
|
||||
class="ant-upload-text"
|
||||
>
|
||||
Click or drag file to this area to upload
|
||||
</p>
|
||||
<p
|
||||
class="ant-upload-hint"
|
||||
>
|
||||
Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
|
||||
</p>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
@ -342,7 +558,48 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
multiple=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
>
|
||||
@ -1022,7 +1279,50 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture-card"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<div>
|
||||
<span
|
||||
aria-label="plus"
|
||||
class="anticon anticon-plus"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="plus"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs />
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
/>
|
||||
<path
|
||||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-upload-text"
|
||||
>
|
||||
Upload
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
@ -1034,7 +1334,47 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
@ -1227,7 +1567,47 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
>
|
||||
@ -1423,7 +1803,47 @@ exports[`renders ./components/upload/demo/preview-file.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-picture"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-picture"
|
||||
/>
|
||||
@ -1438,7 +1858,47 @@ exports[`renders ./components/upload/demo/transform-file.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
@ -1453,7 +1913,47 @@ exports[`renders ./components/upload/demo/upload-manually.md correctly 1`] = `
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Select File
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
@ -1500,7 +2000,47 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
|
||||
>
|
||||
<div
|
||||
class="ant-upload ant-upload-select ant-upload-select-text"
|
||||
/>
|
||||
>
|
||||
<span
|
||||
class="ant-upload"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
accept=""
|
||||
style="display:none"
|
||||
type="file"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="upload"
|
||||
class="anticon anticon-upload"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="upload"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Click to Upload
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-upload-list ant-upload-list-text"
|
||||
/>
|
||||
|
||||
@ -94,23 +94,19 @@ In the real world you will need a development workflow consisting of `compile/bu
|
||||
|
||||
## Compatibility
|
||||
|
||||
Ant Design React supports all modern browsers and IE9+.
|
||||
Ant Design React supports all modern browsers and IE11+.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
We offer very limited support for IE9/10 which means some styles and animations will be mininal for them. Also, we use Flex layout in a few components.
|
||||
|
||||
> Note: Different than Ant Design, Ant Design Pro supports IE11+.
|
||||
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
Polyfills are needed for IE browsers. We recommend [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) for it. You can set `targets` config if you are using [umi](http://umijs.org/).
|
||||
|
||||
Ant Design 3.0 supports both React 15 and 16 but we strongly suggest React 16 for better performance and fewer bugs.
|
||||
|
||||
#### IE8 note
|
||||
#### IE note
|
||||
|
||||
> We don't support IE8 after `antd@2.0`.
|
||||
> We drop support of IE8 after `antd@2.0`, IE9/10 after `antd@4.0`,
|
||||
|
||||
## Customized Work Flow
|
||||
|
||||
|
||||
@ -101,23 +101,19 @@ ReactDOM.render(<App />, document.getElementById('root'));
|
||||
|
||||
## 兼容性
|
||||
|
||||
Ant Design React 支持所有的现代浏览器和 IE9+。
|
||||
Ant Design React 支持所有的现代浏览器和 IE11+。
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
我们对 IE9/10 提供有限度的支持，部分样式和动画在 IE9/10 下的表现会比较裸。少数组件使用到了 Flex 布局，在 IE9/10 下也会有问题。
|
||||
|
||||
> 注意，不同于 Ant Design，Ant Design Pro 是只支持到 IE11+ 的。
|
||||
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||
|
||||
对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env) 来解决浏览器兼容问题。如果你在使用 [umi](http://umijs.org/)，可以直接使用 [targets](https://umijs.org/zh/config/#targets) 配置。
|
||||
|
||||
Ant Design 3.0 对 React 15/16 两个版本提供支持，但是我们强烈建议你升级到 React 16，以便获得更好的性能和遇到更少的问题。
|
||||
|
||||
#### IE8 note
|
||||
#### IE note
|
||||
|
||||
> `antd@2.0` 之后将不再支持 IE8。
|
||||
> `antd@2.0` 之后将不再支持 IE8，`antd@4.0` 之后将不再支持 IE9/10。
|
||||
|
||||
## 自行构建
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
|
||||
|
||||
## Environment Support
|
||||
|
||||
- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
|
||||
- Modern browsers and Internet Explorer 11+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
|
||||
- Server-side Rendering
|
||||
- [Electron](http://electron.atom.io/)
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ title: Ant Design of React
|
||||
|
||||
## 支持环境
|
||||
|
||||
- 现代浏览器和 IE9 及以上（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
|
||||
- 现代浏览器和 IE11 及以上（需要 [polyfills](https://ant.design/docs/react/getting-started-cn#兼容性)）。
|
||||
- 支持服务端渲染。
|
||||
- [Electron](https://electronjs.org/)
|
||||
|
||||
|
||||
28
package.json
28
package.json
@ -86,21 +86,15 @@
|
||||
"last 2 version",
|
||||
"Firefox ESR",
|
||||
"> 1%",
|
||||
"ie >= 9"
|
||||
"ie >= 11"
|
||||
],
|
||||
"dependencies": {
|
||||
"@ant-design/create-react-context": "^0.2.4",
|
||||
"@ant-design/icons": "^4.0.0-alpha.11",
|
||||
"@ant-design/icons-svg": "^4.0.0-alpha.0",
|
||||
"@types/react-slick": "^0.23.4",
|
||||
"array-tree-filter": "^2.1.0",
|
||||
"babel-runtime": "6.x",
|
||||
"classnames": "~2.2.6",
|
||||
"copy-to-clipboard": "^3.2.0",
|
||||
"css-animation": "^1.5.0",
|
||||
"dom-closest": "^0.2.0",
|
||||
"dom-scroll-into-view": "^1.2.1",
|
||||
"enquire.js": "^2.1.6",
|
||||
"lodash": "^4.17.13",
|
||||
"moment": "^2.24.0",
|
||||
"omit.js": "^1.0.2",
|
||||
@ -115,8 +109,8 @@
|
||||
"rc-dropdown": "~3.0.0-alpha.0",
|
||||
"rc-field-form": "^0.0.0-alpha.17",
|
||||
"rc-input-number": "~4.5.0",
|
||||
"rc-mentions": "~1.0.0-alpha.0",
|
||||
"rc-menu": "~8.0.0-alpha.4",
|
||||
"rc-mentions": "~1.0.0-alpha.3",
|
||||
"rc-menu": "~8.0.0-alpha.7",
|
||||
"rc-notification": "~3.3.1",
|
||||
"rc-pagination": "~1.20.11",
|
||||
"rc-picker": "^0.0.1-alpha.58",
|
||||
@ -124,27 +118,27 @@
|
||||
"rc-rate": "~2.5.0",
|
||||
"rc-resize-observer": "^0.1.0",
|
||||
"rc-select": "~10.0.0-alpha.34",
|
||||
"rc-slider": "~8.7.1",
|
||||
"rc-slider": "~9.0.0-alpha.0",
|
||||
"rc-steps": "~3.5.0",
|
||||
"rc-switch": "~1.9.0",
|
||||
"rc-table": "~7.0.0-alpha.20",
|
||||
"rc-tabs": "~9.7.0",
|
||||
"rc-tabs": "~10.0.0-alpha.0",
|
||||
"rc-time-picker": "~4.0.0-alpha.2",
|
||||
"rc-tooltip": "~4.0.0-alpha.3",
|
||||
"rc-tree": "~3.0.0-alpha.37",
|
||||
"rc-tree-select": "~3.0.0-alpha.5",
|
||||
"rc-trigger": "~4.0.0-alpha.7",
|
||||
"rc-upload": "~2.9.1",
|
||||
"rc-upload": "~3.0.0-alpha.0",
|
||||
"rc-util": "~4.16.1",
|
||||
"rc-virtual-list": "^0.0.0-alpha.25",
|
||||
"react-lazy-load": "^3.0.13",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"react-slick": "~0.25.2",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"scroll-into-view-if-needed": "^2.2.20",
|
||||
"shallowequal": "^1.1.0",
|
||||
"warning": "~4.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/bisheng-plugin": "^2.0.1",
|
||||
"@ant-design/colors": "^3.2.2",
|
||||
"@ant-design/tools": "^8.0.4",
|
||||
"@packtracker/webpack-plugin": "^2.0.1",
|
||||
@ -167,7 +161,6 @@
|
||||
"babel-eslint": "^10.0.1",
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"bisheng": "~1.3.3",
|
||||
"bisheng-plugin-antd": "^1.3.1",
|
||||
"bisheng-plugin-description": "^0.1.4",
|
||||
"bisheng-plugin-react": "^1.1.0",
|
||||
"bisheng-plugin-toc": "^0.4.4",
|
||||
@ -217,7 +210,6 @@
|
||||
"rc-footer": "^0.6.0",
|
||||
"rc-queue-anim": "^1.6.12",
|
||||
"rc-scroll-anim": "^2.5.8",
|
||||
"rc-trigger": "^4.0.0-alpha.5",
|
||||
"rc-tween-one": "^2.4.1",
|
||||
"react": "^16.9.0",
|
||||
"react-color": "^2.17.3",
|
||||
@ -262,11 +254,11 @@
|
||||
"bundlesize": [
|
||||
{
|
||||
"path": "./dist/antd.min.js",
|
||||
"maxSize": "540 kB"
|
||||
"maxSize": "300 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd.min.css",
|
||||
"maxSize": "60 kB"
|
||||
"maxSize": "55 kB"
|
||||
}
|
||||
],
|
||||
"title": "Ant Design"
|
||||
|
||||
@ -48,7 +48,7 @@ module.exports = {
|
||||
plugins: [
|
||||
'bisheng-plugin-description',
|
||||
'bisheng-plugin-toc?maxDepth=2&keepElem',
|
||||
'bisheng-plugin-antd?injectProvider',
|
||||
'@ant-design/bisheng-plugin?injectProvider',
|
||||
'bisheng-plugin-react?lang=__react',
|
||||
],
|
||||
routes: {
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet/less" type="text/css" href="{{ root }}color.less" />
|
||||
<script src="https://polyfill.alicdn.com/polyfill.min.js?features=default,es2015,matchMedia,Intl"></script>
|
||||
<script src="https://polyfill.alicdn.com/polyfill.min.js?features=default,es2015,Intl"></script>
|
||||
<script>
|
||||
(function() {
|
||||
function isLocalStorageNameSupported() {
|
||||
@ -82,7 +82,8 @@
|
||||
<div id="react-content">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
{% for jsFile in manifest["js"] %}<script src="{{ root }}{{ jsFile }}"></script>
|
||||
{% for jsFile in manifest["js"] %}
|
||||
<script src="{{ root }}{{ jsFile }}"></script>
|
||||
{% endfor %}
|
||||
<!-- Global Site Tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
import createReactContext from '@ant-design/create-react-context/lib/implementation';
|
||||
|
||||
export default createReactContext;
|
||||
@ -11,6 +11,16 @@ if (typeof window !== 'undefined') {
|
||||
global.window.dispatchEvent(new Event('resize'));
|
||||
};
|
||||
global.window.scrollTo = () => {};
|
||||
// ref: https://github.com/ant-design/ant-design/issues/18774
|
||||
if (!window.matchMedia) {
|
||||
Object.defineProperty(global.window, 'matchMedia', {
|
||||
value: jest.fn(query => ({
|
||||
matches: query.includes('max-width'),
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
})),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// The built-in requestAnimationFrame and cancelAnimationFrame not working with jest.runFakeTimes()
|
||||
|
||||
11
typings/custom-typings.d.ts
vendored
11
typings/custom-typings.d.ts
vendored
@ -23,8 +23,6 @@ declare module 'rc-tabs*';
|
||||
declare module 'rc-tree';
|
||||
declare module 'rc-tree/lib/util';
|
||||
|
||||
declare module 'rc-calendar';
|
||||
|
||||
declare module 'rc-input-number';
|
||||
|
||||
declare module 'rc-collapse';
|
||||
@ -51,12 +49,6 @@ declare module 'rc-switch';
|
||||
|
||||
declare module 'rc-upload';
|
||||
|
||||
declare module 'react-lazy-load';
|
||||
|
||||
declare module 'dom-closest';
|
||||
|
||||
declare module 'dom-scroll-into-view';
|
||||
|
||||
declare module '*.json' {
|
||||
const value: any;
|
||||
export const version: string;
|
||||
@ -64,6 +56,3 @@ declare module '*.json' {
|
||||
}
|
||||
|
||||
declare module 'react-copy-to-clipboard';
|
||||
|
||||
// https://github.com/ant-design/ant-design/pull/19254
|
||||
declare module 'react-lifecycles-compat';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user