test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 Packages Projects Releases Wiki Activity

style: update code style to please the fucking lint

Browse Source
This commit is contained in:
Benjy Cui 2016-01-07 17:46:46 +08:00
parent 209170e813
commit b72d18fd44
30 changed files with 330 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/alert/index.jsx
View File

@ -44,20 +44,20 @@ export default React.createClass({
let iconType = '';
switch (type) {
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
iconType = 'exclamation-circle';
break;
case 'warn':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
case 'success':
iconType = 'check-circle';
break;
case 'info':
iconType = 'info-circle';
break;
case 'error':
iconType = 'exclamation-circle';
break;
case 'warn':
iconType = 'exclamation-circle';
break;
default:
iconType = 'default';
}
// use outline icon in alert with description

14
components/date-picker/RangePicker.jsx
View File

@ -78,13 +78,13 @@ export default React.createClass({
const calendar = (
<RangeCalendar prefixCls="ant-calendar"
className={calendarClassName}
timePicker={timePicker}
disabledDate={disabledDate}
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang}
defaultValue={defaultCalendarValue}
showClear />
className={calendarClassName}
timePicker={timePicker}
disabledDate={disabledDate}
dateInputPlaceholder={[startPlaceholder, endPlaceholder]}
locale={locale.lang}
defaultValue={defaultCalendarValue}
showClear />
);
const pickerClass = classNames({

28
components/date-picker/index.jsx
View File

@ -94,25 +94,25 @@ function createPicker(TheCalendar, defaultFormat) {
return (
<span className={pickerClass}>
<DatePicker transitionName={this.props.transitionName}
disabled={this.props.disabled}
calendar={calendar}
value={this.state.value}
prefixCls="ant-calendar-picker-container"
style={this.props.popupStyle}
align={this.props.align}
onOpen={this.toggleOpen}
onClose={this.toggleOpen}
onChange={this.handleChange}>
disabled={this.props.disabled}
calendar={calendar}
value={this.state.value}
prefixCls="ant-calendar-picker-container"
style={this.props.popupStyle}
align={this.props.align}
onOpen={this.toggleOpen}
onClose={this.toggleOpen}
onChange={this.handleChange}>
{
({ value }) => {
return (
<span>
<input disabled={this.props.disabled}
onChange={this.handleInputChange}
value={value && this.getFormatter().format(value)}
placeholder={placeholder}
style={this.props.style}
className={'ant-calendar-picker-input ant-input' + sizeClass}/>
onChange={this.handleInputChange}
value={value && this.getFormatter().format(value)}
placeholder={placeholder}
style={this.props.style}
className={'ant-calendar-picker-input ant-input' + sizeClass}/>
<span className="ant-calendar-picker-icon"/>
</span>
);

19
components/input/index.jsx
View File

@ -72,9 +72,9 @@ class Input extends React.Component {
}
switch (props.size) {
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
default:
case 'small': inputClassName = prefixClsFn(prefixCls, 'input', 'input-sm'); break;
case 'large': inputClassName = prefixClsFn(prefixCls, 'input', 'input-lg'); break;
default:
}
let placeholder = props.placeholder;
if (placeholder && ieGT9()) {
@ -84,11 +84,14 @@ class Input extends React.Component {
props.value = fixControlledValue(props.value);
}
switch (props.type) {
case 'textarea':
return <textarea {...props} placeholder={placeholder} className={inputClassName} ref="input" />;
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
case 'textarea':
return (
<textarea {...props} placeholder={placeholder}
className={inputClassName} ref="input" />
);
default:
inputClassName = props.className ? props.className : inputClassName;
return <input {...props} placeholder={placeholder} className={inputClassName} ref="input"/>;
}
}

2
components/layout/col.jsx
View File

@ -12,7 +12,7 @@ const Col = React.createClass({
children: React.PropTypes.node,
},
render() {
const {span, order, offset, push, pull, className, ...others} = this.props;
const { span, order, offset, push, pull, className, ...others } = this.props;
const classes = classNames({
['col-' + span]: span,
['col-order-' + order]: order,

2
components/layout/row.jsx
View File

@ -12,7 +12,7 @@ const Row = React.createClass({
render() {
const { type, justify, align, className, ...others } = this.props;
const classes = classNames({
'row': true,
row: true,
['row-' + type]: type,
['row-' + type + '-' + justify]: justify,
['row-' + type + '-' + align]: align,

20
components/menu/index.jsx
View File

@ -43,16 +43,16 @@ const AntMenu = React.createClass({
let openAnimation = this.props.openAnimation || this.props.openTransitionName;
if (!openAnimation) {
switch (this.props.mode) {
case 'horizontal':
openAnimation = 'slide-up';
break;
case 'vertical':
openAnimation = 'zoom-big';
break;
case 'inline':
openAnimation = animation;
break;
default:
case 'horizontal':
openAnimation = 'slide-up';
break;
case 'vertical':
openAnimation = 'zoom-big';
break;
case 'inline':
openAnimation = animation;
break;
default:
}
}

28
components/message/index.jsx
View File

@ -12,7 +12,7 @@ function getMessageInstance() {
prefixCls: 'ant-message',
transitionName: 'move-up',
style: {
top: top
top,
} // 覆盖原来的样式
});
return messageInstance;
@ -20,31 +20,31 @@ function getMessageInstance() {
function notice(content, duration = defaultDuration, type, onClose) {
let iconClass = ({
'info': 'ant-message-info',
'success': 'ant-message-success',
'error': 'ant-message-error',
'warn': 'ant-message-warn',
'loading': 'ant-message-loading'
info: 'ant-message-info',
success: 'ant-message-success',
error: 'ant-message-error',
warn: 'ant-message-warn',
loading: 'ant-message-loading'
})[type];
let iconType = ({
'info': 'info-circle',
'success': 'check-circle',
'error': 'exclamation-circle',
'warn': 'exclamation-circle',
'loading': 'loading'
info: 'info-circle',
success: 'check-circle',
error: 'exclamation-circle',
warn: 'exclamation-circle',
loading: 'loading'
})[type];
let instance = getMessageInstance();
instance.notice({
key: key,
duration: duration,
key,
duration,
style: {},
content: <div className={'ant-message-custom-content ' + iconClass}>
<Icon className={iconClass} type={iconType} />
<span>{content}</span>
</div>,
onClose: onClose
onClose
});
return (function() {
let target = key++;

6
components/modal/confirm.jsx
View File

@ -3,8 +3,10 @@ import ReactDOM from 'react-dom';
import Dialog from './index';
import Icon from '../icon';
import Button from '../button';
import objectAssign from 'object-assign';
export default function (props = {}) {
export default function (config) {
const props = objectAssign({}, config || {});
let div = document.createElement('div');
document.body.appendChild(div);
@ -110,7 +112,7 @@ export default function (props = {}) {
transitionName="zoom"
footer=""
maskTransitionName="fade" width={width}>
<div style={{zoom: 1, overflow: 'hidden'}}>{body} {footer}</div>
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
</Dialog>, div, function () {
d = this;
});

33
components/modal/index.jsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import Dialog from 'rc-dialog';
import { Dom } from 'rc-util';
import objectAssign from 'object-assign';
import confirm from './confirm';
import Button from '../button';
@ -72,32 +73,40 @@ let AntModal = React.createClass({
let footer = props.footer || defaultFooter;
return (
<Dialog onClose={this.handleCancel} footer={footer} {...props}
visible={props.visible} mousePosition={mousePosition} />
visible={props.visible} mousePosition={mousePosition} />
);
}
});
AntModal.info = function (props) {
props.iconClassName = 'info-circle';
props.okCancel = false;
return confirm(props);
const config = objectAssign({}, props, {
iconClassName: 'info-circle',
okCancel: false,
});
return confirm(config);
};
AntModal.success = function (props) {
props.iconClassName = 'check-circle';
props.okCancel = false;
return confirm(props);
const config = objectAssign({}, props, {
iconClassName: 'check-circle',
okCancel: false,
});
return confirm(config);
};
AntModal.error = function (props) {
props.iconClassName = 'exclamation-circle';
props.okCancel = false;
return confirm(props);
const config = objectAssign({}, props, {
iconClassName: 'exclamation-circle',
okCancel: false,
});
return confirm(config);
};
AntModal.confirm = function (props) {
props.okCancel = true;
return confirm(props);
const config = objectAssign({}, props, {
okCancel: true,
});
return confirm(config);
};
export default AntModal;

36
components/notification/index.jsx
View File

@ -13,7 +13,7 @@ function getNotificationInstance() {
notificationInstance = Notification.newInstance({
prefixCls: 'ant-notification',
style: {
top: top,
top,
right: 0
}
});
@ -32,20 +32,20 @@ function notice(args) {
let prefixCls = ' ant-notification-notice-content-icon-';
let iconType = '';
switch (args.icon) {
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'exclamation-circle-o';
break;
case 'warn':
iconType = 'question-circle-o';
break;
default:
iconType = 'info-circle';
case 'success':
iconType = 'check-circle-o';
break;
case 'info':
iconType = 'info-circle-o';
break;
case 'error':
iconType = 'exclamation-circle-o';
break;
case 'warn':
iconType = 'question-circle-o';
break;
default:
iconType = 'info-circle';
}
getNotificationInstance().notice({
@ -56,7 +56,7 @@ function notice(args) {
<div className={prefixCls + 'description'}>{args.description}</div>
</div>,
duration: duration,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
@ -71,7 +71,7 @@ function notice(args) {
<div className={prefixCls + 'description'}>{args.description}</div>
</div>,
duration: duration,
duration,
closable: true,
onClose: args.onClose,
key: args.key,
@ -87,7 +87,7 @@ function notice(args) {
{args.btn}
</span>
</div>,
duration: duration,
duration,
closable: true,
onClose: args.onClose,
key: args.key,

6
components/pagination/index.jsx
View File

@ -23,9 +23,9 @@ class AntPagination extends React.Component {
return (
<Pagination selectComponentClass={selectComponentClass}
selectPrefixCls="ant-select"
{...this.props}
className={className} />
selectPrefixCls="ant-select"
{...this.props}
className={className} />
);
}
}

16
components/popconfirm/index.jsx
View File

@ -62,7 +62,7 @@ export default React.createClass({
}
},
render() {
const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
const { title, okText, cancelText, placement, overlayStyle, trigger } = this.props;
const overlay = (
<div>
<div className={prefixCls + '-content'}>
@ -82,13 +82,13 @@ export default React.createClass({
return (
<Tooltip placement={placement}
overlayStyle={overlayStyle}
prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange}
transitionName={transitionName}
visible={this.state.visible}
trigger={trigger}
overlay={overlay}>
overlayStyle={overlayStyle}
prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange}
transitionName={transitionName}
visible={this.state.visible}
trigger={trigger}
overlay={overlay}>
{this.props.children}
</Tooltip>
);

8
components/popover/index.jsx
View File

@ -6,7 +6,7 @@ const prefixCls = 'ant-popover';
const Popover = React.createClass({
getDefaultProps() {
return {
prefixCls: prefixCls,
prefixCls,
placement: 'top',
trigger: 'hover',
mouseEnterDelay: 0.1,
@ -33,9 +33,9 @@ const Popover = React.createClass({
return (
<Tooltip transitionName={transitionName}
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}>
ref="tooltip"
{...this.props}
overlay={this.getOverlay()}>
{this.props.children}
</Tooltip>
);

20
components/progress/index.jsx
View File

@ -1,4 +1,4 @@
import {Circle as Progresscircle} from 'rc-progress';
import { Circle as Progresscircle } from 'rc-progress';
import React from 'react';
import assign from 'object-assign';
import Icon from '../icon';
@ -6,9 +6,9 @@ import Icon from '../icon';
const prefixCls = 'ant-progress';
const statusColorMap = {
'normal': '#2db7f5',
'exception': '#ff6600',
'success': '#87d068'
normal: '#2db7f5',
exception: '#ff6600',
success: '#87d068'
};
let Line = React.createClass({
@ -83,7 +83,7 @@ let Circle = React.createClass({
strokeWidth: React.PropTypes.number,
width: React.PropTypes.number,
},
getDefaultProps: function () {
getDefaultProps() {
return {
width: 132,
percent: 0,
@ -100,9 +100,9 @@ let Circle = React.createClass({
}
let style = {
'width': props.width,
'height': props.width,
'fontSize': props.width * 0.16 + 6
width: props.width,
height: props.width,
fontSize: props.width * 0.16 + 6
};
let progressInfo;
const text = (typeof props.format === 'string') ?
@ -136,6 +136,6 @@ let Circle = React.createClass({
});
export default {
Line: Line,
Circle: Circle
Line,
Circle,
};

18
components/radio/group.jsx
View File

@ -12,15 +12,15 @@ function getCheckedValue(children) {
}
export default React.createClass({
getDefaultProps: function () {
getDefaultProps() {
return {
prefixCls: 'ant-radio-group',
disabled: false,
onChange: function () {
onChange() {
}
};
},
getInitialState: function () {
getInitialState() {
let props = this.props;
return {
value: props.value || props.defaultValue || getCheckedValue(props.children)
@ -33,16 +33,16 @@ export default React.createClass({
});
}
},
render: function () {
render() {
let props = this.props;
let children = React.Children.map(props.children, (radio) => {
if (radio.props) {
return (
<Radio key={radio.props.value}
{...radio.props}
onChange={this.onRadioChange}
checked={this.state.value === radio.props.value}
disabled={radio.props.disabled || this.props.disabled}/>
{...radio.props}
onChange={this.onRadioChange}
checked={this.state.value === radio.props.value}
disabled={radio.props.disabled || this.props.disabled}/>
);
}
return radio;
@ -53,7 +53,7 @@ export default React.createClass({
</div>
);
},
onRadioChange: function (ev) {
onRadioChange(ev) {
this.setState({
value: ev.target.value
});

2
components/slider/index.jsx
View File

@ -9,7 +9,7 @@ export default React.createClass({
};
},
render() {
const {isIncluded, marks, index, defaultIndex, ...rest} = this.props;
const { isIncluded, marks, index, defaultIndex, ...rest } = this.props;
if (isIncluded !== undefined) {
// 兼容 `isIncluded`

10
components/steps/index.jsx
View File

@ -18,11 +18,11 @@ const AntSteps = React.createClass({
}
return (
<Steps size={this.props.size}
current={this.props.current}
direction={this.props.direction}
iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={maxDescriptionWidth}
prefixCls={this.props.prefixCls}>
current={this.props.current}
direction={this.props.direction}
iconPrefix={this.props.iconPrefix}
maxDescriptionWidth={maxDescriptionWidth}
prefixCls={this.props.prefixCls}>
{this.props.children}
</Steps>
);

29
components/table/filterDropdown.jsx
View File

@ -20,12 +20,11 @@ let FilterMenu = React.createClass({
},
getDefaultProps() {
return {
handleFilter: function () {
},
handleFilter() {},
column: null
};
},
setSelectedKeys: function ({selectedKeys}) {
setSelectedKeys({ selectedKeys }) {
this.setState({ selectedKeys });
},
handleClearFilters() {
@ -41,7 +40,7 @@ let FilterMenu = React.createClass({
},
onVisibleChange(visible) {
this.setState({
visible: visible
visible,
});
if (!visible) {
this.props.confirmFilter(this.props.column, this.state.selectedKeys);
@ -89,7 +88,7 @@ let FilterMenu = React.createClass({
this.setState({ keyPathOfSelectedItem });
},
render() {
let {column, locale} = this.props;
let { column, locale } = this.props;
// default multiple selection in filter dropdown
let multiple = true;
if ('filterMultiple' in column) {
@ -117,19 +116,19 @@ let FilterMenu = React.createClass({
let menus = (
<div className="ant-table-filter-dropdown">
<Menu multiple={multiple}
prefixCls="ant-dropdown-menu"
onSelect={this.setSelectedKeys}
onDeselect={this.setSelectedKeys}
selectedKeys={this.state.selectedKeys}>
prefixCls="ant-dropdown-menu"
onSelect={this.setSelectedKeys}
onDeselect={this.setSelectedKeys}
selectedKeys={this.state.selectedKeys}>
{this.renderMenus(column.filters)}
</Menu>
<div className="ant-table-filter-dropdown-btns">
<a className="ant-table-filter-dropdown-link confirm"
onClick={this.handleConfirm}>
onClick={this.handleConfirm}>
{locale.filterConfirm}
</a>
<a className="ant-table-filter-dropdown-link clear"
onClick={this.handleClearFilters}>
onClick={this.handleClearFilters}>
{locale.filterReset}
</a>
</div>
@ -144,10 +143,10 @@ let FilterMenu = React.createClass({
return (
<Dropdown trigger={['click']}
overlay={menus}
visible={this.state.visible}
onVisibleChange={this.onVisibleChange}
closeOnSelect={false}>
overlay={menus}
visible={this.state.visible}
onVisibleChange={this.onVisibleChange}
closeOnSelect={false}>
<Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />
</Dropdown>
);

69
components/table/index.jsx
View File

@ -144,7 +144,9 @@ let AntTable = React.createClass({
sorter
};
this.setState(newState);
this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
this.props.onChange.apply(this, this.prepareParamsArguments(
objectAssign({}, this.state, newState)
));
},
handleFilter(column, nextFilters) {
@ -164,7 +166,9 @@ let AntTable = React.createClass({
};
this.setState(newState);
this.setSelectedRowKeys([]);
this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
this.props.onChange.apply(this, this.prepareParamsArguments(
objectAssign({}, this.state, newState)
));
},
handleSelect(record, rowIndex, e) {
@ -192,7 +196,7 @@ let AntTable = React.createClass({
}
},
handleRadioSelect: function (record, rowIndex, e) {
handleRadioSelect(record, rowIndex, e) {
const checked = e.target.checked;
const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
@ -259,10 +263,12 @@ let AntTable = React.createClass({
};
this.setState(newState);
this.setSelectedRowKeys([]);
this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
this.props.onChange.apply(this, this.prepareParamsArguments(
objectAssign({}, this.state, newState)
));
},
onRadioChange: function (ev) {
onRadioChange(ev) {
this.setState({
radioIndex: ev.target.value
});
@ -282,8 +288,9 @@ let AntTable = React.createClass({
this.getDefaultSelection().indexOf(rowIndex) >= 0);
}
return (
<Radio disabled={props.disabled} onChange={this.handleRadioSelect.bind(this, record, rowIndex)}
value={rowIndex} checked={checked}/>
<Radio disabled={props.disabled}
onChange={this.handleRadioSelect.bind(this, record, rowIndex)}
value={rowIndex} checked={checked}/>
);
},
@ -302,7 +309,7 @@ let AntTable = React.createClass({
}
return (
<Checkbox checked={checked} disabled={props.disabled}
onChange={this.handleSelect.bind(this, record, rowIndex)}/>
onChange={this.handleSelect.bind(this, record, rowIndex)}/>
);
},
@ -346,8 +353,8 @@ let AntTable = React.createClass({
this.props.rowSelection.getCheckboxProps(item).disabled);
const checkboxAll = (
<Checkbox checked={checked}
disabled={checkboxAllDisabled}
onChange={this.handleSelectAllRow} />
disabled={checkboxAllDisabled}
onChange={this.handleSelectAllRow} />
);
selectionColumn = {
key: 'selection-column',
@ -390,8 +397,8 @@ let AntTable = React.createClass({
let colFilters = this.state.filters[key] || [];
filterDropdown = (
<FilterDropdown locale={locale} column={column}
selectedKeys={colFilters}
confirmFilter={this.handleFilter}/>
selectedKeys={colFilters}
confirmFilter={this.handleFilter}/>
);
}
if (column.sorter) {
@ -407,14 +414,14 @@ let AntTable = React.createClass({
<div className="ant-table-column-sorter">
<span className={'ant-table-column-sorter-up ' +
((isSortColumn && this.state.sortOrder === 'ascend') ? 'on' : 'off')}
title="↑"
onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
title="↑"
onClick={this.toggleSortOrder.bind(this, 'ascend', column)}>
<Icon type="caret-up"/>
</span>
<span className={'ant-table-column-sorter-down ' +
((isSortColumn && this.state.sortOrder === 'descend') ? 'on' : 'off')}
title="↓"
onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
title="↓"
onClick={this.toggleSortOrder.bind(this, 'descend', column)}>
<Icon type="caret-down"/>
</span>
</div>
@ -438,7 +445,7 @@ let AntTable = React.createClass({
}
let nextPagination = objectAssign(pagination, {
pageSize: pageSize
pageSize,
});
this.setState({ pagination: nextPagination });
},
@ -450,17 +457,17 @@ let AntTable = React.createClass({
}
let classString = classNames({
'ant-table-pagination': true,
'mini': this.props.size === 'middle' || this.props.size === 'small',
mini: this.props.size === 'middle' || this.props.size === 'small',
});
let total = this.state.pagination.total || this.getLocalData().length;
const pageSize = this.state.pagination.pageSize;
return (total > 0) ?
<Pagination {...this.state.pagination}
className={classString}
onChange={this.handlePageChange}
total={total}
pageSize={pageSize}
onShowSizeChange={this.handleShowSizeChange} /> : null;
className={classString}
onChange={this.handlePageChange}
total={total}
pageSize={pageSize}
onShowSizeChange={this.handleShowSizeChange} /> : null;
},
prepareParamsArguments(state) {
@ -551,8 +558,9 @@ let AntTable = React.createClass({
columns = this.renderColumnsDropdown(columns);
columns = columns.map((column, i) => {
column.key = column.key || column.dataIndex || i;
return column;
const newColumn = objectAssign({}, column);
newColumn.key = newColumn.key || newColumn.dataIndex || i;
return newColumn;
});
let emptyText;
let emptyClass = '';
@ -568,15 +576,16 @@ let AntTable = React.createClass({
let table = (
<div>
<Table {...this.props}
data={data}
columns={columns}
className={classString}
expandIconAsCell={expandIconAsCell} />
data={data}
columns={columns}
className={classString}
expandIconAsCell={expandIconAsCell} />
{emptyText}
</div>
);
if (this.props.loading) {
// if there is no pagination or no data, the height of spin should decrease by half of pagination
// if there is no pagination or no data,
// the height of spin should decrease by half of pagination
let paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
? 'ant-table-with-pagination'
: 'ant-table-without-pagination';

8
components/tabs/index.jsx
View File

@ -66,10 +66,10 @@ class AntTabs extends React.Component {
);
return (
<Tabs {...this.props}
className={className}
tabBarExtraContent={tabBarExtraContent}
onChange={this.handleChange}
animation={animation}>
className={className}
tabBarExtraContent={tabBarExtraContent}
onChange={this.handleChange}
animation={animation}>
{children}
</Tabs>
);

23
components/tag/index.jsx
View File

@ -39,22 +39,25 @@ class AntTag extends React.Component {
className = this.state.closing ? className + ' ' + this.props.prefixCls + '-close' : className;
return this.state.closed ? null
: <Animate component=""
showProp="data-show"
transitionName={this.props.prefixCls + '-zoom'}
onEnd={this.animationEnd.bind(this)}>
<div data-show={!this.state.closing} className={className}>
<a className={this.props.prefixCls + '-text'} {...this.props} />
{close}
</div>
</Animate>;
: (
<Animate component=""
showProp="data-show"
transitionName={this.props.prefixCls + '-zoom'}
onEnd={this.animationEnd.bind(this)}>
<div data-show={!this.state.closing} className={className}>
<a className={this.props.prefixCls + '-text'} {...this.props} />
{close}
</div>
</Animate>
);
}
}
function NOOP() {}
AntTag.defaultProps = {
prefixCls: 'ant-tag',
closable: false,
onClose: function() {}
onClose: NOOP,
};
export default AntTag;

6
components/timeline/index.jsx
View File

@ -37,12 +37,14 @@ Timeline.Item = React.createClass({
let pending = props.pending;
let timelineLast = props.timelineLast;
let endCls = pending && timelineLast ? prefixCls + '-item-last' : '';
let last = pending && timelineLast ? <div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> : null;
let last = pending && timelineLast ?
<div className={prefixCls + '-item-head ' + prefixCls + '-item-head-end'}></div> :
null;
let lastTailShow = (timelineLast && !pending) ? 'none' : 'block';
return (
<li className={prefixCls + '-item ' + endCls}>
<div style={{display: lastTailShow}} className={prefixCls + '-item-tail'}></div>
<div style={{ display: lastTailShow }} className={prefixCls + '-item-tail'}></div>
<div className={prefixCls + '-item-head ' + prefixCls + '-item-head-' + color}></div>
<div className={prefixCls + '-item-content'}>{props.children}</div>
{last}

2
components/tooltip/index.jsx
View File

@ -41,7 +41,7 @@ export default React.createClass({
}
return (
<Tooltip transitionName={transitionName}
<Tooltip transitionName={transitionName}
overlay={this.props.title}
visible={visible}
onVisibleChange={this.onVisibleChange}

102
components/transfer/index.jsx
View File

@ -26,10 +26,10 @@ class Transfer extends Component {
let leftDataSource = Object.assign([], dataSource);
let rightDataSource = [];
if ( targetKeys.length > 0 ) {
if (targetKeys.length > 0) {
targetKeys.forEach((targetKey) => {
rightDataSource.push(leftDataSource.find((data, index) => {
if ( data.key === targetKey ) {
if (data.key === targetKey) {
leftDataSource.splice(index, 1);
return true;
}
@ -38,8 +38,8 @@ class Transfer extends Component {
}
return {
leftDataSource: leftDataSource,
rightDataSource: rightDataSource,
leftDataSource,
rightDataSource,
};
}
@ -48,12 +48,14 @@ class Transfer extends Component {
const { leftCheckedKeys, rightCheckedKeys } = this.state;
// move items to target box
const newTargetKeys = direction === 'right' ?
leftCheckedKeys.concat(targetKeys) :
targetKeys.filter((targetKey) => !rightCheckedKeys.some((checkedKey) => targetKey === checkedKey));
leftCheckedKeys.concat(targetKeys) :
targetKeys.filter((targetKey) => {
return !rightCheckedKeys.some((checkedKey) => targetKey === checkedKey);
});
// empty checked keys
this.setState({
[ direction === 'right' ? 'leftCheckedKeys' : 'rightCheckedKeys' ]: [],
[direction === 'right' ? 'leftCheckedKeys' : 'rightCheckedKeys']: [],
});
this.props.onChange(newTargetKeys);
@ -70,8 +72,8 @@ class Transfer extends Component {
let globalCheckStatus;
if ( checkedKeys.length > 0 ) {
if ( checkedKeys.length < filteredDataSource.length ) {
if (checkedKeys.length > 0) {
if (checkedKeys.length < filteredDataSource.length) {
globalCheckStatus = 'part';
} else {
globalCheckStatus = 'all';
@ -102,7 +104,7 @@ class Transfer extends Component {
const checkStatus = this.getGlobalCheckStatus(direction);
let holder = [];
if ( checkStatus === 'all' ) {
if (checkStatus === 'all') {
holder = [];
} else {
holder = this.filterDataSource(dataSource, filter).map(item => item.key);
@ -132,10 +134,10 @@ class Transfer extends Component {
const { leftCheckedKeys, rightCheckedKeys } = this.state;
const holder = direction === 'left' ? leftCheckedKeys : rightCheckedKeys;
const index = holder.findIndex((key) => key === selectedItem.key);
if ( index > -1 ) {
if (index > -1) {
holder.splice(index, 1);
}
if ( checked ) {
if (checked) {
holder.push(selectedItem.key);
}
this.setState({
@ -165,46 +167,46 @@ class Transfer extends Component {
return (
<div className={cls}>
<List titleText={titles[0]}
dataSource={leftDataSource}
filter={leftFilter}
style={listStyle}
checkedKeys={leftCheckedKeys}
checkStatus={leftCheckStatus}
handleFilter={this.handleFilter.bind(this, 'left')}
handleClear={this.handleClear.bind(this, 'left')}
handleSelect={this.handleSelect.bind(this, 'left')}
handleSelectAll={this.handleSelectAll.bind(this, 'left')}
position="left"
render={this.props.render}
showSearch={showSearch}
searchPlaceholder={searchPlaceholder}
body={body}
footer={footer}
prefixCls={prefixCls + '-list'}/>
dataSource={leftDataSource}
filter={leftFilter}
style={listStyle}
checkedKeys={leftCheckedKeys}
checkStatus={leftCheckStatus}
handleFilter={this.handleFilter.bind(this, 'left')}
handleClear={this.handleClear.bind(this, 'left')}
handleSelect={this.handleSelect.bind(this, 'left')}
handleSelectAll={this.handleSelectAll.bind(this, 'left')}
position="left"
render={this.props.render}
showSearch={showSearch}
searchPlaceholder={searchPlaceholder}
body={body}
footer={footer}
prefixCls={prefixCls + '-list'}/>
<Operation rightActive={rightActive}
rightArrowText={operations[0]}
moveToRight={this.moveTo.bind(this, 'right')}
leftActive={leftActive}
leftArrowText={operations[1]}
moveToLeft={this.moveTo.bind(this, 'left')}
className={prefixCls + '-operation'}/>
rightArrowText={operations[0]}
moveToRight={this.moveTo.bind(this, 'right')}
leftActive={leftActive}
leftArrowText={operations[1]}
moveToLeft={this.moveTo.bind(this, 'left')}
className={prefixCls + '-operation'}/>
<List titleText={titles[1]}
dataSource={rightDataSource}
filter={rightFilter}
style={listStyle}
checkedKeys={rightCheckedKeys}
checkStatus={rightCheckStatus}
handleFilter={this.handleFilter.bind(this, 'right')}
handleClear={this.handleClear.bind(this, 'right')}
handleSelect={this.handleSelect.bind(this, 'right')}
handleSelectAll={this.handleSelectAll.bind(this, 'right')}
position="right"
render={this.props.render}
showSearch={showSearch}
searchPlaceholder={searchPlaceholder}
body={body}
footer={footer}
prefixCls={prefixCls + '-list'}/>
dataSource={rightDataSource}
filter={rightFilter}
style={listStyle}
checkedKeys={rightCheckedKeys}
checkStatus={rightCheckStatus}
handleFilter={this.handleFilter.bind(this, 'right')}
handleClear={this.handleClear.bind(this, 'right')}
handleSelect={this.handleSelect.bind(this, 'right')}
handleSelectAll={this.handleSelectAll.bind(this, 'right')}
position="right"
render={this.props.render}
showSearch={showSearch}
searchPlaceholder={searchPlaceholder}
body={body}
footer={footer}
prefixCls={prefixCls + '-list'}/>
</div>
);
}

36
components/transfer/list.jsx
View File

@ -56,8 +56,8 @@ class TransferList extends Component {
}
return (
<span ref="checkbox"
className={checkboxCls}
onClick={(!props.disabled) && this.handleSelectALl.bind(this)}>
className={checkboxCls}
onClick={(!props.disabled) && this.handleSelectALl.bind(this)}>
{customEle}
</span>
);
@ -69,11 +69,12 @@ class TransferList extends Component {
}
render() {
const { prefixCls, dataSource, titleText, filter, checkedKeys, checkStatus, body, footer, showSearch } = this.props;
const { prefixCls, dataSource, titleText, filter, checkedKeys,
checkStatus, body, footer, showSearch } = this.props;
// Custom Layout
const footerDom = footer({...this.props});
const bodyDom = body({...this.props});
const footerDom = footer({ ...this.props });
const bodyDom = body({ ...this.props });
const listCls = classNames({
[prefixCls]: true,
@ -88,13 +89,27 @@ class TransferList extends Component {
checked: checkStatus === 'all',
checkPart: checkStatus === 'part',
checkable: <span className={`ant-transfer-checkbox-inner`}></span>
})}<span className={`${prefixCls}-header-selected`}><span>{(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length} 条</span>
<span className={`${prefixCls}-header-title`}>{titleText}</span></span>
})}
<span className={`${prefixCls}-header-selected`}>
<span>
{
(checkedKeys.length > 0 ? checkedKeys.length + '/' : '') + dataSource.length
} 条
</span>
<span className={`${prefixCls}-header-title`}>{titleText}</span>
</span>
</div>
{ bodyDom ? bodyDom :
<div className={ showSearch ? `${prefixCls}-body ${prefixCls}-body-with-search` : `${prefixCls}-body`}>
<div className={
showSearch ?
`${prefixCls}-body ${prefixCls}-body-with-search` :
`${prefixCls}-body`
}>
{ showSearch ? <div className={`${prefixCls}-body-search-wrapper`}>
<Search prefixCls={`${prefixCls}-search`} onChange={this.handleFilter.bind(this)} handleClear={this.handleClear.bind(this)} value={filter} />
<Search prefixCls={`${prefixCls}-search`}
onChange={this.handleFilter.bind(this)}
handleClear={this.handleClear.bind(this)}
value={filter} />
</div> : null }
<Animate component="ul"
transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
@ -109,7 +124,8 @@ class TransferList extends Component {
if (filterResult) {
return (
<li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
<li onClick={this.handleSelect.bind(this, item)}
key={item.key} title={renderedText}>
<Checkbox checked={checkedKeys.some(key => key === item.key)} />
{renderedText}
</li>

10
components/transfer/search.jsx
View File

@ -13,13 +13,15 @@ class Search extends Component {
}
render() {
const {placeholder, value, prefixCls} = this.props;
const { placeholder, value, prefixCls } = this.props;
return (
<div>
<input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input"
onChange={this.handleChange.bind(this)}/>
<input placeholder={placeholder} className={ prefixCls + ' ant-input' }
value={ value } ref="input"
onChange={this.handleChange.bind(this)}/>
{ value && value.length > 0 ?
<a href="javascirpt:;" className={ prefixCls + '-action' } onClick={this.props.handleClear}>
<a href="javascirpt:;" className={ prefixCls + '-action' }
onClick={this.props.handleClear}>
<Icon type="cross-circle" />
</a>
: <span className={ prefixCls + '-action' }><Icon type="search" /></span>

10
components/upload/index.jsx
View File

@ -125,7 +125,7 @@ const AntUpload = React.createClass({
targetItem.response = response;
this.onChange({
file: targetItem,
fileList: fileList
fileList
});
}
},
@ -136,7 +136,7 @@ const AntUpload = React.createClass({
targetItem.percent = e.percent;
this.onChange({
event: e,
file: file,
file,
fileList: this.state.fileList
});
},
@ -157,8 +157,8 @@ const AntUpload = React.createClass({
let fileList = this.removeFile(file);
if (fileList) {
this.onChange({
file: file,
fileList: fileList
file,
fileList,
});
}
},
@ -257,7 +257,7 @@ const AntUpload = React.createClass({
AntUpload.Dragger = React.createClass({
render() {
return <AntUpload {...this.props} type="drag" style={{height: this.props.height}}/>;
return <AntUpload {...this.props} type="drag" style={{ height: this.props.height }}/>;
}
});

8
components/upload/uploadList.jsx
View File

@ -55,9 +55,11 @@ export default React.createClass({
if (this.props.listType === 'picture') {
icon = (file.status === 'uploading' || (!file.thumbUrl && !file.url))
? <Icon className={prefixCls + '-list-item-thumbnail'} type="picture" />
: <a className={prefixCls + '-list-item-thumbnail'}
href={file.url}
target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>;
: (
<a className={prefixCls + '-list-item-thumbnail'}
href={file.url}
target="_blank"><img src={file.thumbUrl || file.url} alt={file.name} /></a>
);
}
if (file.status === 'uploading') {
progress = (

8
index.js
View File

@ -54,8 +54,12 @@ if (process.env.NODE_ENV !== 'production') {
const warning = require('warning');
const semver = require('semver');
const reactVersionInDeps = require('./package.json').devDependencies.react;
warning(semver.satisfies(ReactVersion, reactVersionInDeps) || semver.gtr(ReactVersion, reactVersionInDeps),
`antd@${antd.version} need react@${reactVersionInDeps} or higher, which is react@${ReactVersion} now.`);
warning(
semver.satisfies(ReactVersion, reactVersionInDeps) ||
semver.gtr(ReactVersion, reactVersionInDeps),
`antd@${antd.version} need react@${reactVersionInDeps} or higher, ` +
`which is react@${ReactVersion} now.`
);
}
module.exports = antd;