From 6eb5937039b4d416d2c0558d3f4b29783cc6d533 Mon Sep 17 00:00:00 2001 From: André Oliveira Date: Tue, 17 May 2022 08:42:04 +0100 Subject: Revert "remove duplicate Button component" This reverts commit bbde4a9d54d9c7dc03f34ca4113061a605dd5040. --- 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 | 12 +-- src/components/util/ErrorBoundary/index.js | 2 +- src/features/basicAuth/Component.js | 2 +- src/features/publishDebugInfo/Component.js | 2 +- .../workspaces/components/CreateWorkspaceForm.js | 2 +- .../workspaces/components/EditWorkspaceForm.js | 2 +- 25 files changed, 119 insertions(+), 31 deletions(-) create mode 100644 src/components/ui/Button.js (limited to 'src') diff --git a/src/components/auth/ChangeServer.js b/src/components/auth/ChangeServer.js index 61e0aed68..a7aa33ab1 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 e43be07a8..e7d5731f9 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 8e1ab514e..84adb320f 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 90ee46722..710810f2b 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 c6b26a21d..f1c58a020 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 0daa4c77a..0e87cb028 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 7658eb1ff..90f6733a6 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'; +import { Button } from '../ui/button/index'; 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 05b6576fa..930b24491 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 a658bec8b..cdc12b01b 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 d874a354e..da5357bf2 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 0e6e61be8..7e635e9ab 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 32e82940d..1d2d7a207 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 ba363ffa9..ef41119c1 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'; +import { Button } from '../../ui/button/index'; 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 42e21dbc8..8e2696e6b 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 991817175..bcbbca3de 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 3a4a48177..a59314eb7 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 538a9a10c..228796ad9 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 fb9ef5c9a..4d101730f 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 new file mode 100644 index 000000000..882b39e69 --- /dev/null +++ b/src/components/ui/Button.js @@ -0,0 +1,92 @@ +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 822ddf48f..11369dcbd 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx @@ -35,11 +35,7 @@ interface IProps extends IFormField, WithStylesProps { let buttonTransition: string = 'none'; let loaderContainerTransition: string = 'none'; -if ( - typeof window !== 'undefined' && - window && - window.matchMedia('(prefers-reduced-motion: no-preference)') -) { +if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { buttonTransition = 'background .5s, opacity 0.3s'; loaderContainerTransition = 'all 0.3s'; } @@ -263,6 +259,6 @@ class ButtonComponent extends Component { } } -const Button = injectStyle(styles, { injectTheme: true })(ButtonComponent); - -export default Button; +export const Button = injectStyle(styles, { injectTheme: true })( + ButtonComponent, +); diff --git a/src/components/util/ErrorBoundary/index.js b/src/components/util/ErrorBoundary/index.js index c1861e5f7..8687cc09f 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'; diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js index acba5a90d..ab5c518f8 100644 --- a/src/features/basicAuth/Component.js +++ b/src/features/basicAuth/Component.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; import Modal from '../../components/ui/Modal'; import Input from '../../components/ui/Input'; -import Button from '../../components/ui/button'; +import Button from '../../components/ui/Button'; import { state, resetState, sendCredentials, cancelLogin } from './store'; import Form from './Form'; diff --git a/src/features/publishDebugInfo/Component.js b/src/features/publishDebugInfo/Component.js index c40f8559f..ff052a050 100644 --- a/src/features/publishDebugInfo/Component.js +++ b/src/features/publishDebugInfo/Component.js @@ -7,7 +7,7 @@ import { state as ModalState } from './store'; import { H1 } from '../../components/ui/headline'; import { sendAuthRequest } from '../../api/utils/auth'; -import Button from '../../components/ui/button'; +import Button from '../../components/ui/Button'; import { Input } from '../../components/ui/input/index'; import Modal from '../../components/ui/Modal'; import { DEBUG_API } from '../../config'; diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js index aebe740d0..898afb22e 100644 --- a/src/features/workspaces/components/CreateWorkspaceForm.js +++ b/src/features/workspaces/components/CreateWorkspaceForm.js @@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import injectSheet from 'react-jss'; import { Input } from '../../../components/ui/input/index'; -import Button from '../../../components/ui/button'; +import { Button } from '../../../components/ui/button/index'; import Form from '../../../lib/Form'; import { required } from '../../../helpers/validation-helpers'; import { workspaceStore } from '../index'; diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index 9baa80e98..6829fddaa 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js @@ -7,7 +7,7 @@ import injectSheet from 'react-jss'; import { Infobox } from '../../../components/ui/infobox/index'; import { Input } from '../../../components/ui/input/index'; -import Button from '../../../components/ui/button'; +import { Button } from '../../../components/ui/button/index'; import Workspace from '../models/Workspace'; import Service from '../../../models/Service'; import Form from '../../../lib/Form'; -- cgit v1.2.3-54-g00ecf