PresetListWidget

Properties:

activeName

The name of the currently active preset.

height

Height of each preset image. Default 1em.

onChange

A function to call when the selected preset changes. Called with the name of the new selected preset

presets

A map of preset name to preset image for all the presets that are available.

visible

Boolean, if false hide the widget.

Source

index.js

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

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

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

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

  updateActive(event) {
    const activeName = event.target.dataset.name;
    this.setState({ activeName });
    if (this.props.onChange) {
      this.props.onChange(activeName);
    }
  }

  render() {
    if (!this.props.presets || !this.props.visible) {
      return null;
    }

    const activeName = this.state.activeName;
    const height = this.props.height;
    const presets = this.props.presets;
    const names = Object.keys(presets);

    return (
      <div className={style.container}>
        <div className={style.bottomPadding} />
        {names.map((name) => (
          <img
            alt="Preset"
            src={`data:image/png;base64,${presets[name]}`}
            key={name}
            style={{ height }}
            data-name={name}
            onClick={this.updateActive}
            className={name === activeName ? style.activeLine : style.line}
          />
        ))}
        <div className={style.bottomPadding} />
      </div>
    );
  }
}

PresetListWidget.propTypes = {
  activeName: PropTypes.string,
  height: PropTypes.string,
  onChange: PropTypes.func,
  presets: PropTypes.object,
  visible: PropTypes.bool,
};

PresetListWidget.defaultProps = {
  activeName: '',
  height: '1em',
  presets: {},
  visible: true,
  onChange: undefined,
};