superdesk-ui-framework 3.0.1-beta.8 → 3.0.1
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/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/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_big-icon-font.scss +1 -1
- package/app/styles/_buttons.scss +11 -6
- package/app/styles/_content-divider.scss +63 -8
- package/app/styles/_helpers.scss +24 -1
- package/app/styles/_icon-font.scss +11 -10
- package/app/styles/_labels.scss +0 -1
- package/app/styles/_master-desk.scss +5 -4
- package/app/styles/_modals.scss +7 -3
- package/app/styles/_normalize.scss +4 -0
- package/app/styles/_sd-tag-input.scss +56 -2
- package/app/styles/_simple-list.scss +0 -2
- package/app/styles/_table-list.scss +116 -12
- package/app/styles/app.scss +3 -0
- package/app/styles/components/_list-item.scss +23 -16
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/components/_sd-comment-box.scss +8 -4
- package/app/styles/components/_sd-editor-popup.scss +4 -4
- package/app/styles/components/_sd-media-carousel.scss +37 -2
- package/app/styles/components/_sd-pagination.scss +41 -0
- package/app/styles/components/_sd-photo-preview.scss +2 -2
- package/app/styles/components/_subnav.scss +470 -470
- package/app/styles/design-tokens/_new-colors.scss +29 -12
- package/app/styles/dropdowns/_basic-dropdown.scss +6 -0
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +230 -61
- package/app/styles/grids/_grid-layout.scss +13 -14
- package/app/styles/interface-elements/_side-panel.scss +1 -1
- package/app/styles/layout/_editor.scss +6 -0
- package/app/styles/menus/_sd-sidebar-menu.scss +1 -1
- package/app/styles/primereact/_pr-datepicker.scss +16 -2
- package/app/styles/primereact/_pr-dialog.scss +9 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app/styles/variables/_colors.scss +47 -47
- package/app/template/search-handler.html +2 -2
- package/app-typescript/components/ContentDivider.tsx +3 -0
- package/app-typescript/components/DatePicker.tsx +8 -9
- package/app-typescript/components/Dropdown.tsx +127 -82
- package/app-typescript/components/DurationInput.tsx +39 -14
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Input.tsx +4 -4
- package/app-typescript/components/Label.tsx +17 -1
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +2 -1
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +21 -2
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
- package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
- package/app-typescript/components/Layouts/CoreLayout.tsx +3 -1
- package/app-typescript/components/Layouts/CoreLayoutMain.tsx +10 -1
- package/app-typescript/components/Lists/ContentList.tsx +64 -30
- package/app-typescript/components/Lists/TableList.tsx +255 -53
- package/app-typescript/components/Menu.tsx +2 -2
- package/app-typescript/components/Modal.tsx +6 -2
- package/app-typescript/components/MultiSelect.tsx +1 -1
- package/app-typescript/components/NavButton.tsx +2 -1
- package/app-typescript/components/Navigation/SideBarMenu.tsx +30 -4
- package/app-typescript/components/SearchBar.tsx +11 -3
- package/app-typescript/components/Spacer.tsx +87 -0
- package/app-typescript/components/TimePicker.tsx +2 -13
- package/app-typescript/components/TreeSelect.tsx +286 -180
- package/app-typescript/index.ts +1 -0
- package/dist/examples.bundle.css +110 -71
- package/dist/examples.bundle.js +23848 -21661
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
- package/dist/playgrounds/react-playgrounds/Index.tsx +1 -0
- package/dist/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +226 -25
- package/dist/react/ContentDivider.tsx +22 -18
- package/dist/react/ContentList.tsx +188 -12
- package/dist/react/DatePicker.tsx +50 -2
- package/dist/react/Dropdowns.tsx +580 -48
- package/dist/react/DurationInput.tsx +7 -3
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/Modal.tsx +154 -22
- package/dist/react/MultiSelect.tsx +5 -5
- package/dist/react/NavButtons.tsx +31 -1
- package/dist/react/TableList.tsx +52 -139
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/react/TreeSelect.tsx +167 -176
- 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 +1100 -407
- package/dist/superdesk-ui.bundle.js +6591 -4035
- package/dist/vendor.bundle.js +27 -27
- package/examples/css/docs-page.css +4 -4
- package/examples/index.js +4 -0
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +505 -2
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +1 -0
- package/examples/pages/playgrounds/react-playgrounds/Multiedit.tsx +321 -0
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +17 -19
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +22 -23
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +226 -25
- package/examples/pages/react/ContentDivider.tsx +22 -18
- package/examples/pages/react/ContentList.tsx +188 -12
- package/examples/pages/react/DatePicker.tsx +50 -2
- package/examples/pages/react/Dropdowns.tsx +580 -48
- package/examples/pages/react/DurationInput.tsx +7 -3
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/Modal.tsx +154 -22
- package/examples/pages/react/MultiSelect.tsx +5 -5
- package/examples/pages/react/NavButtons.tsx +31 -1
- package/examples/pages/react/TableList.tsx +52 -139
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/examples/pages/react/TreeSelect.tsx +167 -176
- package/package.json +3 -5
- package/react/components/ContentDivider.d.ts +1 -0
- package/react/components/ContentDivider.js +2 -0
- package/react/components/DatePicker.d.ts +2 -2
- package/react/components/DatePicker.js +3 -3
- package/react/components/Dropdown.d.ts +6 -5
- package/react/components/Dropdown.js +57 -30
- package/react/components/DurationInput.d.ts +1 -1
- package/react/components/DurationInput.js +46 -17
- package/react/components/Form/FormLabel.d.ts +4 -1
- package/react/components/Form/FormLabel.js +9 -3
- package/react/components/Form/InputBase.d.ts +0 -1
- package/react/components/Form/InputBase.js +15 -1
- package/react/components/Input.d.ts +3 -3
- package/react/components/Input.js +2 -1
- package/react/components/Label.d.ts +1 -0
- package/react/components/Label.js +17 -2
- package/react/components/Layouts/AuthoringFrame.d.ts +1 -0
- package/react/components/Layouts/AuthoringFrame.js +1 -1
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +9 -2
- package/react/components/Layouts/AuthoringFrameRightBar.js +14 -3
- package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
- package/react/components/Layouts/AuthoringMain.js +1 -1
- package/react/components/Layouts/CoreLayout.d.ts +2 -0
- package/react/components/Layouts/CoreLayout.js +1 -1
- package/react/components/Layouts/CoreLayoutMain.d.ts +2 -0
- package/react/components/Layouts/CoreLayoutMain.js +8 -1
- package/react/components/Lists/ContentList.d.ts +6 -0
- package/react/components/Lists/ContentList.js +42 -16
- package/react/components/Lists/TableList.d.ts +30 -8
- package/react/components/Lists/TableList.js +127 -24
- package/react/components/Menu.js +1 -1
- package/react/components/Modal.d.ts +2 -0
- package/react/components/Modal.js +3 -3
- package/react/components/MultiSelect.d.ts +40 -0
- package/react/components/MultiSelect.js +70 -0
- package/react/components/NavButton.d.ts +1 -1
- package/react/components/Navigation/SideBarMenu.d.ts +6 -0
- package/react/components/Navigation/SideBarMenu.js +19 -2
- package/react/components/SearchBar.d.ts +1 -1
- package/react/components/SearchBar.js +15 -7
- package/react/components/TimePicker.d.ts +1 -5
- package/react/components/TimePicker.js +3 -7
- package/react/components/TreeSelect.d.ts +12 -5
- package/react/components/TreeSelect.js +189 -116
- package/react/index.d.ts +1 -0
- package/react/index.js +3 -0
- package/patches/@superdesk+primereact+5.0.2-4.patch +0 -66
@@ -129,14 +129,18 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
129
129
|
}
|
130
130
|
}
|
131
131
|
|
132
|
-
if (
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
132
|
+
if (this.hourRef.current.value.length === 2
|
133
|
+
&& this.minuteRef.current.value.length === 2
|
134
|
+
&& this.secondRef.current.value.length === 2) {
|
135
|
+
if ((this.props.hours !== prevProps.hours)
|
136
|
+
|| (this.props.minutes !== prevProps.minutes)
|
137
|
+
|| (this.props.seconds !== prevProps.seconds)) {
|
138
|
+
this.setState({
|
139
|
+
hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
|
140
|
+
minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
|
141
|
+
seconds: this.stateUpdate('seconds', this.props.seconds),
|
142
|
+
});
|
143
|
+
}
|
140
144
|
}
|
141
145
|
}
|
142
146
|
|
@@ -241,11 +245,13 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
241
245
|
|
242
246
|
handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds') {
|
243
247
|
let stateClone: IState = {};
|
244
|
-
if (event.target.value.length
|
245
|
-
if (event.target.selectionStart === 1
|
246
|
-
stateClone[state] = event.target.value.slice(0, 1)
|
248
|
+
if (event.target.value.length > 2) {
|
249
|
+
if (event.target.selectionStart === 1) {
|
250
|
+
stateClone[state] = event.target.value.slice(0, 1);
|
251
|
+
} else if (event.target.selectionStart === 2) {
|
252
|
+
stateClone[state] = event.target.value.slice(1, 2);
|
247
253
|
} else {
|
248
|
-
stateClone[state] = event.target.value.slice(
|
254
|
+
stateClone[state] = event.target.value.slice(2, 3);
|
249
255
|
}
|
250
256
|
} else {
|
251
257
|
stateClone[state] = event.target.value;
|
@@ -299,6 +305,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
299
305
|
className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
|
300
306
|
type='text'
|
301
307
|
id='hours'
|
308
|
+
autoComplete="off"
|
302
309
|
max={99}
|
303
310
|
min={0}
|
304
311
|
ref={this.hourRef}
|
@@ -319,6 +326,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
319
326
|
className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
|
320
327
|
type='text'
|
321
328
|
id='minutes'
|
329
|
+
autoComplete="off"
|
322
330
|
ref={this.minuteRef}
|
323
331
|
value={this.state.minutes}
|
324
332
|
disabled={this.props.disabled}
|
@@ -337,6 +345,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
337
345
|
className='duration-input'
|
338
346
|
type='text'
|
339
347
|
id='seconds'
|
348
|
+
autoComplete="off"
|
340
349
|
ref={this.secondRef}
|
341
350
|
value={this.state.seconds}
|
342
351
|
disabled={this.props.disabled}
|
@@ -356,7 +365,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
356
365
|
}
|
357
366
|
}
|
358
367
|
|
359
|
-
export function getDurationString(seconds: number) {
|
368
|
+
export function getDurationString(seconds: number, minSections: 1 | 2 | 3 = 1) {
|
360
369
|
function zeroPad(value: number | string) {
|
361
370
|
if (value.toString().length === 1 || value === 0) {
|
362
371
|
return `0${value}`;
|
@@ -371,5 +380,21 @@ export function getDurationString(seconds: number) {
|
|
371
380
|
let minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
372
381
|
let second = zeroPad(Math.floor(seconds % 60));
|
373
382
|
|
374
|
-
|
383
|
+
if (minSections === 3) {
|
384
|
+
return `${hour}h ${minute}m ${second}s`;
|
385
|
+
} else if (minSections === 2) {
|
386
|
+
if (Number(hour) > 0) {
|
387
|
+
return `${hour}h ${minute}m ${second}s`;
|
388
|
+
} else {
|
389
|
+
return `${minute}m ${second}s`;
|
390
|
+
}
|
391
|
+
} else {
|
392
|
+
if (Number(hour) === 0 && Number(minute) === 0) {
|
393
|
+
return `${second}s`;
|
394
|
+
} else if (Number(hour) === 0 && Number(minute) > 0) {
|
395
|
+
return `${minute}m ${second}s`;
|
396
|
+
} else {
|
397
|
+
return `${hour}h ${minute}m ${second}s`;
|
398
|
+
}
|
399
|
+
}
|
375
400
|
}
|
@@ -2,15 +2,22 @@ import * as React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
3
3
|
|
4
4
|
interface IProps {
|
5
|
-
style?: 'normal' | 'light';
|
5
|
+
style?: 'normal' | 'light' | 'boxed';
|
6
|
+
state?: 'default' | 'focused' | 'warning';
|
6
7
|
text: string;
|
7
8
|
forId?: string;
|
9
|
+
required?: boolean;
|
10
|
+
invalid?: boolean;
|
8
11
|
}
|
9
12
|
|
10
13
|
export class FormLabel extends React.PureComponent<IProps> {
|
11
14
|
render() {
|
12
15
|
let classes = classNames('form-label', {
|
13
16
|
'form-label--light': this.props.style === 'light',
|
17
|
+
'form-label--boxed': this.props.style === 'boxed',
|
18
|
+
'form-label--required': this.props.required,
|
19
|
+
'form-label--invalid': this.props.invalid,
|
20
|
+
[`form-label--${this.props.state}`]: this.props.state !== 'default' && this.props.state !== undefined,
|
14
21
|
|
15
22
|
});
|
16
23
|
return (
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import classNames from 'classnames';
|
2
3
|
|
3
4
|
interface IPropsBase {
|
4
5
|
error?: string;
|
@@ -8,7 +9,7 @@ interface IPropsBase {
|
|
8
9
|
tabIndex?: number;
|
9
10
|
fullWidth?: boolean;
|
10
11
|
boxedStyle?: boolean;
|
11
|
-
boxedLable?: boolean;
|
12
|
+
// boxedLable?: boolean;
|
12
13
|
placeholder?: string;
|
13
14
|
htmlId?: string;
|
14
15
|
id?: string;
|
@@ -70,8 +71,17 @@ export class InputBase extends React.Component<IProps, IState> {
|
|
70
71
|
}
|
71
72
|
|
72
73
|
render() {
|
74
|
+
let classes = classNames('sd-input__input', {
|
75
|
+
'sd-input__input--boxed-style': this.props.boxedStyle,
|
76
|
+
'sd-input__input--required': this.props.required,
|
77
|
+
'sd-input__input--invalid': this.props.invalid,
|
78
|
+
'sd-input__input--disabled': this.props.disabled,
|
79
|
+
'sd-input__input--medium': this.props.size === undefined,
|
80
|
+
[`sd-input__input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
|
81
|
+
|
82
|
+
});
|
73
83
|
return (
|
74
|
-
<input className=
|
84
|
+
<input className={classes}
|
75
85
|
type={this.props.type ?? 'text'}
|
76
86
|
id={this.props.htmlId}
|
77
87
|
value={this.state.value}
|
@@ -23,19 +23,19 @@ interface IPropsBase {
|
|
23
23
|
|
24
24
|
interface IPropsText extends IPropsBase {
|
25
25
|
type: 'text';
|
26
|
-
value
|
26
|
+
value?: string;
|
27
27
|
onChange(newValue: string): void;
|
28
28
|
}
|
29
29
|
|
30
30
|
interface IPropsPassword extends IPropsBase {
|
31
31
|
type: 'password';
|
32
|
-
value
|
32
|
+
value?: string;
|
33
33
|
onChange(newValue: string): void;
|
34
34
|
}
|
35
35
|
|
36
36
|
interface IPropsNumber extends IPropsBase {
|
37
37
|
type: 'number';
|
38
|
-
value
|
38
|
+
value?: number;
|
39
39
|
onChange(newValue: number): void;
|
40
40
|
}
|
41
41
|
|
@@ -75,7 +75,7 @@ export class Input extends React.Component<IProps, IState> {
|
|
75
75
|
|
76
76
|
componentDidUpdate(prevProps: any) {
|
77
77
|
if (prevProps.value !== this.props.value) {
|
78
|
-
this.setState({value: this.props.value});
|
78
|
+
this.setState({value: this.props.value ?? ''});
|
79
79
|
}
|
80
80
|
}
|
81
81
|
|
@@ -66,7 +66,10 @@ export class Label extends React.PureComponent<IProps> {
|
|
66
66
|
);
|
67
67
|
} else {
|
68
68
|
return (
|
69
|
-
<span className={classes}
|
69
|
+
<span className={classes}
|
70
|
+
style={this.props.hexColor
|
71
|
+
? {backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor)}
|
72
|
+
: undefined}>
|
70
73
|
{this.props.text}
|
71
74
|
</span>
|
72
75
|
);
|
@@ -74,3 +77,16 @@ export class Label extends React.PureComponent<IProps> {
|
|
74
77
|
}
|
75
78
|
}
|
76
79
|
}
|
80
|
+
|
81
|
+
export function getTextColor(backgroundColor: string): 'black' | 'white' | undefined {
|
82
|
+
if (backgroundColor) {
|
83
|
+
const r = parseInt(backgroundColor.substr(1, 2), 16);
|
84
|
+
const g = parseInt(backgroundColor.substr(3, 2), 16);
|
85
|
+
const b = parseInt(backgroundColor.substr(5, 2), 16);
|
86
|
+
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
|
87
|
+
|
88
|
+
return (yiq >= 128) ? 'black' : 'white';
|
89
|
+
} else {
|
90
|
+
return;
|
91
|
+
}
|
92
|
+
}
|
@@ -16,6 +16,7 @@ interface IProps {
|
|
16
16
|
header?: React.ReactNode;
|
17
17
|
main?: React.ReactNode;
|
18
18
|
sideBar?: React.ReactNode;
|
19
|
+
sideBarClosed?: boolean;
|
19
20
|
sidePanel?: React.ReactNode;
|
20
21
|
sideOverlay?: React.ReactNode;
|
21
22
|
sideOverlayOpen?: boolean;
|
@@ -56,7 +57,7 @@ export class AuthoringFrame extends React.PureComponent<IProps> {
|
|
56
57
|
</AuthoringFrameSidePanelOverlay>
|
57
58
|
)}
|
58
59
|
{this.props.sideBar && (
|
59
|
-
<AuthoringFrameRightBar>
|
60
|
+
<AuthoringFrameRightBar closed={this.props.sideBarClosed}>
|
60
61
|
{this.props.sideBar}
|
61
62
|
</AuthoringFrameRightBar>
|
62
63
|
)}
|
@@ -2,12 +2,31 @@ import * as React from 'react';
|
|
2
2
|
|
3
3
|
interface IProps {
|
4
4
|
children?: React.ReactNode;
|
5
|
+
closed?: boolean;
|
5
6
|
}
|
6
7
|
|
7
|
-
|
8
|
+
interface IState {
|
9
|
+
children?: React.ReactNode;
|
10
|
+
closed?: boolean;
|
11
|
+
}
|
12
|
+
|
13
|
+
export class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
|
14
|
+
constructor(props: IProps) {
|
15
|
+
super(props);
|
16
|
+
this.state = {
|
17
|
+
closed: this.props.closed ? this.props.closed : false,
|
18
|
+
};
|
19
|
+
}
|
20
|
+
componentDidUpdate(prevProps: Readonly<IProps>): void {
|
21
|
+
if (prevProps.closed !== this.props.closed) {
|
22
|
+
this.setState({
|
23
|
+
closed: this.props.closed,
|
24
|
+
});
|
25
|
+
}
|
26
|
+
}
|
8
27
|
render() {
|
9
28
|
return (
|
10
|
-
<div className="sd-editor-grid__sidetabs-bar">
|
29
|
+
!this.state.closed && <div className="sd-editor-grid__sidetabs-bar">
|
11
30
|
{this.props.children}
|
12
31
|
</div>
|
13
32
|
);
|
@@ -31,8 +31,10 @@ export class AuthoringMain extends React.PureComponent<IProps> {
|
|
31
31
|
)}
|
32
32
|
<AuthoringMainContent>
|
33
33
|
{this.props.authoringHeader && (
|
34
|
-
<AuthoringInnerHeader
|
35
|
-
{this.props.
|
34
|
+
<AuthoringInnerHeader
|
35
|
+
headerPadding={this.props.headerPadding}
|
36
|
+
collapsed={this.props.headerCollapsed}>
|
37
|
+
{this.props.authoringHeader}
|
36
38
|
</AuthoringInnerHeader>
|
37
39
|
)}
|
38
40
|
{this.props.authoringBookmarks && (
|
@@ -22,6 +22,8 @@ interface IProps {
|
|
22
22
|
menuId?: string;
|
23
23
|
ariaControls?: string;
|
24
24
|
buttonAnimation?: 'spin' | 'squeeze' | 'none';
|
25
|
+
editorFullWidth?: boolean;
|
26
|
+
openPanel?: boolean;
|
25
27
|
}
|
26
28
|
|
27
29
|
export class CoreLayout extends React.PureComponent<IProps> {
|
@@ -43,7 +45,7 @@ export class CoreLayout extends React.PureComponent<IProps> {
|
|
43
45
|
{this.props.topMenu}
|
44
46
|
</CoreLayoutTopMenu>
|
45
47
|
)}
|
46
|
-
<CoreLayoutMain>
|
48
|
+
<CoreLayoutMain editorFullWidth={this.props.editorFullWidth} openPanel={this.props.openPanel}>
|
47
49
|
{this.props.children}
|
48
50
|
</CoreLayoutMain>
|
49
51
|
{this.props.footer && (
|
@@ -1,14 +1,23 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import classNames from 'classnames';
|
2
3
|
|
3
4
|
interface IProps {
|
4
5
|
children?: React.ReactNode;
|
5
6
|
id?: string;
|
7
|
+
editorFullWidth?: boolean;
|
8
|
+
openPanel?: boolean;
|
6
9
|
}
|
7
10
|
|
8
11
|
export class CoreLayoutMain extends React.PureComponent<IProps> {
|
9
12
|
render() {
|
13
|
+
const classes = classNames('sd-content sd-content-wrapper', {
|
14
|
+
'sd-content-wrapper--editor-full': this.props.editorFullWidth,
|
15
|
+
},
|
16
|
+
);
|
10
17
|
return (
|
11
|
-
<section
|
18
|
+
<section
|
19
|
+
id={this.props.id}
|
20
|
+
className={classes + (this.props.openPanel ? ' sd-content-wrapper--editor-full' : '')}>
|
12
21
|
{this.props.children}
|
13
22
|
</section>
|
14
23
|
);
|
@@ -4,7 +4,7 @@ import classNames from 'classnames';
|
|
4
4
|
interface IPropsItem {
|
5
5
|
action?: React.ReactNode;
|
6
6
|
locked?: boolean;
|
7
|
-
itemColum: Array<{itemRow: Array<{content: any}>, border?: boolean, fullwidth?: boolean}>;
|
7
|
+
itemColum: Array<{ itemRow: Array<{ content: any }>, border?: boolean, fullwidth?: boolean }>;
|
8
8
|
activated?: boolean;
|
9
9
|
selected?: boolean;
|
10
10
|
archived?: boolean;
|
@@ -14,38 +14,72 @@ interface IPropsItem {
|
|
14
14
|
}
|
15
15
|
|
16
16
|
class ContentListItem extends React.PureComponent<IPropsItem> {
|
17
|
+
|
18
|
+
private timer: any;
|
19
|
+
private delay = 200;
|
20
|
+
private prevent = false;
|
21
|
+
|
22
|
+
onSingleClick = () => {
|
23
|
+
let selection = window.getSelection();
|
24
|
+
this.timer = setTimeout(() => {
|
25
|
+
if (!this.prevent && this.props.onClick && selection) {
|
26
|
+
if (selection.toString().length < 1) {
|
27
|
+
this.props.onClick();
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}, this.delay);
|
31
|
+
}
|
32
|
+
|
33
|
+
onDoubleClick = () => {
|
34
|
+
clearTimeout(this.timer);
|
35
|
+
this.prevent = true;
|
36
|
+
if (this.props.onDoubleClick) {
|
37
|
+
this.props.onDoubleClick();
|
38
|
+
}
|
39
|
+
setTimeout(() => {
|
40
|
+
this.prevent = false;
|
41
|
+
}, this.delay);
|
42
|
+
}
|
43
|
+
|
44
|
+
onActionMenuClick = (event: React.MouseEvent<HTMLElement>) => {
|
45
|
+
event.preventDefault();
|
46
|
+
event.stopPropagation();
|
47
|
+
}
|
48
|
+
|
17
49
|
render() {
|
18
|
-
let classes = classNames('sd-list-item sd-
|
50
|
+
let classes = classNames('sd-list-item sd-shadow--z1', {
|
19
51
|
'sd-list-item--activated': this.props.activated,
|
20
52
|
'sd-list-item--selected': this.props.selected,
|
21
53
|
'fetched': this.props.archived,
|
22
54
|
'actioning': this.props.loading,
|
23
|
-
|
55
|
+
});
|
24
56
|
|
25
57
|
return (
|
26
|
-
<div
|
27
|
-
|
28
|
-
|
58
|
+
<div
|
59
|
+
role='listitem'
|
60
|
+
className={classes}
|
61
|
+
onClick={this.onSingleClick}
|
62
|
+
onDoubleClick={this.onDoubleClick}>
|
63
|
+
{this.props.locked
|
29
64
|
? <div className="sd-list-item__border sd-list-item__border--locked"></div>
|
30
65
|
: <div className="sd-list-item__border"></div>}
|
31
|
-
|
32
|
-
|
66
|
+
{this.props.itemColum.map((item, index) => {
|
67
|
+
return <div
|
33
68
|
className={`sd-list-item__column ${item.fullwidth && 'sd-list-item__column--grow'} ${!item.border && 'sd-list-item__column--no-border'}`}
|
34
69
|
key={index}>
|
35
70
|
{item.itemRow.map((e, i) => {
|
36
71
|
return (
|
37
72
|
item.itemRow.length <= 1
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
73
|
+
? <React.Fragment key={i}>{e.content}</React.Fragment>
|
74
|
+
: <div className="sd-list-item__row" key={i}>
|
75
|
+
{e.content}
|
76
|
+
</div>
|
42
77
|
);
|
43
78
|
})}
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
</div>
|
79
|
+
</div>;
|
80
|
+
})}
|
81
|
+
<div className="sd-list-item__action-menu" onClick={this.onActionMenuClick}>
|
82
|
+
{this.props.action}
|
49
83
|
</div>
|
50
84
|
</div>
|
51
85
|
);
|
@@ -67,7 +101,7 @@ interface IProps {
|
|
67
101
|
}
|
68
102
|
|
69
103
|
interface IItemArray {
|
70
|
-
itemRow: Array<{content: React.ReactNode}>;
|
104
|
+
itemRow: Array<{ content: React.ReactNode }>;
|
71
105
|
border?: boolean;
|
72
106
|
fullwidth?: boolean;
|
73
107
|
}
|
@@ -76,21 +110,21 @@ class ContentList extends React.PureComponent<IProps> {
|
|
76
110
|
render() {
|
77
111
|
let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
|
78
112
|
return (
|
79
|
-
<
|
113
|
+
<div role='list' className={classes}>
|
80
114
|
{this.props.items.map((item, index) => {
|
81
115
|
return <ContentListItem
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
116
|
+
key={index}
|
117
|
+
itemColum={item.itemColum}
|
118
|
+
locked={item.locked}
|
119
|
+
action={item.action}
|
120
|
+
loading={item.loading}
|
121
|
+
activated={item.activated}
|
122
|
+
selected={item.selected}
|
123
|
+
archived={item.archived}
|
124
|
+
onClick={item.onClick}
|
125
|
+
onDoubleClick={item.onDoubleClick} />;
|
92
126
|
})}
|
93
|
-
</
|
127
|
+
</div>
|
94
128
|
);
|
95
129
|
}
|
96
130
|
}
|