Function LegendView

packages/vega-deck.gl/src/legend.tsx:12–58

(props: StatelessProps<LegendViewProps>)

}

export const LegendView: StatelessComponent<LegendViewProps> = (props: StatelessProps<LegendViewProps>) => {
    const rows: TableRow[] = [];

    const addRow = (row: LegendRow, i: number) => {
        const fn = symbolMap[row.symbol.shape];
        let jsx: JSX.Element;
        if (fn) {
            jsx = fn(row.symbol);
        } else {
            jsx = <span>x</span>;
            //console.log(`need to render ${row.symbol.shape} symbol shape`);
        }
        rows.push({
            cells: [
                { className: 'symbol', content: jsx },
                { className: 'label', content: row.label, title: row.label },
            ],
        });
    };

    const sorted = Object.keys(props.legend.rows).sort((a, b) => +a - +b);
    sorted.forEach(i => addRow(props.legend.rows[i], +i));

    if (sorted.length) {
        return (
            <Table
                rows={rows}
                rowClassName="legend-row"
                onRowClick={(e, i) => props.onClick(e, props.legend, i)}
            >
                {props.legend.title !== undefined && (
                    <tr
                        tabIndex={props.onClick ? 0 : -1}
                        onClick={e => props.onClick(e as any as MouseEvent, props.legend, null)}
                        onKeyUp={e => {
                            if (e.key === KeyCodes.ENTER && props.onClick) {
                                props.onClick(e as any as MouseEvent, props.legend, null);
                            }
                        }}
                    >
                        <th colSpan={2}>{props.legend.title}</th>
                    </tr>
                )}
            </Table>
        );
    }
};

const symbolMap: { [shape: string]: (symbol: LegendRowSymbol) => JSX.Element } = {