superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/components/WithPaginationDocs.tsx

@@ -5,37 +5,36 @@ 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}> {
+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'
+            alignItems: 'center',
         };
 
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>With pagination</h2>
-                <p className='docs-page__paragraph'></p>
+            <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 getItems={(pageNo) => getItems(pageNo)}>
+                            {(items) => (
+                                <div style={wrapperStyle}>
+                                    {items.map((x, i) => (
+                                        <div key={i}>{x}</div>
+                                    ))}
+                                </div>
+                            )}
                         </WithPagination>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -52,6 +51,6 @@ export class WithPaginationDocs extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/WithSizeObserver.tsx

@@ -5,29 +5,29 @@ import {WithSizeObserver} from '../../../app-typescript/components/WithSizeObser
 export class WithSizeObserverDocs extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-
-                <h2 className='docs-page__h2'>WithSizeObserver</h2>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">WithSizeObserver</h2>
 
                 <p>Higher order component for dynamically retrieving dimensions of any element.</p>
 
                 <p>It uses `ResizeObserver` to listen for updates and re-render children efficiently.</p>
 
-                <p className='docs-page__paragraph'></p>
+                <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'>
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
+                            <div className="form__row">
                                 <div style={{resize: 'both', overflow: 'auto', height: 40, outline: '1px solid red'}}>
                                     <WithSizeObserver>
                                         {({width, height}) => (
-                                            <div>width: {width}px ; height: {height}px</div>
+                                            <div>
+                                                width: {width}px ; height: {height}px
+                                            </div>
                                         )}
                                     </WithSizeObserver>
                                 </div>
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
 
                     <Markup.ReactMarkupCode>{`
@@ -39,6 +39,6 @@ export class WithSizeObserverDocs extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/tree-select/TreeSelect.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import * as Markup from '../../../js/react';
-import { PropsList, Prop } from '../../../../app-typescript';
-import { MultiSelect } from '../../../../app-typescript/components/MultiSelect';
-import { TreeSelect } from '../../../../app-typescript/components/TreeSelect';
+import {PropsList, Prop} from '../../../../app-typescript';
+import {MultiSelect} from '../../../../app-typescript/components/MultiSelect';
+import {TreeSelect} from '../../../../app-typescript/components/TreeSelect';
 import {Example1} from './example-1';
 import {Example2} from './example-2';
 
@@ -20,41 +20,37 @@ let itemArr = [
         children: [
             {
                 value: 'Item4',
-                children: [
-                    {value: 'Item10'}
-                ]
+                children: [{value: 'Item10'}],
             },
             {
                 value: 'Item5',
-                children: [
-                    {value: 'Item11'}
-                ]
-            }
-        ]
+                children: [{value: 'Item11'}],
+            },
+        ],
     },
     {
         value: 'Item2',
         children: [
             {
-                value: 'Item6'
+                value: 'Item6',
             },
             {
-                value: 'Item7'
-            }
-        ]
+                value: 'Item7',
+            },
+        ],
     },
     {
         value: 'Item3',
         children: [
             {
-                value: 'Item8'
+                value: 'Item8',
             },
             {
-                value: 'Item9'
-            }
-        ]
+                value: 'Item9',
+            },
+        ],
     },
-]
+];
 
 let itemArr2 = [
     {
@@ -62,22 +58,15 @@ let itemArr2 = [
         children: [
             {
                 value: {name: 'name'},
-                children: [
-                    {value: { name: 'name' }
-                }
-                ]
+                children: [{value: {name: 'name'}}],
             },
             {
                 value: {name: 'name'},
-                children: [
-                    {value: {name: 'name'}
-                    }
-                ]
-            }
-        ]
-    }
-]
-
+                children: [{value: {name: 'name'}}],
+            },
+        ],
+    },
+];
 
 export class TreeSelectDocs extends React.Component<{}, IState> {
     constructor(props) {
@@ -87,27 +76,26 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
             value2: [],
             options: itemArr,
             options2: itemArr,
-            inputValue: ''
-        }
+            inputValue: '',
+        };
 
         this.handleChange = this.handleChange.bind(this);
     }
 
     handleChange(e, option) {
-
-        if(option.item) {
+        if (option.item) {
             e.stopPropagation();
             e.preventDefault();
 
             this.setState({
-                options: option.item
-            })
+                options: option.item,
+            });
         }
     }
 
     render() {
         return (
-            <section className='docs-page__container'>
+            <section className="docs-page__container">
                 {/* <h2 className='docs-page__h2'>Example 1</h2>
 
                 <Example1 />
@@ -116,9 +104,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                 <Example2 /> */}
 
-                <h2 className='docs-page__h2'>TreeSelect</h2>
+                <h2 className="docs-page__h2">TreeSelect</h2>
 
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <TreeSelect
                         options={this.state.options2}
                         getLabel={'label'}
@@ -131,11 +120,11 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
-                            <div className='form__row'>
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
+                            <div className="form__row">
                                 <TreeSelect
                                     getOptions={() => {
-                                        return itemArr
+                                        return itemArr;
                                     }}
                                     selectBranchWithChildren={true}
                                     onChange={(e) => console.log(e)}
@@ -162,17 +151,16 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             kind={'synchronous'}
                         />
                     `}</Markup.ReactMarkupCode>
