InlineToggleButtonWidget

Source

index.js

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

import equals from 'mout/src/object/equals';

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

export default class InlineToggleButtonWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIdx: props.active || 0,
    };

    // Bind callback
    this.activateButton = this.activateButton.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    const previous = this.props;
    const next = nextProps;

    if (!equals(previous, next)) {
      this.setState({
        activeIdx: next.active || 0,
      });
    }
  }

  activateButton(e) {
    const activeIdx = Number(e.target.dataset.idx);
    this.setState({ activeIdx });
    if (this.props.onChange) {
      this.props.onChange(this.props.options[activeIdx], activeIdx);
    }
  }

  render() {
    const currentActive = this.state.activeIdx;
    const fontSize = this.props.height;
    const lineHeight = this.props.height;
    const height = this.props.height;

    return (
      <div className={style.container}>
        {this.props.options.map((obj, idx) => {
          const isActive = currentActive === idx;
          const background = isActive
            ? this.props.activeColor
            : this.props.defaultColor;
          const className =
            idx === 0
              ? isActive
                ? 'activeFirst'
                : 'first'
              : idx === this.props.options.length - 1
              ? isActive
                ? 'activeLast'
                : 'last'
              : isActive
              ? 'activeMiddle'
              : 'middle';
          if (obj.label) {
            return (
              <button
                type="button"
                style={{ lineHeight, fontSize, background }}
                key={idx}
                onClick={this.activateButton}
                data-idx={idx}
                className={style[className]}
              >
                {obj.label}
              </button>
            );
          }
          if (obj.img) {
            return (
              <div
                style={{ lineHeight, height, fontSize, background }}
                key={idx}
                onClick={this.activateButton}
                data-idx={idx}
                className={style[className]}
              >
                <img
                  data-idx={idx}
                  onClick={this.activateButton}
                  height="100%"
                  src={obj.img}
                  alt="ToggleButton"
                />
              </div>
            );
          }
          if (obj.icon) {
            return (
              <i
                key={idx}
                style={{ lineHeight, fontSize, background }}
                onClick={this.activateButton}
                data-idx={idx}
                className={[style[className], obj.icon].join(' ')}
              />
            );
          }
          return null;
        })}
      </div>
    );
  }
}

InlineToggleButtonWidget.propTypes = {
  active: PropTypes.number,
  activeColor: PropTypes.string,
  defaultColor: PropTypes.string,
  height: PropTypes.string,
  onChange: PropTypes.func,
  options: PropTypes.array.isRequired,
};

InlineToggleButtonWidget.defaultProps = {
  activeColor: '#fff',
  defaultColor: '#ccc',
  height: '1em',
  onChange: undefined,
  active: 0,
};