superdesk-ui-framework 3.0.35 → 3.0.38

package/dist/react/Autocomplete.tsx

@@ -9,7 +9,6 @@ interface IState {
     inlineLabel: boolean;
     required: boolean;
     disabled: boolean;
-    invalid: boolean;
 }
 
 export default class AutocompleteDoc extends React.Component<{}, IState> {
@@ -23,9 +22,8 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                 { name: 'Item 4', value: 'item-4', description: 'Some description for item 4'}
             ],
             inlineLabel: false,
-            required: true,
+            required: false,
             disabled: false,
-            invalid: false,
         }
     }
 
@@ -84,7 +82,6 @@ export default class AutocompleteDoc 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>
@@ -99,9 +96,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                     inlineLabel={this.state.inlineLabel}
                                     required={this.state.required}
                                     disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    onChange={() => { }}
-                                    onSelect={() => { }} />
+                                    onChange={() => false}
+                                    onSelect={() => false}
+                                />
                             </div>
                         </div>
 
@@ -122,9 +119,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                             inlineLabel="Autocomplete label
                             required={this.state.required}
                             disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            onChange={() => { }}
-                            onSelect={() => { }} />
+                            onChange={() => false}
+                            onSelect={() => false}
+                        />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -149,9 +146,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                     placeholder='Search'
                                     required={this.state.required}
                                     disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    onChange={() => { }}
-                                    onSelect={() => { }} />
+                                    onChange={() => false}
+                                    onSelect={() => false}
+                                />
                             </div>
                         </div>
 
@@ -173,9 +170,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                             placeholder='Search'
                             required={this.state.required}
                             disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            onChange={() => { }}
-                            onSelect={() => { }} />
+                            onChange={() => false}
+                            onSelect={() => false}
+                        />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -199,9 +196,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                     inlineLabel={this.state.inlineLabel}
                                     required={this.state.required}
                                     disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    onChange={(value) => { this.setState({ }) }}
-                                    onSelect={(value) => { this.setState({ }) }} />
+                                    onChange={(value) => false}
+                                    onSelect={(value) => false}
+                                />
                             </div>
                         </div>
 
@@ -236,9 +233,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                             inlineLabel={this.state.inlineLabel}
                             required={this.state.required}
                             disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            onChange={(value) => { this.setState({ }) }}
-                            onSelect={(value) => { this.setState({ }) }} />
+                            onChange={(value) => false}
+                            onSelect={(value) => false}
+                        />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -262,9 +259,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                                     inlineLabel={this.state.inlineLabel}
                                     required={this.state.required}
                                     disabled={this.state.disabled}
-                                    invalid={this.state.invalid}
-                                    onChange={(value) => { this.setState({ }) }}
-                                    onSelect={(value) => { this.setState({ }) }} />
+                                    onChange={(value) => false}
+                                    onSelect={(value) => false}
+                                />
                             </div>
                         </div>
 
@@ -286,9 +283,9 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                             inlineLabel={this.state.inlineLabel}
                             required={this.state.required}
                             disabled={this.state.disabled}
