Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

chore(Chat): move to functional component #2366

Merged
merged 11 commits into from
Feb 18, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Feb 17, 2020

BREAKING CHANGES

As in other components that are moved functional we limited sets of props that are passed to styles functions.

Chat
no props are passed
ChatItem
attached
contentPosition
ChatMessage
attached
badgePosition
mine
focused
hasBadge (replacement for badge)
hasReactionGroup (replacement for reactionGroup)

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Feb 18, 2020

Warnings
⚠️ 1 perf regressions detected

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.47 0.39 1.21:1 2000 948
🎯 Button.Fluent 0.11 0.15 0.73:1 1000 113
🔧 Checkbox.Fluent 0.8 0.3 2.67:1 1000 796
🔧 Dialog.Fluent 0.32 0.15 2.13:1 5000 1577
🔧 Dropdown.Fluent 3.53 0.36 9.81:1 1000 3528
🔧 Icon.Fluent 0.12 0.03 4:1 5000 594
🦄 Image.Fluent 0.05 0.08 0.63:1 5000 230
🔧 Slider.Fluent 1.42 0.3 4.73:1 1000 1417
🔧 Text.Fluent 0.06 0.02 3:1 5000 281
🦄 Tooltip.Fluent 0.09 17.76 0.01:1 5000 440

🔧 Needs work     🎯 On target     🦄 Amazing

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio
ChatMinimalPerf.default 412 1650 0.25:1
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 127 107 1.19:1
TreeWith60ListItems.default 254 220 1.15:1
IconMinimalPerf.default 298 267 1.12:1
RefMinimalPerf.default 174 156 1.12:1
LayoutMinimalPerf.default 524 478 1.1:1
Text.Fluent 281 256 1.1:1
CarouselMinimalPerf.default 1982 1855 1.07:1
HeaderMinimalPerf.default 439 414 1.06:1
HierarchicalTreeMinimalPerf.default 832 784 1.06:1
ListMinimalPerf.default 323 305 1.06:1
TextMinimalPerf.default 258 244 1.06:1
TooltipMinimalPerf.default 650 615 1.06:1
TreeMinimalPerf.default 889 842 1.06:1
EmbedMinimalPerf.default 6401 6097 1.05:1
StatusMinimalPerf.default 239 227 1.05:1
Dropdown.Fluent 3528 3350 1.05:1
DialogMinimalPerf.default 1670 1612 1.04:1
HeaderSlotsPerf.default 1280 1234 1.04:1
AttachmentSlotsPerf.default 3442 3349 1.03:1
SplitButtonMinimalPerf.default 11439 11140 1.03:1
Button.Fluent 113 110 1.03:1
ImageMinimalPerf.default 226 222 1.02:1
MenuMinimalPerf.default 1936 1897 1.02:1
PopupMinimalPerf.default 340 332 1.02:1
ProviderMinimalPerf.default 555 544 1.02:1
Avatar.Fluent 948 928 1.02:1
Checkbox.Fluent 796 778 1.02:1
Slider.Fluent 1417 1396 1.02:1
BoxMinimalPerf.default 227 224 1.01:1
DropdownManyItemsPerf.default 430 425 1.01:1
FlexMinimalPerf.default 340 336 1.01:1
FormMinimalPerf.default 749 742 1.01:1
ItemLayoutMinimalPerf.default 1706 1694 1.01:1
MenuButtonMinimalPerf.default 1502 1485 1.01:1
SegmentMinimalPerf.default 1247 1230 1.01:1
TableMinimalPerf.default 562 554 1.01:1
ToolbarMinimalPerf.default 708 703 1.01:1
VideoMinimalPerf.default 686 682 1.01:1
Icon.Fluent 594 591 1.01:1
Tooltip.Fluent 440 436 1.01:1
AvatarMinimalPerf.default 513 511 1:1
ButtonSlotsPerf.default 587 586 1:1
ListCommonPerf.default 732 735 1:1
PortalMinimalPerf.default 221 220 1:1
Image.Fluent 230 230 1:1
AnimationMinimalPerf.default 471 477 0.99:1
DividerMinimalPerf.default 872 878 0.99:1
InputMinimalPerf.default 889 898 0.99:1
RadioGroupMinimalPerf.default 393 396 0.99:1
CustomToolbarPrototype.default 3310 3353 0.99:1
CheckboxMinimalPerf.default 3564 3628 0.98:1
LabelMinimalPerf.default 828 844 0.98:1
LoaderMinimalPerf.default 2367 2406 0.98:1
ProviderMergeThemesPerf.default 1077 1103 0.98:1
AttachmentMinimalPerf.default 883 907 0.97:1
TextAreaMinimalPerf.default 2866 2947 0.97:1
Dialog.Fluent 1577 1622 0.97:1
ReactionMinimalPerf.default 2469 2563 0.96:1
DropdownMinimalPerf.default 3372 3537 0.95:1
AlertMinimalPerf.default 547 585 0.94:1
SliderMinimalPerf.default 1370 1460 0.94:1
AccordionMinimalPerf.default 187 202 0.93:1
ChatWithPopoverPerf.default 500 540 0.93:1
GridMinimalPerf.default 779 840 0.93:1
ListNestedPerf.default 696 746 0.93:1
ListWith60ListItems.default 170 213 0.8:1
ChatDuplicateMessagesPerf.default 340 516 0.66:1

Generated by 🚫 dangerJS

}

menuRef = React.createRef<HTMLElement>()
export type ChatMessageStylesProps = Pick<
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's good that we have these typings now on the component level, but let's make sure that we move the others too :)

handleFocus = (e: React.SyntheticEvent) => {
this.updateActionsMenuPosition()
const handleFocus = (e: React.SyntheticEvent) => {
if (updateActionsMenuPosition.current) updateActionsMenuPosition.current()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_.invoke(updateActionsMenuPosition, 'current')?

}

handleMessageRef = (node: HTMLElement) => this.setState({ messageNode: node })
const handleMouseEnter = (e: React.SyntheticEvent) => {
if (updateActionsMenuPosition.current) updateActionsMenuPosition.current()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done 👍


/** Shorthand array of the items inside the chat. */
items?: ShorthandCollection<ChatItemProps>
}

class Chat extends UIComponent<WithAsProp<ChatProps>, any> {
static displayName = 'Chat'
export type ChatStylesProps = {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeeey!

? children
: _.map(items, item =>
ChatItem.create(item, {
defaultProps: () => ({ className: Chat.slotClassNames.item }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we by convention send here resolvedStyles.item? I hope not, but still, thought I'd ask

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed offline: let's avoid changes there and keep previous behavior.

const ElementType = getElementType(props)
const unhandledProps = getUnhandledProps(ChatMessage.handledProps, props)

const badgeElement = Label.create(badge, {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another example that we were missing getA11Props :(

@layershifter layershifter merged commit f7a5590 into master Feb 18, 2020
@layershifter layershifter deleted the chore/chat-to-hooks branch February 18, 2020 16:24
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants