superdesk-ui-framework 4.0.47 → 4.0.49

package/examples/pages/components/ResizablePanels.tsx

@@ -8,27 +8,21 @@ import {repeat} from 'lodash';
 export class ResizablePanelsDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Resizable panels</h2>
 
-                <h2 className='docs-page__h2'>Resizable panels</h2>
-
-                <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">
                                 <ResizablePanels direction="horizontal" secondarySize={{default: 20}}>
-                                    <div>
-                                        {repeat('Lorem ipsum dolor sit amet ', 50)}
-                                    </div>
+                                    <div>{repeat('Lorem ipsum dolor sit amet ', 50)}</div>
 
-                                    <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>{`
@@ -44,6 +38,6 @@ export class ResizablePanelsDoc extends React.Component {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/SelectGrid.tsx

@@ -1,27 +1,27 @@
-import * as React from "react";
-import * as Markup from "../../js/react";
-import { SelectGrid, Alert, PropsList, Prop } from "../../../app-typescript";
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import {SelectGrid, Alert, PropsList, Prop} from '../../../app-typescript';
 
 const SelectGridDocs = () => {
     const letters = [
-        { value: 'A', label: 'A' },
-        { value: 'B', label: 'B' },
-        { value: 'C', label: 'C' },
-        { value: 'D', label: 'D' },
-        { value: 'E', label: 'E' },
-        { value: 'F', label: 'F' },
-        { value: 'G', label: 'G' },
-        { value: 'H', label: 'H' },
-        { value: 'K', label: 'K' },
-        { value: 'L', label: 'L' },
-        { value: 'M', label: 'M' },
-        { value: 'N', label: 'N' },
-        { value: 'O', label: 'O' },
-        { value: 'P', label: 'P' },
-        { value: 'R', label: 'R' },
-        { value: 'S', label: 'S' },
-        { value: 'T', label: 'T' },
-        { value: 'U', label: 'U' }
+        {value: 'A', label: 'A'},
+        {value: 'B', label: 'B'},
+        {value: 'C', label: 'C'},
+        {value: 'D', label: 'D'},
+        {value: 'E', label: 'E'},
+        {value: 'F', label: 'F'},
+        {value: 'G', label: 'G'},
+        {value: 'H', label: 'H'},
+        {value: 'K', label: 'K'},
+        {value: 'L', label: 'L'},
+        {value: 'M', label: 'M'},
+        {value: 'N', label: 'N'},
+        {value: 'O', label: 'O'},
+        {value: 'P', label: 'P'},
+        {value: 'R', label: 'R'},
+        {value: 'S', label: 'S'},
+        {value: 'T', label: 'T'},
+        {value: 'U', label: 'U'},
     ];
 
     const [selectedItem, setSelectedItem] = React.useState(letters[0]);
@@ -29,9 +29,13 @@ const SelectGridDocs = () => {
     return (
         <section className="docs-page__container">
             <h2 className="docs-page__h2">Select Grid</h2>
-            <p className="docs-page__paragraph">Universal select component with grid display of items. You can define your own trigger and item template.</p>
+            <p className="docs-page__paragraph">
+                Universal select component with grid display of items. You can define your own trigger and item
+                template.
+            </p>
             <p className="docs-page__paragraph">IconPicker is built on top of it.</p>
-            <Markup.ReactMarkupCodePreview>{`
+            <Markup.ReactMarkupCodePreview>
+                {`
                     <SelectGrid
                         label="Label"
                         filterPlaceholder="Search..."
@@ -56,16 +60,23 @@ const SelectGridDocs = () => {
                                 if (searchString == null) {
                                     resolve(letters);
                                 } else {
-                                    resolve(letters.filter(({ label }) => label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                    resolve(
+                                        letters.filter(({label}) =>
+                                            label.toLocaleLowerCase().includes(searchString.toLocaleLowerCase()),
+                                        ),
+                                    );
                                 }
                             });
                         }}
                         onChange={(value) => {
                             setSelectedItem(value);
                         }}
-                        itemTemplate={({ item }) => <div style={{ fontSize: '20px' }}>{item.label}</div>}
-                        triggerTemplate={({ onClick }) => <button className="btn" onClick={onClick}>{selectedItem.label}</button>}
-
+                        itemTemplate={({item}) => <div style={{fontSize: '20px'}}>{item.label}</div>}
+                        triggerTemplate={({onClick}) => (
+                            <button className="btn" onClick={onClick}>
+                                {selectedItem.label}
+                            </button>
+                        )}
                     />
                 </Markup.ReactMarkupPreview>
                 <Markup.ReactMarkupCode>{`
@@ -102,20 +113,50 @@ const SelectGridDocs = () => {
 
             <h3 className="docs-page__h3">Props</h3>
             <PropsList>
-                <Prop name='label' isRequired={true} type='string' default='null' description='Select label' />
-                <Prop name='filterPlaceholder' isRequired={false} type='string' default='Search...' description='Filter placeholder' />
-                <Prop name='getItems' isRequired={true} type='function' default='false' description='Callback function that should return promise which resolves with array of items' />
-                <Prop name='onChange' isRequired={true} type='function' default='false' description='Callback on change event' />
-                <Prop name='itemTemplate' isRequired={true} type='Component' default='null' description='item renderer' />
-                <Prop name='triggerTemplate' isRequired={true} type='Component' default='null' description='trigger button renderer' />
+                <Prop name="label" isRequired={true} type="string" default="null" description="Select label" />
+                <Prop
+                    name="filterPlaceholder"
+                    isRequired={false}
+                    type="string"
+                    default="Search..."
+                    description="Filter placeholder"
+                />
+                <Prop
+                    name="getItems"
+                    isRequired={true}
+                    type="function"
+                    default="false"
+                    description="Callback function that should return promise which resolves with array of items"
+                />
+                <Prop
+                    name="onChange"
+                    isRequired={true}
+                    type="function"
+                    default="false"
+                    description="Callback on change event"
+                />
+                <Prop
+                    name="itemTemplate"
+                    isRequired={true}
+                    type="Component"
+                    default="null"
+                    description="item renderer"
+                />
+                <Prop
+                    name="triggerTemplate"
+                    isRequired={true}
+                    type="Component"
+                    default="null"
+                    description="trigger button renderer"
+                />
             </PropsList>
-            <Alert style='hollow' size='normal' type='alert' restoreIcon='info'>
-                1. triggerTemplate should include &#x3C;button /&#x3E; with onClick event. Otherwise keyboard controls won't work. <br />
+            <Alert style="hollow" size="normal" type="alert" restoreIcon="info">
+                1. triggerTemplate should include &#x3C;button /&#x3E; with onClick event. Otherwise keyboard controls
+                won't work. <br />
                 2. Item should be an object with at least label and value.
             </Alert>
         </section>
-    )
-}
-
+    );
+};
 
 export default SelectGridDocs;

