diff options
author | 2023-05-29 06:37:07 +0530 | |
---|---|---|
committer | 2023-05-29 06:37:07 +0530 | |
commit | 05ddc542cc6a5a309d90350636cc1d2aee999c19 (patch) | |
tree | 33942d14edf172c1b8e4cae733b49b75ebf111b9 /src/components | |
parent | 6.3.0-nightly.13 [skip ci] (diff) | |
download | ferdium-app-05ddc542cc6a5a309d90350636cc1d2aee999c19.tar.gz ferdium-app-05ddc542cc6a5a309d90350636cc1d2aee999c19.tar.zst ferdium-app-05ddc542cc6a5a309d90350636cc1d2aee999c19.zip |
Update react-router-dom, react-tooltip & react-transition-group latest version (#1199)
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/layout/Sidebar.tsx | 34 | ||||
-rw-r--r-- | src/components/services/tabs/TabItem.tsx | 3 | ||||
-rw-r--r-- | src/components/settings/account/AccountDashboard.tsx | 9 | ||||
-rw-r--r-- | src/components/settings/services/ServiceItem.tsx | 20 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.tsx | 9 | ||||
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 26 |
6 files changed, 66 insertions, 35 deletions
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index fac424477..2b1e87023 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import ReactTooltip from 'react-tooltip'; | 2 | import { Tooltip as ReactTooltip } from 'react-tooltip'; |
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { | 5 | import { |
@@ -123,10 +123,6 @@ class Sidebar extends Component<IProps, IState> { | |||
123 | }; | 123 | }; |
124 | } | 124 | } |
125 | 125 | ||
126 | componentDidUpdate() { | ||
127 | ReactTooltip.rebuild(); | ||
128 | } | ||
129 | |||
130 | enableToolTip() { | 126 | enableToolTip() { |
131 | this.setState({ tooltipEnabled: true }); | 127 | this.setState({ tooltipEnabled: true }); |
132 | } | 128 | } |
@@ -232,7 +228,8 @@ class Sidebar extends Component<IProps, IState> { | |||
232 | type="button" | 228 | type="button" |
233 | onClick={() => openSettings({ path: 'recipes' })} | 229 | onClick={() => openSettings({ path: 'recipes' })} |
234 | className="sidebar__button sidebar__button--new-service" | 230 | className="sidebar__button sidebar__button--new-service" |
235 | data-tip={`${intl.formatMessage( | 231 | data-tooltip-id="tooltip-sidebar-button" |
232 | data-tooltip-content={`${intl.formatMessage( | ||
236 | messages.addNewService, | 233 | messages.addNewService, |
237 | )} (${addNewServiceShortcutKey(false)})`} | 234 | )} (${addNewServiceShortcutKey(false)})`} |
238 | > | 235 | > |
@@ -251,7 +248,8 @@ class Sidebar extends Component<IProps, IState> { | |||
251 | }); | 248 | }); |
252 | }} | 249 | }} |
253 | className="sidebar__button sidebar__button--split-mode-toggle" | 250 | className="sidebar__button sidebar__button--split-mode-toggle" |
254 | data-tip={`${intl.formatMessage( | 251 | data-tooltip-id="tooltip-sidebar-button" |
252 | data-tooltip-content={`${intl.formatMessage( | ||
255 | messages.splitModeToggle, | 253 | messages.splitModeToggle, |
256 | )} (${splitModeToggleShortcutKey(false)})`} | 254 | )} (${splitModeToggleShortcutKey(false)})`} |
257 | > | 255 | > |
@@ -268,7 +266,8 @@ class Sidebar extends Component<IProps, IState> { | |||
268 | className={`sidebar__button sidebar__button--workspaces ${ | 266 | className={`sidebar__button sidebar__button--workspaces ${ |
269 | isWorkspaceDrawerOpen ? 'is-active' : '' | 267 | isWorkspaceDrawerOpen ? 'is-active' : '' |
270 | }`} | 268 | }`} |
271 | data-tip={`${intl.formatMessage( | 269 | data-tooltip-id="tooltip-sidebar-button" |
270 | data-tooltip-content={`${intl.formatMessage( | ||
272 | workspaceToggleMessage, | 271 | workspaceToggleMessage, |
273 | )} (${workspaceToggleShortcutKey(false)})`} | 272 | )} (${workspaceToggleShortcutKey(false)})`} |
274 | > | 273 | > |
@@ -285,7 +284,8 @@ class Sidebar extends Component<IProps, IState> { | |||
285 | className={`sidebar__button sidebar__button--audio ${ | 284 | className={`sidebar__button sidebar__button--audio ${ |
286 | isAppMuted ? 'is-muted' : '' | 285 | isAppMuted ? 'is-muted' : '' |
287 | }`} | 286 | }`} |
288 | data-tip={`${intl.formatMessage( | 287 | data-tooltip-id="tooltip-sidebar-button" |
288 | data-tooltip-content={`${intl.formatMessage( | ||
289 | isAppMuted ? messages.unmute : messages.mute, | 289 | isAppMuted ? messages.unmute : messages.mute, |
290 | )} (${muteFerdiumShortcutKey(false)})`} | 290 | )} (${muteFerdiumShortcutKey(false)})`} |
291 | > | 291 | > |
@@ -303,7 +303,8 @@ class Sidebar extends Component<IProps, IState> { | |||
303 | className={`sidebar__button sidebar__button--todos ${ | 303 | className={`sidebar__button sidebar__button--todos ${ |
304 | todosStore.isTodosPanelVisible ? 'is-active' : '' | 304 | todosStore.isTodosPanelVisible ? 'is-active' : '' |
305 | }`} | 305 | }`} |
306 | data-tip={`${intl.formatMessage( | 306 | data-tooltip-id="tooltip-sidebar-button" |
307 | data-tooltip-content={`${intl.formatMessage( | ||
307 | todosToggleMessage, | 308 | todosToggleMessage, |
308 | )} (${todosToggleShortcutKey(false)})`} | 309 | )} (${todosToggleShortcutKey(false)})`} |
309 | > | 310 | > |
@@ -322,7 +323,8 @@ class Sidebar extends Component<IProps, IState> { | |||
322 | }, | 323 | }, |
323 | }); | 324 | }); |
324 | }} | 325 | }} |
325 | data-tip={`${intl.formatMessage( | 326 | data-tooltip-id="tooltip-sidebar-button" |
327 | data-tooltip-content={`${intl.formatMessage( | ||
326 | messages.lockFerdium, | 328 | messages.lockFerdium, |
327 | )} (${lockFerdiumShortcutKey(false)})`} | 329 | )} (${lockFerdiumShortcutKey(false)})`} |
328 | > | 330 | > |
@@ -331,14 +333,20 @@ class Sidebar extends Component<IProps, IState> { | |||
331 | ) : null} | 333 | ) : null} |
332 | </> | 334 | </> |
333 | {this.state.tooltipEnabled && ( | 335 | {this.state.tooltipEnabled && ( |
334 | <ReactTooltip place="right" type="dark" effect="solid" /> | 336 | <ReactTooltip |
337 | id="tooltip-sidebar-button" | ||
338 | place="right" | ||
339 | variant="dark" | ||
340 | style={{ height: 'auto', overflowY: 'unset' }} | ||
341 | /> | ||
335 | )} | 342 | )} |
336 | {!hideSettingsButton && !isMenuCollapsed ? ( | 343 | {!hideSettingsButton && !isMenuCollapsed ? ( |
337 | <button | 344 | <button |
338 | type="button" | 345 | type="button" |
339 | onClick={() => openSettings({ path: 'app' })} | 346 | onClick={() => openSettings({ path: 'app' })} |
340 | className="sidebar__button sidebar__button--settings" | 347 | className="sidebar__button sidebar__button--settings" |
341 | data-tip={`${intl.formatMessage( | 348 | data-tooltip-id="tooltip-sidebar-button" |
349 | data-tooltip-content={`${intl.formatMessage( | ||
342 | globalMessages.settings, | 350 | globalMessages.settings, |
343 | )} (${settingsShortcutKey(false)})`} | 351 | )} (${settingsShortcutKey(false)})`} |
344 | > | 352 | > |
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx index c883066ce..c25af4427 100644 --- a/src/components/services/tabs/TabItem.tsx +++ b/src/components/services/tabs/TabItem.tsx | |||
@@ -359,7 +359,8 @@ class TabItem extends Component<IProps, IState> { | |||
359 | onKeyDown={noop} | 359 | onKeyDown={noop} |
360 | role="presentation" | 360 | role="presentation" |
361 | onContextMenu={() => menu.popup()} | 361 | onContextMenu={() => menu.popup()} |
362 | data-tip={`${service.name} ${acceleratorString( | 362 | data-tooltip-id="tooltip-sidebar-button" |
363 | data-tooltip-content={`${service.name} ${acceleratorString( | ||
363 | shortcutIndex, | 364 | shortcutIndex, |
364 | cmdOrCtrlShortcutKey(false), | 365 | cmdOrCtrlShortcutKey(false), |
365 | )}`} | 366 | )}`} |
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx index 163b0a160..de323c06e 100644 --- a/src/components/settings/account/AccountDashboard.tsx +++ b/src/components/settings/account/AccountDashboard.tsx | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component } from 'react'; | 1 | import { Component } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | import ReactTooltip from 'react-tooltip'; | 4 | import { Tooltip as ReactTooltip } from 'react-tooltip'; |
5 | import { H1, H2 } from '../../ui/headline'; | 5 | import { H1, H2 } from '../../ui/headline'; |
6 | 6 | ||
7 | import Loader from '../../ui/Loader'; | 7 | import Loader from '../../ui/Loader'; |
@@ -215,7 +215,12 @@ class AccountDashboard extends Component<IProp> { | |||
215 | </> | 215 | </> |
216 | )} | 216 | )} |
217 | </div> | 217 | </div> |
218 | <ReactTooltip place="right" type="dark" effect="solid" /> | 218 | <ReactTooltip |
219 | place="right" | ||
220 | variant="dark" | ||
221 | float | ||
222 | style={{ height: 'auto' }} | ||
223 | /> | ||
219 | </div> | 224 | </div> |
220 | ); | 225 | ); |
221 | } | 226 | } |
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx index bf2dfa9da..babe06b5a 100644 --- a/src/components/settings/services/ServiceItem.tsx +++ b/src/components/settings/services/ServiceItem.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import { Component, ReactElement } from 'react'; | 1 | import { Component, ReactElement } from 'react'; |
2 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 2 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
3 | import ReactTooltip from 'react-tooltip'; | 3 | import { Tooltip as ReactTooltip } from 'react-tooltip'; |
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js'; | 6 | import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js'; |
@@ -73,7 +73,8 @@ class ServiceItem extends Component<IProps> { | |||
73 | {service.isMuted && ( | 73 | {service.isMuted && ( |
74 | <Icon | 74 | <Icon |
75 | icon={mdiBellOff} | 75 | icon={mdiBellOff} |
76 | data-tip={intl.formatMessage(messages.tooltipIsMuted)} | 76 | data-tooltip-id="tooltip-service-item" |
77 | data-tooltip-content={intl.formatMessage(messages.tooltipIsMuted)} | ||
77 | /> | 78 | /> |
78 | )} | 79 | )} |
79 | </td> | 80 | </td> |
@@ -85,7 +86,10 @@ class ServiceItem extends Component<IProps> { | |||
85 | {!service.isEnabled && ( | 86 | {!service.isEnabled && ( |
86 | <Icon | 87 | <Icon |
87 | icon={mdiPower} | 88 | icon={mdiPower} |
88 | data-tip={intl.formatMessage(messages.tooltipIsDisabled)} | 89 | data-tooltip-id="tooltip-service-item" |
90 | data-tooltip-content={intl.formatMessage( | ||
91 | messages.tooltipIsDisabled, | ||
92 | )} | ||
89 | /> | 93 | /> |
90 | )} | 94 | )} |
91 | </td> | 95 | </td> |
@@ -97,12 +101,18 @@ class ServiceItem extends Component<IProps> { | |||
97 | {!service.isNotificationEnabled && ( | 101 | {!service.isNotificationEnabled && ( |
98 | <Icon | 102 | <Icon |
99 | icon={mdiMessageBulletedOff} | 103 | icon={mdiMessageBulletedOff} |
100 | data-tip={intl.formatMessage( | 104 | data-tooltip-id="tooltip-service-item" |
105 | data-tooltip-content={intl.formatMessage( | ||
101 | messages.tooltipNotificationsDisabled, | 106 | messages.tooltipNotificationsDisabled, |
102 | )} | 107 | )} |
103 | /> | 108 | /> |
104 | )} | 109 | )} |
105 | <ReactTooltip place="top" type="dark" effect="solid" /> | 110 | <ReactTooltip |
111 | id="tooltip-service-item" | ||
112 | place="right" | ||
113 | variant="dark" | ||
114 | style={{ height: 'auto' }} | ||
115 | /> | ||
106 | </td> | 116 | </td> |
107 | </tr> | 117 | </tr> |
108 | ); | 118 | ); |
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx index 6fd2d4426..77bccb8c3 100644 --- a/src/components/settings/team/TeamDashboard.tsx +++ b/src/components/settings/team/TeamDashboard.tsx | |||
@@ -3,7 +3,7 @@ | |||
3 | import { Component, ReactElement } from 'react'; | 3 | import { Component, ReactElement } from 'react'; |
4 | import { observer } from 'mobx-react'; | 4 | import { observer } from 'mobx-react'; |
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | import ReactTooltip from 'react-tooltip'; | 6 | import { Tooltip as ReactTooltip } from 'react-tooltip'; |
7 | import withStyles, { WithStylesProps } from 'react-jss'; | 7 | import withStyles, { WithStylesProps } from 'react-jss'; |
8 | import classnames from 'classnames'; | 8 | import classnames from 'classnames'; |
9 | import Loader from '../../ui/Loader'; | 9 | import Loader from '../../ui/Loader'; |
@@ -173,7 +173,12 @@ class TeamDashboard extends Component<IProps> { | |||
173 | </> | 173 | </> |
174 | )} | 174 | )} |
175 | </div> | 175 | </div> |
176 | <ReactTooltip place="right" type="dark" effect="solid" /> | 176 | <ReactTooltip |
177 | place="right" | ||
178 | variant="dark" | ||
179 | float | ||
180 | style={{ height: 'auto' }} | ||
181 | /> | ||
177 | </div> | 182 | </div> |
178 | ) : ( | 183 | ) : ( |
179 | <div className="settings__main"> | 184 | <div className="settings__main"> |
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx index 2076f6ba6..0868271f3 100644 --- a/src/components/ui/effects/Appear.tsx +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -1,5 +1,5 @@ | |||
1 | import { ReactElement, ReactNode, useEffect, useState } from 'react'; | 1 | import { ReactElement, ReactNode, useEffect, useState } from 'react'; |
2 | import { CSSTransitionGroup } from 'react-transition-group'; | 2 | import { TransitionGroup, CSSTransition } from 'react-transition-group'; |
3 | 3 | ||
4 | interface IProps { | 4 | interface IProps { |
5 | children: ReactNode; | 5 | children: ReactNode; |
@@ -7,7 +7,6 @@ interface IProps { | |||
7 | className?: string; | 7 | className?: string; |
8 | transitionAppear?: boolean; | 8 | transitionAppear?: boolean; |
9 | transitionLeave?: boolean; | 9 | transitionLeave?: boolean; |
10 | transitionAppearTimeout?: number; | ||
11 | transitionEnterTimeout?: number; | 10 | transitionEnterTimeout?: number; |
12 | transitionLeaveTimeout?: number; | 11 | transitionLeaveTimeout?: number; |
13 | } | 12 | } |
@@ -18,7 +17,6 @@ const Appear = ({ | |||
18 | className = '', | 17 | className = '', |
19 | transitionAppear = true, | 18 | transitionAppear = true, |
20 | transitionLeave = true, | 19 | transitionLeave = true, |
21 | transitionAppearTimeout = 1500, | ||
22 | transitionEnterTimeout = 1500, | 20 | transitionEnterTimeout = 1500, |
23 | transitionLeaveTimeout = 1500, | 21 | transitionLeaveTimeout = 1500, |
24 | }: IProps): ReactElement | null => { | 22 | }: IProps): ReactElement | null => { |
@@ -33,17 +31,21 @@ const Appear = ({ | |||
33 | } | 31 | } |
34 | 32 | ||
35 | return ( | 33 | return ( |
36 | <CSSTransitionGroup | 34 | <TransitionGroup |
37 | transitionName={transitionName} | 35 | appear={transitionAppear} |
38 | transitionAppear={transitionAppear} | 36 | exit={transitionLeave} |
39 | transitionLeave={transitionLeave} | ||
40 | transitionAppearTimeout={transitionAppearTimeout} | ||
41 | transitionEnterTimeout={transitionEnterTimeout} | ||
42 | transitionLeaveTimeout={transitionLeaveTimeout} | ||
43 | className={className} | 37 | className={className} |
44 | > | 38 | > |
45 | {children} | 39 | <CSSTransition |
46 | </CSSTransitionGroup> | 40 | classNames={transitionName} |
41 | timeout={{ | ||
42 | enter: transitionEnterTimeout, | ||
43 | exit: transitionLeaveTimeout, | ||
44 | }} | ||
45 | > | ||
46 | {children} | ||
47 | </CSSTransition> | ||
48 | </TransitionGroup> | ||
47 | ); | 49 | ); |
48 | }; | 50 | }; |
49 | 51 | ||