ant-design/components/switch/index.tsx
zombieJ 1a0a06fca9
ConfigProvider support prefixCls (#13389)
Basic support prefixCls.
2018-12-05 19:12:18 +08:00

86 lines
2.1 KiB
TypeScript
Executable File

import * as React from 'react';
import * as PropTypes from 'prop-types';
import RcSwitch from 'rc-switch';
import classNames from 'classnames';
import omit from 'omit.js';
import Wave from '../_util/wave';
import Icon from '../icon';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
export interface SwitchProps {
prefixCls?: string;
size?: 'small' | 'default';
className?: string;
checked?: boolean;
defaultChecked?: boolean;
onChange?: (checked: boolean) => any;
checkedChildren?: React.ReactNode;
unCheckedChildren?: React.ReactNode;
disabled?: boolean;
loading?: boolean;
autoFocus?: boolean;
style?: React.CSSProperties;
}
export default class Switch extends React.Component<SwitchProps, {}> {
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']),
className: PropTypes.string,
};
private rcSwitch: typeof RcSwitch;
focus() {
this.rcSwitch.focus();
}
blur() {
this.rcSwitch.blur();
}
saveSwitch = (node: typeof RcSwitch) => {
this.rcSwitch = node;
}
renderSwitch = ({ getPrefixCls }: ConfigConsumerProps) => {
const {
prefixCls: customizePrefixCls,
size, loading, className = '', disabled,
} = this.props;
const prefixCls = getPrefixCls('switch', customizePrefixCls);
const classes = classNames(className, {
[`${prefixCls}-small`]: size === 'small',
[`${prefixCls}-loading`]: loading,
});
const loadingIcon = loading ? (
<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}
loadingIcon={loadingIcon}
/>
</Wave>
);
}
render() {
return (
<ConfigConsumer>
{this.renderSwitch}
</ConfigConsumer>
);
}
}