superdesk-ui-framework 3.0.14 → 3.0.15

package/.mocharc.json

@@ -0,0 +1,5 @@
+{
+    "extension": ["ts", ".tsx"],
+    "spec": "app-typescript/components/*.spec.*",
+    "require": ["ts-node/register", "./mocha-setup.ts"]
+}

package/app-typescript/components/ResizablePanels.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import {ImperativePanelHandle, Panel, PanelGroup, PanelResizeHandle} from '@superdesk/react-resizable-panels';
+
+interface IPanelSize {
+    min?: number; // percent
+    max?: number; // percent
+    default?: number; // percent
+}
+
+interface IProps {
+    /**
+     * component will set primary dimension(width when horizontal, height when vertical) to 100%
+     * parent component has to support this
+     */
+    direction: 'horizontal' | 'vertical';
+
+    primarySize?: IPanelSize;
+    secondarySize?: IPanelSize;
+
+    /**
+     * Only 2 items are supported to keep API surface minimal so it's easy to switch to another library if needed.
+     */
+    children: [React.ReactNode, React.ReactNode];
+}
+
+
+/**
+ Features:
+ * No absolute positioning is used
+ * Component height is fully dynamic and adjusts according to children inside panes
+ * Library supports an arbitrary number of panes. We are not using it to keep API minimal.
+ * Drawback: only works with percent units. Can be made to work with pixels
+ * by creating a wrapper that measures available space and converts to percent.
+ */
+export class ResizablePanels extends React.PureComponent<IProps> {
+    private primaryPanelRef: ImperativePanelHandle | null;
+    private secondaryPanelRef: ImperativePanelHandle | null;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.primaryPanelRef = null;
+        this.secondaryPanelRef = null;
+    }
+
+    render(): React.ReactNode {
+        const {direction, primarySize, secondarySize, children} = this.props;
+        const separatorDimensions: React.CSSProperties = direction === 'horizontal'
+            ? {width: 3, height: '100%'}
+            : {height: 3, width: '100%'};
+
+        // Sometimes second panel is conditional. Checking here is more convenient.
+        if (children.some((child) => child === false || child == null)) {
+            return children;
+        }
+
+        return (
+            <PanelGroup direction={direction}>
+                <Panel
+                    id="primary"
+                    minSize={primarySize?.min}
+                    maxSize={primarySize?.max}
+                    defaultSize={primarySize?.default}
+                    ref={(panelRef) => {
+                        this.primaryPanelRef = panelRef;
+                    }}
+                >
+                    {children[0]}
+                </Panel>
+
+                <PanelResizeHandle>
+                    <div
+                        style={{background: 'var(--color-text-lighter)', ...separatorDimensions}}
+                        onDoubleClick={() => {
+                            if (primarySize?.default != null) {
+                                this.primaryPanelRef?.resize(primarySize.default);
+                            } else if (secondarySize?.default != null) {
+                                this.secondaryPanelRef?.resize(secondarySize.default);
+                            }
+                        }}
+                    />
+                </PanelResizeHandle>
+
+                <Panel
+                    id="secondary"
+                    minSize={secondarySize?.min}
+                    maxSize={secondarySize?.max}
+                    defaultSize={secondarySize?.default}
+                    ref={(panelRef) => {
+                        this.secondaryPanelRef = panelRef;
+                    }}
+                >
+                    {children[1]}
+                </Panel>
+            </PanelGroup>
+        );
+    }
+}

package/app-typescript/components/WithPagination.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import {Icon} from '../components/Icon';
+
+interface IProps<T> {
+    getItems(pageNo: number, signal: AbortSignal): Promise<{items: Array<T>, itemCount: number}>;
+    children: (items: Array<T>) => JSX.Element;
+    pageSize?: number;
+}
+
+interface IState<T> {
+    currentPage: number;
+    items: Array<T> | null;
+}
+
+export function getPagination(currentPage: number, totalPages: number): Array<number | 'dots'> {
+    if (currentPage <= 0 || totalPages <= 0 || currentPage > totalPages) {
+        return [];
+    }
+
+    let basePages: ReturnType<typeof getPagination> = [
+        currentPage - 2,
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        currentPage + 2,
+    ].filter((page) => page >= 1 && page <= totalPages);
+
+    if (!basePages.includes(1)) { // include first and maybe dots
+        const firstInCurrentList = basePages[0];
+
+        if (firstInCurrentList !== 1) {
+            basePages = [
+                'dots',
+                ...basePages,
+            ];
+        }
+
+        basePages = [
+            1,
+            ...basePages,
+        ];
+    }
+
+    if (!basePages.includes(totalPages)) { // include last and maybe dots
+        const lastInCurrentList = basePages[basePages.length - 1];
+
+        if (lastInCurrentList !== totalPages - 1) { // add dots if we're skipping some numbers
+            basePages = basePages.concat('dots');
+        }
+
+        basePages = [
+            ...basePages,
+            totalPages,
+        ];
+    }
+
+    return basePages;
+}
+
+function getScrollParent(element: HTMLElement | null): HTMLElement | null {
+    if (element == null) {
+        return null;
+    }
+
+    let parentElement: HTMLElement | null = element;
+
+    const overflowY = window.getComputedStyle(parentElement).overflowY;
+    const hasScrollbar = overflowY === 'auto' || overflowY === 'scroll';
+
+    while (parentElement !== null && !hasScrollbar) {
+        parentElement = parentElement.parentElement ?? null;
+    }
+
+    return parentElement;
+}
+
+export class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>> {
+    private pageCount: number;
+    private abortController: AbortController;
+    private ref: HTMLDivElement | null;
+    private inProgress: boolean;
+
+    constructor(props: IProps<T>) {
+        super(props);
+
+        this.state = {
+            currentPage: 1,
+            items: null,
+        };
+
+        this.switchPage = this.switchPage.bind(this);
+        this.getPageSize = this.getPageSize.bind(this);
+
+        this.pageCount = 0;
+        this.abortController = new window.AbortController(); // window. needed for unit tests
+        this.ref = null;
+        this.inProgress = false;
+    }
+
+    getPageSize() {
+        return this.props.pageSize ?? 20;
+    }
+
+    switchPage(page: number) {
+        if (this.inProgress) {
+            this.abortController.abort();
+        }
+
+        this.inProgress = true;
+        this.props.getItems(page, this.abortController.signal).then((res) => {
+            this.inProgress = false;
+            this.setState({items: res.items, currentPage: page}, () => {
+                const scrollableEl = getScrollParent(this.ref);
+                const diff = scrollableEl != null && this.ref?.scrollHeight != null
+                    ? scrollableEl.offsetHeight - this.ref.scrollHeight
+                    : null;
+
+                if (scrollableEl != null) {
+                    scrollableEl.scrollTop = diff != null ? diff : 0;
+                }
+            });
+        });
+    }
+
+    componentDidMount(): void {
+        this.props.getItems(1, this.abortController.signal).then((res) => {
+            this.pageCount = Math.ceil(res.itemCount / this.getPageSize());
+            this.setState({items: res.items});
+        });
+    }
+
+    render() {
+        if (this.state.items == null) {
+            return null;
+        }
+
+        const pageElements = getPagination(this.state.currentPage, this.pageCount).map((el, i) => {
+            if (el === 'dots') {
+                return (
+                    <span data-test-id="more-pages" className='sd-pagination__item sd-pagination__item--more'>...</span>
+                );
+            } else {
+                return (
+                    <button
+                        data-test-id={`page-button-${i}`}
+                        className={
+                            this.state.currentPage === el
+                                ? 'sd-pagination__item sd-pagination__item--active'
+                                : 'sd-pagination__item'
+                        }
+                        onClick={() => this.switchPage(el)}
+                    >
+                        {el}
+                    </button>
+                );
+            }
+        });
+
+        pageElements.unshift(
+            <>
+                <button
+                    data-test-id="btn-1"
+                    className='sd-pagination__item sd-pagination__item--start'
+                    disabled={this.state.currentPage === 1}
+                    onClick={() => this.switchPage(1)}
+                >
+                    <Icon name='backward-thin' />
+                </button>
+                <button
+                    data-test-id="btn-2"
+                    className='sd-pagination__item sd-pagination__item--start'
+                    disabled={this.state.currentPage <= 1}
+                    onClick={() => this.switchPage(this.state.currentPage - 1)}
+                >
+                    <Icon name='chevron-left-thin' />
+                </button>
+            </>,
+        );
+
+        pageElements.push(
+            <>
+                <button
+                    data-test-id="btn-3"
+                    className='sd-pagination__item sd-pagination__item--forward'
+                    onClick={() => this.switchPage(this.state.currentPage + 1)}
+                    disabled={this.state.currentPage === this.pageCount}
+                >
+                    <Icon name='chevron-right-thin' />
+                </button>
+                <button
+                    data-test-id="btn-4"
+                    className='sd-pagination__item sd-pagination__item--end'
+                    onClick={() => this.switchPage(this.pageCount)}
+                    disabled={this.state.currentPage === this.pageCount}
+                >
+                    <Icon name='forward-thin' />
+                </button>
+            </>,
+        );
+
+        const StyledPagination: React.ComponentType = () => (
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'center',
+                }}
+            >
+                {pageElements}
+            </div>
+        );
+
+        return (
+            <div
+                style={{
+                    height: '100%',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+                ref={(element) => {
+                    this.ref = element;
+                }}
+            >
+                <StyledPagination />
+                    {this.props.children(this.state.items)}
+                <StyledPagination />
+            </div>
+        );
+    }
+}

package/app-typescript/components/with-pagination.spec.tsx