-                            invalid={this.state.invalid}
-                            onChange={(value) => { this.setState({ }) }}
-                            onSelect={(value) => { this.setState({ }) }} />
+                            onChange={(value) => false}
+                            onSelect={(value) => false}
+                        />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
@@ -303,9 +300,13 @@ export default class AutocompleteDoc extends React.Component<{}, IState> {
                     <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='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' />

package/dist/react/DatePicker.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
 import {DatePicker, PropsList, Prop, DatePickerISO} from '../../../app-typescript';
 
-class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
+class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
     constructor(props) {
         super(props);
 
@@ -14,27 +13,31 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
     render() {
         return (
             <DatePicker
-            value={this.state.date}
-            dateFormat="YYYY-MM-DD"
-            onChange={(date) => {
-                this.setState({date});
-            }}
-            required
-            tabindex={1}
-            label={'This is Label'}
-            info={'This is info'}
-            error={'This is error'}
+                value={this.state.date}
+                dateFormat="YYYY-MM-DD"
+                onChange={(date) => {
+                    this.setState({date});
+                }}
+                label={'This is Label'}
+                info={'This is info'}
+                error={'This is error'}
             />
         );
     }
 }
 
-export default class DatePickerDoc extends React.Component {
+interface IState {
+    today: string;
+    date: Date | null;
+} 
+
+export default class DatePickerDoc extends React.Component<{}, IState> {
     constructor(props) {
         super(props);
 
         this.state = {
-            today: new Date(),
+            today: '',
+            date: new Date(),
         };
     }
     render() {
@@ -42,28 +45,13 @@ export default class DatePickerDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Date picker</h2>
                 <Markup.ReactMarkupCodePreview>{`
-                    class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
-                        constructor(props) {
-                            super(props);
-                            this.state = {date: new Date()};
-                        }
-                        render() {
-                            return (
-                                <DatePicker
-                                    value={this.state.date}
-                                    dateFormat="YYYY-MM-DD"
-                                    onChange={(date) => {
-                                        this.setState({date});
-                                    }}
-                                    required
-                                    tabindex={1}
-                                    label={'This is Label'}
-                                    info={'This is info'}
-                                    error={'This is error'}
-                                />
-                            );
-                        }
-                    }
+                    <DatePicker
+                        value={this.state.date}
+                        dateFormat="YYYY-MM-DD"
+                        onChange={(date) => {
+                            this.setState({date});
+                        }}
+                    />
                 `}</Markup.ReactMarkupCodePreview>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
@@ -74,25 +62,23 @@ export default class DatePickerDoc extends React.Component {
                         <p className="docs-page__paragraph">// DatePickerISO</p>
                         <div className='docs-page__content-row'>
                             <DatePickerISO
-                            value={'2019-01-01'}
-                            dateFormat="YYYY-MM-DD"
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}   
-                            tabindex={1}
-                            label={'This is Label'}
-                            info={'This is info'}
-                            error={'This is error'}
+                                value={'2019-01-01'}
+                                dateFormat="YYYY-MM-DD"
+                                onChange={(date) => {
+                                    this.setState({today: date});
+                                }}
+                                label={'This is Label'}
+                                info={'This is info'}
+                                error={'This is error'}
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
-                         <DatePicker
+                        <DatePicker
                             value={this.state.date}
                             onChange={(date) => {
                                 this.setState({date});
                             }}
-                            disabled={false}
                             dateFormat="YYYY-MM-DD"
                             shortcuts={[
                                 {label: 'tomorrow', days: 1},
@@ -131,19 +117,17 @@ export default class DatePickerDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className='docs-page__content-row'>
-                        <DatePicker
-                            value={this.state.today}
-                            dateFormat="YYYY-MM-DD"
-                            onChange={(today) => {
-                                this.setState({today});
-                            }}
-                            required
-                            tabindex={1}
-                            label={'This is Label'}
-                            info={'This is info'}
-                            error={'This is error'}
-                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
-                        />
+                            <DatePicker
+                                value={this.state.date}
+                                dateFormat="YYYY-MM-DD"
+                                onChange={(date) => {
+                                    this.setState({date});
+                                }}
+                                label={'This is Label'}
+                                info={'This is info'}
+                                error={'This is error'}
+                                headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
+                            />
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -153,8 +137,6 @@ export default class DatePickerDoc extends React.Component {
                             onChange={(date) => {
                                 this.setState({date});
                             }}
-                            required
-                            tabindex={1}
                             label={'This is Label'}
                             info={'This is info'}
                             error={'This is error'}
@@ -165,17 +147,18 @@ export default class DatePickerDoc extends React.Component {
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='value' isRequired={false} type='Date' default='/' description='Item value' />
-                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
-                    <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
-                    <Prop name='headerButtonBar' isRequired={false} type='Array' default='/' description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}]' />
-                    <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='value' isRequired={false} type='Date' default='/' description='Value of the component.' />
+                    <Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY".' />
+                    <Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar.' />
+                    <Prop name='headerButtonBar' isRequired={false} type='Array' default='/' description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}].' />
+                    <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>
 
                 <h3 className='docs-page__h3'>Events</h3>

package/dist/react/DurationInput.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import * as Markup from '../../js/react';
-import { Input, Select, CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
+import { CheckGroup, Checkbox, PropsList, Prop } from '../../../app-typescript';
 import { DurationInput } from '../../../app-typescript/components/DurationInput';
-import { getDurationString } from '../../../app-typescript/components/DurationInput';
 
 interface IState {
     inlineLabel: boolean;
     required: boolean;
     disabled: boolean;
-    invalid: boolean;
     value: any
 }
 
@@ -17,29 +15,22 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
         super(props);
         this.state = {
             inlineLabel: false,
-            required: true,
+            required: false,
             disabled: false,
-            invalid: false,
             value: 3661,
         }
     }
     
     render() {
-        
         return (
             <section className='docs-page__container'>
                 <h2 className='docs-page__h2'>Duration Input</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <DurationInput
-                    label='Label'
-                    info='info message'
-                    disabled={this.state.disabled}
-                    required={this.state.required}
-                    invalid={this.state.invalid}
-                    inlineLabel={this.state.inlineLabel}
-                    onChange={(e) => {
-                        console.log(e)
-                    }}
+                        seconds={this.state.value}
+                        onChange={(e) => {
+                            this.setState({value: e})
+                        }}
                     />
                 `}
                 </Markup.ReactMarkupCodePreview>
@@ -51,24 +42,21 @@ export default class DurationInputDoc 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'>
                                 <DurationInput
-                                label='Label'
-                                info='info message'
-                                disabled={this.state.disabled}
-                                required={this.state.required}
-                                invalid={this.state.invalid}
-                                inlineLabel={this.state.inlineLabel}
-                                seconds={this.state.value}
-                                onChange={(e) => {
-                                    this.setState({value: e})
-                                    console.log(e);
-                                }}
+                                    seconds={this.state.value}
+                                    label='Label'
+                                    info='info message'
+                                    disabled={this.state.disabled}
+                                    required={this.state.required}
+                                    inlineLabel={this.state.inlineLabel}
+                                    onChange={(value) => {
+                                        this.setState({value})
+                                    }}
                                 />
                             </div>
                         </div>
@@ -76,33 +64,34 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <DurationInput
-                        label='Label'
-                        info='info message'
-                        disabled={this.state.disabled}
-                        required={this.state.required}
-                        invalid={this.state.invalid}
-                        inlineLabel={this.state.inlineLabel}
-                        onChange={(e) => {
-                            console.log(e)
-                        }}
+                            seconds={this.state.value}
+                            label='Label'
+                            info='info message'
+                            disabled={this.state.disabled}
+                            required={this.state.required}
+                            inlineLabel={this.state.inlineLabel}
+                            onChange={(e) => {
+                                this.setState({value: e})
+                            }}
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
                 <h3 className='docs-page__h3'>Props</h3>
                 <PropsList>
-                    <Prop name='hours' isRequired={false} type='number' default='00' description='Hours value'/>
-                    <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value'/>
-                    <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value'/>
-                    <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='hours' isRequired={false} type='number' default='00' description='Hours value.'/>
+                    <Prop name='minutes' isRequired={false} type='number' default='00' description='Minutes value.'/>
+                    <Prop name='seconds' isRequired={false} type='number' default='00' description='Seconds value.'/>
+                    <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>
         )
     }
-}
+}