MutationButton component

packages/vulcan-core/lib/modules/components/MutationButton.jsx

@@ -0,0 +1,77 @@
+import React, { PureComponent } from 'react';
+import { Components, registerComponent } from 'meteor/vulcan:lib';
+import withMutation from '../containers/withMutation';
+
+class MutationButtonWrapper extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.button = withMutation(props.mutationOptions)(MutationButton);
+  }
+
+  render() {
+    const Component = this.button;
+    return <Component {...this.props} />;
+  }
+}
+
+class MutationButton extends PureComponent {
+
+  state = {
+    loading: false,
+  };
+
+  handleClick = e => {
+    e.preventDefault();
+    this.setState({ loading: true });
+    const mutationName = this.props.mutationOptions.name;
+    const mutation = this.props[mutationName];
+    mutation(this.props.arguments).then(result => {
+      this.setState({ loading: false });
+      if(this.props.successCallback) {
+        this.props.successCallback(result);
+      }
+    }).catch(error => {
+      if(this.props.errorCallback) {
+        this.props.errorCallback(error);
+      }
+    });
+  };
+
+  render() {
+    const { loading } = this.state;
+    const mutationName = this.props.mutationOptions.name;
+
+    const { label, ...rest } = this.props;
+    delete rest[mutationName];
+    delete rest.mutationOptions;
+    delete rest.mutationArguments;
+
+    const wrapperStyle = {
+      position: 'relative',
+    };
+
+    const labelStyle = loading ? { opacity: 0.5 } : {};
+
+    const loadingStyle = loading ? {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    } : { display: 'none'};
+
+    return (
+      <Components.Button onClick={this.handleClick} {...rest}>
+        <span style={wrapperStyle}>
+          <span style={labelStyle}>{label}</span>
+          <span style={loadingStyle}><Components.Loading/></span>
+        </span>
+      </Components.Button>
+    );
+  }
+}
+
+registerComponent('MutationButton', MutationButtonWrapper);

packages/vulcan-core/lib/modules/index.js

@@ -13,6 +13,7 @@ export { default as Loading } from "./components/Loading.jsx";
 export { default as ShowIf } from "./components/ShowIf.jsx";
 export { default as NewButton } from './components/NewButton.jsx';
 export { default as EditButton } from './components/EditButton.jsx';
+export { default as MutationButton } from './components/MutationButton.jsx';
 export { default as Error404 } from './components/Error404.jsx';
 export { default as DynamicLoading } from './components/DynamicLoading.jsx';
 export { default as HeadTags } from './components/HeadTags.jsx';