Skip to content

Instantly share code, notes, and snippets.

@zeroasterisk
Last active November 21, 2016 06:54
Show Gist options
  • Save zeroasterisk/620354c7e0e93b28599fc9fdef333a5d to your computer and use it in GitHub Desktop.
Save zeroasterisk/620354c7e0e93b28599fc9fdef333a5d to your computer and use it in GitHub Desktop.
submit button react component for uniforms
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>
);
/**
* 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment