superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/dist/playgrounds/react-playgrounds/Rundowns.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
-import * as Components from './components/Index';
 import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioGroup, RadioButtonGroup, Input, Select, Option, Label, IconLabel, Icon, IconButton, Checkbox, GridList, Badge, Tooltip, CreateButton, Modal, EmptyState, Container, BoxedList, BoxedListItem, BoxedListContentRow, Text, Heading, FormLabel, SlidingToolbar, Switch, SwitchGroup, SearchBar } from '../../../../app-typescript/index';
 import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import {RundownEditor} from './RundownEditor';
 import * as Nav from '../../../../app-typescript/components/Navigation';
-import * as GridElements from '../../../../app-typescript/components/GridItem';
-
-
-import dummy_items from '../dummy-data/items';
 import { ContentList } from '../../../../app-typescript/components/Lists/ContentList';
 import { TableList } from '../../../../app-typescript/components/Lists/TableList';
 
@@ -137,6 +132,10 @@ export class Rundowns extends React.Component<IProps, IState> {
         })
     }
 
+    componentDidUpdate() {
+        console.log(this.state);
+    }
+
     changeStatus(item: any, status: string) {
         if (item.status.includes(status)) {
             item.status.splice(item.status.indexOf(status), 1);
@@ -487,7 +486,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <Container direction='row' gap='small'><Text color='light'>Updated 3 hours ago by </Text><Text weight='medium'>John Doe</Text></Container>
                                     </Container>
                                     <Container className='sd-margin-s--auto sd-flex--items-center'>
-                                        <Dropdown
+                                        {/* <Dropdown
                                             align = 'right'
                                             append = {true}
                                             items={[
@@ -500,7 +499,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                                     ]
                                                 }]}>
                                             <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                        </Dropdown>
+                                        </Dropdown> */}
                                     </Container>
                                 </Layout.PanelContentBlock>
 
@@ -524,15 +523,14 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         <IconLabel style='translucent' innerLabel='Planned:'text='01:00' />
                                     </ButtonGroup>
                                     <TableList
-                                className='sd-margin-y--4'
-                                array={this.state.array}
-                                itemsDropdown={[
-                                    { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
-                                    { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
-                                    { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
-                                ]}
-                                onClick={() => false}
-                                />   
+                                        className='sd-margin-y--4'
+                                        array={this.state.array}
+                                        itemsDropdown={() => [
+                                            { label: <Label style='translucent' type='primary' text='aacc' />, onSelect: () => 1 },
+                                            { label: <Label style='translucent' text='prlg' />, onSelect: () => 1 },
+                                            { label: <Label style='translucent' type='primary' text='prlg' />, onSelect: () => 1 },
+                                        ]}
+                                    />   
                                 </Layout.PanelContentBlock>
                             </Layout.PanelContent>
                         </Layout.Panel>
@@ -553,6 +551,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Templates Modal */}
             <Modal headerTemplate="Manage Templates"
                 visible={this.state.modalManageTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageTemplate: false})}}>
@@ -632,8 +631,6 @@ export class Rundowns extends React.Component<IProps, IState> {
                                             </Container>
                                         </BoxedListItem>
                                     </BoxedList> */}
-
-
                             </Layout.PanelContent>
                         </Layout.Panel>
                     </Layout.LeftPanel>
@@ -652,6 +649,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShow}
+                zIndex={1000}
                 footerTemplate={newShowFooter}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShow: false})}}>
@@ -683,6 +681,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* New Show Modal Success */}
             <Modal headerTemplate="Create new Show"
                 visible={this.state.modalNewShowSuccess}
+                zIndex={1000}
                 footerTemplate={newShowFooter2}
                 contentBg='medium'
                 size='medium' onHide={() => {this.setState({modalNewShowSuccess: false})}}>
@@ -692,14 +691,13 @@ export class Rundowns extends React.Component<IProps, IState> {
                         The show <strong>Marker</strong> has been successfully created.<br />
                         Do you want to cretate a template for this show right away?
                     </Text>
-
-
                 </Container>
             </Modal>
 
             {/* New Template Modal */}
             <Modal headerTemplate="Create new Template"
                 visible={this.state.modalNewTemplate}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalNewTemplate: false})}}>
@@ -733,7 +731,7 @@ export class Rundowns extends React.Component<IProps, IState> {
                                         </ButtonGroup>
                                     </Container>
                                     <BoxedList>
-                                    <BoxedListItem
+                                        <BoxedListItem
                                             alignVertical='center'
                                             clickable={true}
                                             density='compact'
@@ -805,6 +803,7 @@ export class Rundowns extends React.Component<IProps, IState> {
             {/* Manage Shows Modal */}
             <Modal headerTemplate="Manage Shows"
                 visible={this.state.modalManageShow}
+                zIndex={1000}
                 contentBg='medium'
                 contentPadding='none'
                 size='x-large' onHide={() => {this.setState({modalManageShow: false})}}>

package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx

@@ -141,7 +141,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                 <Components.PanelContentBlock>
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Title'
+                                            <Input
+                                                label='Title'
+                                                type='text'
+                                                value=''
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
@@ -167,7 +170,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                                     <div className="form__group">
                                         <div className="form__item">
-                                            <Input label='Keyword'
+                                            <Input 
+                                                label='Keyword'
+                                                type='text'
+                                                value=''
                                                 error='This is error message'
                                                 inlineLabel={false}
                                                 disabled={false}
@@ -232,8 +238,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                                             <Badge text={item.urgency} color={item.urgencyColor} />
                                             <Badge text={item.priority} shape='square' color={item.priorityColor} />
                                         </GridElements.GridItemFooterBlock>
+                                        <GridElements.GridItemFooterBlock align='right'>
+                                            <Label type='success' style='translucent' text='In progress' />
+                                        </GridElements.GridItemFooterBlock>
                                         <GridElements.GridItemFooterActions>
-                                            <IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
+                                            <IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>