-
                 </Markup.ReactMarkup>
 
-                <p className='docs-page__paragraph'>Asynchronous mode in TreeSelect component.</p>
+                <p className="docs-page__paragraph">Asynchronous mode in TreeSelect component.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
-                            <div className='form__row'>
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
+                            <div className="form__row">
                                 <TreeSelect
                                     getOptions={() => {
-                                        return itemArr
+                                        return itemArr;
                                     }}
                                     selectBranchWithChildren={true}
                                     onChange={() => false}
@@ -180,14 +168,12 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     kind={'asynchronous'}
                                     searchOptions={(term, callback) => {
                                         let newArr = itemArr.filter((item) => {
-                                            if (item.value
-                                                .toLowerCase().includes(term.toLowerCase())) {
-                                                    return item;
-                                                }
-                                        })
-                                        return callback(newArr)
+                                            if (item.value.toLowerCase().includes(term.toLowerCase())) {
+                                                return item;
+                                            }
+                                        });
+                                        return callback(newArr);
                                     }}
-
                                 />
                             </div>
                         </div>
@@ -213,23 +199,22 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
-
                 </Markup.ReactMarkup>
 
-                <p className='docs-page__paragraph'>TreeSelect with custom template.</p>
+                <p className="docs-page__paragraph">TreeSelect with custom template.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
-                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
-                            <div className='form__row'>
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
+                            <div className="form__row">
                                 <TreeSelect
                                     getOptions={() => this.state.options}
                                     kind={'synchronous'}
                                     onChange={() => false}
                                     optionTemplate={(item: any) => {
-                                        return <div>Label: {item}</div>
+                                        return <div>Label: {item}</div>;
                                     }}
                                     valueTemplate={(item: any) => {
-                                        return <span>Label: {item}</span>
+                                        return <span>Label: {item}</span>;
                                     }}
                                 />
                             </div>
@@ -249,25 +234,89 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
-
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
-                    <Prop name='getOptions' isRequired={false} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
-                    <Prop name='kind' isRequired={true} type='synchronous | asynchronous' default='/' description='Type of TreeSelect component.'/>
-                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
-                    <Prop name='selectBranchWithChildren' isRequired={false} type='boolean' default='false' description='When specified, select branch with children is enabled.'/>
-                    <Prop name='readonly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.'/>
-                    <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
-                    <Prop name='valueTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
-                    <Prop name='optionTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
-                    <Prop name='searchOptions' isRequired={false} type='function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="Array<T>"
+                        default="/"
+                        description="Value of the component."
+                    />
+                    <Prop
+                        name="getOptions"
+                        isRequired={false}
+                        type="Function"
+                        default="/"
+                        description="An array of selectitems to display as the available options."
+                    />
+                    <Prop
+                        name="kind"
+                        isRequired={true}
+                        type="synchronous | asynchronous"
+                        default="/"
+                        description="Type of TreeSelect component."
+                    />
+                    <Prop
+                        name="width"
+                        isRequired={false}
+                        type="medium | full-width (100%)"
+                        default="100%"
+                        description="Dropdown width."
+                    />
+                    <Prop
+                        name="selectBranchWithChildren"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="When specified, select branch with children is enabled."
+                    />
+                    <Prop
+                        name="readonly"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="When specified, component changes are not enabled."
+                    />
+                    <Prop
+                        name="loading"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Adds a loading indicator in dropdown."
+                    />
+                    <Prop
+                        name="valueTemplate"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Function that gets an item in the value and returns the content for it."
+                    />
+                    <Prop
+                        name="optionTemplate"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Function that gets the option and returns the content for it."
+                    />
+                    <Prop
+                        name="searchOptions"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="The function will be called when a search is initiated from UI in asynchronous mode."
+                    />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="function"
+                        default="/"
+                        description="Callback to invoke when value changes."
+                    />
                 </PropsList>
