diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index e630ecf9ec..d4d0d78179 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/src/components/checkbox/checkbox.tsx @@ -1,18 +1,17 @@ -import React, { forwardRef, useContext, useImperativeHandle } from 'react' +import classNames from 'classnames' import type { ReactNode } from 'react' +import React, { forwardRef, useContext, useImperativeHandle } from 'react' +import { devWarning } from '../../utils/dev-log' +import { isDev } from '../../utils/is-dev' import { NativeProps, withNativeProps } from '../../utils/native-props' -import classNames from 'classnames' -import { CheckboxGroupContext } from './group-context' import { usePropsValue } from '../../utils/use-props-value' import { mergeProps } from '../../utils/with-default-props' -import { devWarning } from '../../utils/dev-log' +import { useConfig } from '../config-provider' import { CheckIcon } from './check-icon' +import { CheckboxGroupContext } from './group-context' import { IndeterminateIcon } from './indeterminate-icon' -import { isDev } from '../../utils/is-dev' import { NativeInput } from './native-input' -const classPrefix = `adm-checkbox` - export type CheckboxValue = string | number export type CheckboxProps = { @@ -27,6 +26,7 @@ export type CheckboxProps = { icon?: (checked: boolean, indeterminate: boolean) => ReactNode children?: ReactNode onClick?: (event: React.MouseEvent) => void + prefixCls?: string } & NativeProps<'--icon-size' | '--font-size' | '--gap'> const defaultProps = { @@ -44,6 +44,8 @@ export const Checkbox = forwardRef((p, ref) => { const groupContext = useContext(CheckboxGroupContext) const props = mergeProps(defaultProps, p) + const { getPrefixCls } = useConfig() + const prefixCls = getPrefixCls('checkbox', props.prefixCls) let [checked, setChecked] = usePropsValue({ value: props.checked, @@ -96,14 +98,14 @@ export const Checkbox = forwardRef((p, ref) => { const renderIcon = () => { if (props.icon) { return ( -
+
{props.icon(checked, props.indeterminate)}
) } return ( -
+
{props.indeterminate ? : checked && }
) @@ -113,11 +115,11 @@ export const Checkbox = forwardRef((p, ref) => { props, ) diff --git a/src/components/checkbox/tests/checkbox.test.tsx b/src/components/checkbox/tests/checkbox.test.tsx index e950438506..f645108ee2 100644 --- a/src/components/checkbox/tests/checkbox.test.tsx +++ b/src/components/checkbox/tests/checkbox.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { fireEvent, render, testA11y, userEvent } from 'testing' import Checkbox from '../' +import ConfigProvider from '../../config-provider' import { CheckboxGroupProps } from '../group' const classPrefix = `adm-checkbox` @@ -141,4 +142,29 @@ describe('Checkbox.Group', () => { expect(inputs.item(1)).toBeChecked() expect(inputs.item(2)).toBeChecked() }) + + test('should apply custom prefixCls(ConfigProvider)', () => { + const { container } = render( + + + 苹果 + + + ) + expect(container.querySelector('.config-prefix-checkbox')).toBeTruthy() + }) + + test('should apply custom prefixCls(component)', () => { + const { container } = render( + + + + 苹果 + + + + ) + expect(container.querySelector('.component-prefix')).toBeTruthy() + expect(container.querySelector('.config-prefix-checkbox')).toBeFalsy() + }) })