superdesk-ui-framework 3.0.14 → 3.0.15

package/dist/react/Index.tsx

@@ -62,9 +62,11 @@ import { SelectWithTemplateDocs } from './SelectWithTemplate';
 import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
 import DurationInputDoc from './DurationInput';
+import {WithPaginationDocs} from './WithPaginationDocs';
 import { PopoverDoc } from './Popover';
 import { MenuDocs } from './Menu';
 import {WithSizeObserverDocs} from './WithSizeObserver';
+import {ResizablePanelsDoc} from './ResizablePanels';
 
 const pages = {
     basicComponents: {
@@ -166,6 +168,9 @@ const pages = {
             "togglebox": {
                 name: "Togglebox"
             },
+            "resizable-panels": {
+                name: "Resizable panels"
+            },
         }
     },
     textComponents: {
@@ -200,6 +205,9 @@ const pages = {
             'content-list': {
                 name: 'Content list'
             },
+            'with-pagination': {
+                name: 'With pagination'
+            },
         }
     },
     formComponents: {
@@ -342,6 +350,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
                         <Route path="/react/duration-input" component={DurationInputDoc} />
+                        <Route path="/react/with-pagination" component={WithPaginationDocs} />
                         <Route path="/react/popover" component={PopoverDoc} />
                         <Route path="/react/date-picker" component={DatePickerDoc} />
                         <Route path="/react/time-picker" component={TimePickerDoc} />
@@ -379,6 +388,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/container" component={ContainerDoc} />
                         <Route path="/react/dropzone" component={DropZoneDoc} />
                         <Route path="/react/create-button" component={CreateButtonDoc} />
+                        <Route path="/react/resizable-panels" component={ResizablePanelsDoc} />
                         <Route path="/" component={ReactDefault} />
                     </Switch>
                 </main>
@@ -409,3 +419,4 @@ const parsePlayground = ({ match }, playgrounds) => {
 };
 
 export { ReactDoc, ReactPlayground };
+

package/dist/react/ResizablePanels.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import {ResizablePanels} from '../../../app-typescript';
+import {repeat} from 'lodash';
+
+export class ResizablePanelsDoc extends React.Component {
+    render() {
+        return (
+            <section className='docs-page__container'>
+
+                <h2 className='docs-page__h2'>Resizable panels</h2>
+
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <ResizablePanels direction="horizontal" secondarySize={{default: 20}}>
+                                    <div>
+                                        {repeat('Lorem ipsum dolor sit amet ', 50)}
+                                    </div>
+
+                                    <div>
+                                        {repeat('Lorem ipsum dolor sit amet ', 50)}
+                                    </div>
+                                </ResizablePanels>
+                            </div>
+                        </div>
+
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <ResizablePanels direction="horizontal" secondarySize={{default: 20}}>
+                            <div>
+                                {repeat('Lorem ipsum dolor sit amet', 50)}
+                            </div>
+
+                            <div>
+                                {repeat('Lorem ipsum dolor sit amet', 50)}
+                            </div>
+                        </ResizablePanels>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}

package/dist/react/WithPaginationDocs.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+import * as Markup from '../../js/react';
+
+import {WithPagination} from '../../../app-typescript';
+import {range} from 'lodash';
+
+function getItems(pageNo: number): Promise<{items: Array<number>, itemCount: number}> {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            return resolve({items: range(1, 500).slice((pageNo - 1) * 20, (pageNo - 1) * 20 + 20), itemCount: 500});
+        }, 1000);
+    });
+};
+
+export class WithPaginationDocs extends React.Component {
+    render() {
+        const wrapperStyle: React.CSSProperties = {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center'
+        };
+
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>With pagination</h2>
+                <p className='docs-page__paragraph'></p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <WithPagination
+                            getItems={(pageNo) => getItems(pageNo)}
+                        >
+                            {
+                                (items) =>
+                                    <div style={wrapperStyle}>
+                                        {items.map((x, i) => <div key={i}>{x}</div>)}
+                                    </div>
+                            }
+                        </WithPagination>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>{`
+                        <WithPagination
+                            getItems={(pageNo) => getItems(pageNo)}
+                        >
+                            {
+                                (items) =>
+                                    <div style={wrapperStyle}>
+                                        {items.map((x, i) => <div key={i}>{x}</div>)}
+                                    </div>
+                            }
+                        </WithPagination>
+                    `}</Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
+            </section>
+        )
+    }
+}