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