superdesk-ui-framework 3.0.66 → 3.0.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/app/styles/components/_list-item.scss +22 -11
  2. package/app-typescript/components/Autocomplete.tsx +9 -3
  3. package/app-typescript/components/Badge.tsx +16 -2
  4. package/app-typescript/components/Dropdown.tsx +3 -1
  5. package/app-typescript/components/DropdownFirst.tsx +14 -2
  6. package/app-typescript/components/DurationInput.tsx +19 -4
  7. package/app-typescript/components/EmptyState.tsx +11 -2
  8. package/app-typescript/components/Layouts/Panel.tsx +12 -1
  9. package/app-typescript/components/Lists/ContentList.tsx +5 -1
  10. package/app-typescript/components/Modal.tsx +10 -1
  11. package/app-typescript/components/Navigation/BottomNav.tsx +9 -2
  12. package/app-typescript/components/Navigation/QuickNavBar.tsx +10 -2
  13. package/app-typescript/components/Navigation/SideBarMenu.tsx +9 -4
  14. package/app-typescript/components/SidebarMenu.tsx +8 -1
  15. package/app-typescript/components/TabList.tsx +5 -1
  16. package/app-typescript/components/TagInput.tsx +4 -1
  17. package/app-typescript/components/ThemeSelector.tsx +13 -2
  18. package/app-typescript/components/TreeMenu.tsx +127 -122
  19. package/app-typescript/components/TreeSelect/TreeSelect.tsx +157 -141
  20. package/app-typescript/components/WithPortal.tsx +49 -0
  21. package/app-typescript/components/avatar/avatar-image.tsx +2 -0
  22. package/app-typescript/components/avatar/avatar.tsx +2 -1
  23. package/dist/examples.bundle.js +1446 -1318
  24. package/dist/playgrounds/planning.html +121 -43
  25. package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  26. package/dist/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  27. package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  28. package/dist/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  29. package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  30. package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  31. package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  32. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  33. package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  34. package/dist/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  35. package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  36. package/dist/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  37. package/dist/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  38. package/dist/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  39. package/dist/playgrounds/react-playgrounds/tsconfig.json +4 -0
  40. package/dist/superdesk-ui.bundle.css +24 -14
  41. package/dist/superdesk-ui.bundle.js +830 -727
  42. package/dist/vendor.bundle.js +14 -14
  43. package/examples/pages/playgrounds/planning.html +121 -43
  44. package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +398 -385
  45. package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +359 -365
  46. package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +33 -33
  47. package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +227 -231
  48. package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +41 -38
  49. package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +76 -96
  50. package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +73 -101
  51. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +788 -729
  52. package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +35 -26
  53. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +99 -128
  54. package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +40 -25
  55. package/examples/pages/playgrounds/react-playgrounds/components/GraphicButton.tsx +6 -5
  56. package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +0 -2
  57. package/examples/pages/playgrounds/react-playgrounds/components/SearchBar.tsx +16 -9
  58. package/examples/pages/playgrounds/react-playgrounds/tsconfig.json +4 -0
  59. package/package.json +3 -2
  60. package/react/components/Autocomplete.js +2 -2
  61. package/react/components/Badge.js +1 -1
  62. package/react/components/Dropdown.js +3 -1
  63. package/react/components/DropdownFirst.js +6 -2
  64. package/react/components/DurationInput.js +5 -1
  65. package/react/components/EmptyState.js +2 -1
  66. package/react/components/Lists/ContentList.js +1 -1
  67. package/react/components/Navigation/BottomNav.js +4 -1
  68. package/react/components/Navigation/QuickNavBar.js +2 -1
  69. package/react/components/Navigation/SideBarMenu.js +3 -1
  70. package/react/components/TabList.js +2 -1
  71. package/react/components/TagInput.js +1 -1
  72. package/react/components/TreeSelect/TreeSelect.d.ts +3 -2
  73. package/react/components/TreeSelect/TreeSelect.js +81 -73
  74. package/react/components/WithPortal.d.ts +14 -0
  75. package/react/components/WithPortal.js +69 -0
  76. package/react/components/avatar/avatar.js +2 -1
  77. /package/dist/playgrounds/dummy-data/{items.js → items.ts} +0 -0
  78. /package/examples/pages/playgrounds/dummy-data/{items.js → items.ts} +0 -0
package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as Components from './components/Index';
3
- import { ButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, RadioButton, Input, Select, Option } from '../../../../app-typescript/index';
3
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, Select, Option } from '../../../../app-typescript/index';
4
4
 
