ant-design/components/input/Group.tsx

80 lines
2.2 KiB
TypeScript
Raw Normal View History

import * as React from 'react';
import { useContext, useMemo } from 'react';
import classNames from 'classnames';
import { devUseWarning } from '../_util/warning';
import { ConfigContext } from '../config-provider';
import type { FormItemStatusContextProps } from '../form/context';
import { FormItemInputContext } from '../form/context';
2022-06-22 15:18:03 +08:00
import useStyle from './style';
2016-03-31 17:46:35 +08:00
export interface GroupProps {
className?: string;
2016-08-22 17:26:14 +08:00
size?: 'large' | 'small' | 'default';
children?: React.ReactNode;
style?: React.CSSProperties;
2018-08-02 10:59:23 +08:00
onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
onFocus?: React.FocusEventHandler<HTMLSpanElement>;
onBlur?: React.FocusEventHandler<HTMLSpanElement>;
prefixCls?: string;
compact?: boolean;
}
const Group: React.FC<GroupProps> = (props) => {
const { getPrefixCls, direction } = useContext(ConfigContext);
const { prefixCls: customizePrefixCls, className } = props;
const prefixCls = getPrefixCls('input-group', customizePrefixCls);
const inputPrefixCls = getPrefixCls('input');
const [wrapSSR, hashId] = useStyle(inputPrefixCls);
const cls = classNames(
prefixCls,
{
[`${prefixCls}-lg`]: props.size === 'large',
[`${prefixCls}-sm`]: props.size === 'small',
[`${prefixCls}-compact`]: props.compact,
[`${prefixCls}-rtl`]: direction === 'rtl',
},
hashId,
className,
);
const formItemContext = useContext(FormItemInputContext);
const groupFormItemContext = useMemo<FormItemStatusContextProps>(
() => ({
...formItemContext,
isFormItemInput: false,
}),
[formItemContext],
);
if (process.env.NODE_ENV !== 'production') {
const warning = devUseWarning();
warning(
false,
'Input.Group',
'deprecated',
`'Input.Group' is deprecated. Please use 'Space.Compact' instead.`,
);
}
return wrapSSR(
<span
className={cls}
style={props.style}
onMouseEnter={props.onMouseEnter}
onMouseLeave={props.onMouseLeave}
onFocus={props.onFocus}
onBlur={props.onBlur}
>
<FormItemInputContext.Provider value={groupFormItemContext}>
{props.children}
</FormItemInputContext.Provider>
</span>,
);
};
2016-08-22 17:26:14 +08:00
export default Group;