Merge pull request #5568 from ericrosenbaum/hide-validation

Hide validation message on click outside

src/redux/studio-mutations.js

@@ -173,13 +173,14 @@ const mutateFollowingStudio = shouldFollow => ((dispatch, getState) => {
 });
 
 const mutateStudioImage = input => ((dispatch, getState) => {
-    if (!input.files || !input.files[0]) return;
+    if (!input.files || !input.files[0]) return Promise.reject(new Error('no file'));
     const state = getState();
     const studioId = selectStudioId(state);
     const currentImage = selectStudioImage(state);
     dispatch(startMutation('image'));
     if (input.files[0].size && input.files[0].size > MAX_IMAGE_BYTES) {
-        return dispatch(completeMutation('image', currentImage, Errors.THUMBNAIL_TOO_LARGE));
+        dispatch(completeMutation('image', currentImage, Errors.THUMBNAIL_TOO_LARGE));
+        return Promise.reject(new Error('thumbnail too large'));
     }
     const formData = new FormData();
     formData.append('file', input.files[0]);

src/views/studio/studio-description.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
+import onClickOutside from 'react-onclickoutside';
 
 import {selectStudioDescription, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
@@ -28,6 +29,11 @@ const StudioDescription = ({
     descriptionError, isFetching, isMutating, isMutedEditor, description, canEditInfo, handleUpdate
 }) => {
     const [showMuteMessage, setShowMuteMessage] = useState(false);
+    const [hideValidationMessage, setHideValidationMessage] = useState(false);
+
+    StudioDescription.handleClickOutside = () => {
+        setHideValidationMessage(true);
+    };
 
     const fieldClassName = classNames('studio-description', {
         'mod-fetching': isFetching,
@@ -49,10 +55,12 @@ const StudioDescription = ({
                         className={fieldClassName}
                         disabled={isMutating || isFetching || isMutedEditor}
                         defaultValue={description}
-                        onBlur={e => e.target.value !== description &&
-                    handleUpdate(e.target.value)}
+                        onBlur={e => {
+                            if (e.target.value !== description) handleUpdate(e.target.value);
+                            setHideValidationMessage(false);
+                        }}
                     />
-                    {descriptionError && <ValidationMessage
+                    {descriptionError && !hideValidationMessage && <ValidationMessage
                         mode="error"
                         message={<FormattedMessage id={errorToMessageId(descriptionError)} />}
                     />}
@@ -71,6 +79,10 @@ const StudioDescription = ({
     );
 };
 
+const clickOutsideConfig = {
+    handleClickOutside: () => StudioDescription.handleClickOutside
+};
+
 StudioDescription.propTypes = {
     descriptionError: PropTypes.string,
     canEditInfo: PropTypes.bool,
@@ -81,7 +93,7 @@ StudioDescription.propTypes = {
     handleUpdate: PropTypes.func
 };
 
-export default connect(
+const connectedStudioDescription = connect(
     state => ({
         description: selectStudioDescription(state),
         canEditInfo: selectCanEditInfo(state),
@@ -94,3 +106,5 @@ export default connect(
         handleUpdate: mutateStudioDescription
     }
 )(StudioDescription);
+
+export default onClickOutside(connectedStudioDescription, clickOutsideConfig);

src/views/studio/studio-image.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
+import onClickOutside from 'react-onclickoutside';
 
 import {selectStudioImage, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
@@ -14,7 +15,6 @@ import {
 import ValidationMessage from '../../components/forms/validation-message.jsx';
 import StudioMuteEditMessage from './studio-mute-edit-message.jsx';
 
-
 import editIcon from './icons/edit-icon.svg';
 
 const errorToMessageId = error => {
@@ -43,6 +43,11 @@ const StudioImage = ({
     });
 
     const [showMuteMessage, setShowMuteMessage] = useState(false);
+    const [hideValidationMessage, setHideValidationMessage] = useState(false);
+
+    StudioImage.handleClickOutside = () => {
+        setHideValidationMessage(true);
+    };
     return (
         <div
             className={fieldClassName}
@@ -76,11 +81,13 @@ const StudioImage = ({
                         accept="image/*"
                         onChange={e => {
                             handleUpdate(e.target)
+                                .catch(() => { /* errors are handled in the reducer */ })
                                 .then(dataUrl => setUploadPreview(dataUrl));
                             e.target.value = '';
+                            setHideValidationMessage(false);
                         }}
                     />
-                    {imageError && <ValidationMessage
+                    {imageError && !hideValidationMessage && <ValidationMessage
                         mode="error"
                         message={<FormattedMessage id={errorToMessageId(imageError)} />}
                     />}
@@ -91,6 +98,10 @@ const StudioImage = ({
     );
 };
 
+const clickOutsideConfig = {
+    handleClickOutside: () => StudioImage.handleClickOutside
+};
+
 StudioImage.propTypes = {
     imageError: PropTypes.string,
     canEditInfo: PropTypes.bool,
@@ -101,7 +112,7 @@ StudioImage.propTypes = {
     handleUpdate: PropTypes.func
 };
 
-export default connect(
+const connectedStudioImage = connect(
     state => ({
         image: selectStudioImage(state),
         canEditInfo: selectCanEditInfo(state),
@@ -114,3 +125,5 @@ export default connect(
         handleUpdate: mutateStudioImage
     }
 )(StudioImage);
+
+export default onClickOutside(connectedStudioImage, clickOutsideConfig);

src/views/studio/studio-title.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import classNames from 'classnames';
 import {FormattedMessage} from 'react-intl';
+import onClickOutside from 'react-onclickoutside';
 
 import {selectStudioTitle, selectIsFetchingInfo} from '../../redux/studio';
 import {selectCanEditInfo, selectShowEditMuteError} from '../../redux/studio-permissions';
@@ -31,6 +32,11 @@ const StudioTitle = ({
     });
 
     const [showMuteMessage, setShowMuteMessage] = useState(false);
+    const [hideValidationMessage, setHideValidationMessage] = useState(false);
+
+    StudioTitle.handleClickOutside = () => {
+        setHideValidationMessage(true);
+    };
 
     return (
         <div
@@ -45,10 +51,12 @@ const StudioTitle = ({
                         disabled={isMutating || !canEditInfo || isFetching}
                         defaultValue={title}
                         onKeyDown={e => e.key === 'Enter' && e.target.blur()}
-                        onBlur={e => e.target.value !== title &&
-                            handleUpdate(e.target.value)}
+                        onBlur={e => {
+                            if (e.target.value !== title) handleUpdate(e.target.value);
+                            setHideValidationMessage(false);
+                        }}
                     />
-                    {titleError && <ValidationMessage
+                    {titleError && !hideValidationMessage && <ValidationMessage
                         mode="error"
                         message={<FormattedMessage id={errorToMessageId(titleError)} />}
                     />}
@@ -61,6 +69,10 @@ const StudioTitle = ({
     );
 };
 
+const clickOutsideConfig = {
+    handleClickOutside: () => StudioTitle.handleClickOutside
+};
+
 StudioTitle.propTypes = {
     titleError: PropTypes.string,
     canEditInfo: PropTypes.bool,
@@ -71,7 +83,7 @@ StudioTitle.propTypes = {
     handleUpdate: PropTypes.func
 };
 
-export default connect(
+const connectedStudioTitle = connect(
     state => ({
         title: selectStudioTitle(state),
         canEditInfo: selectCanEditInfo(state),
@@ -84,3 +96,5 @@ export default connect(
         handleUpdate: mutateStudioTitle
     }
 )(StudioTitle);
+
+export default onClickOutside(connectedStudioTitle, clickOutsideConfig);