submit button react component for uniforms

CardBtn.js

const OLCardBtns = props => (
  <div>
    <ErrorsField />
    <div className="text-xs-right">
      <DisplayIf condition={(ctx) => ctx.error}>
        <button className="btn btn-warning disabled" disabled>
          <Fa className="remove" />
          Error
        </button>
      </DisplayIf>
      <DisplayIf condition={(ctx) => !ctx.error && !ctx.state.changed}>
        <button className="btn btn-primary disabled" disabled>
          <Fa className="ok" />
          Saved
        </button>
      </DisplayIf>
      <DisplayIf condition={(ctx) => !ctx.error && ctx.state.changed}>
        <SubmitBtn formRef={props.formRef} >
          <Fa className="save" />
          Save {props.tabName}
        </SubmitBtn>
      </DisplayIf>
    </div>
    <div className="clearfix"></div>
  </div>
);

SubmitBtn.js

/**
 * Submit Button (standard)
 * Meant to be tied into a Formable(Form)
 * If passed in w/ a formRef, it uses that submit()->Promise
 *   then can chain with an afterSubmit() or toggleOff()
 *
 * NOTE: if no formRef
 *   render as <a> (so Enter doesn't trigger as a click)
 *   render a hidden <button role="submit"/> so Enter still submits the form.
 *
 */
import _ from 'lodash';
import React from 'react';
import classnames from 'classnames';
import Fa from '../../Elements/components/Fa';

const SubmitBtnText = (props) => (
  props.children && !_.isEmpty(props.children)
    ? <span>{props.children}</span>
    : <span><Fa icon={props.fa} />{props.text}</span>
);

const onClickSubmit = (props, event) => {
  if (!props.formRef || !props.formRef.submit) {
    console.error('SubmitBtn clicked, no formRef.submit', event);
    return false;
  }
  event.preventDefault();
  props.formRef.submit().then(
    () => {
      if (props.afterSubmit) {
        props.afterSubmit();
      }
      if (props.onSaveToggleOff && props.toggleOff) {
        props.toggleOff();
      }
    },
    (err) => { console.error('Nope, did not submit', err); }
  );
  return false;
};
const SubmitBtn = (props) => (
  props.formRef ? (
    <a
      className={props.className}
      onClick={onClickSubmit.bind(null, props)}
      disabled={props.disabled}
    >
    {props.iconOnly
      ? (<Fa icon="floppy-o" />)
      : (<SubmitBtnText {...props} />)
    }
      <button role="submit" style={{ display: 'none' }} />
    </a>
  ) : (
    <button
      role="submit"
      className={props.className}
      disabled={props.disabled}
    >
    {props.iconOnly
      ? (<Fa icon="floppy-o" />)
      : (<SubmitBtnText {...props} />)
    }
    </button>
  )
);
SubmitBtn.propTypes = {
  children: React.PropTypes.any,
  iconOnly: React.PropTypes.bool,
  className: React.PropTypes.string,
  text: React.PropTypes.string,
  fa: React.PropTypes.string,
  disabled: React.PropTypes.bool,
  formRef: React.PropTypes.object,
  readOnly: React.PropTypes.bool,
  toggleOff: React.PropTypes.func,
  afterSubmit: React.PropTypes.func,
};
SubmitBtn.defaultProps = {
  className: 'btn btn-primary',
  text: 'Save',
  fa: 'floppy-o',
  iconOnly: false,
  onSaveToggleOff: false,
};
SubmitBtnText.propTypes = SubmitBtn.propTypes;

export default SubmitBtn;