mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

Merge pull request #1295 from waywardmonkeys/more-class-conversion

Browse Source 
Convert more createClass over to extending Component.
This commit is contained in:
afc163 2016-03-30 11:11:50 +08:00
commit 9584cf0af3
7 changed files with 187 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/affix/index.jsx
View File

@ -32,19 +32,20 @@ function getOffset(element) {
};
}
const Affix = React.createClass({
propTypes: {
export default class Affix extends React.Component {
static propTypes = {
offsetTop: React.PropTypes.number,
offsetBottom: React.PropTypes.number,
},
}
getInitialState() {
return {
constructor(props) {
super(props);
this.state = {
affixStyle: null,
};
},
}
handleScroll() {
handleScroll = () => {
let { offsetTop, offsetBottom } = this.props;
const scrollTop = getScroll(window, true);
const elemOffset = getOffset(ReactDOM.findDOMNode(this));
@ -90,12 +91,12 @@ const Affix = React.createClass({
affixStyle: null,
});
}
},
}
componentDidMount() {
this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll);
this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll);
},
}
componentWillUnmount() {
if (this.scrollEvent) {
@ -104,7 +105,7 @@ const Affix = React.createClass({
if (this.resizeEvent) {
this.resizeEvent.remove();
}
},
}
render() {
const className = classNames({
@ -119,8 +120,5 @@ const Affix = React.createClass({
</div>
</div>
);
},
});
export default Affix;
}
}

50
components/modal/Modal.jsx
View File

@ -8,25 +8,19 @@ function noop() {}
let mousePosition;
let mousePositionEventBinded;
const Modal = React.createClass({
getDefaultProps() {
return {
prefixCls: 'ant-modal',
onOk: noop,
onCancel: noop,
width: 520,
transitionName: 'zoom',
maskAnimation: 'fade',
confirmLoading: false,
visible: false,
};
},
export default class Modal extends React.Component {
static defaultProps = {
prefixCls: 'ant-modal',
onOk: noop,
onCancel: noop,
width: 520,
transitionName: 'zoom',
maskAnimation: 'fade',
confirmLoading: false,
visible: false,
}
contextTypes: {
antLocale: React.PropTypes.object,
},
propTypes: {
static propTypes = {
prefixCls: PropTypes.string,
onOk: PropTypes.func,
onCancel: PropTypes.func,
@ -39,15 +33,19 @@ const Modal = React.createClass({
footer: PropTypes.node,
title: PropTypes.node,
closable: PropTypes.bool,
},
}
handleCancel(e) {
static contextTypes = {
antLocale: React.PropTypes.object,
}
handleCancel = (e) => {
this.props.onCancel(e);
},
}
handleOk() {
handleOk = () => {
this.props.onOk();
},
}
componentDidMount() {
if (mousePositionEventBinded) {
@ -65,7 +63,7 @@ const Modal = React.createClass({
setTimeout(() => mousePosition = null, 20);
});
mousePositionEventBinded = true;
},
}
render() {
let props = this.props;
@ -97,6 +95,4 @@ const Modal = React.createClass({
visible={props.visible} mousePosition={mousePosition} />
);
}
});
export default Modal;
}

61
components/popconfirm/index.jsx
View File

@ -22,48 +22,55 @@ const transitionNames = {
rightBottom: 'zoom-left',
};
export default React.createClass({
getInitialState() {
return {
export default class Popconfirm extends React.Component {
static defaultProps = {
transitionName: '',
placement: 'top',
trigger: 'click',
overlayStyle: {},
onConfirm: noop,
onCancel: noop,
onVisibleChange() {},
}
static contextTypes = {
antLocale: React.PropTypes.object,
}
constructor(props) {
super(props);
this.state = {
visible: false
};
},
getDefaultProps() {
return {
transitionName: '',
placement: 'top',
trigger: 'click',
overlayStyle: {},
onConfirm: noop,
onCancel: noop,
onVisibleChange() {},
};
},
contextTypes: {
antLocale: React.PropTypes.object,
},
}
componentWillReceiveProps(nextProps) {
if ('visible' in nextProps) {
this.setState({ visible: nextProps.visible });
}
},
confirm() {
}
confirm = () => {
this.setVisible(false);
this.props.onConfirm.call(this);
},
cancel() {
}
cancel = () => {
this.setVisible(false);
this.props.onCancel.call(this);
},
onVisibleChange(visible) {
}
onVisibleChange = (visible) => {
this.setVisible(visible);
},
}
setVisible(visible) {
if (!('visible' in this.props)) {
this.setState({ visible });
}
this.props.onVisibleChange(visible);
},
}
render() {
const { title, placement, overlayStyle, trigger, ...restProps } = this.props;
let { okText, cancelText } = this.props;
@ -103,4 +110,4 @@ export default React.createClass({
</Tooltip>
);
}
});
}

52
components/progress/index.jsx
View File

@ -10,24 +10,24 @@ const statusColorMap = {
success: '#87d068'
};
let Line = React.createClass({
propTypes: {
class Line extends React.Component {
static defaultProps = {
percent: 0,
strokeWidth: 10,
status: 'normal', // exception active
showInfo: true,
trailColor: '#f3f3f3'
}
static propTypes = {
status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
showInfo: React.PropTypes.bool,
percent: React.PropTypes.number,
strokeWidth: React.PropTypes.number,
trailColor: React.PropTypes.string,
format: React.PropTypes.func,
},
getDefaultProps() {
return {
percent: 0,
strokeWidth: 10,
status: 'normal', // exception active
showInfo: true,
trailColor: '#f3f3f3'
};
},
}
render() {
let props = { ...this.props };
@ -77,26 +77,26 @@ let Line = React.createClass({
</div>
);
}
});
}
let Circle = React.createClass({
propTypes: {
class Circle extends React.Component {
static defaultProps = {
width: 132,
percent: 0,
strokeWidth: 6,
status: 'normal', // exception
trailColor: '#f3f3f3',
}
static propTypes = {
status: React.PropTypes.oneOf(['normal', 'exception', 'success']),
percent: React.PropTypes.number,
strokeWidth: React.PropTypes.number,
width: React.PropTypes.number,
trailColor: React.PropTypes.string,
format: React.PropTypes.func,
},
getDefaultProps() {
return {
width: 132,
percent: 0,
strokeWidth: 6,
status: 'normal', // exception
trailColor: '#f3f3f3',
};
},
}
render() {
let props = { ...this.props };
@ -141,7 +141,7 @@ let Circle = React.createClass({
</div>
);
}
});
}
export default {
Line,

59
components/time-picker/index.jsx
View File

@ -5,34 +5,32 @@ import defaultLocale from './locale/zh_CN';
import classNames from 'classnames';
import GregorianCalendar from 'gregorian-calendar';
const TimePicker = React.createClass({
getDefaultProps() {
return {
format: 'HH:mm:ss',
prefixCls: 'ant-time-picker',
onChange() {
},
locale: {},
align: {
offset: [0, -2],
},
disabled: false,
disabledHours: undefined,
disabledMinutes: undefined,
disabledSeconds: undefined,
hideDisabledOptions: false,
placement: 'bottomLeft',
transitionName: 'slide-up',
};
},
export default class TimePicker extends React.Component {
static defaultProps = {
format: 'HH:mm:ss',
prefixCls: 'ant-time-picker',
onChange() {
},
locale: {},
align: {
offset: [0, -2],
},
disabled: false,
disabledHours: undefined,
disabledMinutes: undefined,
disabledSeconds: undefined,
hideDisabledOptions: false,
placement: 'bottomLeft',
transitionName: 'slide-up',
}
contextTypes: {
static contextTypes = {
antLocale: React.PropTypes.object,
},
}
getFormatter() {
return new DateTimeFormat(this.props.format);
},
}
/**
* 获得输入框的 className
@ -45,7 +43,7 @@ const TimePicker = React.createClass({
sizeClass = ' ant-input-sm';
}
return sizeClass;
},
}
/**
* 获得输入框的默认值
@ -64,14 +62,14 @@ const TimePicker = React.createClass({
}
}
return value;
},
}
handleChange(value) {
handleChange = (value) => {
this.props.onChange(
value ? new Date(value.getTime()) : null,
value ? this.getFormatter().format(value) : '',
);
},
}
getLocale() {
let locale = defaultLocale;
@ -80,7 +78,7 @@ const TimePicker = React.createClass({
}
// 统一合并为完整的 Locale
return { ...locale, ...this.props.locale };
},
}
render() {
const locale = this.getLocale();
@ -116,7 +114,4 @@ const TimePicker = React.createClass({
/>
);
}
});
export default TimePicker;
}

99
components/upload/index.jsx
View File

@ -52,15 +52,39 @@ function genPercentAdd() {
};
}
const Upload = React.createClass({
getInitialState() {
return {
class UploadDragger extends React.Component {
render() {
return <Upload {...this.props} type="drag" style={{ height: this.props.height }} />;
}
}
export default class Upload extends React.Component {
static Dragger = UploadDragger;
static defaultProps = {
type: 'select',
// do not set
// name: '',
multiple: false,
action: '',
data: {},
accept: '',
onChange: noop,
beforeUpload: T,
showUploadList: true,
listType: 'text', // or pictrue
className: '',
}
constructor(props) {
super(props);
this.state = {
fileList: this.props.fileList || this.props.defaultFileList || [],
dragState: 'drop'
};
},
}
onStart(file) {
onStart = (file) => {
if (this.recentUploadStatus === false) return;
let targetItem;
@ -85,7 +109,7 @@ const Upload = React.createClass({
if (!window.FormData) {
this.autoUpdateProgress(0, targetItem);
}
},
}
autoUpdateProgress(percent, file) {
const getPercent = genPercentAdd();
@ -96,7 +120,7 @@ const Upload = React.createClass({
percent: curPercent
}, file);
}, 200);
},
}
removeFile(file) {
let fileList = this.state.fileList;
@ -107,9 +131,9 @@ const Upload = React.createClass({
return fileList;
}
return null;
},
}
onSuccess(response, file) {
onSuccess = (response, file) => {
this.clearProgressTimer();
try {
if (typeof response === 'string') {
@ -127,9 +151,9 @@ const Upload = React.createClass({
fileList
});
}
},
}
onProgress(e, file) {
onProgress = (e, file) => {
let fileList = this.state.fileList;
let targetItem = getFileItem(file, fileList);
if (!targetItem) return;
@ -139,9 +163,9 @@ const Upload = React.createClass({
file: targetItem,
fileList: this.state.fileList
});
},
}
onError(error, response, file) {
onError = (error, response, file) => {
this.clearProgressTimer();
let fileList = this.state.fileList;
let targetItem = getFileItem(file, fileList);
@ -149,12 +173,12 @@ const Upload = React.createClass({
targetItem.response = response;
targetItem.status = 'error';
this.handleRemove(targetItem);
},
}
beforeUpload(file) {
this.recentUploadStatus = this.props.beforeUpload(file);
return this.recentUploadStatus;
},
}
handleRemove(file) {
let fileList = this.removeFile(file);
@ -164,38 +188,21 @@ const Upload = React.createClass({
fileList,
});
}
},
}
handleManualRemove(file) {
handleManualRemove = (file) => {
/*eslint-disable */
file.status = 'removed';
/*eslint-enable */
this.handleRemove(file);
},
}
onChange(info) {
onChange = (info) => {
this.setState({
fileList: info.fileList
});
this.props.onChange(info);
},
getDefaultProps() {
return {
type: 'select',
// do not set
// name: '',
multiple: false,
action: '',
data: {},
accept: '',
onChange: noop,
beforeUpload: T,
showUploadList: true,
listType: 'text', // or pictrue
className: '',
};
},
}
componentWillReceiveProps(nextProps) {
if ('fileList' in nextProps) {
@ -203,17 +210,17 @@ const Upload = React.createClass({
fileList: nextProps.fileList || [],
});
}
},
}
onFileDrop(e) {
onFileDrop = (e) => {
this.setState({
dragState: e.type
});
},
}
clearProgressTimer() {
clearInterval(this.progressTimer);
},
}
render() {
let type = this.props.type || 'select';
@ -283,12 +290,4 @@ const Upload = React.createClass({
);
}
}
});
Upload.Dragger = React.createClass({
render() {
return <Upload {...this.props} type="drag" style={{ height: this.props.height }} />;
}
});
export default Upload;
}

29
components/upload/uploadList.jsx
View File

@ -14,20 +14,20 @@ const previewFile = function (file, callback) {
reader.readAsDataURL(file);
};
export default React.createClass({
getDefaultProps() {
return {
listType: 'text', // or picture
items: [],
progressAttr: {
strokeWidth: 3,
showInfo: false
}
};
},
export default class UploadList extends React.Component {
static defaultProps = {
listType: 'text', // or picture
items: [],
progressAttr: {
strokeWidth: 3,
showInfo: false
}
};
handleClose(file) {
this.props.onRemove(file);
},
}
componentDidUpdate() {
if (this.props.listType !== 'picture' && this.props.listType !== 'picture-card') {
return;
@ -50,7 +50,8 @@ export default React.createClass({
this.forceUpdate();
});
});
},
}
render() {
let list = this.props.items.map(file => {
let progress;
@ -115,4 +116,4 @@ export default React.createClass({
</div>
);
}
});
}