mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 17:57:26 +03:00
Add missing ref to IconInput
This commit is contained in:
parent
2b14c49c80
commit
3be5126e2d
1 changed files with 7 additions and 5 deletions
|
@ -2,25 +2,27 @@ import type { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import type { FC } from 'react';
|
import type { FC } from 'react';
|
||||||
import { useRef } from 'react';
|
|
||||||
import type { InputProps } from 'reactstrap';
|
import type { InputProps } from 'reactstrap';
|
||||||
import { Input } from 'reactstrap';
|
import { Input } from 'reactstrap';
|
||||||
|
import { useElementRef } from './helpers/hooks';
|
||||||
import './IconInput.scss';
|
import './IconInput.scss';
|
||||||
|
|
||||||
type IconInputProps = InputProps & { icon: IconProp };
|
type IconInputProps = InputProps & {
|
||||||
|
icon: IconProp;
|
||||||
|
};
|
||||||
|
|
||||||
export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => {
|
export const IconInput: FC<IconInputProps> = ({ icon, className, ...rest }) => {
|
||||||
const ref = useRef<{ input: HTMLInputElement }>();
|
const ref = useElementRef<HTMLInputElement>();
|
||||||
const classes = classNames('icon-input-container__input', className);
|
const classes = classNames('icon-input-container__input', className);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="icon-input-container">
|
<div className="icon-input-container">
|
||||||
<Input className={classes} {...rest} />
|
<Input className={classes} innerRef={ref} {...rest} />
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={icon}
|
icon={icon}
|
||||||
fixedWidth
|
fixedWidth
|
||||||
className="icon-input-container__icon"
|
className="icon-input-container__icon"
|
||||||
onClick={() => ref.current?.input.focus()}
|
onClick={() => ref.current?.focus()}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue