1 | const React = require('react');
|
2 | const PropTypes = require('prop-types');
|
3 |
|
4 | const Callout = props => {
|
5 | let { children } = props;
|
6 | const { attributes, theme, title, icon } = props;
|
7 | if (!(title || children)) return '';
|
8 |
|
9 | const content = title ? children.splice(1) : children;
|
10 | children = title ? children : '';
|
11 | return (
|
12 |
|
13 | <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
|
14 | <h3 className={`callout-heading ${!title && 'empty'}`}>
|
15 | <span className="callout-icon">{icon}</span>
|
16 | {children}
|
17 | </h3>
|
18 | {(content && content.length && content) || (!title && children)}
|
19 | </blockquote>
|
20 | );
|
21 | };
|
22 |
|
23 | Callout.propTypes = {
|
24 | attributes: PropTypes.shape({}),
|
25 | calloutStyle: PropTypes.string,
|
26 | children: PropTypes.arrayOf(PropTypes.any).isRequired,
|
27 | icon: PropTypes.string,
|
28 | node: PropTypes.shape(),
|
29 | theme: PropTypes.string,
|
30 | title: PropTypes.string,
|
31 | };
|
32 |
|
33 | Callout.defaultProps = {
|
34 | attributes: null,
|
35 | calloutStyle: 'info',
|
36 | node: null,
|
37 | };
|
38 |
|
39 | module.exports = sanitizeSchema => {
|
40 | sanitizeSchema.attributes['rdme-callout'] = ['icon', 'theme', 'title', 'value'];
|
41 | return Callout;
|
42 | };
|