Merge branch 'master' of github.com:ant-design/ant-design

ithanshui · Sep 14, 2016 · 73a6bfb · 73a6bfb
2 parents bbe6606 + a25ec29
commit 73a6bfb
Show file tree

Hide file tree

Showing 85 changed files with 449 additions and 355 deletions.
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
@@ -55,6 +55,7 @@ export interface AffixProps {
   style?: React.CSSProperties;
   onChange?: (affixed?: boolean) => any;
   target?: () => Window | HTMLElement;
+  prefixCls?: string;
 }
 
 export default class Affix extends React.Component<AffixProps, any> {
@@ -69,6 +70,7 @@ export default class Affix extends React.Component<AffixProps, any> {
       return window;
     },
     onChange() {},
+    prefixCls: 'ant-affix',
   };
 
   scrollEvent: any;
@@ -215,7 +217,7 @@ export default class Affix extends React.Component<AffixProps, any> {
 
   render() {
     const className = classNames({
-      'ant-affix': this.state.affixStyle,
+      [this.props.prefixCls]: this.state.affixStyle,
     });
 
     const props = assign({}, this.props);

diff --git a/components/affix/style/index.less b/components/affix/style/index.less
@@ -1,6 +1,6 @@
 @import "../../style/themes/default";
 
-.ant-affix {
+.@{ant-prefix}-affix {
   position: fixed;
   z-index: @zindex-affix;
 }
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
@@ -17,30 +17,30 @@ Decent icon make information more clear and more friendly.
 import { Alert } from 'antd';
 
 ReactDOM.render(<div>
-  <Alert message="Copywriting Success Tips" type="success" showIcon />
-  <Alert message="Copywriting Informational Notes" type="info" showIcon />
-  <Alert message="Copywriting Warning" type="warning" showIcon />
-  <Alert message="Copywriting Error" type="error" showIcon />
+  <Alert message="Success Tips" type="success" showIcon />
+  <Alert message="Informational Notes" type="info" showIcon />
+  <Alert message="Warning" type="warning" showIcon />
+  <Alert message="Error" type="error" showIcon />
   <Alert
-    message="Copywriting success tips"
+    message="success tips"
     description="Detailed description and advices about successful copywriting."
     type="success"
     showIcon
   />
   <Alert
-    message="Copywriting Informational Notes"
+    message="Informational Notes"
     description="Additional description and informations about copywriting."
     type="info"
     showIcon
   />
   <Alert
-    message="Copywriting Warning"
+    message="Warning"
     description="This is a warning notice about copywriting."
     type="warning"
     showIcon
   />
   <Alert
-    message="Copywriting Error"
+    message="Error"
     description="This is an error message about copywriting."
     type="error"
     showIcon

diff --git a/components/alert/index.tsx b/components/alert/index.tsx
@@ -113,7 +113,7 @@ export default class Alert extends React.Component<AlertProps, any> {
         onEnd={this.animationEnd}
       >
         <div data-show={this.state.closing} className={alertCls}>
-          {showIcon ? <Icon className="ant-alert-icon" type={iconType} /> : null}
+          {showIcon ? <Icon className={`${prefixCls}-icon`} type={iconType} /> : null}
           <span className={`${prefixCls}-message`}>{message}</span>
           <span className={`${prefixCls}-description`}>{description}</span>
           {closable ? <a onClick={this.handleClose} className={`${prefixCls}-close-icon`}>

diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -1,6 +1,6 @@
 @import "../../style/themes/default";
 
-@alert-prefix-cls: ant-alert;
+@alert-prefix-cls: ~"@{ant-prefix}-alert";
 
 .@{alert-prefix-cls} {
   position: relative;
@@ -70,7 +70,7 @@
     overflow: hidden;
     cursor: pointer;
 
-    .anticon-cross {
+    .@{iconfont-css-prefix}-cross {
       color: @legend-color;
       transition: color .3s ease;
       &:hover {

diff --git a/components/back-top/style/index.less b/components/back-top/style/index.less
@@ -1,6 +1,6 @@
 @import "../../style/themes/default";
 
-@backtop-prefix-cls: ant-back-top;
+@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
 
 .@{backtop-prefix-cls} {
   z-index: @zindex-back-top;

diff --git a/components/badge/style/index.less b/components/badge/style/index.less
@@ -1,7 +1,7 @@
 @import "../../style/themes/default";
 
-@badge-prefix-cls: ant-badge;
-@number-prefix-cls: ant-scroll-number;
+@badge-prefix-cls: ~"@{ant-prefix}-badge";
+@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
 
 .@{badge-prefix-cls} {
   position: relative;

diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
@@ -56,7 +56,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
 
     warning(
       !('linkRender' in props || 'nameRender' in props),
-      '`linkRender` and `nameRender` is removed, please use `itemRender` instead.'
+      '`linkRender` and `nameRender` are removed, please use `itemRender` instead.'
     );
   }
 

diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
@@ -1,6 +1,6 @@
 @import "../../style/themes/default";
 
-@breadcrumb-prefix-cls: ant-breadcrumb;
+@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
 
 .@{breadcrumb-prefix-cls} {
   color: #999;
@@ -29,7 +29,7 @@
   }
 
   &-link {
-    > .anticon + span {
+    > .@{iconfont-css-prefix} + span {
       margin-left: 4px;
     }
   }

diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
@@ -2,18 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import splitObject from '../_util/splitObject';
 
-const prefix = 'ant-btn-group-';
-
 export type ButtonSize = 'small' | 'large'
 
 export interface ButtonGroupProps {
   size?: ButtonSize;
   style?: React.CSSProperties;
   className?: string;
+  prefixCls?: string;
 }
 
 export default function ButtonGroup(props: ButtonGroupProps) {
-  const [{ size, className }, others] = splitObject(props, ['size', 'className']);
+  const [{ prefixCls = 'ant-btn-group', size, className }, others] =
+    splitObject(props, ['prefixCls', 'size', 'className']);
 
   // large => lg
   // small => sm
@@ -23,8 +23,8 @@ export default function ButtonGroup(props: ButtonGroupProps) {
   })[size] || '';
 
   const classes = classNames({
-    'ant-btn-group': true,
-    [prefix + sizeCls]: sizeCls,
+    [prefixCls]: true,
+    [`${prefixCls}-${sizeCls}`]: sizeCls,
     [className]: className,
   });
 

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -2,7 +2,7 @@
 @import "../../style/mixins/index";
 @import "./mixin";
 
-@btn-prefix-cls: ant-btn;
+@btn-prefix-cls: ~"@{ant-prefix}-btn";
 
 // Button styles
 // -----------------------------
@@ -69,7 +69,7 @@
     padding-left: 29px;
     pointer-events: none;
     position: relative;
-    .anticon {
+    .@{iconfont-css-prefix} {
       margin-left: -14px;
       transition: all .3s @ease-in-out;
     }
@@ -80,7 +80,7 @@
 
   &-sm&-loading {
     padding-left: 24px;
-    .anticon {
+    .@{iconfont-css-prefix} {
       margin-left: -17px;
     }
   }

diff --git a/components/calendar/style/index.less b/components/calendar/style/index.less
@@ -1,6 +1,6 @@
 @import "../../style/themes/default";
 
-@full-calendar-prefix-cls: ant-fullcalendar;
+@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar";
 
 .@{full-calendar-prefix-cls} {
   font-size: @font-size-base;
@@ -14,16 +14,16 @@
     padding: 11px 16px 11px 0;
     text-align: right;
 
-    .ant-select {
+    .@{ant-prefix}-select {
       text-align: left;
     }
 
-    .ant-radio-group {
+    .@{ant-prefix}-radio-group {
       margin-left: 8px;
       text-align: left;
     }
 
-    label.ant-radio-button {
+    label.@{ant-prefix}-radio-button {
       height: 22px;
       line-height: 20px;
       padding: 0 10px;
@@ -162,10 +162,10 @@
   }
 
   &-fullscreen &-header {
-    .ant-radio-group {
+    .@{ant-prefix}-radio-group {
       margin-left: 16px;
     }
-    label.ant-radio-button {
+    label.@{ant-prefix}-radio-button {
       height: 28px;
       line-height: 26px;
     }

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -1,6 +1,6 @@
 @import "../../style/themes/default";
 
-@card-prefix-cls: ant-card;
+@card-prefix-cls: ~"@{ant-prefix}-card";
 
 .@{card-prefix-cls} {
   background: #fff;

diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
@@ -37,12 +37,14 @@ export interface CarouselProps {
   afterChange?: (current: number) => void;
   /** 行内样式 */
   style?: React.CSSProperties;
+  prefixCls?: string;
 }
 
 export default class Carousel extends React.Component<CarouselProps, any> {
   static defaultProps = {
     dots: true,
     arrows: false,
+    prefixCls: 'ant-carousel',
   };
 
   render() {
@@ -53,9 +55,9 @@ export default class Carousel extends React.Component<CarouselProps, any> {
       props.draggable = false;
     }
 
-    let className = 'ant-carousel';
+    let className = props.prefixCls;
     if (props.vertical) {
-      className = `${className} ant-carousel-vertical`;
+      className = `${className} ${className}-vertical`;
     }
 
     return (

diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less
@@ -1,7 +1,7 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-.ant-carousel {
+.@{ant-prefix}-carousel {
   .slick-slider {
     position: relative;
     display: block;
@@ -204,7 +204,7 @@
   }
 }
 
-.ant-carousel-vertical {
+.@{ant-prefix}-carousel-vertical {
   .slick-slider {
     padding-bottom: 0;
   }

diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
@@ -18,7 +18,7 @@ export type CascaderExpandTrigger = 'click' | 'hover'
 
 export interface ShowSearchType {
   filter?: (inputValue: string, path: CascaderOptionType[]) => boolean;
-  render?: (inputValue: string, path: CascaderOptionType[]) => React.ReactNode;
+  render?: (inputValue: string, path: CascaderOptionType[], prefixCls: string) => React.ReactNode;
   sort?: (a: CascaderOptionType[], b: CascaderOptionType[], inputValue: string) => number;
   matchInputWidth?: boolean;
 }
@@ -58,12 +58,14 @@ export interface CascaderProps {
   changeOnSelect?: boolean;
   /** 浮层可见变化时回调 */
   onPopupVisibleChange?: (popupVisible: boolean) => void;
+  prefixCls?: string;
+  inputPrefixCls?: string;
 }
 
-function highlightKeyword(str: string, keyword: string) {
+function highlightKeyword(str: string, keyword: string, prefixCls: string) {
   return str.split(keyword)
     .map((node: string, index: number) => index === 0 ? node : [
-      <span className="ant-cascader-menu-item-keyword" key="seperator">{keyword}</span>,
+      <span className={`${prefixCls}-menu-item-keyword`} key="seperator">{keyword}</span>,
       node,
     ]);
 }
@@ -72,9 +74,9 @@ function defaultFilterOption(inputValue, path) {
   return path.some(option => option.label.indexOf(inputValue) > -1);
 }
 
-function defaultRenderFilteredOption(inputValue, path) {
+function defaultRenderFilteredOption(inputValue, path, prefixCls) {
   return path.map(({ label }, index) => {
-    const node = label.indexOf(inputValue) > -1 ? highlightKeyword(label, inputValue) : label;
+    const node = label.indexOf(inputValue) > -1 ? highlightKeyword(label, inputValue, prefixCls) : label;
     return index === 0 ? node : [' / ', node];
   });
 }
@@ -90,6 +92,7 @@ function defaultSortFilteredOption(a, b, inputValue) {
 export default class Cascader extends React.Component<CascaderProps, any> {
   static defaultProps = {
     prefixCls: 'ant-cascader',
+    inputPrefixCls: 'ant-input',
     placeholder: 'Please select',
     transitionName: 'slide-up',
     popupPlacement: 'bottomLeft',
@@ -206,7 +209,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     return flattenOptions;
   }
 
-  generateFilteredOptions() {
+  generateFilteredOptions(prefixCls) {
     const { showSearch, notFoundContent } = this.props;
     const {
       filter = defaultFilterOption,
@@ -220,7 +223,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     if (filtered.length > 0) {
       return filtered.map((path) => {
         return {
-          label: render(inputValue, path),
+          label: render(inputValue, path, prefixCls),
           value: path.map(o => o.value),
         };
       });
@@ -238,8 +241,8 @@ export default class Cascader extends React.Component<CascaderProps, any> {
     const value = state.value;
 
     const sizeCls = classNames({
-      'ant-input-lg': size === 'large',
-      'ant-input-sm': size === 'small',
+      [`${props.inputPrefixCls}-lg`]: size === 'large',
+      [`${props.inputPrefixCls}-sm`]: size === 'small',
     });
     const clearIcon = (allowClear && !disabled && value.length > 0) || state.inputValue ?
       <Icon type="cross-circle"
@@ -279,7 +282,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
 
     let options = props.options;
     if (state.inputValue) {
-      options = this.generateFilteredOptions();
+      options = this.generateFilteredOptions(prefixCls);
     }
     // Dropdown menu should keep previous status until it is fully closed.
     if (!state.popupVisible) {

diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
@@ -1,11 +1,11 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 
-@cascader-prefix-cls: ant-cascader;
+@cascader-prefix-cls: ~"@{ant-prefix}-cascader";
 
 .@{cascader-prefix-cls} {
   font-size: @font-size-base;
-  &-input.ant-input {
+  &-input.@{ant-prefix}-input {
     background-color: transparent;
     display: block;
     cursor: pointer;