@@ -0,0 +1,146 @@
+import {describe, it} from 'mocha';
+import * as assert from 'assert';
+import {mount} from 'enzyme';
+import * as React from 'react';
+import {getPagination, WithPagination} from './WithPagination';
+import {range} from 'lodash';
+
+interface IPost {
+    title: string;
+}
+
+// Simulate fetching delay
+const TIMEOUT = 1000;
+
+export class Paginated extends React.PureComponent {
+    getItems(): Promise<{items: Array<IPost>, itemCount: number}> {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                return resolve({items: range(1, 500).map((x) => ({title: `title ${x}`})), itemCount: 500});
+            }, TIMEOUT);
+        });
+    }
+
+    render() {
+        return (
+            <WithPagination
+                getItems={() => this.getItems()}
+            >
+                {
+                    (items) => <div>{JSON.stringify(items)}</div>
+                }
+            </WithPagination>
+        );
+    }
+}
+
+describe('getPagination', () => {
+    it('returns empty array when we have 0 pages', () => {
+        assert.strictEqual(getPagination(1, 0).length, 0);
+    });
+
+    it('returns empty array when we try to access page <= 0', () => {
+        assert.strictEqual(getPagination(-10, 100).length, 0);
+    });
+
+    it('returns dots when on page 1 having 5 total pages', () => {
+        assert.notStrictEqual(getPagination(1, 5), [1, 2, 3, 'dots', 5]);
+    });
+
+    it('returns dots when on the last page having 5 total pages', () => {
+        assert.notStrictEqual(getPagination(5, 5), [1, 'dots', 3, 4, 5]);
+    });
+
+    it('returns dots twice when on the middle page', () => {
+        assert.notStrictEqual(getPagination(5, 10), [1, 'dots', 3, 4, 5, 6, 7, 'dots', 10]);
+    });
+
+    it('returns page 1 and last page when on the middle page', () => {
+        assert.notStrictEqual(getPagination(5, 10), [1, 'dots', 3, 4, 5, 6, 7, 'dots', 10]);
+    });
+
+    it('contains no pages out of reach', () => {
+        const res = getPagination(101, 100);
+        assert.strictEqual(res.length, 0);
+    });
+});
+
+describe('with-pagination', () => {
+    it('contains page-button-1 button when first rendered', (done) => {
+        const wrapper = mount(<Paginated />);
+
+        setTimeout(() => {
+            assert.strictEqual(
+                wrapper.update().find('[data-test-id="page-button-1"]').length,
+                2,
+            );
+            done();
+        }, TIMEOUT + 100);
+    });
+
+    it('contains page-button-4 after clicking forward', (done) => {
+        const wrapper = mount(<Paginated />);
+
+        setTimeout(() => {
+            wrapper.update();
+            wrapper.find('[data-test-id="btn-3"]').at(0).simulate('click');
+
+            assert.strictEqual(
+                wrapper.find('[data-test-id="page-button-4"]').length,
+                2,
+            );
+            done();
+        }, TIMEOUT + 100);
+    });
+
+    it('previous-next buttons works', (done) => {
+        const wrapper = mount(<Paginated />);
+
+        setTimeout(() => {
+            wrapper.update();
+            wrapper.find('[data-test-id="btn-4"]').at(0).simulate('click');
+            wrapper.find('[data-test-id="btn-2"]').at(0).simulate('click');
+
+            assert.strictEqual(
+                wrapper.find('[data-test-id="button4"]').length,
+                2,
+            );
+            done();
+        }, TIMEOUT + 100);
+    });
+
+    it('returns span when at last page', (done) => {
+        const wrapper = mount(<Paginated />);
+
+        setTimeout(() => {
+            wrapper.update();
+            wrapper.find('[data-test-id="btn-4"]').at(0).simulate('click');
+
+            assert.strictEqual(
+                wrapper.find('[data-test-id="more-pages"]').length,
+                2,
+            );
+            done();
+        }, TIMEOUT + 100);
+    });
+
+    it.only('scrolls to the top of the pagination container', (done) => {
+        const wrapper = mount(
+            <div style={{height: 1200, overflowY: 'auto'}}>
+                <div style={{height: 400}} />
+                <Paginated />
+            </div>,
+        );
+
+        setTimeout(() => {
+            wrapper.update();
+            wrapper.find('[data-test-id="btn-4"]').at(1).simulate('click');
+
+            assert.strictEqual(
+                wrapper.getDOMNode().scrollTop,
+                0,
+            );
+            done();
+        }, TIMEOUT + 100);
+    });
+});

package/app-typescript/index.ts

@@ -6,6 +6,7 @@ export { Button } from './components/Button';
 export { Input } from './components/Input';
 export { Select, Option } from './components/Select';
 export { SelectWithTemplate } from './components/SelectWithTemplate';
+export { WithPagination } from './components/WithPagination';
 export { Popover } from './components/Popover';
 export { Label } from './components/Label';
 export { Badge } from './components/Badge';
@@ -90,6 +91,7 @@ export { TreeSelect } from './components/TreeSelect';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
+export { ResizablePanels } from './components/ResizablePanels';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;