Justin Edmund
2d1af335c3
This PR implements: * Fade-in transitions when cells load in, making navigation and loading appear less janky. * When scrolling, skeleton reps show up before the actual ones load in. * Resetting filters will also reset any set inclusions or exclusions
49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import TableField from '~components/common/TableField'
|
|
import MentionTypeahead from '../MentionTypeahead'
|
|
import Typeahead from 'react-bootstrap-typeahead/types/core/Typeahead'
|
|
|
|
interface Props
|
|
extends React.DetailedHTMLProps<
|
|
React.InputHTMLAttributes<HTMLInputElement>,
|
|
HTMLInputElement
|
|
> {
|
|
label: string
|
|
description?: string
|
|
placeholder?: string
|
|
inclusions: MentionItem[]
|
|
exclusions: MentionItem[]
|
|
typeaheadRef: React.Ref<Typeahead>
|
|
onUpdate: (content: MentionItem[]) => void
|
|
}
|
|
|
|
const MentionTableField = ({
|
|
label,
|
|
description,
|
|
placeholder,
|
|
inclusions,
|
|
exclusions,
|
|
typeaheadRef,
|
|
...props
|
|
}: Props) => {
|
|
return (
|
|
<TableField
|
|
{...props}
|
|
name={props.name || ''}
|
|
description={description}
|
|
className="mention"
|
|
label={label}
|
|
>
|
|
<MentionTypeahead
|
|
ref={typeaheadRef}
|
|
label={label}
|
|
description={description}
|
|
placeholder={placeholder}
|
|
inclusions={inclusions}
|
|
exclusions={exclusions}
|
|
onUpdate={props.onUpdate}
|
|
/>
|
|
</TableField>
|
|
)
|
|
}
|
|
|
|
export default MentionTableField
|