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

refactor(switch): improve code (#24516)

Browse Source
This commit is contained in:
Tom Xu 2020-05-28 09:55:23 +08:00 committed by GitHub
parent 9b54bd728d
commit 030c545964
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/switch/index.tsx
View File

@ -1,7 +1,6 @@
import * as React from 'react';
import RcSwitch from 'rc-switch';
import classNames from 'classnames';
import omit from 'omit.js';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import Wave from '../_util/wave';
@ -35,50 +34,55 @@ interface CompoundedComponent
__ANT_SWITCH: boolean;
}
const Switch = React.forwardRef<unknown, SwitchProps>((props, ref) => {
devWarning(
'checked' in props || !('value' in props),
'Switch',
'`value` is not a valid prop, do you mean `checked`?',
);
const Switch = React.forwardRef<unknown, SwitchProps>(
(
{
prefixCls: customizePrefixCls,
size: customizeSize,
loading,
className = '',
disabled,
...props
},
ref,
) => {
devWarning(
'checked' in props || !('value' in props),
'Switch',
'`value` is not a valid prop, do you mean `checked`?',
);
const {
prefixCls: customizePrefixCls,
size: customizeSize,
loading,
className = '',
disabled,
} = props;
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const prefixCls = getPrefixCls('switch', customizePrefixCls);
const loadingIcon = (
<div className={`${prefixCls}-handle`}>
{loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
</div>
);
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
const prefixCls = getPrefixCls('switch', customizePrefixCls);
const loadingIcon = (
<div className={`${prefixCls}-handle`}>
{loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
</div>
);
const classes = classNames(className, {
[`${prefixCls}-small`]: (customizeSize || size) === 'small',
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
const classes = classNames(className, {
[`${prefixCls}-small`]: (customizeSize || size) === 'small',
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-rtl`]: direction === 'rtl',
});
return (
<Wave insertExtraNode>
<RcSwitch
{...omit(props, ['loading'])}
prefixCls={prefixCls}
className={classes}
disabled={disabled || loading}
ref={ref}
loadingIcon={loadingIcon}
/>
</Wave>
);
}) as CompoundedComponent;
return (
<Wave insertExtraNode>
<RcSwitch
{...props}
prefixCls={prefixCls}
className={classes}
disabled={disabled || loading}
ref={ref}
loadingIcon={loadingIcon}
/>
</Wave>
);
},
) as CompoundedComponent;
Switch.__ANT_SWITCH = true;
Switch.displayName = 'Switch';
export default Switch;