onClick is missing [Feature request]

[Haocen]

I think an onClick handler should be added to the possible configuration options.

We currently have onClose and onShow.

I surely know one can supply confirmation button in html or modify template(I'm currently doing this) in order to achieve this, but it would be great if we can have native support.

Expected default template with onClick support:

import React from 'react';
import PropTypes from 'prop-types';

class SAlertContentTmpl extends React.Component {
  render() {
    return (
      <div role="button" tabIndex="-1" onClick={this.props.handleClick} className={this.props.classNames} id={this.props.id} style={this.props.styles}>
        <div className="s-alert-box-inner">
          {this.props.message}
        </div>
        <span role="button" tabIndex="-1" className="s-alert-close" onClick={this.props.handleClose} />
      </div>
    );
  }
}

SAlertContentTmpl.defaultProps = {
  customFields: null
};

SAlertContentTmpl.propTypes = {
  id: PropTypes.string.isRequired,
  classNames: PropTypes.string.isRequired,
  styles: PropTypes.object.isRequired,
  message: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.object
  ]).isRequired,
  handleClick: PropTypes.func.isRequired,
  handleClose: PropTypes.func.isRequired,
  customFields: PropTypes.object // eslint-disable-line react/no-unused-prop-types
};

export default SAlertContentTmpl;

[marknote]

Agree! onClick is a common scenario so it is good to include in native support. Based on @Haocen 's code, I added a default onClick that to dismiss the current alert.

import React from 'react';
import PropTypes from 'prop-types';

import Alert from 'react-s-alert';

class SAlertContentTmpl extends React.Component {
    constructor(props){
        super(props);
        this.defaultClickHandler = this.defaultClickHandler.bind(this);
    }
    defaultClickHandler() {

        Alert.close(this.props.id);
    }
    render() {
        var clickAction = this.props.handleClick ? this.props.handleClick : this.defaultClickHandler;
        return (
            <div role="button" tabIndex="-1" onClick={clickAction} className={this.props.classNames} id={this.props.id} style={this.props.styles}>
                <div className="s-alert-box-inner">
                    {this.props.message}
                </div>
                <span role="button" tabIndex="-1" className="s-alert-close" onClick={this.props.handleClose} />
            </div>
        );
    }
}

SAlertContentTmpl.defaultProps = {
    customFields: null
};

SAlertContentTmpl.propTypes = {
    id: PropTypes.string.isRequired,
    classNames: PropTypes.string.isRequired,
    styles: PropTypes.object.isRequired,
    message: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.object
    ]).isRequired,
    handleClick: PropTypes.func,
    handleClose: PropTypes.func.isRequired,
    customFields: PropTypes.object // eslint-disable-line react/no-unused-prop-types
};

export default SAlertContentTmpl;