ghost-portal/packages/ui-react/src/Container/Demo.tsx
YJ 57800cdb83 Fixes #103: Convert functional components to pure (#135)
* ui-signer pureComponentify

* ui-react pureCompify

* Status queue prop

* ui-app Button

* ui-app InputExtrinsic

* apps, app-rpc, ui-app, ui-react

* app-extrinsics, app-explorer, apps

* fixes for tslint

* more linter fixes

* Update index.tsx

* Update index.tsx

* Update Nonce.tsx

* Update index.tsx

* Update Results.tsx

* Update index.tsx

* Update Queries.tsx

* Update NodeInfo.tsx

* Update index.tsx

* Update Item.tsx

* style fixes

* TSLINTs
2018-07-13 07:40:31 +02:00

42 lines
1.1 KiB
TypeScript

// Copyright 2017-2018 @polkadot/ui-react authors & contributors
// This software may be modified and distributed under the terms
// of the ISC license. See the LICENSE file for details.
import React from 'react';
import Container from './index';
type DemoProps = {
attrs: { [index: string]: any },
attrsReq: Array<string>,
children: any, // node?
component: string
};
export default class Demo extends React.PureComponent<DemoProps> {
render () {
const { attrs, attrsReq, children, component } = this.props;
const allAttrs = Object.assign({ className: '"..."', style: '{...}' }, attrs);
const attrsText = Object
.keys(allAttrs)
.map((attr) => {
const value = allAttrs[attr];
const bool = value === 'bool';
const opt = bool || !attrsReq.includes(attr);
return `${opt ? '[' : ''}${attr}${bool ? '' : '='}${bool ? '' : value}${opt ? ']' : ''}`;
})
.sort()
.join('\n ');
return (
<Container className='ui--DemoContainer'>
<pre className='ui--DemoHeader'>
{`<${component}\n ${attrsText}\n/>`}
</pre>
{children}
</Container>
);
}
}