ant-design/components/switch/index.tsx
2023-05-06 15:49:37 +08:00

116 lines
3.0 KiB
TypeScript
Executable File

import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
import RcSwitch from 'rc-switch';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import SizeContext from '../config-provider/SizeContext';
import warning from '../_util/warning';
import Wave from '../_util/wave';
import useStyle from './style';
export type SwitchSize = 'small' | 'default';
export type SwitchChangeEventHandler = (
checked: boolean,
event: React.MouseEvent<HTMLButtonElement>,
) => void;
export type SwitchClickEventHandler = SwitchChangeEventHandler;
export interface SwitchProps {
prefixCls?: string;
size?: SwitchSize;
className?: string;
rootClassName?: string;
checked?: boolean;
defaultChecked?: boolean;
onChange?: SwitchChangeEventHandler;
onClick?: SwitchClickEventHandler;
checkedChildren?: React.ReactNode;
unCheckedChildren?: React.ReactNode;
disabled?: boolean;
loading?: boolean;
autoFocus?: boolean;
style?: React.CSSProperties;
title?: string;
tabIndex?: number;
id?: string;
}
type CompoundedComponent = React.ForwardRefExoticComponent<
SwitchProps & React.RefAttributes<HTMLElement>
> & {
/** @internal */
__ANT_SWITCH: boolean;
};
const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
(
{
prefixCls: customizePrefixCls,
size: customizeSize,
disabled: customDisabled,
loading,
className,
rootClassName,
...props
},
ref,
) => {
warning(
'checked' in props || !('value' in props),
'Switch',
'`value` is not a valid prop, do you mean `checked`?',
);
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const size = React.useContext(SizeContext);
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);
const mergedDisabled = (customDisabled ?? disabled) || loading;
const prefixCls = getPrefixCls('switch', customizePrefixCls);
const loadingIcon = (
<div className={`${prefixCls}-handle`}>
{loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
</div>
);
// Style
const [wrapSSR, hashId] = useStyle(prefixCls);
const classes = classNames(
{
[`${prefixCls}-small`]: (customizeSize || size) === 'small',
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
rootClassName,
hashId,
);
return wrapSSR(
<Wave>
<RcSwitch
{...props}
prefixCls={prefixCls}
className={classes}
disabled={mergedDisabled}
ref={ref}
loadingIcon={loadingIcon}
/>
</Wave>,
);
},
) as CompoundedComponent;
Switch.__ANT_SWITCH = true;
if (process.env.NODE_ENV !== 'production') {
Switch.displayName = 'Switch';
}
export default Switch;