Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import * as React from 'react';
import cx from 'classnames';
import { FieldInputProps } from '../../types';
/**
* The Text Input Component within a Bar.
*/
export interface IBarTextInputProps {
/** Passed down classname. */
className?: string;
/** Optional id indicator */
id?: string;
/** Input props from react-final-form */
input: FieldInputProps<HTMLElement>;
/** Make this expand fully */
isFullWidth?: boolean;
/** Button has a white outline and text, the background color is dependant on parent */
isReverse?: boolean;
/** Optional placeholder */
placeholder?: string;
}
export const BarTextInput: React.FC<IBarTextInputProps> = ({
className,
id,
isFullWidth,
isReverse = false,
input: { name, onBlur, onChange, onFocus, value },
placeholder,
}) => {
const combinedClass = cx({
'panda-bar-item': true,
'panda-bar-item-text-input': true,
'flex-align': true,
'flex-1': isFullWidth,
// Reverse style
'panda-bar-item-normal': !isReverse,
'panda-bar-item-reverse': isReverse,
'text-ellipsis': true,
// Custom classname
[className || '']: true,
});
return (
<input
autoComplete="off"
className={combinedClass}
id={id}
name={name}
onBlur={onBlur}
onChange={onChange}
onFocus={onFocus}
placeholder={placeholder}
type="text"
value={value}
/>
);
};
|