From 3c9f6f1f9d44ac484e0e76f5cd0563f76461ca9b Mon Sep 17 00:00:00 2001 From: Santhosh C Date: Wed, 18 May 2022 23:33:07 +0530 Subject: Remove duplicated Button.js component (#176) --- src/components/auth/ChangeServer.js | 2 +- src/components/auth/Import.js | 2 +- src/components/auth/Invite.js | 2 +- src/components/auth/Locked.js | 2 +- src/components/auth/Login.js | 2 +- src/components/auth/Password.js | 2 +- src/components/auth/SetupAssistant.js | 2 +- src/components/auth/Signup.js | 2 +- .../content/ErrorHandlers/WebviewErrorHandler.js | 2 +- src/components/services/content/ServiceDisabled.js | 2 +- .../services/content/WebviewCrashHandler.js | 2 +- .../settings/account/AccountDashboard.js | 2 +- .../settings/recipes/RecipesDashboard.js | 2 +- .../settings/services/EditServiceForm.js | 2 +- src/components/settings/services/ServiceError.js | 2 +- .../settings/settings/EditSettingsForm.js | 2 +- src/components/settings/team/TeamDashboard.js | 2 +- src/components/settings/user/EditUserForm.js | 2 +- src/components/ui/Button.js | 92 ---------------------- src/components/ui/button/index.tsx | 16 ++-- src/components/util/ErrorBoundary/index.js | 2 +- 21 files changed, 30 insertions(+), 116 deletions(-) delete mode 100644 src/components/ui/Button.js (limited to 'src/components') diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js index a7aa33ab1..61e0aed68 100644 --- a/src/components/auth/ChangeServer.js +++ b/src/components/auth/ChangeServer.js @@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import Form from '../../lib/Form'; import Input from '../ui/Input'; import Select from '../ui/Select'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import Link from '../ui/Link'; import Infobox from '../ui/Infobox'; import { url, required } from '../../helpers/validation-helpers'; diff --git a/src/components/auth/Import.js b/src/components/auth/Import.js index e7d5731f9..e43be07a8 100644 --- a/src/components/auth/Import.js +++ b/src/components/auth/Import.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; import Form from '../../lib/Form'; import Toggle from '../ui/Toggle'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import { H1 } from '../ui/headline'; const messages = defineMessages({ diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index 84adb320f..8e1ab514e 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js @@ -10,7 +10,7 @@ import Appear from '../ui/effects/Appear'; import Form from '../../lib/Form'; import { email } from '../../helpers/validation-helpers'; import Input from '../ui/Input'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import { H1 } from '../ui/headline'; const messages = defineMessages({ diff --git a/src/components/auth/Locked.js b/src/components/auth/Locked.js index 710810f2b..90ee46722 100644 --- a/src/components/auth/Locked.js +++ b/src/components/auth/Locked.js @@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import Form from '../../lib/Form'; import Input from '../ui/Input'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import { H1 } from '../ui/headline'; import { isMac } from '../../environment'; diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js index f1c58a020..c6b26a21d 100644 --- a/src/components/auth/Login.js +++ b/src/components/auth/Login.js @@ -9,7 +9,7 @@ import { API_VERSION } from '../../environment-remote'; import Form from '../../lib/Form'; import { required, email } from '../../helpers/validation-helpers'; import Input from '../ui/Input'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import Link from '../ui/Link'; import { globalError as globalErrorPropType } from '../../prop-types'; diff --git a/src/components/auth/Password.js b/src/components/auth/Password.js index 0e87cb028..0daa4c77a 100644 --- a/src/components/auth/Password.js +++ b/src/components/auth/Password.js @@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import Form from '../../lib/Form'; import { required, email } from '../../helpers/validation-helpers'; import Input from '../ui/Input'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import Link from '../ui/Link'; import Infobox from '../ui/Infobox'; import globalMessages from '../../i18n/globalMessages'; diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js index 90f6733a6..7658eb1ff 100644 --- a/src/components/auth/SetupAssistant.js +++ b/src/components/auth/SetupAssistant.js @@ -6,7 +6,7 @@ import injectSheet from 'react-jss'; import classnames from 'classnames'; import { Input } from '../ui/input/index'; -import { Button } from '../ui/button/index'; +import Button from '../ui/button'; import { Badge } from '../ui/badge'; import Modal from '../ui/Modal'; import * as Infobox from '../ui/Infobox'; diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js index 930b24491..05b6576fa 100644 --- a/src/components/auth/Signup.js +++ b/src/components/auth/Signup.js @@ -7,7 +7,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import Form from '../../lib/Form'; import { required, email, minLength } from '../../helpers/validation-helpers'; import Input from '../ui/Input'; -import Button from '../ui/Button'; +import Button from '../ui/button'; import Link from '../ui/Link'; import { globalError as globalErrorPropType } from '../../prop-types'; diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js index cdc12b01b..a658bec8b 100644 --- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js +++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; import injectSheet from 'react-jss'; -import Button from '../../../ui/Button'; +import Button from '../../../ui/button'; import styles from './styles'; import { H1 } from '../../../ui/headline'; diff --git a/src/components/services/content/ServiceDisabled.js b/src/components/services/content/ServiceDisabled.js index da5357bf2..d874a354e 100644 --- a/src/components/services/content/ServiceDisabled.js +++ b/src/components/services/content/ServiceDisabled.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { observer } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import { H1 } from '../../ui/headline'; const messages = defineMessages({ diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js index 7e635e9ab..0e6e61be8 100644 --- a/src/components/services/content/WebviewCrashHandler.js +++ b/src/components/services/content/WebviewCrashHandler.js @@ -4,7 +4,7 @@ import { observer } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; import ms from 'ms'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import { H1 } from '../../ui/headline'; const messages = defineMessages({ diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js index 1d2d7a207..32e82940d 100644 --- a/src/components/settings/account/AccountDashboard.js +++ b/src/components/settings/account/AccountDashboard.js @@ -6,7 +6,7 @@ import ReactTooltip from 'react-tooltip'; import { H1, H2 } from '../../ui/headline'; import Loader from '../../ui/Loader'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import Infobox from '../../ui/Infobox'; import { LOCAL_SERVER, LIVE_FRANZ_API, LIVE_FERDI_API } from '../../../config'; diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js index ef41119c1..ba363ffa9 100644 --- a/src/components/settings/recipes/RecipesDashboard.js +++ b/src/components/settings/recipes/RecipesDashboard.js @@ -7,7 +7,7 @@ import { Link } from 'react-router'; import injectSheet from 'react-jss'; import { mdiOpenInNew } from '@mdi/js'; -import { Button } from '../../ui/button/index'; +import Button from '../../ui/button'; import { Input } from '../../ui/input/index'; import { H3, H2, H1 } from '../../ui/headline'; import SearchInput from '../../ui/SearchInput'; diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 8e2696e6b..42e21dbc8 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js @@ -14,7 +14,7 @@ import { TabItem } from '../../ui/Tabs/TabItem'; import Input from '../../ui/Input'; import Toggle from '../../ui/Toggle'; import Slider from '../../ui/Slider'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import ImageUpload from '../../ui/ImageUpload'; import Select from '../../ui/Select'; diff --git a/src/components/settings/services/ServiceError.js b/src/components/settings/services/ServiceError.js index bcbbca3de..991817175 100644 --- a/src/components/settings/services/ServiceError.js +++ b/src/components/settings/services/ServiceError.js @@ -4,7 +4,7 @@ import { Link } from 'react-router'; import { defineMessages, injectIntl } from 'react-intl'; import Infobox from '../../ui/Infobox'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; const messages = defineMessages({ headline: { diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index a59314eb7..3a4a48177 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js @@ -8,7 +8,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js'; import Form from '../../../lib/Form'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import Toggle from '../../ui/Toggle'; import Select from '../../ui/Select'; import Input from '../../ui/Input'; diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index 228796ad9..538a9a10c 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js @@ -7,7 +7,7 @@ import injectSheet from 'react-jss'; import classnames from 'classnames'; import Loader from '../../ui/Loader'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import Infobox from '../../ui/Infobox'; import { H1 } from '../../ui/headline'; import { LIVE_FRANZ_API } from '../../../config'; diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js index 4d101730f..fb9ef5c9a 100644 --- a/src/components/settings/user/EditUserForm.js +++ b/src/components/settings/user/EditUserForm.js @@ -6,7 +6,7 @@ import { Link } from 'react-router'; import { Input } from '../../ui/input/index'; import Form from '../../../lib/Form'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import Radio from '../../ui/Radio'; import Infobox from '../../ui/Infobox'; import { H2 } from '../../ui/headline'; diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js deleted file mode 100644 index 882b39e69..000000000 --- a/src/components/ui/Button.js +++ /dev/null @@ -1,92 +0,0 @@ -import { Component } from 'react'; -import PropTypes from 'prop-types'; -import { observer, inject } from 'mobx-react'; -import Loader from 'react-loader'; -import classnames from 'classnames'; - -// Can this file be merged into the './/button/index.tsx' file? -class Button extends Component { - static propTypes = { - className: PropTypes.string, - label: PropTypes.string.isRequired, - disabled: PropTypes.bool, - onClick: PropTypes.func, - type: PropTypes.string, - buttonType: PropTypes.string, - loaded: PropTypes.bool, - htmlForm: PropTypes.string, - stores: PropTypes.shape({ - settings: PropTypes.shape({ - app: PropTypes.shape({ - accentColor: PropTypes.string.isRequired, - }).isRequired, - }).isRequired, - }).isRequired, - }; - - static defaultProps = { - className: null, - disabled: false, - onClick: () => {}, - type: 'button', - buttonType: '', - loaded: true, - htmlForm: '', - }; - - render() { - const { - label, - className, - disabled, - onClick, - type, - buttonType, - loaded, - htmlForm, - } = this.props; - - const buttonProps = { - className: classnames({ - 'franz-form__button': true, - [`franz-form__button--${buttonType}`]: buttonType, - [`${className}`]: className, - }), - type, - }; - - if (disabled) { - buttonProps.disabled = true; - } - - if (onClick) { - buttonProps.onClick = onClick; - } - - if (htmlForm) { - buttonProps.form = htmlForm; - } - - return ( - // disabling rule as button has type defined in `buttonProps` - /* eslint-disable react/button-has-type */ - - /* eslint-enable react/button-has-type */ - ); - } -} - -export default inject('stores')(observer(Button)); diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index 11369dcbd..9c64e909a 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx @@ -30,12 +30,17 @@ interface IProps extends IFormField, WithStylesProps { icon?: string; href?: string; target?: string; + htmlForm?: string; } let buttonTransition: string = 'none'; let loaderContainerTransition: string = 'none'; -if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { +if ( + typeof window !== 'undefined' && + window && + window.matchMedia('(prefers-reduced-motion: no-preference)') +) { buttonTransition = 'background .5s, opacity 0.3s'; loaderContainerTransition = 'all 0.3s'; } @@ -187,10 +192,10 @@ class ButtonComponent extends Component { icon, href, target, + htmlForm, } = this.props; const { busy } = this.state; - let showLoader = false; if (loaded) { showLoader = !loaded; @@ -235,6 +240,7 @@ class ButtonComponent extends Component { })} disabled={disabled} data-type="franz-button" + {...(htmlForm && { form: htmlForm })} > {content} @@ -259,6 +265,6 @@ class ButtonComponent extends Component { } } -export const Button = injectStyle(styles, { injectTheme: true })( - ButtonComponent, -); +const Button = injectStyle(styles, { injectTheme: true })(ButtonComponent); + +export default Button; diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js index 8687cc09f..c1861e5f7 100644 --- a/src/components/util/ErrorBoundary/index.js +++ b/src/components/util/ErrorBoundary/index.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import injectSheet from 'react-jss'; import { defineMessages, injectIntl } from 'react-intl'; -import Button from '../../ui/Button'; +import Button from '../../ui/button'; import { H1 } from '../../ui/headline'; import styles from './styles'; -- cgit v1.2.3-70-g09d2