DropDownWidget

Source

index.js

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

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

export default class DropDownWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      field: props.field || props.fields[0],
    };

    // Bind callback
    this.setField = this.setField.bind(this);
    this.toggleDropdown = this.toggleDropdown.bind(this);
  }

  getField(e) {
    return this.state.field;
  }

  setField(e) {
    this.setState({ field: e.target.innerHTML });
    this.props.onChange(e.target.innerHTML);
  }

  toggleDropdown() {
    this.setState({ open: !this.state.open });
  }

  render() {
    return (
      <div className={style.container} onClick={this.toggleDropdown}>
        {this.state.field}
        <ul className={this.state.open ? style.list : style.hidden}>
          {this.props.fields.map((v) => {
            // this pops up in there for some reason.
            if (v === '__internal') {
              return null;
            }

            if (v === this.state.field) {
              return (
                <li
                  className={style.selectedItem}
                  key={v}
                  onClick={this.setField}
                >
                  {v}
                </li>
              );
            }

            return (
              <li className={style.item} key={v} onClick={this.setField}>
                {v}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

DropDownWidget.propTypes = {
  field: PropTypes.string,
  fields: PropTypes.array,
  onChange: PropTypes.func,
};

DropDownWidget.defaultProps = {
  field: undefined,
  fields: undefined,
  onChange: undefined,
};