Convert <details> to <Expander> (#2441)

2020-03-23 13:12:19 +01:00 · 2020-03-23 13:12:19 +01:00 · b9ebb3e175
commit b9ebb3e175
parent 0e536f080c
14 changed files with 107 additions and 107 deletions
--- a/packages/page-accounts/src/modals/Create.tsx
+++ b/packages/page-accounts/src/modals/Create.tsx
@ -11,7 +11,7 @@ import FileSaver from 'file-saver';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
-import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, Dropdown, Expander, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@ -277,11 +277,11 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
            onEnter={_onCommit}
            value={password2}
          />
-          <details
+          <Expander
            className='accounts--Creator-advanced'
-            open
+            isOpen
+            summary={t('Advanced creation options')}
          >
-            <summary>{t('Advanced creation options')}</summary>
            <Dropdown
              defaultValue={pairType}
              help={t('Determines what cryptography will be used to create this account. Note that to validate on Polkadot, the session account must use "ed25519".')}
@ -302,7 +302,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
            {deriveError && (
              <article className='error'>{deriveError}</article>
            )}
-          </details>
+          </Expander>
        </AddressRow>
      </Modal.Content>
      <Modal.Actions onCancel={onClose}>
--- a/packages/page-contracts/src/Codes/Code.tsx
+++ b/packages/page-contracts/src/Codes/Code.tsx
@ -9,7 +9,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
-import { Button, Card, Forget } from '@polkadot/react-components';
+import { Button, Card, Expander, Forget } from '@polkadot/react-components';

 import ABI from '../ABI';
 import CodeRow from '../CodeRow';
@ -66,13 +66,13 @@ class Code extends React.PureComponent<Props, State> {
        >
          {contractAbi
            ? (
-              <details
+              <Expander
                onClick={this.toggleAbi}
-                open={isAbiOpen}
+                isOpen={isAbiOpen}
+                summary={t('ABI')}
              >
-                <summary>{t('ABI')}</summary>
                {abi}
-              </details>
+              </Expander>
            )
            : abi
          }
--- a/packages/page-contracts/src/Contracts/Contract.tsx
+++ b/packages/page-contracts/src/Contracts/Contract.tsx
@ -10,7 +10,7 @@ import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import keyring from '@polkadot/ui-keyring';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { AddressRow, Button, Card, Forget } from '@polkadot/react-components';
+import { AddressRow, Button, Card, Expander, Forget } from '@polkadot/react-components';

 import Messages from '../Messages';
 import { useTranslation } from '../translate';
@ -99,15 +99,14 @@ function Contract (props: Props): React.ReactElement<Props> | null {
        withNonce={false}
        withTags
      >
-        <details>
-          <summary>{t('Messages')}</summary>
+        <Expander summary={t('Messages')}>
          <Messages
            address={address.toString()}
            contractAbi={abi}
            isRemovable={false}
            onSelect={onCall}
          />
-        </details>
+        </Expander>
      </AddressRow>
    </ContractCard>
  );
--- a/packages/page-contracts/src/Messages.tsx
+++ b/packages/page-contracts/src/Messages.tsx
@ -8,7 +8,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Abi } from '@polkadot/api-contract';
 import { classes } from '@polkadot/react-components/util';
-import { Button, IconLink } from '@polkadot/react-components';
+import { Button, Expander, IconLink } from '@polkadot/react-components';

 import MessageSignature from './MessageSignature';
 import { useTranslation } from './translate';
@ -66,24 +66,23 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
          message={message}
          withTooltip
        />
-        <details className='docs'>
-          <summary>
-            {
-              docs && docs.length > 0
-                ? docs
-                  .filter((line) => line !== '')
-                  .map((line, index) => ((
-                    <React.Fragment key={`${name}-docs-${index}`}>
-                      <span>{line}</span>
-                      <br />
-                    </React.Fragment>
-                  )))
-                : (
-                  <i>{t('No documentation provided')}</i>
-                )
-            }
-          </summary>
-        </details>
+        <Expander
+          className='docs'
+          summary={
+            docs && docs.length > 0
+              ? docs
+                .filter((line) => line !== '')
+                .map((line, index) => ((
+                  <React.Fragment key={`${name}-docs-${index}`}>
+                    <span>{line}</span>
+                    <br />
+                  </React.Fragment>
+                )))
+              : (
+                <i>{t('No documentation provided')}</i>
+              )
+          }
+        />
      </div>
      {!asConstructor && props.onSelect && (
        <div className='accessory'>
--- a/packages/page-democracy/src/Overview/ProposalCell.tsx
+++ b/packages/page-democracy/src/Overview/ProposalCell.tsx
@ -6,7 +6,7 @@ import { FunctionMetadataLatest, Hash, Proposal } from '@polkadot/types/interfac

 import React from 'react';
 import { registry } from '@polkadot/react-api';
-import { Call } from '@polkadot/react-components';
+import { Call, Expander } from '@polkadot/react-components';

 import { useTranslation } from '../translate';

@ -48,14 +48,13 @@ function ProposalCell ({ className, proposal, proposalHash }: Props): React.Reac
  return (
    <td className={`${className} all top`}>
      <div>{section}.{method}</div>
-      <details>
-        <summary>{formatDocs(meta) || t('Details')}</summary>
+      <Expander summary={formatDocs(meta) || t('Details')}>
        <Call
          labelHash={t('proposal hash')}
          value={proposal}
          withHash
        />
-      </details>
+      </Expander>
    </td>
  );
 }
--- a/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
+++ b/packages/page-explorer/src/BlockInfo/Extrinsics.tsx
@ -7,7 +7,7 @@ import { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
 import React from 'react';
 import styled from 'styled-components';
 import { registry } from '@polkadot/react-api';
-import { AddressMini, Call, Column, LinkExternal } from '@polkadot/react-components';
+import { AddressMini, Call, Column, Expander, LinkExternal } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';

 import { useTranslation } from '../translate';
@ -50,8 +50,7 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number, t:
          </div>
        )}
      </div>
-      <details>
-        <summary>{meta?.documentation.join(' ') || t('Details')}</summary>
+      <Expander summary={meta?.documentation.join(' ') || t('Details')}>
        <Call
          className='details'
          mortality={
@ -70,7 +69,7 @@ function renderExtrinsic (props: Props, extrinsic: Extrinsic, index: number, t:
          value={extrinsic}
          withHash
        />
-      </details>
+      </Expander>
      {
        extrinsic.isSigned
          ? <LinkExternal data={extrinsic.hash.toHex()} type='extrinsic' />
--- a/packages/page-explorer/src/BlockInfo/Logs.tsx
+++ b/packages/page-explorer/src/BlockInfo/Logs.tsx
@ -7,7 +7,7 @@ import { Codec, TypeDef } from '@polkadot/types/types';

 import React from 'react';
 import { Struct, Tuple, Raw, Vec, getTypeDef } from '@polkadot/types';
-import { Column } from '@polkadot/react-components';
+import { Column, Expander } from '@polkadot/react-components';
 import Params from '@polkadot/react-params';

 import { useTranslation } from '../translate';
@ -110,10 +110,9 @@ function renderItem (t: (s: string, opt?: any) => string): (item: DigestItem, in
          <div className='header'>
            <h3>{item.type.toString()}</h3>
          </div>
-          <details>
-            <summary>{t('Details')}</summary>
+          <Expander summary={t('Details')}>
            {content}
-          </details>
+          </Expander>
        </article>
      </div>
    );
--- a/packages/page-explorer/src/Events.tsx
+++ b/packages/page-explorer/src/Events.tsx
@ -5,7 +5,7 @@
 import { KeyedEvent } from './types';

 import React from 'react';
-import { Event as EventDisplay } from '@polkadot/react-components';
+import { Event as EventDisplay, Expander } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';

 import { useTranslation } from './translate';
@ -53,19 +53,18 @@ function Events ({ emptyLabel, eventClassName, events, withoutIndex }: Props): R
                }
              </h3>
            </div>
-            <details>
-              <summary>
-                {
-                  event.meta && event.meta.documentation
-                    ? event.meta.documentation.join(' ')
-                    : 'Details'
-                }
-              </summary>
+            <Expander
+              summary={
+                event.meta && event.meta.documentation
+                  ? event.meta.documentation.join(' ')
+                  : 'Details'
+              }
+            >
              <EventDisplay
                className='details'
                value={event}
              />
-            </details>
+            </Expander>
          </article>
        );
      })}
