From dd238ae7949e72e3b90235f56e14686cc5231f34 Mon Sep 17 00:00:00 2001
From: muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>
Date: Mon, 7 Nov 2022 06:27:57 +0530
Subject: Remove duplicated Toggle.js component (#741)
---
src/components/auth/Import.js | 2 +-
.../settings/services/EditServiceForm.js | 28 ++++---
.../settings/settings/EditSettingsForm.tsx | 92 +++++++++++-----------
src/components/ui/Toggle.js | 72 -----------------
src/components/ui/toggle/index.tsx | 56 ++++++-------
.../workspaces/components/EditWorkspaceForm.js | 2 +-
.../components/WorkspaceServiceListItem.tsx | 26 +++---
src/lib/Tray.ts | 36 +++++----
8 files changed, 121 insertions(+), 193 deletions(-)
delete mode 100644 src/components/ui/Toggle.js
(limited to 'src')
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js
index 41b887974..93ca124db 100644
--- a/src/components/auth/Import.js
+++ b/src/components/auth/Import.js
@@ -97,7 +97,7 @@ class Import extends Component {
{this.form.$('import').map((service, i) => (
-
+
|
{intl.formatMessage(messages.headlineNotifications)}
-
-
+
+
{intl.formatMessage(messages.isMutedInfo)}
-
+
{intl.formatMessage(messages.headlineBadges)}
-
+
{recipe.hasIndirectMessages &&
form.$('isBadgeEnabled').value && (
<>
{intl.formatMessage(messages.indirectMessageInfo)}
@@ -365,19 +365,21 @@ class EditServiceForm extends Component {
>
)}
{recipe.allowFavoritesDelineationInUnreadCount && (
-
+
)}
{intl.formatMessage(messages.headlineGeneral)}
-
-
+
+
{intl.formatMessage(messages.isHibernationEnabledInfo)}
-
-
+
+
{/* TODO: Need to figure out how to effect this change without a reload of the recipe */}
{intl.formatMessage(messages.serviceReloadRequired)}
@@ -386,7 +388,7 @@ class EditServiceForm extends Component {
{intl.formatMessage(messages.headlineAppearance)}
-
+
{form.$('isDarkModeEnabled').value && (
<>
@@ -399,7 +401,7 @@ class EditServiceForm extends Component {
>
)}
-
+
@@ -429,7 +431,7 @@ class EditServiceForm extends Component {
{intl.formatMessage(messages.headlineProxy)}
beta
-
+
{form.$('proxy.isEnabled').value && (
<>
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 1d89b53a9..e796a48ec 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
import Form from '../../../lib/Form';
import Button from '../../ui/button';
-import Toggle from '../../ui/Toggle.js';
+import Toggle from '../../ui/toggle';
import Select from '../../ui/Select';
import Input from '../../ui/input/index';
import ColorPickerInput from '../../ui/ColorPickerInput';
@@ -522,26 +522,30 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionMain)}
-
-
-
-
+
+
+
+
{reloadAfterResume && }
-
+
{reloadAfterResume && (
)}
-
- {isWindows && }
- {isWindows && }
+
+ {isWindows && (
+
+ )}
+ {isWindows && (
+
+ )}
-
+
{isTodosActivated && }
-
+
{isTodosActivated && (
@@ -571,7 +575,7 @@ class EditSettingsForm extends Component {
{isTodosActivated && }
{scheduledDNDEnabled && }
-
+
{scheduledDNDEnabled && (
<>
@@ -632,12 +636,12 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionServiceIconsSettings)}
-
-
+
+
{isUseGrayscaleServicesEnabled && }
-
+
{isUseGrayscaleServicesEnabled && (
<>
@@ -650,8 +654,8 @@ class EditSettingsForm extends Component {
>
)}
-
-
+
+
@@ -662,7 +666,7 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionHibernation)}
-
+
{
-
+
)}
@@ -687,15 +691,15 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionGeneralUi)}
- {isMac && }
+ {isMac && }
-
+
{!isAdaptableDarkModeEnabled && (
-
+
)}
{(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && (
<>
-
+
{
)}
{isSplitModeEnabled && }
-
+
{isSplitModeEnabled && (
{
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
)}
@@ -801,17 +805,17 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionPrivacy)}
-
-
+
+
{(isWindows || isMac) && (
-
+
)}
-
+
{intl.formatMessage(messages.sentryInfo)}
@@ -830,11 +834,11 @@ class EditSettingsForm extends Component {
-
+
{lockingFeatureEnabled && (
<>
{isMac && systemPreferences.canPromptTouchID() && (
-
+
)}
{
-
+
{!isMac && form.$('enableSpellchecking').value && (
)}
@@ -901,7 +905,7 @@ class EditSettingsForm extends Component {
-
+
{form.$('enableTranslator').value && (
@@ -931,8 +935,8 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionAdvanced)}
-
-
+
+
{intl.formatMessage(messages.appRestartRequired)}
@@ -1036,12 +1040,12 @@ class EditSettingsForm extends Component {
{intl.formatMessage(messages.sectionUpdates)}
-
+
{automaticUpdates && (
<>
<>
-
+
{updateIsReadyToInstall ? (
- );
- }
-}
-
-export default observer(Toggle);
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index d478cbba5..fee8adbc7 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,27 +1,26 @@
import classnames from 'classnames';
import { Property } from 'csstype';
+import { noop } from 'lodash';
import { Component, InputHTMLAttributes } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
-
+import withStyles, { WithStylesProps } from 'react-jss';
import { Theme } from '../../../themes';
-import { IFormField } from '../typings/generic';
-
import Error from '../error';
import Label from '../label';
+import { IFormField } from '../typings/generic';
import Wrapper from '../wrapper';
interface IProps
- extends InputHTMLAttributes,
+ extends Omit, 'value'>,
IFormField,
WithStylesProps {
className?: string;
+ value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form
}
-let buttonTransition: string = 'none';
-
-if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
- buttonTransition = 'all .5s';
-}
+const buttonTransition: string =
+ window && window.matchMedia('(prefers-reduced-motion: no-preference)')
+ ? 'all .5s'
+ : 'none';
const styles = (theme: Theme) => ({
toggle: {
@@ -64,25 +63,18 @@ const styles = (theme: Theme) => ({
});
class ToggleComponent extends Component {
- public static defaultProps = {
- onChange: () => {},
- showLabel: true,
- disabled: false,
- error: '',
- };
-
render() {
const {
classes,
className,
- disabled,
- error,
- id,
- label,
- showLabel,
- checked,
- value,
- onChange,
+ id = '',
+ name = '',
+ label = '',
+ error = '',
+ value = false,
+ showLabel = true,
+ disabled = false,
+ onChange = noop,
} = this.props;
return (
@@ -102,24 +94,24 @@ class ToggleComponent extends Component {
- {error && }
+ {error ? : null}
);
}
}
-export default injectStyle(styles, { injectTheme: true })(ToggleComponent);
+export default withStyles(styles, { injectTheme: true })(ToggleComponent);
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 6bc9ae6f0..509df97e6 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -176,7 +176,7 @@ class EditWorkspaceForm extends Component {
)}
-
+
{intl.formatMessage(messages.keepLoadedInfo)}
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.tsx b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
index 0233d5749..420aed595 100644
--- a/src/features/workspaces/components/WorkspaceServiceListItem.tsx
+++ b/src/features/workspaces/components/WorkspaceServiceListItem.tsx
@@ -1,10 +1,10 @@
-import { Component } from 'react';
+import { Component, ReactElement } from 'react';
import { observer } from 'mobx-react';
-import injectSheet from 'react-jss';
+import withStyles, { WithStylesProps } from 'react-jss';
import classnames from 'classnames';
-
-import Toggle from '../../../components/ui/toggle/index';
+import Toggle from '../../../components/ui/toggle';
import ServiceIcon from '../../../components/ui/ServiceIcon';
+import Service from '../../../models/Service';
const styles = theme => ({
listItem: {
@@ -29,15 +29,15 @@ const styles = theme => ({
},
});
-type Props = {
- classes: any;
+interface IProps extends WithStylesProps {
isInWorkspace: boolean;
onToggle: () => void;
- service: any;
-};
+ service: Service;
+}
-class WorkspaceServiceListItem extends Component {
- render() {
+@observer
+class WorkspaceServiceListItem extends Component {
+ render(): ReactElement {
const { classes, isInWorkspace, onToggle, service } = this.props;
return (
@@ -53,7 +53,7 @@ class WorkspaceServiceListItem extends Component {
@@ -61,6 +61,6 @@ class WorkspaceServiceListItem extends Component {
}
}
-export default injectSheet(styles, { injectTheme: true })(
- observer(WorkspaceServiceListItem),
+export default withStyles(styles, { injectTheme: true })(
+ WorkspaceServiceListItem,
);
diff --git a/src/lib/Tray.ts b/src/lib/Tray.ts
index 8e489edde..dafbb68aa 100644
--- a/src/lib/Tray.ts
+++ b/src/lib/Tray.ts
@@ -20,7 +20,7 @@ const INDICATOR_TRAY_INDIRECT = 'tray-indirect';
// TODO: Need to support i18n for a lot of the hard-coded strings in this file
export default class TrayIcon {
- trayIcon: Tray | null = null;
+ tray: Tray | null = null;
indicator: string | number = 0;
@@ -97,7 +97,9 @@ export default class TrayIcon {
}
_updateTrayMenu(appSettings): void {
- if (!this.trayIcon) return;
+ if (!this.tray) {
+ return;
+ }
if (appSettings && appSettings.type === 'app') {
this.isAppMuted = appSettings.data.isAppMuted; // save current state after a change
@@ -105,7 +107,7 @@ export default class TrayIcon {
this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
if (isLinux) {
- this.trayIcon.setContextMenu(this.trayMenu);
+ this.tray.setContextMenu(this.trayMenu);
}
}
@@ -115,26 +117,26 @@ export default class TrayIcon {
}
_show(): void {
- if (this.trayIcon) {
+ if (this.tray) {
return;
}
- this.trayIcon = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
- this.trayIcon.setToolTip('Ferdium');
+ this.tray = new Tray(this._getAsset('tray', INDICATOR_TRAY_PLAIN));
+ this.tray.setToolTip('Ferdium');
this.trayMenu = Menu.buildFromTemplate(this.trayMenuTemplate(this));
if (isLinux) {
- this.trayIcon.setContextMenu(this.trayMenu);
+ this.tray.setContextMenu(this.trayMenu);
}
- this.trayIcon.on('click', () => {
+ this.tray.on('click', () => {
this._toggleWindow();
});
if (isMac || isWindows) {
- this.trayIcon.on('right-click', () => {
- if (this.trayIcon && this.trayMenu) {
- this.trayIcon.popUpContextMenu(this.trayMenu);
+ this.tray.on('right-click', () => {
+ if (this.tray && this.trayMenu) {
+ this.tray.popUpContextMenu(this.trayMenu);
}
});
}
@@ -177,10 +179,10 @@ export default class TrayIcon {
}
_hide(): void {
- if (!this.trayIcon) return;
+ if (!this.tray) return;
- this.trayIcon.destroy();
- this.trayIcon = null;
+ this.tray.destroy();
+ this.tray = null;
if (isMac && this.themeChangeSubscriberId) {
systemPreferences.unsubscribeNotification(this.themeChangeSubscriberId);
@@ -216,16 +218,16 @@ export default class TrayIcon {
}
_refreshIcon(): void {
- if (!this.trayIcon) {
+ if (!this.tray) {
return;
}
- this.trayIcon.setImage(
+ this.tray.setImage(
this._getAsset('tray', this._getAssetFromIndicator(this.indicator)),
);
if (isMac && !macosVersion.isGreaterThanOrEqualTo('11')) {
- this.trayIcon.setPressedImage(
+ this.tray.setPressedImage(
this._getAsset(
'tray',
`${this._getAssetFromIndicator(this.indicator)}-active`,
--
cgit v1.2.3-70-g09d2
|