superdesk-ui-framework 3.0.65 → 3.0.67

package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButton, Input, Select, Option } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, Select, Option } from '../../../../app-typescript/index';
 
 interface IProps {
     children?: React.ReactNode;
@@ -65,7 +65,9 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                         'divider',
                         { icon: 'personal', size: 'big' },
                         { icon: 'global-search', size: 'big' },
-                        { icon: 'picture', size: 'big' }]} />
+                        { icon: 'picture', size: 'big' }
+                    ]}
+                />
 
                 <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
                     <Components.HeaderPanel >
@@ -81,7 +83,9 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                                 { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
                                                 { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
                                             ]
-                                        }]}>
+                                        }
+                                    ]}
+                                >
                                     <NavButton onClick={() => false} />
                                 </Dropdown>
                             </ButtonGroup>
@@ -93,13 +97,6 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                             <ButtonGroup >
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
-                            <CheckButtonGroup >
-                                <RadioButton value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} options={[
-                                    { value: 'itemtype01', label: 'All item types' },
-                                    { value: 'itemtype02', label: 'Images only' },
-                                    { value: 'itemtype03', label: 'Videos only' },
-                                    { value: 'itemtype04', label: 'Documents only' }]} />
-                            </CheckButtonGroup>
                             <ButtonGroup align='end'>
                                 <NavButton icon='adjust' onClick={this.handleTheme} />
                                 <NavButton icon='th-list' onClick={() => false} />
@@ -115,23 +112,24 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                 <Components.PanelContentBlock>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='TITLE'
-                                                error='This is error message'
+                                            <Input
+                                                type='text'
+                                                label='TITLE'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Select label='Source'
+                                            <Select
+                                                label='Source'
                                                 value='Select ingest source...'
-                                                error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="option-1">Select ingest source...</Option>
                                                 <Option value="option-2">Associated Press</Option>
                                                 <Option value="option-3">Reuters</Option>
@@ -140,32 +138,35 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                     </div>
                                     <div className="form__group" >
                                         <div className="form__item">
-                                            <Input label='LOCATION'
-                                                error='This is error message'
+                                            <Input
+                                                type='text'
+                                                label='LOCATION'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='CATEGORY'
-                                                error='This is error message'
+                                            <Input
+                                                type='text'
+                                                label='CATEGORY'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='SUBJECT'
-                                                error='This is error message'
+                                            <Input
+                                                type='text'
+                                                label='SUBJECT'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }} />
+                                                onChange={() => false}
+                                            />
                                         </div>
                                     </div>
 
