One SearchInput to rule them all

This commit is contained in:
Josh Perez 2021-05-10 20:50:43 -04:00 committed by GitHub
parent c62b5a900e
commit 24b7790829
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 266 additions and 232 deletions

View 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>
);
}
);