Add Progressable Button
This commit is contained in:
Eric Schultz
parent
607b654091
commit
f323295805
3 changed files with 227 additions and 0 deletions
|
|
@ -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()
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
43
javascripts/src/components/common/ProgressableButton.tsx
Normal file
43
javascripts/src/components/common/ProgressableButton.tsx
Normal file
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
|
@ -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>
|
||||
`;
|
||||
Loading…
Reference in a new issue