49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
|
// Copyright 2021 Signal Messenger, LLC
|
||
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||
|
|
|
||
|
|
import React, { ChangeEvent, KeyboardEvent, forwardRef } from 'react';
|
||
|
|
import { getClassNamesFor } from '../util/getClassNamesFor';
|
||
|
|
|
||
|
|
export type PropTypes = {
|
||
|
|
readonly disabled?: boolean;
|
||
|
|
readonly moduleClassName?: string;
|
||
|
|
readonly onChange: (ev: ChangeEvent<HTMLInputElement>) => unknown;
|
||
|
|
readonly onKeyDown?: (ev: KeyboardEvent<HTMLInputElement>) => unknown;
|
||
|
|
readonly placeholder: string;
|
||
|
|
readonly value: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const BASE_CLASS_NAME = 'module-SearchInput';
|
||
|
|
|
||
|
|
export const SearchInput = forwardRef<HTMLInputElement, PropTypes>(
|
||
|
|
(
|
||
|
|
{
|
||
|
|
disabled = false,
|
||
|
|
moduleClassName,
|
||
|
|
onChange,
|
||
|
|
onKeyDown,
|
||
|
|
placeholder,
|
||
|
|
value,
|
||
|
|
},
|
||
|
|
ref
|
||
|
|
) => {
|
||
|
|
const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
|
||
|
|
return (
|
||
|
|
<div className={getClassName('__container')}>
|
||
|
|
<i className={getClassName('__icon')} />
|
||
|
|
<input
|
||
|
|
className={getClassName('__input')}
|
||
|
|
dir="auto"
|
||
|
|
disabled={disabled}
|
||
|
|
onChange={onChange}
|
||
|
|
onKeyDown={onKeyDown}
|
||
|
|
placeholder={placeholder}
|
||
|
|
ref={ref}
|
||
|
|
type="text"
|
||
|
|
value={value}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|