--- a/packages/page-society/src/Overview/VoteDisplay.tsx
+++ b/packages/page-society/src/Overview/VoteDisplay.tsx
@ -5,7 +5,7 @@
 import { VoteSplit, VoteType } from '../types';

 import React, { useEffect, useState } from 'react';
-import { AddressMini } from '@polkadot/react-components';
+import { AddressMini, Expander } from '@polkadot/react-components';

 import { useTranslation } from '../translate';

@ -13,7 +13,7 @@ interface Props {
  votes?: VoteType[];
 }

-export default function VoteDisplay ({ votes }: Props): React.ReactElement<Props> {
+function VoteDisplay ({ votes }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const [{ allAye, allNay, allSkeptic }, setVoteSplit] = useState<VoteSplit>({ allAye: [], allNay: [], allSkeptic: [] });

@ -29,49 +29,42 @@ export default function VoteDisplay ({ votes }: Props): React.ReactElement<Props
    <>
      <td className='top padtop'>
        {allSkeptic.length !== 0 && (
-          <details>
-            <summary>
-              {t('Skeptics ({{count}})', { replace: { count: allSkeptic.length } })}
-            </summary>
+          <Expander summary={t('Skeptics ({{count}})', { replace: { count: allSkeptic.length } })}>
            {allSkeptic.map(([who]): React.ReactNode =>
              <AddressMini
                key={who.toString()}
                value={who}
              />
            )}
-          </details>
+          </Expander>
        )}
      </td>
      <td className='top padtop'>
        {allAye.length !== 0 && (
-          <details>
-            <summary>
-              {t('Approvals ({{count}})', { replace: { count: allAye.length } })}
-            </summary>
+          <Expander summary={t('Approvals ({{count}})', { replace: { count: allAye.length } })}>
            {allAye.map(([who]): React.ReactNode =>
              <AddressMini
                key={who.toString()}
                value={who}
              />
            )}
-          </details>
+          </Expander>
        )}
      </td>
      <td className='top padtop'>
        {allNay.length !== 0 && (
-          <details>
-            <summary>
-              {t('Rejections ({{count}})', { replace: { count: allNay.length } })}
-            </summary>
+          <Expander summary={t('Rejections ({{count}})', { replace: { count: allNay.length } })}>
            {allNay.map(([who]): React.ReactNode =>
              <AddressMini
                key={who.toString()}
                value={who}
              />
            )}
-          </details>
+          </Expander>
        )}
      </td>
    </>
  );
 }
