test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 11:08:45 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

refactor: Input.Group use context hook (#34361)

Browse Source
This commit is contained in:
MadCcc 2022-03-08 15:09:02 +08:00 committed by GitHub
parent 8fe8df777e
commit 33ddc539df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/input/Group.tsx
View File

@ -1,6 +1,7 @@
import * as React from 'react';
import { useContext } from 'react';
import classNames from 'classnames';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
export interface GroupProps {
className?: string;
@ -15,35 +16,33 @@ export interface GroupProps {
compact?: boolean;
}
const Group: React.FC<GroupProps> = props => (
<ConfigConsumer>
{({ getPrefixCls, direction }: ConfigConsumerProps) => {
const { prefixCls: customizePrefixCls, className = '' } = props;
const prefixCls = getPrefixCls('input-group', customizePrefixCls);
const cls = classNames(
prefixCls,
{
[`${prefixCls}-lg`]: props.size === 'large',
[`${prefixCls}-sm`]: props.size === 'small',
[`${prefixCls}-compact`]: props.compact,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
return (
<span
className={cls}
style={props.style}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
onFocus={props.onFocus}
onBlur={props.onBlur}
>
{props.children}
</span>
);
}}
</ConfigConsumer>
);
const Group: React.FC<GroupProps> = props => {
const { getPrefixCls, direction } = useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className = '' } = props;
const prefixCls = getPrefixCls('input-group', customizePrefixCls);
const cls = classNames(
prefixCls,
{
[`${prefixCls}-lg`]: props.size === 'large',
[`${prefixCls}-sm`]: props.size === 'small',
[`${prefixCls}-compact`]: props.compact,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
className,
);
return (
<span
className={cls}
style={props.style}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
onFocus={props.onFocus}
onBlur={props.onBlur}
>
{props.children}
</span>
);
};
export default Group;