scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 23:57:55 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

hide validation on click outside for description

Browse source
This commit is contained in:
Eric Rosenbaum 2021-06-08 14:16:23 -04:00
parent b0a9bab71a
commit 5ba6bb83b9
1 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/views/studio/studio-description.jsx
View file

@ -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);