mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: add forwardRef to CheckBoxGroup for v3 compatibility (#30039)

Browse Source 
* fix: add forwardRef to CheckBoxGroup for v3 compatibility

* tests: add CheckboxGroup forwardRef test
This commit is contained in:
wangao 2021-04-08 14:36:50 +08:00 committed by GitHub
parent aa9fac49f7
commit bee77c3362
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/checkbox/Group.tsx
View File

@ -41,16 +41,19 @@ export interface CheckboxGroupContext {
export const GroupContext = React.createContext<CheckboxGroupContext | null>(null);
const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
defaultValue,
children,
options = [],
prefixCls: customizePrefixCls,
className,
style,
onChange,
...restProps
}) => {
const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGroupProps> = (
{
defaultValue,
children,
options = [],
prefixCls: customizePrefixCls,
className,
style,
onChange,
...restProps
},
ref,
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const [value, setValue] = React.useState<CheckboxValueType[]>(
@ -147,10 +150,12 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
className,
);
return (
<div className={classString} style={style} {...domProps}>
<div className={classString} style={style} {...domProps} ref={ref}>
<GroupContext.Provider value={context}>{children}</GroupContext.Provider>
</div>
);
};
const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(InternalCheckboxGroup);
export default React.memo(CheckboxGroup);

11
components/checkbox/__tests__/group.test.js
View File

@ -202,4 +202,15 @@ describe('CheckboxGroup', () => {
wrapper.find('.ant-checkbox-input').at(1).simulate('change');
expect(onChange).not.toHaveBeenCalled();
});
it('should get div ref', () => {
mount(
<Checkbox.Group
options={['Apple', 'Pear', 'Orange']}
ref={node => {
expect(node.nodeName).toBe('DIV');
}}
/>,
);
});
});