ActionItem component for responding to proposals (#1351)

* ActionItem

* rearrange

packages/app-democracy/src/Overview/Item.tsx

@@ -1,73 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { I18nProps } from '@polkadot/ui-app/types';
-import { Method, Proposal } from '@polkadot/types';
-
-import BN from 'bn.js';
-import React from 'react';
-import styled from 'styled-components';
-import { Call, Card } from '@polkadot/ui-app';
-import { formatNumber } from '@polkadot/util';
-import { styles as rowStyles } from '@polkadot/ui-app/Row';
-
-import translate from '../translate';
-
-type Props = I18nProps & {
-  children?: React.ReactNode,
-  proposal: Proposal,
-  proposalExtra?: React.ReactNode,
-  idNumber: BN | number
-};
-
-class Item extends React.PureComponent<Props> {
-  render () {
-    const { children, className, idNumber, proposal, proposalExtra } = this.props;
-    const { meta, method, section } = Method.findFunction(proposal.callIndex);
-
-    return (
-      <Card className={className}>
-        <div className='ui--Row'>
-          <div className='ui--Row-base'>
-            <div className='ui--Row-details democracy--Item-header'>
-              <h3>#{formatNumber(idNumber)}: {section}.{method}</h3>
-              {meta && meta.documentation && (
-                <details>
-                  <summary>{meta.documentation.join(' ')}</summary>
-                </details>
-              )}
-            </div>
-            {children}
-          </div>
-          <Call
-            className='democracy--Item-extrinsic'
-            value={proposal}
-          >
-            {proposalExtra}
-          </Call>
-        </div>
-      </Card>
-    );
-  }
-}
-
-export default translate(styled(Item as React.ComponentClass<Props>)`
-  ${rowStyles}
-
-  .democracy--Item-extrinsic {
-    margin-top: 1rem;
-
-    .ui--Params-Content {
-      padding-left: 0;
-    }
-  }
-
-  .democracy--Item-header {
-    margin-bottom: 1rem;
-  }
-
-  .ui--Row-details.democracy--Item-header{
-    min-width: 0;
-  }
-`);

packages/app-democracy/src/Overview/Proposal.tsx

@@ -7,12 +7,11 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import BN from 'bn.js';
 import React from 'react';
 import { AccountId, Balance, Option, Proposal, Tuple, Vector } from '@polkadot/types';
-import { InputAddress, Labelled, Static } from '@polkadot/ui-app';
+import { ActionItem, InputAddress, Labelled, Static } from '@polkadot/ui-app';
 import { withCalls, withMulti } from '@polkadot/ui-api';
 import { formatBalance } from '@polkadot/util';
 
 import translate from '../translate';
-import Item from './Item';
 import Seconding from './Seconding';
 
 type Props = I18nProps & {
@@ -29,21 +28,23 @@ class ProposalDisplay extends React.PureComponent<Props> {
       : [];
 
     return (
-      <Item
+      <ActionItem
         className={className}
         idNumber={idNumber}
         proposal={value}
-        proposalExtra={this.renderExtra()}
+        accessory={
+          <Seconding
+            depositors={depositors}
+            proposalId={idNumber}
+          />
+        }
       >
-        <Seconding
-          depositors={depositors}
-          proposalId={idNumber}
-        />
-      </Item>
+        {this.renderInfo()}
+      </ActionItem>
     );
   }
 
-  private renderExtra () {
+  private renderInfo () {
     const { democracy_depositOf, t } = this.props;
 
     if (!democracy_depositOf) {

packages/app-democracy/src/Overview/Referendum.tsx

@@ -10,13 +10,12 @@ import { RawParam } from '@polkadot/ui-params/types';
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
-import { Chart, Static } from '@polkadot/ui-app';
+import { ActionItem, Chart, Static } from '@polkadot/ui-app';
 import { formatBalance, formatNumber } from '@polkadot/util';
 import settings from '@polkadot/ui-settings';
 import VoteThreshold from '@polkadot/ui-params/Param/VoteThreshold';
 import { withCalls, withMulti } from '@polkadot/ui-api';
 
-import Item from './Item';
 import translate from '../translate';
 import Voting from './Voting';
 
@@ -96,18 +95,20 @@ class Referendum extends React.PureComponent<Props, State> {
     }
 
     return (
-      <Item
+      <ActionItem
         className={className}
         idNumber={value.index}
         proposal={value.proposal}
-        proposalExtra={this.renderExtra()}
+        accessory={
+          <Voting referendumId={value.index} />
+        }
       >
-        <Voting referendumId={value.index} />
-      </Item>
+        {this.renderInfo()}
+      </ActionItem>
     );
   }
 
-  private renderExtra () {
+  private renderInfo () {
     const { chain_bestNumber, democracy_publicDelay, t, value: { end, threshold } } = this.props;
 
     if (!chain_bestNumber) {

packages/app-treasury/src/Overview/Proposal.tsx

@@ -7,13 +7,12 @@ import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 
 import React from 'react';
 import { Option, TreasuryProposal } from '@polkadot/types';
-import { Button, Icon, InputAddress, Labelled, Static } from '@polkadot/ui-app';
+import { ActionItem, Button, Icon, InputAddress, Labelled, Static } from '@polkadot/ui-app';
 import { withCalls, withMulti, withObservable } from '@polkadot/ui-api';
 import keyring from '@polkadot/ui-keyring';
 import { formatBalance } from '@polkadot/util';
 
 import translate from '../translate';
-import Item from './Item';
 import Approve from './Approve';
 
 type Props = I18nProps & {
@@ -33,21 +32,19 @@ class ProposalDisplay extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { isApproved, proposal, proposalId } = this.props;
+    const { proposal, proposalId } = this.props;
 
     if (!proposal) {
       return null;
     }
 
     return (
-      <Item
-        isApproved={isApproved}
-        proposal={proposal}
-        proposalExtra={this.renderExtra()}
-        proposalId={proposalId}
+      <ActionItem
+        accessory={this.renderAccessory()}
+        idNumber={proposalId}
       >
-        {this.renderAccessory()}
-      </Item>
+        {this.renderInfo()}
+      </ActionItem>
     );
   }
 
@@ -85,14 +82,14 @@ class ProposalDisplay extends React.PureComponent<Props, State> {
         <Approve
           isOpen={isApproveOpen}
           onClose={this.hideApprove}
-          proposalInfo={this.renderExtra()}
+          proposalInfo={this.renderInfo()}
           proposalId={proposalId}
         />
       </>
     );
   }
 
-  private renderExtra () {
+  private renderInfo () {
     const { isApproved, proposal, t } = this.props;
 
     if (!proposal) {

packages/ui-app/src/ActionItem.tsx

@@ -0,0 +1,91 @@
+// Copyright 2017-2019 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Method, Proposal } from '@polkadot/types';
+
+import BN from 'bn.js';
+import React from 'react';
+import styled from 'styled-components';
+import { formatNumber } from '@polkadot/util';
+
+import Call from './Call';
+import Card from './Card';
+import { styles as rowStyles } from './Row';
+
+type Props = {
+  className?: string,
+  children?: React.ReactNode,
+  accessory?: React.ReactNode,
+  proposal?: Proposal,
+  idNumber: BN | number | string
+};
+
+export const styles = `
+  ${rowStyles}
+
+  .ui--ActionItem-extrinsic {
+    margin-top: 1rem;
+
+    .ui--Params-Content {
+      padding-left: 0;
+    }
+  }
+
+  .ui--ActionItem-header {
+    margin-bottom: 1rem;
+  }
+
+  .ui--ActionItem-buttons {
+
+  }
+`;
+
+class ActionItem extends React.PureComponent<Props> {
+  render () {
+    const { className, children, accessory, proposal } = this.props;
+
+    const idNumber = typeof this.props.idNumber === 'string'
+      ? this.props.idNumber
+      : formatNumber(this.props.idNumber);
+
+    return (
+      <Card className={className}>
+        <div className='ui--Row'>
+          <div className='ui--Row-base'>
+            <div className='ui--Row-details'>
+              {
+                proposal ?
+                  (() => {
+                    const { meta, method, section } = Method.findFunction(proposal.callIndex);
+
+                    return (
+                      <>
+                        <h3>#{idNumber}: {section}.{method}</h3>
+                        {meta && meta.documentation && (
+                          <details>
+                            <summary>{meta.documentation.join(' ')}</summary>
+                          </details>
+                        )}
+                        <Call
+                          className='ui--ActionItem-extrinsic'
+                          value={proposal}
+                        />
+                      </>
+                    );
+                  })() :
+                  (
+                    <h3>#{idNumber}</h3>
+                  )
+              }
+            </div>
+            {accessory}
+          </div>
+          {children}
+        </div>
+      </Card>
+    );
+  }
+}
+
+export default styled(ActionItem as React.ComponentClass<Props>)`${styles}`;

packages/ui-app/src/Column.tsx

@@ -31,11 +31,8 @@ class Column extends Collection<Props, State> {
 
   renderCollection () {
     const { children } = this.props;
-    return (
-      <article className='container'>
-        {children}
-      </article>
-    );
+
+    return children;
   }
 
   // renderEmpty () {

packages/ui-app/src/index.tsx

@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+export { default as ActionItem } from './ActionItem';
 export { default as AddressCard } from './AddressCard';
 export { default as AddressInfo } from './AddressInfo';
 export { default as AddressMini } from './AddressMini';