superdesk-ui-framework 3.0.35 → 3.0.38

package/examples/pages/react/Inputs.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
 import { Input, CheckGroup, Checkbox, PropsList, Prop, InputNew } from '../../../app-typescript';
-import { DurationInput } from '../../../app-typescript/components/DurationInput';
-
 
 interface IState {
     inlineLabel: boolean;
@@ -11,6 +9,9 @@ interface IState {
     invalid: boolean;
     value: any;
     value2: any;
+    value3: any;
+    value4: any;
+    value5: any;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -21,17 +22,20 @@ export default class InputsDoc extends React.Component<{}, IState> {
             required: true,
             disabled: false,
             invalid: false,
-            value: null,
-            value2: '',
+            value: '',
+            value2: null,
+            value3: '',
+            value4: '',
+            value5: '',
         }
     }
-    
+
     render() {
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>Input</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    <Input value={value} maxLength={30} required={true} />
+                    <Input type='text' onChange={(value) => this.setState({value: value})} />
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <p className='docs-page__paragraph'></p>
@@ -42,332 +46,166 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                 <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.invalid} label={{text:'Invalid input'}} onChange={(value) => {this.setState({invalid: value})}} />
                                     <Checkbox checked={this.state.inlineLabel} label={{text:'Label positioned inline'}} onChange={(value) => {this.setState({inlineLabel: value})}} />
                                 </CheckGroup>
                             </div>
-                            <div className='form__row'>
-                                <InputNew
-                                label='Label'
-                                value=''
-                                onChange={(value) => false
-                                }
-                            
-                                required={true}
-                                info='Nullam Sollicitudin'
-                                maxLength={20}
-                                //invalid={true}
-                                //disabled={true}
-                                error='Error message'
-                                //inlineLabel={true}
-                                //labelHidden={true}
-                                type='text' />
-                            </div>
 
                             <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
-                                    maxLength={30}
+                                <Input
+                                    label='Input label'
+                                    value={this.state.value}
                                     type='text'
-                                    error='This is error message'
                                     info='This is some hint message'
                                     inlineLabel={this.state.inlineLabel}
                                     required={this.state.required}
                                     disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
+                                    maxLength={30}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
+                                    onChange={(value) => this.setState({value: value})}
+                                />
                             </div>
+
                             <div className='form__row'>
-                                <Input label='Number Input'
-                                    value={this.state.value}
+                                <Input
+                                    label='Number Input'
+                                    value={this.state.value2}
                                     type='number'
-                                    error='This is error message'
                                     info='Morbi leo risus porta ac consectetur ac.'
-                                    inlineLabel={this.state.inlineLabel}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value: value})} />
+                                    onChange={(value) => this.setState({value2: value})}
+                                />
                             </div>
+
                             <p className="docs-page__paragraph">// Hidden label</p>
                             <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
-                                    maxLength={25}
+                                <Input
+                                    label='Input label'
+                                    value={this.state.value3}
                                     type='text'
                                     placeholder='Placeholder'
-                                    error='This is error message'
                                     info='Donec id elit non mi porta gravida at eget metus.'
                                     inlineLabel={true}
                                     labelHidden={true}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
+                                    onChange={(value) => this.setState({value3: value})}
+                                />
                             </div>
 
-                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
-                            <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
-                                    boxedStyle={true}
-                                    maxLength={25}
-                                    type='text'
-                                    placeholder='Default boxed input'
-                                    error='This is error message'
-                                    inlineLabel={true}
-                                    labelHidden={true}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
-                            </div>
-                            <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
-                                    boxedStyle={true}
-                                    size='large'
-                                    maxLength={25}
-                                    type='text'
-                                    placeholder='Large boxed input'
-                                    error='This is error message'
-                                    inlineLabel={true}
-                                    labelHidden={true}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
-                            </div>
+                            <p className="docs-page__paragraph">// Boxed input</p>
                             <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
+                                <Input
+                                    label='Input label'
+                                    value={this.state.value4}
                                     boxedStyle={true}
-                                    size='x-large'
-                                    maxLength={25}
-                                    type='text'
-                                    placeholder='Extra large boxed input'
-                                    error='This is error message'
-                                    inlineLabel={true}
-                                    labelHidden={true}
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
-                            </div>
-                            <p className="docs-page__paragraph">// Boxed with default label</p>
-                            <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
-                                    boxedStyle={true}
-                                    size='large'
-                                    maxLength={25}
+                                    maxLength={30}
                                     placeholder='Placeholder'
                                     type='text'
-                                    error='This is error message'
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
+                                    onChange={(value) => this.setState({value4: value})}
+                                />
                             </div>