package/examples/pages/components/SelectWithTemplate.tsx

@@ -37,20 +37,19 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
         super(props);
         this.state = {
             value: null,
-        }
+        };
     }
 
     render() {
         return (
-            <section className='docs-page__container'>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Select with template</h2>
 
-                <h2 className='docs-page__h2'>Select with template</h2>
-
-                <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">
                                 <SelectWithTemplate
                                     value={this.state.value}
                                     getItems={(searchString) => {
@@ -58,7 +57,13 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
                                             if (searchString == null) {
                                                 resolve(colors);
                                             } else {
-                                                resolve(colors.filter(({name}) => name.toLocaleLowerCase().includes(searchString.toLocaleLowerCase())));
+                                                resolve(
+                                                    colors.filter(({name}) =>
+                                                        name
+                                                            .toLocaleLowerCase()
+                                                            .includes(searchString.toLocaleLowerCase()),
+                                                    ),
+                                                );
                                             }
                                         });
                                     }}
@@ -67,13 +72,18 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
                                     }}
                                     itemTemplate={({option}) => {
                                         if (option == null) {
-                                            return (
-                                                <div>Select a color</div>
-                                            );
+                                            return <div>Select a color</div>;
                                         } else {
                                             return (
                                                 <div style={{display: 'flex', alignItems: 'center'}}>
-                                                    <div style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
+                                                    <div
+                                                        style={{
+                                                            width: 10,
+                                                            height: 10,
+                                                            marginInlineEnd: 10,
+                                                            backgroundColor: option.colorCode,
+                                                        }}
+                                                    />
                                                     <div>{option.name}</div>
                                                 </div>
                                             );
@@ -91,7 +101,6 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
                                 />
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
 
                     <Markup.ReactMarkupCode>{`
@@ -130,6 +139,6 @@ export class SelectWithTemplateDocs extends React.Component<{}, IState> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
             </section>
-        )
+        );
     }
 }

package/examples/pages/components/Selects.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { Select, Option, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
+import {Select, Option, CheckGroup, Checkbox, PropsList, Prop} from '../../../app-typescript';
 
 interface IState {
     inlineLabel: boolean;
@@ -17,15 +17,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
             required: false,
             disabled: false,
             value: 'Option 1',
-        }
+        };
     }
 
     render() {
         return (
-            <section className='docs-page__container'>
-
-                <h2 className='docs-page__h2'>Select</h2>
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Select</h2>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Select
                         value={this.state.value}
                         onChange={(value) => {
@@ -39,38 +39,55 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     </Select>
                 `}
                 </Markup.ReactMarkupCodePreview>
-                <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">
                                 <CheckGroup>
-                                    <Checkbox checked={this.state.required} label={{ text: 'Required input' }} onChange={(value) => { this.setState({ required: value }) }} />
-                                    <Checkbox checked={this.state.disabled} label={{ text: 'Disabled input' }} onChange={(value) => { this.setState({ disabled: value }) }} />
-                                    <Checkbox checked={this.state.inlineLabel} label={{ text: 'Label positioned inline' }} onChange={(value) => { this.setState({ inlineLabel: value }) }} />
+                                    <Checkbox
+                                        checked={this.state.required}
+                                        label={{text: 'Required input'}}
+                                        onChange={(value) => {
+                                            this.setState({required: value});
+                                        }}
+                                    />
+                                    <Checkbox
+                                        checked={this.state.disabled}
+                                        label={{text: 'Disabled input'}}
+                                        onChange={(value) => {
+                                            this.setState({disabled: value});
+                                        }}
+                                    />
+                                    <Checkbox
+                                        checked={this.state.inlineLabel}
+                                        label={{text: 'Label positioned inline'}}
+                                        onChange={(value) => {
+                                            this.setState({inlineLabel: value});
+                                        }}
+                                    />
                                 </CheckGroup>
                             </div>
 
-                            <div className='form__row'>
+                            <div className="form__row">
                                 <Select
                                     value={this.state.value}
-                                    label='Select label'
-                                    info='This is some hint message'
+                                    label="Select label"
+                                    info="This is some hint message"
                                     required={this.state.required}
                                     disabled={this.state.disabled}
                                     inlineLabel={this.state.inlineLabel}
                                     onChange={(value) => {
                                         this.setState({
                                             value: value,
-                                        })
+                                        });
                                     }}
                                 >
                                     <Option>Option 1</Option>
                                     <Option>Option 2</Option>
                                 </Select>
-                            </div>  
+                            </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Select
@@ -92,19 +109,67 @@ export default class InputsDoc extends React.Component<{}, IState> {
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className='docs-page__h3'>Props</h3>
+                <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='string' default='/' description='Value of the component.' />
-                    <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component.' />
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />
-                    <Prop name='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Info message of component.' />
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error message of component.' />
-                    <Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required.' />
-                    <Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled.' />
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Value of the component."
+                    />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="Function"
+                        default="/"
+                        description="Callback to invoke when value changes."
+                    />
+                    <Prop name="label" isRequired={false} type="string" default="/" description="Label of component." />
+                    <Prop
+                        name="inlineLabel"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Position labels as inline."
+                    />
+                    <Prop
+                        name="tabindex"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Indicates an element can be focused on, and determines how that focus is handled."
+                    />
+                    <Prop
+                        name="info"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Info message of component."
+                    />
+                    <Prop
+                        name="error"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Error message of component."
+                    />
+                    <Prop
+                        name="required"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as required."
+                    />
+                    <Prop
+                        name="disabled"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as disabled."
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }