NPO-Accounting/houdini
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Rename attributes from title->buttonText and titleOnProgress->buttonTextOnProgress for ProgressableButton

Browse source
This commit is contained in:
Eric Schultz 2018-06-28 13:51:36 -05:00
parent e6f51940de
commit 6eeb2639f2
7 changed files with 56 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
javascripts/src/components/common/ProgressableButton.spec.tsx
View file

@ -8,16 +8,16 @@ 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"/>)
<ProgressableButton onClick={() => console.log('alert!')} buttonText={"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"}
buttonText={"nothing"}
data-label="button"
titleOnProgress={"onProgress"}
buttonTextOnProgress={"onProgress"}
inProgress={true}
disableOnProgress={false}
@ -28,7 +28,7 @@ describe('ProgressableButton', () => {
test('Title is kept on progress if no titleOnProgress is set', () => {
let output = mount(
<ProgressableButton onClick={() => console.log('alert!')}
title={"nothing"}
buttonText={"nothing"}
data-label="button"
inProgress={true}
@ -39,9 +39,9 @@ describe('ProgressableButton', () => {
test('Progress means we change the title, disable and do turn on spinner', () => {
let output = mount(
<ProgressableButton onClick={() => console.log('alert!')}
title={"nothing"}
buttonText={"nothing"}
data-label="button"
titleOnProgress={"onProgress"}
buttonTextOnProgress={"onProgress"}
inProgress={true}
disableOnProgress={true}
@ -53,9 +53,9 @@ describe('ProgressableButton', () => {
test('Disabled manually set overrides whether we disable on progress when in progress', () => {
let output = mount(
<ProgressableButton onClick={() => console.log('alert!')}
title={"nothing"}
buttonText={"nothing"}
data-label="button"
titleOnProgress={"onProgress"}
buttonTextOnProgress={"onProgress"}
inProgress={true}
disableOnProgress={false}
disabled={true}
@ -68,9 +68,9 @@ describe('ProgressableButton', () => {
test('Disabled manually set overrides whether we disable on progress when NOT in progress', () => {
let output = mount(
<ProgressableButton onClick={() => console.log('alert!')}
title={"nothing"}
buttonText={"nothing"}
data-label="button"
titleOnProgress={"onProgress"}
buttonTextOnProgress={"onProgress"}
inProgress={false}
disableOnProgress={true}
disabled={true}

10
javascripts/src/components/common/ProgressableButton.tsx
View file

@ -6,8 +6,8 @@ import {InjectedIntlProps, injectIntl} from 'react-intl';
export interface ProgressableButtonProps
{
title:string
titleOnProgress?:string
buttonText:string
buttonTextOnProgress?:string
inProgress?:boolean
disableOnProgress?:boolean
disabled?:boolean
@ -18,18 +18,18 @@ export interface ProgressableButtonProps
class ProgressableButton extends React.Component<ProgressableButtonProps, {}> {
render() {
let ourData: {title: string, disabled: boolean, prefix: JSX.Element|null}= {
title:this.props.title,
title:this.props.buttonText,
disabled:this.props.disabled,
prefix: null
}
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.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}>

54
javascripts/src/components/common/__snapshots__/ProgressableButton.spec.tsx.snap
View file

@ -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`] = `
<ProgressableButton
buttonText="nothing"
buttonTextOnProgress="onProgress"
data-label="button"
disableOnProgress={true}
disabled={true}
inProgress={false}
onClick={[Function]}
title="nothing"
titleOnProgress="onProgress"
>
<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`] = `
<ProgressableButton
buttonText="nothing"
buttonTextOnProgress="onProgress"
data-label="button"
disableOnProgress={false}
disabled={true}
inProgress={true}
onClick={[Function]}
title="nothing"
titleOnProgress="onProgress"
>
<button
className="button"
@ -52,9 +52,12 @@ exports[`ProgressableButton Disabled manually set overrides whether we disable o
onClick={[Function]}
>
<span>
<i
className="fa fa-spin fa-spinner"
/>
<span>
<i
className="fa fa-spin fa-spinner"
/>
</span>
onProgress
</span>
</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`] = `
<ProgressableButton
buttonText="nothing"
buttonTextOnProgress="onProgress"
data-label="button"
disableOnProgress={true}
inProgress={true}
onClick={[Function]}
title="nothing"
titleOnProgress="onProgress"
>
<button
className="button"
@ -77,9 +80,12 @@ exports[`ProgressableButton Progress means we change the title, disable and do t
onClick={[Function]}
>
<span>
<i
className="fa fa-spin fa-spinner"
/>
<span>
<i
className="fa fa-spin fa-spinner"
/>
</span>
onProgress
</span>
</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`] = `
<ProgressableButton
buttonText="nothing"
buttonTextOnProgress="onProgress"
data-label="button"
disableOnProgress={false}
inProgress={true}
onClick={[Function]}
title="nothing"
titleOnProgress="onProgress"
>
<button
className="button"
@ -102,9 +108,12 @@ exports[`ProgressableButton Progress means we change the title, dont disable and
onClick={[Function]}
>
<span>
<i
className="fa fa-spin fa-spinner"
/>
<span>
<i
className="fa fa-spin fa-spinner"
/>
</span>
onProgress
</span>
</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`] = `
<ProgressableButton
buttonText="nothing"
data-label="button"
inProgress={true}
onClick={[Function]}
title="nothing"
>
<button
className="button"
@ -124,9 +133,12 @@ exports[`ProgressableButton Title is kept on progress if no titleOnProgress is s
onClick={[Function]}
>
<span>
<i
className="fa fa-spin fa-spinner"
/>
<span>
<i
className="fa fa-spin fa-spinner"
/>
</span>
nothing
</span>
</button>

3
javascripts/src/components/registration_page/NonprofitInfoForm.tsx
View file

@ -72,7 +72,8 @@ class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps & Injecte
<BasicField field={this.props.form.$('state')}/>
<BasicField field={this.props.form.$('zip')}/>
</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>
}
}

2
javascripts/src/components/registration_page/RegistrationWizard.tsx
View file

@ -197,7 +197,7 @@ export class InnerRegistrationWizard extends React.Component<RegistrationWizardP
buttonText="registration.wizard.next"/>
<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>
}
}

6
javascripts/src/components/registration_page/UserInfoForm.tsx
View file

@ -39,7 +39,7 @@ export interface UserInfoFormProps
{
form: Field
buttonText:string
inProgressTitle?:string
buttonTextInProgress?:string
}
@ -59,9 +59,9 @@ class UserInfoForm extends React.Component<UserInfoFormProps & InjectedIntlProps
<ProgressableButton onClick={this.props.form.onSubmit}
className="button"
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)}
titleOnProgress={this.props.intl.formatMessage({id: this.props.inProgressTitle})}
buttonTextOnProgress={this.props.intl.formatMessage({id: this.props.buttonTextInProgress})}
disableOnProgress={true}/>
</fieldset>;
}

4
javascripts/src/components/registration_page/UserInfoPanel.tsx
View file

@ -10,7 +10,7 @@ import UserInfoForm from "./UserInfoForm";
export interface UserInfoPanelProps extends WizardTabPanelProps {
buttonText: string
inProgressTitle?:string
buttonTextInProgress?:string
}
class UserInfoPanel extends React.Component<UserInfoPanelProps & InjectedIntlProps, {}> {
@ -39,7 +39,7 @@ class UserInfoPanel extends React.Component<UserInfoPanelProps & InjectedIntlPro
return <WizardPanel
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>;
}