Rename attributes from title->buttonText and titleOnProgress->buttonTextOnProgress for ProgressableButton
This commit is contained in:
parent
e6f51940de
commit
6eeb2639f2
7 changed files with 56 additions and 43 deletions
|
@ -8,16 +8,16 @@ import {shallow, mount} from 'enzyme';
|
||||||
describe('ProgressableButton', () => {
|
describe('ProgressableButton', () => {
|
||||||
test('Basic title button works', () => {
|
test('Basic title button works', () => {
|
||||||
let output = shallow(
|
let output = shallow(
|
||||||
<ProgressableButton onClick={() => console.log('alert!')} title={"nothing"} data-label="button"/>)
|
<ProgressableButton onClick={() => console.log('alert!')} buttonText={"nothing"} data-label="button"/>)
|
||||||
expect(toJson(output)).toMatchSnapshot()
|
expect(toJson(output)).toMatchSnapshot()
|
||||||
})
|
})
|
||||||
|
|
||||||
test('Progress means we change the title, dont disable and do turn on spinner', () => {
|
test('Progress means we change the title, dont disable and do turn on spinner', () => {
|
||||||
let output = mount(
|
let output = mount(
|
||||||
<ProgressableButton onClick={() => console.log('alert!')}
|
<ProgressableButton onClick={() => console.log('alert!')}
|
||||||
title={"nothing"}
|
buttonText={"nothing"}
|
||||||
data-label="button"
|
data-label="button"
|
||||||
titleOnProgress={"onProgress"}
|
buttonTextOnProgress={"onProgress"}
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
disableOnProgress={false}
|
disableOnProgress={false}
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@ describe('ProgressableButton', () => {
|
||||||
test('Title is kept on progress if no titleOnProgress is set', () => {
|
test('Title is kept on progress if no titleOnProgress is set', () => {
|
||||||
let output = mount(
|
let output = mount(
|
||||||
<ProgressableButton onClick={() => console.log('alert!')}
|
<ProgressableButton onClick={() => console.log('alert!')}
|
||||||
title={"nothing"}
|
buttonText={"nothing"}
|
||||||
data-label="button"
|
data-label="button"
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
|
|
||||||
|
@ -39,9 +39,9 @@ describe('ProgressableButton', () => {
|
||||||
test('Progress means we change the title, disable and do turn on spinner', () => {
|
test('Progress means we change the title, disable and do turn on spinner', () => {
|
||||||
let output = mount(
|
let output = mount(
|
||||||
<ProgressableButton onClick={() => console.log('alert!')}
|
<ProgressableButton onClick={() => console.log('alert!')}
|
||||||
title={"nothing"}
|
buttonText={"nothing"}
|
||||||
data-label="button"
|
data-label="button"
|
||||||
titleOnProgress={"onProgress"}
|
buttonTextOnProgress={"onProgress"}
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
disableOnProgress={true}
|
disableOnProgress={true}
|
||||||
|
|
||||||
|
@ -53,9 +53,9 @@ describe('ProgressableButton', () => {
|
||||||
test('Disabled manually set overrides whether we disable on progress when in progress', () => {
|
test('Disabled manually set overrides whether we disable on progress when in progress', () => {
|
||||||
let output = mount(
|
let output = mount(
|
||||||
<ProgressableButton onClick={() => console.log('alert!')}
|
<ProgressableButton onClick={() => console.log('alert!')}
|
||||||
title={"nothing"}
|
buttonText={"nothing"}
|
||||||
data-label="button"
|
data-label="button"
|
||||||
titleOnProgress={"onProgress"}
|
buttonTextOnProgress={"onProgress"}
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
disableOnProgress={false}
|
disableOnProgress={false}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
|
@ -68,9 +68,9 @@ describe('ProgressableButton', () => {
|
||||||
test('Disabled manually set overrides whether we disable on progress when NOT in progress', () => {
|
test('Disabled manually set overrides whether we disable on progress when NOT in progress', () => {
|
||||||
let output = mount(
|
let output = mount(
|
||||||
<ProgressableButton onClick={() => console.log('alert!')}
|
<ProgressableButton onClick={() => console.log('alert!')}
|
||||||
title={"nothing"}
|
buttonText={"nothing"}
|
||||||
data-label="button"
|
data-label="button"
|
||||||
titleOnProgress={"onProgress"}
|
buttonTextOnProgress={"onProgress"}
|
||||||
inProgress={false}
|
inProgress={false}
|
||||||
disableOnProgress={true}
|
disableOnProgress={true}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
|
|
|
@ -6,8 +6,8 @@ import {InjectedIntlProps, injectIntl} from 'react-intl';
|
||||||
|
|
||||||
export interface ProgressableButtonProps
|
export interface ProgressableButtonProps
|
||||||
{
|
{
|
||||||
title:string
|
buttonText:string
|
||||||
titleOnProgress?:string
|
buttonTextOnProgress?:string
|
||||||
inProgress?:boolean
|
inProgress?:boolean
|
||||||
disableOnProgress?:boolean
|
disableOnProgress?:boolean
|
||||||
disabled?:boolean
|
disabled?:boolean
|
||||||
|
@ -18,18 +18,18 @@ export interface ProgressableButtonProps
|
||||||
class ProgressableButton extends React.Component<ProgressableButtonProps, {}> {
|
class ProgressableButton extends React.Component<ProgressableButtonProps, {}> {
|
||||||
render() {
|
render() {
|
||||||
let ourData: {title: string, disabled: boolean, prefix: JSX.Element|null}= {
|
let ourData: {title: string, disabled: boolean, prefix: JSX.Element|null}= {
|
||||||
title:this.props.title,
|
title:this.props.buttonText,
|
||||||
disabled:this.props.disabled,
|
disabled:this.props.disabled,
|
||||||
prefix: null
|
prefix: null
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.inProgress){
|
if (this.props.inProgress){
|
||||||
ourData.title = this.props.titleOnProgress || this.props.title
|
ourData.title = this.props.buttonTextOnProgress || this.props.buttonText
|
||||||
ourData.disabled = ourData.disabled || this.props.disableOnProgress
|
ourData.disabled = ourData.disabled || this.props.disableOnProgress
|
||||||
ourData.prefix = <span><i className='fa fa-spin fa-spinner'></i> </span>
|
ourData.prefix = <span><i className='fa fa-spin fa-spinner'></i> </span>
|
||||||
}
|
}
|
||||||
|
|
||||||
let props = _.omit(this.props, ['title', 'disableOnProgress', 'titleOnProgress', 'inProgress'])
|
let props = _.omit(this.props, ['buttonText', 'disableOnProgress', 'buttonTextOnProgress', 'inProgress'])
|
||||||
|
|
||||||
|
|
||||||
return <button {...props} className="button" disabled={ourData.disabled}>
|
return <button {...props} className="button" disabled={ourData.disabled}>
|
||||||
|
|
|
@ -14,13 +14,13 @@ exports[`ProgressableButton Basic title button works 1`] = `
|
||||||
|
|
||||||
exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = `
|
exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when NOT in progress 1`] = `
|
||||||
<ProgressableButton
|
<ProgressableButton
|
||||||
|
buttonText="nothing"
|
||||||
|
buttonTextOnProgress="onProgress"
|
||||||
data-label="button"
|
data-label="button"
|
||||||
disableOnProgress={true}
|
disableOnProgress={true}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
inProgress={false}
|
inProgress={false}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
title="nothing"
|
|
||||||
titleOnProgress="onProgress"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="button"
|
className="button"
|
||||||
|
@ -37,13 +37,13 @@ exports[`ProgressableButton Disabled manually set overrides whether we disable o
|
||||||
|
|
||||||
exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = `
|
exports[`ProgressableButton Disabled manually set overrides whether we disable on progress when in progress 1`] = `
|
||||||
<ProgressableButton
|
<ProgressableButton
|
||||||
|
buttonText="nothing"
|
||||||
|
buttonTextOnProgress="onProgress"
|
||||||
data-label="button"
|
data-label="button"
|
||||||
disableOnProgress={false}
|
disableOnProgress={false}
|
||||||
disabled={true}
|
disabled={true}
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
title="nothing"
|
|
||||||
titleOnProgress="onProgress"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="button"
|
className="button"
|
||||||
|
@ -52,9 +52,12 @@ exports[`ProgressableButton Disabled manually set overrides whether we disable o
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<i
|
<span>
|
||||||
className="fa fa-spin fa-spinner"
|
<i
|
||||||
/>
|
className="fa fa-spin fa-spinner"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</span>
|
||||||
onProgress
|
onProgress
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -63,12 +66,12 @@ exports[`ProgressableButton Disabled manually set overrides whether we disable o
|
||||||
|
|
||||||
exports[`ProgressableButton Progress means we change the title, disable and do turn on spinner 1`] = `
|
exports[`ProgressableButton Progress means we change the title, disable and do turn on spinner 1`] = `
|
||||||
<ProgressableButton
|
<ProgressableButton
|
||||||
|
buttonText="nothing"
|
||||||
|
buttonTextOnProgress="onProgress"
|
||||||
data-label="button"
|
data-label="button"
|
||||||
disableOnProgress={true}
|
disableOnProgress={true}
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
title="nothing"
|
|
||||||
titleOnProgress="onProgress"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="button"
|
className="button"
|
||||||
|
@ -77,9 +80,12 @@ exports[`ProgressableButton Progress means we change the title, disable and do t
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<i
|
<span>
|
||||||
className="fa fa-spin fa-spinner"
|
<i
|
||||||
/>
|
className="fa fa-spin fa-spinner"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</span>
|
||||||
onProgress
|
onProgress
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -88,12 +94,12 @@ exports[`ProgressableButton Progress means we change the title, disable and do t
|
||||||
|
|
||||||
exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `
|
exports[`ProgressableButton Progress means we change the title, dont disable and do turn on spinner 1`] = `
|
||||||
<ProgressableButton
|
<ProgressableButton
|
||||||
|
buttonText="nothing"
|
||||||
|
buttonTextOnProgress="onProgress"
|
||||||
data-label="button"
|
data-label="button"
|
||||||
disableOnProgress={false}
|
disableOnProgress={false}
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
title="nothing"
|
|
||||||
titleOnProgress="onProgress"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="button"
|
className="button"
|
||||||
|
@ -102,9 +108,12 @@ exports[`ProgressableButton Progress means we change the title, dont disable and
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<i
|
<span>
|
||||||
className="fa fa-spin fa-spinner"
|
<i
|
||||||
/>
|
className="fa fa-spin fa-spinner"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</span>
|
||||||
onProgress
|
onProgress
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -113,10 +122,10 @@ exports[`ProgressableButton Progress means we change the title, dont disable and
|
||||||
|
|
||||||
exports[`ProgressableButton Title is kept on progress if no titleOnProgress is set 1`] = `
|
exports[`ProgressableButton Title is kept on progress if no titleOnProgress is set 1`] = `
|
||||||
<ProgressableButton
|
<ProgressableButton
|
||||||
|
buttonText="nothing"
|
||||||
data-label="button"
|
data-label="button"
|
||||||
inProgress={true}
|
inProgress={true}
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
title="nothing"
|
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="button"
|
className="button"
|
||||||
|
@ -124,9 +133,12 @@ exports[`ProgressableButton Title is kept on progress if no titleOnProgress is s
|
||||||
onClick={[Function]}
|
onClick={[Function]}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
<i
|
<span>
|
||||||
className="fa fa-spin fa-spinner"
|
<i
|
||||||
/>
|
className="fa fa-spin fa-spinner"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</span>
|
||||||
nothing
|
nothing
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -72,7 +72,8 @@ class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps & Injecte
|
||||||
<BasicField field={this.props.form.$('state')}/>
|
<BasicField field={this.props.form.$('state')}/>
|
||||||
<BasicField field={this.props.form.$('zip')}/>
|
<BasicField field={this.props.form.$('zip')}/>
|
||||||
</ThreeColumnFields>
|
</ThreeColumnFields>
|
||||||
<ProgressableButton onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid} title={this.props.intl.formatMessage({id: this.props.buttonText})} inProgress={this.props.form.submitting || this.props.form.container().submitting} disableOnProgress={true}/>
|
<ProgressableButton onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid} buttonText={this.props.intl.formatMessage({id: this.props.buttonText})}
|
||||||
|
inProgress={this.props.form.submitting || this.props.form.container().submitting} disableOnProgress={true}/>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -197,7 +197,7 @@ export class InnerRegistrationWizard extends React.Component<RegistrationWizardP
|
||||||
buttonText="registration.wizard.next"/>
|
buttonText="registration.wizard.next"/>
|
||||||
|
|
||||||
<UserInfoPanel tab={this.registrationWizardState.tabsByName['userTab']}
|
<UserInfoPanel tab={this.registrationWizardState.tabsByName['userTab']}
|
||||||
buttonText="registration.wizard.save_and_finish" inProgressTitle="registration.wizard.saving"/>
|
buttonText="registration.wizard.save_and_finish" buttonTextInProgress="registration.wizard.saving"/>
|
||||||
</Wizard>
|
</Wizard>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,7 +39,7 @@ export interface UserInfoFormProps
|
||||||
{
|
{
|
||||||
form: Field
|
form: Field
|
||||||
buttonText:string
|
buttonText:string
|
||||||
inProgressTitle?:string
|
buttonTextInProgress?:string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -59,9 +59,9 @@ class UserInfoForm extends React.Component<UserInfoFormProps & InjectedIntlProps
|
||||||
<ProgressableButton onClick={this.props.form.onSubmit}
|
<ProgressableButton onClick={this.props.form.onSubmit}
|
||||||
className="button"
|
className="button"
|
||||||
disabled={!this.props.form.isValid}
|
disabled={!this.props.form.isValid}
|
||||||
title={this.props.intl.formatMessage({id: this.props.buttonText})}
|
buttonText={this.props.intl.formatMessage({id: this.props.buttonText})}
|
||||||
inProgress={areWeOrAnyParentSubmitting(this.props.form)}
|
inProgress={areWeOrAnyParentSubmitting(this.props.form)}
|
||||||
titleOnProgress={this.props.intl.formatMessage({id: this.props.inProgressTitle})}
|
buttonTextOnProgress={this.props.intl.formatMessage({id: this.props.buttonTextInProgress})}
|
||||||
disableOnProgress={true}/>
|
disableOnProgress={true}/>
|
||||||
</fieldset>;
|
</fieldset>;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@ import UserInfoForm from "./UserInfoForm";
|
||||||
|
|
||||||
export interface UserInfoPanelProps extends WizardTabPanelProps {
|
export interface UserInfoPanelProps extends WizardTabPanelProps {
|
||||||
buttonText: string
|
buttonText: string
|
||||||
inProgressTitle?:string
|
buttonTextInProgress?:string
|
||||||
}
|
}
|
||||||
|
|
||||||
class UserInfoPanel extends React.Component<UserInfoPanelProps & InjectedIntlProps, {}> {
|
class UserInfoPanel extends React.Component<UserInfoPanelProps & InjectedIntlProps, {}> {
|
||||||
|
@ -39,7 +39,7 @@ class UserInfoPanel extends React.Component<UserInfoPanelProps & InjectedIntlPro
|
||||||
return <WizardPanel
|
return <WizardPanel
|
||||||
tab={this.wizardTab} key={this.tabName}
|
tab={this.wizardTab} key={this.tabName}
|
||||||
>
|
>
|
||||||
<UserInfoForm form={this.form} buttonText={this.props.buttonText} inProgressTitle={this.props.inProgressTitle}/>
|
<UserInfoForm form={this.form} buttonText={this.props.buttonText} buttonTextInProgress={this.props.buttonTextInProgress}/>
|
||||||
|
|
||||||
</WizardPanel>;
|
</WizardPanel>;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue