text: /**
   * "Raw" Toggle - for usage without a MobX Form element
   */
  import { Component } from 'react';
  import PropTypes from 'prop-types';
  import { observer } from 'mobx-react';
  import classnames from 'classnames';
  
  class ToggleRaw extends Component {
    static propTypes = {
      onChange: PropTypes.func.isRequired,
      field: PropTypes.shape({
        value: PropTypes.bool.isRequired,
        id: PropTypes.string,
        name: PropTypes.string,
        label: PropTypes.string,
        error: PropTypes.string,
      }).isRequired,
      className: PropTypes.string,
      showLabel: PropTypes.bool,
      disabled: PropTypes.bool,
    };
  
    static defaultProps = {
      className: '',
      showLabel: true,
      disabled: false,
    };
  
    onChange(e) {
      const { onChange } = this.props;
  
      onChange(e);
    }
  
    render() {
      const { field, className, showLabel, disabled } = this.props;
  
      return (
        <div
          className={classnames([
            'franz-form__field',
            'franz-form__toggle-wrapper',
            'franz-form__toggle-disabled',
            className,
          ])}
        >
          <label
            htmlFor={field.id}
            className={classnames({
              'franz-form__toggle': true,
              'is-active': field.value,
            })}
          >
            <div className="franz-form__toggle-button" />
            <input
              type="checkbox"
              id={field.id}
              name={field.name}
              value={field.name}
              checked={field.value}
              onChange={e => (!disabled ? this.onChange(e) : null)}
            />
          </label>
          {field.error && <div className={field.error}>{field.error}</div>}
          {field.label && showLabel && (
            <label className="franz-form__label" htmlFor={field.id}>
              {field.label}
            </label>
          )}
        </div>
      );
    }
  }
  
  export default observer(ToggleRaw);
  