mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
afc163
commit
73a6bfb055
@ -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);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
.ant-affix {
|
||||
.@{ant-prefix}-affix {
|
||||
position: fixed;
|
||||
z-index: @zindex-affix;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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`}>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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.'
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@card-prefix-cls: ant-card;
|
||||
@card-prefix-cls: ~"@{ant-prefix}-card";
|
||||
|
||||
.@{card-prefix-cls} {
|
||||
background: #fff;
|
||||
|
||||
@ -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 (
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -19,6 +19,7 @@ export interface CheckboxGroupProps {
|
||||
onChange?: (checkedValue: Array<string>) => void;
|
||||
disabled?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export interface CheckboxGroupState {
|
||||
@ -30,6 +31,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
|
||||
options: [],
|
||||
defaultValue: [],
|
||||
onChange() {},
|
||||
prefixCls: 'ant-checkbox-group',
|
||||
};
|
||||
static propTypes = {
|
||||
defaultValue: React.PropTypes.array,
|
||||
@ -84,15 +86,16 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps, C
|
||||
this.props.onChange(value);
|
||||
}
|
||||
render() {
|
||||
const { prefixCls } = this.props;
|
||||
const options = this.getOptions();
|
||||
return (
|
||||
<div className="ant-checkbox-group">
|
||||
<div className={prefixCls}>
|
||||
{
|
||||
options.map(option =>
|
||||
<Checkbox disabled={'disabled' in option ? option.disabled : this.props.disabled}
|
||||
checked={this.state.value.indexOf(option.value) !== -1}
|
||||
onChange={() => this.toggleOption(option)}
|
||||
className="ant-checkbox-group-item" key={option.value}
|
||||
className={`${prefixCls}-item`} key={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</Checkbox>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ant-checkbox) {
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
|
||||
@checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
|
||||
// 一般状态
|
||||
.@{checkbox-prefix-cls} {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@collapse-prefix-cls: ant-collapse;
|
||||
@collapse-prefix-cls: ~"@{ant-prefix}-collapse";
|
||||
|
||||
.collapse-close() {
|
||||
.iconfont-size-under-12px(7px, 270deg);
|
||||
|
||||
@ -8,6 +8,7 @@ import Icon from '../icon';
|
||||
export default class RangePicker extends React.Component<any, any> {
|
||||
static defaultProps = {
|
||||
defaultValue: [],
|
||||
prefixCls: 'ant-calendar',
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
@ -50,12 +51,12 @@ export default class RangePicker extends React.Component<any, any> {
|
||||
const props = this.props;
|
||||
const locale = props.locale;
|
||||
|
||||
const { disabledDate, showTime, getCalendarContainer,
|
||||
const { disabledDate, showTime, getCalendarContainer, prefixCls,
|
||||
transitionName, disabled, popupStyle, align, style, onOk } = this.props;
|
||||
const state = this.state;
|
||||
|
||||
const calendarClassName = classNames({
|
||||
'ant-calendar-time': showTime,
|
||||
[`${prefixCls}-time`]: showTime,
|
||||
});
|
||||
|
||||
// 需要选择时间时，点击 ok 时才触发 onChange
|
||||
@ -81,7 +82,7 @@ export default class RangePicker extends React.Component<any, any> {
|
||||
const calendar = (
|
||||
<RangeCalendar
|
||||
{...calendarHandler}
|
||||
prefixCls="ant-calendar"
|
||||
prefixCls={prefixCls}
|
||||
className={calendarClassName}
|
||||
timePicker={props.timePicker}
|
||||
disabledDate={disabledDate}
|
||||
@ -95,7 +96,7 @@ export default class RangePicker extends React.Component<any, any> {
|
||||
const clearIcon = (!props.disabled && state.value && (state.value[0] || state.value[1]))
|
||||
? <Icon
|
||||
type="cross-circle"
|
||||
className="ant-calendar-picker-clear"
|
||||
className={`${prefixCls}-picker-clear`}
|
||||
onClick={this.clearSelection}
|
||||
/> : null;
|
||||
|
||||
@ -106,7 +107,7 @@ export default class RangePicker extends React.Component<any, any> {
|
||||
disabled={disabled}
|
||||
calendar={calendar}
|
||||
value={state.value}
|
||||
prefixCls="ant-calendar-picker-container"
|
||||
prefixCls={`${prefixCls}-picker-container`}
|
||||
style={popupStyle}
|
||||
align={align}
|
||||
getCalendarContainer={getCalendarContainer}
|
||||
@ -124,18 +125,18 @@ export default class RangePicker extends React.Component<any, any> {
|
||||
readOnly
|
||||
value={(start && start.format(props.format)) || ''}
|
||||
placeholder={startPlaceholder}
|
||||
className="ant-calendar-range-picker-input"
|
||||
className={`${prefixCls}-range-picker-input`}
|
||||
/>
|
||||
<span className="ant-calendar-range-picker-separator"> ~ </span>
|
||||
<span className={`${prefixCls}-range-picker-separator`}> ~ </span>
|
||||
<input
|
||||
disabled={disabled}
|
||||
readOnly
|
||||
value={(end && end.format(props.format)) || ''}
|
||||
placeholder={endPlaceholder}
|
||||
className="ant-calendar-range-picker-input"
|
||||
className={`${prefixCls}-range-picker-input`}
|
||||
/>
|
||||
{clearIcon}
|
||||
<span className="ant-calendar-picker-icon" />
|
||||
<span className={`${prefixCls}-picker-icon`} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,11 +8,17 @@ import Icon from '../icon';
|
||||
|
||||
export interface PickerProps {
|
||||
value?: moment.Moment;
|
||||
prefixCls: string;
|
||||
}
|
||||
|
||||
export default function createPicker(TheCalendar) {
|
||||
// use class typescript error
|
||||
const CalenderWrapper = React.createClass({
|
||||
getDefaultProps() {
|
||||
return {
|
||||
prefixCls: 'ant-calendar',
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
const props = this.props;
|
||||
@ -46,6 +52,7 @@ export default function createPicker(TheCalendar) {
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const prefixCls = props.prefixCls;
|
||||
const locale = props.locale;
|
||||
|
||||
const placeholder = ('placeholder' in props)
|
||||
@ -54,8 +61,8 @@ export default function createPicker(TheCalendar) {
|
||||
const disabledTime = props.showTime ? props.disabledTime : null;
|
||||
|
||||
const calendarClassName = classNames({
|
||||
'ant-calendar-time': props.showTime,
|
||||
'ant-calendar-month': MonthCalendar === TheCalendar,
|
||||
[`${prefixCls}-time`]: props.showTime,
|
||||
[`${prefixCls}-month`]: MonthCalendar === TheCalendar,
|
||||
});
|
||||
|
||||
// 需要选择时间时，点击 ok 时才触发 onChange
|
||||
@ -85,7 +92,7 @@ export default function createPicker(TheCalendar) {
|
||||
timePicker={props.timePicker}
|
||||
defaultValue={props.defaultPickerValue || moment()}
|
||||
dateInputPlaceholder={placeholder}
|
||||
prefixCls="ant-calendar"
|
||||
prefixCls={prefixCls}
|
||||
className={calendarClassName}
|
||||
onOk={props.onOk}
|
||||
{...calendarHandler}
|
||||
@ -100,7 +107,7 @@ export default function createPicker(TheCalendar) {
|
||||
|
||||
const clearIcon = (!props.disabled && this.state.value) ?
|
||||
<Icon type="cross-circle"
|
||||
className="ant-calendar-picker-clear"
|
||||
className={`${prefixCls}-picker-clear`}
|
||||
onClick={this.clearSelection}
|
||||
/> : null;
|
||||
return (
|
||||
@ -111,7 +118,7 @@ export default function createPicker(TheCalendar) {
|
||||
disabled={props.disabled}
|
||||
calendar={calendar}
|
||||
value={this.state.value}
|
||||
prefixCls="ant-calendar-picker-container"
|
||||
prefixCls={`${prefixCls}-picker-container`}
|
||||
style={props.popupStyle}
|
||||
align={props.align}
|
||||
getCalendarContainer={props.getCalendarContainer}
|
||||
@ -131,7 +138,7 @@ export default function createPicker(TheCalendar) {
|
||||
className={props.pickerInputClass}
|
||||
/>
|
||||
{clearIcon}
|
||||
<span className="ant-calendar-picker-icon" />
|
||||
<span className={`${prefixCls}-picker-icon`} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@ -17,6 +17,8 @@ export interface PickerProps {
|
||||
locale?: any;
|
||||
size?: 'large' | 'small' | 'default';
|
||||
getCalendarContainer?: (trigger) => React.ReactNode;
|
||||
prefixCls?: string;
|
||||
inputPrefixCls?: string;
|
||||
}
|
||||
|
||||
export interface SinglePickerProps {
|
||||
|
||||
@ -49,20 +49,36 @@
|
||||
.@{calendar-prefix-cls}-prev-decade-btn,
|
||||
.@{calendar-prefix-cls}-prev-year-btn {
|
||||
left: 7px;
|
||||
|
||||
&:after {
|
||||
content: '«';
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-next-century-btn,
|
||||
.@{calendar-prefix-cls}-next-decade-btn,
|
||||
.@{calendar-prefix-cls}-next-year-btn {
|
||||
right: 7px;
|
||||
|
||||
&:after {
|
||||
content: '»';
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-prev-month-btn {
|
||||
left: 29px;
|
||||
|
||||
&:after {
|
||||
content: '‹';
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-next-month-btn {
|
||||
right: 29px;
|
||||
|
||||
&:after {
|
||||
content: '›';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@input-box-height: 34px;
|
||||
|
||||
.@{calendar-prefix-cls}-range-picker.ant-input {
|
||||
.@{calendar-prefix-cls}-range-picker.@{ant-prefix}-input {
|
||||
padding-right: 26px;
|
||||
}
|
||||
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
@import "../../input/style/mixin";
|
||||
@import "../../button/style/mixin";
|
||||
|
||||
@calendar-prefix-cls: ant-calendar;
|
||||
@timepicker-prefix-cls: ant-calendar-time-picker;
|
||||
@calendar-prefix-cls: ~"@{ant-prefix}-calendar";
|
||||
@timepicker-prefix-cls: ~"@{ant-prefix}-calendar-time-picker";
|
||||
|
||||
@import "Picker";
|
||||
@import "Calendar";
|
||||
|
||||
@ -22,6 +22,8 @@ export default function wrapPicker(Picker, defaultFormat?) {
|
||||
align: {
|
||||
offset: [0, -9],
|
||||
},
|
||||
prefixCls: 'ant-calendar',
|
||||
inputPrefixCls: 'ant-input',
|
||||
};
|
||||
},
|
||||
|
||||
@ -48,14 +50,15 @@ export default function wrapPicker(Picker, defaultFormat?) {
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const { prefixCls, inputPrefixCls } = props;
|
||||
const pickerClass = classNames({
|
||||
'ant-calendar-picker': true,
|
||||
[`${prefixCls}-picker`]: true,
|
||||
});
|
||||
const pickerInputClass = classNames({
|
||||
'ant-calendar-range-picker': true,
|
||||
'ant-input': true,
|
||||
'ant-input-lg': props.size === 'large',
|
||||
'ant-input-sm': props.size === 'small',
|
||||
[`${prefixCls}-range-picker`]: true,
|
||||
[inputPrefixCls]: true,
|
||||
[`${inputPrefixCls}-lg`]: props.size === 'large',
|
||||
[`${inputPrefixCls}-sm`]: props.size === 'small',
|
||||
});
|
||||
|
||||
const locale = this.getLocale();
|
||||
@ -70,7 +73,7 @@ export default function wrapPicker(Picker, defaultFormat?) {
|
||||
<TimePickerPanel
|
||||
{...rcTimePickerProps}
|
||||
{...props.showTime}
|
||||
prefixCls="ant-calendar-time-picker"
|
||||
prefixCls={`${prefixCls}-time-picker`}
|
||||
placeholder={locale.timePickerLocale.placeholder}
|
||||
transitionName="slide-up"
|
||||
/>
|
||||
|
||||
@ -14,6 +14,7 @@ export interface DropdownButtonProps {
|
||||
visible?: boolean;
|
||||
onVisibleChange?: (visible: boolean) => void;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export default class DropdownButton extends React.Component<DropdownButtonProps, any> {
|
||||
@ -28,13 +29,15 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
|
||||
targetOffset: [0, 0],
|
||||
},
|
||||
type: 'default',
|
||||
prefixCls: 'ant-dropdown-button',
|
||||
};
|
||||
|
||||
render() {
|
||||
const [{ type, overlay, trigger, align, children, className, onClick }, restProps] = splitObject(this.props,
|
||||
['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick']);
|
||||
const [{ type, overlay, trigger, align, children, className, onClick, prefixCls }, restProps] =
|
||||
splitObject(this.props,
|
||||
['type', 'overlay', 'trigger', 'align', 'children', 'className', 'onClick', 'prefixCls']);
|
||||
const cls = classNames({
|
||||
'ant-dropdown-button': true,
|
||||
[prefixCls]: true,
|
||||
[className]: !!className,
|
||||
});
|
||||
return (
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@dropdown-prefix-cls: ant-dropdown;
|
||||
@dropdown-prefix-cls: ~"@{ant-prefix}-dropdown";
|
||||
|
||||
.@{dropdown-prefix-cls} {
|
||||
position: absolute;
|
||||
@ -16,17 +16,17 @@
|
||||
&-wrap {
|
||||
position: relative;
|
||||
|
||||
.ant-btn > .@{iconfont-css-prefix}-down {
|
||||
.@{ant-prefix}-btn > .@{iconfont-css-prefix}-down {
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
|
||||
.anticon-down:before {
|
||||
.@{iconfont-css-prefix}-down:before {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrap-open {
|
||||
.anticon-down:before {
|
||||
.@{iconfont-css-prefix}-down:before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
@ -156,17 +156,17 @@
|
||||
|
||||
.@{dropdown-prefix-cls}-link {
|
||||
font-size: 12px;
|
||||
.anticon-down {
|
||||
.@{iconfont-css-prefix}-down {
|
||||
.iconfont-size-under-12px(8px);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.@{dropdown-prefix-cls}-button {
|
||||
&.ant-btn-group > .ant-btn:last-child:not(:first-child) {
|
||||
&.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
|
||||
padding-right: 7px;
|
||||
}
|
||||
.anticon-down {
|
||||
.@{iconfont-css-prefix}-down {
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@ export interface FormProps {
|
||||
horizontal?: boolean;
|
||||
inline?: boolean;
|
||||
vertical?: boolean;
|
||||
form?: Object;
|
||||
form?: WrappedFormUtils;
|
||||
onSubmit?: React.FormEventHandler;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
@ -51,19 +51,21 @@ export type WrappedFormUtils = {
|
||||
/** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
|
||||
resetFields(names?: Array<string>): void;
|
||||
|
||||
getFieldProps(id: string, options: {
|
||||
getFieldDecorator(id: string, options: {
|
||||
/** 子节点的值的属性，如 Checkbox 的是 'checked' */
|
||||
valuePropName?: string;
|
||||
/** 子节点的初始值，类型、可选值均由子节点决定 */
|
||||
initialValue?: any;
|
||||
/** 收集子节点的值的时机 */
|
||||
trigger?: string;
|
||||
/** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
|
||||
getValueFromEvent?: (...args) => any;
|
||||
/** 校验子节点值的时机 */
|
||||
validateTrigger?: string;
|
||||
/** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
|
||||
rules?: Array<any>;
|
||||
/** 必填输入控件唯一标志 */
|
||||
id?: string;
|
||||
/** 是否和其他控件互斥，特别用于 Radio 单选控件 */
|
||||
exclusive: boolean;
|
||||
}): Array<any>;
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ import { FIELD_META_PROP } from './constants';
|
||||
|
||||
export interface FormItemLabelColOption {
|
||||
span: number;
|
||||
offset: number;
|
||||
offset?: number;
|
||||
}
|
||||
|
||||
export interface FormItemProps {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
@import "../../layout/style/mixin";
|
||||
@import "./mixin";
|
||||
|
||||
@form-prefix-cls: ant-form;
|
||||
@form-prefix-cls: ~"@{ant-prefix}-form";
|
||||
|
||||
.reset-form();
|
||||
|
||||
@ -38,10 +38,10 @@ input[type="checkbox"] {
|
||||
}
|
||||
|
||||
// These classes are used directly on <label>s
|
||||
.ant-radio-inline,
|
||||
.ant-radio-vertical,
|
||||
.ant-checkbox-inline,
|
||||
.ant-checkbox-vertical {
|
||||
.@{ant-prefix}-radio-inline,
|
||||
.@{ant-prefix}-radio-vertical,
|
||||
.@{ant-prefix}-checkbox-inline,
|
||||
.@{ant-prefix}-checkbox-vertical {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: @cursor-disabled;
|
||||
@ -49,8 +49,8 @@ input[type="checkbox"] {
|
||||
}
|
||||
|
||||
// These classes are used on elements with <label> descendants
|
||||
.ant-radio,
|
||||
.ant-checkbox {
|
||||
.@{ant-prefix}-radio,
|
||||
.@{ant-prefix}-checkbox {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
label {
|
||||
@ -100,7 +100,7 @@ input[type="checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-switch {
|
||||
.@{ant-prefix}-switch {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
@ -132,17 +132,17 @@ input[type="checkbox"] {
|
||||
// 表单下的输入框尺寸唯一: 大尺寸
|
||||
form {
|
||||
.has-feedback {
|
||||
.ant-input {
|
||||
.@{ant-prefix}-input {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.ant-input {
|
||||
textarea.@{ant-prefix}-input {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// input[type=file]
|
||||
.ant-upload {
|
||||
.@{ant-prefix}-upload {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -153,8 +153,8 @@ form {
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.ant-radio-inline,
|
||||
.ant-checkbox-inline {
|
||||
.@{ant-prefix}-radio-inline,
|
||||
.@{ant-prefix}-checkbox-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
@ -166,30 +166,30 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-checkbox-vertical,
|
||||
.ant-radio-vertical {
|
||||
.@{ant-prefix}-checkbox-vertical,
|
||||
.@{ant-prefix}-radio-vertical {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ant-checkbox-vertical + .ant-checkbox-vertical,
|
||||
.ant-radio-vertical + .ant-radio-vertical {
|
||||
.@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
|
||||
.@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
.@{ant-prefix}-input-number {
|
||||
margin-top: -1px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ant-select,
|
||||
.ant-cascader-picker {
|
||||
.@{ant-prefix}-select,
|
||||
.@{ant-prefix}-cascader-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Input combined with select
|
||||
.ant-input-group-wrap {
|
||||
.ant-select-selection {
|
||||
.@{ant-prefix}-input-group-wrap {
|
||||
.@{ant-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
&:hover {
|
||||
@ -197,18 +197,18 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-selection--single {
|
||||
.@{ant-prefix}-select-selection--single {
|
||||
margin-left: -1px;
|
||||
height: @input-height-lg;
|
||||
background-color: #eee;
|
||||
.ant-select-selection__rendered {
|
||||
.@{ant-prefix}-select-selection__rendered {
|
||||
padding-left: 8px;
|
||||
padding-right: 25px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-select-open .ant-select-selection {
|
||||
.@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
|
||||
border-color: @border-color-base;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -221,8 +221,8 @@ form {
|
||||
.make-row;
|
||||
}
|
||||
|
||||
.ant-radio-inline,
|
||||
.ant-checkbox-inline {
|
||||
.@{ant-prefix}-radio-inline,
|
||||
.@{ant-prefix}-checkbox-inline {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@ -317,7 +317,7 @@ form {
|
||||
}
|
||||
|
||||
.has-success {
|
||||
.ant-input {
|
||||
.@{ant-prefix}-input {
|
||||
border-color: @input-border-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
@ -337,7 +337,7 @@ form {
|
||||
}
|
||||
|
||||
//select
|
||||
.ant-select {
|
||||
.@{ant-prefix}-select {
|
||||
&-selection {
|
||||
border-color: @warning-color;
|
||||
.active(@warning-color);
|
||||
@ -348,17 +348,17 @@ form {
|
||||
}
|
||||
|
||||
//datepicker
|
||||
.ant-calendar-picker-icon:after {
|
||||
.@{ant-prefix}-calendar-picker-icon:after {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
//timepicker
|
||||
.ant-time-picker-icon:after {
|
||||
.@{ant-prefix}-time-picker-icon:after {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
//input-number
|
||||
.ant-input-number {
|
||||
.@{ant-prefix}-input-number {
|
||||
border-color: @warning-color;
|
||||
.active(@warning-color);
|
||||
&:not([disabled]):hover {
|
||||
@ -376,7 +376,7 @@ form {
|
||||
}
|
||||
|
||||
//select
|
||||
.ant-select {
|
||||
.@{ant-prefix}-select {
|
||||
&-selection {
|
||||
border-color: @error-color;
|
||||
.active(@error-color);
|
||||
@ -388,26 +388,26 @@ form {
|
||||
}
|
||||
|
||||
//datepicker
|
||||
.ant-calendar-picker-icon:after {
|
||||
.@{ant-prefix}-calendar-picker-icon:after {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
//timepicker
|
||||
.ant-time-picker-picker-icon:after {
|
||||
.@{ant-prefix}-time-picker-picker-icon:after {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
//input-number
|
||||
.ant-input-number {
|
||||
.@{ant-prefix}-input-number {
|
||||
border-color: @error-color;
|
||||
.active(@error-color);
|
||||
&:not([disabled]):hover {
|
||||
border-color: @error-color;
|
||||
}
|
||||
}
|
||||
.ant-mention-wrapper,
|
||||
.ant-mention-wrapper.active {
|
||||
.ant-mention-editor {
|
||||
.@{ant-prefix}-mention-wrapper,
|
||||
.@{ant-prefix}-mention-wrapper.active {
|
||||
.@{ant-prefix}-mention-editor {
|
||||
border-color: @error-color;
|
||||
.active(@error-color);
|
||||
&:not([disabled]):hover,
|
||||
@ -428,13 +428,13 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
.ant-advanced-search-form {
|
||||
.@{ant-prefix}-advanced-search-form {
|
||||
.@{form-prefix-cls}-item {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ant-input,
|
||||
.ant-input-group .ant-input,
|
||||
.ant-input-group .ant-input-group-addon {
|
||||
.@{ant-prefix}-input,
|
||||
.@{ant-prefix}-input-group .@{ant-prefix}-input,
|
||||
.@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
|
||||
.ant-form-explain,
|
||||
.ant-form-split {
|
||||
.@{ant-prefix}-form-explain,
|
||||
.@{ant-prefix}-form-split {
|
||||
color: @text-color;
|
||||
}
|
||||
// 输入框的不同校验状态
|
||||
.ant-input {
|
||||
.@{ant-prefix}-input {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -19,11 +19,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ant-calendar-picker-open .ant-calendar-picker-input {
|
||||
.@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
|
||||
.active(@border-color);
|
||||
}
|
||||
|
||||
.ant-input-group-addon {
|
||||
.@{ant-prefix}-input-group-addon {
|
||||
color: @text-color;
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
@input-number-prefix-cls: ant-input-number;
|
||||
@input-number-prefix-cls: ~"@{ant-prefix}-input-number";
|
||||
|
||||
.handler-disabled() {
|
||||
opacity: 0.72;
|
||||
|
||||
@ -6,13 +6,14 @@ export interface GroupProps {
|
||||
size?: 'large' | 'small' | 'default';
|
||||
children?: any;
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
const Group: React.StatelessComponent<GroupProps> = (props) => {
|
||||
const className = classNames({
|
||||
'ant-input-group': true,
|
||||
'ant-input-group-lg': props.size === 'large',
|
||||
'ant-input-group-sm': props.size === 'small',
|
||||
[props.prefixCls]: true,
|
||||
[`${props.prefixCls}-lg`]: props.size === 'large',
|
||||
[`${props.prefixCls}-sm`]: props.size === 'small',
|
||||
[props.className]: !!props.className,
|
||||
});
|
||||
return (
|
||||
@ -26,4 +27,8 @@ Group.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
};
|
||||
|
||||
Group.defaultProps = {
|
||||
prefixCls: 'ant-input-group',
|
||||
};
|
||||
|
||||
export default Group;
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
@import "./search-input";
|
||||
|
||||
// Input styles
|
||||
.ant-input {
|
||||
.@{ant-prefix}-input {
|
||||
.input;
|
||||
}
|
||||
|
||||
//== Style for input-group: input with label, with button or dropdown...
|
||||
.ant-input-group {
|
||||
.input-group(~"ant-input");
|
||||
.@{ant-prefix}-input-group {
|
||||
.input-group(~"@{ant-prefix}-input");
|
||||
}
|
||||
|
||||
@ -160,10 +160,10 @@
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.ant-select {
|
||||
.@{ant-prefix}-select {
|
||||
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false
|
||||
|
||||
.ant-select-selection {
|
||||
.@{ant-prefix}-select-selection {
|
||||
background-color: inherit;
|
||||
border: 0;
|
||||
margin: -1px;
|
||||
@ -172,7 +172,7 @@
|
||||
|
||||
&-open,
|
||||
&-focused {
|
||||
.ant-select-selection {
|
||||
.@{ant-prefix}-select-selection {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
}
|
||||
}
|
||||
@ -187,7 +187,7 @@
|
||||
border-top-right-radius: 0;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.ant-select .ant-select-selection {
|
||||
.@{ant-prefix}-select .@{ant-prefix}-select-selection {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@ -206,7 +206,7 @@
|
||||
border-top-left-radius: 0;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.ant-select .ant-select-selection {
|
||||
.@{ant-prefix}-select .@{ant-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
@ -3,21 +3,21 @@
|
||||
@import "../../button/style/mixin";
|
||||
@import "./mixin";
|
||||
|
||||
.ant-search-input-wrapper {
|
||||
.@{ant-prefix}-search-input-wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ant-search-input {
|
||||
&.ant-input-group .ant-input:first-child,
|
||||
&.ant-input-group .ant-select:first-child {
|
||||
.@{ant-prefix}-search-input {
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
|
||||
&.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
|
||||
border-radius: @border-radius-base;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-search-btn {
|
||||
.@{ant-prefix}-search-btn {
|
||||
.btn-default;
|
||||
border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
|
||||
left: -1px;
|
||||
@ -34,12 +34,12 @@
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
&&-focus .ant-search-btn-noempty,
|
||||
&:hover .ant-search-btn-noempty {
|
||||
&&-focus .@{ant-prefix}-search-btn-noempty,
|
||||
&:hover .@{ant-prefix}-search-btn-noempty {
|
||||
.btn-primary;
|
||||
}
|
||||
.ant-select-combobox {
|
||||
.ant-select-selection__rendered {
|
||||
.@{ant-prefix}-select-combobox {
|
||||
.@{ant-prefix}-select-selection__rendered {
|
||||
right: 29px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,11 +26,12 @@ export interface ColProps {
|
||||
sm?: ColSize;
|
||||
md?: ColSize;
|
||||
lg?: ColSize;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
const Col: React.StatelessComponent<ColProps> = (props) => {
|
||||
const [{ span, order, offset, push, pull, className, children }, others] = splitObject(props,
|
||||
['span', 'order', 'offset', 'push', 'pull', 'className', 'children']);
|
||||
const [{ span, order, offset, push, pull, className, children, prefixCls = 'ant-col' }, others] = splitObject(props,
|
||||
['span', 'order', 'offset', 'push', 'pull', 'className', 'children', 'prefixCls']);
|
||||
let sizeClassObj = {};
|
||||
['xs', 'sm', 'md', 'lg'].forEach(size => {
|
||||
let sizeProps: ColSize = {};
|
||||
@ -43,19 +44,19 @@ const Col: React.StatelessComponent<ColProps> = (props) => {
|
||||
delete others[size];
|
||||
|
||||
sizeClassObj = assign({}, sizeClassObj, {
|
||||
[`ant-col-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
|
||||
[`ant-col-${size}-order-${sizeProps.order}`]: sizeProps.order,
|
||||
[`ant-col-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
|
||||
[`ant-col-${size}-push-${sizeProps.push}`]: sizeProps.push,
|
||||
[`ant-col-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
|
||||
[`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
|
||||
[`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order,
|
||||
[`${prefixCls}-${size}-offset-${sizeProps.offset}`]: sizeProps.offset,
|
||||
[`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push,
|
||||
[`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull,
|
||||
});
|
||||
});
|
||||
const classes = classNames(assign({}, {
|
||||
[`ant-col-${span}`]: span !== undefined,
|
||||
[`ant-col-order-${order}`]: order,
|
||||
[`ant-col-offset-${offset}`]: offset,
|
||||
[`ant-col-push-${push}`]: push,
|
||||
[`ant-col-pull-${pull}`]: pull,
|
||||
[`${prefixCls}-${span}`]: span !== undefined,
|
||||
[`${prefixCls}-order-${order}`]: order,
|
||||
[`${prefixCls}-offset-${offset}`]: offset,
|
||||
[`${prefixCls}-push-${push}`]: push,
|
||||
[`${prefixCls}-pull-${pull}`]: pull,
|
||||
[className]: !!className,
|
||||
}, sizeClassObj));
|
||||
|
||||
|
||||
@ -11,11 +11,13 @@ export interface RowProps {
|
||||
align?: 'top' | 'middle' | 'bottom';
|
||||
justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
|
||||
style?: React.CSSProperties;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export default class Row extends React.Component<RowProps, any> {
|
||||
static defaultProps = {
|
||||
gutter: 0,
|
||||
prefixCls: 'ant-row',
|
||||
};
|
||||
static propTypes = {
|
||||
type: React.PropTypes.string,
|
||||
@ -24,15 +26,16 @@ export default class Row extends React.Component<RowProps, any> {
|
||||
className: React.PropTypes.string,
|
||||
children: React.PropTypes.node,
|
||||
gutter: React.PropTypes.number,
|
||||
prefixCls: React.PropTypes.string,
|
||||
};
|
||||
render() {
|
||||
const [{ type, justify, align, className, gutter, style, children }, others] = splitObject(this.props,
|
||||
['type', 'justify', 'align', 'className', 'gutter', 'style', 'children']);
|
||||
const [{ type, justify, align, className, gutter, style, children, prefixCls }, others] = splitObject(this.props,
|
||||
['type', 'justify', 'align', 'className', 'gutter', 'style', 'children', 'prefixCls']);
|
||||
const classes = classNames({
|
||||
'ant-row': !type,
|
||||
[`ant-row-${type}`]: type,
|
||||
[`ant-row-${type}-${justify}`]: justify,
|
||||
[`ant-row-${type}-${align}`]: align,
|
||||
[prefixCls]: !type,
|
||||
[`${prefixCls}-${type}`]: type,
|
||||
[`${prefixCls}-${type}-${justify}`]: justify,
|
||||
[`${prefixCls}-${type}-${align}`]: align,
|
||||
[className]: className,
|
||||
});
|
||||
const rowStyle = gutter > 0 ? assign({}, {
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
@import "./mixin";
|
||||
|
||||
// Grid system
|
||||
.ant-row {
|
||||
.@{ant-prefix}-row {
|
||||
.make-row();
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ant-row-flex {
|
||||
.@{ant-prefix}-row-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
@ -20,46 +20,46 @@
|
||||
}
|
||||
|
||||
// x轴原点
|
||||
.ant-row-flex-start {
|
||||
.@{ant-prefix}-row-flex-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
// x轴居中
|
||||
.ant-row-flex-center {
|
||||
.@{ant-prefix}-row-flex-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// x轴反方向
|
||||
.ant-row-flex-end {
|
||||
.@{ant-prefix}-row-flex-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// x轴平分
|
||||
.ant-row-flex-space-between {
|
||||
.@{ant-prefix}-row-flex-space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// x轴有间隔地平分
|
||||
.ant-row-flex-space-around {
|
||||
.@{ant-prefix}-row-flex-space-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
// 顶部对齐
|
||||
.ant-row-flex-top {
|
||||
.@{ant-prefix}-row-flex-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
// 居中对齐
|
||||
.ant-row-flex-middle {
|
||||
.@{ant-prefix}-row-flex-middle {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 底部对齐
|
||||
.ant-row-flex-bottom {
|
||||
.@{ant-prefix}-row-flex-bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.ant-col {
|
||||
.@{ant-prefix}-col {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -12,11 +12,11 @@
|
||||
|
||||
.make-grid-columns() {
|
||||
.col(@index) {
|
||||
@item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
|
||||
@item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) {
|
||||
@item: ~".ant-col-@{index}, .ant-col-xs-@{index}, .ant-col-sm-@{index}, .ant-col-md-@{index}, .ant-col-lg-@{index}";
|
||||
@item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) {
|
||||
@ -33,11 +33,11 @@
|
||||
|
||||
.float-grid-columns(@class) {
|
||||
.col(@index) { // initial
|
||||
@item: ~".ant-col@{class}-@{index}";
|
||||
@item: ~".@{ant-prefix}-col@{class}-@{index}";
|
||||
.col((@index + 1), @item);
|
||||
}
|
||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||
@item: ~".ant-col@{class}-@{index}";
|
||||
@item: ~".@{ant-prefix}-col@{class}-@{index}";
|
||||
.col((@index + 1), ~"@{list}, @{item}");
|
||||
}
|
||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||
@ -51,33 +51,33 @@
|
||||
|
||||
// lesshint false
|
||||
.loop-grid-columns(@index, @class) when (@index > 0) {
|
||||
.ant-col@{class}-@{index} {
|
||||
.@{ant-prefix}-col@{class}-@{index} {
|
||||
display: block;
|
||||
width: percentage((@index / @grid-columns));
|
||||
}
|
||||
.ant-col@{class}-push-@{index} {
|
||||
.@{ant-prefix}-col@{class}-push-@{index} {
|
||||
left: percentage((@index / @grid-columns));
|
||||
}
|
||||
.ant-col@{class}-pull-@{index} {
|
||||
.@{ant-prefix}-col@{class}-pull-@{index} {
|
||||
right: percentage((@index / @grid-columns));
|
||||
}
|
||||
.ant-col@{class}-offset-@{index} {
|
||||
.@{ant-prefix}-col@{class}-offset-@{index} {
|
||||
margin-left: percentage((@index / @grid-columns));
|
||||
}
|
||||
.ant-col@{class}-order-@{index} {
|
||||
.@{ant-prefix}-col@{class}-order-@{index} {
|
||||
order: @index;
|
||||
}
|
||||
.loop-grid-columns((@index - 1), @class);
|
||||
}
|
||||
|
||||
.loop-grid-columns(@index, @class) when (@index = 0) {
|
||||
.ant-col@{class}-@{index} {
|
||||
.@{ant-prefix}-col@{class}-@{index} {
|
||||
display: none;
|
||||
}
|
||||
.ant-col-push-@{index} {
|
||||
.@{ant-prefix}-col-push-@{index} {
|
||||
left: auto;
|
||||
}
|
||||
.ant-col-pull-@{index} {
|
||||
.@{ant-prefix}-col-pull-@{index} {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,20 +2,20 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import '../../input/style/mixin.less';
|
||||
|
||||
.ant-mention-wrapper {
|
||||
.@{ant-prefix}-mention-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
&.active .ant-mention-editor {
|
||||
&.active .@{ant-prefix}-mention-editor {
|
||||
.active;
|
||||
}
|
||||
.ant-mention-editor {
|
||||
.@{ant-prefix}-mention-editor {
|
||||
.input;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
.ant-mention-editor-wrapper {
|
||||
.@{ant-prefix}-mention-editor-wrapper {
|
||||
overflow-y: auto;
|
||||
height: auto;
|
||||
}
|
||||
@ -25,7 +25,7 @@
|
||||
padding: 4px 7px;
|
||||
}
|
||||
|
||||
.ant-mention-dropdown {
|
||||
.@{ant-prefix}-mention-dropdown {
|
||||
margin-top: 1.5em;
|
||||
max-height: 250px;
|
||||
min-width: 120px;
|
||||
@ -42,10 +42,10 @@
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font-size: @font-size-base;
|
||||
&-notfound.ant-mention-dropdown-item {
|
||||
&-notfound.@{ant-prefix}-mention-dropdown-item {
|
||||
color: #ccc;
|
||||
|
||||
.anticon-loading {
|
||||
.@{iconfont-css-prefix}-loading {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import RcMenu, { Item, Divider, SubMenu, ItemGroup } from 'rc-menu';
|
||||
import animation from '../_util/openAnimation';
|
||||
import warning from 'warning';
|
||||
|
||||
function noop() {
|
||||
}
|
||||
@ -68,6 +69,12 @@ export default class Menu extends React.Component<MenuProps, any> {
|
||||
switchModeFromInline: boolean;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
warning(
|
||||
!('onOpen' in props || 'onClose' in props),
|
||||
'`onOpen` and `onClose` are removed, please use `onOpenChange` instead.'
|
||||
);
|
||||
|
||||
this.state = {
|
||||
openKeys: [],
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@menu-prefix-cls: ant-menu;
|
||||
@menu-prefix-cls: ~"@{ant-prefix}-menu";
|
||||
|
||||
// default theme
|
||||
.@{menu-prefix-cls} {
|
||||
@ -164,7 +164,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
min-width: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
@import "../../style/themes/default";
|
||||
|
||||
@message-prefix-cls: ant-message;
|
||||
@message-prefix-cls: ~"@{ant-prefix}-message";
|
||||
|
||||
.@{message-prefix-cls} {
|
||||
font-size: 12px;
|
||||
@ -28,24 +28,24 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
&-success .anticon {
|
||||
&-success .@{iconfont-css-prefix} {
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
&-error .anticon {
|
||||
&-error .@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-warning .anticon {
|
||||
&-warning .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
&-info .anticon,
|
||||
&-loading .anticon {
|
||||
&-info .@{iconfont-css-prefix},
|
||||
&-loading .@{iconfont-css-prefix} {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
top: 1px;
|
||||
|
||||
@ -58,6 +58,7 @@ class ActionButton extends React.Component<ActionButtonProps, any> {
|
||||
|
||||
export default function confirm(config) {
|
||||
const props = assign({ iconType: 'question-circle' }, config);
|
||||
const prefixCls = props.prefixCls || 'ant-confirm';
|
||||
let div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
@ -83,17 +84,17 @@ export default function confirm(config) {
|
||||
}
|
||||
|
||||
let body = (
|
||||
<div className="ant-confirm-body">
|
||||
<div className={`${prefixCls}-body`}>
|
||||
<Icon type={props.iconType} />
|
||||
<span className="ant-confirm-title">{props.title}</span>
|
||||
<div className="ant-confirm-content">{props.content}</div>
|
||||
<span className={`${prefixCls}-title`}>{props.title}</span>
|
||||
<div className={`${prefixCls}-content`}>{props.content}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let footer = null;
|
||||
if (props.okCancel) {
|
||||
footer = (
|
||||
<div className="ant-confirm-btns">
|
||||
<div className={`${prefixCls}-btns`}>
|
||||
<ActionButton type="ghost" actionFn={props.onCancel} closeModal={close}>
|
||||
{props.cancelText}
|
||||
</ActionButton>
|
||||
@ -104,7 +105,7 @@ export default function confirm(config) {
|
||||
);
|
||||
} else {
|
||||
footer = (
|
||||
<div className="ant-confirm-btns">
|
||||
<div className={`${prefixCls}-btns`}>
|
||||
<ActionButton type="primary" actionFn={props.onOk} closeModal={close}>
|
||||
{props.okText}
|
||||
</ActionButton>
|
||||
@ -113,8 +114,8 @@ export default function confirm(config) {
|
||||
}
|
||||
|
||||
const classString = classNames({
|
||||
'ant-confirm': true,
|
||||
[`ant-confirm-${props.type}`]: true,
|
||||
[prefixCls]: true,
|
||||
[`${prefixCls}-${props.type}`]: true,
|
||||
[props.className]: !!props.className,
|
||||
});
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@confirm-prefix-cls: ant-confirm;
|
||||
@confirm-prefix-cls: ~"@{ant-prefix}-confirm";
|
||||
|
||||
.@{confirm-prefix-cls} {
|
||||
.ant-modal-header {
|
||||
.@{ant-prefix}-modal-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
.@{ant-prefix}-modal-body {
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
> .anticon {
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: 24px;
|
||||
margin-right: 10px;
|
||||
padding: 0 1px;
|
||||
@ -42,20 +42,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-error &-body > .anticon {
|
||||
&-error &-body > .@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-warning &-body > .anticon,
|
||||
&-confirm &-body > .anticon {
|
||||
&-warning &-body > .@{iconfont-css-prefix},
|
||||
&-confirm &-body > .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
&-info &-body > .anticon {
|
||||
&-info &-body > .@{iconfont-css-prefix} {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&-success &-body > .anticon {
|
||||
&-success &-body > .@{iconfont-css-prefix} {
|
||||
color: @success-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@dialog-prefix-cls: ant-modal;
|
||||
@dialog-prefix-cls: ~"@{ant-prefix}-modal";
|
||||
|
||||
.@{dialog-prefix-cls} {
|
||||
position: relative;
|
||||
|
||||
@ -16,12 +16,12 @@ export interface ArgsProps {
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
function getNotificationInstance() {
|
||||
function getNotificationInstance(prefixCls) {
|
||||
if (notificationInstance) {
|
||||
return notificationInstance;
|
||||
}
|
||||
notificationInstance = (Notification as any).newInstance({
|
||||
prefixCls: 'ant-notification',
|
||||
prefixCls: prefixCls,
|
||||
style: {
|
||||
top: defaultTop,
|
||||
right: 0,
|
||||
@ -31,7 +31,8 @@ function getNotificationInstance() {
|
||||
}
|
||||
|
||||
function notice(args) {
|
||||
const prefixCls = args.prefixCls || 'ant-notification-notice';
|
||||
const outerPrefixCls = args.prefixCls || 'ant-notification';
|
||||
const prefixCls = `${outerPrefixCls}-notice`;
|
||||
|
||||
let duration;
|
||||
if (args.duration === undefined) {
|
||||
@ -69,7 +70,7 @@ function notice(args) {
|
||||
iconNode = <Icon className={`${prefixCls}-icon ${prefixCls}-icon-${args.type}`} type={iconType} />;
|
||||
}
|
||||
|
||||
getNotificationInstance().notice({
|
||||
getNotificationInstance(outerPrefixCls).notice({
|
||||
content: (
|
||||
<div className={`${prefixCls}-content ${iconNode ? `${prefixCls}-with-icon` : ''}`}>
|
||||
{iconNode}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@notification-prefix-cls: ant-notification;
|
||||
@notification-prefix-cls: ~"@{ant-prefix}-notification";
|
||||
@notification-width: 335px;
|
||||
@notification-padding: 16px;
|
||||
@notification-margin-bottom: 10px;
|
||||
|
||||
@ -34,6 +34,8 @@ export interface PaginationProps {
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
locale?: Object;
|
||||
prefixCls?: string;
|
||||
selectPrefixCls?: string;
|
||||
}
|
||||
|
||||
export interface PaginationContext {
|
||||
@ -47,6 +49,7 @@ export default class Pagination extends React.Component<PaginationProps, any> {
|
||||
locale: zhCN,
|
||||
className: '',
|
||||
prefixCls: 'ant-pagination',
|
||||
selectPrefixCls: 'ant-select',
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
@ -73,7 +76,7 @@ export default class Pagination extends React.Component<PaginationProps, any> {
|
||||
|
||||
return (
|
||||
<RcPagination selectComponentClass={selectComponentClass}
|
||||
selectPrefixCls="ant-select"
|
||||
selectPrefixCls={this.props.selectPrefixCls}
|
||||
{...this.props}
|
||||
locale={locale}
|
||||
className={className}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
@pagination-prefix-cls: ant-pagination;
|
||||
@pagination-prefix-cls: ~"@{ant-prefix}-pagination";
|
||||
|
||||
.@{pagination-prefix-cls} {
|
||||
font-size: @font-size-base;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@popover-prefix-cls: ant-popover;
|
||||
@popover-prefix-cls: ~"@{ant-prefix}-popover";
|
||||
|
||||
//** Popover body background color
|
||||
@popover-bg: #fff;
|
||||
@ -96,7 +96,7 @@
|
||||
padding: 8px 0 16px;
|
||||
font-size: 12px;
|
||||
color: @text-color;
|
||||
> .anticon {
|
||||
> .@{iconfont-css-prefix} {
|
||||
color: @warning-color;
|
||||
line-height: 17px;
|
||||
position: absolute;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@progress-prefix-cls: ant-progress;
|
||||
@progress-prefix-cls: ~"@{ant-prefix}-progress";
|
||||
|
||||
.@{progress-prefix-cls} {
|
||||
display: inline-block;
|
||||
@ -46,7 +46,7 @@
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
font-family: tahoma;
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@ -62,7 +62,7 @@
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
animation: ant-progress-active 2s @ease-out-quint infinite;
|
||||
animation: ~"@{ant-prefix}-progress-active" 2s @ease-out-quint infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@ -102,7 +102,7 @@
|
||||
font-family: tahoma;
|
||||
margin: 0;
|
||||
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 14 / 12em;
|
||||
}
|
||||
}
|
||||
@ -119,7 +119,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ant-progress-active {
|
||||
@keyframes ~"@{ant-prefix}-progress-active" {
|
||||
0% {
|
||||
opacity: .3;
|
||||
width: 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@radio-prefix-cls: ant-radio;
|
||||
@radio-prefix-cls: ~"@{ant-prefix}-radio";
|
||||
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
|
||||
@radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
|
||||
@radio-duration: .2s;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@rate-prefix-cls: ant-rate;
|
||||
@rate-prefix-cls: ~"@{ant-prefix}-rate";
|
||||
@rate-star-color: #f5a623;
|
||||
|
||||
.@{rate-prefix-cls} {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
@select-prefix-cls: ant-select;
|
||||
@select-prefix-cls: ~"@{ant-prefix}-select";
|
||||
|
||||
.selection__clear() {
|
||||
display: inline-block;
|
||||
|
||||
@ -33,12 +33,12 @@ const marks = {
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<p>包含关系</p>
|
||||
<p>`included=true`</p>
|
||||
<Slider marks={marks} defaultValue={37} />
|
||||
<Slider range marks={marks} defaultValue={[26, 37]} />
|
||||
<p>并列关系</p>
|
||||
<p>`included=false`</p>
|
||||
<Slider marks={marks} included={false} defaultValue={37} />
|
||||
<p>结合 step</p>
|
||||
<p>`marks && step`</p>
|
||||
<Slider marks={marks} step={10} defaultValue={37} />
|
||||
<p>`step=null`</p>
|
||||
<Slider marks={marks} step={null} defaultValue={37} />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@slider-prefix-cls: ant-slider;
|
||||
@slider-prefix-cls: ~"@{ant-prefix}-slider";
|
||||
// slider color
|
||||
@slider-disabled-color: #ccc;
|
||||
// tooltip
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@spin-prefix-cls: ant-spin;
|
||||
@spin-prefix-cls: ~"@{ant-prefix}-spin";
|
||||
@spin-dot-default: #999;
|
||||
@spin-dot-size-sm: 12px;
|
||||
@spin-dot-size: 20px;
|
||||
@ -123,7 +123,7 @@
|
||||
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
/* IE10+ */
|
||||
.ant-spin-nested-loading > .ant-spin-container {
|
||||
.@{ant-prefix}-spin-nested-loading > .@{ant-prefix}-spin-container {
|
||||
background: #fff;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@steps-prefix-cls: ant-steps;
|
||||
@steps-prefix-cls: ~"@{ant-prefix}-steps";
|
||||
@process-icon-color: @primary-color;
|
||||
@process-title-color: #666;
|
||||
@process-description-color: @process-title-color;
|
||||
@ -161,7 +161,7 @@
|
||||
color: @primary-color;
|
||||
position: relative;
|
||||
|
||||
&.anticon {
|
||||
&.@{iconfont-css-prefix} {
|
||||
font-size: 12px;
|
||||
&-cross,
|
||||
&-check {
|
||||
@ -231,7 +231,7 @@
|
||||
border-radius: 18px;
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
> .@{steps-prefix-cls}-icon.anticon {
|
||||
> .@{steps-prefix-cls}-icon.@{iconfont-css-prefix} {
|
||||
.iconfont-size-under-12px(9px);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@ -102,7 +102,7 @@ a {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ant-divider {
|
||||
.@{ant-prefix}-divider {
|
||||
margin: 0 4px;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
// Prefix
|
||||
@ant-prefix : ant;
|
||||
|
||||
// Color
|
||||
@primary-color : #2db7f5;
|
||||
@info-color : #2db7f5;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@switch-prefix-cls: ant-switch;
|
||||
@switch-prefix-cls: ~"@{ant-prefix}-switch";
|
||||
@switch-duration: .3s;
|
||||
|
||||
.@{switch-prefix-cls} {
|
||||
|
||||
@ -10,6 +10,7 @@ import classNames from 'classnames';
|
||||
import { flatArray, treeMap } from './util';
|
||||
import assign from 'object-assign';
|
||||
import splitObject from '../_util/splitObject';
|
||||
import warning from 'warning';
|
||||
|
||||
function noop() {
|
||||
}
|
||||
@ -62,6 +63,7 @@ export interface TableColumnConfig {
|
||||
|
||||
export interface TableProps {
|
||||
prefixCls?: string;
|
||||
dropdownPrefixCls?: string;
|
||||
rowSelection?: TableRowSelection;
|
||||
pagination?: any; // 等 Pagination 的 interface，以便直接引用
|
||||
size?: 'default' | 'small';
|
||||
@ -106,11 +108,13 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
bordered: React.PropTypes.bool,
|
||||
onChange: React.PropTypes.func,
|
||||
locale: React.PropTypes.object,
|
||||
dropdownPrefixCls: React.PropTypes.string,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
dataSource: [],
|
||||
prefixCls: 'ant-table',
|
||||
dropdownPrefixCls: 'ant-dropdown',
|
||||
useFixedHeader: false,
|
||||
rowSelection: null,
|
||||
className: '',
|
||||
@ -134,6 +138,13 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
warning(
|
||||
!('columnsPageRange' in props || 'columnsPageSize' in props),
|
||||
'`columnsPageRange` and `columnsPageSize` are removed, please use ' +
|
||||
'[fixed columns](http://ant.design/components/table/#components-table-demo-fixed-columns) ' +
|
||||
'instead.'
|
||||
);
|
||||
|
||||
const pagination = props.pagination || {};
|
||||
|
||||
this.state = assign({}, this.getSortStateFromColumns(), {
|
||||
@ -553,6 +564,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
}
|
||||
|
||||
renderRowSelection() {
|
||||
const prefixCls = this.props.prefixCls;
|
||||
const columns = this.props.columns.concat();
|
||||
if (this.props.rowSelection) {
|
||||
const data = this.getFlatCurrentPageData().filter((item) => {
|
||||
@ -579,7 +591,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
selectionColumn = {
|
||||
key: 'selection-column',
|
||||
render: this.renderSelectionRadio,
|
||||
className: 'ant-table-selection-column',
|
||||
className: `${prefixCls}-selection-column`,
|
||||
};
|
||||
} else {
|
||||
const checkboxAllDisabled = data.every(item => this.getCheckboxPropsByItem(item).disabled);
|
||||
@ -593,7 +605,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
key: 'selection-column',
|
||||
title: checkboxAll,
|
||||
render: this.renderSelectionCheckBox,
|
||||
className: 'ant-table-selection-column',
|
||||
className: `${prefixCls}-selection-column`,
|
||||
};
|
||||
}
|
||||
if (columns.some(column => column.fixed === 'left' || column.fixed === true)) {
|
||||
@ -629,6 +641,7 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
}
|
||||
|
||||
renderColumnsDropdown(columns) {
|
||||
const { prefixCls, dropdownPrefixCls } = this.props;
|
||||
const { sortOrder } = this.state;
|
||||
const locale = this.getLocale();
|
||||
return treeMap(columns, (originColumn, i) => {
|
||||
@ -644,6 +657,8 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
column={column}
|
||||
selectedKeys={colFilters}
|
||||
confirmFilter={this.handleFilter}
|
||||
prefixCls={`${prefixCls}-filter`}
|
||||
dropdownPrefixCls={dropdownPrefixCls}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -652,20 +667,20 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
if (isSortColumn) {
|
||||
column.className = column.className || '';
|
||||
if (sortOrder) {
|
||||
column.className += ' ant-table-column-sort';
|
||||
column.className += ` ${prefixCls}-column-sort`;
|
||||
}
|
||||
}
|
||||
const isAscend = isSortColumn && sortOrder === 'ascend';
|
||||
const isDescend = isSortColumn && sortOrder === 'descend';
|
||||
sortButton = (
|
||||
<div className="ant-table-column-sorter">
|
||||
<span className={`ant-table-column-sorter-up ${isAscend ? 'on' : 'off'}`}
|
||||
<div className={`${prefixCls}-column-sorter`}>
|
||||
<span className={`${prefixCls}-column-sorter-up ${isAscend ? 'on' : 'off'}`}
|
||||
title="↑"
|
||||
onClick={() => this.toggleSortOrder('ascend', column)}
|
||||
>
|
||||
<Icon type="caret-up" />
|
||||
</span>
|
||||
<span className={`ant-table-column-sorter-down ${isDescend ? 'on' : 'off'}`}
|
||||
<span className={`${prefixCls}-column-sorter-down ${isDescend ? 'on' : 'off'}`}
|
||||
title="↓"
|
||||
onClick={() => this.toggleSortOrder('descend', column)}
|
||||
>
|
||||
@ -813,17 +828,17 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
|
||||
render() {
|
||||
const [{
|
||||
style, className,
|
||||
}, restProps] = splitObject(this.props, ['style', 'className']);
|
||||
style, className, prefixCls,
|
||||
}, restProps] = splitObject(this.props, ['style', 'className', 'prefixCls']);
|
||||
const data = this.getCurrentPageData();
|
||||
let columns = this.renderRowSelection();
|
||||
const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
|
||||
const locale = this.getLocale();
|
||||
|
||||
const classString = classNames({
|
||||
[`ant-table-${this.props.size}`]: true,
|
||||
'ant-table-bordered': this.props.bordered,
|
||||
'ant-table-empty': !data.length,
|
||||
[`${prefixCls}-${this.props.size}`]: true,
|
||||
[`${prefixCls}-bordered`]: this.props.bordered,
|
||||
[`${prefixCls}-empty`]: !data.length,
|
||||
});
|
||||
|
||||
columns = this.renderColumnsDropdown(columns);
|
||||
@ -846,9 +861,9 @@ export default class Table extends React.Component<TableProps, any> {
|
||||
// if there is no pagination or no data,
|
||||
// the height of spin should decrease by half of pagination
|
||||
const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
|
||||
? 'ant-table-with-pagination'
|
||||
: 'ant-table-without-pagination';
|
||||
const spinClassName = this.props.loading ? `${paginationPatchClass} ant-table-spin-holder` : '';
|
||||
? `${prefixCls}-with-pagination`
|
||||
: `${prefixCls}-without-pagination`;
|
||||
const spinClassName = this.props.loading ? `${paginationPatchClass} ${prefixCls}-spin-holder` : '';
|
||||
table = <Spin className={spinClassName} spinning={this.props.loading}>{table}</Spin>;
|
||||
return (
|
||||
<div className={`${className} clearfix`} style={style}>
|
||||
|
||||
@ -8,9 +8,11 @@ import Radio from '../radio';
|
||||
export interface FilterDropdownMenuWrapperProps {
|
||||
onClick?: Function;
|
||||
children?: any;
|
||||
prefixCls?: string;
|
||||
}
|
||||
const FilterDropdownMenuWrapper: React.StatelessComponent<FilterDropdownMenuWrapperProps> = ({ onClick, children }) => (
|
||||
<div className="ant-table-filter-dropdown" onClick={onClick}>{children}</div>
|
||||
const FilterDropdownMenuWrapper: React.StatelessComponent<FilterDropdownMenuWrapperProps> =
|
||||
({ onClick, children, prefixCls }) => (
|
||||
<div className={`${prefixCls}-filter-dropdown`} onClick={onClick}>{children}</div>
|
||||
);
|
||||
|
||||
export interface FilterMenuProps {
|
||||
@ -22,6 +24,8 @@ export interface FilterMenuProps {
|
||||
filters?: string[]
|
||||
};
|
||||
confirmFilter: (column: Object, selectedKeys: string[]) => any;
|
||||
prefixCls: string;
|
||||
dropdownPrefixCls: string;
|
||||
}
|
||||
|
||||
export default class FilterMenu extends React.Component<FilterMenuProps, any> {
|
||||
@ -100,7 +104,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
|
||||
const containSelected = Object.keys(keyPathOfSelectedItem).some(
|
||||
key => keyPathOfSelectedItem[key].indexOf(item.value) >= 0
|
||||
);
|
||||
const subMenuCls = containSelected ? 'ant-dropdown-submenu-contain-selected' : '';
|
||||
const subMenuCls = containSelected ? `${this.props.dropdownPrefixCls}-submenu-contain-selected` : '';
|
||||
return (
|
||||
<SubMenu title={item.text} className={subMenuCls} key={item.value.toString()}>
|
||||
{item.children.map(child => this.renderMenuItem(child))}
|
||||
@ -127,31 +131,31 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { column, locale } = this.props;
|
||||
const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
|
||||
// default multiple selection in filter dropdown
|
||||
const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
|
||||
|
||||
const menus = column.filterDropdown ? column.filterDropdown : (
|
||||
<FilterDropdownMenuWrapper>
|
||||
<FilterDropdownMenuWrapper prefixCls="">
|
||||
<Menu
|
||||
multiple={multiple}
|
||||
onClick={this.handleMenuItemClick}
|
||||
prefixCls="ant-dropdown-menu"
|
||||
prefixCls={`${dropdownPrefixCls}-menu`}
|
||||
onSelect={this.setSelectedKeys}
|
||||
onDeselect={this.setSelectedKeys}
|
||||
selectedKeys={this.state.selectedKeys}
|
||||
>
|
||||
{this.renderMenus(column.filters)}
|
||||
</Menu>
|
||||
<div className="ant-table-filter-dropdown-btns">
|
||||
<div className={`${prefixCls}-dropdown-btns`}>
|
||||
<a
|
||||
className="ant-table-filter-dropdown-link confirm"
|
||||
className={`${prefixCls}-dropdown-link confirm`}
|
||||
onClick={this.handleConfirm}
|
||||
>
|
||||
{locale.filterConfirm}
|
||||
</a>
|
||||
<a
|
||||
className="ant-table-filter-dropdown-link clear"
|
||||
className={`${prefixCls}-dropdown-link clear`}
|
||||
onClick={this.handleClearFilters}
|
||||
>
|
||||
{locale.filterReset}
|
||||
@ -161,7 +165,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
|
||||
);
|
||||
|
||||
const dropdownSelectedClass = (this.props.selectedKeys.length > 0)
|
||||
? 'ant-table-filter-selected' : '';
|
||||
? `${prefixCls}-selected` : '';
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@table-prefix-cls: ant-table;
|
||||
@table-prefix-cls: ~"@{ant-prefix}-table";
|
||||
@table-head-background-color: @background-color-base;
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
@ -31,7 +31,7 @@
|
||||
transition: background .3s ease;
|
||||
text-align: left;
|
||||
|
||||
.anticon-filter {
|
||||
.@{iconfont-css-prefix}-filter {
|
||||
margin-left: 4px;
|
||||
.iconfont-size-under-12px(10px);
|
||||
cursor: pointer;
|
||||
@ -42,7 +42,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-filter-selected.anticon-filter {
|
||||
.@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
@ -208,18 +208,18 @@
|
||||
display: block;
|
||||
width: 12px;
|
||||
cursor: pointer;
|
||||
&:hover .anticon {
|
||||
&:hover .@{iconfont-css-prefix} {
|
||||
color: #666;
|
||||
}
|
||||
&.on {
|
||||
.anticon-caret-up,
|
||||
.anticon-caret-down {
|
||||
.@{iconfont-css-prefix}-caret-up,
|
||||
.@{iconfont-css-prefix}-caret-down {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.anticon-caret-up,
|
||||
.anticon-caret-down {
|
||||
.@{iconfont-css-prefix}-caret-up,
|
||||
.@{iconfont-css-prefix}-caret-down {
|
||||
.iconfont-size-under-12px(6px);
|
||||
line-height: 6px;
|
||||
height: 6px;
|
||||
@ -287,7 +287,7 @@
|
||||
z-index: 2;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
@ -305,7 +305,7 @@
|
||||
border: 1px solid @border-color-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
.ant-dropdown-menu {
|
||||
.@{ant-prefix}-dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
@ -320,8 +320,8 @@
|
||||
box-shadow: @box-shadow-base;
|
||||
}
|
||||
|
||||
.ant-dropdown-submenu-contain-selected {
|
||||
.ant-dropdown-menu-submenu-title:after {
|
||||
.@{ant-prefix}-dropdown-submenu-contain-selected {
|
||||
.@{ant-prefix}-dropdown-menu-submenu-title:after {
|
||||
color: @primary-color;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 2px tint(@primary-color, 80%);
|
||||
@ -329,12 +329,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item {
|
||||
.@{ant-prefix}-dropdown-menu-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
|
||||
> .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
|
||||
> .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
|
||||
> .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-submenu:last-child .@{ant-prefix}-dropdown-menu-submenu-title {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@tab-prefix-cls: ant-tabs;
|
||||
@tab-prefix-cls: ~"@{ant-prefix}-tabs";
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
box-sizing: border-box;
|
||||
@ -174,7 +174,7 @@
|
||||
color: shade(@primary-color, 5%);
|
||||
}
|
||||
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
@ -401,7 +401,7 @@
|
||||
&&-card > &-bar &-nav-wrap {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&&-card > &-bar &-tab-inner .anticon-cross {
|
||||
&&-card > &-bar &-tab-inner .@{iconfont-css-prefix}-cross {
|
||||
margin-right: 0;
|
||||
color: #999;
|
||||
transition: all 0.3s @ease-in-out;
|
||||
@ -422,8 +422,8 @@
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&&-card > &-bar &-tab-active .anticon-cross,
|
||||
&&-card > &-bar &-tab:hover .anticon-cross {
|
||||
&&-card > &-bar &-tab-active .@{iconfont-css-prefix}-cross,
|
||||
&&-card > &-bar &-tab:hover .@{iconfont-css-prefix}-cross {
|
||||
width: 16px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@tag-prefix-cls: ant-tag;
|
||||
@tag-prefix-cls: ~"@{ant-prefix}-tag";
|
||||
|
||||
.@{tag-prefix-cls} {
|
||||
display: inline-block;
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.anticon-cross {
|
||||
.@{iconfont-css-prefix}-cross {
|
||||
.iconfont-size-under-12px(10px);
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
@ -59,8 +59,8 @@
|
||||
&,
|
||||
a,
|
||||
a:hover,
|
||||
.anticon-cross,
|
||||
.anticon-cross:hover {
|
||||
.@{iconfont-css-prefix}-cross,
|
||||
.@{iconfont-css-prefix}-cross:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../input/style/mixin";
|
||||
|
||||
@timepicker-prefix-cls: ant-time-picker;
|
||||
@timepicker-prefix-cls: ~"@{ant-prefix}-time-picker";
|
||||
|
||||
.@{timepicker-prefix-cls}-panel {
|
||||
max-width: 168px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@timeline-prefix-cls: ant-timeline;
|
||||
@timeline-prefix-cls: ~"@{ant-prefix}-timeline";
|
||||
@timeline-color: @border-color-split;
|
||||
|
||||
.@{timeline-prefix-cls} {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@tooltip-prefix-cls: ant-tooltip;
|
||||
@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip";
|
||||
//** Tooltip max width
|
||||
@tooltip-max-width: 250px;
|
||||
//** Tooltip text color
|
||||
|
||||
@ -216,15 +216,16 @@ export default class TransferList extends React.Component<TransferListProps, any
|
||||
}
|
||||
|
||||
const checkStatus = this.getCheckStatus(filteredDataSource);
|
||||
const outerPrefixCls = prefixCls.replace('-list', '');
|
||||
|
||||
return (
|
||||
<div className={listCls} style={style}>
|
||||
<div className={`${prefixCls}-header`}>
|
||||
{this.renderCheckbox({
|
||||
prefixCls: 'ant-transfer',
|
||||
prefixCls: outerPrefixCls,
|
||||
checked: checkStatus === 'all',
|
||||
checkPart: checkStatus === 'part',
|
||||
checkable: <span className={'ant-transfer-checkbox-inner'}></span>,
|
||||
checkable: <span className={`${outerPrefixCls}-checkbox-inner`}></span>,
|
||||
filteredDataSource,
|
||||
disabled: false,
|
||||
})}
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import Icon from '../icon';
|
||||
import Input from '../input';
|
||||
|
||||
function noop() {
|
||||
}
|
||||
|
||||
@ -31,7 +33,7 @@ export default class Search extends React.Component<SearchProps, any> {
|
||||
const { placeholder, value, prefixCls } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<input placeholder={placeholder} className={`${prefixCls} ant-input`} value={value} ref="input"
|
||||
<Input placeholder={placeholder} className={prefixCls} value={value} ref="input"
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
{value && value.length > 0 ?
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
@import "../../style/mixins/index";
|
||||
@import "../../checkbox/style/mixin";
|
||||
|
||||
@transfer-prefix-cls: ant-transfer;
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ant-transfer-checkbox);
|
||||
@transfer-prefix-cls: ~"@{ant-prefix}-transfer";
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-transfer-checkbox");
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
position: relative;
|
||||
@ -35,7 +35,7 @@
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
transition: all .3s;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
@ -126,7 +126,7 @@
|
||||
margin: 0 8px;
|
||||
vertical-align: middle;
|
||||
|
||||
.ant-btn {
|
||||
.@{ant-prefix}-btn {
|
||||
float: left;
|
||||
clear: both;
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
.iconfont-size-under-12px(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
@import "../../tree/style/mixin";
|
||||
@import "../../checkbox/style/mixin";
|
||||
|
||||
@select-tree-prefix-cls: ant-select-tree;
|
||||
@select-tree-prefix-cls: ~"@{ant-prefix}-select-tree";
|
||||
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ant-select-tree-checkbox);
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-select-tree-checkbox");
|
||||
|
||||
.@{select-tree-prefix-cls} {
|
||||
margin: 0;
|
||||
@ -115,14 +115,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-tree-prefix-cls}-dropdown .ant-select-dropdown-search + span {
|
||||
.@{select-tree-prefix-cls}-dropdown .@{ant-prefix}-select-dropdown-search + span {
|
||||
padding: 7px 15px;
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ant-select-not-found {
|
||||
.@{ant-prefix}-select-not-found {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
padding: 7px 15px;
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
@import "../../checkbox/style/mixin";
|
||||
@import "./mixin";
|
||||
|
||||
@tree-prefix-cls: ant-tree;
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ant-tree-checkbox);
|
||||
@tree-prefix-cls: ~"@{ant-prefix}-tree";
|
||||
.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-tree-checkbox");
|
||||
|
||||
.@{tree-prefix-cls} {
|
||||
margin: 0;
|
||||
|
||||
@ -3,7 +3,6 @@ import RcUpload from 'rc-upload';
|
||||
import UploadList from './uploadList';
|
||||
import getFileItem from './getFileItem';
|
||||
import classNames from 'classnames';
|
||||
const prefixCls = 'ant-upload';
|
||||
import assign from 'object-assign';
|
||||
import { UploadProps } from './interface';
|
||||
|
||||
@ -65,7 +64,7 @@ export default class Upload extends React.Component<UploadProps, any> {
|
||||
static Dragger = Dragger;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-upload-btn',
|
||||
prefixCls: 'ant-upload',
|
||||
type: 'select',
|
||||
// do not set
|
||||
// name: '',
|
||||
@ -249,6 +248,7 @@ export default class Upload extends React.Component<UploadProps, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls } = this.props;
|
||||
let type = this.props.type || 'select';
|
||||
let props = assign({}, this.props, {
|
||||
onStart: this.onStart,
|
||||
|
||||
@ -44,6 +44,7 @@ export interface UploadProps {
|
||||
supportServerRender?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
disabled?: boolean;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
export interface UploadListProps {
|
||||
@ -52,4 +53,5 @@ export interface UploadListProps {
|
||||
onRemove?: (file: File) => void;
|
||||
items?: Array<File>;
|
||||
progressAttr?: Object;
|
||||
prefixCls?: string;
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@import "../../style/themes/default";
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@upload-prefix-cls: ant-upload;
|
||||
@upload-item: ant-upload-list-item;
|
||||
@upload-prefix-cls: ~"@{ant-prefix}-upload";
|
||||
@upload-item: ~"@{ant-prefix}-upload-list-item";
|
||||
@upload-pictrue-card-size: 96px;
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
p.@{upload-prefix-cls}-drag-icon {
|
||||
.anticon {
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 80px;
|
||||
margin-top: -5px;
|
||||
color: tint(@primary-color, 20%);
|
||||
@ -90,7 +90,7 @@
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.anticon-plus {
|
||||
.@{iconfont-css-prefix}-plus {
|
||||
font-size: 30px;
|
||||
transition: all 0.3s ease;
|
||||
color: #ccc;
|
||||
@ -98,7 +98,7 @@
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
&:hover .anticon-plus {
|
||||
&:hover .@{iconfont-css-prefix}-plus {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@ -117,12 +117,12 @@
|
||||
padding: 0 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
.anticon-paper-clip {
|
||||
.@{iconfont-css-prefix}-paper-clip {
|
||||
margin-right: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.anticon-cross {
|
||||
.@{iconfont-css-prefix}-cross {
|
||||
.iconfont-size-under-12px(10px);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
@ -140,16 +140,16 @@
|
||||
background-color: tint(@primary-color, 90%);
|
||||
}
|
||||
|
||||
&:hover .anticon-cross {
|
||||
&:hover .@{iconfont-css-prefix}-cross {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-error,
|
||||
&-error .anticon-paper-clip {
|
||||
&-error .@{iconfont-css-prefix}-paper-clip {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-error .anticon-cross {
|
||||
&-error .@{iconfont-css-prefix}-cross {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
margin-top: -2px;
|
||||
margin-bottom: 1px;
|
||||
font-size: 12px;
|
||||
.ant-progress-line-inner {
|
||||
.@{ant-prefix}-progress-line-inner {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@ -203,7 +203,7 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.@{upload-item}-thumbnail.anticon:before {
|
||||
.@{upload-item}-thumbnail.@{iconfont-css-prefix}:before {
|
||||
line-height: 48px;
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
@ -232,7 +232,7 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.anticon-cross {
|
||||
.@{iconfont-css-prefix}-cross {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
@ -265,8 +265,8 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.anticon-eye-o,
|
||||
.anticon-delete {
|
||||
.@{iconfont-css-prefix}-eye-o,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -286,7 +286,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.anticon-delete {
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
left: 50%;
|
||||
margin-left: 6px;
|
||||
}
|
||||
@ -296,8 +296,8 @@
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.anticon-eye-o,
|
||||
.anticon-delete {
|
||||
.@{iconfont-css-prefix}-eye-o,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -323,8 +323,8 @@
|
||||
.@{upload-item}-info {
|
||||
height: auto;
|
||||
&:before,
|
||||
.anticon-eye-o,
|
||||
.anticon-delete {
|
||||
.@{iconfont-css-prefix}-eye-o,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import * as React from 'react';
|
||||
import Animate from 'rc-animate';
|
||||
import Icon from '../icon';
|
||||
const prefixCls = 'ant-upload';
|
||||
import Progress from '../progress';
|
||||
import classNames from 'classnames';
|
||||
import { UploadListProps } from './interface';
|
||||
@ -21,6 +20,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
strokeWidth: 3,
|
||||
showInfo: false,
|
||||
},
|
||||
prefixCls: 'ant-upload',
|
||||
};
|
||||
|
||||
handleClose = (file) => {
|
||||
@ -59,6 +59,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { prefixCls } = this.props;
|
||||
let list = this.props.items.map(file => {
|
||||
let progress;
|
||||
let icon = <Icon type="paper-clip" />;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "2.0.0-beta.2",
|
||||
"version": "2.0.0-beta.3",
|
||||
"title": "Ant Design",
|
||||
"description": "An enterprise-class UI design language and React-based implementation",
|
||||
"homepage": "http://ant.design/",
|
||||
|
||||
@ -69,7 +69,7 @@ module.exports = {
|
||||
site: path.join(process.cwd(), 'site'),
|
||||
'react-router': 'react-router/umd/ReactRouter',
|
||||
};
|
||||
config.plugins.push(new CSSSplitWebpackPlugin({ imports: true }));
|
||||
config.plugins.push(new CSSSplitWebpackPlugin({}));
|
||||
|
||||
config.babel.plugins.push([
|
||||
require.resolve('babel-plugin-transform-runtime'),
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ant Design - 一个 UI 设计语言</title>
|
||||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||||
<link rel="stylesheet" type="text/css" href="{{ root }}index.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ root }}index-1.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="{{ root }}index-2.css"/>
|
||||
<!--[if lte IE 10]>
|
||||
<script
|
||||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user