+
+export default React.memo(VoteDisplay);
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@ -10,7 +10,7 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { formatBalance, formatNumber, isObject } from '@polkadot/util';
-import { Icon, Tooltip, TxButton } from '@polkadot/react-components';
+import { Expander, Icon, Tooltip, TxButton } from '@polkadot/react-components';
 import { withCalls, withMulti } from '@polkadot/react-api/hoc';
 import { useAccounts } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
@ -366,16 +366,11 @@ function renderBalances (props: Props, allAccounts: string[], t: (key: string) =
    return (
      <>
        <label>{t('balances')}</label>
-        <details>
-          <summary>
-            <div className='body'>
-              <FormatBalance value={balancesAll?.votingBalance} />
-            </div>
-          </summary>
+        <Expander summary={<FormatBalance className='summary' value={balancesAll?.votingBalance} />}>
          <div className='body column'>
            {allItems}
          </div>
-        </details>
+        </Expander>
      </>
    );
  }
@ -457,16 +452,16 @@ export default withMulti(
        text-align: left;
        width: 15rem;

-        details[open] summary {
-          .body {
+        .ui--Expander.isExpanded {
+          .summary {
            opacity: 0;
          }
        }

-        details summary {
+        .ui--Expander {
          width: 100%;

-          .body {
+          .summary {
            display: inline-block;
            text-align: right;
            min-width: 12rem;
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@ -14,10 +14,11 @@ export interface Props extends BareProps {
  children?: React.ReactNode;
  isOpen?: boolean;
  summary: React.ReactNode;
+  withDot?: boolean;
  withHidden?: boolean;
 }

-function Expander ({ children, className, isOpen, summary, withHidden }: Props): React.ReactElement<Props> {
+function Expander ({ children, className, isOpen, summary, withDot, withHidden }: Props): React.ReactElement<Props> {
  const [isExpanded, toggleExpanded] = useToggle(isOpen);
  const hasContent = useMemo(
    (): boolean => !!children && (!Array.isArray(children) || children.length !== 0),
@ -26,13 +27,16 @@ function Expander ({ children, className, isOpen, summary, withHidden }: Props):

  return (
    <div
-      className={`ui--Expander ${isExpanded && 'isExpanded'} ${className}`}
+      className={`ui--Expander ${isExpanded && 'isExpanded'} ${hasContent && 'hasContent'} ${className}`}
      onClick={toggleExpanded}
    >
      <div className='ui--Expander-summary'>
-        {hasContent && (
-          <Icon name={isExpanded ? 'angle double down' : 'angle double right'} />
-        )}{summary}
+        {hasContent
+          ? <Icon name={isExpanded ? 'angle double down' : 'angle double right'} />
+          : withDot
+            ? <Icon name='circle outline' />
+            : undefined
+        }{summary}
      </div>
      {hasContent && (isExpanded || withHidden) && (
        <div className='ui--Expander-contents'>{children}</div>
@ -46,9 +50,15 @@ export default React.memo(styled(Expander)`
    display: none;
  }

-  .ui--Expander-summary {
+  &.hasContent .ui--Expander-summary {
    cursor: pointer;
+  }
+
+  .ui--Expander-summary {
    display: block;
+    margin: 0 0 0.5rem 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
    white-space: nowrap;

    i.icon {
--- a/packages/react-components/src/ProposedAction.tsx
+++ b/packages/react-components/src/ProposedAction.tsx
@ -11,6 +11,7 @@ import { registry } from '@polkadot/react-api';
 import { formatNumber, isString } from '@polkadot/util';

 import Call from './Call';
+import Expander from './Expander';
 import Inset, { InsetProps } from './Inset';
 import TreasuryProposal from './TreasuryProposal';
 import { isTreasuryProposalVote } from './util';
@ -93,16 +94,16 @@ function ProposedAction ({ className, asInset, idNumber, insetProps, isCollapsib
      <h3>{header}</h3>
      {isCollapsible
        ? (
-          <details>
+          <Expander>
            {documentation}
            {params}
-          </details>
+          </Expander>
        )
        : (
          <>
-            <details>
+            <Expander>
              {documentation}
-            </details>
+            </Expander>
            {params}
          </>
        )}
--- a/packages/react-signer/src/Checks/index.tsx
+++ b/packages/react-signer/src/Checks/index.tsx
@ -9,6 +9,7 @@ import { RuntimeDispatchInfo } from '@polkadot/types/interfaces';
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import { Trans } from 'react-i18next';
+import { Expander } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { formatBalance } from '@polkadot/util';

@ -37,12 +38,14 @@ export default function Checks ({ accountId, className, extrinsic }: Props): Rea
  }

  return (
-    <details className={className}>
-      <summary>
+    <Expander
+      className={className}
+      summary={
        <Trans i18nKey='feesForSubmission'>
          Fees of <span className='highlight'>{formatBalance(dispatchInfo.partialFee, { withSiFull: true })}</span> will be applied to the submission
        </Trans>
-      </summary>
-    </details>
+      }
+      withDot
+    />
  );
 }
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@ -9,7 +9,7 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { registry } from '@polkadot/react-api';
-import { Call, InputAddress, Modal } from '@polkadot/react-components';
+import { Call, InputAddress, Expander, Modal } from '@polkadot/react-components';

 import Checks from './Checks';
 import { useTranslation } from './translate';
@ -66,19 +66,23 @@ function Transaction ({ children, className, hideDetails, isSendable, onError, v
              withLabel
            />
          )}
-          <details className='tx-details'>
-            <summary>
-              {t('Sending transaction')} <span className='highlight'>{section}.{method}({
-                meta?.args.map(({ name }) => name).join(', ') || ''
-              })</span>
-            </summary>
+          <Expander
+            className='tx-details'
+            summary={
+              <>
+                {t('Sending transaction')} <span className='highlight'>{section}.{method}({
+                  meta?.args.map(({ name }) => name).join(', ') || ''
+                })</span>
+              </>
+            }
+          >
            {formatMeta(meta)}
            <Call
              onError={onError}
              value={extrinsic}
              withBorder={false}
            />
-          </details>
+          </Expander>
        </>
      )}
      {!hideDetails && !isUnsigned && (
@ -99,7 +103,7 @@ export default React.memo(styled(Transaction)`
  .tx-details {
    margin-left: 2rem;

-    summary {
+    .ui--Expander-summary {
      font-size: 1.1rem;
      margin: 0.5rem 0;
    }