74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
/* @flow */
|
|
|
|
import { FieldTextStateless as TextField } from '@atlaskit/field-text';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import React, { useCallback, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { getFieldValue } from '../../base/react';
|
|
import { isSpeakerStatsSearchDisabled } from '../functions';
|
|
|
|
const useStyles = makeStyles(() => {
|
|
return {
|
|
speakerStatsSearch: {
|
|
position: 'absolute',
|
|
right: '50px',
|
|
top: '-5px'
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of {@link SpeakerStatsSearch}.
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* The function to initiate the change in the speaker stats table.
|
|
*/
|
|
onSearch: Function,
|
|
|
|
};
|
|
|
|
/**
|
|
* React component for display an individual user's speaker stats.
|
|
*
|
|
* @returns {React$Element<any>}
|
|
*/
|
|
function SpeakerStatsSearch({ onSearch }: Props) {
|
|
const classes = useStyles();
|
|
const { t } = useTranslation();
|
|
const [ searchValue, setSearchValue ] = useState<string>('');
|
|
const onChange = useCallback((evt: Event) => {
|
|
const value = getFieldValue(evt);
|
|
|
|
setSearchValue(value);
|
|
|
|
onSearch && onSearch(value);
|
|
}, []);
|
|
const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
|
|
|
|
if (disableSpeakerStatsSearch) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className = { classes.speakerStatsSearch }>
|
|
<TextField
|
|
autoComplete = 'off'
|
|
autoFocus = { false }
|
|
compact = { true }
|
|
name = 'speakerStatsSearch'
|
|
onChange = { onChange }
|
|
placeholder = { t('speakerStats.search') }
|
|
shouldFitContainer = { false }
|
|
type = 'text'
|
|
value = { searchValue } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SpeakerStatsSearch;
|
|
|