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
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as Components from './components/Index';
|
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup} from '../../../../app-typescript/index';
|
|
4
|
+
import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
|
|
4
5
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
|
5
6
|
|
|
6
7
|
interface IProps {
|
|
@@ -23,7 +24,12 @@ interface IState {
|
|
|
23
24
|
date: any;
|
|
24
25
|
time: string;
|
|
25
26
|
modalPlanningTemplates: boolean;
|
|
27
|
+
modalSaveEvent: boolean;
|
|
28
|
+
modalSaveEvent2: boolean;
|
|
29
|
+
modalSaveEvent3: boolean;
|
|
26
30
|
treeSelectValue: any;
|
|
31
|
+
value: any;
|
|
32
|
+
valueS2: any;
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
let options2 = [
|
|
@@ -57,7 +63,12 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
57
63
|
date: new Date('2022-01-08'),
|
|
58
64
|
time: '16:50',
|
|
59
65
|
modalPlanningTemplates: false,
|
|
66
|
+
modalSaveEvent: false,
|
|
67
|
+
modalSaveEvent2: false,
|
|
68
|
+
modalSaveEvent3: false,
|
|
60
69
|
treeSelectValue: [],
|
|
70
|
+
value: undefined,
|
|
71
|
+
valueS2: undefined,
|
|
61
72
|
}
|
|
62
73
|
}
|
|
63
74
|
|
|
@@ -70,11 +81,283 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
|
70
81
|
}
|
|
71
82
|
|
|
72
83
|
render() {
|
|
84
|
+
const avatars: Array<IAvatarInGroup> = [
|
|
85
|
+
{
|
|
86
|
+
imageUrl: null,
|
|
87
|
+
initials: "VS",
|
|
88
|
+
displayName: 'Vladimir Stefanovic',
|
|
89
|
+
icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
imageUrl: null,
|
|
93
|
+
initials: "JL",
|
|
94
|
+
displayName: 'Jeffrey Lebowski',
|
|
95
|
+
icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
imageUrl: null,
|
|
99
|
+
initials: "WS",
|
|
100
|
+
displayName: 'Walter Sobchak',
|
|
101
|
+
icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
imageUrl: null,
|
|
105
|
+
initials: "ML",
|
|
106
|
+
displayName: 'Maude Lebowski',
|
|
107
|
+
icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
|
|
108
|
+
},
|
|
109
|
+
];
|
|
110
|
+
const modalSaveEventFooterOne=(
|
|
111
|
+
<ButtonGroup align="end">
|
|
112
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
|
|
113
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
|
|
114
|
+
</ButtonGroup>
|
|
115
|
+
);
|
|
116
|
+
const modalSaveEventFooterTwo=(
|
|
117
|
+
<ButtonGroup align="end">
|
|
118
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
|
|
119
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
|
|
120
|
+
</ButtonGroup>
|
|
121
|
+
);
|
|
122
|
+
const modalSaveEventFooterThree=(
|
|
123
|
+
<ButtonGroup align="end">
|
|
124
|
+
<Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
|
|
125
|
+
<Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
|
|
126
|
+
</ButtonGroup>
|
|
127
|
+
);
|
|
73
128
|
return (
|
|
74
129
|
<Components.Layout header='Testing Ground'>
|
|
75
130
|
<Components.LayoutContainer>
|
|
76
131
|
<Components.MainPanel>
|
|
132
|
+
<ButtonGroup>
|
|
133
|
+
<Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
|
|
134
|
+
<Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
|
|
135
|
+
<Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
|
|
136
|
+
</ButtonGroup>
|
|
137
|
+
<hr />
|
|
138
|
+
{/* <button type="button" className="sd-dropdown-button" aria-haspopup="true" aria-expanded="false">
|
|
139
|
+
<span className="sd-dropdown-button__text-block">
|
|
140
|
+
<label className="sd-dropdown-button__text-label">Coverage:</label>
|
|
141
|
+
<span className="sd-dropdown-button__text-value">Events & Coverages</span>
|
|
142
|
+
</span>
|
|
143
|
+
<Icon name='chevron-down-thin' />
|
|
144
|
+
</button> */}
|
|
145
|
+
|
|
146
|
+
<hr />
|
|
77
147
|
<Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
|
|
148
|
+
<span></span>
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
{/* Event Saving modals */}
|
|
152
|
+
{/* Event Only (This one existed Before) */}
|
|
153
|
+
<Modal
|
|
154
|
+
headerTemplate="Save Event"
|
|
155
|
+
zIndex={10000}
|
|
156
|
+
visible={this.state.modalSaveEvent}
|
|
157
|
+
contentPadding='medium'
|
|
158
|
+
contentBg='medium'
|
|
159
|
+
size='medium'
|
|
160
|
+
footerTemplate={modalSaveEventFooterOne}
|
|
161
|
+
onHide={() => {this.setState({modalSaveEvent: false})}}
|
|
162
|
+
>
|
|
163
|
+
<div>
|
|
164
|
+
<FormLabel text='Name'/>
|
|
165
|
+
<Text size='small' weight='medium'>Australian Open 2024</Text>
|
|
166
|
+
</div>
|
|
167
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
168
|
+
<div>
|
|
169
|
+
<FormLabel text='Current Date'/>
|
|
170
|
+
<Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
|
|
171
|
+
</div>
|
|
172
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
173
|
+
<div>
|
|
174
|
+
<FormLabel text='Current Repeat Summary'/>
|
|
175
|
+
<Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
|
|
176
|
+
</div>
|
|
177
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
178
|
+
<div>
|
|
179
|
+
<FormLabel text='No. of events'/>
|
|
180
|
+
<Text size='small' weight='medium'>1</Text>
|
|
181
|
+
</div>
|
|
182
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
183
|
+
<Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
|
|
184
|
+
<Select
|
|
185
|
+
value={this.state.value}
|
|
186
|
+
label='Update:'
|
|
187
|
+
required={false}
|
|
188
|
+
disabled={false}
|
|
189
|
+
inlineLabel={true}
|
|
190
|
+
labelHidden={true}
|
|
191
|
+
onChange={(value) => {
|
|
192
|
+
this.setState({
|
|
193
|
+
value: value,
|
|
194
|
+
})
|
|
195
|
+
}}
|
|
196
|
+
>
|
|
197
|
+
<Option>This event only</Option>
|
|
198
|
+
<Option>This and all future events</Option>
|
|
199
|
+
<Option>All events</Option>
|
|
200
|
+
</Select>
|
|
201
|
+
</Modal>
|
|
202
|
+
|
|
203
|
+
{/* Event and Planning */}
|
|
204
|
+
<Modal
|
|
205
|
+
headerTemplate="Save Event"
|
|
206
|
+
zIndex={10000}
|
|
207
|
+
visible={this.state.modalSaveEvent2}
|
|
208
|
+
contentPadding='medium'
|
|
209
|
+
contentBg='medium'
|
|
210
|
+
size='medium'
|
|
211
|
+
footerTemplate={modalSaveEventFooterTwo}
|
|
212
|
+
onHide={() => {this.setState({modalSaveEvent2: false})}}
|
|
213
|
+
>
|
|
214
|
+
<div>
|
|
215
|
+
<FormLabel text='Name'/>
|
|
216
|
+
<Text size='small' weight='medium'>Australian Open 2024</Text>
|
|
217
|
+
</div>
|
|
218
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
219
|
+
<div>
|
|
220
|
+
<FormLabel text='Current Date'/>
|
|
221
|
+
<Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
|
|
222
|
+
</div>
|
|
223
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
224
|
+
<div>
|
|
225
|
+
<FormLabel text='Current Repeat Summary'/>
|
|
226
|
+
<Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
|
|
227
|
+
</div>
|
|
228
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
229
|
+
<div>
|
|
230
|
+
<FormLabel text='No. of events'/>
|
|
231
|
+
<Text size='small' weight='medium'>1</Text>
|
|
232
|
+
</div>
|
|
233
|
+
<ContentDivider type="dashed" margin='x-small' />
|
|
234
|
+
<Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
|
|
235
|
+
<Select
|
|
236
|
+
value={this.state.valueS2}
|
|
237
|
+
label='Update:'
|
|
238
|
+
required={false}
|
|
239
|
+
disabled={false}
|
|
240
|
+
inlineLabel={true}
|
|
241
|
+
labelHidden={true}
|
|
242
|
+
onChange={(value) => {
|
|
243
|
+
this.setState({
|
|
244
|
+
value: value,
|
|
245
|
+
})
|
|
246
|
+
}}
|
|
247
|
+
>
|
|
248
|
+
<Option>This event only</Option>
|
|
249
|
+
<Option>This and all future events</Option>
|
|
250
|
+
<Option>All events</Option>
|
|
251
|
+
</Select>
|
|
252
|
+
<ContentDivider type="dashed" margin='small' />
|
|
253
|
+
<Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
|
|
254
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
255
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
256
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
257
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
258
|
+
<div className="sd-list-item__row">
|
|
259
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
260
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
261
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
262
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
263
|
+
</span>
|
|
264
|
+
</div>
|
|
265
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
266
|
+
<Label text='draft' style='translucent'/>
|
|
267
|
+
<span className="sd-margin-s--auto">
|
|
268
|
+
<AvatarGroup
|
|
269
|
+
size="x-small"
|
|
270
|
+
items={avatars}
|
|
271
|
+
/>
|
|
272
|
+
</span>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
<Text size='small' className='mb-1'>
|
|
278
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
279
|
+
Update all recurring planning or just this one?
|
|
280
|
+
</Text>
|
|
281
|
+
<Select
|
|
282
|
+
value={this.state.valueS2}
|
|
283
|
+
label='Update:'
|
|
284
|
+
required={false}
|
|
285
|
+
disabled={false}
|
|
286
|
+
inlineLabel={true}
|
|
287
|
+
labelHidden={true}
|
|
288
|
+
onChange={(valueS2) => {
|
|
289
|
+
this.setState({
|
|
290
|
+
value: valueS2,
|
|
291
|
+
})
|
|
292
|
+
}}
|
|
293
|
+
>
|
|
294
|
+
<Option>This planning only</Option>
|
|
295
|
+
<Option>This and all future plannings</Option>
|
|
296
|
+
<Option>All plannings</Option>
|
|
297
|
+
</Select>
|
|
298
|
+
|
|
299
|
+
</Modal>
|
|
300
|
+
|
|
301
|
+
{/* Planning only */}
|
|
302
|
+
<Modal
|
|
303
|
+
headerTemplate="Save Event"
|
|
304
|
+
zIndex={10000}
|
|
305
|
+
visible={this.state.modalSaveEvent3}
|
|
306
|
+
contentPadding='medium'
|
|
307
|
+
contentBg='medium'
|
|
308
|
+
size='medium'
|
|
309
|
+
footerTemplate={modalSaveEventFooterThree}
|
|
310
|
+
onHide={() => {this.setState({modalSaveEvent3: false})}}
|
|
311
|
+
>
|
|
312
|
+
<Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
|
|
313
|
+
<div className='sd-list-item-group--space-between-items'>
|
|
314
|
+
<div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
|
|
315
|
+
<div className="sd-list-item__border sd-list-item__border--locked"></div>
|
|
316
|
+
<div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
|
|
317
|
+
<div className="sd-list-item__row">
|
|
318
|
+
<i role="presentation" className="icon-calendar icon--light-blue"></i>
|
|
319
|
+
<span className="sd-list-item__slugline">Planning Slug</span>
|
|
320
|
+
<span className="sd-overflow-ellipsis sd-list-item--element-grow">
|
|
321
|
+
<span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
|
|
322
|
+
</span>
|
|
323
|
+
</div>
|
|
324
|
+
<div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
|
|
325
|
+
<Label text='draft' style='translucent'/>
|
|
326
|
+
<span className="sd-margin-s--auto">
|
|
327
|
+
<AvatarGroup
|
|
328
|
+
size="x-small"
|
|
329
|
+
items={avatars}
|
|
330
|
+
/>
|
|
331
|
+
</span>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<Text size='small' className='mb-1'>
|
|
337
|
+
<strong>You made changes to a planning item that is a part of a recurring event</strong>.
|
|
338
|
+
Update all recurring planning or just this one?
|
|
339
|
+
</Text>
|
|
340
|
+
<Select
|
|
341
|
+
value={this.state.valueS2}
|
|
342
|
+
label='Update:'
|
|
343
|
+
required={false}
|
|
344
|
+
disabled={false}
|
|
345
|
+
inlineLabel={true}
|
|
346
|
+
labelHidden={true}
|
|
347
|
+
onChange={(valueS2) => {
|
|
348
|
+
this.setState({
|
|
349
|
+
value: valueS2,
|
|
350
|
+
})
|
|
351
|
+
}}
|
|
352
|
+
>
|
|
353
|
+
<Option>This planning only</Option>
|
|
354
|
+
<Option>This and all future plannings</Option>
|
|
355
|
+
<Option>All plannings</Option>
|
|
356
|
+
</Select>
|
|
357
|
+
|
|
358
|
+
</Modal>
|
|
359
|
+
|
|
360
|
+
{/* Planning templates modal */}
|
|
78
361
|
<Modal headerTemplate="Planning templates"
|
|
79
362
|
zIndex={10000}
|
|
80
363
|
visible={this.state.modalPlanningTemplates}
|
package/package.json
CHANGED
|
@@ -53,7 +53,7 @@ var FormLabel = /** @class */ (function (_super) {
|
|
|
53
53
|
var classes = (0, classnames_1.default)('form-label form-label--block', {
|
|
54
54
|
'form-label--light': this.props.style === 'light',
|
|
55
55
|
});
|
|
56
|
-
return (React.createElement("
|
|
56
|
+
return (React.createElement("label", { className: classes }, this.props.text));
|
|
57
57
|
};
|
|
58
58
|
return FormLabel;
|
|
59
59
|
}(React.PureComponent));
|
|
@@ -10,6 +10,7 @@ interface IProps {
|
|
|
10
10
|
interface IPropsItem {
|
|
11
11
|
stacked?: boolean;
|
|
12
12
|
justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
|
|
13
|
+
gap?: 'none' | 'small' | 'medium' | 'large';
|
|
13
14
|
id?: string;
|
|
14
15
|
}
|
|
15
16
|
declare class SimpleListItem extends React.PureComponent<IPropsItem> {
|
|
@@ -56,6 +56,7 @@ var SimpleListItem = /** @class */ (function (_super) {
|
|
|
56
56
|
'simple-list__item--justify-flex-start': this.props.justify === undefined
|
|
57
57
|
},
|
|
58
58
|
_a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
|
|
59
|
+
_a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
|
|
59
60
|
_a));
|
|
60
61
|
return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
|
|
61
62
|
};
|
|
@@ -21,6 +21,7 @@ export interface IPropsArrayItem {
|
|
|
21
21
|
hexColor?: string;
|
|
22
22
|
locked?: boolean;
|
|
23
23
|
positionLocked?: boolean;
|
|
24
|
+
selected?: boolean;
|
|
24
25
|
onClick?(): void;
|
|
25
26
|
onDoubleClick?(): void;
|
|
26
27
|
}
|
|
@@ -46,6 +47,7 @@ export interface IPropsItem {
|
|
|
46
47
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
|
47
48
|
locked?: boolean;
|
|
48
49
|
positionLocked?: boolean;
|
|
50
|
+
selected?: boolean;
|
|
49
51
|
onClick?(): void;
|
|
50
52
|
onDoubleClick?(): void;
|
|
51
53
|
onSelect?(): void;
|
|
@@ -126,7 +126,7 @@ var TableList = /** @class */ (function (_super) {
|
|
|
126
126
|
? _this.props.itemsDropdown(index)
|
|
127
127
|
: []; } })
|
|
128
128
|
: React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
|
129
|
-
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
|
129
|
+
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
|
|
130
130
|
? item.onClick
|
|
131
131
|
: undefined, onDoubleClick: item.onDoubleClick
|
|
132
132
|
? item.onDoubleClick
|
|
@@ -140,7 +140,7 @@ var TableList = /** @class */ (function (_super) {
|
|
|
140
140
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
|
141
141
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
|
142
142
|
: React.createElement("div", { role: 'list', className: classes },
|
|
143
|
-
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
|
|
143
|
+
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
|
|
144
144
|
? item.onClick
|
|
145
145
|
: undefined, onDoubleClick: item.onDoubleClick
|
|
146
146
|
? item.onDoubleClick
|
|
@@ -176,6 +176,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
|
176
176
|
TableListItem.prototype.render = function () {
|
|
177
177
|
var _this = this;
|
|
178
178
|
var classes = (0, classnames_1.default)('table-list__item', {
|
|
179
|
+
'table-list__item--selected': this.props.selected,
|
|
179
180
|
'table-list__item--clickable': this.props.onClick,
|
|
180
181
|
'table-list__item--draggable': this.props.dragAndDrop,
|
|
181
182
|
'table-list__item--locked': this.props.locked,
|
|
@@ -62,7 +62,8 @@ var Select = /** @class */ (function (_super) {
|
|
|
62
62
|
React.createElement("span", null, this.props.value)));
|
|
63
63
|
}
|
|
64
64
|
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 },
|
|
65
|
-
React.createElement("
|
|
65
|
+
React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
|
|
66
|
+
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))));
|
|
66
67
|
};
|
|
67
68
|
return Select;
|
|
68
69
|
}(React.Component));
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.setupSingleAndDoubleClick = void 0;
|
|
4
4
|
function setupSingleAndDoubleClick() {
|
|
5
5
|
var timer;
|
|
6
|
-
var delay;
|
|
6
|
+
var delay = 250;
|
|
7
7
|
return function (event, cb) {
|
|
8
8
|
clearTimeout(timer);
|
|
9
9
|
if (event.nativeEvent.detail === 1) {
|