zent
Version:
一套前端设计语言和基于React的实现
71 lines (61 loc) • 1.79 kB
JavaScript
import React, { PropTypes, Component } from 'react';
import setClass from 'zent-utils/classnames';
export default class Switch extends Component {
static propTypes = {
size: PropTypes.oneOf([
'large',
'default',
'small'
]),
prefix: PropTypes.string,
className: PropTypes.string,
disabled: PropTypes.bool,
checked: PropTypes.bool,
loading: PropTypes.bool,
onChange: PropTypes.func,
checkedText: PropTypes.any,
uncheckedText: PropTypes.any
}
static defaultProps = {
size: 'default',
prefix: 'zent',
className: '',
disabled: false,
loading: false,
checked: false,
onChange() {},
checkedText: '开启',
uncheckedText: '关闭'
}
// 处理点击时间,直接执行外部onChange方法
toggle = () => {
const { onChange, checked } = this.props;
onChange(!checked);
}
getInnerText() {
return this.props.checked ? this.props.checkedText : this.props.uncheckedText;
}
// render span 标签
renderSwitch(classNames) {
const disabled = this.props.disabled || this.props.loading;
const textClassName = `${this.props.prefix}-switch-inner`;
return (
<span
className={classNames}
onClick={disabled ? null : this.toggle}
>
<span className={textClassName}>{this.getInnerText()}</span>
</span>
);
}
render() {
const { className, size, disabled, loading, prefix, checked } = this.props;
const classNames = setClass({
[`${prefix}-switch-${size}`]: size !== 'default',
[`${prefix}-switch-disabled`]: disabled,
[`${prefix}-switch-loading`]: loading,
[`${prefix}-switch-checked`]: checked,
}, `${prefix}-switch`, className);
return this.renderSwitch(classNames);
}
}