Changeset View
Changeset View
Standalone View
Standalone View
web/chat/chat-input-bar.react.js
| Show First 20 Lines • Show All 45 Lines • ▼ Show 20 Lines | import { | ||||
| type PendingMultimediaUpload, | type PendingMultimediaUpload, | ||||
| } from '../input/input-state'; | } from '../input/input-state'; | ||||
| import LoadingIndicator from '../loading-indicator.react'; | import LoadingIndicator from '../loading-indicator.react'; | ||||
| import { allowedMimeTypeString } from '../media/file-utils'; | import { allowedMimeTypeString } from '../media/file-utils'; | ||||
| import Multimedia from '../media/multimedia.react'; | import Multimedia from '../media/multimedia.react'; | ||||
| import { useSelector } from '../redux/redux-utils'; | import { useSelector } from '../redux/redux-utils'; | ||||
| import { nonThreadCalendarQuery } from '../selectors/nav-selectors'; | import { nonThreadCalendarQuery } from '../selectors/nav-selectors'; | ||||
| import SWMansionIcon from '../SWMansionIcon.react'; | import SWMansionIcon from '../SWMansionIcon.react'; | ||||
| import { typeaheadRegex } from '../utils/typeahead-utils'; | import { webTypeaheadRegex } from '../utils/typeahead-utils'; | ||||
| import css from './chat-input-bar.css'; | import css from './chat-input-bar.css'; | ||||
| import TypeaheadTooltip from './typeahead-tooltip.react'; | import TypeaheadTooltip from './typeahead-tooltip.react'; | ||||
| type BaseProps = { | type BaseProps = { | ||||
| +threadInfo: ThreadInfo, | +threadInfo: ThreadInfo, | ||||
| +inputState: InputState, | +inputState: InputState, | ||||
| }; | }; | ||||
| type Props = { | type Props = { | ||||
| ...BaseProps, | ...BaseProps, | ||||
| // Redux state | // Redux state | ||||
| +viewerID: ?string, | +viewerID: ?string, | ||||
| ▲ Show 20 Lines • Show All 464 Lines • ▼ Show 20 Lines | const inputSliceEndingAtCursor = React.useMemo( | ||||
| props.inputState.draft.slice(0, props.inputState.textCursorPosition), | props.inputState.draft.slice(0, props.inputState.textCursorPosition), | ||||
| [props.inputState.draft, props.inputState.textCursorPosition], | [props.inputState.draft, props.inputState.textCursorPosition], | ||||
| ); | ); | ||||
| // we only try to match if there is end of text or whitespace after cursor | // we only try to match if there is end of text or whitespace after cursor | ||||
| const typeaheadRegexMatches = React.useMemo( | const typeaheadRegexMatches = React.useMemo( | ||||
| () => | () => | ||||
| inputSliceEndingAtCursor.length === props.inputState.draft.length || | inputSliceEndingAtCursor.length === props.inputState.draft.length || | ||||
| /\s/.test(props.inputState.draft[props.inputState.textCursorPosition]) | /\s/.test(props.inputState.draft[props.inputState.textCursorPosition]) | ||||
| ? inputSliceEndingAtCursor.match(typeaheadRegex) | ? inputSliceEndingAtCursor.match(webTypeaheadRegex) | ||||
| : null, | : null, | ||||
| [ | [ | ||||
| inputSliceEndingAtCursor, | inputSliceEndingAtCursor, | ||||
| props.inputState.textCursorPosition, | props.inputState.textCursorPosition, | ||||
| props.inputState.draft, | props.inputState.draft, | ||||
| ], | ], | ||||
| ); | ); | ||||
| Show All 33 Lines | |||||