5
5
  interface IProps {
6
6
  children?: React.ReactNode;
@@ -65,7 +65,9 @@ export class FirstPlayground extends React.Component<IProps, IState> {
65
65
  'divider',
66
66
  { icon: 'personal', size: 'big' },
67
67
  { icon: 'global-search', size: 'big' },
68
- { icon: 'picture', size: 'big' }]} />
68
+ { icon: 'picture', size: 'big' }
69
+ ]}
70
+ />
69
71
 
70
72
  <div className='sd-content-wrapper__main-content-area sd-main-content-grid comfort'>
71
73
  <Components.HeaderPanel >
@@ -81,7 +83,9 @@ export class FirstPlayground extends React.Component<IProps, IState> {
81
83
  { label: 'File archive', onSelect: () => this.setState({ dropDownState: 'File archive' }) },
82
84
  { label: 'AP images', onSelect: () => this.setState({ dropDownState: 'AP archive' }) },
83
85
  ]
84
- }]}>
86
+ }
87
+ ]}
88
+ >
85
89
  <NavButton onClick={() => false} />
86
90
  </Dropdown>
87
91
  </ButtonGroup>
@@ -93,13 +97,6 @@ export class FirstPlayground extends React.Component<IProps, IState> {
93
97
  <ButtonGroup >
94
98
  <NavButton icon='filter-large' onClick={this.handleFilter} />
95
99
  </ButtonGroup>
96
- <CheckButtonGroup >
97
- <RadioButton value={this.state.itemType} onChange={(value) => this.setState({ itemType: value })} options={[
98
- { value: 'itemtype01', label: 'All item types' },
99
- { value: 'itemtype02', label: 'Images only' },
100
- { value: 'itemtype03', label: 'Videos only' },
101
- { value: 'itemtype04', label: 'Documents only' }]} />
102
- </CheckButtonGroup>
103
100
  <ButtonGroup align='end'>
104
101
  <NavButton icon='adjust' onClick={this.handleTheme} />
105
102
  <NavButton icon='th-list' onClick={() => false} />
@@ -115,23 +112,24 @@ export class FirstPlayground extends React.Component<IProps, IState> {
115
112
  <Components.PanelContentBlock>
116
113
  <div className="form__group">
117
114
  <div className="form__item">
118
- <Input label='TITLE'
119
- error='This is error message'
115
+ <Input
116
+ type='text'
117
+ label='TITLE'
120
118
  inlineLabel={false}
121
119
  disabled={false}
122
- invalid={false}
123
- onChange={(value) => { }} />
120
+ onChange={() => false}
121
+ />
124
122
  </div>
125
123
  </div>
126
124
  <div className="form__group">
127
125
  <div className="form__item">
128
- <Select label='Source'
126
+ <Select
127
+ label='Source'
129
128
  value='Select ingest source...'
130
- error='This is error message'
131
129
  inlineLabel={false}
132
130
  disabled={false}
133
- invalid={false}
134
- onChange={(value) => { }}>
131
+ onChange={() => false}
132
+ >
135
133
  <Option value="option-1">Select ingest source...</Option>
136
134
  <Option value="option-2">Associated Press</Option>
137
135
  <Option value="option-3">Reuters</Option>
@@ -140,32 +138,35 @@ export class FirstPlayground extends React.Component<IProps, IState> {
140
138
  </div>
141
139
  <div className="form__group" >
142
140
  <div className="form__item">
143
- <Input label='LOCATION'
144
- error='This is error message'
141
+ <Input
142
+ type='text'
143
+ label='LOCATION'
145
144
  inlineLabel={false}
146
145
  disabled={false}
147
- invalid={false}
148
- onChange={(value) => { }} />
146
+ onChange={() => false}
147
+ />
149
148
  </div>
150
149
  </div>
151
150
  <div className="form__group">
152
151
  <div className="form__item">
153
- <Input label='CATEGORY'
154
- error='This is error message'
152
+ <Input
153
+ type='text'
154
+ label='CATEGORY'
155
155
  inlineLabel={false}
156
156
  disabled={false}
157
- invalid={false}
158
- onChange={(value) => { }} />
157
+ onChange={() => false}
158
+ />
159
159
  </div>
160
160
  </div>
161
161
  <div className="form__group">
162
162
  <div className="form__item">
163
- <Input label='SUBJECT'
164
- error='This is error message'
163
+ <Input
164
+ type='text'
165
+ label='SUBJECT'
165
166
  inlineLabel={false}
166
167
  disabled={false}
167
- invalid={false}
168
- onChange={(value) => { }} />
168
+ onChange={() => false}
169
+ />
169
170
  </div>
170
171
  </div>
171
172
 
@@ -173,12 +174,11 @@ export class FirstPlayground extends React.Component<IProps, IState> {
173
174
  <div className="form__item">
174
175
  <Select label='Usage right'
175
176
  value='--- Not selected ---'
176
- error='This is error message'
177
177
  info='Dolor in hendrerit.'
178
178
  inlineLabel={false}
179
179
  disabled={false}
180
- invalid={false}
181
- onChange={(value) => { }}>
180
+ onChange={() => false}
181
+ >
182
182
  <Option value="">--- Not selected ---</Option>
183
183
  <Option value="single">Single usage</Option>
184
184
  <Option value="time">Time restricted</Option>
package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as React from 'react';
2
- import * as Components from './components/Index';
3
- 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';
2
+ import { ButtonGroup, Button, NavButton, SubNav, Dropdown, Input, IconButton, Tooltip, Select, Option, Icon, AvatarWrapper, AvatarContentText, Modal } from '../../../../app-typescript/index';
4
3
  import * as Layout from '../../../../app-typescript/components/Layouts';
5
4
  import * as Form from '../../../../app-typescript/components/Form';
6
5
  import * as Nav from '../../../../app-typescript/components/Navigation';
@@ -70,22 +69,26 @@ export class Multiedit extends React.Component<IProps, IState> {
70
69
  render() {
71
70
  return (
72
71
  <Modal
73
- className='p-dialog-flex'
74
- onHide={() => false}
75
- maximized={true} contentPadding={"none"}
76
- headerTemplate="Multiedit"
77
- visible={true} >
78
- <Spacer children={this.state.arr} gap={'0'}></Spacer>
79
- <div style={{
80
- padding: '0 20px',
81
- display: 'flex',
82
- alignItems: 'center'
83
- }}>
72
+ className='p-dialog-flex'
73
+ onHide={() => false}
74
+ maximized={true} contentPadding={"none"}
75
+ headerTemplate="Multiedit"
76
+ visible={true}
77
+ >
78
+ <Spacer children={this.state.arr} gap={'0'} />
79
+ <div
80
+ style={{
81
+ padding: '0 20px',
82
+ display: 'flex',
83
+ alignItems: 'center'
84
+ }}
85
+ >
84
86
  <Dropdown
85
- append
86
- items={[
87
+ append
88
+ items={[
87
89
  { label: 'Action 1', onSelect: () => this.setState({arr: [...this.state.arr, <Editor />]}) },
88
- ]}>
90
+ ]}
91
+ >
89
92
  <Button type="primary" icon="plus-large" text="Add article" style="filled" size="large" shape="round" iconOnly={true} onClick={()=> false} />
90
93
  </Dropdown>
91
94
  </div>
@@ -105,227 +108,220 @@ export class Editor extends React.Component<{}, IEditor> {
105
108
  this.state = {
106
109
  sideBarOpen: false,
107
110
  activeTab: '1',
108
-
109
111
  }
110
112
  }
111
113
 
112
114
  render() {
113
- return <div style={{borderRight: '4px solid grey'}}>
114
- <Layout.AuthoringFrame
115
- header={(
116
- <SubNav zIndex={2}>
117
- <ButtonGroup align='end'>
118
- <ButtonGroup subgroup={true} spaces="no-space">
119
- <Tooltip text='More actions' flow='left'>
120
- <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
121
- </Tooltip>
122
- <Tooltip text='Send to / Publish' flow='left'>
123
- <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
124
- </Tooltip>
125
- <Tooltip text='Send to / Publish' flow='left'>
126
- <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
127
- </Tooltip>
128
- </ButtonGroup>
129
- </ButtonGroup>
130
- </SubNav>
131
- )}
132
- main={(
133
- <Layout.AuthoringMain
134
- headerPadding='medium'
135
- toolBar={(
136
- <React.Fragment>
137
- <div className="sd-editor-toolbar__content">
138
- <dl>
139
- <dt>Created</dt>
140
- <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
141
- <dt>by</dt>
142
- <dt>Nareg Asmarian</dt>
143
- </dl>
144
- <dl>
145
- <dt>Modified</dt>
146
- <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
147
- </dl>
148
- </div>
149
- <ButtonGroup align='end'>
150
- <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
151
- <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
152
- <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
153
- </ButtonGroup>
154
- </React.Fragment>
155
- )}
156
- authoringHeader ={(
157
- <React.Fragment>
158
- <Form.FormGroup inlineLabel={true}>
159
- <Form.FormItem>
160
- <Input
161
- type='text'
162
- label='Slugline'
163
- value='This is some value'
164
- maxLength={30}
165
- error='This is error message'
166
- info='This is some hint message'
167
- required={false}
168
- disabled={false}
169
- invalid={false}
170
- onChange={(value) => {}} />
171
- </Form.FormItem>
172
- <Form.FormItem>
173
- <Input
174
- type='text'
175
- label='Slugline'
176
- value='This is some value'
177
- maxLength={30}
178
- error='This is error message'
179
- info='This is some hint message'
180
- required={false}
181
- disabled={false}
182
- invalid={false}
183
- onChange={(value) => {}} />
184
- </Form.FormItem>
185
- </Form.FormGroup>
186
- <Form.FormGroup inlineLabel={true}>
187
- <Form.FormItem>
188
- <Input
189
- type='text'
190
- label='Genre'
191
- value='This is some value'
192
- maxLength={30}
193
- error='This is error message'
194
- info='This is some hint message'
195
- required={false}
196
- disabled={false}
197
- invalid={false}
198
- onChange={(value) => {}} />
199
- </Form.FormItem>
200
- </Form.FormGroup>
201
- <Form.FormGroup marginBottom='0' inlineLabel={true}>
202
- <Form.FormItem>
203
- <Input
204
- type='text'
205
- label='Subject'
206
- value='This is some value'
207
- maxLength={30}
208
- error='This is error message'
209
- info='This is some hint message'
210
- required={true}
211
- disabled={false}
212
- invalid={false}
213
- onChange={(value) => {}} />
214
- </Form.FormItem>
215
- <Form.FormItem autoWidth={true}>
216
- <Form.FormText>Just testing:</Form.FormText>
217
- </Form.FormItem>
218
- <Form.FormItem>
219
- <Select
220
- label='Categories'
221
- labelHidden={true}
222
- value='This is some value'
223
- error='This is error message'
224
- info='This is some hint message'
225
- required={true}
226
- disabled={false}
227
- invalid={false}
228
- onChange={(value) => {}}>
229
- <Option>Option 1</Option>
230
- <Option>Option 2</Option>
231
- </Select>
232
- </Form.FormItem>
233
- <Form.FormItem autoWidth={true}>
234
- <ButtonGroup>
235
- <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
236
- <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
237
- <Button text="Submit" onClick={()=> false} type="primary" />
115
+ return (
116
+ <div style={{borderRight: '4px solid grey'}}>
117
+ <Layout.AuthoringFrame
118
+ header={(
119
+ <SubNav zIndex={2}>
120
+ <ButtonGroup align='end'>
121
+ <ButtonGroup subgroup={true} spaces="no-space">
122
+ <Tooltip text='More actions' flow='left'>
123
+ <NavButton type='default' icon='dots-vertical' text='More actions' onClick={()=> false} />
124
+ </Tooltip>
125
+ <Tooltip text='Send to / Publish' flow='left'>
126
+ <NavButton type='highlight' icon='send-to' iconSize='big' text='Send to / Publish' onClick={()=> false} />
127
+ </Tooltip>
128
+ <Tooltip text='Send to / Publish' flow='left'>
129
+ <NavButton type='darker' icon={this.state.sideBarOpen ? 'forward-thin' : 'backward-thin'} text='More actions' onClick={()=> this.setState({sideBarOpen: !this.state.sideBarOpen})} />
130
+ </Tooltip>
238
131
  </ButtonGroup>
239
- </Form.FormItem>
240
- </Form.FormGroup>
241
- </React.Fragment>
242
- )}>
243
- </Layout.AuthoringMain>
244
- )}
245
- sidePanel={(
246
- <Layout.Panel side='right' background='grey' open={false} size='x-small'>
247
- <Layout.PanelHeader title='Pinned content' onClose={() => false}>
248
- </Layout.PanelHeader>
249
- <Layout.PanelContent>
250
- <Layout.PanelContentBlock>
251
- <BoxedList density='comfortable'>
252
- <BoxedListItem
253
- type="success"
254
- clickable={true}
255
- media={(
256
- <Icon name='slideshow' />
257
- )}
258
- actions={(
259
- <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
260
- )}
261
- >
262
- <BoxedListContentRow>
263
- Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
264
- </BoxedListContentRow>
265
- <BoxedListContentRow>
266
- Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
267
- </BoxedListContentRow>
268
- </BoxedListItem>
269
- <BoxedListItem
270
- type="warning"
271
- media={(
272
- <AvatarWrapper
273
- size="medium"
132
+ </ButtonGroup>
133
+ </SubNav>
134
+ )}
135
+ main={(
136
+ <Layout.AuthoringMain
137
+ headerPadding='medium'
138
+ toolBar={(
139
+ <React.Fragment>
140
+ <div className="sd-editor-toolbar__content">
141
+ <dl>
142
+ <dt>Created</dt>
143
+ <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
144
+ <dt>by</dt>
145
+ <dt>Nareg Asmarian</dt>
146
+ </dl>
147
+ <dl>
148
+ <dt>Modified</dt>
149
+ <dd><time title="July 29, 2021 3:58 PM">07/29</time></dd>
150
+ </dl>
151
+ </div>
152
+ <ButtonGroup align='end'>
153
+ <IconButton icon="preview-mode" toolTipAppend={true} ariaValue="Print preview" onClick={()=> false} />
154
+ <IconButton icon="adjust" ariaValue="Toogle theme" onClick={()=> false} />
155
+ <IconButton icon="switches" ariaValue="Theme settings" onClick={()=> false} />
156
+ </ButtonGroup>
157
+ </React.Fragment>
158
+ )}
159
+ authoringHeader ={(
160
+ <React.Fragment>
161
+ <Form.FormGroup inlineLabel={true}>
162
+ <Form.FormItem>
163
+ <Input
164
+ type='text'
165
+ label='Slugline'
166
+ value='This is some value'
167
+ maxLength={30}
168
+ info='This is some hint message'
169
+ required={false}
170
+ disabled={false}
171
+ onChange={() => false}
172
+ />
173
+ </Form.FormItem>
174
+ <Form.FormItem>
175
+ <Input
176
+ type='text'
177
+ label='Slugline'
178
+ value='This is some value'
179
+ maxLength={30}
180
+ info='This is some hint message'
181
+ required={false}
182
+ disabled={false}
183
+ onChange={() => false}
184
+ />
185
+ </Form.FormItem>
186
+ </Form.FormGroup>
187
+ <Form.FormGroup inlineLabel={true}>
188
+ <Form.FormItem>
189
+ <Input
190
+ type='text'
191
+ label='Genre'
192
+ value='This is some value'
193
+ maxLength={30}
194
+ info='This is some hint message'
195
+ required={false}
196
+ disabled={false}
197
+ onChange={() => false}
198
+ />
199
+ </Form.FormItem>
200
+ </Form.FormGroup>
201
+ <Form.FormGroup marginBottom='0' inlineLabel={true}>
202
+ <Form.FormItem>
203
+ <Input
204
+ type='text'
205
+ label='Subject'
206
+ value='This is some value'
207
+ maxLength={30}
208
+ info='This is some hint message'
209
+ required={true}
210
+ disabled={false}
211
+ onChange={() => false}
212
+ />
213
+ </Form.FormItem>
214
+ <Form.FormItem autoWidth={true}>
215
+ <Form.FormText>Just testing:</Form.FormText>
216
+ </Form.FormItem>
217
+ <Form.FormItem>
218
+ <Select
219
+ label='Categories'
220
+ labelHidden={true}
221
+ value='This is some value'
222
+ info='This is some hint message'
223
+ required={true}
224
+ disabled={false}
225
+ onChange={() => false}
274
226
  >
275
- <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
276
- </AvatarWrapper>
277
- )}
278
- footer={(
279
- <ButtonGroup align="end">
280
- <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
281
- <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
282
- </ButtonGroup>
283
- )}
284
- actions={(
285
- <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
286
- )}
287
- >
288
- <BoxedListContentRow>
289
- Maecenas sed diam eget risus varius blandit sit amet magna.
290
- </BoxedListContentRow>
291
- </BoxedListItem>
292
- <BoxedListItem
293
- selected={true}
294
- actions={(
295
- <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
296
- )}
297
- >
298
- <BoxedListContentRow>
299
- Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
300
- </BoxedListContentRow>
301
- </BoxedListItem>
302
- </BoxedList>
303
- </Layout.PanelContentBlock>
304
- </Layout.PanelContent>
305
- </Layout.Panel>
306
- )}
307
-
308
- sideBarClosed={this.state.sideBarOpen}
309
- sideBar={(
310
- <Nav.SideBarTabs
311
- items={[
312
- { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
313
- { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
314
- { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
315
- { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
316
- { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
317
- { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
318
- { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
319
- ]}
320
- activeTab={this.state.activeTab}
321
- onActiveTabChange={(val) => {
322
- this.setState({
323
- activeTab: val,
324
- })
325
- }}
227
+ <Option>Option 1</Option>
228
+ <Option>Option 2</Option>
229
+ </Select>
230
+ </Form.FormItem>
231
+ <Form.FormItem autoWidth={true}>
232
+ <ButtonGroup>
233
+ <IconButton ariaValue="Submit" icon="picture" onClick={()=> false} />
234
+ <Button text="Cancel" onClick={()=> false} type="default" style="hollow" />
235
+ <Button text="Submit" onClick={()=> false} type="primary" />
236
+ </ButtonGroup>
237
+ </Form.FormItem>
238
+ </Form.FormGroup>
239
+ </React.Fragment>
240
+ )}
241
+ />
242
+ )}
243
+ sidePanel={(
244
+ <Layout.Panel side='right' background='grey' open={false} size='x-small'>
245
+ <Layout.PanelHeader title='Pinned content' onClose={() => false}>
246
+ </Layout.PanelHeader>
247
+ <Layout.PanelContent>
248
+ <Layout.PanelContentBlock>
249
+ <BoxedList density='comfortable'>
250
+ <BoxedListItem
251
+ type="success"
252
+ clickable={true}
253
+ media={(
254
+ <Icon name='slideshow' />
255
+ )}
256
+ actions={(
257
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
258
+ )}
259
+ >
260
+ <BoxedListContentRow>
261
+ Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
262
+ </BoxedListContentRow>
263
+ <BoxedListContentRow>
264
+ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
265
+ </BoxedListContentRow>
266
+ </BoxedListItem>
267
+ <BoxedListItem
268
+ type="warning"
269
+ media={(
270
+ <AvatarWrapper size="medium">
271
+ <AvatarContentText text="JL" tooltipText="Jeffrey Lebowski" />
272
+ </AvatarWrapper>
273
+ )}
274
+ footer={(
275
+ <ButtonGroup align="end">
276
+ <Button text="cancel" size="small" style="hollow" onClick={()=> false} />
277
+ <Button text="yes" size="small" style="hollow" type="primary" onClick={()=> false} />
278
+ </ButtonGroup>
279
+ )}
280
+ actions={(
281
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
282
+ )}
283
+ >
284
+ <BoxedListContentRow>
285
+ Maecenas sed diam eget risus varius blandit sit amet magna.
286
+ </BoxedListContentRow>
287
+ </BoxedListItem>
288
+ <BoxedListItem
289
+ selected={true}
290
+ actions={(
291
+ <IconButton icon="dots-vertical" ariaValue="More actions" onClick={()=> false} />
292
+ )}
293
+ >
294
+ <BoxedListContentRow>
295
+ Maecenas sed diam eget risus varius blandit sit amet magna. Vestibulum id ligula porta felis euismod semper.
296
+ </BoxedListContentRow>
297
+ </BoxedListItem>
298
+ </BoxedList>
299
+ </Layout.PanelContentBlock>
300
+ </Layout.PanelContent>
301
+ </Layout.Panel>
302
+ )}
303
+ sideBarClosed={this.state.sideBarOpen}
304
+ sideBar={(
305
+ <Nav.SideBarTabs
306
+ items={[
307
+ { icon: 'info', size: 'big', tooltip: 'Info', id: '1' },
308
+ { icon: 'chat', size: 'big', tooltip: 'Comments', id: '2' },
309
+ { icon: 'history', size: 'big', tooltip: 'History', id: '3' },
310
+ { icon: 'package', size: 'big', tooltip: 'Packages', id: '4' },
311
+ { icon: 'attachment', size: 'big', tooltip: 'Attachments', id: '5'},
312
+ { icon: 'comments', size: 'big', tooltip: 'Inline Comments', id: '6' },
313
+ { icon: 'suggestion', size: 'big', tooltip: 'Suggestions', id: '7' }
314
+ ]}
315
+ activeTab={this.state.activeTab}
316
+ onActiveTabChange={(val) => {
317
+ this.setState({
318
+ activeTab: val,
319
+ })
320
+ }}
321
+ />
322
+ )}
326
323
  />
327
- )}
328
- />
329
- </div>
324
+ </div>
325
+ )
330
326
  }
331
327
  }