-                            <p className="docs-page__paragraph">// Boxed with boxed label</p>
+
+                            <p className="docs-page__paragraph">// Boxed input with boxed label</p>
                             <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
+                                <Input
+                                    label='Input label'
+                                    value={this.state.value5}
                                     boxedStyle={true}
                                     boxedLable={true}
-                                    size='large'
-                                    maxLength={25}
+                                    maxLength={30}
                                     placeholder='Placeholder'
                                     type='text'
-                                    error='This is error message'
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
                                     tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
-                            </div>
-                            <div className='form__row'>
-                                <Input label='Input label'
-                                    value={''}
-                                    boxedStyle={true}
-                                    boxedLable={true}
-                                    size='large'
-                                    placeholder='Hide my label'
-                                    labelHidden={true}
-                                    type='text'
-                                    error='This is error message'
-                                    required={this.state.required}
-                                    disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    tabindex={0}
-                                    onChange={(value) => this.setState({value2: value})} />
+                                    onChange={(value) => this.setState({value5: value})}
+                                />
                             </div>
                         </div>
 
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <Input label='Input label'
-                            value='This is some value'
-                            maxLength={30}
-                            error='This is error message'
+                        <Input
+                            label='Input label'
+                            value={''}
+                            type='text'
                             info='This is some hint message'
-                            inlineLabel={false}
-                            required={true}
-                            disabled={false}
-                            invalid={false}
-                            onChange={(value) => {}} />
+                            inlineLabel={this.state.inlineLabel}
+                            required={this.state.required}
+                            disabled={this.state.disabled}
+                            maxLength={30}
+                            tabindex={0}
+                            onChange={(value) => this.setState({value: value})}
+                        />
 
-                        <Input label='Number Input'
+                        <Input
+                            label='Number Input'
                             value={this.state.value}
                             type='number'
-                            error='This is error message'
                             info='Morbi leo risus porta ac consectetur ac.'
-                            inlineLabel={this.state.inlineLabel}
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
                             tabindex={0}
-                            onChange={(value) => {}} />
-                        
+                            onChange={(value) => this.setState({value2: value})}
+                        />
+
                         // Hidden label
-                        <Input label='Input label'
+                        <Input
+                            label='Input label'
                             value={''}
-                            maxLength={25}
                             type='text'
                             placeholder='Placeholder'
-                            error='This is error message'
                             info='Donec id elit non mi porta gravida at eget metus.'
                             inlineLabel={true}
                             labelHidden={true}
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            tabindex={0}
-                            onChange={(value) => {}} />
-
-                        // Boxed with hidden label
-                        <Input label='Input label'
-                            value={''}
-                            boxedStyle={true}
-                            maxLength={25}
-                            type='text'
-                            placeholder='Default boxed input'
-                            error='This is error message'
-                            inlineLabel={true}
-                            labelHidden={true}
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            tabindex={0}
-                            onChange={(value) => {}} />
-
-                        <Input label='Input label'
-                            value={''}
-                            boxedStyle={true}
-                            size='large'
-                            maxLength={25}
-                            type='text'
-                            placeholder='Large boxed input'
-                            error='This is error message'
-                            inlineLabel={true}
-                            labelHidden={true}
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
                             tabindex={0}
-                            onChange={(value) => {}} />
+                            onChange={(value) => this.setState({value2: value})}
+                        />
 
-                        <Input label='Input label'
+                        // Boxed input
+                        <Input
+                            label='Input label'
                             value={''}
                             boxedStyle={true}
-                            size='x-large'
-                            maxLength={25}
-                            type='text'
-                            placeholder='Extra large boxed input'
-                            error='This is error message'
-                            inlineLabel={true}
-                            labelHidden={true}
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            tabindex={0}
-                            onChange={(value) => {}} />
-
-                        // Boxed with default label
-                        <Input label='Input label'
-                            value={''}
-                            boxedStyle={true}
-                            size='large'
+                            boxedLable={true}
                             maxLength={25}
                             placeholder='Placeholder'
                             type='text'
-                            error='This is error message'
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
                             tabindex={0}
-                            onChange={(value) => {}} />
-                        
-                        // Boxed with boxed label
-                        <Input label='Input label'
+                            onChange={(value) => this.setState({value2: value})}
+                        />
+
+                        // Boxed input with boxed label
+                        <Input
+                            label='Input label'
                             value={''}
                             boxedStyle={true}
                             boxedLable={true}
-                            size='large'
                             maxLength={25}
                             placeholder='Placeholder'
                             type='text'
-                            error='This is error message'
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
                             tabindex={0}
