AWV-3: Creating mixin for form button components

Packages/ohif-core/client/components/base/index.js

@@ -8,6 +8,7 @@ import './section/section.html';
 import './section/section.js';
 
 // Mixins
+import './mixins/button.js';
 import './mixins/component.js';
 import './mixins/form.js';
 import './mixins/formItem.js';

Packages/ohif-core/client/components/base/mixin.js

@@ -28,6 +28,11 @@ class Mixin {
             // Get the dependent mixin to be initizalized
             const mixin = Mixin.getMixin(dependency);
 
+            // Throw an error if a cyclic dependency was found on this mixin
+            if (mixin === this) {
+                throw new Error(`Mixin ${dependency} has a cyclic dependency.`);
+            }
+
             // Initizalize the mixin dependencies recursively
             mixin.init(template, data, applied, behaviors);
         });

Packages/ohif-core/client/components/base/mixins/button.js

@@ -0,0 +1,38 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+
+/*
+ * input: controls a button
+ */
+OHIF.mixins.button = new OHIF.Mixin({
+    dependencies: 'formItem',
+    composition: {
+        onRendered() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Set the element to be controlled
+            component.$element = instance.$('button:first');
+        },
+
+        events: {
+            'click button'(event, instance) {
+                const component = instance.component;
+
+                // Extract the action and the params
+                const { action, params } = instance.data;
+
+                // Get the current component's API
+                const api = component.getApi();
+
+                // Stop here if no API or action was defined
+                if (!api || !action || typeof api[action] !== 'function') {
+                    return;
+                }
+
+                // Call the defined action function
+                api[action].call(this, params);
+            }
+        }
+    }
+});

Packages/ohif-core/client/components/base/mixins/formItem.js

@@ -140,6 +140,32 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
             };
 
+            // Get the current component API
+            component.getApi = () => {
+                const api = instance.data.api;
+
+                // Check if the API was not given
+                if (!api) {
+                    // Stop here if the component is form and API was not given
+                    if (component.isForm) {
+                        return;
+                    }
+
+                    // Get the current component's form
+                    const form = component.getForm();
+
+                    // Stop here if the component has no form
+                    if (!form) {
+                        return;
+                    }
+
+                    return form.getApi();
+                }
+
+                // Return the given API
+                return api;
+            };
+
             // Check if the component value is valid in its form's schema
             component.validate = () => {
                 // Get the component's form

Packages/ohif-core/client/components/bootstrap/form/button.html

@@ -2,7 +2,7 @@
     {{#baseComponent (extend this
         base='baseButton'
         class=(concat 'btn ' this.class)
-        mixins=(concat 'formItem ' this.mixins)
+        mixins=(concat 'button ' this.mixins)
     )}}
         {{>UI.contentBlock}}
     {{/baseComponent}}