ToggleIconButtonWidget

Source

index.js
import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/ToggleIconButtonWidget.mcss';

export default class ToggleIconButtonWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
enabled: props.value,
};

// Callback binding
this.buttonClicked = this.buttonClicked.bind(this);
}

componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.state.enabled) {
this.setState({ enabled: nextProps.value });
}
}

buttonClicked() {
const enabled = this.props.toggle
? !this.state.enabled
: this.state.enabled;
if (this.props.onChange) {
this.props.onChange(enabled, this.props.name);
}
if (this.props.toggle) {
this.setState({ enabled });
}
}

render() {
const classList = [this.props.className];
const enabled = this.state.enabled || this.props.alwaysOn;
if (this.props.iconDisabled) {
classList.push(enabled ? this.props.icon : this.props.iconDisabled);
classList.push(style.enabledButton);
} else {
classList.push(this.props.icon);
classList.push(enabled ? style.enabledButton : style.disabledButton);
}
return <i className={classList.join(' ')} onClick={this.buttonClicked} />;
}
}

ToggleIconButtonWidget.propTypes = {
alwaysOn: PropTypes.bool,
className: PropTypes.string,
icon: PropTypes.string,
iconDisabled: PropTypes.string,
name: PropTypes.string,
onChange: PropTypes.func,
toggle: PropTypes.bool,
value: PropTypes.bool,
};

ToggleIconButtonWidget.defaultProps = {
className: '',
value: true,
icon: 'fa-sun-o',
toggle: true,
name: 'toggle-button',
onChange: undefined,
alwaysOn: false,
iconDisabled: '',
};