feat(title): add nullable title

ambassify · May 31, 2022 · a42bc4c · a42bc4c
1 parent 6146507
commit a42bc4c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 7 deletions.
diff --git a/demo/index.js b/demo/index.js
@@ -300,6 +300,31 @@ class Demo extends React.Component {
                     </div>
                 </section>
 
+                <section>
+                    <h2>Nullable title</h2>
+                    <div>
+                        <Avatar title={false}
+                            name={this.state.name}
+                            color={getRandomColor('Jim Jones', customColors)}
+                            size={40} />
+                        <Avatar title={false}
+                            name={this.state.name}
+                            color={getRandomColor('Jamie Jones', customColors)}
+                            size={100}
+                            round={true} />
+                        <Avatar title={false}
+                            name={this.state.name}
+                            color={getRandomColor('JJ', customColors)}
+                            size={150}
+                            round="20px" />
+                        <Avatar title={false}
+                            name={this.state.name}
+                            md5Email="8c5d4c4b9ef6c68c4ff91c319d4c56be"
+                            color={getRandomColor(this.state.name, customColors)}
+                            size={200} />
+                    </div>
+                </section>
+
                 <section>
                     <h2>Initials with maximum number of characters</h2>
                     <div>

diff --git a/src/components/image.js b/src/components/image.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { parseSize } from '../utils';
+import { parseSize, getNullableText } from '../utils';
 import Wrapper from './wrapper';
 
 export default
 class AvatarImage extends React.PureComponent {
 
     static propTypes = {
         alt: PropTypes.string,
-        title: PropTypes.string,
+        title: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.bool
+        ]),
         name: PropTypes.string,
         value: PropTypes.string,
         avatar: PropTypes.object,
@@ -61,8 +64,8 @@ class AvatarImage extends React.PureComponent {
                     height={size.str}
                     style={imageStyle}
                     src={avatar.src}
-                    alt={alt || name || value}
-                    title={title || name || value}
+                    alt={getNullableText(alt, name || value)}
+                    title={getNullableText(title, name || value)}
                     onError={avatar.onRenderFailed} />
             </Wrapper>
         );

diff --git a/src/components/text.js b/src/components/text.js
@@ -1,18 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { parseSize, setGroupedTimeout } from '../utils';
 import Wrapper from './wrapper';
+import {
+    parseSize,
+    setGroupedTimeout,
+    getNullableText
+} from '../utils';
 
 export default
 class AvatarText extends React.PureComponent {
 
     static propTypes = {
-        title: PropTypes.string,
         name: PropTypes.string,
         value: PropTypes.string,
         avatar: PropTypes.object,
 
+        title: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.bool
+        ]),
+
         className: PropTypes.string,
         unstyled: PropTypes.bool,
         fgColor: PropTypes.string,
@@ -153,7 +161,7 @@ class AvatarText extends React.PureComponent {
             <Wrapper {...this.props}>
                 <div className={className + ' sb-avatar__text'}
                     style={initialsStyle}
-                    title={title || name || value}>
+                    title={getNullableText(title, name || value)}>
                     <div style={tableStyle}>
                         <span style={spanStyle}>
                             <span ref={this._scaleTextNode} key={key}>

diff --git a/src/utils.js b/src/utils.js
@@ -164,3 +164,12 @@ function setGroupedTimeout(fn, ttl) {
         callbacks.forEach(cb => cb());
     }, ttl);
 }
+
+export
+function getNullableText(...args) {
+    for (const arg of args)
+        if (arg || arg === false || arg === null)
+            return arg;
+
+    return;
+}