-
-
Save brianbier/b8b5c66a4833eaf7a33bc7f5755406ab to your computer and use it in GitHub Desktop.
LightningProgressRing component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<aura:component > | |
<aura:attribute name="value" type="Integer" default="0" /> | |
<aura:attribute name="variant" type="String" /> | |
<aura:attribute name="hasVariant" type="Boolean" access="private" default="{!false}" /> | |
<aura:attribute name="ringClass" type="String" access="private" /> | |
<aura:attribute name="iconName" type="String" access="private" /> | |
<aura:attribute name="altText" type="String" access="private" /> | |
<aura:handler name="init" value="{!this}" action="{!c.updateView}" /> | |
<aura:handler name="change" value="{!v.value}" action="{!c.updateView}" /> | |
<aura:handler name="change" value="{!v.variant}" action="{!c.updateView}" /> | |
<div class="{!v.ringClass}"> | |
<div id="progressContainer" class="slds-progress-ring__progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.value}"> | |
</div> | |
<div class="slds-progress-ring__content"> | |
<aura:if isTrue="{!v.hasVariant}"> | |
<lightning:icon iconName="{!v.iconName}" size="xx-small" title="{!v.altText}" alternativeText="{!v.altText}" /> | |
</aura:if> | |
</div> | |
</div> | |
</aura:component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
updateView: function(component, event, helper) { | |
var variant = component.get("v.variant"), | |
hasVariant = variant == "warning" || variant == "expired", | |
style = "slds-progress-ring", | |
iconName, | |
altText; | |
if(hasVariant) { | |
style = style + " " + style + "_" + variant; | |
iconName = "utility:"+({ warning: "warning", expired: "error" }[variant]); | |
altText = { warning: "Warning", expired: "Expired" }[variant]; | |
} | |
component.set("v.ringClass", style); | |
component.set("v.hasVariant", hasVariant); | |
component.set("v.iconName", iconName); | |
component.set("v.altText", altText) | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
({ | |
// Create SVG, path, populate with default values from controller | |
render: function(component, helper) { | |
var result = this.superRender(), | |
xmlns = "http://www.w3.org/2000/svg", | |
updateContainer = result[0].querySelector("#progressContainer"), | |
value = component.get("v.value"), | |
dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+ | |
Math.cos(2 * Math.PI * value / 100)+" "+ | |
Math.sin(2 * Math.PI * value / 100)+" L 0 0", | |
svg = document.createElementNS(xmlns,"svg"), | |
path = document.createElementNS(xmlns,"path"); | |
svg.setAttributeNS(null,"viewBox", "-1 -1 2 2"); | |
path.setAttributeNS(null, "class", "slds-progress-ring__path"); | |
path.setAttributeNS(null, "d", dValue); | |
svg.appendChild(path); | |
updateContainer.appendChild(svg); | |
return result; | |
}, | |
// Update the progress bar on a rerender event | |
rerender: function(component, helper) { | |
var value = component.get("v.value"), | |
dValue = "M 1 0 A 1 1 0 "+Math.floor(value / 50)+" 1 "+ | |
Math.cos(2 * Math.PI * value / 100)+" "+ | |
Math.sin(2 * Math.PI * value / 100)+" L 0 0", | |
svg = component.getElement().querySelector("svg"), | |
path = svg.childNodes[0]; | |
this.superRerender(); | |
path.setAttributeNS(null, "d", dValue); | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment