@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

package/components/table/table.d.ts

@@ -0,0 +1,159 @@
+/**
+ * @name Table
+ */
+import React, { Component, PureComponent, ReactNode, SyntheticEvent } from 'react';
+import { OnChangeMeta } from 'react-movable/lib/types';
+import { FocusSensorAddProps, FocusSensorProps } from '../global/focus-sensor-hoc';
+import { SelectionItem } from './selection';
+import { SelectionShortcutsAddProps, SelectionShortcutsProps } from './selection-shortcuts-hoc';
+import { DisableHoverAddProps, DisableHoverProps } from './disable-hover-hoc';
+import { Column, SortParams } from './header-cell';
+export interface ReorderParams<T> {
+    data: T[];
+    oldIndex: number;
+    newIndex: number;
+}
+export interface TableProps<T extends SelectionItem> extends FocusSensorAddProps<HTMLTableRowElement>, SelectionShortcutsAddProps<T>, DisableHoverAddProps {
+    data: readonly T[];
+    columns: readonly Column<T>[];
+    isItemSelectable: (item: T) => boolean;
+    loading: boolean;
+    onSort: (params: SortParams) => void;
+    onReorder: (params: ReorderParams<T>) => void;
+    getItemKey: (item: T) => string | number;
+    sortKey: string;
+    sortOrder: boolean;
+    draggable: boolean;
+    alwaysShowDragHandle: boolean;
+    dragHandleTitle?: string;
+    stickyHeader: boolean;
+    getItemLevel: (item: T) => number;
+    getItemClassName: (item: T) => string | null | undefined;
+    getMetaColumnClassName: (item: T) => string | null | undefined;
+    getItemDataTest: (item: T) => string | null | undefined;
+    isItemCollapsible: (item: T) => boolean;
+    isParentCollapsible: (item: T) => boolean;
+    isItemCollapsed: (item: T) => boolean;
+    onItemCollapse: (item: T) => void;
+    onItemExpand: (item: T) => void;
+    onItemDoubleClick: (item: T) => void;
+    onItemClick: (item: T, e: React.MouseEvent<HTMLTableRowElement>) => void;
+    remoteSelection: boolean;
+    isDisabledSelectionVisible: (item: T) => boolean;
+    getCheckboxTooltip: (item: T) => string | undefined;
+    className?: string | null | undefined;
+    loaderClassName?: string | undefined;
+    caption?: string | null | undefined;
+    stickyHeaderOffset?: string | undefined;
+    renderEmpty?: (() => ReactNode) | null | undefined;
+}
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+export declare class Table<T extends SelectionItem> extends PureComponent<TableProps<T>> {
+    static defaultProps: {
+        isItemSelectable: () => boolean;
+        loading: boolean;
+        onSort: () => void;
+        onReorder: () => void;
+        getItemKey: (item: SelectionItem) => string | number;
+        sortKey: string;
+        sortOrder: boolean;
+        draggable: boolean;
+        alwaysShowDragHandle: boolean;
+        stickyHeader: boolean;
+        getItemLevel: () => number;
+        getItemClassName: () => null;
+        getMetaColumnClassName: () => null;
+        getItemDataTest: () => null;
+        isItemCollapsible: () => boolean;
+        isParentCollapsible: () => boolean;
+        isItemCollapsed: () => boolean;
+        onItemCollapse: () => void;
+        onItemExpand: () => void;
+        onItemDoubleClick: () => void;
+        onItemClick: () => void;
+        remoteSelection: boolean;
+        isDisabledSelectionVisible: () => boolean;
+        getCheckboxTooltip: () => undefined;
+    };
+    state: {
+        shortcutsScope: string;
+        userSelectNone: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }: TableProps<T>): void;
+    componentWillUnmount(): void;
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseUp: () => void;
+    onRowFocus: (row: T) => void;
+    onRowSelect: (row: T, selected: boolean) => void;
+    onSortEnd: ({ oldIndex, newIndex }: OnChangeMeta) => void;
+    onCheckboxChange: (e: SyntheticEvent<HTMLInputElement>) => void;
+    restoreFocusWithoutScroll: () => void;
+    render(): React.JSX.Element;
+}
+export type TableAttrs<T extends SelectionItem> = DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>;
+export default class TableContainer<T extends SelectionItem> extends Component<TableAttrs<T>> {
+    static propTypes: React.WeakValidationMap<SelectionShortcutsProps<SelectionItem, FocusSensorProps<TableProps<SelectionItem>, HTMLTableRowElement, typeof Table>>> | undefined;
+    Table: {
+        new (props: DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>): {
+            state: {
+                disabledHover: boolean;
+            };
+            componentDidMount(): void;
+            componentWillUnmount(): void;
+            onMouseMove: () => void;
+            onKeyDown: (e: KeyboardEvent) => void;
+            render(): React.JSX.Element;
+            context: unknown;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        new (props: DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>, context: any): {
+            state: {
+                disabledHover: boolean;
+            };
+            componentDidMount(): void;
+            componentWillUnmount(): void;
+            onMouseMove: () => void;
+            onKeyDown: (e: KeyboardEvent) => void;
+            render(): React.JSX.Element;
+            context: unknown;
+            setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+            forceUpdate(callback?: (() => void) | undefined): void;
+            readonly props: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>;
+            refs: {
+                [key: string]: React.ReactInstance;
+            };
+            shouldComponentUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): boolean;
+            componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+            getSnapshotBeforeUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>): any;
+            componentDidUpdate?(prevProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, prevState: Readonly<{}>, snapshot?: any): void;
+            componentWillMount?(): void;
+            UNSAFE_componentWillMount?(): void;
+            componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
+            UNSAFE_componentWillReceiveProps?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextContext: any): void;
+            componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
+            UNSAFE_componentWillUpdate?(nextProps: Readonly<DisableHoverProps<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>>>, nextState: Readonly<{}>, nextContext: any): void;
+        };
+        propTypes: React.WeakValidationMap<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | undefined;
+        defaultProps: Partial<SelectionShortcutsProps<T, FocusSensorProps<TableProps<T>, HTMLTableRowElement, typeof Table>>> | undefined;
+        contextType?: React.Context<any> | undefined;
+    };
+    render(): React.JSX.Element;
+}

package/components/table/table.examples2.json

@@ -0,0 +1,19 @@
+{
+  "continents": [
+    {"id": 1, "continent": "Asia", "url": "https://en.wikipedia.org/wiki/Asia"},
+    {"id": 2, "continent": "Europe", "url": "https://en.wikipedia.org/wiki/Europe"},
+    {"id": 3, "continent": "America", "url": "https://en.wikipedia.org/wiki/America"},
+    {"id": 4, "continent": "Africa", "url": "https://en.wikipedia.org/wiki/Africa"},
+    {"id": 5, "continent": "Australia", "url": "https://en.wikipedia.org/wiki/Australia"}
+  ],
+  "countries": [
+    {"id": 1, "country": "Russia", "city": "Moscow", "url": "https://en.wikipedia.org/wiki/Russia"},
+    {"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
+    {"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
+    {"id": 4, "country": "USA", "city": "NYC", "url": "https://en.wikipedia.org/wiki/USA"},
+    {"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
+    {"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
+    {"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
+    {"id": 8, "country": "Norway", "city": "Oslo", "url": "https://en.wikipedia.org/wiki/Norway"}
+  ]
+}

package/components/table/table.js

@@ -0,0 +1,231 @@
+/**
+ * @name Table
+ */
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { arrayMove, List } from 'react-movable';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import Loader from '../loader/loader';
+import Selection from './selection';
+import Header from './header';
+import style from './table.css';
+import selectionShortcutsHOC from './selection-shortcuts-hoc';
+import disableHoverHOC from './disable-hover-hoc';
+import Row from './row-with-focus-sensor';
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+export class Table extends PureComponent {
+    static defaultProps = {
+        isItemSelectable: () => true,
+        loading: false,
+        onSort: () => { },
+        onReorder: () => { },
+        getItemKey: (item) => item.id,
+        sortKey: 'id',
+        sortOrder: true,
+        draggable: false,
+        alwaysShowDragHandle: false,
+        stickyHeader: true,
+        getItemLevel: () => 0,
+        getItemClassName: () => null,
+        getMetaColumnClassName: () => null,
+        getItemDataTest: () => null,
+        isItemCollapsible: () => false,
+        isParentCollapsible: () => false,
+        isItemCollapsed: () => false,
+        onItemCollapse: () => { },
+        onItemExpand: () => { },
+        onItemDoubleClick: () => { },
+        onItemClick: () => { },
+        remoteSelection: false,
+        isDisabledSelectionVisible: () => false,
+        getCheckboxTooltip: () => undefined
+    };
+    state = {
+        shortcutsScope: getUID('ring-table-'),
+        userSelectNone: false
+    };
+    componentDidMount() {
+        document.addEventListener('mouseup', this.onMouseUp);
+    }
+    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }) {
+        if (data !== this.props.data && remoteSelection) {
+            onSelect(selection.cloneWith({ data: this.props.data }));
+        }
+        if (!this.props.selectable && this.props.selectable !== selectable) {
+            onSelect(selection.resetSelection());
+        }
+    }
+    componentWillUnmount() {
+        document.removeEventListener('mouseup', this.onMouseUp);
+    }
+    onMouseDown = (e) => {
+        if (e.shiftKey) {
+            this.setState({ userSelectNone: true });
+        }
+    };
+    onMouseUp = () => {
+        if (this.state.userSelectNone) {
+            this.setState({ userSelectNone: false });
+        }
+    };
+    onRowFocus = (row) => {
+        const { selection, onSelect } = this.props;
+        onSelect(selection.focus(row));
+    };
+    onRowSelect = (row, selected) => {
+        const { selection, onSelect } = this.props;
+        if (selected) {
+            onSelect(selection.select(row));
+        }
+        else {
+            onSelect(selection.deselect(row));
+        }
+    };
+    onSortEnd = ({ oldIndex, newIndex }) => {
+        const data = arrayMove(this.props.data, oldIndex, newIndex);
+        this.props.onReorder({ data, oldIndex, newIndex });
+    };
+    onCheckboxChange = (e) => {
+        const { checked } = e.currentTarget;
+        const { selection, onSelect } = this.props;
+        if (checked) {
+            onSelect(selection.selectAll());
+        }
+        else {
+            onSelect(selection.reset());
+        }
+        this.restoreFocusWithoutScroll();
+    };
+    restoreFocusWithoutScroll = () => {
+        const { scrollX, scrollY } = window;
+        this.props.onFocusRestore();
+        window.scrollTo(scrollX, scrollY);
+    };
+    render() {
+        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty } = this.props;
+        // NOTE: Do not construct new object per render because it causes all rows rerendering
+        const headerProps = {
+            caption, selectable, draggable,
+            columns, onSort, sortKey, sortOrder,
+            sticky: stickyHeader,
+            topStickOffset: stickyHeaderOffset
+        };
+        const selectedSize = selection.getSelected().size;
+        const allSelectedSize = selection.selectAll().getSelected().size;
+        headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
+        headerProps.onCheckboxChange = this.onCheckboxChange;
+        headerProps.checkboxDisabled = this.props.data.length === 0;
+        const wrapperClasses = classNames({
+            [style.tableWrapper]: true,
+            [style.loading]: loading
+        });
+        const classes = classNames(this.props.className, {
+            [style.table]: true,
+            [style.multiSelection]: selection.getSelected().size > 0,
+            [style.userSelectNone]: this.state.userSelectNone,
+            [style.disabledHover]: this.props.disabledHover
+        });
+        const renderList = ({ children, props }) => {
+            const empty = (<tr>
+          <td colSpan={this.props.columns.length || 1} className={style.tableMessage}>
+            {renderEmpty ? renderEmpty() : null}
+          </td>
+        </tr>);
+            const tbody = Array.isArray(children) && children.length > 0
+                ? children
+                : empty;
+            return (<table className={classes} data-test="ring-table">
+          <Header {...headerProps}/>
+          <tbody {...props} data-test="ring-table-body">
+            {tbody}
+          </tbody>
+        </table>);
+        };
+        const renderItem = ({ value, props = {}, isDragged }) => {
+            if (value == null) {
+                return null;
+            }
+            const { ref, ...restProps } = props;
+            const row = (<Row innerRef={ref} key={getItemKey(value)} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} {...restProps}/>);
+            return isDragged
+                ? (<table style={{ ...props.style }} className={style.draggingTable}>
+            <tbody>{row}</tbody>
+          </table>)
+                : row;
+        };
+        return (<div className={wrapperClasses} data-test="ring-table-wrapper" ref={this.props.innerRef}>
+        {focused &&
+                (<Shortcuts map={this.props.shortcutsMap} scope={this.state.shortcutsScope}/>)}
+
+        {/* Handler detects that user holds Shift key */}
+        <div role="presentation" onMouseDown={this.onMouseDown}>
+          {draggable
+                ? (<List values={data} renderList={renderList} renderItem={renderItem} onChange={this.onSortEnd}/>)
+                : renderList({ children: data.map((value, index) => renderItem({ value, index })) })}
+        </div>
+
+        {loading && (<div className={style.loadingOverlay}>
+            <Loader className={loaderClassName}/>
+          </div>)}
+      </div>);
+    }
+}
+Table.propTypes = {
+    className: PropTypes.string,
+    loaderClassName: PropTypes.string,
+    data: PropTypes.array.isRequired,
+    columns: PropTypes.array.isRequired,
+    caption: PropTypes.string,
+    isItemSelectable: PropTypes.func,
+    stickyHeader: PropTypes.bool,
+    stickyHeaderOffset: PropTypes.string,
+    loading: PropTypes.bool,
+    getItemKey: PropTypes.func,
+    getItemClassName: PropTypes.func,
+    getMetaColumnClassName: PropTypes.func,
+    getItemDataTest: PropTypes.func,
+    onSort: PropTypes.func,
+    onReorder: PropTypes.func,
+    sortKey: PropTypes.string,
+    sortOrder: PropTypes.bool,
+    draggable: PropTypes.bool,
+    alwaysShowDragHandle: PropTypes.bool,
+    getItemLevel: PropTypes.func,
+    isItemCollapsible: PropTypes.func,
+    isParentCollapsible: PropTypes.func,
+    isItemCollapsed: PropTypes.func,
+    onItemCollapse: PropTypes.func,
+    onItemExpand: PropTypes.func,
+    isDisabledSelectionVisible: PropTypes.func,
+    getCheckboxTooltip: PropTypes.func,
+    onItemDoubleClick: PropTypes.func,
+    onItemClick: PropTypes.func,
+    // focusSensorHOC
+    focused: PropTypes.bool,
+    onFocusRestore: PropTypes.func,
+    innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func]),
+    // selectionShortcutsHOC
+    selection: PropTypes.instanceOf(Selection).isRequired,
+    selectable: PropTypes.bool,
+    onSelect: PropTypes.func,
+    shortcutsMap: PropTypes.object,
+    // disableHoverHOC
+    disabledHover: PropTypes.bool,
+    remoteSelection: PropTypes.bool,
+    renderEmpty: PropTypes.func
+};
+const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+// eslint-disable-next-line react/no-multi-comp
+export default class TableContainer extends Component {
+    // https://stackoverflow.com/a/53882322/6304152
+    static propTypes = getContainer().propTypes;
+    Table = getContainer();
+    render() {
+        return <this.Table {...this.props}/>;
+    }
+}

package/components/table/table.stories.json

@@ -0,0 +1,45 @@
+[
+  {"id": 1, "country": "Russia", "city": "Moscow", "url": "https://en.wikipedia.org/wiki/Russia", "children": [
+    {"id": 11, "country": "Tatarstan", "city": "Kazan", "url": "https://en.wikipedia.org/wiki/Tatarstan"},
+    {"id": 12, "country": "Chechnya", "city": "Grosniy", "url": "https://en.wikipedia.org/wiki/Chechnya"}
+  ]},
+  {"id": 2, "country": "France", "city": "Paris", "url": "https://en.wikipedia.org/wiki/France"},
+  {"id": 3, "country": "Sweden", "city": "Stockholm", "url": "https://en.wikipedia.org/wiki/Sweden"},
+  {"id": 4, "country": "USA", "city": "NYC", "url": "https://en.wikipedia.org/wiki/USA", "children": [
+    {"id": 41, "country": "California", "city": "Los Angeles", "url": "https://en.wikipedia.org/wiki/California"},
+    {"id": 42, "country": "New York", "city": "NYC", "url": "https://en.wikipedia.org/wiki/New York", "children": [
+      {"id": 421, "country": "NYC", "city": "NYC", "url": "https://en.wikipedia.org/wiki/NYC", "children": [
+        {"id": 4211, "country": "Manhattan", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Manhattan"},
+        {"id": 4212, "country": "Brooklyn", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Brooklyn"},
+        {"id": 4213, "country": "Queens", "city": "NYC", "url": "https://en.wikipedia.org/wiki/Queens"}
+      ]}
+    ]},
+    {"id": 43, "country": "Texas", "city": "Houston", "url": "https://en.wikipedia.org/wiki/Texas"}
+  ]},
+  {"id": 5, "country": "South Africa", "city": "Johannesburg", "url": "https://en.wikipedia.org/wiki/South Africa"},
+  {"id": 6, "country": "Finland", "city": "Helsinki", "url": "https://en.wikipedia.org/wiki/Finland"},
+  {"id": 7, "country": "Latvia", "city": "Riga", "url": "https://en.wikipedia.org/wiki/Latvia"},
+  {"id": 8, "country": "Norway", "city": "Oslo", "url": "https://en.wikipedia.org/wiki/Norway"},
+  {"id": 9, "country": "Brazil", "city": "Rio", "url": "https://en.wikipedia.org/wiki/Brazil"},
+  {"id": 11, "country": "China", "city": "Beijing", "url": "https://en.wikipedia.org/wiki/China"},
+  {"id": 12, "country": "Germany", "city": "Berlin", "url": "https://en.wikipedia.org/wiki/Germany"},
+  {"id": 13, "country": "Luxembourg", "city": "Luxembourg", "url": "https://en.wikipedia.org/wiki/Luxembourg"},
+  {"id": 14, "country": "Belgium", "city": "Brussels", "url": "http://statbel.fgov.be/fr/statistiques/chiffres/population/structure/natact/beletr/"},
+  {"id": 15, "country": "Italy", "city": "Rome", "url": "https://en.wikipedia.org/wiki/Italy"},
+  {"id": 16, "country": "Spain", "city": "Madrid", "url": "https://en.wikipedia.org/wiki/Spain"},
+  {"id": 17, "country": "Portugal", "city": "Lisbon", "url": "https://en.wikipedia.org/wiki/Portugal"},
+  {"id": 18, "country": "Greece", "city": "Athens", "url": "https://en.wikipedia.org/wiki/Greece"},
+  {"id": 19, "country": "Israel", "city": "Tel Aviv", "url": "https://en.wikipedia.org/wiki/Israel"},
+  {"id": 20, "country": "Poland", "city": "Warsaw", "url": "https://en.wikipedia.org/wiki/Poland"},
+  {"id": 21, "country": "Bulgaria", "city": "Sofia", "url": "https://en.wikipedia.org/wiki/Bulgaria"},
+  {"id": 22, "country": "Japan", "city": "Tokio", "url": "https://en.wikipedia.org/wiki/Japan"},
+  {"id": 23, "country": "Thailand", "city": "Bangkok", "url": "https://en.wikipedia.org/wiki/Thailand"},
+  {"id": 24, "country": "Vietnam", "city": "Hanoi", "url": "https://en.wikipedia.org/wiki/Vietnam"},
+  {"id": 25, "country": "Iraq", "city": "Baghdad", "url": "https://en.wikipedia.org/wiki/Iraq"},
+  {"id": 26, "country": "Iran", "city": "Tehran", "url": "https://en.wikipedia.org/wiki/Iran"},
+  {"id": 27, "country": "Syria", "city": "Damask", "url": "https://en.wikipedia.org/wiki/Syria"},
+  {"id": 28, "country": "Turkey", "city": "Ankara", "url": "https://en.wikipedia.org/wiki/Turkey"},
+  {"id": 29, "country": "Australia", "city": "Sydney", "url": "https://en.wikipedia.org/wiki/Australia"},
+  {"id": 30, "country": "UK", "city": "London", "url": "https://en.wikipedia.org/wiki/UK"},
+  {"id": 31, "country": "India", "city": "Deli", "url": "https://en.wikipedia.org/wiki/India"}
+]