ant-design/components/switch/index.tsx

121 lines
3.0 KiB
TypeScript
Raw Normal View History

feat: prepend use-client directive for with Next.js App Router (#43573) * fix: prepend use-client directive for with Next.js App Router * Update components/affix/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/badge/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/divider/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * Update components/cascader/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/list/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/mentions/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/mentions/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/mentions/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/mentions/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/qrcode/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/spin/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/select/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/spin/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/spin/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/steps/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/time-picker/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/transfer/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/tree-select/index.tsx Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
2023-07-15 12:57:03 +08:00
'use client';
import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import classNames from 'classnames';
import RcSwitch from 'rc-switch';
import * as React from 'react';
import warning from '../_util/warning';
import Wave from '../_util/wave';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import useSize from '../config-provider/hooks/useSize';
import useStyle from './style';
2015-07-08 19:47:45 +08:00
export type SwitchSize = 'small' | 'default';
export type SwitchChangeEventHandler = (
checked: boolean,
event: React.MouseEvent<HTMLButtonElement>,
) => void;
export type SwitchClickEventHandler = SwitchChangeEventHandler;
2016-08-10 09:46:56 +08:00
export interface SwitchProps {
prefixCls?: string;
size?: SwitchSize;
2016-08-10 09:46:56 +08:00
className?: string;
rootClassName?: string;
2016-08-10 09:46:56 +08:00
checked?: boolean;
defaultChecked?: boolean;
onChange?: SwitchChangeEventHandler;
2019-07-06 22:16:17 +08:00
onClick?: SwitchClickEventHandler;
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;
title?: string;
merge featrue into master (#30636) * feat: add Table expandable fixed (#29959) * fix: Use flex gap of space (#30023) * fix: use flex gap when supported * test: update snapshot * refactor: Use single hooks * feat: Allow breadcrumb component in PageHeader (#30019) * Allow breadcrumb component in PageHeader * Allow breadcrumb component in PageHeader * Allow breadcrumb component in PageHeader * Rename variable rename var from _breadcrumbRender to breadcrumbRenderDomFromProps * feat: add onChange for Statistic.Countdown (#30265) * feat: add onChange for countdown * update the demo * feat(upload): add onDrop (#30319) * feat(upload): Add onDrop * Replace "if prop" logic with existential operator * Remove redundant conditional * feat(upload): itemRender add actions params (#30236) * feat(upload): itemRender add actions params * chore: optimize type definition * chore: update doc * chore: rename actions * chore: trigger ci * chore: rename method name of actions * feat: Add missing dutch translations (#30389) * feat: Add missing dutch translations * fix: Translate remaining english values * fix: Update snapshot for ui tests * test: increase code coverage to 100% (#30415) * test: fix Space code coverage * test: should use nl_BE locale for DatePicker * fix: Switch tabIndex type (#30416) * feat: updated Romanian internationalization (#30419) * feat: updated Romanian internationalization * fixed lint error * feat: Menu support accessibility & keyboard access (#30382) * chore: Use focus style * fix: prefixCls * fix: prefixCls * fix: inline tooltip * fix: inlineCollapse logic * fix: ts definition * test: Update snapshot * test: Update snapshot * fix: dropdown logic * test: Update snapshot * test: Fix some test case * bump rc-menu * test: More test case * fix test finder * test: fix test case * test: Update snapshot * test: Update snapshot * chore: Update ssr effect * test: Update ConfigProvider snapshot * test: Fix Table Filter test case * test: Fix table test case * chore: Update style * chore: beauti css * bump rc-menu * test: update snapshot * test: update snapshot * test: Fix menu test * test: Fix test case * test: Coverage * chore: clean up * bump rc-menu * ehance accessibility style * feat(radioGroup): support data-* and aria-* props (#30507) close #30501 * feat: Typography add italic type (#30458) * Typography增加斜体字支持 * update snapshot * 文档添加版本号 Co-authored-by: lidahao <lidahao@sisyphe.com.cn> * chore: alpha Menu fix merge (#30546) * chore: Update script * bump alpha version * chore: Update script desc * chore: bump rc-tabs & rc-mentions * chore: Adjust style * chore: 4.16.0-alpha.1 * test: Fix mention test case * fix: sider of layout width style * chore: bump 4.16.0-alpha.2 * fix: Tabs tabBarGutter should work as expected (#30545) close #30526 * feat: Table summary support sticky mode (#30631) * chore: Bump rc-table * feat: Patch summary fixed color * fix: style className * test: Update snapshot Co-authored-by: xrkffgg <xrkffgg@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: 二货机器人 <smith3816@gmail.com> Co-authored-by: gepd <guillermoepd@hotmail.com> Co-authored-by: appleshell <appleshell@outlook.com> Co-authored-by: Eric Bonow <ebonow@hotmail.com> Co-authored-by: xrkffgg <xrkffgg@vip.qq.com> Co-authored-by: Kermit <kermitlx@outlook.com> Co-authored-by: Lewis <lewisfidlers@gmail.com> Co-authored-by: afc163 <afc163@gmail.com> Co-authored-by: Ștefan Filip <stefy.filip@gmail.com> Co-authored-by: vldh <alwaysloseall@sina.com> Co-authored-by: lidahao <lidahao@sisyphe.com.cn>
2021-05-24 16:24:00 +08:00
tabIndex?: number;
id?: string;
2016-08-10 09:46:56 +08:00
}
type CompoundedComponent = React.ForwardRefExoticComponent<
SwitchProps & React.RefAttributes<HTMLElement>
> & {
/** @internal */
__ANT_SWITCH: boolean;
};
const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
size: customizeSize,
disabled: customDisabled,
loading,
className,
rootClassName,
style,
...restProps
} = props;
warning(
'checked' in props || !('value' in props),
'Switch',
'`value` is not a valid prop, do you mean `checked`?',
);
const { getPrefixCls, direction, switch: SWITCH } = React.useContext(ConfigContext);
// ===================== 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 mergedSize = useSize(customizeSize);
const classes = classNames(
SWITCH?.className,
{
[`${prefixCls}-small`]: mergedSize === 'small',
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
rootClassName,
hashId,
);
const mergedStyle: React.CSSProperties = { ...SWITCH?.style, ...style };
return wrapSSR(
<Wave>
<RcSwitch
{...restProps}
prefixCls={prefixCls}
className={classes}
style={mergedStyle}
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;