superdesk-ui-framework 4.0.46 → 4.0.48

package/dist/components/Autocomplete.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import { CheckGroup, Checkbox, Autocomplete, PropsList, Prop } from '../../../app-typescript';
+import {CheckGroup, Checkbox, Autocomplete, PropsList, Prop} from '../../../app-typescript';
 
 interface IState {
     items: Array<any>;
@@ -16,28 +16,29 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
         super(props);
         this.state = {
             items: [
-                { name: 'Item 1', value: 'item-1', description: 'Some description for item 1' },
-                { name: 'Item 2', value: 'item-2', description: 'Some description for item 2' },
-                { name: 'Item 3', value: 'item-3', description: 'Some description for item 3' },
-                { name: 'Item 4', value: 'item-4', description: 'Some description for item 4'}
+                {name: 'Item 1', value: 'item-1', description: 'Some description for item 1'},
+                {name: 'Item 2', value: 'item-2', description: 'Some description for item 2'},
+                {name: 'Item 3', value: 'item-3', description: 'Some description for item 3'},
+                {name: 'Item 4', value: 'item-4', description: 'Some description for item 4'},
             ],
             inlineLabel: false,
             required: false,
             disabled: false,
-        }
+        };
     }
 
     searchFunction(searchString, callback) {
         let cancelled = false;
 
         let items = [
-            { name: 'Item Custom Search 1', value: 'item-1' },
-            { name: 'Item Custom Search 2', value: 'item-2' },
-            { name: 'Item Custom Search 3', value: 'item-3' }
-        ]
+            {name: 'Item Custom Search 1', value: 'item-1'},
+            {name: 'Item Custom Search 2', value: 'item-2'},
+            {name: 'Item Custom Search 3', value: 'item-3'},
+        ];
 
         let filteredItems = items.filter((item) =>
-            item.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1 ? item : false);
+            item.name.toLowerCase().indexOf(searchString.toLowerCase()) !== -1 ? item : false,
+        );
 
         callback(filteredItems);
 
@@ -54,45 +55,69 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                 <b>{item.name}</b>
                 <p>{item.description}</p>
             </div>