-                            onChange={(value) => {}} />
-                        
-                        <Input label='Input label'
-                            value={''}
-                            boxedStyle={true}
-                            boxedLable={true}
-                            size='large'
-                            placeholder='Hide my label'
-                            labelHidden={true}
-                            type='text'
-                            error='This is error message'
-                            required={this.state.required}
-                            disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            tabindex={0}
-                            onChange={(value) => {}} />
+                            onChange={(value) => this.setState({value2: value})}
+                        />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='string' default='/' description='Item value'/>
+                    <Prop name='value' isRequired={false} type='string' default='/' description='Input value.'/>
                     <Prop name='type' isRequired={false} type='text | number | password' default='text' description='Input type. Defaults to type text.'/>
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
-                    <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text'/>
-                    <Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
-                    <Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
-                    <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='tabindex' isRequired={false} type='number' default='/' description='Indicates an element can be focused on, and determines how that focus is handled.'/>
+                    <Prop name='maxLength' isRequired={false} type='number' default='/' description='Sets max length for input text.'/>
                     <Prop name='placeholder' isRequired={false} type='string' default='/' description='Defines the text for the placeholder pseudo-element.'/>
                     <Prop name='fullWidth' isRequired={false} type='boolean' default='false' description='Forces the input to take 100% of the container width.'/>
                     <Prop name='boxedStyle' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input. This style should be used only in the authoring enviroment and similar.'/>
                     <Prop name='boxedLable' isRequired={false} type='boolean' default='false' description='Applies a boxed style to the input label. This label style should be used only in combination with the boxedStyle input inside the authoring enviroment.'/>
                     <Prop name='size' isRequired={false} type='medium | large | x-large' default='medium' description='Specifies the size of the input. Defaults to medium and should be changed only in special cases (e.g. titles, headlines etc.).'/>
+                    <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/react/MultiSelect.tsx

@@ -36,8 +36,8 @@ export class MultiselectDocs extends React.Component<{}, IState> {
     constructor(props) {
         super(props);
         this.state = {
-            value: null,
-            value2: null,
+            value: [{name: 'Red', colorCode: '#FF0000'},],
+            value2: [{name: 'Red', colorCode: '#FF0000'},],
         }
     }
 
@@ -48,11 +48,11 @@ export class MultiselectDocs extends React.Component<{}, IState> {
 
                 <Markup.ReactMarkupCodePreview>{`
                     <MultiSelect
-                        value={this.state.value2}
+                        value={this.state.value}
                         options={ItemArr}
-                        onChange={(e: any) => this.setState({value2: e.value})}
-                        placeholder='Select Item'
-                        optionLabel='name'
+                        optionLabel={(option) => option.name}
+                        placeholder='Select a color'
+                        onChange={(e: any) => false}
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -62,18 +62,17 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <MultiSelect
+                                preview
                                     value={this.state.value}
                                     options={ItemArr}
-                                    onChange={(e: any) => this.setState({value: e})}
+                                    optionLabel={(option) => option.name}
+                                    label='This is Label'
+                                    info='This is info'
+                                    placeholder='Select a color'
                                     filter
                                     showSelectAll
                                     zIndex={2000}
-                                    placeholder='Select a color'
-                                    optionLabel={(option) => `${option.name} :: ${option.colorCode}`}
-                                    required
-                                    tabindex={1}
-                                    label={'This is Label'}
-                                    info={'This is info'}
+                                    onChange={(e: any) => this.setState({value: e})}
                                 />
                             </div>
                         </div>
@@ -83,15 +82,14 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                         <MultiSelect
                             value={this.state.value}
                             options={ItemArr}
-                            onChange={(e: any) => this.setState({value: e.value})}
+                            optionLabel={(option) => option.name}
+                            label='This is Label'
+                            info='This is info'
+                            placeholder='Select a color'
                             filter
                             showSelectAll
-                            placeholder='Select a color'
-                            optionLabel='name'
-                            required
-                            tabindex={1}
-                            label={'This is Label'}
-                            info={'This is info'}
+                            zIndex={2000}
+                            onChange={(e: any) => this.setState({value: e})}
                         />
                     `}</Markup.ReactMarkupCode>
 
@@ -107,9 +105,11 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                     value={this.state.value2}
                                     options={ItemArr}
                                     optionLabel={(option) => `${option.name} :: ${option.colorCode}`}
-                                    onChange={(e: any) => this.setState({value2: e})}
                                     filter
                                     showSelectAll
+                                    label='This is Label'
+                                    info='This is info'
+                                    placeholder='Select a color'
                                     itemTemplate={(option) => {
                                         if (option) {
                                             return (
@@ -134,6 +134,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                                             );
                                         }
                                     }}
+                                    onChange={(e: any) => this.setState({value2: e})}
                                 />
                             </div>
                         </div>
@@ -188,12 +189,18 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                     <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='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
                     <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='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>