Changeset View
Changeset View
Standalone View
Standalone View
web/chat/mention-suggestion-tooltip.react.js
- This file was added.
// @flow | |||||
import classNames from 'classnames'; | |||||
import * as React from 'react'; | |||||
import css from './mention-suggestion-tooltip.css'; | |||||
export type MentionSuggestionTooltipAction = { | |||||
+key: string, | |||||
+onClick: (SyntheticEvent<HTMLDivElement>) => void, | |||||
tomek: It's more convenient to use `mixed` as a return type. It allows passing any function instead of… | |||||
+actionButtonContent: React.Node, | |||||
}; | |||||
export type TooltipPosition = { | |||||
+top: number, | |||||
+left: number, | |||||
}; | |||||
export type MentionSuggestionTooltipProps = { | |||||
+actions: $ReadOnlyArray<MentionSuggestionTooltipAction>, | |||||
+tooltipPosition: TooltipPosition, | |||||
}; | |||||
function MentionSuggestionTooltip( | |||||
props: MentionSuggestionTooltipProps, | |||||
): React.Node { | |||||
const { actions, tooltipPosition } = props; | |||||
const suggestionsContainerClassNames = classNames({ | |||||
[css.suggestionsContainer]: true, | |||||
[css.suggestionsContainerOverflow]: actions.length > 6, | |||||
tomekUnsubmitted Done Inline ActionsCan't we use a simpler approach? We have max-height set so adding overflow: auto should work just fine. tomek: Can't we use a simpler approach? We have `max-height` set so adding `overflow: auto` should… | |||||
}); | |||||
const tooltipPositionStyle = React.useMemo( | |||||
() => ({ | |||||
position: 'absolute', | |||||
tomekUnsubmitted Done Inline ActionsWe can simply set this position in css file tomek: We can simply set this position in `css` file | |||||
top: tooltipPosition.top, | |||||
left: tooltipPosition.left, | |||||
}), | |||||
[tooltipPosition], | |||||
); | |||||
const tooltipButtons = React.useMemo(() => { | |||||
return actions.map(({ key, onClick, actionButtonContent }) => ( | |||||
<div key={key} onClick={onClick} className={css.suggestion}> | |||||
tomekUnsubmitted Done Inline ActionsIf we're setting onClick handler, we should avoid using div - we should try to use more semantic html. In this case button sounds appropriate. tomek: If we're setting `onClick` handler, we should avoid using `div` - we should try to use more… | |||||
przemekAuthorUnsubmitted Done Inline ActionsDone, but I had to add some styles to cancel out default button styles. przemek: Done, but I had to add some styles to cancel out default button styles. | |||||
@{actionButtonContent} | |||||
</div> | |||||
)); | |||||
}, [actions]); | |||||
if (!actions || actions.length === 0) { | |||||
return null; | |||||
} | |||||
return ( | |||||
<div | |||||
className={suggestionsContainerClassNames} | |||||
style={tooltipPositionStyle} | |||||
> | |||||
{tooltipButtons} | |||||
</div> | |||||
); | |||||
} | |||||
export default MentionSuggestionTooltip; |
It's more convenient to use mixed as a return type. It allows passing any function instead of just the void ones.