From f323295805218c6f96da78e840cbe3bcb59c681f Mon Sep 17 00:00:00 2001
From: Eric Schultz <eric@wwahammy.com>
Date: Wed, 27 Jun 2018 16:19:30 -0500
Subject: [PATCH] Add Progressable Button

---
 .../common/ProgressableButton.spec.tsx        |  72 +++++++++++
 .../components/common/ProgressableButton.tsx  |  43 +++++++
 .../ProgressableButton.spec.tsx.snap          | 112 ++++++++++++++++++
 3 files changed, 227 insertions(+)
 create mode 100644 javascripts/src/components/common/ProgressableButton.spec.tsx
 create mode 100644 javascripts/src/components/common/ProgressableButton.tsx
 create mode 100644 javascripts/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap

diff --git a/javascripts/src/components/common/ProgressableButton.spec.tsx b/javascripts/src/components/common/ProgressableButton.spec.tsx
new file mode 100644
index 00000000..e2b651e3
--- /dev/null
+++ b/javascripts/src/components/common/ProgressableButton.spec.tsx
@@ -0,0 +1,72 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+import 'jest';
+import ProgressableButton from './ProgressableButton'
+import toJson from 'enzyme-to-json';
+import {shallow, mount} from 'enzyme';
+
+describe('ProgressableButton', () => {
+  test('Basic title button works', () => {
+    let output = shallow(
+      <ProgressableButton onClick={() => console.log('alert!')} title={"nothing"}  data-label="button"/>)
+    expect(toJson(output)).toMatchSnapshot()
+  })
+
+  test('Progress means we change the title, dont disable and do turn on spinner', () => {
+    let output = mount(
+      <ProgressableButton onClick={() => console.log('alert!')}
+                          title={"nothing"}
+                          data-label="button"
+                          titleOnProgress={"onProgress"}
+                          inProgress={true}
+                          disableOnProgress={false}
+
+                          />)
+    expect(toJson(output)).toMatchSnapshot()
+  })
+
+  test('Progress means we change the title, disable and do turn on spinner', () => {
+    let output = mount(
+      <ProgressableButton onClick={() => console.log('alert!')}
+                          title={"nothing"}
+                          data-label="button"
+                          titleOnProgress={"onProgress"}
+                          inProgress={true}
+                          disableOnProgress={true}
+
+      />)
+    expect(toJson(output)).toMatchSnapshot()
+  })
+
+
+  test('Disabled manually set overrides whether we disable on progress when in progress', () => {
+    let output = mount(
+      <ProgressableButton onClick={() => console.log('alert!')}
+                          title={"nothing"}
+                          data-label="button"
+                          titleOnProgress={"onProgress"}
+                          inProgress={true}
+                          disableOnProgress={false}
+                          disabled={true}
+
+      />)
+    expect(toJson(output)).toMatchSnapshot()
+  })
+
+
+  test('Disabled manually set overrides whether we disable on progress when NOT in progress', () => {
+    let output = mount(
+      <ProgressableButton onClick={() => console.log('alert!')}
+                          title={"nothing"}
+                          data-label="button"
+                          titleOnProgress={"onProgress"}
+                          inProgress={false}
+                          disableOnProgress={true}
+                          disabled={true}
+
+      />)
+    expect(toJson(output)).toMatchSnapshot()
+  })
+
+
+})
\ No newline at end of file
diff --git a/javascripts/src/components/common/ProgressableButton.tsx b/javascripts/src/components/common/ProgressableButton.tsx
new file mode 100644
index 00000000..979308fd
--- /dev/null
+++ b/javascripts/src/components/common/ProgressableButton.tsx
@@ -0,0 +1,43 @@
+// License: LGPL-3.0-or-later
+import * as React from 'react';
+import * as _ from 'lodash'
+import { observer } from 'mobx-react';
+import {InjectedIntlProps, injectIntl} from 'react-intl';
+
+export interface ProgressableButtonProps
+{
+  title:string
+  titleOnProgress?:string
+  inProgress?:boolean
+  disableOnProgress?:boolean
+  disabled?:boolean
+  [props:string]: any
+}
+
+@observer
+class ProgressableButton extends React.Component<ProgressableButtonProps, {}> {
+  render() {
+    let ourData: {title: string, disabled: boolean, prefix: JSX.Element|null}= {
+      title:this.props.title,
+      disabled:this.props.disabled,
+      prefix: null
+    }
+
+    if (this.props.inProgress){
+      ourData.title = this.props.titleOnProgress
+      ourData.disabled = ourData.disabled || this.props.disableOnProgress
+      ourData.prefix = <i className='fa fa-spin fa-spinner'></i>
+    }
+
+    let props = _.omit(this.props, ['title', 'disableOnProgress', 'titleOnProgress', 'inProgress'])
+
+
+    return <button {...props} className="button"  disabled={ourData.disabled}>
+      <span>{ourData.prefix}{ourData.title}</span></button>;
+  }
+}
+
+export default ProgressableButton
+
+
+
diff --git a/javascripts/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap b/javascripts/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap
new file mode 100644
index 00000000..a99179bf
--- /dev/null
+++ b/javascripts/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressableButton Basic title button works 1`] = `
+<button
+  className="button"
+  data-label="button"
+  onClick={[Function]}
+>
+  <span>
+    nothing
+  </span>
+</button>
+`;
+
+exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = `
+<ProgressableButton
+  data-label="button"
+  disableOnProgress={true}
+  disabled={true}
+  inProgress={false}
+  onClick={[Function]}
+  title="nothing"
+  titleOnProgress="onProgress"
+>
+  <button
+    className="button"
+    data-label="button"
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span>
+      nothing
+    </span>
+  </button>
+</ProgressableButton>
+`;
+
+exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = `
+<ProgressableButton
+  data-label="button"
+  disableOnProgress={false}
+  disabled={true}
+  inProgress={true}
+  onClick={[Function]}
+  title="nothing"
+  titleOnProgress="onProgress"
+>
+  <button
+    className="button"
+    data-label="button"
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span>
+      <i
+        className="fa fa-spin fa-spinner"
+      />
+      onProgress
+    </span>
+  </button>
+</ProgressableButton>
+`;
+
+exports[`ProgressableButton Progress means we change the title, disable and do turn on spinner 1`] = `
+<ProgressableButton
+  data-label="button"
+  disableOnProgress={true}
+  inProgress={true}
+  onClick={[Function]}
+  title="nothing"
+  titleOnProgress="onProgress"
+>
+  <button
+    className="button"
+    data-label="button"
+    disabled={true}
+    onClick={[Function]}
+  >
+    <span>
+      <i
+        className="fa fa-spin fa-spinner"
+      />
+      onProgress
+    </span>
+  </button>
+</ProgressableButton>
+`;
+
+exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `
+<ProgressableButton
+  data-label="button"
+  disableOnProgress={false}
+  inProgress={true}
+  onClick={[Function]}
+  title="nothing"
+  titleOnProgress="onProgress"
+>
+  <button
+    className="button"
+    data-label="button"
+    disabled={false}
+    onClick={[Function]}
+  >
+    <span>
+      <i
+        className="fa fa-spin fa-spinner"
+      />
+      onProgress
+    </span>
+  </button>
+</ProgressableButton>
+`;