-
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/tree-select/example-1.tsx

@@ -15,23 +15,20 @@ interface IState {
 
 const source = [
     {
-        'name': 'Article (news)',
-        'qcode': 'Article',
+        name: 'Article (news)',
+        qcode: 'Article',
     },
     {
-        'name': 'Sidebar',
-        'qcode': 'Sidebar',
+        name: 'Sidebar',
+        qcode: 'Sidebar',
     },
     {
-        'name': 'Factbox',
-        'qcode': 'Factbox',
+        name: 'Factbox',
+        qcode: 'Factbox',
     },
 ];
 
-function searchOptions(
-    term: string,
-    callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
-): void {
+function searchOptions(term: string, callback: (res: Array<ITreeNode<{name: string; qcode: string}>>) => void): void {
     setTimeout(() => {
         callback(
             source
@@ -41,7 +38,6 @@ function searchOptions(
     }, 1000);
 }
 
-
 export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
@@ -68,4 +64,4 @@ export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
             />
         );
     }
-}
+}

package/examples/pages/components/tree-select/example-2.tsx

@@ -27,9 +27,7 @@ export class Example2 extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            selectedRoles: [
-                {qcode: 'writer', name: 'Writer'},
-            ],
+            selectedRoles: [{qcode: 'writer', name: 'Writer'}],
         };
     }
 
@@ -48,7 +46,7 @@ export class Example2 extends React.PureComponent<IProps, IState> {
                         // accessing qcodes should not cause TypeScript errors
                         val.forEach((node) => {
                             console.log(node.qcode);
-                        })
+                        });
                     }}
                     allowMultiple={true}
                 />
@@ -56,4 +54,3 @@ export class Example2 extends React.PureComponent<IProps, IState> {
         );
     }
 }
-

package/examples/pages/components/utilities/BorderRadiusUtilities.tsx

@@ -6,10 +6,8 @@ class BorderRadiusUtilitiesDoc extends React.Component {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Border Radius</h2>
-                <p className="docs-page__paragraph">
-                    Utility classes for controlling the border radius of an element. 
-                </p>
-                <div className='docs-page__container-block--position'>
+                <p className="docs-page__paragraph">Utility classes for controlling the border radius of an element.</p>
+                <div className="docs-page__container-block--position">
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
                             <thead>
@@ -21,36 +19,53 @@ class BorderRadiusUtilitiesDoc extends React.Component {
                             <tbody>
                                 <tr>
                                     <td>radius-xs</td>
-                                    <td>{'border-radius: var(--b-radius--x-small);'} <span className="doc-text--highlight">/* 2px */</span></td>
+                                    <td>
+                                        {'border-radius: var(--b-radius--x-small);'}{' '}
+                                        <span className="doc-text--highlight">/* 2px */</span>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>radius-sm</td>
-                                    <td>{'border-radius: var(--b-radius--small);'} <span className="doc-text--highlight">/* 3px */</span></td>
+                                    <td>
+                                        {'border-radius: var(--b-radius--small);'}{' '}
+                                        <span className="doc-text--highlight">/* 3px */</span>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>radius-md</td>
-                                    <td>{'border-radius: var(--b-radius--medium);'} <span className="doc-text--highlight">/* 4px */</span></td>
+                                    <td>
+                                        {'border-radius: var(--b-radius--medium);'}{' '}
+                                        <span className="doc-text--highlight">/* 4px */</span>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>radius-lg</td>
-                                    <td>{'border-radius: var(--b-radius--large);'} <span className="doc-text--highlight">/* 6px */</span></td>
+                                    <td>
+                                        {'border-radius: var(--b-radius--large);'}{' '}
+                                        <span className="doc-text--highlight">/* 6px */</span>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>radius-xl</td>
-                                    <td>{'border-radius: var(--b-radius--x-large);'} <span className="doc-text--highlight">/* 8px */</span></td>
+                                    <td>
+                                        {'border-radius: var(--b-radius--x-large);'}{' '}
+                                        <span className="doc-text--highlight">/* 8px */</span>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>radius-full</td>
-                                    <td>{'border-radius: var(--b-radius--full);'} <span className="doc-text--highlight">/* 9999px */</span></td>
+                                    <td>
+                                        {'border-radius: var(--b-radius--full);'}{' '}
+                                        <span className="doc-text--highlight">/* 9999px */</span>
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { BorderRadiusUtilitiesDoc };
+export {BorderRadiusUtilitiesDoc};