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); export const GroupContext = React.createContext<CheckboxGroupContext | null>(null);
const CheckboxGroup: React.FC<CheckboxGroupProps> = ({ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGroupProps> = (
defaultValue, {
children, defaultValue,
options = [], children,
prefixCls: customizePrefixCls, options = [],
className, prefixCls: customizePrefixCls,
style, className,
onChange, style,
...restProps onChange,
}) => { ...restProps
},
ref,
) => {
const { getPrefixCls, direction } = React.useContext(ConfigContext); const { getPrefixCls, direction } = React.useContext(ConfigContext);
const [value, setValue] = React.useState<CheckboxValueType[]>( const [value, setValue] = React.useState<CheckboxValueType[]>(
@ -147,10 +150,12 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
className, className,
); );
return ( return (
<div className={classString} style={style} {...domProps}> <div className={classString} style={style} {...domProps} ref={ref}>
<GroupContext.Provider value={context}>{children}</GroupContext.Provider> <GroupContext.Provider value={context}>{children}</GroupContext.Provider>
</div> </div>
); );
}; };
const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(InternalCheckboxGroup);
export default React.memo(CheckboxGroup); 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'); wrapper.find('.ant-checkbox-input').at(1).simulate('change');
expect(onChange).not.toHaveBeenCalled(); expect(onChange).not.toHaveBeenCalled();
}); });
it('should get div ref', () => {
mount(
<Checkbox.Group
options={['Apple', 'Pear', 'Orange']}
ref={node => {
expect(node.nodeName).toBe('DIV');
}}
/>,
);
});
}); });