superdesk-ui-framework 3.0.0-rc12 → 3.0.0
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.
- package/.vscode/settings.json +5 -0
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +1 -0
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/styles/_icon-font.scss +1 -0
- package/app/styles/_master-desk.scss +2 -2
- package/app/styles/_modals.scss +1 -0
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_sd-pagination.scss +41 -0
- package/app/styles/grids/_grid-layout.scss +4 -14
- package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
- package/app/styles/primereact/_pr-datepicker.scss +12 -0
- package/app/styles/primereact/_pr-dialog.scss +4 -0
- package/app/styles/variables/_colors.scss +37 -37
- package/app/template/search-handler.html +2 -2
- package/app-typescript/components/DatePicker.tsx +8 -9
- package/app-typescript/components/Layouts/CoreLayout.tsx +2 -1
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +4 -1
- package/app-typescript/components/Lists/ContentList.tsx +3 -2
- package/app-typescript/components/Lists/TableList.tsx +17 -8
- package/app-typescript/components/Modal.tsx +6 -2
- package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
- package/app-typescript/dist/components/Alert.d.ts +16 -0
- package/app-typescript/dist/components/Autocomplete.d.ts +48 -0
- package/app-typescript/dist/components/Avatar.d.ts +33 -0
- package/app-typescript/dist/components/Badge.d.ts +13 -0
- package/app-typescript/dist/components/Button.d.ts +23 -0
- package/app-typescript/dist/components/ButtonGroup.d.ts +12 -0
- package/app-typescript/dist/components/CheckButtonGroup.d.ts +11 -0
- package/app-typescript/dist/components/CheckGroup.d.ts +9 -0
- package/app-typescript/dist/components/Checkbox.d.ts +19 -0
- package/app-typescript/dist/components/CheckboxButton.d.ts +19 -0
- package/app-typescript/dist/components/DatePicker.d.ts +37 -0
- package/app-typescript/dist/components/Divider.d.ts +9 -0
- package/app-typescript/dist/components/DonutChart.d.ts +12 -0
- package/app-typescript/dist/components/Dropdown.d.ts +28 -0
- package/app-typescript/dist/components/DropdownFirst.d.ts +42 -0
- package/app-typescript/dist/components/EmptyState.d.ts +11 -0
- package/app-typescript/dist/components/FormLabel.d.ts +9 -0
- package/app-typescript/dist/components/Genie.d.ts +13 -0
- package/app-typescript/dist/components/GridItem.d.ts +69 -0
- package/app-typescript/dist/components/GridList.d.ts +14 -0
- package/app-typescript/dist/components/HeadingText.d.ts +10 -0
- package/app-typescript/dist/components/HelloWorld.d.ts +8 -0
- package/app-typescript/dist/components/Icon.d.ts +12 -0
- package/app-typescript/dist/components/IconButton.d.ts +12 -0
- package/app-typescript/dist/components/IconLabel.d.ts +11 -0
- package/app-typescript/dist/components/Input.d.ts +24 -0
- package/app-typescript/dist/components/Label.d.ts +15 -0
- package/app-typescript/dist/components/LeftMenu.d.ts +26 -0
- package/app-typescript/dist/components/Loader.d.ts +8 -0
- package/app-typescript/dist/components/NavButton.d.ts +15 -0
- package/app-typescript/dist/components/Popover.d.ts +13 -0
- package/app-typescript/dist/components/PropsList.d.ts +15 -0
- package/app-typescript/dist/components/Radio.d.ts +19 -0
- package/app-typescript/dist/components/RadioButton.d.ts +20 -0
- package/app-typescript/dist/components/Select.d.ts +29 -0
- package/app-typescript/dist/components/SelectWithTemplate.d.ts +32 -0
- package/app-typescript/dist/components/SlidingToolbar.d.ts +8 -0
- package/app-typescript/dist/components/StrechBar.d.ts +4 -0
- package/app-typescript/dist/components/SubNav.d.ts +10 -0
- package/app-typescript/dist/components/Switch.d.ts +12 -0
- package/app-typescript/dist/components/TabCustom.d.ts +25 -0
- package/app-typescript/dist/components/TabList.d.ts +22 -0
- package/app-typescript/dist/components/Tag.d.ts +9 -0
- package/app-typescript/dist/components/TagInput.d.ts +7 -0
- package/app-typescript/dist/components/TagInputTest.d.ts +18 -0
- package/app-typescript/dist/components/TimePicker.d.ts +11 -0
- package/app-typescript/dist/components/Tooltip.d.ts +11 -0
- package/app-typescript/dist/components/_Positioner.d.ts +27 -0
- package/app-typescript/dist/index.d.ts +56 -0
- package/dist/examples.bundle.css +39 -0
- package/dist/examples.bundle.js +1905 -1471
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +29 -1
- package/dist/react/DatePicker.tsx +50 -2
- package/dist/react/Modal.tsx +154 -22
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +1 -0
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +175 -21
- package/dist/superdesk-ui.bundle.js +1059 -1033
- package/dist/vendor.bundle.js +7 -7
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -3
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +12 -9
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +6 -6
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +29 -1
- package/examples/pages/react/DatePicker.tsx +50 -2
- package/examples/pages/react/Modal.tsx +154 -22
- package/package.json +1 -1
- package/react/components/DatePicker.d.ts +2 -2
- package/react/components/DatePicker.js +3 -3
- package/react/components/Layouts/CoreLayout.d.ts +1 -0
- package/react/components/Layouts/CoreLayout.js +1 -1
- package/react/components/Layouts/CoreLayoutMain.d.ts +1 -0
- package/react/components/Layouts/CoreLayoutMain.js +1 -1
- package/react/components/Lists/ContentList.js +3 -2
- package/react/components/Lists/TableList.js +12 -4
- package/react/components/Modal.d.ts +2 -0
- package/react/components/Modal.js +3 -3
- package/react/components/Navigation/SideBarMenu.d.ts +6 -0
- package/react/components/Navigation/SideBarMenu.js +19 -2
- package/yarn-error.log +111 -0
@@ -7,6 +7,9 @@ import { TableList } from '../../../../app-typescript/components/Lists/TableList
|
|
7
7
|
|
8
8
|
interface IProps {
|
9
9
|
children?: React.ReactNode;
|
10
|
+
rightPanel?: boolean;
|
11
|
+
openPanel(): any;
|
12
|
+
closePanel(): void;
|
10
13
|
}
|
11
14
|
|
12
15
|
interface IState {
|
@@ -41,7 +44,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
41
44
|
value2: false,
|
42
45
|
value3: false,
|
43
46
|
leftPanelOpen: false,
|
44
|
-
rightPanelOpen: false,
|
47
|
+
rightPanelOpen: this.props.rightPanel ? this.props.rightPanel : false,
|
45
48
|
rightPanelPinned: false,
|
46
49
|
sideOverlayOpen: false,
|
47
50
|
inputValue: 'string',
|
@@ -57,7 +60,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
57
60
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
|
58
61
|
</>,
|
59
62
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
60
|
-
onClick: () => { this.
|
63
|
+
onClick: () => { this.props.openPanel() }
|
61
64
|
},
|
62
65
|
{
|
63
66
|
start: <>
|
@@ -70,7 +73,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
70
73
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:11' type='warning' />
|
71
74
|
</>,
|
72
75
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
73
|
-
onClick: () => { this.
|
76
|
+
onClick: () => { this.props.openPanel() }
|
74
77
|
},
|
75
78
|
{
|
76
79
|
start: <>
|
@@ -83,7 +86,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
83
86
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
|
84
87
|
</>,
|
85
88
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
86
|
-
onClick: () => { this.
|
89
|
+
onClick: () => { this.props.openPanel() }
|
87
90
|
},
|
88
91
|
{
|
89
92
|
start: <>
|
@@ -96,7 +99,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
96
99
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:15' type='alert' />
|
97
100
|
</>,
|
98
101
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
99
|
-
onClick: () => { this.
|
102
|
+
onClick: () => { this.props.openPanel() }
|
100
103
|
},
|
101
104
|
{
|
102
105
|
start: <>
|
@@ -109,7 +112,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
109
112
|
<IconLabel style='translucent' innerLabel='Duration:' text='00:20' type='success' />
|
110
113
|
</>,
|
111
114
|
action: <IconButton icon='dots-vertical' size='small' ariaValue='More actions' onClick={()=> false} />,
|
112
|
-
onClick: () => { this.
|
115
|
+
onClick: () => { this.props.openPanel() }
|
113
116
|
},
|
114
117
|
]
|
115
118
|
}
|
@@ -330,7 +333,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
330
333
|
</Layout.AuthoringMain>
|
331
334
|
</Layout.MainPanel>
|
332
335
|
|
333
|
-
<Layout.RightPanel open={this.
|
336
|
+
<Layout.RightPanel open={this.props.rightPanel}>
|
334
337
|
<Layout.Panel size='x-large' side='right'>
|
335
338
|
<Layout.PanelContent>
|
336
339
|
<Layout.AuthoringFrame
|
@@ -344,10 +347,10 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
344
347
|
<SubNav className='sd-shadow--z0'>
|
345
348
|
<SlidingToolbar>
|
346
349
|
<ButtonGroup align='start'>
|
347
|
-
<IconButton ariaValue="Close" icon="close-small" onClick={() => this.
|
350
|
+
<IconButton ariaValue="Close" icon="close-small" onClick={() => this.props.closePanel()} />
|
348
351
|
</ButtonGroup>
|
349
352
|
<ButtonGroup align='end'>
|
350
|
-
<Button text="Save Changes" style='hollow' onClick={() => this.
|
353
|
+
<Button text="Save Changes" style='hollow' onClick={() => this.props.closePanel()} type="primary" />
|
351
354
|
</ButtonGroup>
|
352
355
|
</SlidingToolbar>
|
353
356
|
</SubNav>
|
@@ -132,10 +132,6 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
132
132
|
})
|
133
133
|
}
|
134
134
|
|
135
|
-
componentDidUpdate() {
|
136
|
-
console.log(this.state);
|
137
|
-
}
|
138
|
-
|
139
135
|
changeStatus(item: any, status: string) {
|
140
136
|
if (item.status.includes(status)) {
|
141
137
|
item.status.splice(item.status.indexOf(status), 1);
|
@@ -163,13 +159,13 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
163
159
|
<Nav.SideBarMenu
|
164
160
|
items={[
|
165
161
|
{ icon: 'dashboard', size: 'big' },
|
166
|
-
{ icon: 'view', size: 'big' },
|
162
|
+
{ icon: 'view', size: 'big', editor: this.state.openEditor },
|
167
163
|
{ icon: 'marked-star', size: 'big' },
|
168
164
|
{ icon: 'spike', size: 'big' },
|
169
165
|
{ icon: 'personal', size: 'big' },
|
170
166
|
{ icon: 'global-search', size: 'big' },
|
171
167
|
{ icon: 'picture', size: 'big' },
|
172
|
-
{ icon: 'rundown', size: 'big',
|
168
|
+
{ icon: 'rundown', size: 'big', }]} />
|
173
169
|
|
174
170
|
<Layout.LayoutContainer>
|
175
171
|
<Layout.HeaderPanel>
|
@@ -540,12 +536,15 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
540
536
|
<Layout.OverlayPanel />
|
541
537
|
{/* OVERLAY PANEL (Send To) */}
|
542
538
|
</Layout.LayoutContainer>
|
539
|
+
|
543
540
|
<Layout.ContentSplitter visible={this.state.openEditor} />
|
541
|
+
|
544
542
|
{/* RUNDOWN EDITOR */}
|
545
543
|
<Layout.AuthoringContainer open={this.state.openEditor}>
|
546
544
|
<RundownEditor />
|
547
545
|
</Layout.AuthoringContainer>
|
548
546
|
{/* END RUNDOWN EDITOR */}
|
547
|
+
|
549
548
|
</Layout.Layout >
|
550
549
|
|
551
550
|
{/* Manage Templates Modal */}
|
@@ -802,6 +801,7 @@ export class Rundowns extends React.Component<IProps, IState> {
|
|
802
801
|
|
803
802
|
{/* Manage Shows Modal */}
|
804
803
|
<Modal headerTemplate="Manage Shows"
|
804
|
+
maximizable
|
805
805
|
visible={this.state.modalManageShow}
|
806
806
|
zIndex={1000}
|
807
807
|
contentBg='medium'
|
@@ -64,7 +64,35 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
64
64
|
<Components.LayoutContainer>
|
65
65
|
<Components.MainPanel>
|
66
66
|
|
67
|
-
|
67
|
+
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
68
|
+
<hr />
|
69
|
+
<div className='sd-pagination'>
|
70
|
+
<button className='sd-pagination__item sd-pagination__item--start' disabled>
|
71
|
+
<Icon name='backward-thin' />
|
72
|
+
</button>
|
73
|
+
<button className='sd-pagination__item sd-pagination__item--back' disabled>
|
74
|
+
<Icon name='chevron-left-thin' />
|
75
|
+
</button>
|
76
|
+
|
77
|
+
<button className='sd-pagination__item'>1</button>
|
78
|
+
<button className='sd-pagination__item sd-pagination__item--active'>2</button>
|
79
|
+
<button className='sd-pagination__item'>3</button>
|
80
|
+
<button className='sd-pagination__item'>4</button>
|
81
|
+
|
82
|
+
<span className='sd-pagination__item sd-pagination__item--more'>...</span>
|
83
|
+
|
84
|
+
<button className='sd-pagination__item'>12</button>
|
85
|
+
|
86
|
+
<button className='sd-pagination__item sd-pagination__item--forward'>
|
87
|
+
<Icon name='chevron-right-thin' />
|
88
|
+
</button>
|
89
|
+
<button className='sd-pagination__item sd-pagination__item--end'>
|
90
|
+
<Icon name='forward-thin' />
|
91
|
+
</button>
|
92
|
+
|
93
|
+
</div>
|
94
|
+
<hr />
|
95
|
+
|
68
96
|
<h3 className="docs-page__h3 sd-margin-y--0">Form test</h3>
|
69
97
|
<hr />
|
70
98
|
<div className="input-wrap">
|
@@ -30,6 +30,13 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date}> {
|
|
30
30
|
}
|
31
31
|
|
32
32
|
export default class DatePickerDoc extends React.Component {
|
33
|
+
constructor(props) {
|
34
|
+
super(props);
|
35
|
+
|
36
|
+
this.state = {
|
37
|
+
today: new Date(),
|
38
|
+
};
|
39
|
+
}
|
33
40
|
render() {
|
34
41
|
return (
|
35
42
|
<section className="docs-page__container">
|
@@ -120,14 +127,55 @@ export default class DatePickerDoc extends React.Component {
|
|
120
127
|
/>
|
121
128
|
`}</Markup.ReactMarkupCode>
|
122
129
|
</Markup.ReactMarkup>
|
130
|
+
<p className="docs-page__paragraph">DatePicker with headerButtonBar:</p>
|
131
|
+
<Markup.ReactMarkup>
|
132
|
+
<Markup.ReactMarkupPreview>
|
133
|
+
<div className='docs-page__content-row'>
|
134
|
+
<DatePicker
|
135
|
+
value={this.state.today}
|
136
|
+
dateFormat="YYYY-MM-DD"
|
137
|
+
onChange={(today) => {
|
138
|
+
this.setState({today});
|
139
|
+
}}
|
140
|
+
required
|
141
|
+
tabindex={1}
|
142
|
+
label={'This is Label'}
|
143
|
+
info={'This is info'}
|
144
|
+
error={'This is error'}
|
145
|
+
headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
|
146
|
+
/>
|
147
|
+
</div>
|
148
|
+
</Markup.ReactMarkupPreview>
|
149
|
+
<Markup.ReactMarkupCode>{`
|
150
|
+
<DatePicker
|
151
|
+
value={this.state.date}
|
152
|
+
dateFormat="YYYY-MM-DD"
|
153
|
+
onChange={(date) => {
|
154
|
+
this.setState({date});
|
155
|
+
}}
|
156
|
+
required
|
157
|
+
tabindex={1}
|
158
|
+
label={'This is Label'}
|
159
|
+
info={'This is info'}
|
160
|
+
error={'This is error'}
|
161
|
+
headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
|
162
|
+
/>
|
163
|
+
`}</Markup.ReactMarkupCode>
|
164
|
+
</Markup.ReactMarkup>
|
123
165
|
|
124
166
|
<h3 className='docs-page__h3'>Props</h3>
|
125
167
|
<PropsList>
|
126
168
|
<Prop name='value' isRequired={false} type='Date' default='/' description='Item value' />
|
127
|
-
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled' />
|
128
169
|
<Prop name='dateFormat' isRequired={true} type='string' default='/' description='Date format to use, i.e. "MM/DD/YYYY"' />
|
129
|
-
<Prop name='shortcuts' isRequired={false} type='string' default='/' description='Shortcuts for calendar popup, i.e. [{label: "tomorrow", days: 1}]' />
|
130
170
|
<Prop name='locale' isRequired={false} type='string' default='/' description='see: https://primefaces.org/primereact/showcase/#/calendar' />
|
171
|
+
<Prop name='headerButtonBar' isRequired={false} type='Array' default='/' description='Aditional button in header, ex. [{label: "today", days: 0}, {label: "tomorrow", days: 1}]' />
|
172
|
+
<Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>
|
173
|
+
<Prop name='info' isRequired={false} type='string' default='/' description='Hint text'/>
|
174
|
+
<Prop name='error' isRequired={false} type='string' default='/' description='Error text'/>
|
175
|
+
<Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline'/>
|
176
|
+
<Prop name='required' isRequired={false} type='boolean' default='false' description='Mark field as required'/>
|
177
|
+
<Prop name='disabled' isRequired={false} type='boolean' default='false' description='Mark field as disabled'/>
|
178
|
+
<Prop name='invalid' isRequired={false} type='boolean' default='false' description='Mark field as invalid'/>
|
131
179
|
</PropsList>
|
132
180
|
|
133
181
|
<h3 className='docs-page__h3'>Events</h3>
|
@@ -9,6 +9,11 @@ interface IState {
|
|
9
9
|
modalLarge: boolean;
|
10
10
|
modalXLarge: boolean;
|
11
11
|
modalFull: boolean;
|
12
|
+
maximizableModal: boolean;
|
13
|
+
top: boolean;
|
14
|
+
bottom: boolean;
|
15
|
+
left: boolean;
|
16
|
+
right: boolean;
|
12
17
|
}
|
13
18
|
|
14
19
|
export default class ModalDoc extends React.Component<{}, IState> {
|
@@ -21,7 +26,12 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
21
26
|
modalMedium: false,
|
22
27
|
modalLarge: false,
|
23
28
|
modalXLarge: false,
|
24
|
-
modalFull: false
|
29
|
+
modalFull: false,
|
30
|
+
maximizableModal: false,
|
31
|
+
top: false,
|
32
|
+
bottom: false,
|
33
|
+
left: false,
|
34
|
+
right: false,
|
25
35
|
}
|
26
36
|
}
|
27
37
|
|
@@ -69,21 +79,23 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
69
79
|
</ButtonGroup>
|
70
80
|
|
71
81
|
<Modal headerTemplate="Basic modal"
|
72
|
-
|
73
|
-
|
82
|
+
zIndex={10000}
|
83
|
+
maximizable
|
84
|
+
visible={this.state.modalBasic}
|
85
|
+
onHide={() => {this.setState({modalBasic: false})}}>
|
74
86
|
<p>This modal has no fixed size. It will adapt its size based on the content inside.</p>
|
75
87
|
</Modal>
|
76
88
|
|
77
89
|
<Modal headerTemplate="Small modal header"
|
78
|
-
|
79
|
-
|
90
|
+
visible={this.state.modalSmall}
|
91
|
+
size='small' onHide={() => {this.setState({modalSmall: false})}}>
|
80
92
|
<p>Small modal content. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
|
81
93
|
ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
|
82
94
|
</Modal>
|
83
95
|
|
84
96
|
<Modal headerTemplate="Medium modal header"
|
85
|
-
|
86
|
-
|
97
|
+
visible={this.state.modalMedium}
|
98
|
+
size='medium' onHide={() => {this.setState({modalMedium: false})}}>
|
87
99
|
<p>Medium modal content. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum.
|
88
100
|
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non
|
89
101
|
commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis
|
@@ -91,9 +103,9 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
91
103
|
</Modal>
|
92
104
|
|
93
105
|
<Modal headerTemplate="Large modal header"
|
94
|
-
|
95
|
-
|
96
|
-
|
106
|
+
visible={this.state.modalLarge}
|
107
|
+
footerTemplate={modalLargeFooter}
|
108
|
+
size='large' onHide={() => {this.setState({modalLarge: false})}}>
|
97
109
|
<p>Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
98
110
|
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur
|
99
111
|
purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit
|
@@ -104,9 +116,9 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
104
116
|
</Modal>
|
105
117
|
|
106
118
|
<Modal headerTemplate="Extra large modal"
|
107
|
-
|
108
|
-
|
109
|
-
|
119
|
+
visible={this.state.modalXLarge}
|
120
|
+
footerTemplate={modalXLargeFooter}
|
121
|
+
size='x-large' onHide={() => {this.setState({modalXLarge: false})}}>
|
110
122
|
<p className="sd-margin-b--3">Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
|
111
123
|
ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
112
124
|
Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
|
@@ -183,12 +195,12 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
183
195
|
<Markup.ReactMarkupPreview>
|
184
196
|
<Button text="Open Modal" onClick={() => this.setState({modalFull: true})} />
|
185
197
|
<Modal headerTemplate="Another modal header"
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
198
|
+
footerTemplate={modalFullFooter}
|
199
|
+
visible={this.state.modalFull}
|
200
|
+
theme='dark'
|
201
|
+
maximized={true}
|
202
|
+
className='testClass'
|
203
|
+
onHide={() => {this.setState({modalFull: false})}}>
|
192
204
|
<p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
|
193
205
|
nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
194
206
|
Vestibulum id ligula porta felis euismod semper.</p>
|
@@ -222,18 +234,138 @@ export default class ModalDoc extends React.Component<{}, IState> {
|
|
222
234
|
`}
|
223
235
|
</Markup.ReactMarkupCode>
|
224
236
|
</Markup.ReactMarkup>
|
237
|
+
|
238
|
+
<h3 className="docs-page__h3">Maximizable modal</h3>
|
239
|
+
<Markup.ReactMarkup>
|
240
|
+
<Markup.ReactMarkupPreview>
|
241
|
+
<Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
|
242
|
+
<Modal headerTemplate="Maximizable modal"
|
243
|
+
zIndex={1000}
|
244
|
+
maximizable
|
245
|
+
visible={this.state.maximizableModal}
|
246
|
+
size="small"
|
247
|
+
onHide={() => {this.setState({maximizableModal: false})}}>
|
248
|
+
<p className="sd-margin-b--3">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes,
|
249
|
+
nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
250
|
+
Vestibulum id ligula porta felis euismod semper.</p>
|
251
|
+
|
252
|
+
<p className="sd-margin-b--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
|
253
|
+
eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.</p>
|
254
|
+
|
255
|
+
<p>Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh
|
256
|
+
ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
|
257
|
+
Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis.</p>
|
258
|
+
</Modal>
|
259
|
+
</Markup.ReactMarkupPreview>
|
260
|
+
<Markup.ReactMarkupCode>{`
|
261
|
+
<Button text="Maximizable modal" onClick={() => this.setState({maximizableModal: true})} />
|
262
|
+
<Modal
|
263
|
+
headerTemplate="Maximizable modal"
|
264
|
+
zIndex={1000}
|
265
|
+
maximizable
|
266
|
+
visible={this.state.maximizableModal}
|
267
|
+
size="small"
|
268
|
+
onHide={() => {this.setState({maximizableModal: false})}}>
|
269
|
+
{children}
|
270
|
+
</Modal>
|
271
|
+
`}
|
272
|
+
</Markup.ReactMarkupCode>
|
273
|
+
</Markup.ReactMarkup>
|
274
|
+
|
275
|
+
<h3 className="docs-page__h3">Optional positioning of modal</h3>
|
276
|
+
<Markup.ReactMarkup>
|
277
|
+
<Markup.ReactMarkupPreview>
|
278
|
+
<ButtonGroup align="end">
|
279
|
+
<Button text="top" onClick={() => this.setState({top: true})} />
|
280
|
+
<Button text="bottom" onClick={() => this.setState({bottom: true})} />
|
281
|
+
<Button text="left" onClick={() => this.setState({left: true})} />
|
282
|
+
<Button text="right" onClick={() => this.setState({right: true})} />
|
283
|
+
</ButtonGroup>
|
284
|
+
|
285
|
+
<Modal headerTemplate="Modal with position top"
|
286
|
+
position="top"
|
287
|
+
zIndex={10000}
|
288
|
+
visible={this.state.top}
|
289
|
+
onHide={() => {this.setState({top: false})}}>
|
290
|
+
<p>This modal has position top.</p>
|
291
|
+
</Modal>
|
292
|
+
|
293
|
+
<Modal headerTemplate="Modal with position bottom"
|
294
|
+
position="bottom"
|
295
|
+
zIndex={10000}
|
296
|
+
visible={this.state.bottom}
|
297
|
+
onHide={() => {this.setState({bottom: false})}}>
|
298
|
+
<p>This modal has position bottom.</p>
|
299
|
+
</Modal>
|
300
|
+
|
301
|
+
<Modal headerTemplate="Modal with position left"
|
302
|
+
position="left"
|
303
|
+
zIndex={10000}
|
304
|
+
visible={this.state.left}
|
305
|
+
onHide={() => {this.setState({left: false})}}>
|
306
|
+
<p>This modal has position left.</p>
|
307
|
+
</Modal>
|
308
|
+
|
309
|
+
<Modal headerTemplate="Modal with position right"
|
310
|
+
position="right"
|
311
|
+
zIndex={10000}
|
312
|
+
visible={this.state.right}
|
313
|
+
onHide={() => {this.setState({right: false})}}>
|
314
|
+
<p>This modal has position right.</p>
|
315
|
+
</Modal>
|
316
|
+
</Markup.ReactMarkupPreview>
|
317
|
+
<Markup.ReactMarkupCode>{`
|
318
|
+
<Modal headerTemplate="Modal with position top"
|
319
|
+
position="top"
|
320
|
+
zIndex={10000}
|
321
|
+
visible={this.state.top}
|
322
|
+
onHide={() => {this.setState({top: false})}}>
|
323
|
+
<p>This modal has position top.</p>
|
324
|
+
</Modal>
|
325
|
+
|
326
|
+
<Modal headerTemplate="Modal with position bottom"
|
327
|
+
position="bottom"
|
328
|
+
zIndex={10000}
|
329
|
+
visible={this.state.bottom}
|
330
|
+
onHide={() => {this.setState({bottom: false})}}>
|
331
|
+
<p>This modal has position bottom.</p>
|
332
|
+
</Modal>
|
333
|
+
|
334
|
+
<Modal headerTemplate="Modal with position left"
|
335
|
+
position="left"
|
336
|
+
zIndex={10000}
|
337
|
+
visible={this.state.left}
|
338
|
+
onHide={() => {this.setState({left: false})}}>
|
339
|
+
<p>This modal has position left.</p>
|
340
|
+
</Modal>
|
341
|
+
|
342
|
+
<Modal headerTemplate="Modal with position right"
|
343
|
+
position="right"
|
344
|
+
zIndex={10000}
|
345
|
+
visible={this.state.right}
|
346
|
+
onHide={() => {this.setState({right: false})}}>
|
347
|
+
<p>This modal has position right.</p>
|
348
|
+
</Modal>
|
349
|
+
`}
|
350
|
+
</Markup.ReactMarkupCode>
|
351
|
+
</Markup.ReactMarkup>
|
225
352
|
|
226
353
|
<h3 className="docs-page__h3">Props</h3>
|
227
354
|
<PropsList>
|
228
355
|
<Prop name='id' isRequired={false} type='string' default='null' description='Unique identifier of the element' />
|
229
|
-
<Prop name='className' isRequired={false} type='string' default='null' description='
|
356
|
+
<Prop name='className' isRequired={false} type='string' default='null' description='To add class to the content of component' />
|
230
357
|
<Prop name='theme' isRequired={false} type='light | dark' default='light' description='Item style' />
|
231
358
|
<Prop name='size' isRequired={false} type='small | medium | large | x-large' default='/' description='Size of the modal. If not defined it will adapt to the width of the content.' />
|
359
|
+
<Prop name='position' isRequired={false} type="center | top | bottom | left | right | top-left | top-right | bottom-left | bottom-right" default='center' description='Position of the dialog.' />
|
232
360
|
<Prop name='visible' isRequired={true} type='boolean' default='false' description='Specifies the visibility of the dialog' />
|
361
|
+
<Prop name='zIndex' isRequired={true} type='number' default='false' description='zIndex of modal' />
|
362
|
+
<Prop name='contentPadding' isRequired={true} type="'none' | 'small' | 'medium' | 'large'" default='false' description='Padding of content' />
|
363
|
+
<Prop name='contentBg' isRequired={true} type="'default' | 'medium' | 'dark'" default='false' description='Background of content' />
|
233
364
|
<Prop name='headerTemplate' isRequired={false} type='element' default='null' description='Label of header' />
|
234
|
-
<Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately
|
365
|
+
<Prop name='footerTemplate' isRequired={false} type='element' default='null' description='Name of the footer template constant, created separately' />
|
235
366
|
<Prop name='closeOnEscape' isRequired={false} type='boolean' default='null' description='An array of objects to display' />
|
236
|
-
<Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen
|
367
|
+
<Prop name='maximized' isRequired={false} type='boolean' default='null' description='Creates a full-screen modal id set to true.' />
|
368
|
+
<Prop name='maximizable' isRequired={false} type='boolean' default='null' description='By clicking on button set full-screen modal and return on defoult size.' />
|
237
369
|
<Prop name='onShow' isRequired={false} type='function' default='null' description='Callback to invoke after modal is opened' />
|
238
370
|
<Prop name='onHide' isRequired={true} type='function' default='null' description='Callback to invoke after modal is closed' />
|
239
371
|
</PropsList>
|
package/package.json
CHANGED
@@ -2,13 +2,13 @@ import * as React from 'react';
|
|
2
2
|
import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
|
3
3
|
export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
|
4
4
|
interface IDatePickerBase {
|
5
|
-
disabled?: boolean;
|
6
5
|
dateFormat: string;
|
7
|
-
|
6
|
+
headerButtonBar?: Array<{
|
8
7
|
days: number;
|
9
8
|
label: string;
|
10
9
|
}>;
|
11
10
|
locale?: DatePickerLocaleSettings;
|
11
|
+
disabled?: boolean;
|
12
12
|
inlineLabel?: boolean;
|
13
13
|
required?: boolean;
|
14
14
|
fullWidth?: boolean;
|
@@ -139,9 +139,9 @@ var DatePicker = /** @class */ (function (_super) {
|
|
139
139
|
// updating internal state so a user can continue typing and enter a valid value
|
140
140
|
_this.setState({ value: event.value, valid: false });
|
141
141
|
}
|
142
|
-
}, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.
|
142
|
+
}, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () { return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
|
143
143
|
var label = _a.label, days = _a.days;
|
144
|
-
return (React.createElement("button", { key: i, className: "btn btn--
|
144
|
+
return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {
|
145
145
|
_this.props.onChange((0, addDays_1.default)(new Date(), days));
|
146
146
|
if (_this.instance != null && typeof _this.instance.hideOverlay === 'function') {
|
147
147
|
_this.instance.hideOverlay();
|
@@ -176,7 +176,7 @@ var DatePickerISO = /** @class */ (function (_super) {
|
|
176
176
|
else {
|
177
177
|
_this.props.onChange((0, format_1.default)(value, 'yyyy-MM-dd'));
|
178
178
|
}
|
179
|
-
}, disabled: this.props.disabled,
|
179
|
+
}, disabled: this.props.disabled, headerButtonBar: this.props.headerButtonBar, dateFormat: this.props.dateFormat, locale: this.props.locale, inlineLabel: this.props.inlineLabel, required: this.props.required, fullWidth: this.props.fullWidth, invalid: this.props.invalid, labelHidden: this.props.labelHidden, tabindex: this.props.tabindex, label: this.props.label, info: this.props.info, error: this.props.error }));
|
180
180
|
};
|
181
181
|
return DatePickerISO;
|
182
182
|
}(React.PureComponent));
|
@@ -46,7 +46,7 @@ var CoreLayout = /** @class */ (function (_super) {
|
|
46
46
|
return (React.createElement(_1.CoreLayoutContainer, null,
|
47
47
|
this.props.slideInMenu && (React.createElement(_1.CoreLayoutSlideInMenu, { menuId: this.props.menuId, menuOpen: this.props.menuOpen }, this.props.slideInMenu)),
|
48
48
|
this.props.topMenu && (React.createElement(_1.CoreLayoutTopMenu, { buttonAnimation: this.props.buttonAnimation, heading: this.props.heading, onClick: this.props.onClick, active: this.props.active, ariaControls: this.props.ariaControls }, this.props.topMenu)),
|
49
|
-
React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth }, this.props.children),
|
49
|
+
React.createElement(_1.CoreLayoutMain, { editorFullWidth: this.props.editorFullWidth, openPanel: this.props.openPanel }, this.props.children),
|
50
50
|
this.props.footer && (React.createElement(_1.CoreLayoutFooter, null, this.props.footer)),
|
51
51
|
this.props.overlay && (React.createElement(_1.CoreLayoutOverlay, null, this.props.overlay))));
|
52
52
|
};
|
@@ -49,7 +49,7 @@ var CoreLayoutMain = /** @class */ (function (_super) {
|
|
49
49
|
var classes = (0, classnames_1.default)('sd-content sd-content-wrapper', {
|
50
50
|
'sd-content-wrapper--editor-full': this.props.editorFullWidth,
|
51
51
|
});
|
52
|
-
return (React.createElement("section", { id: this.props.id, className: classes }, this.props.children));
|
52
|
+
return (React.createElement("section", { id: this.props.id, className: classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '') }, this.props.children));
|
53
53
|
};
|
54
54
|
return CoreLayoutMain;
|
55
55
|
}(React.PureComponent));
|
@@ -47,9 +47,10 @@ var ContentListItem = /** @class */ (function (_super) {
|
|
47
47
|
_this.delay = 200;
|
48
48
|
_this.prevent = false;
|
49
49
|
_this.onSingleClick = function () {
|
50
|
+
var selection = window.getSelection();
|
50
51
|
_this.timer = setTimeout(function () {
|
51
|
-
if (!_this.prevent) {
|
52
|
-
if (
|
52
|
+
if (!_this.prevent && _this.props.onClick && selection) {
|
53
|
+
if (selection.toString().length < 1) {
|
53
54
|
_this.props.onClick();
|
54
55
|
}
|
55
56
|
}
|