Enable modal enter #2648

Merged
johndoe01012 merged 4 commits from enable-modal-enter into master 2019-07-29 15:44:10 +02:00
4 changed files with 31 additions and 22 deletions

View file

@ -95,6 +95,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
label={__('Send')} label={__('Send')}
disabled={isPending || tipError || !tipAmount} disabled={isPending || tipError || !tipAmount}
onClick={this.handleSendButtonClicked} onClick={this.handleSendButtonClicked}
type="submit"
/> />
} }
helper={ helper={

View file

@ -1,5 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import Button from 'component/button';
import { Form } from 'component/common/form';
import { Modal } from 'modal/modal'; import { Modal } from 'modal/modal';
type Props = { type Props = {
@ -23,18 +25,20 @@ class ModalConfirmTransaction extends React.PureComponent<Props> {
isOpen isOpen
title={__('Send LBC')} title={__('Send LBC')}
contentLabel={__('Confirm Transaction')} contentLabel={__('Confirm Transaction')}
type="confirm" type="custom"
confirmButtonLabel={__('Send')}
onConfirmed={() => this.onConfirmed()}
onAborted={closeModal} onAborted={closeModal}
> >
<section className="card__content"> <Form className="card__content" onSubmit={() => this.onConfirmed()}>
<p>{__('Sending: ')}</p> <p>{__('Sending: ')}</p>
<blockquote>{amount} LBC</blockquote> <blockquote>{amount} LBC</blockquote>
<p>{__('To address: ')}</p> <p>{__('To address: ')}</p>
<blockquote>{address}</blockquote> <blockquote>{address}</blockquote>
<p>{__('Once the transaction is sent, it cannot be reversed.')}</p> <p>{__('Once the transaction is sent, it cannot be reversed.')}</p>
</section> <div className="card__actions">
<Button autoFocus button="primary" label={__('Send')} onClick={() => this.onConfirmed()} />
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
</Form>
</Modal> </Modal>
); );
} }

View file

@ -1,7 +1,8 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Modal } from 'modal/modal'; import { Modal } from 'modal/modal';
import { FormField } from 'component/common/form'; import { Form, FormField } from 'component/common/form';
import Button from 'component/button';
import usePersistedState from 'util/use-persisted-state'; import usePersistedState from 'util/use-persisted-state';
type Props = { type Props = {
@ -23,22 +24,13 @@ function ModalRemoveFile(props: Props) {
const outpoint = fileInfo ? fileInfo.outpoint : `${txid}:${nout}`; const outpoint = fileInfo ? fileInfo.outpoint : `${txid}:${nout}`;
return ( return (
<Modal <Modal isOpen title="Remove File" contentLabel={__('Confirm File Remove')} type="custom" onAborted={closeModal}>
isOpen
title="Remove File"
contentLabel={__('Confirm File Remove')}
type="confirm"
confirmButtonLabel={__('Remove')}
confirmButtonDisabled={!deleteChecked && !abandonChecked}
onConfirmed={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}
onAborted={closeModal}
>
<section className="card__content"> <section className="card__content">
<p> <p>
{__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')} {__("Are you sure you'd like to remove")} <cite>{`"${title}"`}</cite> {__('from the LBRY app?')}
</p> </p>
</section> </section>
<section className="card__content"> <Form className="card__content" onSubmit={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}>
<FormField <FormField
name="file_delete" name="file_delete"
label={__('Also delete this file from my computer')} label={__('Also delete this file from my computer')}
@ -56,7 +48,17 @@ function ModalRemoveFile(props: Props) {
onChange={() => setAbandonChecked(!abandonChecked)} onChange={() => setAbandonChecked(!abandonChecked)}
/> />
)} )}
</section> <div className="card__actions">
<Button
autoFocus
button="primary"
label={__('OK')}
disabled={!deleteChecked && !abandonChecked}
onClick={() => deleteFile(outpoint || '', deleteChecked, abandonChecked)}
/>
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
</Form>
</Modal> </Modal>
); );
} }

View file

@ -1,6 +1,6 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { Form, FormField } from 'component/common/form'; import { Form, FormField, Submit } from 'component/common/form';
import { Modal } from 'modal/modal'; import { Modal } from 'modal/modal';
import Button from 'component/button'; import Button from 'component/button';
@ -94,9 +94,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
isOpen isOpen
title={__('Encrypt Wallet')} title={__('Encrypt Wallet')}
contentLabel={__('Encrypt Wallet')} contentLabel={__('Encrypt Wallet')}
type="confirm" type="custom"
confirmButtonLabel={__('Encrypt Wallet')}
abortButtonLabel={__('Cancel')}
onConfirmed={() => this.submitEncryptForm()} onConfirmed={() => this.submitEncryptForm()}
onAborted={closeModal} onAborted={closeModal}
> >
@ -135,6 +133,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
)} )}
</div> </div>
<FormField <FormField
inputButton={<Submit label={failMessage ? __('Encrypting Wallet') : __('Encrypt Wallet')} />}
error={understandError === true ? 'You must enter "I understand"' : false} error={understandError === true ? 'You must enter "I understand"' : false}
label={__('Enter "I understand"')} label={__('Enter "I understand"')}
placeholder={__('Dear computer, I understand')} placeholder={__('Dear computer, I understand')}
@ -144,6 +143,9 @@ class ModalWalletEncrypt extends React.PureComponent<Props, State> {
/> />
{failMessage && <div className="error-text">{__(failMessage)}</div>} {failMessage && <div className="error-text">{__(failMessage)}</div>}
</Form> </Form>
<div className="card__actions">
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
</Modal> </Modal>
); );
} }