superdesk-ui-framework 3.0.73 → 3.0.75
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/styles/_simple-list.scss +13 -1
- package/app/styles/components/_list-item.scss +4 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +14 -1
- package/app/styles/form-elements/_inputs.scss +53 -11
- package/app-typescript/components/FormLabel.tsx +1 -1
- package/app-typescript/components/Lists/SimpleList.tsx +3 -0
- package/app-typescript/components/Lists/TableList.tsx +5 -0
- package/app-typescript/components/Select.tsx +13 -11
- package/app-typescript/components/SingleAndDoubleClickFunction.tsx +1 -1
- package/dist/examples.bundle.js +164 -6
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +284 -1
- package/dist/superdesk-ui.bundle.css +68 -13
- package/dist/superdesk-ui.bundle.js +8 -5
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +284 -1
- package/package.json +1 -1
- package/react/components/FormLabel.js +1 -1
- package/react/components/Lists/SimpleList.d.ts +1 -0
- package/react/components/Lists/SimpleList.js +1 -0
- package/react/components/Lists/TableList.d.ts +2 -0
- package/react/components/Lists/TableList.js +3 -2
- package/react/components/Select.js +2 -1
- package/react/components/SingleAndDoubleClickFunction.js +1 -1
@@ -12,13 +12,25 @@ $simple-list-border-color: $neutral-border-color;
|
|
12
12
|
display: flex;
|
13
13
|
flex-direction: row;
|
14
14
|
align-items: center;
|
15
|
-
gap:
|
15
|
+
gap: var(--space--1);
|
16
16
|
color: var(--color-text);
|
17
17
|
|
18
18
|
[class^="icon-"], [class*=" icon-"] {
|
19
19
|
flex-grow: 0;
|
20
20
|
flex-shrink: 0;
|
21
21
|
}
|
22
|
+
&.simple-list__item--gap-none {
|
23
|
+
gap: 0;
|
24
|
+
}
|
25
|
+
&.simple-list__item--gap-small {
|
26
|
+
gap: var(--space-0-5);
|
27
|
+
}
|
28
|
+
&.simple-list__item--gap-medium {
|
29
|
+
gap: var(--space-1);
|
30
|
+
}
|
31
|
+
&.simple-list__item--gap-large {
|
32
|
+
gap: var(--space-1-5);
|
33
|
+
}
|
22
34
|
}
|
23
35
|
|
24
36
|
.simple-list__item--stacked {
|
@@ -11,6 +11,9 @@
|
|
11
11
|
--space--3: calc(3 * var(--base-increment)); // 24px;
|
12
12
|
--space--4: calc(4 * var(--base-increment)); // 32px;
|
13
13
|
--space--5: calc(5 * var(--base-increment)); // 40px;
|
14
|
+
--space--6: calc(6 * var(--base-increment)); // 48px;
|
15
|
+
--space--7: calc(7 * var(--base-increment)); // 56px;
|
16
|
+
--space--8: calc(8 * var(--base-increment)); // 64px;
|
14
17
|
|
15
18
|
--gap--none: 0; // 0px
|
16
19
|
--gap--x-small: 0.4rem; // 4px
|
@@ -50,6 +53,11 @@
|
|
50
53
|
|
51
54
|
// TEXT SIZE
|
52
55
|
--text-size--base: 1rem;
|
56
|
+
--text-size-x-small: calc(var(--text-size--base) * 1.2); // 12px;
|
57
|
+
--text-size-small: calc(var(--text-size--base) * 1.4); // 14px;
|
58
|
+
--text-size-medium: calc(var(--text-size--base) * 1.6); // 16px;
|
59
|
+
--text-size-large: calc(var(--text-size--base) * 2); // 20px;
|
60
|
+
|
53
61
|
|
54
62
|
// SHADOW
|
55
63
|
--sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
@@ -57,15 +65,20 @@
|
|
57
65
|
--sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
58
66
|
--sd-shadow--z4: 0 0 0 1px var(--sd-shadow-outline), 0 2px 10px hsla(0, 0%, 0%, 0.2), 0 6px 16px hsla(0, 0%, 0%, 0.3), 0 0 1px hsla(0, 0%, 0%, 0.1);
|
59
67
|
|
60
|
-
|
61
68
|
// DROP-SHADOW Filter
|
62
69
|
--sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
|
63
70
|
--sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
64
71
|
--sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
65
72
|
--sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
|
66
73
|
|
74
|
+
// FORM ELEMENTS
|
75
|
+
// Size
|
76
|
+
--form-element-height-small: var(--space--3);
|
77
|
+
--form-element-height-medium: var(--space--4);
|
78
|
+
--form-element-height-large: var(--space--5);
|
67
79
|
}
|
68
80
|
|
81
|
+
|
69
82
|
:root,
|
70
83
|
[data-theme="light-ui"] {
|
71
84
|
--sd-shadow-outline: hsla(0, 0%, 0%, 0);
|
@@ -704,7 +704,7 @@
|
|
704
704
|
@include Line-input-base;
|
705
705
|
display: block;
|
706
706
|
position: relative;
|
707
|
-
padding-inline-end:
|
707
|
+
padding-inline-end: var(--space--3);
|
708
708
|
min-width: 5rem;
|
709
709
|
cursor: pointer;
|
710
710
|
|
@@ -804,23 +804,30 @@
|
|
804
804
|
&.sd-input--is-select {
|
805
805
|
&::after {
|
806
806
|
position: relative;
|
807
|
-
|
807
|
+
font-family: 'sd_icons';
|
808
|
+
content: "\e64b";
|
808
809
|
grid-row: 2/3;
|
809
810
|
grid-column: 2/4;
|
811
|
+
--icon-base-size: 14px !important;
|
812
|
+
width: var(--icon-base-size);
|
813
|
+
height: var(--icon-base-size);
|
814
|
+
line-height: var(--icon-base-size);
|
815
|
+
font-size: var(--icon-base-size);
|
816
|
+
speak: none;
|
817
|
+
font-style: normal;
|
818
|
+
font-weight: normal;
|
819
|
+
font-variant: normal;
|
820
|
+
text-transform: none;
|
821
|
+
color: var(--color-icon-default);
|
822
|
+
-webkit-font-smoothing: antialiased;
|
810
823
|
align-self: center;
|
811
824
|
justify-self: flex-end;
|
812
825
|
display: inline-block;
|
813
|
-
|
814
|
-
height: 0;
|
815
|
-
margin-inline-end: 1rem;
|
816
|
-
vertical-align: middle;
|
817
|
-
border-inline-start: 0.4rem solid transparent;
|
818
|
-
border-inline-end: 0.4rem solid transparent;
|
819
|
-
border-block-start: 0.4rem solid var(--color-text);
|
826
|
+
margin-inline-end: var(--space--1);
|
820
827
|
pointer-events: none;
|
821
|
-
opacity: 0.4;
|
822
|
-
content: "";
|
828
|
+
opacity: 0.4;
|
823
829
|
z-index: 0;
|
830
|
+
transition: opacity 0.2s ease;
|
824
831
|
}
|
825
832
|
|
826
833
|
&:hover {
|
@@ -829,6 +836,41 @@
|
|
829
836
|
}
|
830
837
|
}
|
831
838
|
}
|
839
|
+
.sd-input__select-caret-wrapper {
|
840
|
+
position: relative;
|
841
|
+
display: block;
|
842
|
+
&::after {
|
843
|
+
--icon-base-size: 14px !important;
|
844
|
+
font-family: 'sd_icons';
|
845
|
+
content: "\e64b";
|
846
|
+
position: absolute;
|
847
|
+
inset-block-start: 10px;
|
848
|
+
inset-inline-end: 0;
|
849
|
+
width: var(--icon-base-size);
|
850
|
+
height: var(--icon-base-size);
|
851
|
+
line-height: var(--icon-base-size);
|
852
|
+
font-size: var(--icon-base-size);
|
853
|
+
speak: none;
|
854
|
+
font-style: normal;
|
855
|
+
font-weight: normal;
|
856
|
+
font-variant: normal;
|
857
|
+
text-transform: none;
|
858
|
+
color: var(--color-text);
|
859
|
+
-webkit-font-smoothing: antialiased;
|
860
|
+
margin-inline-end: var(--space--1);
|
861
|
+
pointer-events: none;
|
862
|
+
opacity: 0.6;
|
863
|
+
z-index: 0;
|
864
|
+
transition: opacity 0.2s ease;
|
865
|
+
}
|
866
|
+
|
867
|
+
&:hover {
|
868
|
+
&::after {
|
869
|
+
opacity: 1;
|
870
|
+
}
|
871
|
+
}
|
872
|
+
}
|
873
|
+
|
832
874
|
|
833
875
|
.sd-input__message-box {
|
834
876
|
grid-row: 3/4;
|
@@ -13,6 +13,7 @@ interface IProps {
|
|
13
13
|
interface IPropsItem {
|
14
14
|
stacked?: boolean;
|
15
15
|
justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
|
16
|
+
gap?: 'none' | 'small' | 'medium' | 'large';
|
16
17
|
id?: string;
|
17
18
|
}
|
18
19
|
|
@@ -23,6 +24,8 @@ class SimpleListItem extends React.PureComponent<IPropsItem> {
|
|
23
24
|
'simple-list__item--justify-flex-start': this.props.justify === undefined,
|
24
25
|
[`simple-list__item--justify-${this.props.justify}`]:
|
25
26
|
this.props.justify || this.props.justify !== undefined,
|
27
|
+
[`simple-list__item--gap-${this.props.gap}`]:
|
28
|
+
this.props.gap || this.props.gap !== undefined,
|
26
29
|
});
|
27
30
|
return (
|
28
31
|
<li className={classes} id={this.props.id || undefined}>
|
@@ -28,6 +28,7 @@ export interface IPropsArrayItem {
|
|
28
28
|
hexColor?: string;
|
29
29
|
locked?: boolean;
|
30
30
|
positionLocked?: boolean;
|
31
|
+
selected?: boolean;
|
31
32
|
onClick?(): void;
|
32
33
|
onDoubleClick?(): void;
|
33
34
|
}
|
@@ -154,6 +155,7 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
154
155
|
center={item.center}
|
155
156
|
end={item.end}
|
156
157
|
action={item.action}
|
158
|
+
selected={item.selected}
|
157
159
|
onClick={
|
158
160
|
item.onClick
|
159
161
|
? item.onClick
|
@@ -204,6 +206,7 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
204
206
|
center={item.center}
|
205
207
|
end={item.end}
|
206
208
|
action={item.action}
|
209
|
+
selected={item.selected}
|
207
210
|
onClick={
|
208
211
|
item.onClick
|
209
212
|
? item.onClick
|
@@ -264,6 +267,7 @@ export interface IPropsItem {
|
|
264
267
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
265
268
|
locked?: boolean;
|
266
269
|
positionLocked?: boolean;
|
270
|
+
selected?: boolean;
|
267
271
|
onClick?(): void;
|
268
272
|
onDoubleClick?(): void;
|
269
273
|
onSelect?(): void;
|
@@ -287,6 +291,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
|
|
287
291
|
|
288
292
|
render() {
|
289
293
|
let classes = classNames('table-list__item', {
|
294
|
+
'table-list__item--selected': this.props.selected,
|
290
295
|
'table-list__item--clickable': this.props.onClick,
|
291
296
|
'table-list__item--draggable': this.props.dragAndDrop,
|
292
297
|
'table-list__item--locked': this.props.locked,
|
@@ -44,17 +44,19 @@ class Select extends React.Component<ISelect> {
|
|
44
44
|
htmlId={this.htmlId}
|
45
45
|
tabindex={this.props.tabindex}
|
46
46
|
>
|
47
|
-
<
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
47
|
+
<span className='sd-input__select-caret-wrapper'>
|
48
|
+
<select
|
49
|
+
className='sd-input__select'
|
50
|
+
id={this.htmlId}
|
51
|
+
value={this.props.value}
|
52
|
+
aria-describedby={this.htmlId}
|
53
|
+
tabIndex={this.props.tabindex}
|
54
|
+
onChange={this.handleChange}
|
55
|
+
disabled={this.props.disabled || this.props.readonly}
|
56
|
+
>
|
57
|
+
{this.props.children}
|
58
|
+
</select>
|
59
|
+
</span>
|
58
60
|
</InputWrapper>
|
59
61
|
);
|
60
62
|
}
|
@@ -5,7 +5,7 @@ export interface ICallbacks {
|
|
5
5
|
|
6
6
|
export function setupSingleAndDoubleClick(): (event: React.MouseEvent, cb: ICallbacks) => void {
|
7
7
|
let timer: number | undefined;
|
8
|
-
let delay: number;
|
8
|
+
let delay: number = 250;
|
9
9
|
|
10
10
|
return (event, cb: ICallbacks) => {
|
11
11
|
clearTimeout(timer);
|
package/dist/examples.bundle.js
CHANGED
@@ -40989,7 +40989,7 @@ var TableList = /** @class */ (function (_super) {
|
|
40989
40989
|
? _this.props.itemsDropdown(index)
|
40990
40990
|
: []; } })
|
40991
40991
|
: React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
40992
|
-
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
40992
|
+
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
40993
40993
|
? item.onClick
|
40994
40994
|
: undefined, onDoubleClick: item.onDoubleClick
|
40995
40995
|
? item.onDoubleClick
|
@@ -41003,7 +41003,7 @@ var TableList = /** @class */ (function (_super) {
|
|
41003
41003
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
41004
41004
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
41005
41005
|
: React.createElement("div", { role: 'list', className: classes },
|
41006
|
-
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
41006
|
+
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
41007
41007
|
? item.onClick
|
41008
41008
|
: undefined, onDoubleClick: item.onDoubleClick
|
41009
41009
|
? item.onDoubleClick
|
@@ -41039,6 +41039,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
41039
41039
|
TableListItem.prototype.render = function () {
|
41040
41040
|
var _this = this;
|
41041
41041
|
var classes = (0, classnames_1.default)('table-list__item', {
|
41042
|
+
'table-list__item--selected': this.props.selected,
|
41042
41043
|
'table-list__item--clickable': this.props.onClick,
|
41043
41044
|
'table-list__item--draggable': this.props.dragAndDrop,
|
41044
41045
|
'table-list__item--locked': this.props.locked,
|
@@ -61094,7 +61095,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
61094
61095
|
exports.setupSingleAndDoubleClick = void 0;
|
61095
61096
|
function setupSingleAndDoubleClick() {
|
61096
61097
|
var timer;
|
61097
|
-
var delay;
|
61098
|
+
var delay = 250;
|
61098
61099
|
return function (event, cb) {
|
61099
61100
|
clearTimeout(timer);
|
61100
61101
|
if (event.nativeEvent.detail === 1) {
|
@@ -67050,7 +67051,8 @@ var Select = /** @class */ (function (_super) {
|
|
67050
67051
|
React.createElement("span", null, this.props.value)));
|
67051
67052
|
}
|
67052
67053
|
return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
|
67053
|
-
React.createElement("
|
67054
|
+
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
67055
|
+
React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
|
67054
67056
|
};
|
67055
67057
|
return Select;
|
67056
67058
|
}(React.Component));
|
@@ -78292,7 +78294,7 @@ var FormLabel = /** @class */ (function (_super) {
|
|
78292
78294
|
var classes = (0, classnames_1.default)('form-label form-label--block', {
|
78293
78295
|
'form-label--light': this.props.style === 'light',
|
78294
78296
|
});
|
78295
|
-
return (React.createElement("
|
78297
|
+
return (React.createElement("label", { className: classes }, this.props.text));
|
78296
78298
|
};
|
78297
78299
|
return FormLabel;
|
78298
78300
|
}(React.PureComponent));
|
@@ -105626,6 +105628,7 @@ var SimpleListItem = /** @class */ (function (_super) {
|
|
105626
105628
|
'simple-list__item--justify-flex-start': this.props.justify === undefined
|
105627
105629
|
},
|
105628
105630
|
_a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
|
105631
|
+
_a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
|
105629
105632
|
_a));
|
105630
105633
|
return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
|
105631
105634
|
};
|
@@ -139841,7 +139844,12 @@ var TestGround = /** @class */ (function (_super) {
|
|
139841
139844
|
date: new Date('2022-01-08'),
|
139842
139845
|
time: '16:50',
|
139843
139846
|
modalPlanningTemplates: false,
|
139847
|
+
modalSaveEvent: false,
|
139848
|
+
modalSaveEvent2: false,
|
139849
|
+
modalSaveEvent3: false,
|
139844
139850
|
treeSelectValue: [],
|
139851
|
+
value: undefined,
|
139852
|
+
valueS2: undefined,
|
139845
139853
|
};
|
139846
139854
|
return _this;
|
139847
139855
|
}
|
@@ -139855,10 +139863,160 @@ var TestGround = /** @class */ (function (_super) {
|
|
139855
139863
|
};
|
139856
139864
|
TestGround.prototype.render = function () {
|
139857
139865
|
var _this = this;
|
139866
|
+
var avatars = [
|
139867
|
+
{
|
139868
|
+
imageUrl: null,
|
139869
|
+
initials: "VS",
|
139870
|
+
displayName: 'Vladimir Stefanovic',
|
139871
|
+
icon: { name: 'text', color: 'var(--sd-colour-highlight)' },
|
139872
|
+
},
|
139873
|
+
{
|
139874
|
+
imageUrl: null,
|
139875
|
+
initials: "JL",
|
139876
|
+
displayName: 'Jeffrey Lebowski',
|
139877
|
+
icon: { name: 'photo', color: 'var(--sd-colour-highlight)' }
|
139878
|
+
},
|
139879
|
+
{
|
139880
|
+
imageUrl: null,
|
139881
|
+
initials: "WS",
|
139882
|
+
displayName: 'Walter Sobchak',
|
139883
|
+
icon: { name: 'video', color: 'var(--sd-colour-highlight)' }
|
139884
|
+
},
|
139885
|
+
{
|
139886
|
+
imageUrl: null,
|
139887
|
+
initials: "ML",
|
139888
|
+
displayName: 'Maude Lebowski',
|
139889
|
+
icon: { name: 'file', color: 'var(--sd-colour-highlight)' }
|
139890
|
+
},
|
139891
|
+
];
|
139892
|
+
var modalSaveEventFooterOne = (React.createElement(index_1.ButtonGroup, { align: "end" },
|
139893
|
+
React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent: false }); } }),
|
139894
|
+
React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent: false }); } })));
|
139895
|
+
var modalSaveEventFooterTwo = (React.createElement(index_1.ButtonGroup, { align: "end" },
|
139896
|
+
React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } }),
|
139897
|
+
React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent2: false }); } })));
|
139898
|
+
var modalSaveEventFooterThree = (React.createElement(index_1.ButtonGroup, { align: "end" },
|
139899
|
+
React.createElement(index_1.Button, { text: 'Cancel', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } }),
|
139900
|
+
React.createElement(index_1.Button, { type: 'primary', text: 'Save', onClick: function () { return _this.setState({ modalSaveEvent3: false }); } })));
|
139858
139901
|
return (React.createElement(Components.Layout, { header: 'Testing Ground' },
|
139859
139902
|
React.createElement(Components.LayoutContainer, null,
|
139860
139903
|
React.createElement(Components.MainPanel, null,
|
139904
|
+
React.createElement(index_1.ButtonGroup, null,
|
139905
|
+
React.createElement(index_1.Button, { text: "Save Event Modal (Event only)", onClick: function () { return _this.setState({ modalSaveEvent: true }); } }),
|
139906
|
+
React.createElement(index_1.Button, { text: "Save Event Modal (Event & Planning)", onClick: function () { return _this.setState({ modalSaveEvent2: true }); } }),
|
139907
|
+
React.createElement(index_1.Button, { text: "Save Event Modal (Planning only)", onClick: function () { return _this.setState({ modalSaveEvent3: true }); } })),
|
139908
|
+
React.createElement("hr", null),
|
139909
|
+
React.createElement("hr", null),
|
139861
139910
|
React.createElement(index_1.Button, { text: "Planning Templates", onClick: function () { return _this.setState({ modalPlanningTemplates: true }); } }),
|
139911
|
+
React.createElement("span", null),
|
139912
|
+
React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterOne, onHide: function () { _this.setState({ modalSaveEvent: false }); } },
|
139913
|
+
React.createElement("div", null,
|
139914
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
|
139915
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
|
139916
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139917
|
+
React.createElement("div", null,
|
139918
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
|
139919
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
|
139920
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139921
|
+
React.createElement("div", null,
|
139922
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
|
139923
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
|
139924
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139925
|
+
React.createElement("div", null,
|
139926
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
|
139927
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
|
139928
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139929
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
|
139930
|
+
React.createElement("strong", null, "This is a recurring event"),
|
139931
|
+
". Update all recurring events or just this one?"),
|
139932
|
+
React.createElement(index_1.Select, { value: this.state.value, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
|
139933
|
+
_this.setState({
|
139934
|
+
value: value,
|
139935
|
+
});
|
139936
|
+
} },
|
139937
|
+
React.createElement(index_1.Option, null, "This event only"),
|
139938
|
+
React.createElement(index_1.Option, null, "This and all future events"),
|
139939
|
+
React.createElement(index_1.Option, null, "All events"))),
|
139940
|
+
React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent2, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterTwo, onHide: function () { _this.setState({ modalSaveEvent2: false }); } },
|
139941
|
+
React.createElement("div", null,
|
139942
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Name' }),
|
139943
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Australian Open 2024")),
|
139944
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139945
|
+
React.createElement("div", null,
|
139946
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Date' }),
|
139947
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "05.02.2024 @ 10:00")),
|
139948
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139949
|
+
React.createElement("div", null,
|
139950
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'Current Repeat Summary' }),
|
139951
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "Every 1 day(s) until CET 28 Feb 2024")),
|
139952
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139953
|
+
React.createElement("div", null,
|
139954
|
+
React.createElement(FormLabel_1.FormLabel, { text: 'No. of events' }),
|
139955
|
+
React.createElement(index_1.Text, { size: 'small', weight: 'medium' }, "1")),
|
139956
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'x-small' }),
|
139957
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1 mt-0-5' },
|
139958
|
+
React.createElement("strong", null, "This is a recurring event"),
|
139959
|
+
". Update all recurring events or just this one?"),
|
139960
|
+
React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (value) {
|
139961
|
+
_this.setState({
|
139962
|
+
value: value,
|
139963
|
+
});
|
139964
|
+
} },
|
139965
|
+
React.createElement(index_1.Option, null, "This event only"),
|
139966
|
+
React.createElement(index_1.Option, null, "This and all future events"),
|
139967
|
+
React.createElement(index_1.Option, null, "All events")),
|
139968
|
+
React.createElement(index_1.ContentDivider, { type: "dashed", margin: 'small' }),
|
139969
|
+
React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
|
139970
|
+
React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
|
139971
|
+
React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
|
139972
|
+
React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
|
139973
|
+
React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
|
139974
|
+
React.createElement("div", { className: "sd-list-item__row" },
|
139975
|
+
React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
|
139976
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
|
139977
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
|
139978
|
+
React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
|
139979
|
+
React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
|
139980
|
+
React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
|
139981
|
+
React.createElement("span", { className: "sd-margin-s--auto" },
|
139982
|
+
React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
|
139983
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
|
139984
|
+
React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
|
139985
|
+
". Update all recurring planning or just this one?"),
|
139986
|
+
React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
|
139987
|
+
_this.setState({
|
139988
|
+
value: valueS2,
|
139989
|
+
});
|
139990
|
+
} },
|
139991
|
+
React.createElement(index_1.Option, null, "This planning only"),
|
139992
|
+
React.createElement(index_1.Option, null, "This and all future plannings"),
|
139993
|
+
React.createElement(index_1.Option, null, "All plannings"))),
|
139994
|
+
React.createElement(index_1.Modal, { headerTemplate: "Save Event", zIndex: 10000, visible: this.state.modalSaveEvent3, contentPadding: 'medium', contentBg: 'medium', size: 'medium', footerTemplate: modalSaveEventFooterThree, onHide: function () { _this.setState({ modalSaveEvent3: false }); } },
|
139995
|
+
React.createElement(index_1.Heading, { type: 'h4', className: 'mb-1' }, "Related Planning(s)"),
|
139996
|
+
React.createElement("div", { className: 'sd-list-item-group--space-between-items' },
|
139997
|
+
React.createElement("div", { role: "listitem", className: "sd-list-item sd-shadow--z1 mb-1" },
|
139998
|
+
React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" }),
|
139999
|
+
React.createElement("div", { className: "sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border" },
|
140000
|
+
React.createElement("div", { className: "sd-list-item__row" },
|
140001
|
+
React.createElement("i", { role: "presentation", className: "icon-calendar icon--light-blue" }),
|
140002
|
+
React.createElement("span", { className: "sd-list-item__slugline" }, "Planning Slug"),
|
140003
|
+
React.createElement("span", { className: "sd-overflow-ellipsis sd-list-item--element-grow" },
|
140004
|
+
React.createElement("span", { className: "sd-list-item__text-strong" }, "Cras justo odio, dapibus ac facilisis in."))),
|
140005
|
+
React.createElement("div", { className: "sd-list-item__row sd-list-item__row--overflow-visible me-1" },
|
140006
|
+
React.createElement(index_1.Label, { text: 'draft', style: 'translucent' }),
|
140007
|
+
React.createElement("span", { className: "sd-margin-s--auto" },
|
140008
|
+
React.createElement(index_1.AvatarGroup, { size: "x-small", items: avatars })))))),
|
140009
|
+
React.createElement(index_1.Text, { size: 'small', className: 'mb-1' },
|
140010
|
+
React.createElement("strong", null, "You made changes to a planning item that is a part of a recurring event"),
|
140011
|
+
". Update all recurring planning or just this one?"),
|
140012
|
+
React.createElement(index_1.Select, { value: this.state.valueS2, label: 'Update:', required: false, disabled: false, inlineLabel: true, labelHidden: true, onChange: function (valueS2) {
|
140013
|
+
_this.setState({
|
140014
|
+
value: valueS2,
|
140015
|
+
});
|
140016
|
+
} },
|
140017
|
+
React.createElement(index_1.Option, null, "This planning only"),
|
140018
|
+
React.createElement(index_1.Option, null, "This and all future plannings"),
|
140019
|
+
React.createElement(index_1.Option, null, "All plannings"))),
|
139862
140020
|
React.createElement(index_1.Modal, { headerTemplate: "Planning templates", zIndex: 10000, visible: this.state.modalPlanningTemplates, contentPadding: 'medium', contentBg: 'medium', size: 'medium', onHide: function () { _this.setState({ modalPlanningTemplates: false }); } },
|
139863
140021
|
React.createElement("div", { className: 'modal__sticky-header' },
|
139864
140022
|
React.createElement(index_1.SearchBar, { placeholder: 'Search templates', boxed: true },
|
@@ -144266,7 +144424,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
144266
144424
|
/* 693 */
|
144267
144425
|
/***/ (function(module, exports) {
|
144268
144426
|
|
144269
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
144427
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.75","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
144270
144428
|
|
144271
144429
|
/***/ }),
|
144272
144430
|
/* 694 */
|