0e2265ff70
* Some initial cleanups * Make it lint * Small s/type/interface/ additions * Small minor s/type/interface/ * More type -> interface * Add lint:new rule * Some small updates * Cleanup dangling tslint issues * Small updates * ui-signer cleanups * ui-reactive updated * Make lint:new run * Mini ui-params cleanups * Some additions * Tiny... and done for now. * 1950 problems (1241 errors, 709 warnings) * 1829 problems (1181 errors, 648 warnings) * 1674 problems (1181 errors, 493 warnings) (no any... for now) * Small additions. * Array<T> -> T[] (all)
107 lines
2.3 KiB
TypeScript
107 lines
2.3 KiB
TypeScript
// Copyright 2017-2019 @polkadot/ui-app 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 React from 'react';
|
|
|
|
export type CollectionProps = I18nProps & {
|
|
buttons?: React.ReactNode,
|
|
children: React.ReactNode,
|
|
className?: string,
|
|
headerText?: React.ReactNode,
|
|
isEmpty?: boolean,
|
|
emptyText?: React.ReactNode
|
|
};
|
|
|
|
export type CollectionState = {
|
|
isEmpty: boolean,
|
|
showHeader?: boolean
|
|
};
|
|
|
|
export const collectionStyles = `
|
|
.ui--Collection-header {
|
|
display: flex;
|
|
margin-bottom: 0.5rem;
|
|
min-height: 2.75rem;
|
|
|
|
h1 {
|
|
flex: 1 1;
|
|
margin: 0;
|
|
text-transform: lowercase;
|
|
}
|
|
}
|
|
|
|
.ui--Collection-lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
`;
|
|
|
|
export default class Collection<P extends CollectionProps, S extends CollectionState> extends React.PureComponent<P, S> {
|
|
public constructor (props: P) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
isEmpty: Collection.isEmpty(props.children)
|
|
} as S;
|
|
}
|
|
|
|
private static isEmpty (children?: React.ReactNode): boolean {
|
|
return !children || (Array.isArray(children) && children.length === 0);
|
|
}
|
|
|
|
static getDerivedStateFromProps ({ children }: CollectionProps) {
|
|
return {
|
|
isEmpty: Collection.isEmpty(children)
|
|
};
|
|
}
|
|
|
|
public render (): React.ReactNode {
|
|
const { className } = this.props;
|
|
const { isEmpty, showHeader } = this.state;
|
|
|
|
return (
|
|
<div className={className}>
|
|
{showHeader && this.renderHeader()}
|
|
{isEmpty
|
|
? this.renderEmpty()
|
|
: this.renderCollection()
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
protected renderHeader () {
|
|
const { buttons, headerText } = this.props;
|
|
|
|
return (
|
|
<div className='ui--Collection-header'>
|
|
<h1>{headerText}</h1>
|
|
{buttons && (
|
|
<div className='ui--Collection-buttons'>
|
|
{buttons}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
protected renderEmpty () {
|
|
const { emptyText, t } = this.props;
|
|
|
|
return (
|
|
<article>
|
|
<div className='ui--Collection-lowercase'>
|
|
{emptyText || t('No items')}
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
protected renderCollection (): React.ReactNode {
|
|
const { children } = this.props;
|
|
return children;
|
|
}
|
|
}
|