-        )
+        );
     }
 
     render() {
         return (
-            <section className='docs-page__container'>
-                <h2 className='docs-page__h2'>Autocomplete</h2>
-                <p className='docs-page__paragraph'></p>
-                <Markup.ReactMarkupCodePreview>{`
+            <section className="docs-page__container">
+                <h2 className="docs-page__h2">Autocomplete</h2>
+                <p className="docs-page__paragraph"></p>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     import {Autocomplete} from 'superdesk-ui-framework/react'
                     `}
                 </Markup.ReactMarkupCodePreview>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">Basic Autocomplete</h3>
-                <p className="docs-page__paragraph">For basic usage of autocomplete, you need to pass value for prop <code>text</code> and <code>items</code>. Items can be passed as array of strings or array of objects. 
-                If you pass array of objects, you need to define prop <code>keyValue</code> as object key, so autocomplete can know which propery to use as display option.</p>
-                <Markup.ReactMarkupCodePreview>{`
+                <p className="docs-page__paragraph">
+                    For basic usage of autocomplete, you need to pass value for prop <code>text</code> and{' '}
+                    <code>items</code>. Items can be passed as array of strings or array of objects. If you pass array
+                    of objects, you need to define prop <code>keyValue</code> as object key, so autocomplete can know
+                    which propery to use as display option.
+                </p>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Autocomplete label='Autocomplete label' keyValue="name" items={items} />
                 `}
                 </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">
                                 <Autocomplete
-                                    label='Autocomplete label'
+                                    label="Autocomplete label"
                                     items={this.state.items}
                                     keyValue="name"
-                                    info='Try typing `item`...'
-                                    error='This is an error message'
+                                    info="Try typing `item`..."
+                                    error="This is an error message"
                                     inlineLabel={this.state.inlineLabel}
                                     required={this.state.required}
                                     disabled={this.state.disabled}
@@ -101,7 +126,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                 />
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         let items = [
@@ -126,24 +150,27 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">Autocomplete with Search field</h3>
-                <p className="docs-page__paragraph">Set prop <code>isSearchField</code> to <code>{true}</code> to enable this option.
-                The search field does't have a visible lable. The value of the label prop will be used for the aria-label.</p>
-                <Markup.ReactMarkupCodePreview>{`
+                <p className="docs-page__paragraph">
+                    Set prop <code>isSearchField</code> to <code>{true}</code> to enable this option. The search field
+                    does't have a visible lable. The value of the label prop will be used for the aria-label.
+                </p>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Autocomplete label='Search' keyValue="name" items={items} isSearchField={true} />
                 `}
                 </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">
                                 <Autocomplete
-                                    label='Search items'
+                                    label="Search items"
                                     items={this.state.items}
                                     keyValue="name"
-                                    error='There was an error using the search'
+                                    error="There was an error using the search"
                                     isSearchField={true}
-                                    placeholder='Search'
+                                    placeholder="Search"
                                     required={this.state.required}
                                     disabled={this.state.disabled}
                                     onChange={() => false}
@@ -151,7 +178,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                 />
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         let items = [
@@ -177,18 +203,21 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">Autocomplete with custom search function</h3>
-                <p className="docs-page__paragraph">Define prop <code>search</code> with custom function.</p>
-                <Markup.ReactMarkupCodePreview>{`
+                <p className="docs-page__paragraph">
+                    Define prop <code>search</code> with custom function.
+                </p>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Autocomplete label="Autocomplete label" items={this.props.items} search={this.search} />
                 `}
                 </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">
                                 <Autocomplete
-                                    label='Autocomplete label'
+                                    label="Autocomplete label"
                                     items={this.state.items}
                                     keyValue="name"
                                     info="Try typing `item custom`...'"
@@ -201,7 +230,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                 />
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         searchFunction(searchString, callback) {
@@ -240,20 +268,24 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3 docs-page__h3--small-top-m">Autocomplete with custom list template</h3>
-                <p className="docs-page__paragraph">Define prop <code>listItemTemplate</code> with function that returns structure for list item. Function returns item, string or object.</p>
-                <Markup.ReactMarkupCodePreview>{`
+                <p className="docs-page__paragraph">
+                    Define prop <code>listItemTemplate</code> with function that returns structure for list item.
+                    Function returns item, string or object.
+                </p>
+                <Markup.ReactMarkupCodePreview>
+                    {`
                     <Autocomplete label="Autocomplete label" items={this.props.items} listItemTemplate={this.customListTemplate} />
                 `}
                 </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">
                                 <Autocomplete
-                                    label='Autocomplete label'
+                                    label="Autocomplete label"
                                     items={this.state.items}
-                                    keyValue='name'
+                                    keyValue="name"
                                     listItemTemplate={this.customListTemplate}
                                     info="Try typing `item custom`...'"
                                     inlineLabel={this.state.inlineLabel}
@@ -264,7 +296,6 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                 />
                             </div>
                         </div>
-
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         customListTemplate(item: any) {
@@ -289,37 +320,115 @@ export default class AutocompleteDoc 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='items' isRequired={true} type='array' default='/' description='Array of values for autocomplete' />
-                    <Prop name='value' isRequired={false} type='any' default='/' description='Value to be predefined on component load' />
-                    <Prop name='keyValue' isRequired={false} type='string' default='/' description='Key value if array is combined of objects' />
-                    <Prop name='minLength' isRequired={false} type='number' default='1' description='Minimum number of characters to initiate a search' />
-                    <Prop name='listItemTemplate' isRequired={false} type='function' default='/' description='Create custom view of list item' />
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label' />
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text' />
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text' />
-                    <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder text for the input field.' />
                     <Prop
-                        name='isSearchField'
+                        name="items"
+                        isRequired={true}
+                        type="array"
+                        default="/"
+                        description="Array of values for autocomplete"
+                    />
+                    <Prop
+                        name="value"
+                        isRequired={false}
+                        type="any"
+                        default="/"
+                        description="Value to be predefined on component load"
+                    />
+                    <Prop
+                        name="keyValue"
                         isRequired={false}
-                        type='boolean'
-                        default='false' 
-                        description='Styles the input as a search field, adds a search icon and the option to clear the field. No visible lable is present in this option.'
+                        type="string"
+                        default="/"
+                        description="Key value if array is combined of objects"
+                    />
+                    <Prop
+                        name="minLength"
+                        isRequired={false}
+                        type="number"
+                        default="1"
+                        description="Minimum number of characters to initiate a search"
+                    />
+                    <Prop
+                        name="listItemTemplate"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Create custom view of list item"
+                    />
+                    <Prop name="label" isRequired={false} type="string" default="/" description="Input label" />
+                    <Prop name="info" isRequired={false} type="string" default="/" description="Hint text" />
+                    <Prop name="error" isRequired={false} type="string" default="/" description="Error text" />
+                    <Prop
+                        name="placeholder"
+                        isRequired={false}
+                        type="string"
+                        default="/"
+                        description="Placeholder text for the input field."
+                    />
+                    <Prop
+                        name="isSearchField"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Styles the input as a search field, adds a search icon and the option to clear the field. No visible lable is present in this option."
+                    />
+                    <Prop
+                        name="inlineLabel"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Position labels as inline"
+                    />
+                    <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="invalid"
+                        isRequired={false}
+                        type="boolean"
+                        default="false"
+                        description="Mark field as invalid"
                     />
-                    <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline' />
-                    <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='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid' />
                 </PropsList>
 
-                <h3 className='docs-page__h3'>Events</h3>
+                <h3 className="docs-page__h3">Events</h3>
                 <PropsList>
-                    <Prop name='search' isRequired={false} type='function' default='/' description='Custom function for filtering items' />
-                    <Prop name='onChange' isRequired={true} type='function' default='/' description='Returns value of text input' />
-                    <Prop name='onSelect' isRequired={false} type='function' default='/' description='Returns selected value' />
+                    <Prop
+                        name="search"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Custom function for filtering items"
+                    />
+                    <Prop
+                        name="onChange"
+                        isRequired={true}
+                        type="function"
+                        default="/"
+                        description="Returns value of text input"
+                    />
+                    <Prop
+                        name="onSelect"
+                        isRequired={false}
+                        type="function"
+                        default="/"
+                        description="Returns selected value"
+                    />
                 </PropsList>
             </section>
-        )
+        );
     }
 }