diff options
author | Muhamed <unknown> | 2022-11-07 01:11:48 +0530 |
---|---|---|
committer | Vijay Aravamudhan <vraravam@users.noreply.github.com> | 2022-11-08 17:25:27 +0530 |
commit | a1f5e31bfce97b4bbe492e24bf7d57ec2803c31a (patch) | |
tree | 881417b8917e8212fcf94547b92bba2701592745 /src/components | |
parent | 6.2.1-nightly.42 [skip ci] (diff) | |
download | ferdium-app-a1f5e31bfce97b4bbe492e24bf7d57ec2803c31a.tar.gz ferdium-app-a1f5e31bfce97b4bbe492e24bf7d57ec2803c31a.tar.zst ferdium-app-a1f5e31bfce97b4bbe492e24bf7d57ec2803c31a.zip |
refactor: remove toggle component's duplicate
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/auth/Import.js | 5 | ||||
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 32 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.tsx | 92 | ||||
-rw-r--r-- | src/components/ui/Toggle.js | 72 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 4 | ||||
-rw-r--r-- | src/components/ui/toggle/index.tsx | 56 |
6 files changed, 92 insertions, 169 deletions
diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js index 41b887974..b897116e2 100644 --- a/src/components/auth/Import.js +++ b/src/components/auth/Import.js | |||
@@ -4,9 +4,8 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | |||
4 | import { defineMessages, injectIntl } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router-dom'; | 5 | import { Link } from 'react-router-dom'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | |||
8 | import Form from '../../lib/Form'; | 7 | import Form from '../../lib/Form'; |
9 | import Toggle from '../ui/Toggle'; | 8 | import Toggle from '../ui/toggle'; |
10 | import Button from '../ui/button'; | 9 | import Button from '../ui/button'; |
11 | import { H1 } from '../ui/headline'; | 10 | import { H1 } from '../ui/headline'; |
12 | 11 | ||
@@ -97,7 +96,7 @@ class Import extends Component { | |||
97 | {this.form.$('import').map((service, i) => ( | 96 | {this.form.$('import').map((service, i) => ( |
98 | <tr key={service.id} className="service-table__row"> | 97 | <tr key={service.id} className="service-table__row"> |
99 | <td className="service-table__toggle"> | 98 | <td className="service-table__toggle"> |
100 | <Toggle field={service.$('add')} showLabel={false} /> | 99 | <Toggle {...service.$('add').bind()} showLabel={false} /> |
101 | </td> | 100 | </td> |
102 | <td className="service-table__column-icon"> | 101 | <td className="service-table__column-icon"> |
103 | <img | 102 | <img |
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index eeb9ef54d..eb18b57eb 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react'; | |||
4 | import { Link } from 'react-router-dom'; | 4 | import { Link } from 'react-router-dom'; |
5 | import { defineMessages, injectIntl } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import normalizeUrl from 'normalize-url'; | 6 | import normalizeUrl from 'normalize-url'; |
7 | |||
8 | import { mdiInformation } from '@mdi/js'; | 7 | import { mdiInformation } from '@mdi/js'; |
9 | import Form from '../../../lib/Form'; | 8 | import Form from '../../../lib/Form'; |
10 | import Recipe from '../../../models/Recipe'; | 9 | import Recipe from '../../../models/Recipe'; |
@@ -12,12 +11,11 @@ import Service from '../../../models/Service'; | |||
12 | import Tabs from '../../ui/Tabs/Tabs'; | 11 | import Tabs from '../../ui/Tabs/Tabs'; |
13 | import TabItem from '../../ui/Tabs/TabItem'; | 12 | import TabItem from '../../ui/Tabs/TabItem'; |
14 | import Input from '../../ui/input/index'; | 13 | import Input from '../../ui/input/index'; |
15 | import Toggle from '../../ui/Toggle'; | 14 | import Toggle from '../../ui/toggle'; |
16 | import Slider from '../../ui/Slider'; | 15 | import Slider from '../../ui/Slider'; |
17 | import Button from '../../ui/button'; | 16 | import Button from '../../ui/button'; |
18 | import ImageUpload from '../../ui/ImageUpload'; | 17 | import ImageUpload from '../../ui/ImageUpload'; |
19 | import Select from '../../ui/Select'; | 18 | import Select from '../../ui/Select'; |
20 | |||
21 | import { isMac } from '../../../environment'; | 19 | import { isMac } from '../../../environment'; |
22 | import globalMessages from '../../../i18n/globalMessages'; | 20 | import globalMessages from '../../../i18n/globalMessages'; |
23 | import Icon from '../../ui/icon'; | 21 | import Icon from '../../ui/icon'; |
@@ -342,22 +340,22 @@ class EditServiceForm extends Component { | |||
342 | <div className="settings__options"> | 340 | <div className="settings__options"> |
343 | <div className="settings__settings-group"> | 341 | <div className="settings__settings-group"> |
344 | <H3>{intl.formatMessage(messages.headlineNotifications)}</H3> | 342 | <H3>{intl.formatMessage(messages.headlineNotifications)}</H3> |
345 | <Toggle field={form.$('isNotificationEnabled')} /> | 343 | <Toggle {...form.$('isNotificationEnabled').bind()} /> |
346 | <Toggle field={form.$('isMuted')} /> | 344 | <Toggle {...form.$('isMuted').bind()} /> |
347 | <p className="settings__help indented__help"> | 345 | <p className="settings__help indented__help"> |
348 | {intl.formatMessage(messages.isMutedInfo)} | 346 | {intl.formatMessage(messages.isMutedInfo)} |
349 | </p> | 347 | </p> |
350 | <Toggle field={form.$('isMediaBadgeEnabled')} /> | 348 | <Toggle {...form.$('isMediaBadgeEnabled').bind()} /> |
351 | </div> | 349 | </div> |
352 | 350 | ||
353 | <div className="settings__settings-group"> | 351 | <div className="settings__settings-group"> |
354 | <H3>{intl.formatMessage(messages.headlineBadges)}</H3> | 352 | <H3>{intl.formatMessage(messages.headlineBadges)}</H3> |
355 | <Toggle field={form.$('isBadgeEnabled')} /> | 353 | <Toggle {...form.$('isBadgeEnabled').bind()} /> |
356 | {recipe.hasIndirectMessages && | 354 | {recipe.hasIndirectMessages && |
357 | form.$('isBadgeEnabled').value && ( | 355 | form.$('isBadgeEnabled').value && ( |
358 | <> | 356 | <> |
359 | <Toggle | 357 | <Toggle |
360 | field={form.$('isIndirectMessageBadgeEnabled')} | 358 | {...form.$('isIndirectMessageBadgeEnabled').bind()} |
361 | /> | 359 | /> |
362 | <p className="settings__help indented__help"> | 360 | <p className="settings__help indented__help"> |
363 | {intl.formatMessage(messages.indirectMessageInfo)} | 361 | {intl.formatMessage(messages.indirectMessageInfo)} |
@@ -365,19 +363,21 @@ class EditServiceForm extends Component { | |||
365 | </> | 363 | </> |
366 | )} | 364 | )} |
367 | {recipe.allowFavoritesDelineationInUnreadCount && ( | 365 | {recipe.allowFavoritesDelineationInUnreadCount && ( |
368 | <Toggle field={form.$('onlyShowFavoritesInUnreadCount')} /> | 366 | <Toggle |
367 | {...form.$('onlyShowFavoritesInUnreadCount').bind()} | ||
368 | /> | ||
369 | )} | 369 | )} |
370 | </div> | 370 | </div> |
371 | 371 | ||
372 | <div className="settings__settings-group"> | 372 | <div className="settings__settings-group"> |
373 | <H3>{intl.formatMessage(messages.headlineGeneral)}</H3> | 373 | <H3>{intl.formatMessage(messages.headlineGeneral)}</H3> |
374 | <Toggle field={form.$('isEnabled')} /> | 374 | <Toggle {...form.$('isEnabled').bind()} /> |
375 | <Toggle field={form.$('isHibernationEnabled')} /> | 375 | <Toggle {...form.$('isHibernationEnabled').bind()} /> |
376 | <p className="settings__help indented__help"> | 376 | <p className="settings__help indented__help"> |
377 | {intl.formatMessage(messages.isHibernationEnabledInfo)} | 377 | {intl.formatMessage(messages.isHibernationEnabledInfo)} |
378 | </p> | 378 | </p> |
379 | <Toggle field={form.$('isWakeUpEnabled')} /> | 379 | <Toggle {...form.$('isWakeUpEnabled').bind()} /> |
380 | <Toggle field={form.$('trapLinkClicks')} /> | 380 | <Toggle {...form.$('trapLinkClicks').bind()} /> |
381 | {/* TODO: Need to figure out how to effect this change without a reload of the recipe */} | 381 | {/* TODO: Need to figure out how to effect this change without a reload of the recipe */} |
382 | <p className="settings__help indented__help"> | 382 | <p className="settings__help indented__help"> |
383 | {intl.formatMessage(messages.serviceReloadRequired)} | 383 | {intl.formatMessage(messages.serviceReloadRequired)} |
@@ -386,7 +386,7 @@ class EditServiceForm extends Component { | |||
386 | 386 | ||
387 | <div className="settings__settings-group"> | 387 | <div className="settings__settings-group"> |
388 | <H3>{intl.formatMessage(messages.headlineAppearance)}</H3> | 388 | <H3>{intl.formatMessage(messages.headlineAppearance)}</H3> |
389 | <Toggle field={form.$('isDarkModeEnabled')} /> | 389 | <Toggle {...form.$('isDarkModeEnabled').bind()} /> |
390 | {form.$('isDarkModeEnabled').value && ( | 390 | {form.$('isDarkModeEnabled').value && ( |
391 | <> | 391 | <> |
392 | <H3> | 392 | <H3> |
@@ -399,7 +399,7 @@ class EditServiceForm extends Component { | |||
399 | <Slider field={form.$('darkReaderSepia')} /> | 399 | <Slider field={form.$('darkReaderSepia')} /> |
400 | </> | 400 | </> |
401 | )} | 401 | )} |
402 | <Toggle field={form.$('isProgressbarEnabled')} /> | 402 | <Toggle {...form.$('isProgressbarEnabled').bind()} /> |
403 | </div> | 403 | </div> |
404 | </div> | 404 | </div> |
405 | <div className="service-icon"> | 405 | <div className="service-icon"> |
@@ -429,7 +429,7 @@ class EditServiceForm extends Component { | |||
429 | {intl.formatMessage(messages.headlineProxy)} | 429 | {intl.formatMessage(messages.headlineProxy)} |
430 | <span className="badge badge--success">beta</span> | 430 | <span className="badge badge--success">beta</span> |
431 | </H3> | 431 | </H3> |
432 | <Toggle field={form.$('proxy.isEnabled')} /> | 432 | <Toggle {...form.$('proxy.isEnabled').bind()} /> |
433 | {form.$('proxy.isEnabled').value && ( | 433 | {form.$('proxy.isEnabled').value && ( |
434 | <> | 434 | <> |
435 | <div className="grid"> | 435 | <div className="grid"> |
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'; | |||
6 | import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js'; | 6 | import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js'; |
7 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
8 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
9 | import Toggle from '../../ui/Toggle.js'; | 9 | import Toggle from '../../ui/toggle'; |
10 | import Select from '../../ui/Select'; | 10 | import Select from '../../ui/Select'; |
11 | import Input from '../../ui/input/index'; | 11 | import Input from '../../ui/input/index'; |
12 | import ColorPickerInput from '../../ui/ColorPickerInput'; | 12 | import ColorPickerInput from '../../ui/ColorPickerInput'; |
@@ -522,26 +522,30 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
522 | <H2 className="settings__section_header"> | 522 | <H2 className="settings__section_header"> |
523 | {intl.formatMessage(messages.sectionMain)} | 523 | {intl.formatMessage(messages.sectionMain)} |
524 | </H2> | 524 | </H2> |
525 | <Toggle field={form.$('autoLaunchOnStart')} /> | 525 | <Toggle {...form.$('autoLaunchOnStart').bind()} /> |
526 | <Toggle field={form.$('runInBackground')} /> | 526 | <Toggle {...form.$('runInBackground').bind()} /> |
527 | <Toggle field={form.$('confirmOnQuit')} /> | 527 | <Toggle {...form.$('confirmOnQuit').bind()} /> |
528 | <Toggle field={form.$('enableSystemTray')} /> | 528 | <Toggle {...form.$('enableSystemTray').bind()} /> |
529 | {reloadAfterResume && <Hr />} | 529 | {reloadAfterResume && <Hr />} |
530 | <Toggle field={form.$('reloadAfterResume')} /> | 530 | <Toggle {...form.$('reloadAfterResume').bind()} /> |
531 | {reloadAfterResume && ( | 531 | {reloadAfterResume && ( |
532 | <div> | 532 | <div> |
533 | <Input {...form.$('reloadAfterResumeTime').bind()} /> | 533 | <Input {...form.$('reloadAfterResumeTime').bind()} /> |
534 | <Hr /> | 534 | <Hr /> |
535 | </div> | 535 | </div> |
536 | )} | 536 | )} |
537 | <Toggle field={form.$('startMinimized')} /> | 537 | <Toggle {...form.$('startMinimized').bind()} /> |
538 | {isWindows && <Toggle field={form.$('minimizeToSystemTray')} />} | 538 | {isWindows && ( |
539 | {isWindows && <Toggle field={form.$('closeToSystemTray')} />} | 539 | <Toggle {...form.$('minimizeToSystemTray').bind()} /> |
540 | )} | ||
541 | {isWindows && ( | ||
542 | <Toggle {...form.$('closeToSystemTray').bind()} /> | ||
543 | )} | ||
540 | 544 | ||
541 | <Toggle field={form.$('keepAllWorkspacesLoaded')} /> | 545 | <Toggle {...form.$('keepAllWorkspacesLoaded').bind()} /> |
542 | 546 | ||
543 | {isTodosActivated && <Hr />} | 547 | {isTodosActivated && <Hr />} |
544 | <Toggle field={form.$('enableTodos')} /> | 548 | <Toggle {...form.$('enableTodos').bind()} /> |
545 | {isTodosActivated && ( | 549 | {isTodosActivated && ( |
546 | <div> | 550 | <div> |
547 | <Select field={form.$('predefinedTodoServer')} /> | 551 | <Select field={form.$('predefinedTodoServer')} /> |
@@ -571,7 +575,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
571 | {isTodosActivated && <Hr />} | 575 | {isTodosActivated && <Hr />} |
572 | 576 | ||
573 | {scheduledDNDEnabled && <Hr />} | 577 | {scheduledDNDEnabled && <Hr />} |
574 | <Toggle field={form.$('scheduledDNDEnabled')} /> | 578 | <Toggle {...form.$('scheduledDNDEnabled').bind()} /> |
575 | 579 | ||
576 | {scheduledDNDEnabled && ( | 580 | {scheduledDNDEnabled && ( |
577 | <> | 581 | <> |
@@ -632,12 +636,12 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
632 | {intl.formatMessage(messages.sectionServiceIconsSettings)} | 636 | {intl.formatMessage(messages.sectionServiceIconsSettings)} |
633 | </H2> | 637 | </H2> |
634 | 638 | ||
635 | <Toggle field={form.$('showDisabledServices')} /> | 639 | <Toggle {...form.$('showDisabledServices').bind()} /> |
636 | <Toggle field={form.$('showServiceName')} /> | 640 | <Toggle {...form.$('showServiceName').bind()} /> |
637 | 641 | ||
638 | {isUseGrayscaleServicesEnabled && <Hr />} | 642 | {isUseGrayscaleServicesEnabled && <Hr />} |
639 | 643 | ||
640 | <Toggle field={form.$('useGrayscaleServices')} /> | 644 | <Toggle {...form.$('useGrayscaleServices').bind()} /> |
641 | 645 | ||
642 | {isUseGrayscaleServicesEnabled && ( | 646 | {isUseGrayscaleServicesEnabled && ( |
643 | <> | 647 | <> |
@@ -650,8 +654,8 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
650 | </> | 654 | </> |
651 | )} | 655 | )} |
652 | 656 | ||
653 | <Toggle field={form.$('showMessageBadgeWhenMuted')} /> | 657 | <Toggle {...form.$('showMessageBadgeWhenMuted').bind()} /> |
654 | <Toggle field={form.$('enableLongPressServiceHint')} /> | 658 | <Toggle {...form.$('enableLongPressServiceHint').bind()} /> |
655 | <Select field={form.$('iconSize')} /> | 659 | <Select field={form.$('iconSize')} /> |
656 | 660 | ||
657 | <Select field={form.$('navigationBarBehaviour')} /> | 661 | <Select field={form.$('navigationBarBehaviour')} /> |
@@ -662,7 +666,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
662 | {intl.formatMessage(messages.sectionHibernation)} | 666 | {intl.formatMessage(messages.sectionHibernation)} |
663 | </H2> | 667 | </H2> |
664 | <Select field={form.$('hibernationStrategy')} /> | 668 | <Select field={form.$('hibernationStrategy')} /> |
665 | <Toggle field={form.$('hibernateOnStartup')} /> | 669 | <Toggle {...form.$('hibernateOnStartup').bind()} /> |
666 | <p | 670 | <p |
667 | className="settings__message" | 671 | className="settings__message" |
668 | style={{ | 672 | style={{ |
@@ -677,7 +681,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
677 | 681 | ||
678 | <Select field={form.$('wakeUpStrategy')} /> | 682 | <Select field={form.$('wakeUpStrategy')} /> |
679 | <Select field={form.$('wakeUpHibernationStrategy')} /> | 683 | <Select field={form.$('wakeUpHibernationStrategy')} /> |
680 | <Toggle field={form.$('wakeUpHibernationSplay')} /> | 684 | <Toggle {...form.$('wakeUpHibernationSplay').bind()} /> |
681 | </div> | 685 | </div> |
682 | )} | 686 | )} |
683 | 687 | ||
@@ -687,15 +691,15 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
687 | <H2 className="settings__section_header"> | 691 | <H2 className="settings__section_header"> |
688 | {intl.formatMessage(messages.sectionGeneralUi)} | 692 | {intl.formatMessage(messages.sectionGeneralUi)} |
689 | </H2> | 693 | </H2> |
690 | {isMac && <Toggle field={form.$('showDragArea')} />} | 694 | {isMac && <Toggle {...form.$('showDragArea').bind()} />} |
691 | 695 | ||
692 | <Toggle field={form.$('adaptableDarkMode')} /> | 696 | <Toggle {...form.$('adaptableDarkMode').bind()} /> |
693 | {!isAdaptableDarkModeEnabled && ( | 697 | {!isAdaptableDarkModeEnabled && ( |
694 | <Toggle field={form.$('darkMode')} /> | 698 | <Toggle {...form.$('darkMode').bind()} /> |
695 | )} | 699 | )} |
696 | {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && ( | 700 | {(isDarkmodeEnabled || isAdaptableDarkModeEnabled) && ( |
697 | <> | 701 | <> |
698 | <Toggle field={form.$('universalDarkMode')} /> | 702 | <Toggle {...form.$('universalDarkMode').bind()} /> |
699 | <p | 703 | <p |
700 | className="settings__message" | 704 | className="settings__message" |
701 | style={{ | 705 | style={{ |
@@ -713,7 +717,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
713 | )} | 717 | )} |
714 | 718 | ||
715 | {isSplitModeEnabled && <Hr />} | 719 | {isSplitModeEnabled && <Hr />} |
716 | <Toggle field={form.$('splitMode')} /> | 720 | <Toggle {...form.$('splitMode').bind()} /> |
717 | {isSplitModeEnabled && ( | 721 | {isSplitModeEnabled && ( |
718 | <Input | 722 | <Input |
719 | type="number" | 723 | type="number" |
@@ -776,21 +780,21 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
776 | 780 | ||
777 | <Select field={form.$('sidebarServicesLocation')} /> | 781 | <Select field={form.$('sidebarServicesLocation')} /> |
778 | 782 | ||
779 | <Toggle field={form.$('useHorizontalStyle')} /> | 783 | <Toggle {...form.$('useHorizontalStyle').bind()} /> |
780 | 784 | ||
781 | <Toggle field={form.$('hideCollapseButton')} /> | 785 | <Toggle {...form.$('hideCollapseButton').bind()} /> |
782 | 786 | ||
783 | <Toggle field={form.$('hideRecipesButton')} /> | 787 | <Toggle {...form.$('hideRecipesButton').bind()} /> |
784 | 788 | ||
785 | <Toggle field={form.$('hideSplitModeButton')} /> | 789 | <Toggle {...form.$('hideSplitModeButton').bind()} /> |
786 | 790 | ||
787 | <Toggle field={form.$('hideWorkspacesButton')} /> | 791 | <Toggle {...form.$('hideWorkspacesButton').bind()} /> |
788 | 792 | ||
789 | <Toggle field={form.$('hideNotificationsButton')} /> | 793 | <Toggle {...form.$('hideNotificationsButton').bind()} /> |
790 | 794 | ||
791 | <Toggle field={form.$('hideSettingsButton')} /> | 795 | <Toggle {...form.$('hideSettingsButton').bind()} /> |
792 | 796 | ||
793 | <Toggle field={form.$('alwaysShowWorkspaces')} /> | 797 | <Toggle {...form.$('alwaysShowWorkspaces').bind()} /> |
794 | </div> | 798 | </div> |
795 | )} | 799 | )} |
796 | 800 | ||
@@ -801,17 +805,17 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
801 | {intl.formatMessage(messages.sectionPrivacy)} | 805 | {intl.formatMessage(messages.sectionPrivacy)} |
802 | </H2> | 806 | </H2> |
803 | 807 | ||
804 | <Toggle field={form.$('privateNotifications')} /> | 808 | <Toggle {...form.$('privateNotifications').bind()} /> |
805 | <Toggle field={form.$('clipboardNotifications')} /> | 809 | <Toggle {...form.$('clipboardNotifications').bind()} /> |
806 | {(isWindows || isMac) && ( | 810 | {(isWindows || isMac) && ( |
807 | <Toggle field={form.$('notifyTaskBarOnMessage')} /> | 811 | <Toggle {...form.$('notifyTaskBarOnMessage').bind()} /> |
808 | )} | 812 | )} |
809 | 813 | ||
810 | <Hr /> | 814 | <Hr /> |
811 | 815 | ||
812 | <Select field={form.$('webRTCIPHandlingPolicy')} /> | 816 | <Select field={form.$('webRTCIPHandlingPolicy')} /> |
813 | 817 | ||
814 | <Toggle field={form.$('sentry')} /> | 818 | <Toggle {...form.$('sentry').bind()} /> |
815 | <p className="settings__help"> | 819 | <p className="settings__help"> |
816 | {intl.formatMessage(messages.sentryInfo)} | 820 | {intl.formatMessage(messages.sentryInfo)} |
817 | </p> | 821 | </p> |
@@ -830,11 +834,11 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
830 | 834 | ||
831 | <Hr /> | 835 | <Hr /> |
832 | 836 | ||
833 | <Toggle field={form.$('lockingFeatureEnabled')} /> | 837 | <Toggle {...form.$('lockingFeatureEnabled').bind()} /> |
834 | {lockingFeatureEnabled && ( | 838 | {lockingFeatureEnabled && ( |
835 | <> | 839 | <> |
836 | {isMac && systemPreferences.canPromptTouchID() && ( | 840 | {isMac && systemPreferences.canPromptTouchID() && ( |
837 | <Toggle field={form.$('useTouchIdToUnlock')} /> | 841 | <Toggle {...form.$('useTouchIdToUnlock').bind()} /> |
838 | )} | 842 | )} |
839 | 843 | ||
840 | <Input | 844 | <Input |
@@ -885,7 +889,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
885 | 889 | ||
886 | <Hr /> | 890 | <Hr /> |
887 | 891 | ||
888 | <Toggle field={form.$('enableSpellchecking')} /> | 892 | <Toggle {...form.$('enableSpellchecking').bind()} /> |
889 | {!isMac && form.$('enableSpellchecking').value && ( | 893 | {!isMac && form.$('enableSpellchecking').value && ( |
890 | <Select field={form.$('spellcheckerLanguage')} /> | 894 | <Select field={form.$('spellcheckerLanguage')} /> |
891 | )} | 895 | )} |
@@ -901,7 +905,7 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
901 | 905 | ||
902 | <Hr /> | 906 | <Hr /> |
903 | 907 | ||
904 | <Toggle field={form.$('enableTranslator')} /> | 908 | <Toggle {...form.$('enableTranslator').bind()} /> |
905 | 909 | ||
906 | {form.$('enableTranslator').value && ( | 910 | {form.$('enableTranslator').value && ( |
907 | <Select field={form.$('translatorEngine')} /> | 911 | <Select field={form.$('translatorEngine')} /> |
@@ -931,8 +935,8 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
931 | {intl.formatMessage(messages.sectionAdvanced)} | 935 | {intl.formatMessage(messages.sectionAdvanced)} |
932 | </H2> | 936 | </H2> |
933 | 937 | ||
934 | <Toggle field={form.$('enableGPUAcceleration')} /> | 938 | <Toggle {...form.$('enableGPUAcceleration').bind()} /> |
935 | <Toggle field={form.$('enableGlobalHideShortcut')} /> | 939 | <Toggle {...form.$('enableGlobalHideShortcut').bind()} /> |
936 | <p className="settings__help indented__help"> | 940 | <p className="settings__help indented__help"> |
937 | {intl.formatMessage(messages.appRestartRequired)} | 941 | {intl.formatMessage(messages.appRestartRequired)} |
938 | </p> | 942 | </p> |
@@ -1036,12 +1040,12 @@ class EditSettingsForm extends Component<IProps, IState> { | |||
1036 | {intl.formatMessage(messages.sectionUpdates)} | 1040 | {intl.formatMessage(messages.sectionUpdates)} |
1037 | </H2> | 1041 | </H2> |
1038 | 1042 | ||
1039 | <Toggle field={form.$('automaticUpdates')} /> | 1043 | <Toggle {...form.$('automaticUpdates').bind()} /> |
1040 | {automaticUpdates && ( | 1044 | {automaticUpdates && ( |
1041 | <> | 1045 | <> |
1042 | <> | 1046 | <> |
1043 | <div> | 1047 | <div> |
1044 | <Toggle field={form.$('beta')} /> | 1048 | <Toggle {...form.$('beta').bind()} /> |
1045 | {updateIsReadyToInstall ? ( | 1049 | {updateIsReadyToInstall ? ( |
1046 | <Button | 1050 | <Button |
1047 | label={intl.formatMessage( | 1051 | label={intl.formatMessage( |
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js deleted file mode 100644 index c1d86a7f6..000000000 --- a/src/components/ui/Toggle.js +++ /dev/null | |||
@@ -1,72 +0,0 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { Field } from 'mobx-react-form'; | ||
6 | |||
7 | // Can this file be merged into the './toggle/index.tsx' file? | ||
8 | class Toggle extends Component { | ||
9 | static propTypes = { | ||
10 | field: PropTypes.instanceOf(Field).isRequired, | ||
11 | className: PropTypes.string, | ||
12 | showLabel: PropTypes.bool, | ||
13 | disabled: PropTypes.bool, | ||
14 | }; | ||
15 | |||
16 | static defaultProps = { | ||
17 | className: '', | ||
18 | showLabel: true, | ||
19 | disabled: false, | ||
20 | }; | ||
21 | |||
22 | onChange(e) { | ||
23 | const { field } = this.props; | ||
24 | |||
25 | field.onChange(e); | ||
26 | } | ||
27 | |||
28 | render() { | ||
29 | const { field, className, showLabel, disabled } = this.props; | ||
30 | |||
31 | if (field.value === '' && field.default !== '') { | ||
32 | field.value = field.default; | ||
33 | } | ||
34 | |||
35 | return ( | ||
36 | <div | ||
37 | className={classnames([ | ||
38 | 'franz-form__field', | ||
39 | 'franz-form__toggle-wrapper', | ||
40 | 'franz-form__toggle-disabled', | ||
41 | className, | ||
42 | ])} | ||
43 | > | ||
44 | <label | ||
45 | htmlFor={field.id} | ||
46 | className={classnames({ | ||
47 | 'franz-form__toggle': true, | ||
48 | 'is-active': field.value, | ||
49 | })} | ||
50 | > | ||
51 | <div className="franz-form__toggle-button" /> | ||
52 | <input | ||
53 | type="checkbox" | ||
54 | id={field.id} | ||
55 | name={field.name} | ||
56 | value={field.name} | ||
57 | checked={field.value} | ||
58 | onChange={e => (!disabled ? this.onChange(e) : null)} | ||
59 | /> | ||
60 | </label> | ||
61 | {field.error && <div className={field.error}>{field.error}</div>} | ||
62 | {field.label && showLabel && ( | ||
63 | <label className="franz-form__label" htmlFor={field.id}> | ||
64 | {field.label} | ||
65 | </label> | ||
66 | )} | ||
67 | </div> | ||
68 | ); | ||
69 | } | ||
70 | } | ||
71 | |||
72 | export default observer(Toggle); | ||
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index c1e647bc0..dc984bf95 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -2,7 +2,7 @@ import Icon from '@mdi/react'; | |||
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import { Property } from 'csstype'; | 3 | import { Property } from 'csstype'; |
4 | import { noop } from 'lodash'; | 4 | import { noop } from 'lodash'; |
5 | import { Component, MouseEvent } from 'react'; | 5 | import { Component, MouseEventHandler } from 'react'; |
6 | import withStyles, { WithStylesProps } from 'react-jss'; | 6 | import withStyles, { WithStylesProps } from 'react-jss'; |
7 | import Loader from 'react-loader'; | 7 | import Loader from 'react-loader'; |
8 | import { Theme } from '../../../themes'; | 8 | import { Theme } from '../../../themes'; |
@@ -136,7 +136,7 @@ interface IProps extends IFormField, WithStylesProps<typeof styles> { | |||
136 | disabled?: boolean; | 136 | disabled?: boolean; |
137 | id?: string; | 137 | id?: string; |
138 | type?: 'button' | 'reset' | 'submit' | undefined; | 138 | type?: 'button' | 'reset' | 'submit' | undefined; |
139 | onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void; | 139 | onClick?: MouseEventHandler<HTMLInputElement>; |
140 | buttonType?: ButtonType; | 140 | buttonType?: ButtonType; |
141 | loaded?: boolean; | 141 | loaded?: boolean; |
142 | busy?: boolean; | 142 | busy?: boolean; |
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 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Property } from 'csstype'; | 2 | import { Property } from 'csstype'; |
3 | import { noop } from 'lodash'; | ||
3 | import { Component, InputHTMLAttributes } from 'react'; | 4 | import { Component, InputHTMLAttributes } from 'react'; |
4 | import injectStyle, { WithStylesProps } from 'react-jss'; | 5 | import withStyles, { WithStylesProps } from 'react-jss'; |
5 | |||
6 | import { Theme } from '../../../themes'; | 6 | import { Theme } from '../../../themes'; |
7 | import { IFormField } from '../typings/generic'; | ||
8 | |||
9 | import Error from '../error'; | 7 | import Error from '../error'; |
10 | import Label from '../label'; | 8 | import Label from '../label'; |
9 | import { IFormField } from '../typings/generic'; | ||
11 | import Wrapper from '../wrapper'; | 10 | import Wrapper from '../wrapper'; |
12 | 11 | ||
13 | interface IProps | 12 | interface IProps |
14 | extends InputHTMLAttributes<HTMLInputElement>, | 13 | extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, |
15 | IFormField, | 14 | IFormField, |
16 | WithStylesProps<typeof styles> { | 15 | WithStylesProps<typeof styles> { |
17 | className?: string; | 16 | className?: string; |
17 | value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form | ||
18 | } | 18 | } |
19 | 19 | ||
20 | let buttonTransition: string = 'none'; | 20 | const buttonTransition: string = |
21 | 21 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | |
22 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | 22 | ? 'all .5s' |
23 | buttonTransition = 'all .5s'; | 23 | : 'none'; |
24 | } | ||
25 | 24 | ||
26 | const styles = (theme: Theme) => ({ | 25 | const styles = (theme: Theme) => ({ |
27 | toggle: { | 26 | toggle: { |
@@ -64,25 +63,18 @@ const styles = (theme: Theme) => ({ | |||
64 | }); | 63 | }); |
65 | 64 | ||
66 | class ToggleComponent extends Component<IProps> { | 65 | class ToggleComponent extends Component<IProps> { |
67 | public static defaultProps = { | ||
68 | onChange: () => {}, | ||
69 | showLabel: true, | ||
70 | disabled: false, | ||
71 | error: '', | ||
72 | }; | ||
73 | |||
74 | render() { | 66 | render() { |
75 | const { | 67 | const { |
76 | classes, | 68 | classes, |
77 | className, | 69 | className, |
78 | disabled, | 70 | id = '', |
79 | error, | 71 | name = '', |
80 | id, | 72 | label = '', |
81 | label, | 73 | error = '', |
82 | showLabel, | 74 | value = false, |
83 | checked, | 75 | showLabel = true, |
84 | value, | 76 | disabled = false, |
85 | onChange, | 77 | onChange = noop, |
86 | } = this.props; | 78 | } = this.props; |
87 | 79 | ||
88 | return ( | 80 | return ( |
@@ -102,24 +94,24 @@ class ToggleComponent extends Component<IProps> { | |||
102 | <div | 94 | <div |
103 | className={classnames({ | 95 | className={classnames({ |
104 | [`${classes.button}`]: true, | 96 | [`${classes.button}`]: true, |
105 | [`${classes.buttonActive}`]: checked, | 97 | [`${classes.buttonActive}`]: value, |
106 | })} | 98 | })} |
107 | /> | 99 | /> |
108 | <input | 100 | <input |
109 | className={classes.input} | ||
110 | id={id} | ||
111 | type="checkbox" | 101 | type="checkbox" |
112 | checked={checked} | 102 | id={id} |
113 | value={value} | 103 | name={name} |
104 | checked={value as boolean | undefined} | ||
105 | className={classes.input} | ||
114 | onChange={onChange} | 106 | onChange={onChange} |
115 | disabled={disabled} | 107 | disabled={disabled} |
116 | /> | 108 | /> |
117 | </div> | 109 | </div> |
118 | </Label> | 110 | </Label> |
119 | {error && <Error message={error} />} | 111 | {error ? <Error message={error as string} /> : null} |
120 | </Wrapper> | 112 | </Wrapper> |
121 | ); | 113 | ); |
122 | } | 114 | } |
123 | } | 115 | } |
124 | 116 | ||
125 | export default injectStyle(styles, { injectTheme: true })(ToggleComponent); | 117 | export default withStyles(styles, { injectTheme: true })(ToggleComponent); |