ghost-portal/packages/react-components/src/ProposedAction.tsx
kwingram25 cdf1d88de5 Functional components (apps, react-components) (#1564)
* Functional components (apps, react-components)

* move consts
2019-09-01 14:23:42 +02:00

119 lines
2.7 KiB
TypeScript

// 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 { Proposal } from '@polkadot/types/interfaces';
import BN from 'bn.js';
import React from 'react';
import styled from 'styled-components';
import { GenericCall } from '@polkadot/types';
import { formatNumber } from '@polkadot/util';
import Call from './Call';
import Inset, { InsetProps } from './Inset';
import TreasuryProposal from './TreasuryProposal';
import { isTreasuryProposalVote } from './util';
interface Props {
className?: string;
asInset?: boolean;
insetProps?: Partial<InsetProps>;
proposal?: Proposal | null;
idNumber: BN | number | string;
isCollapsible?: boolean;
withLinks?: boolean;
expandNested?: boolean;
}
export const styles = `
.ui--ProposedAction-extrinsic {
margin-bottom: 1rem;
.ui--Params-Content {
padding-left: 0;
}
}
.ui--ProposedAction-header {
margin-bottom: 1rem;
}
`;
function ProposedAction (props: Props): React.ReactElement<Props> {
const { asInset, insetProps, isCollapsible, proposal, withLinks, expandNested } = props;
const idNumber = typeof props.idNumber === 'string'
? props.idNumber
: formatNumber(props.idNumber);
if (!proposal) {
return (
<h3>#{idNumber}</h3>
);
}
const { meta, method, section } = GenericCall.findFunction(proposal.callIndex);
const header = `#${idNumber}: ${section}.${method}`;
const documentation = (meta && meta.documentation)
? (
<summary>{meta.documentation.join(' ')}</summary>
)
: null;
const params = (isTreasuryProposalVote(proposal) && expandNested) ? (
<TreasuryProposal
className='ui--ProposedAction-extrinsic'
asInset={withLinks}
insetProps={{
withTopMargin: true,
withBottomMargin: true,
...(withLinks ? { href: '/treasury' } : {})
}}
proposalId={proposal.args[0].toString()}
/>
) : (
<Call
className='ui--ProposedAction-extrinsic'
value={proposal}
/>
);
if (asInset) {
return (
<Inset
header={header}
isCollapsible
{...insetProps}
>
<>
{documentation}
{params}
</>
</Inset>
);
}
return (
<>
<h3>{header}</h3>
{isCollapsible
? (
<details>
{documentation}
{params}
</details>
)
: (
<>
<details>
{documentation}
</details>
{params}
</>
)}
</>
);
}
export default styled(ProposedAction)`${styles}`;