EkoButton

EkoButton is an abstract class for a button which can be extended to provide custom functionality or look & feel.
Some of the methods specified here can be overridden to tailor for required behaviors.
See the guide on customizing UI components and the live example.

Note: All Eko button components such as EkoDecisionButton & EkoParallelButton extend this class.
Note: This component exposes it’s root element as a react ref property this.containerRef.

See: EkoDecisionButton, EkoParallelButton
Example

export default class EkoButton extends React.Component {
    // Invokes all the Handlers defined on this button.
    // Override to implement any custom functionality.
    clickHandler() {...}

    // The return value of this function is used to set which CSS classes will be present in the DOM
    // for the root element of this component (default is 'ekoButton').
    getClassnames() {
        return 'ekoButton';
    }

    // The return value of this function will be used as the content of this component.
    // It can be either a string or a React component (default is the 'text' value from the config).
    getContent() { ... }
}

Example

// Creating a component that extends EkoButton:

import EkoUIComponents from 'EkoUIComponents';

export default class MyButton extends EkoUIComponents.EkoButton {
    clickHandler() {
        super.clickHandler();
        alert('button clicked');
    }

    getClassnames() {
        return `${super.getClassnames()} myButtonWrapperClass`;
    }

     getContent() {
        return (<div className="myButtonInnerContainer">{super.getContent()}</div>)
    }
}

• Table of Contents
  • Properties
    • containerRefp
  • Methods
    • clickHandlerm
    • getClassnamesm
    • getContentm
    • getLabelm

Properties

containerRef : object

property

A React ref for the root element of this component

Methods

ekoUIComponents.EkoButton.clickHandler()

method

This handler gets called on click,
Override to implement any custom functionality.

ekoUIComponents.EkoButton.getClassnames() ⇒ string

method

The return value of this function is used to set which CSS classes will be present in the DOM
for the root element of this component.

Returns: string - A string of space-delimited classes. Default is ‘ekoButton’

ekoUIComponents.EkoButton.getContent() ⇒ object | string

method

The return value of this function will be used as the content of this component.
It can be either a string or a React component.

Returns: object | string - a string or a react component representing the content of this component.

ekoUIComponents.EkoButton.getLabel() ⇒ string

method

The return value of this function will be used as the label (text) of this component.
The source of the label comes from the project’s configuration, but can also be overridden by specifying a label prop

Returns: string - a string or a react component representing the content of this component.