ant-design/components/switch/index.tsx

79 lines
2.2 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
2018-08-07 21:07:52 +08:00
import * as PropTypes from 'prop-types';
2016-08-10 09:46:56 +08:00
import RcSwitch from 'rc-switch';
2015-12-06 16:39:01 +08:00
import classNames from 'classnames';
2017-12-04 20:44:37 +08:00
import omit from 'omit.js';
import Wave from '../_util/wave';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
2015-07-08 19:47:45 +08:00
2016-08-10 09:46:56 +08:00
export interface SwitchProps {
prefixCls?: string;
size?: 'small' | 'default';
className?: string;
checked?: boolean;
defaultChecked?: boolean;
2019-02-05 11:01:36 +08:00
onChange?: (checked: boolean, event: MouseEvent) => any;
onClick?: (checked: boolean, event: MouseEvent) => any;
2016-08-10 09:46:56 +08:00
checkedChildren?: React.ReactNode;
unCheckedChildren?: React.ReactNode;
disabled?: boolean;
2017-12-02 15:57:02 +08:00
loading?: boolean;
2018-10-02 04:58:00 +08:00
autoFocus?: boolean;
2018-11-24 17:19:39 +08:00
style?: React.CSSProperties;
2016-08-10 09:46:56 +08:00
}
export default class Switch extends React.Component<SwitchProps, {}> {
2016-08-10 09:46:56 +08:00
static propTypes = {
prefixCls: PropTypes.string,
// HACK: https://github.com/ant-design/ant-design/issues/5368
// size=default and size=large are the same
size: PropTypes.oneOf(['small', 'default', 'large']) as PropTypes.Requireable<
SwitchProps['size']
>,
2016-08-10 09:46:56 +08:00
className: PropTypes.string,
2016-07-13 11:14:24 +08:00
};
private rcSwitch: typeof RcSwitch;
focus() {
this.rcSwitch.focus();
}
blur() {
this.rcSwitch.blur();
}
saveSwitch = (node: typeof RcSwitch) => {
this.rcSwitch = node;
2018-12-07 20:02:01 +08:00
};
renderSwitch = ({ getPrefixCls }: ConfigConsumerProps) => {
2018-12-07 20:02:01 +08:00
const { prefixCls: customizePrefixCls, size, loading, className = '', disabled } = this.props;
const prefixCls = getPrefixCls('switch', customizePrefixCls);
const classes = classNames(className, {
2016-01-27 12:00:27 +08:00
[`${prefixCls}-small`]: size === 'small',
2017-12-02 15:57:02 +08:00
[`${prefixCls}-loading`]: loading,
2015-12-06 16:39:01 +08:00
});
const loadingIcon = loading ? (
2018-12-07 20:02:01 +08:00
<Icon type="loading" className={`${prefixCls}-loading-icon`} />
) : null;
return (
<Wave insertExtraNode>
<RcSwitch
{...omit(this.props, ['loading'])}
prefixCls={prefixCls}
className={classes}
disabled={disabled || loading}
ref={this.saveSwitch}
2018-08-20 14:00:51 +08:00
loadingIcon={loadingIcon}
/>
</Wave>
);
2018-12-07 20:02:01 +08:00
};
render() {
2018-12-07 20:02:01 +08:00
return <ConfigConsumer>{this.renderSwitch}</ConfigConsumer>;
}
}