One SearchInput to rule them all
This commit is contained in:
parent
c62b5a900e
commit
24b7790829
15 changed files with 266 additions and 232 deletions
48
ts/components/SearchInput.tsx
Normal file
48
ts/components/SearchInput.tsx
Normal file
|
@ -0,0 +1,48 @@
|
|||
// 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>
|
||||
);
|
||||
}
|
||||
);
|
Loading…
Add table
Add a link
Reference in a new issue