"Fossies" - the Fresh Open Source Software Archive

Member "grafana-6.5.2/packages/grafana-ui/src/components/List/AbstractList.tsx" (11 Dec 2019, 1146 Bytes) of package /linux/misc/grafana-6.5.2.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "AbstractList.tsx": 6.4.2_vs_6.4.3.

    1 import React from 'react';
    2 import { cx, css } from 'emotion';
    3 import { stylesFactory } from '../../themes';
    4 
    5 export interface ListProps<T> {
    6   items: T[];
    7   renderItem: (item: T, index: number) => JSX.Element;
    8   getItemKey?: (item: T) => string;
    9   className?: string;
   10 }
   11 
   12 interface AbstractListProps<T> extends ListProps<T> {
   13   inline?: boolean;
   14 }
   15 
   16 const getStyles = stylesFactory((inlineList = false) => ({
   17   list: css`
   18     list-style-type: none;
   19     margin: 0;
   20     padding: 0;
   21   `,
   22 
   23   item: css`
   24     display: ${(inlineList && 'inline-block') || 'block'};
   25   `,
   26 }));
   27 
   28 export class AbstractList<T> extends React.PureComponent<AbstractListProps<T>> {
   29   constructor(props: AbstractListProps<T>) {
   30     super(props);
   31   }
   32 
   33   render() {
   34     const { items, renderItem, getItemKey, className, inline } = this.props;
   35     const styles = getStyles(inline);
   36 
   37     return (
   38       <ul className={cx(styles.list, className)}>
   39         {items.map((item, i) => {
   40           return (
   41             <li className={styles.item} key={getItemKey ? getItemKey(item) : i}>
   42               {renderItem(item, i)}
   43             </li>
   44           );
   45         })}
   46       </ul>
   47     );
   48   }
   49 }