cspace-ui
Version:
CollectionSpace user interface for browsers
119 lines (98 loc) • 2.57 kB
JSX
import React from 'react';
import PropTypes from 'prop-types';
import Immutable from 'immutable';
import {
defineMessages,
injectIntl,
intlShape,
FormattedMessage,
} from 'react-intl';
import classNames from 'classnames';
import { components as inputComponents } from 'cspace-input';
import ErrorBadge from './ErrorBadge';
import { hasBlockingError } from '../../helpers/validationHelpers';
import styles from '../../../styles/cspace-ui/SaveButton.css';
const { Button } = inputComponents;
const messages = defineMessages({
label: {
id: 'saveButton.label',
description: 'Label of the save button.',
defaultMessage: 'Save',
},
validationErrors: {
id: 'saveButton.validationErrors',
description: 'Text of the tooltip shown when the save button is disabled due to field validation errors.',
defaultMessage: 'Field validation errors must be corrected before this record can be saved.',
},
});
const propTypes = {
className: PropTypes.string,
intl: intlShape,
isModified: PropTypes.bool,
isSavePending: PropTypes.bool,
label: PropTypes.node,
readOnly: PropTypes.bool,
validationErrors: PropTypes.instanceOf(Immutable.Map),
onClick: PropTypes.func,
onErrorBadgeClick: PropTypes.func,
};
function SaveButton(props) {
const {
className,
intl,
isModified,
isSavePending,
readOnly,
validationErrors,
onClick,
onErrorBadgeClick,
} = props;
if (readOnly) {
return null;
}
let statusClass;
if (isSavePending) {
statusClass = styles.pending;
} else if (isModified) {
statusClass = styles.normal;
} else {
statusClass = styles.done;
}
const classes = classNames(className, statusClass);
let {
label,
} = props;
if (!label) {
label = <FormattedMessage {...messages.label} />;
}
const isValidationBlocked = hasBlockingError(validationErrors);
const errorBadge = isValidationBlocked
? <ErrorBadge onClick={onErrorBadgeClick} />
: null;
const title = isValidationBlocked
? intl.formatMessage(messages.validationErrors)
: '';
const button = (
<Button
className={classes}
disabled={isValidationBlocked || isSavePending}
icon
name="save"
title={title}
onClick={onClick}
>
{label}
</Button>
);
if (errorBadge) {
return (
<div style={{ display: 'inline-block', position: 'relative' }}>
{button}
{errorBadge}
</div>
);
}
return button;
}
SaveButton.propTypes = propTypes;
export default injectIntl(SaveButton);