superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/dist/playgrounds/react-playgrounds/SamsPlayground.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, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
+import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButtonGroup, Input, Select, Option, Label, Icon, IconButton, Checkbox, GridList, Badge } from '../../../../app-typescript/index';
 import * as GridElements from '../../../../app-typescript/components/GridItem';
 
 import dummy_items from '../dummy-data/items';
@@ -11,7 +11,7 @@ interface IProps {
 }
 
 interface IState {
-    theme: 'dark' | 'light';
+    theme: 'dark' | 'light' | string;
     itemType: string;
     dropDownState: string;
     openPreview: boolean;
@@ -53,16 +53,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
         }));
     }
 
-    handleTheme() {
-        if (this.state.theme === 'light') {
-            this.setState({
-                theme: 'dark'
-            })
-        } else {
-            this.setState({
-                theme: 'light'
-            })
-        }
+    handleTheme(newTheme: string) {
+        this.setState({
+            theme: newTheme,
+        })
     }
 
     changeStatus(item: any, status: string) {
@@ -88,7 +82,7 @@ export class SamsPlayground extends React.Component<IProps, IState> {
 
                 <Components.LayoutContainer>
                     <Components.HeaderPanel>
-                        <SubNav theme={this.state.theme} zIndex={2}>
+                        <SubNav zIndex={2}>
                             <ButtonGroup align='inline'>
                                 <Dropdown
                                     items={[
@@ -106,23 +100,34 @@ export class SamsPlayground extends React.Component<IProps, IState> {
                             </ButtonGroup>
                             <Components.SearchBar placeholder='Search media'></Components.SearchBar>
 
-                            <ButtonGroup align='right'>
+                            <ButtonGroup align='end'>
                                 <NavButton icon='dots-vertical' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
-                        <SubNav theme={this.state.theme} zIndex={1}>
+                        <SubNav zIndex={1}>
                             <ButtonGroup align='inline'>
                                 <NavButton icon='filter-large' onClick={this.handleFilter} />
                             </ButtonGroup>
-                            <CheckButtonGroup padded>
-                                <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='right'>
-                                <NavButton icon='adjust' onClick={this.handleTheme} />
+                            <RadioButtonGroup 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' }
+                                ]} group={{padded: true}} />
+                            <ButtonGroup align='end' spaces='no-space'>
+                                <Dropdown
+                                    items={[
+                                        {
+                                            type: 'group', label: 'Chose a theme', items: [
+                                                'divider',
+                                                { label: 'Light', onSelect: () => this.handleTheme('light-ui')},
+                                                { label: 'Dark', onSelect: () => this.handleTheme('dark-ui')},
+                                            ]
+                                        },
+                                    ]}>
+                                    <NavButton type='default' icon='adjust' onClick={()=> false} />
+                                </Dropdown>
                                 <NavButton icon='th-list' onClick={() => false} />
                             </ButtonGroup>
                         </SubNav>
@@ -136,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}
@@ -162,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}
@@ -227,27 +238,16 @@ 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>
-                                            <Dropdown
-                                                align = 'right'
-                                                append = {true}
-                                                items={[
-                                                    {
-                                                        type: 'group', label: 'Actions', items: [
-                                                            'divider',
-                                                            { label: 'Edit', icon: 'pencil', onSelect: () => this.setState({ dropDownState: 'Edit ' }) },
-                                                            { label: 'Download', icon: 'download', onSelect: () => this.setState({ dropDownState: 'Download' }) },
-                                                            { label: 'Delete', icon: 'trash', onSelect: () => this.setState({ dropDownState: 'Delete' }) },
-                                                        ]
-                                                    }]}>
-                                                <IconButton ariaValue='dropdown-more-options' icon='dots-vertical' onClick={() => false} />
-                                            </Dropdown>
+                                            <IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
                                         </GridElements.GridItemFooterActions>
                                     </GridElements.GridItemFooter>
                                 </GridElements.GridItem>
                             )}
                         </GridList>
-
                     </Components.MainPanel>
                     {/* MAIN CONTENT (Monitoring) */}