From 1a0a06fca9263274fb89706e374f95ea2d445018 Mon Sep 17 00:00:00 2001 From: zombieJ Date: Wed, 5 Dec 2018 19:12:18 +0800 Subject: [PATCH] ConfigProvider support prefixCls (#13389) Basic support prefixCls. --- components/affix/index.tsx | 14 +- components/alert/index.tsx | 15 +- components/anchor/Anchor.tsx | 25 +- components/anchor/AnchorLink.tsx | 15 +- components/auto-complete/index.tsx | 20 +- components/avatar/index.tsx | 17 +- components/back-top/index.tsx | 22 +- components/badge/ScrollNumber.tsx | 29 +- .../__snapshots__/index.test.js.snap | 3814 ++-- components/badge/index.tsx | 41 +- components/breadcrumb/Breadcrumb.tsx | 20 +- components/breadcrumb/BreadcrumbItem.tsx | 18 +- .../__snapshots__/router.test.js.snap | 181 +- components/button/button-group.tsx | 44 +- components/button/button.tsx | 23 +- components/calendar/Constants.tsx | 1 - components/calendar/Header.tsx | 31 +- components/calendar/index.tsx | 117 +- components/card/Grid.tsx | 16 +- components/card/Meta.tsx | 44 +- components/card/index.tsx | 15 +- components/carousel/index.tsx | 14 +- .../__snapshots__/index.test.js.snap | 2 - components/cascader/index.tsx | 13 +- components/checkbox/Checkbox.tsx | 15 +- components/checkbox/Group.tsx | 18 +- .../checkbox/__tests__/checkbox.test.js | 8 +- components/collapse/Collapse.tsx | 18 +- components/collapse/CollapsePanel.tsx | 22 +- components/comment/index.tsx | 25 +- .../__snapshots__/index.test.js.snap | 15793 ++++++++++++++++ .../config-provider/__tests__/index.test.js | 595 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 61 +- components/config-provider/index.zh-CN.md | 1 + components/date-picker/RangePicker.tsx | 30 +- components/date-picker/WeekPicker.tsx | 23 +- components/date-picker/createPicker.tsx | 25 +- components/date-picker/wrapPicker.tsx | 103 +- components/divider/index.tsx | 51 +- components/drawer/index.tsx | 77 +- components/dropdown/dropdown-button.tsx | 9 +- components/dropdown/dropdown.tsx | 12 +- components/form/Form.tsx | 18 +- components/form/FormItem.tsx | 63 +- components/form/__tests__/index.test.js | 6 +- components/grid/col.tsx | 18 +- components/grid/row.tsx | 16 +- components/input-number/index.tsx | 52 +- components/input/Group.tsx | 46 +- components/input/Input.tsx | 49 +- components/input/Search.tsx | 27 +- components/input/TextArea.tsx | 32 +- .../__snapshots__/index.test.js.snap | 181 +- components/layout/Sider.tsx | 18 +- components/layout/layout.tsx | 29 +- components/list/Item.tsx | 67 +- components/list/index.tsx | 23 +- components/mention/index.tsx | 17 +- components/menu/index.tsx | 16 +- components/modal/Modal.tsx | 23 +- components/pagination/Pagination.tsx | 44 +- components/popconfirm/index.tsx | 23 +- components/popover/index.tsx | 22 +- components/progress/progress.tsx | 16 +- components/radio/__tests__/group.test.js | 8 +- components/radio/__tests__/radio.test.js | 8 +- components/radio/group.tsx | 15 +- components/radio/radio.tsx | 15 +- components/radio/radioButton.tsx | 22 +- components/rate/index.tsx | 16 +- components/select/index.tsx | 189 +- components/skeleton/Avatar.tsx | 1 - components/skeleton/Paragraph.tsx | 4 - components/skeleton/Title.tsx | 4 - components/skeleton/index.tsx | 20 +- components/slider/index.tsx | 61 +- components/spin/__tests__/index.test.js | 6 +- components/spin/index.tsx | 25 +- components/steps/index.tsx | 23 +- components/switch/index.tsx | 22 +- components/table/Table.tsx | 71 +- components/tabs/index.tsx | 16 +- components/tag/CheckableTag.tsx | 14 +- components/tag/index.tsx | 19 +- components/time-picker/index.tsx | 143 +- components/timeline/Timeline.tsx | 17 +- components/timeline/TimelineItem.tsx | 75 +- components/tooltip/index.tsx | 17 +- .../__snapshots__/search.test.js.snap | 42 +- components/transfer/index.tsx | 168 +- components/tree-select/index.tsx | 125 +- components/tree/DirectoryTree.tsx | 15 +- components/tree/Tree.tsx | 25 +- components/upload/Upload.tsx | 21 +- components/upload/UploadList.tsx | 22 +- 96 files changed, 20348 insertions(+), 3125 deletions(-) delete mode 100644 components/calendar/Constants.tsx create mode 100644 components/config-provider/__tests__/__snapshots__/index.test.js.snap create mode 100644 components/config-provider/__tests__/index.test.js diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 8f0028bddd..5c049d43d0 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -5,6 +5,7 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener'; import classNames from 'classnames'; import shallowequal from 'shallowequal'; import omit from 'omit.js'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import getScroll from '../_util/getScroll'; import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame'; @@ -270,9 +271,10 @@ export default class Affix extends React.Component { this.placeholderNode = node; } - render() { + renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls } = this.props; const className = classNames({ - [this.props.prefixCls || 'ant-affix']: this.state.affixStyle, + [getPrefixCls('affix', prefixCls)]: this.state.affixStyle, }); const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']); @@ -284,5 +286,13 @@ export default class Affix extends React.Component { ); + }; + + render() { + return ( + + {this.renderAffix} + + ); } } diff --git a/components/alert/index.tsx b/components/alert/index.tsx index f4647d12f8..f8712128b3 100755 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -3,6 +3,7 @@ import * as ReactDOM from 'react-dom'; import Animate from 'rc-animate'; import Icon, { ThemeType } from '../icon'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import getDataOrAriaProps from '../_util/getDataOrAriaProps'; function noop() { } @@ -67,13 +68,15 @@ export default class Alert extends React.Component { (this.props.afterClose || noop)(); } - render() { + renderAlert = ({ getPrefixCls }: ConfigConsumerProps) => { const { - description, prefixCls = 'ant-alert', message, closeText, banner, + description, prefixCls: customizePrefixCls, message, closeText, banner, className = '', style, icon, } = this.props; let { closable, type, showIcon, iconType } = this.props; + const prefixCls = getPrefixCls('alert', customizePrefixCls); + // banner模式默认有 Icon showIcon = banner && showIcon === undefined ? true : showIcon; // banner模式默认为警告 @@ -156,4 +159,12 @@ export default class Alert extends React.Component { ); } + + render() { + return ( + + {this.renderAlert} + + ); + } } diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 248ed36c39..6466bf9468 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import Affix from '../affix'; import AnchorLink from './AnchorLink'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import getScroll from '../_util/getScroll'; import raf from 'raf'; @@ -117,7 +118,6 @@ export default class Anchor extends React.Component { static Link: typeof AnchorLink; static defaultProps = { - prefixCls: 'ant-anchor', affix: true, showInkInFixed: false, getContainer: getDefaultContainer, @@ -137,6 +137,8 @@ export default class Anchor extends React.Component { private scrollEvent: any; private animating: boolean; + private prefixCls?: string; + getChildContext() { const antAnchor: AntAnchor = { registerLink: (link: string) => { @@ -227,7 +229,7 @@ export default class Anchor extends React.Component { if (typeof document === 'undefined') { return; } - const { prefixCls } = this.props; + const prefixCls = this.prefixCls; const anchorNode = ReactDOM.findDOMNode(this) as Element; const linkNode = anchorNode.getElementsByClassName(`${prefixCls}-link-title-active`)[0]; if (linkNode) { @@ -239,9 +241,9 @@ export default class Anchor extends React.Component { this.inkNode = node; } - render() { + renderAnchor = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls, + prefixCls: customizePrefixCls, className = '', style, offsetTop, @@ -252,6 +254,13 @@ export default class Anchor extends React.Component { } = this.props; const { activeLink } = this.state; + const prefixCls = getPrefixCls('anchor', customizePrefixCls); + + // To support old version react. + // Have to add prefixCls on the instance. + // https://github.com/facebook/react/issues/12397 + this.prefixCls = prefixCls; + const inkClass = classNames(`${prefixCls}-ink-ball`, { visible: activeLink, }); @@ -287,4 +296,12 @@ export default class Anchor extends React.Component { ); } + + render() { + return( + + {this.renderAnchor} + + ); + } } diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index 36f179b45c..0bc2ea0e67 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import { AntAnchor } from './Anchor'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface AnchorLinkProps { prefixCls?: string; @@ -12,7 +13,6 @@ export interface AnchorLinkProps { export default class AnchorLink extends React.Component { static defaultProps = { - prefixCls: 'ant-anchor', href: '#', }; @@ -49,13 +49,14 @@ export default class AnchorLink extends React.Component { scrollTo(href); } - render() { + renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls, + prefixCls: customizePrefixCls, href, title, children, } = this.props; + const prefixCls = getPrefixCls('anchor', customizePrefixCls); const active = this.context.antAnchor.activeLink === href; const wrapperClassName = classNames(`${prefixCls}-link`, { [`${prefixCls}-link-active`]: active, @@ -77,4 +78,12 @@ export default class AnchorLink extends React.Component { ); } + + render() { + return ( + + {this.renderAnchorLink} + + ); + } } diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index acfaa9984d..5c54f145f6 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { Option, OptGroup } from 'rc-select'; import classNames from 'classnames'; -import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select'; -import Input from '../input'; import InputElement from './InputElement'; +import Input from '../input'; +import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface DataSourceItemObject { value: string; text: string; } export type DataSourceItemType = @@ -47,7 +48,6 @@ export default class AutoComplete extends React.Component static OptGroup = OptGroup as React.ClassicComponentClass; static defaultProps = { - prefixCls: 'ant-select', transitionName: 'slide-up', optionLabelProp: 'children', choiceTransitionName: 'zoom', @@ -81,10 +81,12 @@ export default class AutoComplete extends React.Component this.select = node; } - render() { + renderAutoComplete = ({ getPrefixCls }: ConfigConsumerProps) => { const { - size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children, + prefixCls: customizePrefixCls, + size, className = '', notFoundContent, optionLabelProp, dataSource, children, } = this.props; + const prefixCls = getPrefixCls('select', customizePrefixCls); const cls = classNames({ [`${prefixCls}-lg`]: size === 'large', @@ -134,4 +136,12 @@ export default class AutoComplete extends React.Component ); } + + render() { + return ( + + {this.renderAutoComplete} + + ); + } } diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx index 692fa6ab9d..729003b93a 100644 --- a/components/avatar/index.tsx +++ b/components/avatar/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import Icon from '../icon'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface AvatarProps { /** Shape of avatar, options:`circle`, `square` */ @@ -34,7 +35,6 @@ export interface AvatarState { export default class Avatar extends React.Component { static defaultProps = { - prefixCls: 'ant-avatar', shape: 'circle', size: 'default', }; @@ -85,13 +85,16 @@ export default class Avatar extends React.Component { } } - render() { + renderAvatar = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls, shape, size, src, srcSet, icon, className, alt, ...others + prefixCls: customizePrefixCls, + shape, size, src, srcSet, icon, className, alt, ...others } = this.props; const { isImgExist, scale } = this.state; + const prefixCls = getPrefixCls('avatar', customizePrefixCls); + const sizeCls = classNames({ [`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-sm`]: size === 'small', @@ -165,4 +168,12 @@ export default class Avatar extends React.Component { ); } + + render() { + return ( + + {this.renderAvatar} + + ); + } } diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index 87ef0e366c..f6d79afeee 100755 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -3,8 +3,9 @@ import Animate from 'rc-animate'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; import classNames from 'classnames'; import omit from 'omit.js'; -import getScroll from '../_util/getScroll'; import raf from 'raf'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import getScroll from '../_util/getScroll'; const easeInOutCubic = (t: number, b: number, c: number, d: number) => { const cc = c - b; @@ -29,6 +30,7 @@ export interface BackTopProps { prefixCls?: string; className?: string; style?: React.CSSProperties; + visible?: boolean; // Only for test. Don't use it. } export default class BackTop extends React.Component { @@ -102,8 +104,9 @@ export default class BackTop extends React.Component { } } - render() { - const { prefixCls = 'ant-back-top', className = '', children } = this.props; + renderBackTop = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className = '', children } = this.props; + const prefixCls = getPrefixCls('back-top', customizePrefixCls); const classString = classNames(prefixCls, className); const defaultElement = ( @@ -119,9 +122,12 @@ export default class BackTop extends React.Component { 'children', 'visibilityHeight', 'target', + 'visible', ]); - const backTopBtn = this.state.visible ? ( + const visible = 'visible' in this.props ? this.props.visible : this.state.visible; + + const backTopBtn = visible ? (
{children || defaultElement}
@@ -133,4 +139,12 @@ export default class BackTop extends React.Component { ); } + + render() { + return ( + + {this.renderBackTop} + + ); + } } diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index c9da6108bf..17714509da 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { createElement, Component } from 'react'; import omit from 'omit.js'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; function getNumberArray(num: string | number | undefined | null) { return num ? @@ -29,7 +30,6 @@ export interface ScrollNumberState { export default class ScrollNumber extends Component { static defaultProps = { - prefixCls: 'ant-scroll-number', count: null, onAnimated() { }, @@ -100,12 +100,12 @@ export default class ScrollNumber extends Component this.renderCurrentNumber(num, i)).reverse(); + .map((num, i) => this.renderCurrentNumber(prefixCls, num, i)).reverse(); } - render() { - const { prefixCls, className, style, title, component = 'sup', displayComponent } = this.props; + renderScrollNumber = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, style, title, component = 'sup', displayComponent, + } = this.props; // fix https://fb.me/react-unknown-prop const restProps = omit(this.props, [ 'count', @@ -135,11 +138,13 @@ export default class ScrollNumber extends Component @@ -154,7 +159,15 @@ export default class ScrollNumber extends Component + {this.renderScrollNumber} + ); } } diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap index 657fe94054..18ab6c03f1 100644 --- a/components/badge/__tests__/__snapshots__/index.test.js.snap +++ b/components/badge/__tests__/__snapshots__/index.test.js.snap @@ -174,247 +174,249 @@ exports[`Badge should render when count is changed 1`] = ` count={10} dot={false} overflowCount={99} - prefixCls="ant-badge" - scrollNumberPrefixCls="ant-scroll-number" showZero={false} > - - + - - - - -

+ - 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - - - - - + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + + `; @@ -423,440 +425,442 @@ exports[`Badge should render when count is changed 2`] = ` count={11} dot={false} overflowCount={99} - prefixCls="ant-badge" - scrollNumberPrefixCls="ant-scroll-number" showZero={false} > - - + - - - - -

+ - 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - -

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - - - - - + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + + `; @@ -865,440 +869,442 @@ exports[`Badge should render when count is changed 3`] = ` count={11} dot={false} overflowCount={99} - prefixCls="ant-badge" - scrollNumberPrefixCls="ant-scroll-number" showZero={false} > - - + - - - - -

+ - 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - -

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - - - - - + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + + `; @@ -1307,440 +1313,442 @@ exports[`Badge should render when count is changed 4`] = ` count={10} dot={false} overflowCount={99} - prefixCls="ant-badge" - scrollNumberPrefixCls="ant-scroll-number" showZero={false} > - - + - - - - -

+ - 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - -

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - - - - - + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + + `; @@ -1749,439 +1757,441 @@ exports[`Badge should render when count is changed 5`] = ` count={9} dot={false} overflowCount={99} - prefixCls="ant-badge" - scrollNumberPrefixCls="ant-scroll-number" showZero={false} > - - + - - - - -

+ - 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - -

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

-

- 0 -

-

- 1 -

-

- 2 -

-

- 3 -

-

- 4 -

-

- 5 -

-

- 6 -

-

- 7 -

-

- 8 -

-

- 9 -

- - - - - - + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + + `; diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 5f40d5a4ea..2e166342c7 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import Animate from 'rc-animate'; -import ScrollNumber from './ScrollNumber'; import classNames from 'classnames'; +import ScrollNumber from './ScrollNumber'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export { ScrollNumberProps } from './ScrollNumber'; @@ -26,8 +27,6 @@ export interface BadgeProps { export default class Badge extends React.Component { static defaultProps = { - prefixCls: 'ant-badge', - scrollNumberPrefixCls: 'ant-scroll-number', count: null, showZero: false, dot: false, @@ -41,9 +40,8 @@ export default class Badge extends React.Component { overflowCount: PropTypes.number, }; - getBadgeClassName() { + getBadgeClassName(prefixCls: string) { const { - prefixCls, className, status, children, @@ -106,8 +104,8 @@ export default class Badge extends React.Component { } : style; } - renderStatusText() { - const { prefixCls, text } = this.props; + renderStatusText(prefixCls: string) { + const { text } = this.props; const hidden = this.isHidden(); return (hidden || !text) ? null : ( {text} @@ -119,11 +117,9 @@ export default class Badge extends React.Component { return (count && typeof count === 'object') ? (count as React.ReactElement) : undefined; } - renderBadgeNumber() { + renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) { const { count, - prefixCls, - scrollNumberPrefixCls, status, } = this.props; @@ -154,12 +150,12 @@ export default class Badge extends React.Component { ); } - render() { + renderBadge = ({ getPrefixCls }: ConfigConsumerProps) => { const { count, showZero, - prefixCls, - scrollNumberPrefixCls, + prefixCls: customizePrefixCls, + scrollNumberPrefixCls: customizeScrollNumberPrefixCls, overflowCount, className, style, @@ -172,8 +168,11 @@ export default class Badge extends React.Component { ...restProps } = this.props; - const scrollNumber = this.renderBadgeNumber(); - const statusText = this.renderStatusText(); + const prefixCls = getPrefixCls('badge', customizePrefixCls); + const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls); + + const scrollNumber = this.renderBadgeNumber(prefixCls, scrollNumberPrefixCls); + const statusText = this.renderStatusText(prefixCls); const statusCls = classNames({ [`${prefixCls}-status-dot`]: !!status, @@ -185,7 +184,7 @@ export default class Badge extends React.Component { // if (!children && status) { return ( - + {text} @@ -193,7 +192,7 @@ export default class Badge extends React.Component { } return ( - + {children} { ); } + + render() { + return ( + + {this.renderBadge} + + ); + } } diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index 6e63ee9d3e..b4d05c805b 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import { cloneElement } from 'react'; -import warning from '../_util/warning'; -import BreadcrumbItem from './BreadcrumbItem'; import classNames from 'classnames'; +import BreadcrumbItem from './BreadcrumbItem'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import warning from '../_util/warning'; export interface Route { path: string; @@ -44,7 +45,6 @@ export default class Breadcrumb extends React.Component { static Item: typeof BreadcrumbItem; static defaultProps = { - prefixCls: 'ant-breadcrumb', separator: '/', }; @@ -66,12 +66,14 @@ export default class Breadcrumb extends React.Component { ); } - render() { + renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => { let crumbs; const { - separator, prefixCls, style, className, routes, params = {}, + prefixCls: customizePrefixCls, + separator, style, className, routes, params = {}, children, itemRender = defaultItemRender, } = this.props; + const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); if (routes && routes.length > 0) { const paths: string[] = []; crumbs = routes.map((route) => { @@ -110,4 +112,12 @@ export default class Breadcrumb extends React.Component { ); } + + render() { + return ( + + {this.renderBreadcrumb} + + ); + } } diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 15d9f1bff7..c3fdcee9b7 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface BreadcrumbItemProps { prefixCls?: string; @@ -11,7 +12,6 @@ export default class BreadcrumbItem extends React.Component { + const { + prefixCls: customizePrefixCls, + separator, children, ...restProps + } = this.props; + const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); let link; if ('href' in this.props) { link = {children}; @@ -42,4 +46,12 @@ export default class BreadcrumbItem extends React.Component + {this.renderBreadcrumbItem} + + ); + } } diff --git a/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap index feaed14345..3cdcb013d4 100644 --- a/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/router.test.js.snap @@ -7,7 +7,6 @@ exports[`react router react router 3 1`] = ` "id": 1, } } - prefixCls="ant-breadcrumb" routes={ Array [ Object { @@ -76,95 +75,101 @@ exports[`react router react router 3 1`] = ` } separator="/" > -
- +
- - - - Home - - - - / - - - - - - - - Application List - - - - / - - - - - - - - Application1 - - - - / - - - - - - + + - Detail + + + Home + + + + / + - - - / - - - -
+ + + + + + + + Application List + + + + / + + + + + + + + + + Application1 + + + + / + + + + + + + + + + Detail + + + + / + + + + +
+ `; diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index 8ed623b710..15d5be6c13 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import classNames from 'classnames'; import { ButtonSize } from './button'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface ButtonGroupProps { size?: ButtonSize; @@ -9,27 +10,32 @@ export interface ButtonGroupProps { prefixCls?: string; } -const ButtonGroup: React.SFC = (props) => { - const { prefixCls = 'ant-btn-group', size, className, ...others } = props; +const ButtonGroup: React.SFC = props => ( + + {({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, size, className, ...others } = props; + const prefixCls = getPrefixCls('btn-group', customizePrefixCls); - // large => lg - // small => sm - let sizeCls = ''; - switch (size) { - case 'large': - sizeCls = 'lg'; - break; - case 'small': - sizeCls = 'sm'; - default: - break; - } + // large => lg + // small => sm + let sizeCls = ''; + switch (size) { + case 'large': + sizeCls = 'lg'; + break; + case 'small': + sizeCls = 'sm'; + default: + break; + } - const classes = classNames(prefixCls, { - [`${prefixCls}-${sizeCls}`]: sizeCls, - }, className); + const classes = classNames(prefixCls, { + [`${prefixCls}-${sizeCls}`]: sizeCls, + }, className); - return
; -}; + return
; + }} + +); export default ButtonGroup; diff --git a/components/button/button.tsx b/components/button/button.tsx index cbd2a9e71c..bec28d4930 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; -import Wave from '../_util/wave'; -import Icon from '../icon'; import Group from './button-group'; +import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import Wave from '../_util/wave'; const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/; const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar); @@ -69,7 +70,6 @@ export default class Button extends React.Component { static __ANT_BUTTON = true; static defaultProps = { - prefixCls: 'ant-btn', loading: false, ghost: false, block: false, @@ -166,13 +166,16 @@ export default class Button extends React.Component { return React.Children.count(children) === 1 && !icon; } - render() { + renderButton = ({ getPrefixCls }: ConfigConsumerProps) => { const { - type, shape, size, className, children, icon, prefixCls, ghost, loading: _loadingProp, block, ...rest + prefixCls: customizePrefixCls, + type, shape, size, className, children, icon, ghost, loading: _loadingProp, block, + ...rest } = this.props; - const { loading, hasTwoCNChar } = this.state; + const prefixCls = getPrefixCls('btn', customizePrefixCls); + // large => lg // small => sm let sizeCls = ''; @@ -239,4 +242,12 @@ export default class Button extends React.Component { ); } } + + render() { + return ( + + {this.renderButton} + + ); + } } diff --git a/components/calendar/Constants.tsx b/components/calendar/Constants.tsx deleted file mode 100644 index dbd68b60a5..0000000000 --- a/components/calendar/Constants.tsx +++ /dev/null @@ -1 +0,0 @@ -export const PREFIX_CLS = 'ant-fullcalendar'; diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 8781d946b0..fe7d04e479 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import * as moment from 'moment'; -import { PREFIX_CLS } from './Constants'; import Select from '../select'; import { Group, Button, RadioChangeEvent } from '../radio'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; const Option = Select.Option; export interface HeaderProps { @@ -20,19 +20,17 @@ export interface HeaderProps { export default class Header extends React.Component { static defaultProps = { - prefixCls: `${PREFIX_CLS}-header`, yearSelectOffset: 10, yearSelectTotal: 20, }; private calenderHeaderNode: HTMLDivElement; - getYearSelectElement(year: number) { + getYearSelectElement(prefixCls: string, year: number) { const { yearSelectOffset, yearSelectTotal, locale, - prefixCls, fullscreen, validRange, } = this.props; @@ -72,9 +70,8 @@ export default class Header extends React.Component { return months; } - getMonthSelectElement(month: number, months: number[]) { - const props = this.props; - const { prefixCls, fullscreen, validRange, value } = props; + getMonthSelectElement(prefixCls: string,month: number, months: number[]) { + const { fullscreen, validRange, value } = this.props; const options: React.ReactElement[] = []; let start = 0; let end = 12; @@ -147,11 +144,15 @@ export default class Header extends React.Component { this.calenderHeaderNode = node; } - render() { - const { type, value, prefixCls, locale, fullscreen } = this.props; - const yearSelect = this.getYearSelectElement(value.year()); + renderHeader = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + type, value, locale, fullscreen, + } = this.props; + const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls); + const yearSelect = this.getYearSelectElement(prefixCls, value.year()); const monthSelect = type === 'date' ? - this.getMonthSelectElement(value.month(), this.getMonthsLocale(value)) : null; + this.getMonthSelectElement(prefixCls, value.month(), this.getMonthsLocale(value)) : null; const size = (fullscreen ? 'default' : 'small') as any; const typeSwitch = ( @@ -168,4 +169,12 @@ export default class Header extends React.Component {
); } + + render() { + return ( + + {this.renderHeader} + + ); + } } diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index bbe31dc8b1..07c36dec2f 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import * as moment from 'moment'; import FullCalendar from 'rc-calendar/lib/FullCalendar'; -import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import { PREFIX_CLS } from './Constants'; import Header from './Header'; -import interopDefault from '../_util/interopDefault'; import enUS from './locale/en_US'; +import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import interopDefault from '../_util/interopDefault'; export { HeaderProps } from './Header'; @@ -50,7 +50,6 @@ export default class Calendar extends React.Component { - const { prefixCls, monthCellRender = noop as Function } = this.props; + const { monthCellRender = noop as Function } = this.props; + const { prefixCls } = this; return (
@@ -117,7 +119,8 @@ export default class Calendar extends React.Component { - const { prefixCls, dateCellRender = noop as Function } = this.props; + const { dateCellRender = noop as Function } = this.props; + const { prefixCls } = this; return (
@@ -188,20 +191,30 @@ export default class Calendar extends React.Component { + const result = { + ...enUS, + ...this.props.locale, + }; + result.lang = { + ...result.lang, + ...(this.props.locale || {}).lang, + }; + return result; + } + renderCalendar = (locale: any, localeCode: string) => { const { state, props } = this; const { value, mode } = state; if (value && localeCode) { value.locale(localeCode); } - const { prefixCls, style, className, fullscreen, dateFullCellRender, monthFullCellRender } = props; + const { + prefixCls: customizePrefixCls, + style, className, fullscreen, dateFullCellRender, monthFullCellRender, + } = props; const type = (mode === 'year') ? 'month' : 'date'; - let cls = className || ''; - if (fullscreen) { - cls += (` ${prefixCls}-fullscreen`); - } - const monthCellRender = monthFullCellRender || this.monthCellRender; const dateCellRender = dateFullCellRender || this.dateCellRender; @@ -212,44 +225,50 @@ export default class Calendar extends React.Component -
- -
- ); - } + + {({ getPrefixCls }: ConfigConsumerProps) => { + const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls); - getDefaultLocale = () => { - const result = { - ...enUS, - ...this.props.locale, - }; - result.lang = { - ...result.lang, - ...(this.props.locale || {}).lang, - }; - return result; + // To support old version react. + // Have to add prefixCls on the instance. + // https://github.com/facebook/react/issues/12397 + this.prefixCls = prefixCls; + + let cls = className || ''; + if (fullscreen) { + cls += (` ${prefixCls}-fullscreen`); + } + + return ( +
+
+ +
+ ); + }} + + ); } render() { diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index 30a2bc80dd..2d84aab204 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface CardGridProps { prefixCls?: string; @@ -7,8 +8,13 @@ export interface CardGridProps { className?: string; } -export default (props: CardGridProps) => { - const { prefixCls = 'ant-card', className, ...others } = props; - const classString = classNames(`${prefixCls}-grid`, className); - return
; -}; +export default (props: CardGridProps) => ( + + {({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, ...others } = props; + const prefixCls = getPrefixCls('card', customizePrefixCls); + const classString = classNames(`${prefixCls}-grid`, className); + return
; + }} + +); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index 1c6a4ed96a..f96516f497 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface CardMetaProps { prefixCls?: string; @@ -10,22 +11,27 @@ export interface CardMetaProps { description?: React.ReactNode; } -export default (props: CardMetaProps) => { - const { prefixCls = 'ant-card', className, avatar, title, description, ...others } = props; - const classString = classNames(`${prefixCls}-meta`, className); - const avatarDom = avatar ?
{avatar}
: null; - const titleDom = title ?
{title}
: null; - const descriptionDom = description ? -
{description}
: null; - const MetaDetail = titleDom || descriptionDom ? -
- {titleDom} - {descriptionDom} -
: null; - return ( -
- {avatarDom} - {MetaDetail} -
- ); -}; +export default (props: CardMetaProps) => ( + + {({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, avatar, title, description, ...others } = props; + const prefixCls = getPrefixCls('card', customizePrefixCls); + const classString = classNames(`${prefixCls}-meta`, className); + const avatarDom = avatar ?
{avatar}
: null; + const titleDom = title ?
{title}
: null; + const descriptionDom = description ? +
{description}
: null; + const MetaDetail = titleDom || descriptionDom ? +
+ {titleDom} + {descriptionDom} +
: null; + return ( +
+ {avatarDom} + {MetaDetail} +
+ ); + }} + +); diff --git a/components/card/index.tsx b/components/card/index.tsx index 27f46fdf7a..c88847ab3c 100644 --- a/components/card/index.tsx +++ b/components/card/index.tsx @@ -7,6 +7,7 @@ import Meta from './Meta'; import Tabs from '../tabs'; import Row from '../row'; import Col from '../col'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame'; import warning from '../_util/warning'; import { Omit } from '../_util/type'; @@ -142,12 +143,14 @@ export default class Card extends React.Component { return !!hoverable; } - render() { + renderCard = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls = 'ant-card', className, extra, headStyle = {}, bodyStyle = {}, noHovering, hoverable, title, loading, + prefixCls: customizePrefixCls, + className, extra, headStyle = {}, bodyStyle = {}, noHovering, hoverable, title, loading, bordered = true, type, cover, actions, tabList, children, activeTabKey, defaultActiveTabKey, ...others } = this.props; + const prefixCls = getPrefixCls('card', customizePrefixCls); const classString = classNames(prefixCls, className, { [`${prefixCls}-loading`]: loading, [`${prefixCls}-bordered`]: bordered, @@ -270,4 +273,12 @@ export default class Card extends React.Component {
); } + + render() { + return ( + + {this.renderCard} + + ); + } } diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 666d070eff..bb156f93f5 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import debounce from 'lodash/debounce'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; // matchMedia polyfill for // https://github.com/WickyNilliams/enquire.js/issues/82 @@ -70,7 +71,6 @@ export default class Carousel extends React.Component { static defaultProps = { dots: true, arrows: false, - prefixCls: 'ant-carousel', draggable: false, }; @@ -126,7 +126,7 @@ export default class Carousel extends React.Component { this.slick.slickGoTo(slide, dontAnimate); } - render() { + renderCarousel = ({ getPrefixCls }: ConfigConsumerProps) => { const props = { ...this.props, }; @@ -135,7 +135,7 @@ export default class Carousel extends React.Component { props.fade = true; } - let className = props.prefixCls; + let className = getPrefixCls('carousel', props.prefixCls); if (props.vertical) { className = `${className} ${className}-vertical`; } @@ -146,4 +146,12 @@ export default class Carousel extends React.Component {
); } + + render() { + return ( + + {this.renderCarousel} + + ); + } } diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap index 4c0f9c0286..1609698392 100644 --- a/components/cascader/__tests__/__snapshots__/index.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/index.test.js.snap @@ -707,7 +707,6 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1` "value": "value", } } - inputPrefixCls="ant-input" loadingIcon={ label.join(' / '); export default class Cascader extends React.Component { static defaultProps = { - prefixCls: 'ant-cascader', - inputPrefixCls: 'ant-input', placeholder: 'Please select', transitionName: 'slide-up', popupPlacement: 'bottomLeft', @@ -378,14 +376,18 @@ export default class Cascader extends React.Component { + renderCascader = ({ getPopupContainer: getContextPopupContainer, getPrefixCls }: ConfigConsumerProps) => { const { props, state } = this; const { - prefixCls, inputPrefixCls, children, placeholder, size, disabled, + prefixCls: customizePrefixCls, inputPrefixCls: customizeInputPrefixCls, + children, placeholder, size, disabled, className, style, allowClear, showSearch = false, suffixIcon, ...otherProps } = props; const { value, inputFocused } = state; + const prefixCls = getPrefixCls('cascader', customizePrefixCls); + const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls); + const sizeCls = classNames({ [`${inputPrefixCls}-lg`]: size === 'large', [`${inputPrefixCls}-sm`]: size === 'small', @@ -514,6 +516,7 @@ export default class Cascader extends React.Component { prefixCls?: string; @@ -41,7 +42,6 @@ export interface CheckboxChangeEvent { export default class Checkbox extends React.Component { static Group: typeof CheckboxGroup; static defaultProps = { - prefixCls: 'ant-checkbox', indeterminate: false, }; @@ -71,10 +71,10 @@ export default class Checkbox extends React.Component { this.rcCheckbox = node; } - render() { + renderCheckbox = ({ getPrefixCls }: ConfigConsumerProps) => { const { props, context } = this; const { - prefixCls, + prefixCls: customizePrefixCls, className, children, indeterminate, @@ -84,6 +84,7 @@ export default class Checkbox extends React.Component { ...restProps } = props; const { checkboxGroup } = context; + const prefixCls = getPrefixCls('checkbox', customizePrefixCls); const checkboxProps: CheckboxProps = { ...restProps }; if (checkboxGroup) { checkboxProps.onChange = (...args) => { @@ -120,4 +121,12 @@ export default class Checkbox extends React.Component { ); } + + render() { + return ( + + {this.renderCheckbox} + + ); + } } diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx index ab19372ad0..712970e896 100644 --- a/components/checkbox/Group.tsx +++ b/components/checkbox/Group.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import shallowEqual from 'shallowequal'; import omit from 'omit.js'; import Checkbox, { CheckboxChangeEvent } from './Checkbox'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export type CheckboxValueType = string | number | boolean; @@ -44,7 +45,6 @@ export interface CheckboxGroupContext { class CheckboxGroup extends React.Component { static defaultProps = { options: [], - prefixCls: 'ant-checkbox', }; static propTypes = { @@ -120,9 +120,13 @@ class CheckboxGroup extends React.Component { const { props, state } = this; - const { prefixCls, className, style, options, ...restProps } = props; + const { + prefixCls: customizePrefixCls, + className, style, options, ...restProps + } = props; + const prefixCls = getPrefixCls('checkbox', customizePrefixCls); const groupPrefixCls = `${prefixCls}-group`; const domProps = omit(restProps, ['children', 'defaultValue', 'value', 'onChange', 'disabled']); @@ -151,6 +155,14 @@ class CheckboxGroup extends React.Component ); } + + render() { + return ( + + {this.renderGroup} + + ); + } } polyfill(CheckboxGroup); diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js index 047e9161df..4667179d4e 100644 --- a/components/checkbox/__tests__/checkbox.test.js +++ b/components/checkbox/__tests__/checkbox.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import Checkbox from '..'; import focusTest from '../../../tests/shared/focusTest'; @@ -10,17 +10,17 @@ describe('Checkbox', () => { const onMouseEnter = jest.fn(); const onMouseLeave = jest.fn(); - const wrapper = shallow( + const wrapper = mount( ); - wrapper.simulate('mouseenter'); + wrapper.find('label').simulate('mouseenter'); expect(onMouseEnter).toHaveBeenCalled(); - wrapper.simulate('mouseleave'); + wrapper.find('label').simulate('mouseleave'); expect(onMouseLeave).toHaveBeenCalled(); }); }); diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 60e11fcc17..4906a42b7e 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import RcCollapse from 'rc-collapse'; import classNames from 'classnames'; -import animation from '../_util/openAnimation'; import CollapsePanel from './CollapsePanel'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import animation from '../_util/openAnimation'; export interface CollapseProps { activeKey?: Array | string; @@ -22,7 +23,6 @@ export default class Collapse extends React.Component { static Panel = CollapsePanel; static defaultProps = { - prefixCls: 'ant-collapse', bordered: true, openAnimation: { ...animation, appear() { } }, }; @@ -33,17 +33,27 @@ export default class Collapse extends React.Component { ); } - render() { - const { prefixCls, className = '', bordered } = this.props; + renderCollapse = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className = '', bordered } = this.props; + const prefixCls = getPrefixCls('collapse', customizePrefixCls); const collapseClassName = classNames({ [`${prefixCls}-borderless`]: !bordered, }, className); return ( ); } + + render() { + return ( + + {this.renderCollapse} + + ); + } } diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index b36c02b84f..33cc86044d 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import RcCollapse from 'rc-collapse'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface CollapsePanelProps { key: string; @@ -15,11 +16,26 @@ export interface CollapsePanelProps { } export default class CollapsePanel extends React.Component { - render() { - const { prefixCls, className = '', showArrow = true } = this.props; + renderCollapsePanel = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className = '', showArrow = true } = this.props; + const prefixCls = getPrefixCls('collapse', customizePrefixCls); const collapsePanelClassName = classNames({ [`${prefixCls}-no-arrow`]: !showArrow, }, className); - return ; + return ( + + ); + } + + render() { + return ( + + {this.renderCollapsePanel} + + ); } } diff --git a/components/comment/index.tsx b/components/comment/index.tsx index 08d44b7246..d63348a4b6 100644 --- a/components/comment/index.tsx +++ b/components/comment/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface CommentProps { /** List of action items rendered below the comment content */ @@ -23,10 +24,6 @@ export interface CommentProps { } export default class Comment extends React.Component { - static defaultProps = { - prefixCls: 'ant-comment', - } - getAction(actions: React.ReactNode[]) { if (!actions || !actions.length) { return null; @@ -40,9 +37,7 @@ export default class Comment extends React.Component { return actionList; } - renderNested = (children: any) => { - const { prefixCls } = this.props; - + renderNested = (prefixCls: string, children: any) => { return (
{children} @@ -50,7 +45,7 @@ export default class Comment extends React.Component { ); } - render() { + renderComment = ({ getPrefixCls }: ConfigConsumerProps) => { const { actions, author, @@ -58,12 +53,14 @@ export default class Comment extends React.Component { children, className, content, - prefixCls, + prefixCls: customizePrefixCls, style, datetime, ...otherProps } = this.props; + const prefixCls = getPrefixCls('comment', customizePrefixCls); + const avatarDom = (
{typeof avatar === 'string' ? : avatar} @@ -109,8 +106,16 @@ export default class Comment extends React.Component { return (
{comment} - {children ? this.renderNested(children) : null} + {children ? this.renderNested(prefixCls, children) : null}
); } + + render() { + return ( + + {this.renderComment} + + ); + } } diff --git a/components/config-provider/__tests__/__snapshots__/index.test.js.snap b/components/config-provider/__tests__/__snapshots__/index.test.js.snap new file mode 100644 index 0000000000..795f06c7c1 --- /dev/null +++ b/components/config-provider/__tests__/__snapshots__/index.test.js.snap @@ -0,0 +1,15793 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ConfigProvider components Alert configProvider 1`] = ` +
+ + Bamboo is Little Light + + +
+`; + +exports[`ConfigProvider components Alert normal 1`] = ` +
+ + Bamboo is Little Light + + +
+`; + +exports[`ConfigProvider components Alert prefixCls 1`] = ` +
+ + Bamboo is Little Light + + +
+`; + +exports[`ConfigProvider components Anchor configProvider 1`] = ` +
+
+
+
+
+ +
+
+ + Little Light + +
+
+
+
+
+`; + +exports[`ConfigProvider components Anchor normal 1`] = ` +
+
+
+
+
+ +
+
+ + Little Light + +
+
+
+
+
+`; + +exports[`ConfigProvider components Anchor prefixCls 1`] = ` +
+
+
+
+
+ +
+
+ + Little Light + +
+
+
+
+
+`; + +exports[`ConfigProvider components AutoComplete configProvider 1`] = ` +
+ +
+`; + +exports[`ConfigProvider components AutoComplete normal 1`] = ` +
+ +
+`; + +exports[`ConfigProvider components AutoComplete prefixCls 1`] = ` +
+ +
+`; + +exports[`ConfigProvider components Avatar configProvider 1`] = ` + + + +`; + +exports[`ConfigProvider components Avatar normal 1`] = ` + + + +`; + +exports[`ConfigProvider components Avatar prefixCls 1`] = ` + + + +`; + +exports[`ConfigProvider components BackTop configProvider 1`] = ` +
+
+
+
+
+`; + +exports[`ConfigProvider components BackTop normal 1`] = ` +
+
+
+
+
+`; + +exports[`ConfigProvider components BackTop prefixCls 1`] = ` +
+
+
+
+
+`; + +exports[`ConfigProvider components Badge configProvider 1`] = ` +
+ + + + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + +
+`; + +exports[`ConfigProvider components Badge normal 1`] = ` +
+ + + + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + +
+`; + +exports[`ConfigProvider components Badge prefixCls 1`] = ` +
+ + + + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+ + + + + + + +
+`; + +exports[`ConfigProvider components Breadcrumb configProvider 1`] = ` +
+ + + Bamboo + + + / + + + + + Light + + + / + + +
+`; + +exports[`ConfigProvider components Breadcrumb normal 1`] = ` +
+ + + Bamboo + + + / + + + + + Light + + + / + + +
+`; + +exports[`ConfigProvider components Breadcrumb prefixCls 1`] = ` +
+ + + Bamboo + + + / + + + + + Light + + + / + + +
+`; + +exports[`ConfigProvider components Button configProvider 1`] = ` +
+ +
+ + +
+
+`; + +exports[`ConfigProvider components Button normal 1`] = ` +
+ +
+ + +
+
+`; + +exports[`ConfigProvider components Button prefixCls 1`] = ` +
+ +
+ + +
+
+`; + +exports[`ConfigProvider components Calendar configProvider 1`] = ` +
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Jan +
+
+
+
+
+
+ Feb +
+
+
+
+
+
+ Mar +
+
+
+
+
+
+ Apr +
+
+
+
+
+
+ May +
+
+
+
+
+
+ Jun +
+
+
+
+
+
+ Jul +
+
+
+
+
+
+ Aug +
+
+
+
+
+
+ Sep +
+
+
+
+
+
+ Oct +
+
+
+
+
+
+ Nov +
+
+
+
+
+
+ Dec +
+
+
+
+
+
+
+
+`; + +exports[`ConfigProvider components Calendar normal 1`] = ` +
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Jan +
+
+
+
+
+
+ Feb +
+
+
+
+
+
+ Mar +
+
+
+
+
+
+ Apr +
+
+
+
+
+
+ May +
+
+
+
+
+
+ Jun +
+
+
+
+
+
+ Jul +
+
+
+
+
+
+ Aug +
+
+
+
+
+
+ Sep +
+
+
+
+
+
+ Oct +
+
+
+
+
+
+ Nov +
+
+
+
+
+
+ Dec +
+
+
+
+
+
+
+
+`; + +exports[`ConfigProvider components Calendar prefixCls 1`] = ` +
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+ 08 +
+
+
+
+
+
+ 09 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 01 +
+
+
+
+
+
+ 02 +
+
+
+
+
+
+ 03 +
+
+
+
+
+
+ 04 +
+
+
+
+
+
+ 05 +
+
+
+
+
+
+ 06 +
+
+
+
+
+
+ 07 +
+
+
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ Jan +
+
+
+
+
+
+ Feb +
+
+
+
+
+
+ Mar +
+
+
+
+
+
+ Apr +
+
+
+
+
+
+ May +
+
+
+
+
+
+ Jun +
+
+
+
+
+
+ Jul +
+
+
+
+
+
+ Aug +
+
+
+
+
+
+ Sep +
+
+
+
+
+
+ Oct +
+
+
+
+
+
+ Nov +
+
+
+
+
+
+ Dec +
+
+
+
+
+
+
+
+`; + +exports[`ConfigProvider components Card configProvider 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`ConfigProvider components Card normal 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`ConfigProvider components Card prefixCls 1`] = ` +
+
+
+
+
+
+
+`; + +exports[`ConfigProvider components Carousel configProvider 1`] = ` +
+
+
+
+ +
+
+
+

+ Bamboo +

+
+
+
+ + + +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+`; + +exports[`ConfigProvider components Carousel normal 1`] = ` +
+
+
+
+ +
+
+
+

+ Bamboo +

+
+
+
+ + + +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+`; + +exports[`ConfigProvider components Carousel prefixCls 1`] = ` +
+
+
+
+ +
+
+
+

+ Bamboo +

+
+
+
+ + + +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+`; + +exports[`ConfigProvider components Cascader configProvider 1`] = ` + + + + + + + +`; + +exports[`ConfigProvider components Cascader normal 1`] = ` + + + + + + + +`; + +exports[`ConfigProvider components Cascader prefixCls 1`] = ` + + + + + + + +`; + +exports[`ConfigProvider components Checkbox configProvider 1`] = ` +
+ +
+`; + +exports[`ConfigProvider components Checkbox normal 1`] = ` +
+ +
+`; + +exports[`ConfigProvider components Checkbox prefixCls 1`] = ` +
+ +
+`; + +exports[`ConfigProvider components Collapse configProvider 1`] = ` +
+
+ +
+
+`; + +exports[`ConfigProvider components Collapse normal 1`] = ` +
+
+ +
+
+`; + +exports[`ConfigProvider components Collapse prefixCls 1`] = ` +
+
+ +
+
+`; + +exports[`ConfigProvider components Comment configProvider 1`] = ` +
+
+
+
+
+
+ Bamboo +
+
+
+
+
+
+
+
+
+
+ Light +
+
+
+
+
+
+`; + +exports[`ConfigProvider components Comment normal 1`] = ` +
+
+
+
+
+
+ Bamboo +
+
+
+
+
+
+
+
+
+
+ Light +
+
+
+
+
+
+`; + +exports[`ConfigProvider components Comment prefixCls 1`] = ` +
+
+
+
+
+
+ Bamboo +
+
+
+
+
+
+
+
+
+
+ Light +
+
+
+
+
+
+`; + +exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = ` +
+ +
+ + + + +
+ +
+`; + +exports[`ConfigProvider components DatePicker DatePicker normal 1`] = ` +
+ +
+ + + + +
+ +
+`; + +exports[`ConfigProvider components DatePicker DatePicker prefixCls 1`] = ` +
+ +
+ + + + +
+ +
+`; + +exports[`ConfigProvider components DatePicker MonthPicker configProvider 1`] = ` +
+ +
+ + + + +
+ +
+`; + +exports[`ConfigProvider components DatePicker MonthPicker normal 1`] = ` +
+ +
+ + + + +
+ +
+`; + +exports[`ConfigProvider components DatePicker MonthPicker prefixCls 1`] = ` +
+ +
+ + + + +
+ +
+`; + +exports[`ConfigProvider components DatePicker RangePicker configProvider 1`] = ` +
+ + + + + ~ + + + + + + + +
+`; + +exports[`ConfigProvider components DatePicker RangePicker normal 1`] = ` +
+ + + + + ~ + + + + + + + +
+`; + +exports[`ConfigProvider components DatePicker RangePicker prefixCls 1`] = ` +
+ + + + + ~ + + + + + + + +
+`; + +exports[`ConfigProvider components DatePicker WeekPicker configProvider 1`] = ` +
+ + + + + + + + +
+`; + +exports[`ConfigProvider components DatePicker WeekPicker normal 1`] = ` +
+ + + + + + + + +
+`; + +exports[`ConfigProvider components DatePicker WeekPicker prefixCls 1`] = ` +
+ + + + + + + + +
+`; + +exports[`ConfigProvider components Divider configProvider 1`] = ` +
+`; + +exports[`ConfigProvider components Divider normal 1`] = ` +
+`; + +exports[`ConfigProvider components Divider prefixCls 1`] = ` +
+`; + +exports[`ConfigProvider components Drawer configProvider 1`] = ` +
+
+
+
+
+
+ +
+
+
+
+
+
+`; + +exports[`ConfigProvider components Drawer normal 1`] = ` +
+
+
+
+
+
+ +
+
+
+
+
+
+`; + +exports[`ConfigProvider components Drawer prefixCls 1`] = ` +
+
+
+
+
+
+ +
+
+
+
+
+
+`; + +exports[`ConfigProvider components Dropdown configProvider 1`] = ` +
+ + +
+`; + +exports[`ConfigProvider components Dropdown normal 1`] = ` +
+ + +
+`; + +exports[`ConfigProvider components Dropdown prefixCls 1`] = ` +
+ + +
+`; + +exports[`ConfigProvider components Form configProvider 1`] = ` +
+
+
+
+ + + +
+ Bamboo is Light +
+
+
+
+
+`; + +exports[`ConfigProvider components Form normal 1`] = ` +
+
+
+
+ + + +
+ Bamboo is Light +
+
+
+
+
+`; + +exports[`ConfigProvider components Form prefixCls 1`] = ` +
+
+
+
+ + + +
+ Bamboo is Light +
+
+
+
+
+`; + +exports[`ConfigProvider components Grid configProvider 1`] = ` +
+
+
+`; + +exports[`ConfigProvider components Grid normal 1`] = ` +
+
+
+`; + +exports[`ConfigProvider components Grid prefixCls 1`] = ` +
+
+
+`; + +exports[`ConfigProvider components Input configProvider 1`] = ` +
+ + + + + + + + + + + + `; exports[`TextArea should support maxLength 1`] = ` `; diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx index 73ba81e5ec..30a0b01e08 100644 --- a/components/layout/Sider.tsx +++ b/components/layout/Sider.tsx @@ -1,3 +1,5 @@ +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; + // matchMedia polyfill for // https://github.com/WickyNilliams/enquire.js/issues/82 if (typeof window !== 'undefined') { @@ -72,7 +74,6 @@ class Sider extends React.Component { static __ANT_LAYOUT_SIDER: any = true; static defaultProps = { - prefixCls: 'ant-layout-sider', collapsible: false, defaultCollapsed: false, reverseArrow: false, @@ -187,11 +188,14 @@ class Sider extends React.Component { this.setState({ belowShow: !this.state.belowShow }); } - render() { - const { prefixCls, className, theme, + renderSider = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, theme, collapsible, reverseArrow, trigger, style, width, collapsedWidth, ...others } = this.props; + const prefixCls = getPrefixCls('layout-sider', customizePrefixCls); const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint']); const rawWidth = this.state.collapsed ? collapsedWidth : width; @@ -237,6 +241,14 @@ class Sider extends React.Component {
); } + + render() { + return ( + + {this.renderSider} + + ); + } } polyfill(Sider); diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx index 254438eec2..e3992f8512 100644 --- a/components/layout/layout.tsx +++ b/components/layout/layout.tsx @@ -2,23 +2,38 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import { SiderProps } from './Sider'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +export interface GeneratorProps { + suffixCls: string; +} export interface BasicProps extends React.HTMLAttributes { prefixCls?: string; hasSider?: boolean; } -function generator(props: BasicProps) { +function generator({ suffixCls }: GeneratorProps) { return (BasicComponent: React.ComponentClass): any => { return class Adapter extends React.Component { static Header: any; static Footer: any; static Content: any; static Sider: any; - render() { - const { prefixCls } = props; + + renderComponent = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls } = this.props; + const prefixCls = getPrefixCls(suffixCls, customizePrefixCls); + return ; } + + render() { + return ( + + {this.renderComponent} + + ); + } }; }; } @@ -73,19 +88,19 @@ const Layout: React.ComponentClass & { Content: React.ComponentClass; Sider: React.ComponentClass; } = generator({ - prefixCls: 'ant-layout', + suffixCls: 'layout', })(BasicLayout); const Header = generator({ - prefixCls: 'ant-layout-header', + suffixCls: 'layout-header', })(Basic); const Footer = generator({ - prefixCls: 'ant-layout-footer', + suffixCls: 'layout-footer', })(Basic); const Content = generator({ - prefixCls: 'ant-layout-content', + suffixCls: 'layout-content', })(Basic); Layout.Header = Header; diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 2971c1f6e8..fddcb60323 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; -import { Col } from '../grid'; import { ListGridType, ColumnType } from './index'; +import { Col } from '../grid'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface ListItemProps { className?: string; @@ -24,32 +25,37 @@ export interface ListItemMetaProps { title?: React.ReactNode; } -export const Meta = (props: ListItemMetaProps) => { - const { - prefixCls = 'ant-list', - className, - avatar, - title, - description, - ...others - } = props; +export const Meta = (props: ListItemMetaProps) => ( + + {({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, + avatar, + title, + description, + ...others + } = props; - const classString = classNames(`${prefixCls}-item-meta`, className); + const prefixCls = getPrefixCls('list', customizePrefixCls); + const classString = classNames(`${prefixCls}-item-meta`, className); - const content = ( -
- {title &&

{title}

} - {description &&
{description}
} -
- ); + const content = ( +
+ {title &&

{title}

} + {description &&
{description}
} +
+ ); - return ( -
- {avatar &&
{avatar}
} - {(title || description) && content} -
- ); -}; + return ( +
+ {avatar &&
{avatar}
} + {(title || description) && content} +
+ ); + }} + +); function getGrid(grid: ListGridType, t: ColumnType) { return grid[t] && Math.floor(24 / grid[t]!); @@ -76,9 +82,10 @@ export default class Item extends React.Component { context: any; - render() { + renderItem = ({ getPrefixCls }: ConfigConsumerProps) => { const { grid } = this.context; - const { prefixCls = 'ant-list', children, actions, extra, className, ...others } = this.props; + const { prefixCls: customizePrefixCls, children, actions, extra, className, ...others } = this.props; + const prefixCls = getPrefixCls('list', customizePrefixCls); const classString = classNames(`${prefixCls}-item`, className); const metaContent: React.ReactElement[] = []; @@ -154,4 +161,12 @@ export default class Item extends React.Component { return mainContent; } + + render() { + return ( + + {this.renderItem} + + ); + } } diff --git a/components/list/index.tsx b/components/list/index.tsx index 62f64fb462..14c4974d95 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import { SpinProps } from '../spin'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import defaultLocale from '../locale-provider/default'; import Spin from '../spin'; @@ -73,7 +74,6 @@ export default class List extends React.Component { static defaultProps = { dataSource: [], - prefixCls: 'ant-list', bordered: false, split: true, loading: false, @@ -133,18 +133,19 @@ export default class List extends React.Component { return !!(loadMore || pagination || footer); } - renderEmpty = (contextLocale: ListLocale) => { + renderEmpty = (prefixCls: string, contextLocale: ListLocale) => { const locale = { ...contextLocale, ...this.props.locale }; return ( -
+
{locale.emptyText}
); } - render() { + renderList = ({ getPrefixCls }: ConfigConsumerProps) => { const { paginationCurrent } = this.state; const { + prefixCls: customizePrefixCls, bordered, split, className, @@ -152,7 +153,6 @@ export default class List extends React.Component { itemLayout, loadMore, pagination, - prefixCls, grid, dataSource, size, @@ -165,6 +165,7 @@ export default class List extends React.Component { ...rest } = this.props; + const prefixCls = getPrefixCls('list', customizePrefixCls); let loadingProp = loading; if (typeof loadingProp === 'boolean') { loadingProp = { @@ -256,7 +257,9 @@ export default class List extends React.Component { componentName="Table" defaultLocale={defaultLocale.Table} > - {this.renderEmpty} + {(contextLocale: ListLocale) => ( + this.renderEmpty(prefixCls, contextLocale) + )} ); } @@ -276,4 +279,12 @@ export default class List extends React.Component {
); } + + render() { + return ( + + {this.renderList} + + ); + } } diff --git a/components/mention/index.tsx b/components/mention/index.tsx index fba68fe90e..d9cee8a475 100644 --- a/components/mention/index.tsx +++ b/components/mention/index.tsx @@ -4,6 +4,8 @@ import { polyfill } from 'react-lifecycles-compat'; import classNames from 'classnames'; import shallowequal from 'shallowequal'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; + export type MentionPlacement = 'top' | 'bottom'; export interface MentionProps { @@ -38,7 +40,6 @@ export interface MentionState { class Mention extends React.Component { static getMentions = getMentions; static defaultProps = { - prefixCls: 'ant-mention', notFoundContent: '无匹配结果，轻敲空格完成输入', loading: false, multiLines: false, @@ -119,9 +120,10 @@ class Mention extends React.Component { mentionRef = (ele: any) => { this.mentionEle = ele; } - render() { - const { className = '', prefixCls, loading, placement } = this.props; + renderMention = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className = '', loading, placement } = this.props; const { suggestions, focus } = this.state; + const prefixCls = getPrefixCls('mention', customizePrefixCls); const cls = classNames(className, { [`${prefixCls}-active`]: focus, [`${prefixCls}-placement-top`]: placement === 'top', @@ -134,6 +136,7 @@ class Mention extends React.Component { return ( { /> ); } + + render() { + return ( + + {this.renderMention} + + ); + } } polyfill(Mention); diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 62f45164d2..69c4106218 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import RcMenu, { Divider, ItemGroup } from 'rc-menu'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; -import { ConfigConsumer, ConfigProviderProps } from '../config-provider'; -import animation from '../_util/openAnimation'; -import warning from '../_util/warning'; import SubMenu from './SubMenu'; import Item from './MenuItem'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import animation from '../_util/openAnimation'; +import warning from '../_util/warning'; import { SiderContext } from '../layout/Sider'; export interface SelectParam { @@ -28,7 +28,7 @@ export type MenuMode = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizo export type MenuTheme = 'light' | 'dark'; -export interface MenuProps extends ConfigProviderProps { +export interface MenuProps { id?: string; theme?: MenuTheme; mode?: MenuMode; @@ -53,6 +53,7 @@ export interface MenuProps extends ConfigProviderProps { subMenuOpenDelay?: number; focusable?: boolean; onMouseEnter?: (e: MouseEvent) => void; + getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; } export interface MenuState { @@ -65,7 +66,6 @@ export default class Menu extends React.Component { static SubMenu = SubMenu; static ItemGroup = ItemGroup; static defaultProps: Partial = { - prefixCls: 'ant-menu', className: '', theme: 'light', // or dark focusable: false, @@ -225,11 +225,12 @@ export default class Menu extends React.Component { return menuOpenAnimation; } - renderMenu = ({ getPopupContainer }: ConfigProviderProps) => { - const { prefixCls, className, theme } = this.props; + renderMenu = ({ getPopupContainer, getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, theme } = this.props; const menuMode = this.getRealMenuMode(); const menuOpenAnimation = this.getMenuOpenAnimation(menuMode!); + const prefixCls = getPrefixCls('menu', customizePrefixCls); const menuClassName = classNames(className, `${prefixCls}-${theme}`, { [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(), }); @@ -263,6 +264,7 @@ export default class Menu extends React.Component { getPopupContainer={getPopupContainer} {...this.props} {...menuProps} + prefixCls={prefixCls} onTransitionEnd={this.handleTransitionEnd} onMouseEnter={this.handleMouseEnter} /> diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 5fb9e927da..4dd5eff0bb 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -3,11 +3,12 @@ import Dialog from 'rc-dialog'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import addEventListener from 'rc-util/lib/Dom/addEventListener'; +import { getConfirmLocale } from './locale'; +import Icon from '../icon'; import Button from '../button'; import { ButtonType, NativeButtonProps } from '../button/button'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import { getConfirmLocale } from './locale'; -import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; let mousePosition: { x: number, y: number } | null; let mousePositionEventBinded: boolean; @@ -106,7 +107,6 @@ export default class Modal extends React.Component { static confirm: ModalFunc; static defaultProps = { - prefixCls: 'ant-modal', width: 520, transitionName: 'zoom', maskTransitionName: 'fade', @@ -187,9 +187,14 @@ export default class Modal extends React.Component { ); } - render() { - const { footer, visible, wrapClassName, centered, prefixCls, ...restProps } = this.props; + renderModal = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + footer, visible, wrapClassName, centered, + ...restProps + } = this.props; + const prefixCls = getPrefixCls('modal', customizePrefixCls); const defaultFooter = ( { /> ); } + + render() { + return ( + + {this.renderModal} + + ); + } } diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx index 024164112c..fb244fa890 100644 --- a/components/pagination/Pagination.tsx +++ b/components/pagination/Pagination.tsx @@ -2,10 +2,11 @@ import * as React from 'react'; import RcPagination from 'rc-pagination'; import enUS from 'rc-pagination/lib/locale/en_US'; import classNames from 'classnames'; -import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import Select from '../select'; import MiniSelect from './MiniSelect'; import Icon from '../icon'; +import Select from '../select'; +import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface PaginationProps { total?: number; @@ -38,13 +39,7 @@ export interface PaginationConfig extends PaginationProps { export type PaginationLocale = any; export default class Pagination extends React.Component { - static defaultProps = { - prefixCls: 'ant-pagination', - selectPrefixCls: 'ant-select', - }; - - getIconsProps = () => { - const { prefixCls } = this.props; + getIconsProps = (prefixCls: string) => { const prevIcon = ( @@ -88,17 +83,32 @@ export default class Pagination extends React.Component { } renderPagination = (contextLocale: PaginationLocale) => { - const { className, size, locale: customLocale, ...restProps } = this.props; + const { + prefixCls: customizePrefixCls, selectPrefixCls: customizeSelectPrefixCls, + className, size, locale: customLocale, + ...restProps + } = this.props; const locale = { ...contextLocale, ...customLocale }; const isSmall = size === 'small'; return ( - + + {({ getPrefixCls }: ConfigConsumerProps) => { + const prefixCls = getPrefixCls('pagination', customizePrefixCls); + const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls); + + return ( + + ); + }} + ); } diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index fc290097cc..2c2ecff560 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -6,6 +6,7 @@ import Button from '../button'; import { ButtonType, NativeButtonProps } from '../button/button'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale-provider/default'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface PopconfirmProps extends AbstractTooltipProps { title: React.ReactNode; @@ -31,7 +32,6 @@ export interface PopconfirmLocale { class Popconfirm extends React.Component { static defaultProps = { - prefixCls: 'ant-popover', transitionName: 'zoom-big', placement: 'top', trigger: 'click', @@ -100,8 +100,8 @@ class Popconfirm extends React.Component { this.tooltip = node; } - renderOverlay = (popconfirmLocale: PopconfirmLocale) => { - const { prefixCls, okButtonProps, cancelButtonProps, title, cancelText, okText, okType, icon } = this.props; + renderOverlay = (prefixCls: string, popconfirmLocale: PopconfirmLocale) => { + const { okButtonProps, cancelButtonProps, title, cancelText, okText, okType, icon } = this.props; return (
@@ -122,15 +122,18 @@ class Popconfirm extends React.Component { ); } - render() { - const { prefixCls, placement, ...restProps } = this.props; + renderConfirm = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, placement, ...restProps } = this.props; + const prefixCls = getPrefixCls('popover', customizePrefixCls); const overlay = ( - {this.renderOverlay} + {(popconfirmLocale: PopconfirmLocale) => ( + this.renderOverlay(prefixCls, popconfirmLocale) + )} ); @@ -146,6 +149,14 @@ class Popconfirm extends React.Component { /> ); } + + render() { + return ( + + {this.renderConfirm} + + ); + } } polyfill(Popconfirm); diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 3dc4a9fa5c..ce88baaf18 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import Tooltip, { AbstractTooltipProps, TooltipPlacement, TooltipTrigger } from '../tooltip'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; export interface PopoverProps extends AbstractTooltipProps { @@ -9,7 +10,6 @@ export interface PopoverProps extends AbstractTooltipProps { export default class Popover extends React.Component { static defaultProps = { - prefixCls: 'ant-popover', placement: 'top' as TooltipPlacement, transitionName: 'zoom-big', trigger: 'hover' as TooltipTrigger, @@ -24,8 +24,8 @@ export default class Popover extends React.Component { return this.tooltip.getPopupDomNode(); } - getOverlay() { - const { title, prefixCls, content } = this.props; + getOverlay(prefixCls: string) { + const { title, content } = this.props; warning( !('overlay' in this.props), 'Popover[overlay] is removed, please use Popover[content] instead, ' + @@ -45,15 +45,25 @@ export default class Popover extends React.Component { this.tooltip = node; } - render() { - const props = { ...this.props }; + renderPopover = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, ...props } = this.props; delete props.title; + const prefixCls = getPrefixCls('popover', customizePrefixCls); return ( ); } + + render() { + return ( + + {this.renderPopover} + + ); + } } diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 21e840f97c..45fa3f1315 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import Icon from '../icon'; import { Circle } from 'rc-progress'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; const statusColorMap: Record = { normal: '#108ee9', @@ -48,7 +49,6 @@ export default class Progress extends React.Component { percent: 0, showInfo: true, trailColor: '#f3f3f3', - prefixCls: 'ant-progress', size: 'default', }; @@ -67,13 +67,15 @@ export default class Progress extends React.Component { default: PropTypes.oneOf(['default', 'small']), }; - render() { + renderProgress = ({ getPrefixCls }: ConfigConsumerProps) => { const props = this.props; const { - prefixCls, className, percent = 0, status, format, trailColor, size, successPercent, + prefixCls: customizePrefixCls, + className, percent = 0, status, format, trailColor, size, successPercent, type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, strokeColor, strokeLinecap = 'round', ...restProps } = props; + const prefixCls = getPrefixCls('progress', customizePrefixCls); const progressStatus = parseInt((successPercent ? successPercent.toString() : percent.toString()), 10) >= 100 && !('status' in props) ? 'success' : (status || 'normal'); let progressInfo; @@ -167,4 +169,12 @@ export default class Progress extends React.Component {
); } + + render() { + return ( + + {this.renderProgress} + + ); + } } diff --git a/components/radio/__tests__/group.test.js b/components/radio/__tests__/group.test.js index 51fb1f96c1..3cac608297 100644 --- a/components/radio/__tests__/group.test.js +++ b/components/radio/__tests__/group.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow, mount, render } from 'enzyme'; +import { mount, render } from 'enzyme'; import Radio from '../radio'; import RadioGroup from '../group'; @@ -35,7 +35,7 @@ describe('Radio', () => { const onMouseEnter = jest.fn(); const onMouseLeave = jest.fn(); - const wrapper = shallow( + const wrapper = mount( { ); - wrapper.simulate('mouseenter'); + wrapper.find('div').at(0).simulate('mouseenter'); expect(onMouseEnter).toHaveBeenCalled(); - wrapper.simulate('mouseleave'); + wrapper.find('div').at(0).simulate('mouseleave'); expect(onMouseLeave).toHaveBeenCalled(); }); diff --git a/components/radio/__tests__/radio.test.js b/components/radio/__tests__/radio.test.js index 88538bce0e..2d936ba9eb 100644 --- a/components/radio/__tests__/radio.test.js +++ b/components/radio/__tests__/radio.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { shallow, render } from 'enzyme'; +import { mount, render } from 'enzyme'; import Radio from '../radio'; import focusTest from '../../../tests/shared/focusTest'; @@ -15,17 +15,17 @@ describe('Radio', () => { const onMouseEnter = jest.fn(); const onMouseLeave = jest.fn(); - const wrapper = shallow( + const wrapper = mount( ); - wrapper.simulate('mouseenter'); + wrapper.find('label').simulate('mouseenter'); expect(onMouseEnter).toHaveBeenCalled(); - wrapper.simulate('mouseleave'); + wrapper.find('label').simulate('mouseleave'); expect(onMouseLeave).toHaveBeenCalled(); }); }); diff --git a/components/radio/group.tsx b/components/radio/group.tsx index 3223a50a5d..a8db2bdaf9 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import shallowEqual from 'shallowequal'; import Radio from './radio'; import { RadioGroupProps, RadioGroupState, RadioChangeEvent, RadioGroupButtonStyle } from './interface'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; function getCheckedValue(children: React.ReactNode) { let value = null; @@ -20,7 +21,6 @@ function getCheckedValue(children: React.ReactNode) { export default class RadioGroup extends React.Component { static defaultProps = { disabled: false, - prefixCls: 'ant-radio', buttonStyle: 'outline' as RadioGroupButtonStyle, }; @@ -89,9 +89,10 @@ export default class RadioGroup extends React.Component { const props = this.props; - const { prefixCls, className = '', options, buttonStyle } = props; + const { prefixCls: customizePrefixCls, className = '', options, buttonStyle } = props; + const prefixCls = getPrefixCls('radio', customizePrefixCls); const groupPrefixCls = `${prefixCls}-group`; const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, { [`${groupPrefixCls}-${props.size}`]: props.size, @@ -144,4 +145,12 @@ export default class RadioGroup extends React.Component ); } + + render() { + return ( + + {this.renderGroup} + + ); + } } diff --git a/components/radio/radio.tsx b/components/radio/radio.tsx index 052bf5f2a1..c4a6e4b92a 100644 --- a/components/radio/radio.tsx +++ b/components/radio/radio.tsx @@ -6,13 +6,13 @@ import shallowEqual from 'shallowequal'; import RadioGroup from './group'; import RadioButton from './radioButton'; import { RadioProps, RadioGroupContext } from './interface'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export default class Radio extends React.Component { static Group: typeof RadioGroup; static Button: typeof RadioButton; static defaultProps = { - prefixCls: 'ant-radio', type: 'radio', }; @@ -42,16 +42,17 @@ export default class Radio extends React.Component { this.rcCheckbox = node; } - render() { + renderRadio = ({ getPrefixCls }: ConfigConsumerProps) => { const { props, context } = this; const { - prefixCls, + prefixCls: customizePrefixCls, className, children, style, ...restProps } = props; const { radioGroup } = context; + const prefixCls = getPrefixCls('radio', customizePrefixCls); const radioProps: RadioProps = { ...restProps }; if (radioGroup) { radioProps.name = radioGroup.name; @@ -81,4 +82,12 @@ export default class Radio extends React.Component { ); } + + render() { + return ( + + {this.renderRadio} + + ); + } } diff --git a/components/radio/radioButton.tsx b/components/radio/radioButton.tsx index b067bd35d7..bf7c2604ab 100644 --- a/components/radio/radioButton.tsx +++ b/components/radio/radioButton.tsx @@ -1,30 +1,36 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; -import { AbstractCheckboxProps } from '../checkbox/Checkbox'; import Radio from './radio'; import { RadioChangeEvent } from './interface'; +import { AbstractCheckboxProps } from '../checkbox/Checkbox'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export type RadioButtonProps = AbstractCheckboxProps; export default class RadioButton extends React.Component { - static defaultProps = { - prefixCls: 'ant-radio-button', - }; - static contextTypes = { radioGroup: PropTypes.any, }; context: any; - render() { - const radioProps: RadioButtonProps = { ...this.props }; + renderRadioButton = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, ...radioProps }: RadioButtonProps = this.props; + const prefixCls = getPrefixCls('radio-button', customizePrefixCls); if (this.context.radioGroup) { radioProps.onChange = this.context.radioGroup.onChange; radioProps.checked = this.props.value === this.context.radioGroup.value; radioProps.disabled = this.props.disabled || this.context.radioGroup.disabled; } - return ; + return ; + } + + render() { + return ( + + {this.renderRadioButton} + + ); } } diff --git a/components/rate/index.tsx b/components/rate/index.tsx index 7abd865d97..8abb53119f 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import RcRate from 'rc-rate'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface RateProps { prefixCls?: string; @@ -25,7 +26,6 @@ export default class Rate extends React.Component { }; static defaultProps = { - prefixCls: 'ant-rate', character: , }; @@ -43,7 +43,19 @@ export default class Rate extends React.Component { this.rcRate = node; } + renderRate = ({ getPrefixCls }: ConfigConsumerProps) => ( + + ); + render() { - return ; + return ( + + {this.renderRate} + + ); } } diff --git a/components/select/index.tsx b/components/select/index.tsx index 8ee62964a8..1779d492b1 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -4,7 +4,7 @@ import RcSelect, { Option, OptGroup } from 'rc-select'; import classNames from 'classnames'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import defaultLocale from '../locale-provider/default'; -import { ConfigConsumer, ConfigProviderProps } from '../config-provider'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import omit from 'omit.js'; import warning from 'warning'; import Icon from '../icon'; @@ -116,7 +116,6 @@ export default class Select extends React.Component extends React.Component extends React.Component; } - renderSelect = (locale: SelectLocale) => { - const { - prefixCls, - className = '', - size, - mode, - getPopupContainer, - removeIcon, - clearIcon, - menuItemSelectedIcon, - ...restProps - } = this.props; - const rest = omit(restProps, ['inputIcon']); - - const cls = classNames({ - [`${prefixCls}-lg`]: size === 'large', - [`${prefixCls}-sm`]: size === 'small', - }, className); - - let { optionLabelProp } = this.props; - if (this.isCombobox()) { - // children 带 dom 结构时，无法填入输入框 - optionLabelProp = optionLabelProp || 'value'; - } - - const modeConfig = { - multiple: mode === 'multiple', - tags: mode === 'tags', - combobox: this.isCombobox(), - }; - - const finalRemoveIcon = removeIcon && ( - React.isValidElement<{ className?: string }>(removeIcon) ? - React.cloneElement( + renderSelect = (locale: SelectLocale) => ( + + {({ getPopupContainer: getContextPopupContainer, getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className = '', + size, + mode, + getPopupContainer, removeIcon, - { - className: classNames( - removeIcon.props.className, - `${prefixCls}-remove-icon`, - ), - }, - ) : removeIcon) || ( - - ); - - const finalClearIcon = clearIcon && ( - React.isValidElement<{ className?: string }>(clearIcon) ? - React.cloneElement( clearIcon, - { - className: classNames( - clearIcon.props.className, - `${prefixCls}-clear-icon`, - ), - }, - ) : clearIcon) || ( - - ); - - const finalMenuItemSelectedIcon = menuItemSelectedIcon && ( - React.isValidElement<{ className?: string }>(menuItemSelectedIcon) ? - React.cloneElement( menuItemSelectedIcon, - { - className: classNames( - menuItemSelectedIcon.props.className, - `${prefixCls}-selected-icon`, - ), - }, - ) : menuItemSelectedIcon) || ( - - ); + ...restProps + } = this.props; + const rest = omit(restProps, ['inputIcon']); - return ( - - {({ getPopupContainer: getContextPopupContainer }: ConfigProviderProps) => { - return ( - - ); - }} - - ); - } + const prefixCls = getPrefixCls('select', customizePrefixCls); + const cls = classNames({ + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', + }, className); + + let { optionLabelProp } = this.props; + if (this.isCombobox()) { + // children 带 dom 结构时，无法填入输入框 + optionLabelProp = optionLabelProp || 'value'; + } + + const modeConfig = { + multiple: mode === 'multiple', + tags: mode === 'tags', + combobox: this.isCombobox(), + }; + + const finalRemoveIcon = removeIcon && ( + React.isValidElement<{ className?: string }>(removeIcon) ? + React.cloneElement( + removeIcon, + { + className: classNames( + removeIcon.props.className, + `${prefixCls}-remove-icon`, + ), + }, + ) : removeIcon) || ( + + ); + + const finalClearIcon = clearIcon && ( + React.isValidElement<{ className?: string }>(clearIcon) ? + React.cloneElement( + clearIcon, + { + className: classNames( + clearIcon.props.className, + `${prefixCls}-clear-icon`, + ), + }, + ) : clearIcon) || ( + + ); + + const finalMenuItemSelectedIcon = menuItemSelectedIcon && ( + React.isValidElement<{ className?: string }>(menuItemSelectedIcon) ? + React.cloneElement( + menuItemSelectedIcon, + { + className: classNames( + menuItemSelectedIcon.props.className, + `${prefixCls}-selected-icon`, + ), + }, + ) : menuItemSelectedIcon) || ( + + ); + + return ( + + ); + }} + + ); render() { return ( diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx index b31e313f1e..5449be9f7f 100644 --- a/components/skeleton/Avatar.tsx +++ b/components/skeleton/Avatar.tsx @@ -11,7 +11,6 @@ export interface SkeletonAvatarProps { class Title extends React.Component { static defaultProps: Partial = { - prefixCls: 'ant-skeleton-avatar', size: 'large', }; diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx index ed56e6c0a0..2a7bddf084 100644 --- a/components/skeleton/Paragraph.tsx +++ b/components/skeleton/Paragraph.tsx @@ -12,10 +12,6 @@ export interface SkeletonParagraphProps { } class Paragraph extends React.Component { - static defaultProps: Partial = { - prefixCls: 'ant-skeleton-paragraph', - }; - getWidth(index: number) { const { width, rows = 2 } = this.props; if (Array.isArray(width)) { diff --git a/components/skeleton/Title.tsx b/components/skeleton/Title.tsx index 507f4d697b..549c31fec3 100644 --- a/components/skeleton/Title.tsx +++ b/components/skeleton/Title.tsx @@ -9,10 +9,6 @@ export interface SkeletonTitleProps { } class Title extends React.Component { - static defaultProps: Partial = { - prefixCls: 'ant-skeleton-title', - }; - render() { const { prefixCls, className, width, style } = this.props; diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx index 27d901524c..57e1574342 100644 --- a/components/skeleton/index.tsx +++ b/components/skeleton/index.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import Avatar, { SkeletonAvatarProps } from './Avatar'; import Title, { SkeletonTitleProps } from './Title'; import Paragraph, { SkeletonParagraphProps } from './Paragraph'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface SkeletonProps { active?: boolean; @@ -62,18 +63,20 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton class Skeleton extends React.Component { static defaultProps: Partial = { - prefixCls: 'ant-skeleton', avatar: false, title: true, paragraph: true, }; - render() { + renderSkeleton = ({ getPrefixCls }: ConfigConsumerProps) => { const { - loading, prefixCls, className, children, + prefixCls: customizePrefixCls, + loading, className, children, avatar, title, paragraph, active, } = this.props; + const prefixCls = getPrefixCls('skeleton', customizePrefixCls); + if (loading || !('loading' in this.props)) { const hasAvatar = !!avatar; const hasTitle = !!title; @@ -83,6 +86,7 @@ class Skeleton extends React.Component { let avatarNode; if (hasAvatar) { const avatarProps: SkeletonAvatarProps = { + prefixCls: `${prefixCls}-avatar`, ...getAvatarBasicProps(hasTitle, hasParagraph), ...getComponentProps(avatar), }; @@ -100,6 +104,7 @@ class Skeleton extends React.Component { let $title; if (hasTitle) { const titleProps: SkeletonTitleProps = { + prefixCls: `${prefixCls}-title`, ...getTitleBasicProps(hasAvatar, hasParagraph), ...getComponentProps(title), }; @@ -113,6 +118,7 @@ class Skeleton extends React.Component { let paragraphNode; if (hasParagraph) { const paragraphProps: SkeletonParagraphProps = { + prefixCls: `${prefixCls}-paragraph`, ...getParagraphBasicProps(hasAvatar, hasTitle), ...getComponentProps(paragraph), }; @@ -148,6 +154,14 @@ class Skeleton extends React.Component { return children; } + + render() { + return ( + + {this.renderSkeleton} + + ); + } } export default Skeleton; diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 56370ec83a..3d4dc65908 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -3,6 +3,7 @@ import RcSlider from 'rc-slider/lib/Slider'; import RcRange from 'rc-slider/lib/Range'; import RcHandle from 'rc-slider/lib/Handle'; import Tooltip from '../tooltip'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface SliderMarks { [key: number]: React.ReactNode | { @@ -13,12 +14,13 @@ export interface SliderMarks { export type SliderValue = number | [number, number]; -export type HandleGeneratorFn = (info: { - value: number, - dragging: boolean, - index: number, - rest: any[], -}) => React.ReactElement; +interface HandleGeneratorInfo { + value: number; + dragging: boolean; + index: number; + rest: any[]; +}; +export type HandleGeneratorFn = (tooltipPrefixCls: string, info: HandleGeneratorInfo) => React.ReactElement; export interface SliderProps { prefixCls?: string; @@ -49,8 +51,6 @@ export interface SliderState { export default class Slider extends React.Component { static defaultProps = { - prefixCls: 'ant-slider', - tooltipPrefixCls: 'ant-tooltip', tipFormatter(value: number) { return value.toString(); }, @@ -73,8 +73,8 @@ export default class Slider extends React.Component { }, })); } - handleWithTooltip: HandleGeneratorFn = ({ value, dragging, index, ...restProps }) => { - const { tooltipPrefixCls, tipFormatter, tooltipVisible } = this.props; + handleWithTooltip: HandleGeneratorFn = (tooltipPrefixCls: string, { value, dragging, index, ...restProps }) => { + const { tipFormatter, tooltipVisible } = this.props; const { visibles } = this.state; const isTipFormatter = tipFormatter ? (visibles[index] || dragging) : false; let visible; @@ -114,11 +114,44 @@ export default class Slider extends React.Component { this.rcSlider = node; } - render() { - const { range, ...restProps } = this.props; + renderSlider = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, tooltipPrefixCls: customizeTooltipPrefixCls, + range, ...restProps + } = this.props; + const prefixCls = getPrefixCls('slider', customizePrefixCls); + const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls); if (range) { - return ; + return ( + ( + this.handleWithTooltip(tooltipPrefixCls, info) + )} + prefixCls={prefixCls} + tooltipPrefixCls={tooltipPrefixCls} + /> + ); } - return ; + return ( + ( + this.handleWithTooltip(tooltipPrefixCls, info) + )} + prefixCls={prefixCls} + tooltipPrefixCls={tooltipPrefixCls} + /> + ); + } + + render() { + return ( + + {this.renderSlider} + + ); } } diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js index 0cf66d4025..58bba41e7e 100644 --- a/components/spin/__tests__/index.test.js +++ b/components/spin/__tests__/index.test.js @@ -1,10 +1,10 @@ import React from 'react'; -import { shallow, render, mount } from 'enzyme'; +import { render, mount } from 'enzyme'; import Spin from '..'; describe('Spin', () => { it('should only affect the spin element when set style to a nested xx', () => { - const wrapper = shallow( + const wrapper = mount(
content
 @@ -22,7 +22,7 @@ describe('Spin', () => { }); it('should render with delay when it\'s mounted with spinning=true and delay', () => { - const wrapper = shallow( + const wrapper = mount( ); expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false); diff --git a/components/spin/index.tsx b/components/spin/index.tsx index ee00f28eeb..d620ef42aa 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import Animate from 'rc-animate'; import omit from 'omit.js'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export type SpinSize = 'small' | 'default' | 'large'; export type SpinIndicator = React.ReactElement; @@ -27,8 +28,8 @@ export interface SpinState { // Render indicator let defaultIndicator: React.ReactNode = null; -function renderIndicator(props: SpinProps): React.ReactNode { - const { prefixCls, indicator } = props; +function renderIndicator(prefixCls: string, props: SpinProps): React.ReactNode { + const { indicator } = props; const dotClassName = `${prefixCls}-dot`; if (React.isValidElement(indicator)) { return React.cloneElement((indicator as SpinIndicator), { @@ -58,7 +59,6 @@ function shouldDelay(spinning?: boolean, delay?: number): boolean { class Spin extends React.Component { static defaultProps = { - prefixCls: 'ant-spin', spinning: true, size: 'default' as SpinSize, wrapperClassName: '', @@ -144,10 +144,15 @@ class Spin extends React.Component { } }; - render() { - const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props; + renderSpin = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, size, tip, wrapperClassName, + ...restProps + } = this.props; const { spinning } = this.state; + const prefixCls = getPrefixCls('spin', customizePrefixCls); const spinClassName = classNames(prefixCls, { [`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-lg`]: size === 'large', @@ -164,7 +169,7 @@ class Spin extends React.Component { const spinElement = (
- {renderIndicator(this.props)} + {renderIndicator(prefixCls, this.props)} {tip ?
{tip}
: null}
); @@ -194,6 +199,14 @@ class Spin extends React.Component { } return spinElement; } + + render() { + return ( + + {this.renderSpin} + + ); + } } export default Spin; diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 4fa5aa709f..18665d83f9 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import RcSteps from 'rc-steps'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface StepsProps { prefixCls?: string; @@ -20,8 +21,6 @@ export default class Steps extends React.Component { static Step = RcSteps.Step; static defaultProps = { - prefixCls: 'ant-steps', - iconPrefix: 'ant', current: 0, }; @@ -31,14 +30,28 @@ export default class Steps extends React.Component { current: PropTypes.number, }; - render() { - const { prefixCls } = this.props; + renderSteps = ({ getPrefixCls }: ConfigConsumerProps) => { + const prefixCls = getPrefixCls('steps', this.props.prefixCls); + const iconPrefix = getPrefixCls('', this.props.iconPrefix); const icons = { finish: , error: , }; return ( - + + ); + } + + render() { + return ( + + {this.renderSteps} + ); } } diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 8c1f704dc5..b31bedf3b1 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import omit from 'omit.js'; import Wave from '../_util/wave'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface SwitchProps { prefixCls?: string; @@ -22,10 +23,6 @@ export interface SwitchProps { } export default class Switch extends React.Component { - static defaultProps = { - prefixCls: 'ant-switch', - }; - static propTypes = { prefixCls: PropTypes.string, // HACK: https://github.com/ant-design/ant-design/issues/5368 @@ -48,8 +45,12 @@ export default class Switch extends React.Component { this.rcSwitch = node; } - render() { - const { prefixCls, size, loading, className = '', disabled } = this.props; + renderSwitch = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + size, loading, className = '', disabled, + } = this.props; + const prefixCls = getPrefixCls('switch', customizePrefixCls); const classes = classNames(className, { [`${prefixCls}-small`]: size === 'small', [`${prefixCls}-loading`]: loading, @@ -64,6 +65,7 @@ export default class Switch extends React.Component { { ); } + + render() { + return ( + + {this.renderSwitch} + + ); + } } diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 2e4c7089ec..c60644bd9e 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -1,15 +1,15 @@ +// FilterDropdown +// createBodyRow +// SelectionCheckboxAll +// SelectionBox +// FilterDropdown + import * as React from 'react'; import * as ReactDOM from 'react-dom'; import RcTable from 'rc-table'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; import shallowEqual from 'shallowequal'; -import Pagination from '../pagination'; -import Icon from '../icon'; -import Spin from '../spin'; -import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import defaultLocale from '../locale-provider/default'; -import warning from '../_util/warning'; import FilterDropdown from './filterDropdown'; import createStore, { Store } from './createStore'; import SelectionBox from './SelectionBox'; @@ -18,7 +18,6 @@ import Column from './Column'; import ColumnGroup from './ColumnGroup'; import createBodyRow from './createBodyRow'; import { flatArray, treeMap, flatFilter, normalizeColumns } from './util'; -import { SpinProps } from '../spin'; import { TableProps, TableSize, @@ -36,8 +35,15 @@ import { PaginationConfig, PrepareParamsArgumentsReturn, } from './interface'; +import Pagination from '../pagination'; +import Icon from '../icon'; +import Spin, { SpinProps } from '../spin'; import { RadioChangeEvent } from '../radio'; import { CheckboxChangeEvent } from '../checkbox'; +import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import defaultLocale from '../locale-provider/default'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import warning from '../_util/warning'; function noop() { } @@ -88,7 +94,6 @@ export default class Table extends React.Component, TableState< static defaultProps = { dataSource: [], - prefixCls: 'ant-table', useFixedHeader: false, className: '', size: 'default' as TableSize, @@ -224,8 +229,8 @@ export default class Table extends React.Component, TableState< this.createComponents(nextProps.components, this.props.components); } - onRow = (record: T, index: number) => { - const { onRow, prefixCls } = this.props; + onRow = (prefixCls: string, record: T, index: number) => { + const { onRow } = this.props; const custom = onRow ? onRow(record, index) : {}; return { ...custom, @@ -705,8 +710,8 @@ export default class Table extends React.Component, TableState< return ReactDOM.findDOMNode(this) as HTMLElement; } - renderRowSelection(locale: TableLocale) { - const { prefixCls, rowSelection } = this.props; + renderRowSelection(prefixCls: string, locale: TableLocale) { + const { rowSelection } = this.props; const columns = this.columns.concat(); if (rowSelection) { const data = this.getFlatCurrentPageData().filter((item, index) => { @@ -778,8 +783,7 @@ export default class Table extends React.Component, TableState< return this.getColumnKey(sortColumn) === this.getColumnKey(column); } - renderColumnsDropdown(columns: ColumnProps[], locale: TableLocale) { - const { prefixCls, dropdownPrefixCls } = this.props; + renderColumnsDropdown(prefixCls: string, dropdownPrefixCls: string, columns: ColumnProps[], locale: TableLocale) { const { sortOrder, filters } = this.state; return treeMap(columns, (column, i) => { const key = this.getColumnKey(column, i) as string; @@ -874,7 +878,7 @@ export default class Table extends React.Component, TableState< } } - renderPagination(paginationPosition: string) { + renderPagination(prefixCls: string, paginationPosition: string) { // 强制不需要分页 if (!this.hasPagination()) { return null; @@ -892,7 +896,7 @@ export default class Table extends React.Component, TableState< extends React.Component, TableState< }; } - renderTable = (contextLocale: TableLocale, loading: SpinProps) => { + renderTable = (prefixCls: string, dropdownPrefixCls: string, contextLocale: TableLocale, loading: SpinProps) => { const locale = { ...contextLocale, ...this.props.locale }; - const { style, className, prefixCls, showHeader, ...restProps } = this.props; + const { style, className, showHeader, ...restProps } = this.props; const data = this.getCurrentPageData(); const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false; @@ -1034,8 +1038,8 @@ export default class Table extends React.Component, TableState< [`${prefixCls}-without-column-header`]: !showHeader, }); - let columns = this.renderRowSelection(locale); - columns = this.renderColumnsDropdown(columns, locale); + let columns = this.renderRowSelection(prefixCls, locale); + columns = this.renderColumnsDropdown(prefixCls, dropdownPrefixCls, columns, locale); columns = columns.map((column, i) => { const newColumn = { ...column }; newColumn.key = this.getColumnKey(newColumn, i); @@ -1050,7 +1054,9 @@ export default class Table extends React.Component, TableState< ( + this.onRow(prefixCls, record, index) + )} components={this.components} prefixCls={prefixCls} data={data} @@ -1064,8 +1070,11 @@ export default class Table extends React.Component, TableState< ); } - render() { - const { style, className, prefixCls } = this.props; + renderComponent = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, dropdownPrefixCls: customizeDropdownPrefixCls, + style, className, + } = this.props; const data = this.getCurrentPageData(); let loading = this.props.loading as SpinProps; @@ -1075,12 +1084,14 @@ export default class Table extends React.Component, TableState< }; } + const prefixCls = getPrefixCls('table', customizePrefixCls); + const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls); const table = ( - {(locale) => this.renderTable(locale, loading)} + {(locale) => this.renderTable(prefixCls, dropdownPrefixCls, locale, loading)} ); @@ -1098,11 +1109,19 @@ export default class Table extends React.Component, TableState< {...loading} className={loading.spinning ? `${paginationPatchClass} ${prefixCls}-spin-holder` : ''} > - {this.renderPagination('top')} + {this.renderPagination(prefixCls, 'top')} {table} - {this.renderPagination('bottom')} + {this.renderPagination(prefixCls, 'bottom')}
); } + + render() { + return ( + + {this.renderComponent} + + ); + } } diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index e96f808215..060fba7da5 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -5,6 +5,7 @@ import TabContent from 'rc-tabs/lib/TabContent'; import TabBar from './TabBar'; import classNames from 'classnames'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; import isFlexSupported from '../_util/isFlexSupported'; @@ -49,7 +50,6 @@ export default class Tabs extends React.Component { static TabPane = TabPane as React.ClassicComponentClass; static defaultProps = { - prefixCls: 'ant-tabs', hideAdd: false, tabPosition: 'top', }; @@ -88,9 +88,9 @@ export default class Tabs extends React.Component { } } - render() { + renderTabs = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls, + prefixCls: customizePrefixCls, className = '', size, type = 'line', @@ -112,6 +112,7 @@ export default class Tabs extends React.Component { !(type.indexOf('card') >= 0 && (size === 'small' || size === 'large')), 'Tabs[type=card|editable-card] doesn\'t have small or large size, it\'s by design.', ); + const prefixCls = getPrefixCls('tabs', customizePrefixCls); const cls = classNames(className, { [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right', [`${prefixCls}-${size}`]: !!size, @@ -169,6 +170,7 @@ export default class Tabs extends React.Component { return ( } @@ -179,4 +181,12 @@ export default class Tabs extends React.Component { ); } + + render() { + return ( + + {this.renderTabs} + + ); + } } diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx index a089f9e1f3..c0eb0e7ded 100644 --- a/components/tag/CheckableTag.tsx +++ b/components/tag/CheckableTag.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface CheckableTagProps { prefixCls?: string; @@ -15,8 +16,9 @@ export default class CheckableTag extends React.Component { onChange(!checked); } } - render() { - const { prefixCls = 'ant-tag', className, checked, ...restProps } = this.props; + renderCheckableTag = ({ getPrefixCls }: ConfigConsumerProps) => { + const { prefixCls: customizePrefixCls, className, checked, ...restProps } = this.props; + const prefixCls = getPrefixCls('tag', customizePrefixCls); const cls = classNames(prefixCls, { [`${prefixCls}-checkable`]: true, [`${prefixCls}-checkable-checked`]: checked, @@ -31,4 +33,12 @@ export default class CheckableTag extends React.Component { /> ); } + + render() { + return ( + + {this.renderCheckableTag} + + ); + } } diff --git a/components/tag/index.tsx b/components/tag/index.tsx index a3b9254fb3..8ca175cd94 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -6,6 +6,7 @@ import omit from 'omit.js'; import { polyfill } from 'react-lifecycles-compat'; import Icon from '../icon'; import CheckableTag from './CheckableTag'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import Wave from '../_util/wave'; export { CheckableTagProps } from './CheckableTag'; @@ -34,7 +35,6 @@ export interface TagState { class Tag extends React.Component { static CheckableTag = CheckableTag; static defaultProps = { - prefixCls: 'ant-tag', closable: false, }; @@ -127,10 +127,15 @@ class Tag extends React.Component { ); } - render() { - const { prefixCls, closable, color, className, children, style, ...otherProps } = this.props; + renderTag = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + closable, color, className, children, style, + ...otherProps + } = this.props; const closeIcon = closable ? : ''; const isPresetColor = this.isPresetColor(color); + const prefixCls = getPrefixCls('tag', customizePrefixCls); const classString = classNames(prefixCls, { [`${prefixCls}-${color}`]: isPresetColor, [`${prefixCls}-has-color`]: (color && !isPresetColor), @@ -172,6 +177,14 @@ class Tag extends React.Component { ); } + + render() { + return ( + + {this.renderTag} + + ); + } } polyfill(Tag); diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 2250778bf7..8286578d8c 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -4,7 +4,7 @@ import { polyfill } from 'react-lifecycles-compat'; import RcTimePicker from 'rc-time-picker/lib/TimePicker'; import classNames from 'classnames'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import { ConfigConsumer, ConfigProviderProps } from '../config-provider'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import defaultLocale from './locale/en_US'; import interopDefault from '../_util/interopDefault'; import Icon from '../icon'; @@ -60,7 +60,6 @@ export interface TimePickerLocale { class TimePicker extends React.Component { static defaultProps = { - prefixCls: 'ant-time-picker', align: { offset: [0, -2], }, @@ -136,81 +135,81 @@ class TimePicker extends React.Component { return 'HH:mm:ss'; } - renderTimePicker = (locale: TimePickerLocale) => { - const { getPopupContainer, ...props } = this.props; - delete props.defaultValue; + renderTimePicker = (locale: TimePickerLocale) => ( + + {({ getPopupContainer: getContextPopupContainer, getPrefixCls }: ConfigConsumerProps) => { + const { getPopupContainer, prefixCls: customizePrefixCls, ...props } = this.props; + delete props.defaultValue; - const format = this.getDefaultFormat(); - const className = classNames(props.className, { - [`${props.prefixCls}-${props.size}`]: !!props.size, - }); + const format = this.getDefaultFormat(); + const prefixCls = getPrefixCls('time-picker', customizePrefixCls); + const className = classNames(props.className, { + [`${prefixCls}-${props.size}`]: !!props.size, + }); - const addon = (panel: React.ReactElement) => ( - props.addon ? ( -
- {props.addon(panel)} -
- ) : null - ); + const addon = (panel: React.ReactElement) => ( + props.addon ? ( +
+ {props.addon(panel)} +
+ ) : null + ); - const { suffixIcon, prefixCls } = props; - const clockIcon = suffixIcon && ( - React.isValidElement<{ className?: string }>(suffixIcon) - ? React.cloneElement( - suffixIcon, - { - className: classNames({ - [suffixIcon.props.className!]: suffixIcon.props.className, - [`${prefixCls}-clock-icon`]: true, - }), - }, - ) : {suffixIcon}) || ( - - ); - - const inputIcon = ( - - {clockIcon} - - ); - - const clearIcon = ( - - ); - - return ( - - {({ getPopupContainer: getContextPopupContainer }: ConfigProviderProps) => { - return ( - (suffixIcon) + ? React.cloneElement( + suffixIcon, + { + className: classNames({ + [suffixIcon.props.className!]: suffixIcon.props.className, + [`${prefixCls}-clock-icon`]: true, + }), + }, + ) : {suffixIcon}) || ( + ); - }} - - ); - } + + const inputIcon = ( + + {clockIcon} + + ); + + const clearIcon = ( + + ); + + return ( + + ); + }} + + ); render() { return ( diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 0868b517d2..2c5a7cf56b 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import TimelineItem, { TimeLineItemProps } from './TimelineItem'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface TimelineProps { prefixCls?: string; @@ -15,21 +16,21 @@ export interface TimelineProps { } export default class Timeline extends React.Component { - static Item = TimelineItem as React.ClassicComponentClass; + static Item: React.SFC = TimelineItem; static defaultProps = { - prefixCls: 'ant-timeline', reverse: false, mode: '', }; - render() { + renderTimeline = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls, + prefixCls: customizePrefixCls, pending = null, pendingDot, children, className, reverse, mode, ...restProps } = this.props; + const prefixCls = getPrefixCls('timeline', customizePrefixCls); const pendingNode = typeof pending === 'boolean' ? null : pending; const classString = classNames(prefixCls, { [`${prefixCls}-pending`]: !!pending, @@ -74,4 +75,12 @@ export default class Timeline extends React.Component { ); } + + render() { + return ( + + {this.renderTimeline} + + ); + } } diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx index 1e8e27d661..528e01ca90 100644 --- a/components/timeline/TimelineItem.tsx +++ b/components/timeline/TimelineItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import classNames from 'classnames'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface TimeLineItemProps { prefixCls?: string; @@ -10,40 +11,48 @@ export interface TimeLineItemProps { style?: React.CSSProperties; } -export default class TimelineItem extends React.Component { - static defaultProps = { - prefixCls: 'ant-timeline', - color: 'blue', - pending: false, - }; +const TimelineItem: React.SFC = (props) => ( + + {({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, color = '', children, pending, dot, + ...restProps + } = props; - render() { - const { prefixCls, className, color = '', children, pending, dot, ...restProps } = this.props; + const prefixCls = getPrefixCls('timeline', customizePrefixCls); + const itemClassName = classNames({ + [`${prefixCls}-item`]: true, + [`${prefixCls}-item-pending`]: pending, + }, className); - const itemClassName = classNames({ - [`${prefixCls}-item`]: true, - [`${prefixCls}-item-pending`]: pending, - }, className); + const dotClassName = classNames({ + [`${prefixCls}-item-head`]: true, + [`${prefixCls}-item-head-custom`]: dot, + [`${prefixCls}-item-head-${color}`]: true, + }); - const dotClassName = classNames({ - [`${prefixCls}-item-head`]: true, - [`${prefixCls}-item-head-custom`]: dot, - [`${prefixCls}-item-head-${color}`]: true, - }); + return ( +
  • +
    +
    + {dot} +
    +
    + {children} +
    +
    • + ); + }} +     +); - return ( -
  • -
    -
    - {dot} -
    -
    - {children} -
    -
    • - ); - } -} +TimelineItem.defaultProps = { + color: 'blue', + pending: false, +}; + +export default TimelineItem; diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 3c6f3658a0..23673a91b2 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -3,9 +3,9 @@ import { cloneElement } from 'react'; import { polyfill } from 'react-lifecycles-compat'; import RcTooltip from 'rc-tooltip'; import classNames from 'classnames'; -import Button from '../button/index'; -import { ConfigConsumer, ConfigProviderProps } from '../config-provider'; import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements'; +import Button from '../button/index'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export { AdjustOverflow, PlacementsConfig }; @@ -28,7 +28,7 @@ export interface TooltipAlignConfig { useCssTransform?: boolean } -export interface AbstractTooltipProps extends ConfigProviderProps { +export interface AbstractTooltipProps { prefixCls?: string; overlayClassName?: string; style?: React.CSSProperties; @@ -47,6 +47,7 @@ export interface AbstractTooltipProps extends ConfigProviderProps { autoAdjustOverflow?: boolean | AdjustOverflow; // getTooltipContainer had been rename to getPopupContainer getTooltipContainer?: (triggerNode: Element) => HTMLElement; + getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; children?: React.ReactNode; // align is a more higher api align?: TooltipAlignConfig; @@ -73,7 +74,6 @@ const splitObject = (obj: any, keys: string[]) => { class Tooltip extends React.Component { static defaultProps = { - prefixCls: 'ant-tooltip', placement: 'top' as TooltipPlacement, transitionName: 'zoom-big-fast', mouseEnterDelay: 0.1, @@ -198,10 +198,14 @@ class Tooltip extends React.Component { this.tooltip = node; } - renderTooltip = ({ getPopupContainer: getContextPopupContainer }: ConfigProviderProps) => { + renderTooltip = ({ getPopupContainer: getContextPopupContainer, getPrefixCls }: ConfigConsumerProps) => { const { props, state } = this; - const { prefixCls, title, overlay, openClassName, getPopupContainer, getTooltipContainer } = props; + const { + prefixCls: customizePrefixCls, + title, overlay, openClassName, getPopupContainer, getTooltipContainer, + } = props; const children = props.children as React.ReactElement; + const prefixCls = getPrefixCls('tooltip', customizePrefixCls); let visible = state.visible; // Hide tooltip when there is no title if (!('visible' in props) && this.isNoTitle()) { @@ -220,6 +224,7 @@ class Tooltip extends React.Component { return ( - + + + - + + +     { return ({ ...transferLocale, ...oldLocale, ...this.props.locale }); } - renderTransfer = (transferLocale: TransferLocale) => { - const { - prefixCls = 'ant-transfer', - className, - disabled, - operations = [], - showSearch, - body, - footer, - style, - listStyle, - operationStyle, - filterOption, - render, - lazy, - } = this.props; - const locale = this.getLocale(transferLocale); - const { leftFilter, rightFilter, sourceSelectedKeys, targetSelectedKeys } = this.state; + renderTransfer = (transferLocale: TransferLocale) => ( + + {({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, + disabled, + operations = [], + showSearch, + body, + footer, + style, + listStyle, + operationStyle, + filterOption, + render, + lazy, + } = this.props; + const prefixCls = getPrefixCls('transfer', customizePrefixCls); + const locale = this.getLocale(transferLocale); + const { leftFilter, rightFilter, sourceSelectedKeys, targetSelectedKeys } = this.state; - const { leftDataSource, rightDataSource } = this.separateDataSource(this.props); - const leftActive = targetSelectedKeys.length > 0; - const rightActive = sourceSelectedKeys.length > 0; + const { leftDataSource, rightDataSource } = this.separateDataSource(this.props); + const leftActive = targetSelectedKeys.length > 0; + const rightActive = sourceSelectedKeys.length > 0; - const cls = classNames(className, prefixCls, disabled && `${prefixCls}-disabled`); + const cls = classNames(className, prefixCls, disabled && `${prefixCls}-disabled`); - const titles = this.getTitles(locale); - return ( -
    - - - -
    - ); - } + const titles = this.getTitles(locale); + return ( +
    + + + +
    + ); + }} +     + ); render() { return ( diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index b03d63a32c..8a8c05531a 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { TreeSelectProps } from './interface'; import { SelectLocale } from '../select'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import { ConfigConsumer, ConfigProviderProps } from '../config-provider'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import warning from '../_util/warning'; import Icon from '../icon'; import { AntTreeNodeProps } from '../tree'; @@ -19,7 +19,6 @@ export default class TreeSelect extends React.Component { static SHOW_CHILD = SHOW_CHILD; static defaultProps = { - prefixCls: 'ant-select', transitionName: 'slide-up', choiceTransitionName: 'zoom', showSearch: false, @@ -48,10 +47,7 @@ export default class TreeSelect extends React.Component { this.rcTreeSelect = node; } - renderSwitcherIcon = ({ isLeaf, loading }: AntTreeNodeProps) => { - const { - prefixCls, - } = this.props; + renderSwitcherIcon = (prefixCls: string, { isLeaf, loading }: AntTreeNodeProps) => { if (loading) { return ( { ); } - renderTreeSelect = (locale: SelectLocale) => { - const { - prefixCls, - className, - size, - notFoundContent, - dropdownStyle, - dropdownClassName, - suffixIcon, - getPopupContainer, - ...restProps - } = this.props; - const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon']); + renderTreeSelect = (locale: SelectLocale) => ( + + {({ getPopupContainer: getContextPopupContainer, getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + className, + size, + notFoundContent, + dropdownStyle, + dropdownClassName, + suffixIcon, + getPopupContainer, + ...restProps + } = this.props; + const rest = omit(restProps, ['inputIcon', 'removeIcon', 'clearIcon', 'switcherIcon']); - const cls = classNames({ - [`${prefixCls}-lg`]: size === 'large', - [`${prefixCls}-sm`]: size === 'small', - }, className); + const prefixCls = getPrefixCls('select', customizePrefixCls); + const cls = classNames({ + [`${prefixCls}-lg`]: size === 'large', + [`${prefixCls}-sm`]: size === 'small', + }, className); - let checkable = rest.treeCheckable; - if (checkable) { - checkable = ; - } + let checkable = rest.treeCheckable; + if (checkable) { + checkable = ; + } - const inputIcon = suffixIcon && ( - React.isValidElement<{ className?: string }>(suffixIcon) - ? React.cloneElement(suffixIcon) : suffixIcon) || ( - - ); - - const removeIcon = ( - - ); - - const clearIcon = ( - - ); - - return ( - - {({ getPopupContainer: getContextPopupContainer }: ConfigProviderProps) => { - return ( - + const inputIcon = suffixIcon && ( + React.isValidElement<{ className?: string }>(suffixIcon) + ? React.cloneElement(suffixIcon) : suffixIcon) || ( + ); - }} - - ); - } + + const removeIcon = ( + + ); + + const clearIcon = ( + + ); + + return ( + ( + this.renderSwitcherIcon(prefixCls, nodeProps) + )} + inputIcon={inputIcon} + removeIcon={removeIcon} + clearIcon={clearIcon} + {...rest} + getPopupContainer={getPopupContainer || getContextPopupContainer} + dropdownClassName={classNames(dropdownClassName, `${prefixCls}-tree-dropdown`)} + prefixCls={prefixCls} + className={cls} + dropdownStyle={{ maxHeight: '100vh', overflow: 'auto', ...dropdownStyle }} + treeCheckable={checkable} + notFoundContent={notFoundContent || locale.notFoundContent} + ref={this.saveTreeSelect} + /> + ); + }} + + ); render() { return ( diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 0107f5090b..a34458495c 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import omit from 'omit.js'; import debounce from 'lodash/debounce'; import { conductExpandParent, convertTreeToEntities } from 'rc-tree/lib/util'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import Tree, { TreeProps, AntdTreeNodeAttribute, @@ -32,7 +33,6 @@ function getIcon(props: AntdTreeNodeAttribute): React.ReactNode { export default class DirectoryTree extends React.Component { static defaultProps = { - prefixCls: 'ant-tree', showIcon: true, expandAction: 'click', }; @@ -184,10 +184,11 @@ export default class DirectoryTree extends React.Component { + const { prefixCls: customizePrefixCls, className, ...props } = this.props; const { expandedKeys, selectedKeys } = this.state; + const prefixCls = getPrefixCls('tree', customizePrefixCls); const connectClassName = classNames(`${prefixCls}-directory`, className); return ( @@ -207,4 +208,12 @@ export default class DirectoryTree extends React.Component ); } + + render() { + return ( + + {this.renderDirectoryTree} + + ); + } } diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 22ebc3b6d8..5ef2adf806 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import RcTree, { TreeNode } from 'rc-tree'; import DirectoryTree from './DirectoryTree'; import classNames from 'classnames'; -import animation from '../_util/openAnimation'; import Icon from '../icon'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; +import animation from '../_util/openAnimation'; export interface AntdTreeNodeAttribute { eventKey: string; @@ -152,7 +153,6 @@ export default class Tree extends React.Component { static DirectoryTree = DirectoryTree; static defaultProps = { - prefixCls: 'ant-tree', checkable: false, showIcon: false, openAnimation: { @@ -163,9 +163,8 @@ export default class Tree extends React.Component { tree: any; - renderSwitcherIcon = ({ isLeaf, expanded, loading }: AntTreeNodeProps) => { + renderSwitcherIcon = (prefixCls: string, { isLeaf, expanded, loading }: AntTreeNodeProps) => { const { - prefixCls, showLine, } = this.props; if (loading) { @@ -206,20 +205,32 @@ export default class Tree extends React.Component { this.tree = node; }; - render() { + renderTree = ({ getPrefixCls }: ConfigConsumerProps) => { const props = this.props; - const { prefixCls, className, showIcon } = props; + const { prefixCls: customizePrefixCls, className, showIcon } = props; const checkable = props.checkable; + const prefixCls = getPrefixCls('tree', customizePrefixCls); return ( : checkable} - switcherIcon={this.renderSwitcherIcon} + switcherIcon={(nodeProps: AntTreeNodeProps) => ( + this.renderSwitcherIcon(prefixCls, nodeProps) + )} > {this.props.children} ); } + + render() { + return ( + + {this.renderTree} + + ); + } } diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index fd91f9d57b..cf81ec2316 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -3,8 +3,6 @@ import { polyfill } from 'react-lifecycles-compat'; import RcUpload from 'rc-upload'; import classNames from 'classnames'; import uniqBy from 'lodash/uniqBy'; -import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import defaultLocale from '../locale-provider/default'; import Dragger from './Dragger'; import UploadList from './UploadList'; import { @@ -18,6 +16,9 @@ import { UploadListType, } from './interface'; import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils'; +import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import defaultLocale from '../locale-provider/default'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export { UploadProps }; @@ -25,7 +26,6 @@ class Upload extends React.Component { static Dragger: typeof Dragger; static defaultProps = { - prefixCls: 'ant-upload', type: 'select' as UploadType, multiple: false, action: '', @@ -241,9 +241,9 @@ class Upload extends React.Component { ); } - render() { + renderUpload = ({ getPrefixCls }: ConfigConsumerProps) => { const { - prefixCls = '', + prefixCls: customizePrefixCls, className, showUploadList, listType, @@ -252,12 +252,15 @@ class Upload extends React.Component { children, } = this.props; + const prefixCls = getPrefixCls('upload', customizePrefixCls); + const rcUploadProps = { onStart: this.onStart, onError: this.onError, onProgress: this.onProgress, onSuccess: this.onSuccess, ...this.props, + prefixCls, beforeUpload: this.beforeUpload, }; @@ -325,6 +328,14 @@ class Upload extends React.Component { ); } + + render() { + return ( + + {this.renderUpload} + + ); + } } polyfill(Upload); diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index 0fca5a9ffd..76af67c394 100644 --- a/components/upload/UploadList.tsx +++ b/components/upload/UploadList.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import Animate from 'rc-animate'; +import classNames from 'classnames'; +import { UploadListProps, UploadFile, UploadListType } from './interface'; import Icon from '../icon'; import Tooltip from '../tooltip'; import Progress from '../progress'; -import classNames from 'classnames'; -import { UploadListProps, UploadFile, UploadListType } from './interface'; +import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; const imageTypes: string[] = ['image', 'webp', 'png', 'svg', 'gif', 'jpg', 'jpeg', 'bmp']; // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL @@ -49,7 +50,6 @@ export default class UploadList extends React.Component { strokeWidth: 2, showInfo: false, }, - prefixCls: 'ant-upload', showRemoveIcon: true, showPreviewIcon: true, }; @@ -94,8 +94,12 @@ export default class UploadList extends React.Component { }); } - render() { - const { prefixCls, items = [], listType, showPreviewIcon, showRemoveIcon, locale } = this.props; + renderUploadList = ({ getPrefixCls }: ConfigConsumerProps) => { + const { + prefixCls: customizePrefixCls, + items = [], listType, showPreviewIcon, showRemoveIcon, locale, + } = this.props; + const prefixCls = getPrefixCls('upload', customizePrefixCls); const list = items.map(file => { let progress; let icon = ; @@ -225,4 +229,12 @@ export default class UploadList extends React.Component { ); } + + render() { + return ( + + {this.renderUploadList} + + ); + } }