/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// # Dynamic Icons Component
// Implements the [Dynamic Icons design pattern](https://www.lightningdesignsystem.com/components/dynamic-icons/) in React.
import React from 'react';
import PropTypes from 'prop-types';
import classNames from '../../utilities/class-names';
import { DYNAMIC_ICON } from '../../utilities/constants';
// PropTypes for the component
const propTypes = {
/**
* **Assistive text for accessibility**
* * `label`: Used as a visually hidden label to describe the dynamic icon.
*/
assistiveText: PropTypes.shape({
label: PropTypes.string,
}),
/**
* CSS class names to be added to the icon.
*/
className: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
PropTypes.string,
]),
/**
* Pauses the icon animation if the value is true.
*/
isPaused: PropTypes.bool,
/**
* Disables icon animation if set to true
*/
isStatic: PropTypes.bool,
/**
* Polarity values for the 'score' variant. Defaults to 'positive'
*/
scorePolarity: PropTypes.oneOf(['positive', 'negative']),
/**
* Range of strength values for the 'strength' variant. Defaults to '0'.
*/
strengthLevel: PropTypes.oneOf([
'-3',
'-2',
'-1',
'0',
'1',
'2',
'3',
-3,
-2,
-1,
0,
1,
2,
3,
]),
/**
* HTML title attribute.
*/
title: PropTypes.string.isRequired,
/**
* Signals direction for the 'trend' variant. The default value 'neutral' points to the east.
*/
trendDirection: PropTypes.oneOf(['down', 'up', 'neutral']),
/**
* Different types of dynamic icons. Possible variants:
*
* `ellie` - Displays a pulsing blue circle, which pulses and stops after one animation cycle.
* `eq` - Displays an animated graph with three bars that rise and fall randomly.
* `score` - Displays a green filled circle or a red unfilled circle.
* `strength` - Displays three animated horizontal circles that are colored green or red.
* `trend` - Displays animated arrows that point up, down, or straight.
* `waffle` - Displays a 3x3 grid of dots that animates on hover.
*/
variant: PropTypes.oneOf([
'ellie',
'eq',
'score',
'strength',
'trend',
'typing',
'waffle',
]).isRequired,
};
/**
* A set of delightful animated icons.
*/
class DynamicIcon extends React.Component {
getIconChildren() {
let children = [];
let defaultAssistiveText = this.props.title
? this.props.title
: `${this.props.variant
.charAt(0)
.toUpperCase()}${this.props.variant.slice(1)}`;
if (this.props.variant === 'ellie') {
children = [
,
];
} else if (this.props.variant === 'eq') {
children = [
,
,
,
];
} else if (this.props.variant === 'score') {
children = [
,
,
];
} else if (this.props.variant === 'strength') {
children = [
,
];
} else if (this.props.variant === 'trend') {
children = [
,
];
} else if (this.props.variant === 'typing') {
children = [
,
,
,
];
if (!this.props.title) {
defaultAssistiveText = 'User is typing';
}
} else if (this.props.variant === 'waffle') {
children = [
,
];
if (!this.props.title) {
defaultAssistiveText = 'Open App Launcher';
}
}
children.push(
{this.props.assistiveText && this.props.assistiveText.label
? this.props.assistiveText.label
: defaultAssistiveText}
);
return children;
}
render() {
const children = this.getIconChildren();
const classes = [
{
'slds-is-animated': !this.props.isStatic,
'slds-is-paused': this.props.isPaused,
},
];
const iconProps = {
title: this.props.title,
};
let element = 'span';
if (this.props.variant === 'waffle') {
classes.unshift('slds-button', 'slds-icon-waffle_container');
element = 'button';
} else {
classes.unshift(`slds-icon-${this.props.variant}`);
if (this.props.variant === 'eq') {
element = 'div';
} else if (this.props.variant === 'score') {
iconProps['data-slds-state'] = this.props.scorePolarity
? this.props.scorePolarity
: 'positive';
} else if (this.props.variant === 'strength') {
iconProps['data-slds-strength'] =
this.props.strengthLevel !== undefined
? `${this.props.strengthLevel}`
: '0';
} else if (this.props.variant === 'trend') {
iconProps['data-slds-trend'] = this.props.trendDirection
? this.props.trendDirection
: 'neutral';
}
}
iconProps.className = classNames(classes, this.props.className);
return React.createElement(element, iconProps, ...children);
}
}
DynamicIcon.displayName = DYNAMIC_ICON;
DynamicIcon.propTypes = propTypes;
export default DynamicIcon;