@@ -173,12 +174,11 @@ export class FirstPlayground extends React.Component<IProps, IState> {
                                         <div className="form__item">
                                             <Select label='Usage right'
                                                 value='--- Not selected ---'
-                                                error='This is error message'
                                                 info='Dolor in hendrerit.'
                                                 inlineLabel={false}
                                                 disabled={false}
-                                                invalid={false}
-                                                onChange={(value) => { }}>
+                                                onChange={() => false}
+                                            >
                                                 <Option value="">--- Not selected ---</Option>
                                                 <Option value="single">Single usage</Option>
                                                 <Option value="time">Time restricted</Option>

package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import * as Components from './components/Index';
-import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Divider, Tooltip, Select, Option, Switch, Icon, AvatarWrapper, AvatarContentImage, AvatarContentText, Text, EmptyState, Alert, SlidingToolbar, TabLabel, Tabs, Heading, Modal } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Tooltip, Select, Option, Icon, AvatarWrapper, AvatarContentText, Modal } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
@@ -70,22 +69,26 @@ export class Multiedit extends React.Component<IProps, IState> {
     render() {
         return (
             <Modal
-            className='p-dialog-flex'
-            onHide={() => false}
-            maximized={true} contentPadding={"none"}
-            headerTemplate="Multiedit"
-            visible={true} >
-                <Spacer children={this.state.arr} gap={'0'}></Spacer>
-                <div style={{
-                    padding: '0 20px',
-                    display: 'flex',
-                    alignItems: 'center'
-                }}>
+                className='p-dialog-flex'
+                onHide={() => false}
+                maximized={true} contentPadding={"none"}
+                headerTemplate="Multiedit"
+                visible={true}
+            >
+                <Spacer children={this.state.arr} gap={'0'} />
+                <div
+                    style={{
+                        padding: '0 20px',
+                        display: 'flex',
+                        alignItems: 'center'
+                    }}
+                >
                     <Dropdown
-                    append
-                    items={[
+                        append
+                        items={[
                             { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
-                    ]}>
+                        ]}
+                    >
                         <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
                     </Dropdown>
                 </div>
@@ -105,227 +108,220 @@ export class Editor extends React.Component<{}, IEditor> {
         this.state = {
             sideBarOpen: false,
             activeTab: '1',
-
         }
     }
 
     render() {
-    return <div style={{borderRight: '4px solid grey'}}>
-        <Layout.AuthoringFrame
-        header={(
-            <SubNav zIndex={2}>
-                <ButtonGroup align='end'>
-                    <ButtonGroup subgroup={true} spaces="no-space">
-                        <Tooltip text='More actions' flow='left'>
-                            <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
-                        </Tooltip>
-                        <Tooltip text='Send to / Publish' flow='left'>
-                            <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
-                        </Tooltip>
-                        <Tooltip text='Send to / Publish' flow='left'>
-                            <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
-                        </Tooltip>
-                    </ButtonGroup>
-                </ButtonGroup>
-            </SubNav>
-        )}
-        main={(
-            <Layout.AuthoringMain
-            headerPadding='medium'
-            toolBar={(
-                <React.Fragment>
-                    <div className="sd-editor-toolbar__content">
-                        <dl>
-                            <dt>Created</dt>
-                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                            <dt>by</dt>
-                            <dt>Nareg Asmarian</dt>
-                        </dl>
-                        <dl>
-                            <dt>Modified</dt>
-                            <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
-                        </dl>
-                    </div>
-                    <ButtonGroup align='end'>
-                        <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
-                        <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
-                        <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
-                    </ButtonGroup>
-                </React.Fragment>
-            )}
-            authoringHeader ={(
-                <React.Fragment>
-                    <Form.FormGroup inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Slugline'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Slugline'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                    <Form.FormGroup inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Genre'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={false}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                    <Form.FormGroup marginBottom='0' inlineLabel={true}>
-                        <Form.FormItem>
-                            <Input
-                                type='text'
-                                label='Subject'
-                                value='This is some value'
-                                maxLength={30}
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={true}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}} />
-                        </Form.FormItem>
-                        <Form.FormItem autoWidth={true}>
-                            <Form.FormText>Just testing:</Form.FormText>
-                        </Form.FormItem>
-                        <Form.FormItem>
-                            <Select
-                                label='Categories'
-                                labelHidden={true}
-                                value='This is some value'
-                                error='This is error message'
-                                info='This is some hint message'
-                                required={true}
-                                disabled={false}
-                                invalid={false}
-                                onChange={(value) => {}}>
-                                    <Option>Option 1</Option>
-                                    <Option>Option 2</Option>
-                            </Select>
-                        </Form.FormItem>
-                        <Form.FormItem autoWidth={true}>
-                            <ButtonGroup>
-                                <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
-                                <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
-                                <Button text="Submit" onClick={()=> false} type="primary" />
+    return (
+        <div style={{borderRight: '4px solid grey'}}>
+            <Layout.AuthoringFrame
+                header={(
+                    <SubNav zIndex={2}>
+                        <ButtonGroup align='end'>
+                            <ButtonGroup subgroup={true} spaces="no-space">
+                                <Tooltip text='More actions' flow='left'>
+                                    <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
+                                </Tooltip>
+                                <Tooltip text='Send to / Publish' flow='left'>
+                                    <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
+                                </Tooltip>
+                                <Tooltip text='Send to / Publish' flow='left'>
+                                    <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
+                                </Tooltip>
                             </ButtonGroup>
-                        </Form.FormItem>
-                    </Form.FormGroup>
-                </React.Fragment>
-            )}>
-            </Layout.AuthoringMain>
-        )}
-        sidePanel={(
-            <Layout.Panel side='right' background='grey' open={false} size='x-small'>
-                <Layout.PanelHeader title='Pinned content' onClose={() => false}>
-                </Layout.PanelHeader>
-                <Layout.PanelContent>
-                    <Layout.PanelContentBlock>
-                        <BoxedList density='comfortable'>
-                            <BoxedListItem
-                                type="success"
-                                clickable={true}
-                                media={(
-                                    <Icon name='slideshow'  />
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-                                </BoxedListContentRow>
-                                <BoxedListContentRow>
-                                    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                type="warning"
-                                media={(
-                                    <AvatarWrapper
-                                        size="medium"
+                        </ButtonGroup>
+                    </SubNav>
+                )}
+                main={(
+                    <Layout.AuthoringMain
+                        headerPadding='medium'
+                        toolBar={(
+                            <React.Fragment>
+                                <div className="sd-editor-toolbar__content">
+                                    <dl>
+                                        <dt>Created</dt>
+                                        <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                        <dt>by</dt>
+                                        <dt>Nareg Asmarian</dt>
+                                    </dl>
+                                    <dl>
+                                        <dt>Modified</dt>
+                                        <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
+                                    </dl>
+                                </div>
+                                <ButtonGroup align='end'>
+                                    <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
+                                    <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
+                                    <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
+                                </ButtonGroup>
+                            </React.Fragment>
+                        )}
+                        authoringHeader ={(
+                            <React.Fragment>
+                                <Form.FormGroup inlineLabel={true}>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Slugline'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            info='This is some hint message'
+                                            required={false}
+                                            disabled={false}
+                                            onChange={() => false}
+                                        />
+                                    </Form.FormItem>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Slugline'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            info='This is some hint message'
+                                            required={false}
+                                            disabled={false}
+                                            onChange={() => false}
+                                        />
+                                    </Form.FormItem>
+                                </Form.FormGroup>
+                                <Form.FormGroup inlineLabel={true}>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Genre'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            info='This is some hint message'
+                                            required={false}
+                                            disabled={false}
+                                            onChange={() => false}
+                                        />
+                                    </Form.FormItem>
+                                </Form.FormGroup>
+                                <Form.FormGroup marginBottom='0' inlineLabel={true}>
+                                    <Form.FormItem>
+                                        <Input
+                                            type='text'
+                                            label='Subject'
+                                            value='This is some value'
+                                            maxLength={30}
+                                            info='This is some hint message'
+                                            required={true}
+                                            disabled={false}
+                                            onChange={() => false}
+                                        />
+                                    </Form.FormItem>
+                                    <Form.FormItem autoWidth={true}>
+                                        <Form.FormText>Just testing:</Form.FormText>
+                                    </Form.FormItem>
+                                    <Form.FormItem>
+                                        <Select
+                                            label='Categories'
+                                            labelHidden={true}
+                                            value='This is some value'
+                                            info='This is some hint message'
+                                            required={true}
+                                            disabled={false}
+                                            onChange={() => false}
                                         >
-                                        <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
-                                    </AvatarWrapper>
-                                )}
-                                footer={(
-                                    <ButtonGroup align="end">
-                                        <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
-                                        <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
-                                    </ButtonGroup>
-                                )}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet magna.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                            <BoxedListItem
-                                selected={true}
-                                actions={(
-                                    <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
-                                )}
-                            >
-                                <BoxedListContentRow>
-                                    Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
-                                </BoxedListContentRow>
-                            </BoxedListItem>
-                        </BoxedList>
-                    </Layout.PanelContentBlock>
-                </Layout.PanelContent>
-            </Layout.Panel>
-        )}
-
-        sideBarClosed={this.state.sideBarOpen}
-        sideBar={(
-            <Nav.SideBarTabs
-                items={[
-                    { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
-                    { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
-                    { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
-                    { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
-                    { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
-                    { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
-                    { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
-                ]}
-                activeTab={this.state.activeTab}
-                onActiveTabChange={(val) => {
-                    this.setState({
-                        activeTab: val,
-                    })
-                }}
+                                            <Option>Option 1</Option>
+                                            <Option>Option 2</Option>
+                                        </Select>
+                                    </Form.FormItem>
+                                    <Form.FormItem autoWidth={true}>
+                                        <ButtonGroup>
+                                            <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
+                                            <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
+                                            <Button text="Submit" onClick={()=> false} type="primary" />
+                                        </ButtonGroup>
+                                    </Form.FormItem>
+                                </Form.FormGroup>
+                            </React.Fragment>
+                        )}
+                    />
+                )}
+                sidePanel={(
+                    <Layout.Panel side='right' background='grey' open={false} size='x-small'>
+                        <Layout.PanelHeader title='Pinned content' onClose={() => false}>
+                        </Layout.PanelHeader>
+                        <Layout.PanelContent>
+                            <Layout.PanelContentBlock>
+                                <BoxedList density='comfortable'>
+                                    <BoxedListItem
+                                        type="success"
+                                        clickable={true}
+                                        media={(
+                                            <Icon name='slideshow'  />
+                                        )}
+                                        actions={(
+                                            <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                        )}
+                                    >
+                                        <BoxedListContentRow>
+                                            Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+                                        </BoxedListContentRow>
+                                        <BoxedListContentRow>
+                                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+                                        </BoxedListContentRow>
+                                    </BoxedListItem>
+                                    <BoxedListItem
+                                        type="warning"
+                                        media={(
+                                            <AvatarWrapper size="medium">
+                                                <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
+                                            </AvatarWrapper>
+                                        )}
+                                        footer={(
+                                            <ButtonGroup align="end">
+                                                <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
+                                                <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
+                                            </ButtonGroup>
+                                        )}
+                                        actions={(
+                                            <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                        )}
+                                    >
+                                        <BoxedListContentRow>
+                                            Maecenas sed diam eget risus varius blandit sit amet magna.
+                                        </BoxedListContentRow>
+                                    </BoxedListItem>
+                                    <BoxedListItem
+                                        selected={true}
+                                        actions={(
+                                            <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
+                                        )}
+                                    >
+                                        <BoxedListContentRow>
+                                            Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
+                                        </BoxedListContentRow>
+                                    </BoxedListItem>
+                                </BoxedList>
+                            </Layout.PanelContentBlock>
+                        </Layout.PanelContent>
+                    </Layout.Panel>
+                )}
+                sideBarClosed={this.state.sideBarOpen}
+                sideBar={(
+                    <Nav.SideBarTabs
+                        items={[
+                            { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
+                            { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
+                            { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
+                            { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
+                            { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
+                            { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
+                            { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
+                        ]}
+                        activeTab={this.state.activeTab}
+                        onActiveTabChange={(val) => {
+                            this.setState({
+                                activeTab: val,
+                            })
+                        }}
+                    />
+                )}
             />
-        )}
-    />
-    </div>
+        </div>
+    )
     }
 }