superdesk-ui-framework 3.0.35 → 3.0.38

package/examples/pages/react/Selects.tsx

@@ -1,16 +1,12 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
-
 import { Select, Option, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
 
 interface IState {
     inlineLabel: boolean;
     required: boolean;
     disabled: boolean;
-    invalid: boolean;
     value: string;
-    value2: string;
 }
 
 export default class InputsDoc extends React.Component<{}, IState> {
@@ -18,11 +14,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
         super(props);
         this.state = {
             inlineLabel: false,
-            required: true,
+            required: false,
             disabled: false,
-            invalid: false,
-            value: '',
-            value2: '',
+            value: 'Option 1',
         }
     }
 
@@ -53,7 +47,6 @@ 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>
@@ -64,11 +57,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     label='Select label'
                                     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}
-                                    tabindex={0}
+                                    inlineLabel={this.state.inlineLabel}
                                     onChange={(value) => {
                                         this.setState({
                                             value: value,
@@ -78,26 +69,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                     <Option>Option 1</Option>
                                     <Option>Option 2</Option>
                                 </Select>
-                            </div>
-
-                            <p className="docs-page__paragraph">// Boxed with hidden label</p>
-                            <div className='form__row'>
-                                <Select
-                                    value={this.state.value2}
-                                    label='Select label'
-                                    labelHidden
-                                    error='This is error message'
-                                    info='This is some hint message'
-                                    tabindex={0}
-                                    onChange={(value) => {
-                                        this.setState({
-                                            value2: value,
-                                        })
-                                    }}
-                                >
-                                        <Option>Option 1</Option>
-                                        <Option>Option 2</Option>
-                                </Select>
                             </div>  
                         </div>
 
@@ -108,11 +79,9 @@ export default class InputsDoc extends React.Component<{}, IState> {
                             label='Select label'
                             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}
-                            tabindex={0}
+                            inlineLabel={this.state.inlineLabel}
                             onChange={(value) => {
                                 this.setState({
                                     value: value,
@@ -127,16 +96,15 @@ export default class InputsDoc extends React.Component<{}, IState> {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='string' default='/' description='Item value' />
-                    <Prop name='label' isRequired={false} type='string' default='/' description='Label of component' />
-                    <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='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='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>
         )

package/examples/pages/react/TagInputDocs.tsx

@@ -8,7 +8,7 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
         super(props);
 
         this.state = {
-            value: ['Item'],
+            value: ['Item 1', 'item 2'],
         }
     }
 
@@ -18,13 +18,9 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                 <h2 className="docs-page__h2">Tag Input</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <TagInput
-                        onChange={(value) => {
-                            this.setState({
-                                value: value,
-                            });
-                        }}
                         value={this.state.value}
                         placeholder="Type Here"
+                        onChange={(value) => false}
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -32,33 +28,31 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
                             <TagInput
-                                required
+                                value={this.state.value}
+                                placeholder="Type Here"
+                                label={'Tag-input Label'}
                                 info={'Info Message'}
                                 error={'Error Message'}
-                                label={'Tag-input Label'}
                                 onChange={(value) => {
                                     this.setState({
                                         value: value,
                                     });
                                 }}
-                                value={this.state.value}
-                                placeholder="Type Here"
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <TagInput
-                            required
+                            value={this.state.value}
+                            placeholder="Type Here"
+                            label={'Tag-input Label'}
                             info={'Info Message'}
                             error={'Error Message'}
-                            label={'TreeSelect Label'}
                             onChange={(value) => {
                                 this.setState({
                                     value: value,
                                 });
                             }}
-                            value={this.state.value}
-                            placeholder="Type Here"
                         />
                     `}
                     </Markup.ReactMarkupCode>
@@ -68,13 +62,13 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                     <Prop name='value' isRequired={false} type='Array<T>' default='/' description='Value of the component.'/>
                     <Prop name='placeholder' isRequired={false} type='string' default='/' description='Input placeholder.'/>
                     <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
-                    <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='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='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/TimePicker.tsx

@@ -15,16 +15,14 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
     render() {
         return (
             <TimePicker
-            value={this.state.time}
-            onChange={(time) => {
-                this.setState({time});
-            }}
-            required
-            tabindex={1}
-            label={'This is Label'}
-            info={'This is info'}
-            error={'This is error'}
-            allowSeconds
+                value={this.state.time}
+                onChange={(time) => {
+                    this.setState({time});
+                }}
+                allowSeconds
+                label={'This is Label'}
+                info={'This is info'}
+                error={'This is error'}
             />
         );
     }
@@ -36,25 +34,12 @@ export default class TimePickerDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Time picker</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    class TimePickerExample extends React.PureComponent<{}, {time: string}> {
-                        constructor(props) {
-                            super(props);
-                            this.state = {time: ''};
-                        }
-                        render() {
-                            return (
-                                <TimePicker
-                                value={this.state.time}
-                                onChange={(time) => {
-                                    this.setState({time});
-                                }}
-                                label={'This is Label'}
-                                info={'This is info'}
-                                error={'This is error'}
-                                />
-                            );
-                        }
-                    }
+                    <TimePicker
+                        value={this.state.time}
+                        onChange={(time) => {
+                            this.setState({time});
+                        }}
+                    />
                 `}</Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
@@ -63,13 +48,15 @@ export default class TimePickerDoc extends React.Component {
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                        <TimePickerExample
+                        <TimePicker
                             value={this.state.time}
-                            disabled={false}
-                            required={true}
                             onChange={(time) => {
                                 this.setState({time});
                             }}
+                            allowSeconds
+                            label={'This is Label'}
+                            info={'This is info'}
+                            error={'This is error'}
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
@@ -78,6 +65,12 @@ export default class TimePickerDoc extends React.Component {
                 <PropsList>
                     <Prop name='value' isRequired={true} type='string' default='/' description='Item value.' />
                     <Prop name='allowSeconds' isRequired={true} type='string' default='/' description='Allow seconds.' />
+                    <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>