Sha256: b369b89d4836d95e8682fa396393e13b0e568ce8ae48b71f1b5dd3126f336bbc
Contents?: true
Size: 1.17 KB
Versions: 7
Compression:
Stored size: 1.17 KB
Contents
import * as PropTypes from 'prop-types';
import React from 'react';
import { Banner, TextStyle } from '@shopify/polaris';
const ErrorBanner = ({ errors, prologue }) => {
const errorKeys = () => Object.keys(errors).sort();
const errorCount = () => errorKeys().length;
const errorMessage = () => {
let msg = '1 field needs changes';
if (errorCount() > 1) {
msg = `${errorCount()} fields need changes`;
}
return msg;
};
const separator = index => {
if (index === 0) return ' ';
if (index === errorCount() - 1) return ' and ';
return ', ';
};
if (errorCount() === 0) return null;
return (
<Banner status="critical">
<p>
{prologue},{errorMessage()}:
{errorKeys().map((key, index) => (
<span>
{separator(index)}
<TextStyle key="error-{index}" variation="strong">
{key}
</TextStyle>
</span>
))}
.
</p>
</Banner>
);
};
ErrorBanner.defaultProps = {
errors: {},
prologue: 'To save this form'
};
ErrorBanner.propTypes = {
errors: PropTypes.shape({}),
prologue: PropTypes.string
};
export default ErrorBanner;
Version data entries
7 entries across 7 versions & 1 rubygems