Set Modal default to open (#2157)

2020-01-20 15:30:25 +01:00 · 2020-01-20 15:30:25 +01:00 · 18af907070
commit 18af907070
parent d4fbce559a
36 changed files with 8 additions and 51 deletions
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@ -68,7 +68,6 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
    <Modal
      className='app--accounts-Modal'
      header={t('Backup account')}
-      open
    >
      <Content
        address={address}
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@ -38,7 +38,6 @@ class ChangePass extends TxComponent<Props, State> {
      <Modal
        className='app--accounts-Modal'
        header={t('Change account password')}
-        open
      >
        {this.renderContent()}
        {this.renderButtons()}
--- a/packages/app-accounts/src/modals/Create.tsx
+++ b/packages/app-accounts/src/modals/Create.tsx
@ -191,7 +191,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
    <Modal
      className={className}
      header={t('Add an account via seed')}
-      open
    >
      {address && isConfirmationOpen && (
        <CreateConfirmation
--- a/packages/app-accounts/src/modals/CreateConfirmation.tsx
+++ b/packages/app-accounts/src/modals/CreateConfirmation.tsx
@ -18,10 +18,7 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
  const { t } = useTranslation();

  return (
-    <Modal
-      header={t('Important notice')}
-      open
-    >
+    <Modal header={t('Important notice')}>
      <Modal.Content>
        <AddressRow
          defaultName={name}
--- a/packages/app-accounts/src/modals/Derive.tsx
+++ b/packages/app-accounts/src/modals/Derive.tsx
@ -138,7 +138,6 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
    <Modal
      className={className}
      header={t('Derive account from pair')}
-      open
    >
      {address && isConfirmationOpen && (
        <CreateConfirmation
--- a/packages/app-accounts/src/modals/Identity.tsx
+++ b/packages/app-accounts/src/modals/Identity.tsx
@ -105,7 +105,6 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
    <Modal
      className={className}
      header={t('Register identity')}
-      open
    >
      <Modal.Content>
        <Input
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@ -38,10 +38,7 @@ class Import extends TxComponent<Props, State> {
    const { isFileValid, isPassValid } = this.state;

    return (
-      <Modal
-        header={t('Add via backup file')}
-        open
-      >
+      <Modal header={t('Add via backup file')}>
        {this.renderInput()}
        <Modal.Actions>
          <Button.Group>
--- a/packages/app-accounts/src/modals/Qr.tsx
+++ b/packages/app-accounts/src/modals/Qr.tsx
@ -50,7 +50,6 @@ function QrModal ({ className, onClose, onStatusChange }: Props): React.ReactEle
    <Modal
      className={className}
      header={t('Add account via Qr')}
-      open
    >
      <Modal.Content>
        {
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@ -87,7 +87,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
    <Modal
      className='app--accounts-Modal'
      header={t('Send funds')}
-      open
    >
      <Modal.Content>
        <div className={className}>
--- a/packages/app-address-book/src/modals/Create.tsx
+++ b/packages/app-address-book/src/modals/Create.tsx
@ -75,10 +75,7 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
  };

  return (
-    <Modal
-      header={t('Add an address')}
-      open
-    >
+    <Modal header={t('Add an address')}>
      <Modal.Content>
        <AddressRow
          defaultName={name}
--- a/packages/app-contracts/src/RemoveABI.tsx
+++ b/packages/app-contracts/src/RemoveABI.tsx
@ -28,7 +28,6 @@ export default function RemoveABI ({ code, onClose, onRemove }: Props): React.Re
      className='app--accounts-Modal'
      header={t('Confirm ABI removal')}
      onClose={onClose}
-      open
    >
      <Modal.Content>
        <CodeRow
--- a/packages/app-council/src/Motions/Slashing.tsx
+++ b/packages/app-council/src/Motions/Slashing.tsx
@ -86,7 +86,6 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
        <Modal
          className={className}
          header={t('Revert pending slashes')}
-          open
        >
          <Modal.Content>
            <InputAddress
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@ -38,7 +38,6 @@ function PreImage ({ className, onClose }: Props): React.ReactElement<Props> {
    <Modal
      className={className}
      header={t('Submit preimage')}
-      open
    >
      <Modal.Content>
        <InputAddress
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@ -30,7 +30,6 @@ export default function Propose ({ className, onClose }: Props): React.ReactElem
    <Modal
      className={className}
      header={t('Submit proposal')}
-      open
    >
      <Modal.Content>
        <InputAddress
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@ -35,7 +35,6 @@ export default function Seconding ({ depositors, proposalId }: Props): React.Rea
      {isSecondingOpen && (
        <Modal
          header={t('Second proposal')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/app-democracy/src/Overview/Voting.tsx
+++ b/packages/app-democracy/src/Overview/Voting.tsx
@ -33,7 +33,6 @@ export default function Voting ({ referendumId }: Props): React.ReactElement<Pro
      {isVotingOpen && (
        <Modal
          header={t('Vote on proposal')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/app-generic-asset/src/modals/Create.tsx
+++ b/packages/app-generic-asset/src/modals/Create.tsx
@ -28,10 +28,7 @@ function Create ({ onClose, onRegister, t }: Props): React.ReactElement<Props> {
  };

  return (
-    <Modal
-      header={t('Register an Asset')}
-      open
-    >
+    <Modal header={t('Register an Asset')}>
      <Modal.Content>
        <InputNumber
          help={t('Enter the Asset ID of the token you want to manage.')}
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@ -68,7 +68,6 @@ class BondExtra extends TxComponent<Props, State> {
      <Modal
        className='staking--BondExtra'
        header= {t('Bond more funds')}
-        open
        size='small'
      >
        {this.renderContent()}
--- a/packages/app-staking/src/Actions/Account/InjectKeys.tsx
+++ b/packages/app-staking/src/Actions/Account/InjectKeys.tsx
@ -72,7 +72,6 @@ function InjectKeys ({ isOpen = true, onClose, t }: Props): React.ReactElement<P
  return (
    <Modal
      header={t('Inject Keys')}
-      open
      size='small'
    >
      <Modal.Content>
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@ -61,7 +61,6 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
    <Modal
      className={`staking--Nominating ${className}`}
      header={t('Nominate Validators')}
-      open
    >
      <Modal.Content className='ui--signer-Signer-Content'>
        <InputAddress
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@ -45,7 +45,6 @@ class SetControllerAccount extends TxComponent<Props, State> {
      <Modal
        className='staking--SetControllerAccount'
        header={t('Change controller account')}
-        open
        size='small'
      >
        <Modal.Content className='ui--signer-Signer-Content'>
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@ -39,7 +39,6 @@ class SetRewardDestination extends TxComponent<Props, State> {
      <Modal
        className='staking--Bonding'
        header={t('Bonding Preferences')}
-        open
        size='small'
      >
        {this.renderContent()}
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@ -42,7 +42,6 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
    <Modal
      className='staking--SetSessionAccount'
      header={t('Set Session Key')}
-      open
      size='small'
    >
      <Modal.Content className='ui--signer-Signer-Content'>
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@ -63,7 +63,6 @@ class Unbond extends TxComponent<Props, State> {
      <Modal
        className='staking--Unbond'
        header={t('Unbond funds')}
-        open
        size='small'
      >
        {this.renderContent()}
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@ -85,7 +85,6 @@ class Validate extends TxComponent<Props, State> {
      <Modal
        className='staking--Staking'
        header={t('Set validator preferences')}
-        open
        size='small'
      >
        {this.renderContent()}
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@ -59,7 +59,6 @@ class NewStake extends TxComponent<Props, State> {
      <Modal
        className='staking--Bonding'
        header={t('Bonding Preferences')}
-        open
        size='small'
      >
        <Modal.Content className='ui--signer-Signer-Content'>
--- a/packages/app-tech-comm/src/Proposals/Voting.tsx
+++ b/packages/app-tech-comm/src/Proposals/Voting.tsx
@ -35,7 +35,6 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
      {isVotingOpen && (
        <Modal
          header={t('Vote on proposal')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@ -46,7 +46,6 @@ class Unlock extends TxComponent<Props, State> {
      <Modal
        className='toolbox--Unlock'
        header={t('Unlock account')}
-        open
      >
        {this.renderContent()}
        {this.renderActions()}
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@ -35,7 +35,6 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
        <Modal
          className={className}
          header={t('Submit treasury proposal')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/app-treasury/src/Overview/Submission.tsx
+++ b/packages/app-treasury/src/Overview/Submission.tsx
@ -47,7 +47,6 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
      {isOpen && (
        <Modal
          header={t('Submit to council')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/app-treasury/src/Overview/Voting.tsx
+++ b/packages/app-treasury/src/Overview/Voting.tsx
@ -65,7 +65,6 @@ export default function Voting ({ councilProposals, isDisabled }: Props): React.
      {isOpen && (
        <Modal
          header={t('Vote on proposal')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/apps/src/modals/Network.tsx
+++ b/packages/apps/src/modals/Network.tsx
@ -20,7 +20,6 @@ export default function NetworkModal ({ className, onClose }: Props): React.Reac
    <Modal
      className={className}
      header={t('Select Network')}
-      open
    >
      <Modal.Content>
        <General
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@ -250,7 +250,6 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
      {isJudgementOpen && (
        <Modal
          header={t('Provide judgement')}
-          open
          size='small'
        >
          <Modal.Content>
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@ -102,7 +102,6 @@ export default function Forget (props: Props): React.ReactElement<Props> {
      className='app--accounts-Modal'
      header={getHeaderText(mode, t)}
      onClose={onClose}
-      open
    >
      <Modal.Content>{renderContent(props, t)}</Modal.Content>
      <Modal.Actions>
--- a/packages/react-components/src/Modal.tsx
+++ b/packages/react-components/src/Modal.tsx
@ -12,11 +12,12 @@ import { classes } from './util';
 interface Props extends BareProps {
  children: React.ReactNode;
  header?: React.ReactNode;
+  open?: boolean;
  [index: string]: any;
 }

 function Modal (props: Props): React.ReactElement<Props> {
-  const { className, children, header } = props;
+  const { className, children, header, open = true } = props;

  return (
    <SUIModal
@ -24,6 +25,7 @@ function Modal (props: Props): React.ReactElement<Props> {
      className={classes('theme--default', 'ui--Modal', className)}
      dimmer='inverted'
      header={undefined}
+      open={open}
    >
      {header && (
        <SUIModal.Header>{header}</SUIModal.Header>
--- a/packages/react-signer/src/Modal.tsx
+++ b/packages/react-signer/src/Modal.tsx
@ -163,10 +163,7 @@ class Signer extends React.PureComponent<Props, State> {
    }

    return (
-      <Modal
-        className='ui--signer-Signer'
-        open
-      >
+      <Modal className='ui--signer-Signer'>
        <ErrorBoundary onError={this.onRenderError}>
          {this.renderContent()}
        </ErrorBoundary>