From 2d88871d8e7b89e092057c5e4c97edd9d7cdcf6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexandre=20K=C3=BChn?= Date: Thu, 18 Nov 2021 13:49:58 +0000 Subject: [PATCH] [IMP] mail,snailmail: replace component lifecycle method to hook MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In preparation to using OWL v2 in discuss code Task-2694189 closes odoo/odoo#80033 Related: odoo/enterprise#22354 Signed-off-by: Sébastien Theys (seb) --- .../src/components/activity/activity.js | 4 ++-- .../activity_mark_done_popover.js | 9 +++---- .../attachment_card/attachment_card.js | 3 +++ .../attachment_delete_confirm_dialog.js | 4 ++-- .../attachment_image/attachment_image.js | 3 +++ .../attachment_viewer/attachment_viewer.js | 15 +++++++----- .../autocomplete_input/autocomplete_input.js | 14 +++++++++-- .../src/components/chat_window/chat_window.js | 10 ++------ .../chat_window_hidden_menu.js | 15 +++++++----- .../static/src/components/chatter/chatter.js | 4 ++-- .../chatter_container/chatter_container.js | 12 ++++------ .../src/components/composer/composer.js | 12 ++++++---- .../composer_suggested_recipient.js | 7 ++++-- .../composer_suggested_recipient_list.js | 4 ++-- .../composer_suggestion.js | 4 ++-- .../composer_text_input.js | 4 ++-- .../static/src/components/dialog/dialog.js | 20 +++++++--------- .../dialog_manager/dialog_manager.js | 14 +++++++++-- .../static/src/components/discuss/discuss.js | 9 ++++--- .../discuss_sidebar/discuss_sidebar.js | 4 ++-- .../src/components/drop_zone/drop_zone.js | 4 ++-- .../emojis_popover/emojis_popover.js | 6 ++--- .../components/file_uploader/file_uploader.js | 4 ++-- .../components/follow_button/follow_button.js | 5 ++-- .../follower_list_menu/follower_list_menu.js | 13 ++++++---- .../static/src/components/message/message.js | 24 +++++-------------- .../message_action_list.js | 3 +++ .../components/message_list/message_list.js | 5 ++-- .../messaging_menu/messaging_menu.js | 24 ++++++------------- .../notification_group/notification_group.js | 4 ++-- .../notification_list/notification_list.js | 11 ++++++++- .../components/popover_view/popover_view.js | 3 +++ .../rtc_configuration_menu.js | 5 ++-- .../thread_needaction_preview.js | 4 ++-- .../thread_preview/thread_preview.js | 4 ++-- .../static/src/components/message/message.js | 4 ++-- .../snailmail_error_dialog.js | 4 ++-- 37 files changed, 163 insertions(+), 135 deletions(-) diff --git a/addons/mail/static/src/components/activity/activity.js b/addons/mail/static/src/components/activity/activity.js index fe08581ea4d..73e7bfc8586 100644 --- a/addons/mail/static/src/components/activity/activity.js +++ b/addons/mail/static/src/components/activity/activity.js @@ -16,8 +16,8 @@ export class Activity extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.state = useState({ areDetailsVisible: false, }); diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js index 21bc13b79b1..8ceb89f1173 100644 --- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js +++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js @@ -3,23 +3,24 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; -const { useRef } = owl.hooks; +const { onMounted, useRef } = owl.hooks; export class ActivityMarkDonePopover extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this._feedbackTextareaRef = useRef('feedbackTextarea'); + onMounted(() => this._mounted()); } //-------------------------------------------------------------------------- // Public //-------------------------------------------------------------------------- - mounted() { + _mounted() { this._feedbackTextareaRef.el.focus(); if (this.activity.feedbackBackup) { this._feedbackTextareaRef.el.value = this.activity.feedbackBackup; diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.js b/addons/mail/static/src/components/attachment_card/attachment_card.js index d1606ea2c46..18429988405 100644 --- a/addons/mail/static/src/components/attachment_card/attachment_card.js +++ b/addons/mail/static/src/components/attachment_card/attachment_card.js @@ -6,6 +6,9 @@ const { Component } = owl; export class AttachmentCard extends Component { + /** + * @override + */ setup() { super.setup(); useComponentToModel({ fieldName: 'component', modelName: 'mail.attachment_card', propNameAsRecordLocalId: 'attachmentCardLocalId' }); diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js index d892416cd46..1f498c95bc5 100644 --- a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js +++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js @@ -12,8 +12,8 @@ export class AttachmentDeleteConfirmDialog extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); // to manually trigger the dialog close event this._dialogRef = useRef('dialog'); } diff --git a/addons/mail/static/src/components/attachment_image/attachment_image.js b/addons/mail/static/src/components/attachment_image/attachment_image.js index cb06feccbfd..164d7de8900 100644 --- a/addons/mail/static/src/components/attachment_image/attachment_image.js +++ b/addons/mail/static/src/components/attachment_image/attachment_image.js @@ -6,6 +6,9 @@ const { Component } = owl; export class AttachmentImage extends Component { + /** + * @override + */ setup() { super.setup(); useComponentToModel({ fieldName: 'component', modelName: 'mail.attachment_image', propNameAsRecordLocalId: 'attachmentImageLocalId' }); diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js index 51f8addc35d..1fa20790343 100644 --- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js +++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js @@ -7,7 +7,7 @@ import { link } from '@mail/model/model_field_command'; import { hidePDFJSButtons } from '@web/legacy/js/libs/pdfjs'; const { Component } = owl; -const { useRef } = owl.hooks; +const { onMounted, onPatched, onWillUnmount, useRef } = owl.hooks; const MIN_SCALE = 0.5; const SCROLL_ZOOM_STEP = 0.1; @@ -18,8 +18,8 @@ export class AttachmentViewer extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.MIN_SCALE = MIN_SCALE; /** * Used to ensure that the ref is always up to date, which seems to be needed if the element @@ -51,9 +51,12 @@ export class AttachmentViewer extends Component { */ this._translate = { x: 0, y: 0, dx: 0, dy: 0 }; this._onClickGlobal = this._onClickGlobal.bind(this); + onMounted(() => this._mounted()); + onPatched(() => this._patched()); + onWillUnmount(() => this._willUnmount()); } - mounted() { + _mounted() { this.el.focus(); this._handleImageLoad(); this._hideUnwantedPdfJsButtons(); @@ -63,12 +66,12 @@ export class AttachmentViewer extends Component { /** * When a new image is displayed, show a spinner until it is loaded. */ - patched() { + _patched() { this._handleImageLoad(); this._hideUnwantedPdfJsButtons(); } - willUnmount() { + _willUnmount() { document.removeEventListener('click', this._onClickGlobal); } diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js index 9970e4e9290..c59055a7d62 100644 --- a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js +++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js @@ -3,10 +3,20 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; +const { onMounted, onWillUnmount } = owl.hooks; export class AutocompleteInput extends Component { - mounted() { + /** + * @override + */ + setup() { + super.setup(); + onMounted(() => this._mounted()); + onWillUnmount(() => this._willUnmount()); + } + + _mounted() { if (this.props.isFocusOnMount) { this.el.focus(); } @@ -32,7 +42,7 @@ export class AutocompleteInput extends Component { }; } - willUnmount() { + _willUnmount() { $(this.el).autocomplete('destroy'); } diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js index dff6886f879..5b4dc311070 100644 --- a/addons/mail/static/src/components/chat_window/chat_window.js +++ b/addons/mail/static/src/components/chat_window/chat_window.js @@ -12,8 +12,8 @@ export class ChatWindow extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); useUpdate({ func: () => this._update() }); /** * Reference of the header of the chat window. @@ -34,14 +34,8 @@ export class ChatWindow extends Component { // the following are passed as props to children this._onAutocompleteSelect = this._onAutocompleteSelect.bind(this); this._onAutocompleteSource = this._onAutocompleteSource.bind(this); - this._constructor(...args); } - /** - * Allows patching constructor. - */ - _constructor() {} - //-------------------------------------------------------------------------- // Public //-------------------------------------------------------------------------- diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js index f75e19b5a89..713d63d3357 100644 --- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js +++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js @@ -3,15 +3,15 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; -const { useRef } = owl.hooks; +const { onMounted, onPatched, onWillUnmount, useRef } = owl.hooks; export class ChatWindowHiddenMenu extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); /** * Reference of the dropup list. Useful to auto-set max height based on @@ -22,18 +22,21 @@ export class ChatWindowHiddenMenu extends Component { * The intent of the toggle button depends on the last rendered state. */ this._wasMenuOpen; + onMounted(() => this._mounted()); + onPatched(() => this._patched()); + onWillUnmount(() => this._willUnmount()); } - mounted() { + _mounted() { this._apply(); document.addEventListener('click', this._onClickCaptureGlobal, true); } - patched() { + _patched() { this._apply(); } - willUnmount() { + _willUnmount() { document.removeEventListener('click', this._onClickCaptureGlobal, true); } diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js index b035c2fc803..179fdff588a 100644 --- a/addons/mail/static/src/components/chatter/chatter.js +++ b/addons/mail/static/src/components/chatter/chatter.js @@ -12,8 +12,8 @@ export class Chatter extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); useUpdate({ func: () => this._update() }); useRefToModel({ fieldName: 'threadRef', modelName: 'mail.chatter', propNameAsRecordLocalId: 'chatterLocalId', refName: 'thread' }); /** diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.js b/addons/mail/static/src/components/chatter_container/chatter_container.js index 3dfba425401..56bc9034e7e 100644 --- a/addons/mail/static/src/components/chatter_container/chatter_container.js +++ b/addons/mail/static/src/components/chatter_container/chatter_container.js @@ -4,6 +4,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; import { clear } from '@mail/model/model_field_command'; const { Component } = owl; +const { onWillUpdateProps } = owl.hooks; const getChatterNextTemporaryId = (function () { let tmpId = 0; @@ -26,19 +27,16 @@ export class ChatterContainer extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.chatter = undefined; this.chatterId = getChatterNextTemporaryId(); this._insertFromProps(this.props); + onWillUpdateProps(nextProps => this._willUpdateProps(nextProps)); } - /** - * @override - */ - willUpdateProps(nextProps) { + _willUpdateProps(nextProps) { this._insertFromProps(nextProps); - return super.willUpdateProps(...arguments); } /** diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js index 150bbd9cb97..a11ead6b50f 100644 --- a/addons/mail/static/src/components/composer/composer.js +++ b/addons/mail/static/src/components/composer/composer.js @@ -8,15 +8,15 @@ import { } from '@mail/utils/utils'; const { Component } = owl; -const { useRef } = owl.hooks; +const { onMounted, onWillUnmount, useRef } = owl.hooks; export class Composer extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.isDropZoneVisible = useDragVisibleDropZone(); /** * Reference of the emoji popover. Useful to include emoji popover as @@ -34,13 +34,15 @@ export class Composer extends Component { */ this._textInputRef = useRef('textInput'); this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); + onMounted(() => this._mounted()); + onWillUnmount(() => this._willUnmount()); } - mounted() { + _mounted() { document.addEventListener('click', this._onClickCaptureGlobal, true); } - willUnmount() { + _willUnmount() { document.removeEventListener('click', this._onClickCaptureGlobal, true); } diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js index b2c8ad3182c..7bafabb0174 100644 --- a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js +++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js @@ -22,8 +22,11 @@ class FormViewDialogComponentAdapter extends ComponentAdapter { export class ComposerSuggestedRecipient extends Component { - constructor(...args) { - super(...args); + /** + * @override + */ + setup() { + super.setup(); this.id = _.uniqueId('o_ComposerSuggestedRecipient_'); useUpdate({ func: () => this._update() }); /** diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js index f8258eaa7aa..8242f08d8ea 100644 --- a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js +++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js @@ -10,8 +10,8 @@ export class ComposerSuggestedRecipientList extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.state = useState({ hasShowMoreButton: false, }); diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js index 3fa7ce8a840..3885a39cf97 100644 --- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js @@ -11,8 +11,8 @@ export class ComposerSuggestion extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); useUpdate({ func: () => this._update() }); } diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.js b/addons/mail/static/src/components/composer_text_input/composer_text_input.js index 82af46ba98d..32c31f7a226 100644 --- a/addons/mail/static/src/components/composer_text_input/composer_text_input.js +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.js @@ -12,8 +12,8 @@ export class ComposerTextInput extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); /** * Updates the composer text input content when composer is mounted * as textarea content can't be changed from the DOM. diff --git a/addons/mail/static/src/components/dialog/dialog.js b/addons/mail/static/src/components/dialog/dialog.js index bcc0331b905..eb662f2bb3d 100644 --- a/addons/mail/static/src/components/dialog/dialog.js +++ b/addons/mail/static/src/components/dialog/dialog.js @@ -3,35 +3,31 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; -const { useRef } = owl.hooks; +const { onMounted, onWillUnmount, useRef } = owl.hooks; export class Dialog extends Component { /** - * @param {...any} args + * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); /** * Reference to the component used inside this dialog. */ this._componentRef = useRef('component'); this._onClickGlobal = this._onClickGlobal.bind(this); this._onKeydownDocument = this._onKeydownDocument.bind(this); - this._constructor(); + onMounted(() => this._mounted()); + onWillUnmount(() => this._willUnmount()); } - /** - * Allows patching constructor. - */ - _constructor() {} - - mounted() { + _mounted() { document.addEventListener('click', this._onClickGlobal, true); document.addEventListener('keydown', this._onKeydownDocument); } - willUnmount() { + _willUnmount() { document.removeEventListener('click', this._onClickGlobal, true); document.removeEventListener('keydown', this._onKeydownDocument); } diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.js b/addons/mail/static/src/components/dialog_manager/dialog_manager.js index f59fd3758cd..858775e9673 100644 --- a/addons/mail/static/src/components/dialog_manager/dialog_manager.js +++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.js @@ -3,14 +3,24 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; +const { onMounted, onPatched } = owl.hooks; export class DialogManager extends Component { - mounted() { + /** + * @override + */ + setup() { + super.setup(); + onMounted(() => this._mounted()); + onPatched(() => this._patched()); + } + + _mounted() { this._checkDialogOpen(); } - patched() { + _patched() { this._checkDialogOpen(); } diff --git a/addons/mail/static/src/components/discuss/discuss.js b/addons/mail/static/src/components/discuss/discuss.js index 964b3376306..67ce61473cd 100644 --- a/addons/mail/static/src/components/discuss/discuss.js +++ b/addons/mail/static/src/components/discuss/discuss.js @@ -5,18 +5,21 @@ import { link, unlink } from '@mail/model/model_field_command'; import { useUpdate } from '@mail/component_hooks/use_update/use_update'; const { Component } = owl; +const { onWillUnmount } = owl.hooks; export class Discuss extends Component { + /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this._updateLocalStoreProps(); // bind since passed as props this._onMobileAddItemHeaderInputSelect = this._onMobileAddItemHeaderInputSelect.bind(this); this._onMobileAddItemHeaderInputSource = this._onMobileAddItemHeaderInputSource.bind(this); useUpdate({ func: () => this._update() }); + onWillUnmount(() => this._willUnmount()); } _update() { @@ -42,7 +45,7 @@ export class Discuss extends Component { this._updateLocalStoreProps(); } - willUnmount() { + _willUnmount() { if (this.discuss) { this.discuss.close(); } diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js index bc6e35de673..d953e0c9eb8 100644 --- a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js +++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js @@ -12,8 +12,8 @@ export class DiscussSidebar extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); useUpdate({ func: () => this._update() }); useRefToModel({ fieldName: 'startAMeetingButtonRef', modelName: 'mail.discuss', propNameAsRecordLocalId: 'localId', refName: 'startAMeetingButton' }); /** diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.js b/addons/mail/static/src/components/drop_zone/drop_zone.js index 8c76b414509..94135e529ea 100644 --- a/addons/mail/static/src/components/drop_zone/drop_zone.js +++ b/addons/mail/static/src/components/drop_zone/drop_zone.js @@ -9,8 +9,8 @@ export class DropZone extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.state = useState({ /** * Determine whether the user is dragging files over the dropzone. diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.js b/addons/mail/static/src/components/emojis_popover/emojis_popover.js index 7246a9e1d7b..79af38495aa 100644 --- a/addons/mail/static/src/components/emojis_popover/emojis_popover.js +++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.js @@ -9,10 +9,10 @@ const { Component } = owl; export class EmojisPopover extends Component { /** - * @param {...any} args + * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.emojis = emojis; useUpdate({ func: () => this._update() }); } diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.js b/addons/mail/static/src/components/file_uploader/file_uploader.js index f092f1d4ff8..59426188a23 100644 --- a/addons/mail/static/src/components/file_uploader/file_uploader.js +++ b/addons/mail/static/src/components/file_uploader/file_uploader.js @@ -21,8 +21,8 @@ export class FileUploader extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this._fileInputRef = useRef('fileInput'); this._fileUploadId = _.uniqueId('o_FileUploader_fileupload'); } diff --git a/addons/mail/static/src/components/follow_button/follow_button.js b/addons/mail/static/src/components/follow_button/follow_button.js index 5bf06412a13..514548bc3b5 100644 --- a/addons/mail/static/src/components/follow_button/follow_button.js +++ b/addons/mail/static/src/components/follow_button/follow_button.js @@ -6,11 +6,12 @@ const { Component } = owl; const { useState } = owl.hooks; export class FollowButton extends Component { + /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.state = useState({ /** * Determine whether the unfollow button is highlighted or not. diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js index 9fe2a146f93..77fa78694ce 100644 --- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js +++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js @@ -3,14 +3,15 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; -const { useRef, useState } = owl.hooks; +const { onMounted, onWillUnmount, useRef, useState } = owl.hooks; export class FollowerListMenu extends Component { + /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); this.state = useState({ /** * Determine whether the dropdown is open or not. @@ -19,13 +20,15 @@ export class FollowerListMenu extends Component { }); this._dropdownRef = useRef('dropdown'); this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); + onMounted(() => this._mounted()); + onWillUnmount(() => this._willUnmount()); } - mounted() { + _mounted() { document.addEventListener('click', this._onClickCaptureGlobal, true); } - willUnmount() { + _willUnmount() { document.removeEventListener('click', this._onClickCaptureGlobal, true); } diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js index fffdee038bf..f7c82cb7aaf 100644 --- a/addons/mail/static/src/components/message/message.js +++ b/addons/mail/static/src/components/message/message.js @@ -10,7 +10,7 @@ import { format } from 'web.field_utils'; import { getLangDatetimeFormat } from 'web.time'; const { Component, useState } = owl; -const { useRef } = owl.hooks; +const { onWillUnmount, useRef } = owl.hooks; const READ_MORE = _lt("read more"); const READ_LESS = _lt("read less"); @@ -20,8 +20,9 @@ export class Message extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); + useComponentToModel({ fieldName: 'component', modelName: 'mail.message_view', propNameAsRecordLocalId: 'messageViewLocalId' }); this.state = useState({ /** * Determine whether the message is hovered. When message is hovered @@ -58,23 +59,10 @@ export class Message extends Component { * regular time. */ this._intervalId = undefined; - this._constructor(); + onWillUnmount(() => this._willUnmount()); } - /** - * Allows patching constructor. - */ - _constructor() {} - - /** - * @override - */ - setup() { - super.setup(); - useComponentToModel({ fieldName: 'component', modelName: 'mail.message_view', propNameAsRecordLocalId: 'messageViewLocalId' }); - } - - willUnmount() { + _willUnmount() { clearInterval(this._intervalId); } diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.js b/addons/mail/static/src/components/message_action_list/message_action_list.js index c6fbe7704bc..8af884be10c 100644 --- a/addons/mail/static/src/components/message_action_list/message_action_list.js +++ b/addons/mail/static/src/components/message_action_list/message_action_list.js @@ -7,6 +7,9 @@ const { Component } = owl; export class MessageActionList extends Component { + /** + * @override + */ setup() { super.setup(); useRefToModel({ fieldName: 'reactionPopoverRef', modelName: 'mail.message_action_list', propNameAsRecordLocalId: 'messageActionListLocalId', refName: 'reactionPopover' }); diff --git a/addons/mail/static/src/components/message_list/message_list.js b/addons/mail/static/src/components/message_list/message_list.js index 2bc3004fa0e..cb31eb96c39 100644 --- a/addons/mail/static/src/components/message_list/message_list.js +++ b/addons/mail/static/src/components/message_list/message_list.js @@ -5,7 +5,7 @@ import { useRenderedValues } from '@mail/component_hooks/use_rendered_values/use import { useUpdate } from '@mail/component_hooks/use_update/use_update'; const { Component } = owl; -const { useRef } = owl.hooks; +const { onWillPatch, useRef } = owl.hooks; export class MessageList extends Component { @@ -58,9 +58,10 @@ export class MessageList extends Component { // use onMounted/onPatched, and the calls from useRenderedValues must // happen first to save the values before useUpdate accesses them. useUpdate({ func: () => this._update() }); + onWillPatch(() => this._willPatch()); } - willPatch() { + _willPatch() { this._willPatchSnapshot = { scrollHeight: this._getScrollableElement().scrollHeight, scrollTop: this._getScrollableElement().scrollTop, diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.js b/addons/mail/static/src/components/messaging_menu/messaging_menu.js index 0d5629fcdd9..0dd15397783 100644 --- a/addons/mail/static/src/components/messaging_menu/messaging_menu.js +++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.js @@ -3,14 +3,15 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; +const { onMounted, onWillUnmount } = owl.hooks; export class MessagingMenu extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); /** * global JS generated ID for this component. Useful to provide a * custom class to autocomplete input, so that click in an autocomplete @@ -22,29 +23,18 @@ export class MessagingMenu extends Component { this._onMobileNewMessageInputSelect = this._onMobileNewMessageInputSelect.bind(this); this._onMobileNewMessageInputSource = this._onMobileNewMessageInputSource.bind(this); this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); - this._constructor(...args); - } - - /** - * Allows patching constructor. - */ - _constructor() {} - - /** - * @override - */ - setup() { // for now, the legacy env is needed for internal functions such as // `useModels` to work this.env = owl.Component.env; - super.setup(); + onMounted(() => this._mounted()); + onWillUnmount(() => this._willUnmount()); } - mounted() { + _mounted() { document.addEventListener('click', this._onClickCaptureGlobal, true); } - willUnmount() { + _willUnmount() { document.removeEventListener('click', this._onClickCaptureGlobal, true); } diff --git a/addons/mail/static/src/components/notification_group/notification_group.js b/addons/mail/static/src/components/notification_group/notification_group.js index 280c9dc5a33..f89b181c631 100644 --- a/addons/mail/static/src/components/notification_group/notification_group.js +++ b/addons/mail/static/src/components/notification_group/notification_group.js @@ -10,8 +10,8 @@ export class NotificationGroup extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); /** * Reference of the "mark as read" button. Useful to disable the * top-level click handler when clicking on this specific button. diff --git a/addons/mail/static/src/components/notification_list/notification_list.js b/addons/mail/static/src/components/notification_list/notification_list.js index 7a3d74f519f..f9bef68e092 100644 --- a/addons/mail/static/src/components/notification_list/notification_list.js +++ b/addons/mail/static/src/components/notification_list/notification_list.js @@ -3,10 +3,19 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; const { Component } = owl; +const { onMounted } = owl.hooks; export class NotificationList extends Component { - mounted() { + /** + * @override + */ + setup() { + super.setup(); + onMounted(() => this._mounted()); + } + + _mounted() { this._loadPreviews(); } diff --git a/addons/mail/static/src/components/popover_view/popover_view.js b/addons/mail/static/src/components/popover_view/popover_view.js index d099c8e8134..e8cc8a73634 100644 --- a/addons/mail/static/src/components/popover_view/popover_view.js +++ b/addons/mail/static/src/components/popover_view/popover_view.js @@ -9,6 +9,9 @@ const { Component } = owl; export class PopoverView extends Component { + /** + * @override + */ setup() { super.setup(); useComponentToModel({ fieldName: 'component', modelName: 'mail.popover_view', propNameAsRecordLocalId: 'popoverViewLocalId' }); diff --git a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js index a60761d4b0d..1a0179de1c1 100644 --- a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js +++ b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.js @@ -5,7 +5,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component'; import { browser } from "@web/core/browser/browser"; const { Component } = owl; -const { useState } = owl.hooks; +const { onWillStart, useState } = owl.hooks; export class RtcConfigurationMenu extends Component { @@ -17,9 +17,10 @@ export class RtcConfigurationMenu extends Component { this.state = useState({ userDevices: undefined, }); + onWillStart(() => this._willStart()); } - async willStart() { + async _willStart() { this.state.userDevices = await browser.navigator.mediaDevices.enumerateDevices(); } diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js index a5c657c8ee4..f5c56c89e87 100644 --- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js +++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js @@ -12,8 +12,8 @@ export class ThreadNeedactionPreview extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); /** * Reference of the "mark as read" button. Useful to disable the * top-level click handler when clicking on this specific button. diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.js b/addons/mail/static/src/components/thread_preview/thread_preview.js index 5e76f0e91e9..397921a1e0b 100644 --- a/addons/mail/static/src/components/thread_preview/thread_preview.js +++ b/addons/mail/static/src/components/thread_preview/thread_preview.js @@ -12,8 +12,8 @@ export class ThreadPreview extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); /** * Reference of the "mark as read" button. Useful to disable the * top-level click handler when clicking on this specific button. diff --git a/addons/snailmail/static/src/components/message/message.js b/addons/snailmail/static/src/components/message/message.js index 7e1590fb5d4..3246eb38aa7 100644 --- a/addons/snailmail/static/src/components/message/message.js +++ b/addons/snailmail/static/src/components/message/message.js @@ -10,8 +10,8 @@ patch(Message.prototype, 'snailmail/static/src/components/message/message.js', { /** * @override */ - _constructor() { - this._super(...arguments); + setup() { + this._super(); this.snailmailState = useState({ // Determine if the error dialog is displayed. hasDialog: false, diff --git a/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js b/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js index f95a38204a7..9d0c7a8371f 100644 --- a/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js +++ b/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js @@ -12,8 +12,8 @@ class SnailmailErrorDialog extends Component { /** * @override */ - constructor(...args) { - super(...args); + setup() { + super.setup(); // to manually trigger the dialog close event this._dialogRef = useRef('dialog'); }