superdesk-ui-framework 4.0.46 → 4.0.48

package/examples/pages/components/MultiSelect.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';
-import { Label } from '../../../app-typescript';
+import {PropsList, Prop} from '../../../app-typescript';
+import {MultiSelect} from '../../../app-typescript';
+import {Label} from '../../../app-typescript';
 
 interface IColor {
     name: string;
@@ -37,17 +37,18 @@ export class MultiselectDocs extends React.Component<{}, IState> {
     constructor(props) {
         super(props);
         this.state = {
-            value: [{name: 'Red', colorCode: '#FF0000'},],
-            value2: [{name: 'Red', colorCode: '#FF0000'},],
-        }
+            value: [{name: 'Red', colorCode: '#FF0000'}],
+            value2: [{name: 'Red', colorCode: '#FF0000'}],
+        };
     }
 
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>MultiSelect</h2>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">MultiSelect</h2>
 
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <MultiSelect
                         value={this.state.value}
                         options={ItemArr}
@@ -60,15 +61,15 @@ export class MultiselectDocs 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">
                                 <MultiSelect
                                     value={this.state.value}
                                     options={ItemArr}
                                     optionLabel={(option) => option.name}
-                                    label='This is Label'
-                                    info='This is info'
-                                    placeholder='Select a color'
+                                    label="This is Label"
+                                    info="This is info"
+                                    placeholder="Select a color"
                                     filter
                                     showSelectAll
                                     onChange={(e: any) => this.setState({value: e})}
@@ -90,29 +91,35 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                             onChange={(e: any) => this.setState({value: e})}
                         />
                     `}</Markup.ReactMarkupCode>
-
                 </Markup.ReactMarkup>
 
-                <p className='docs-page__paragraph'>MultiSelect with custom template.</p>
+                <p className="docs-page__paragraph">MultiSelect 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">
                                 <MultiSelect
                                     value={this.state.value2}
                                     options={ItemArr}
                                     optionLabel={(option) => `${option.name} :: ${option.colorCode}`}
                                     filter
                                     showSelectAll
-                                    label='This is Label'
-                                    info='This is info'
-                                    placeholder='Select a color'
+                                    label="This is Label"
+                                    info="This is info"
+                                    placeholder="Select a color"
                                     itemTemplate={(option) => {
                                         if (option) {
                                             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,
+                                                        }}
+                                                    />
                                                     <span>{option.name}</span>
                                                 </div>
                                             );
@@ -120,14 +127,19 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     }}
                                     selectedItemTemplate={(option) => {
                                         if (option == null) {
-                                            return (
-                                                <div>Select a color</div>
-                                            );
+                                            return <div>Select a color</div>;
                                         } else {
                                             return (
-                                                <div className='p-multiselect-token'>
-                                                    <span style={{width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode}} />
-                                                    <span className='p-multiselect-token-label'>{option.name}</span>
+                                                <div className="p-multiselect-token">
+                                                    <span
+                                                        style={{
+                                                            width: 10,
+                                                            height: 10,
+                                                            marginInlineEnd: 10,
+                                                            backgroundColor: option.colorCode,
+                                                        }}
+                                                    />
+                                                    <span className="p-multiselect-token-label">{option.name}</span>
                                                 </div>
                                             );
                                         }
@@ -172,36 +184,160 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
-
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={true} type='Array<T>' default='/' description='Value of the component.'/>
-                    <Prop name='options' isRequired={true} type='Array<T>' default='/' description='An array of selectitems to display as the available options.'/>
-                    <Prop name='optionLabel' isRequired={true} type='string' default='/' description='Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options and decides which field or fields to search against.'/>
-                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Label to display when there are no selections.'/>
-                    <Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
-                    <Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
-                    <Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
-                    <Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
-                    <Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
-                    <Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
-                    <Prop name='showClear' isRequired={false} type='boolean' default='false' description='When enabled, a clear icon is displayed to clear the value.'/>
-                    <Prop name='showSelectAll' isRequired={false} type='boolean' default='false' description='Whether to show the select all checkbox inside the panel header.'/>
-                    <Prop name='itemTemplate' isRequired={false} type='function' default='/' description='Function that gets the option and returns the content for it.'/>
-                    <Prop name='selectedItemTemplate' isRequired={false} type='function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
-                    <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={true}
+                        type="Array<T>"
+                        default="/"
+                        description="Value of the component."
+                    />
+                    <Prop
+                        name="options"
+                        isRequired={true}
+                        type="Array<T>"
+                        default="/"
+                        description="An array of selectitems to display as the available options."
+                    />
+                    <Prop
+                        name="optionLabel"
+                        isRequired={true}
+                        type="string"
+                        default="/"
+                        description="Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options and decides which field or fields to search against."
+                    />
+                    <Prop
+                        name="placeholder"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Label to display when there are no selections."
+                    />
+                    <Prop
+                        name="filter"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="When specified, displays an input field to filter the items on keyup."
+                    />
+                    <Prop
+                        name="filterPlaceholder"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Placeholder text to show when filter input is empty."
+                    />
+                    <Prop
+                        name="emptyFilterMessage"
+                        isRequired={false}
+                        type="string"
+                        default="No results found"
+                        description="Template to display when filtering does not return any results."
+                    />
+                    <Prop
+                        name="maxSelectedLabels"
+                        isRequired={false}
+                        type="number"
+                        default="/"
+                        description="Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate."
+                    />
+                    <Prop
+                        name="selectedItemsLabel"
+                        isRequired={false}
+                        type="string"
+                        default="{0} items selected"
+                        description="Label to display after exceeding max selected labels."
+                    />
+                    <Prop
+                        name="ariaLabelledBy"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                    />
+                    <Prop
+                        name="showClear"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="When enabled, a clear icon is displayed to clear the value."
+                    />
+                    <Prop
+                        name="showSelectAll"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Whether to show the select all checkbox inside the panel header."
+                    />
+                    <Prop
+                        name="itemTemplate"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Function that gets the option and returns the content for it."
+                    />
+                    <Prop
+                        name="selectedItemTemplate"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Function that gets an item in the value and returns the content for it."
+                    />
+                    <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>
-        )
+        );
     }
 }

package/examples/pages/components/NavButtons.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { SubNav, NavButton, ButtonGroup, Tooltip, PropsList, Prop } from '../../../app-typescript';
+import {SubNav, NavButton, ButtonGroup, Tooltip, PropsList, Prop} from '../../../app-typescript';
 
 export default class NavButtonsDoc extends React.Component {
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Navigation button</h2>
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Navigation button</h2>
                 <p></p>
-                <Markup.ReactMarkupCodePreview>{`
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <NavButton type='default' icon='home' onClick={()=> false} />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -18,24 +19,36 @@ export default class NavButtonsDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <SubNav>
-                            <ButtonGroup align='start' spaces='no-space'>
-                                <Tooltip text='Filters' flow='right'>
-                                    <NavButton icon='filter-large' type='darker' state="active" text="Filter" onClick={() => false} />
+                            <ButtonGroup align="start" spaces="no-space">
+                                <Tooltip text="Filters" flow="right">
+                                    <NavButton
+                                        icon="filter-large"
+                                        type="darker"
+                                        state="active"
+                                        text="Filter"
+                                        onClick={() => false}
+                                    />
                                 </Tooltip>
-                                <NavButton icon='search' text="Search" onClick={() => false} />
+                                <NavButton icon="search" text="Search" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <NavButton icon='list-plus' text="Add to list" onClick={() => false} />
-                                <Tooltip text='More actions' flow='down'>
-                                    <NavButton icon='dots-vertical' text="More actions" onClick={() => false} />
+                            <ButtonGroup align="end" spaces="no-space">
+                                <NavButton icon="list-plus" text="Add to list" onClick={() => false} />
+                                <Tooltip text="More actions" flow="down">
+                                    <NavButton icon="dots-vertical" text="More actions" onClick={() => false} />
                                 </Tooltip>
-                                <Tooltip text='Send to / Publish' flow='left'>
-                                    <NavButton icon='expand-thin' text='Send to / Publish' type='highlight' onClick={() => false} />
+                                <Tooltip text="Send to / Publish" flow="left">
+                                    <NavButton
+                                        icon="expand-thin"
+                                        text="Send to / Publish"
+                                        type="highlight"
+                                        onClick={() => false}
+                                    />
                                 </Tooltip>
                             </ButtonGroup>
                         </SubNav>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <Tooltip text='Filters' flow='right'>
@@ -60,18 +73,19 @@ export default class NavButtonsDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <SubNav>
-                            <ButtonGroup align='start' spaces='no-space'>
-                                <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
-                                <NavButton icon='eye-open' type='darker' text="View" onClick={() => false} />
-                                <NavButton icon='refresh' type='dark' text="Refresh" onClick={() => false} />
+                            <ButtonGroup align="start" spaces="no-space">
+                                <NavButton icon="adjust" type="default" text="Adjust" onClick={() => false} />
+                                <NavButton icon="eye-open" type="darker" text="View" onClick={() => false} />
+                                <NavButton icon="refresh" type="dark" text="Refresh" onClick={() => false} />
                             </ButtonGroup>
-                            <ButtonGroup align='end' spaces='no-space'>
-                                <NavButton icon='edit-line' type='primary' text="Edit" onClick={() => false} />
-                                <NavButton icon='expand-thin' type='highlight' text="Expand" onClick={() => false} />
+                            <ButtonGroup align="end" spaces="no-space">
+                                <NavButton icon="edit-line" type="primary" text="Edit" onClick={() => false} />
+                                <NavButton icon="expand-thin" type="highlight" text="Expand" onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
                     </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
+                    <Markup.ReactMarkupCode>
+                        {`
                         <SubNav>
                             <ButtonGroup align='start' spaces='no-space'>
                                 <NavButton icon='adjust' type='default' text="Adjust" onClick={() => false} />
@@ -89,13 +103,55 @@ export default class NavButtonsDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
-                    <Prop name='icon' isRequired={false} type='string' default='/' description='Icon class name without the icon- part.' />
-                    <Prop name='text' isRequired={false} type='string' default='/' description='Defines the value for aria-label, for screen-readers accessibility.' />
-                    <Prop name='iconSize' isRequired={false} type='small | big' default='small' description='Specifies a small or big button' />
-                    <Prop name='type' isRequired={false} type='default | primary | highlight | darker | dark' default='default' description='Default + colour variations.' />
-                    <Prop name='state' isRequired={false} type='normal | active' default='normal' description='Defines the optional state of the button (e.g. active)' />
-                    <Prop name='theme' isRequired={false} type='light | dark' default='light' description='Styles nav button for diffrent background.' />
-                    <Prop name='value' isRequired={false} type='button | submit | reset' default='button' description='Specifies a value of nav button' />
+                    <Prop
+                        name="icon"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Icon class name without the icon- part."
+                    />
+                    <Prop
+                        name="text"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Defines the value for aria-label, for screen-readers accessibility."
+                    />
+                    <Prop
+                        name="iconSize"
+                        isRequired={false}
+                        type="small | big"
+                        default="small"
+                        description="Specifies a small or big button"
+                    />
+                    <Prop
+                        name="type"
+                        isRequired={false}
+                        type="default | primary | highlight | darker | dark"
+                        default="default"
+                        description="Default + colour variations."
+                    />
+                    <Prop
+                        name="state"
+                        isRequired={false}
+                        type="normal | active"
+                        default="normal"
+                        description="Defines the optional state of the button (e.g. active)"
+                    />
+                    <Prop
+                        name="theme"
+                        isRequired={false}
+                        type="light | dark"
+                        default="light"
+                        description="Styles nav button for diffrent background."
+                    />
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="button | submit | reset"
+                        default="button"
+                        description="Specifies a value of nav button"
+                    />
                 </PropsList>
             </section>
         );