superdesk-ui-framework 3.0.36 → 3.0.39
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/.eslintignore +1 -0
- package/app/styles/_drag-handle.scss +24 -0
- package/app/styles/_sd-tag-input.scss +3 -5
- package/app/styles/_tag-labels.scss +0 -2
- package/app/styles/app.scss +1 -0
- package/app/styles/form-elements/_checkbox.scss +3 -0
- package/app/styles/form-elements/_input-preview.scss +70 -0
- package/app/styles/form-elements/_inputs.scss +10 -14
- package/app/styles/primereact/_pr-tag-input.scss +1 -1
- package/app-typescript/components/DatePicker.tsx +101 -101
- package/app-typescript/components/DragHandle.tsx +13 -0
- package/app-typescript/components/DurationInput.tsx +76 -76
- package/app-typescript/components/Form/InputNew.tsx +1 -1
- package/app-typescript/components/Form/InputWrapper.tsx +34 -18
- package/app-typescript/components/Input.tsx +38 -62
- package/app-typescript/components/MultiSelect.tsx +49 -47
- package/app-typescript/components/Select.tsx +13 -22
- package/app-typescript/components/SelectPreview.tsx +100 -0
- package/app-typescript/components/SelectWithTemplate.tsx +2 -12
- package/app-typescript/components/TagInput.tsx +25 -24
- package/app-typescript/components/TimePicker.tsx +13 -16
- package/app-typescript/components/TreeSelect.tsx +180 -131
- package/app-typescript/index.ts +1 -0
- package/dist/examples.bundle.css +20 -0
- package/dist/examples.bundle.js +2485 -2198
- package/dist/react/Autocomplete.tsx +32 -31
- package/dist/react/DatePicker.tsx +56 -73
- package/dist/react/DragHandleDocs.tsx +26 -0
- package/dist/react/DurationInput.tsx +36 -47
- package/dist/react/Index.tsx +6 -1
- package/dist/react/Inputs.tsx +86 -248
- package/dist/react/MultiSelect.tsx +30 -23
- package/dist/react/Selects.tsx +12 -44
- package/dist/react/TagInputDocs.tsx +15 -21
- package/dist/react/TimePicker.tsx +25 -32
- package/dist/react/TreeSelect.tsx +97 -90
- package/dist/superdesk-ui.bundle.css +105 -18
- package/dist/superdesk-ui.bundle.js +2118 -1888
- package/dist/vendor.bundle.js +14 -14
- package/examples/pages/react/Autocomplete.tsx +32 -31
- package/examples/pages/react/DatePicker.tsx +56 -73
- package/examples/pages/react/DragHandleDocs.tsx +26 -0
- package/examples/pages/react/DurationInput.tsx +36 -47
- package/examples/pages/react/Index.tsx +6 -1
- package/examples/pages/react/Inputs.tsx +86 -248
- package/examples/pages/react/MultiSelect.tsx +30 -23
- package/examples/pages/react/Selects.tsx +12 -44
- package/examples/pages/react/TagInputDocs.tsx +15 -21
- package/examples/pages/react/TimePicker.tsx +25 -32
- package/examples/pages/react/TreeSelect.tsx +97 -90
- package/globals.d.ts +4 -0
- package/package.json +1 -1
- package/react/components/DatePicker.d.ts +2 -12
- package/react/components/DatePicker.js +14 -8
- package/react/components/DragHandle.d.ts +5 -0
- package/react/components/DragHandle.js +59 -0
- package/react/components/DurationInput.d.ts +2 -11
- package/react/components/DurationInput.js +14 -4
- package/react/components/Form/InputNew.d.ts +1 -1
- package/react/components/Form/InputWrapper.d.ts +11 -5
- package/react/components/Form/InputWrapper.js +6 -9
- package/react/components/Input.d.ts +3 -19
- package/react/components/Input.js +8 -21
- package/react/components/MultiSelect.d.ts +4 -13
- package/react/components/MultiSelect.js +6 -2
- package/react/components/Select.d.ts +3 -15
- package/react/components/Select.js +7 -8
- package/react/components/SelectPreview.d.ts +17 -0
- package/react/components/SelectPreview.js +109 -0
- package/react/components/SelectWithTemplate.d.ts +2 -11
- package/react/components/SelectWithTemplate.js +0 -1
- package/react/components/TagInput.d.ts +3 -12
- package/react/components/TagInput.js +6 -2
- package/react/components/TimePicker.d.ts +2 -11
- package/react/components/TimePicker.js +6 -2
- package/react/components/TreeSelect.d.ts +2 -11
- package/react/components/TreeSelect.js +49 -26
- package/react/index.d.ts +1 -0
- package/react/index.js +3 -1
- package/tsconfig.json +1 -1
@@ -1,23 +1,13 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
import classNames from 'classnames';
|
3
2
|
import moment from 'moment';
|
4
3
|
import nextId from "react-id-generator";
|
5
4
|
import { InputWrapper } from './Form';
|
5
|
+
import {IInputWrapper} from './Form/InputWrapper';
|
6
6
|
|
7
|
-
interface IProps {
|
7
|
+
interface IProps extends IInputWrapper {
|
8
8
|
hours?: number;
|
9
9
|
minutes?: number;
|
10
10
|
seconds?: number;
|
11
|
-
disabled?: boolean;
|
12
|
-
inlineLabel?: boolean;
|
13
|
-
required?: boolean;
|
14
|
-
fullWidth?: boolean;
|
15
|
-
invalid?: boolean;
|
16
|
-
labelHidden?: boolean;
|
17
|
-
tabindex?: number;
|
18
|
-
label?: string;
|
19
|
-
info?: string;
|
20
|
-
error?: string;
|
21
11
|
onChange(e: number): void;
|
22
12
|
}
|
23
13
|
|
@@ -285,82 +275,92 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
|
|
285
275
|
}
|
286
276
|
|
287
277
|
render() {
|
288
|
-
|
278
|
+
if (this.props.preview) {
|
279
|
+
return (
|
280
|
+
<div className='sd-input__duration-input-preview'>
|
281
|
+
<div><span className='duration-input-preview'>{this.state.hours}</span><span className='sd-input__suffix'>h</span></div>
|
282
|
+
<div><span className='duration-input-preview'>{this.state.minutes}</span><span className='sd-input__suffix'>m</span></div>
|
283
|
+
<div><span className='duration-input-preview'>{this.state.seconds}</span><span className='sd-input__suffix'>s</span></div>
|
284
|
+
</div>
|
285
|
+
);
|
286
|
+
}
|
289
287
|
|
290
288
|
return (
|
291
289
|
<InputWrapper
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
<div className={InputClasses}>
|
290
|
+
label={this.props.label}
|
291
|
+
error={this.props.error}
|
292
|
+
required={this.props.required}
|
293
|
+
disabled={this.props.disabled}
|
294
|
+
info={this.props.info}
|
295
|
+
inlineLabel={this.props.inlineLabel}
|
296
|
+
labelHidden={this.props.labelHidden}
|
297
|
+
htmlId={this.htmlId}
|
298
|
+
tabindex={this.props.tabindex}
|
299
|
+
>
|
300
|
+
<div className={'sd-input__duration-input'}>
|
304
301
|
<input
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
302
|
+
className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
|
303
|
+
type='text'
|
304
|
+
id='hours'
|
305
|
+
autoComplete="off"
|
306
|
+
max={99}
|
307
|
+
min={0}
|
308
|
+
ref={this.hourRef}
|
309
|
+
value={this.state.hours}
|
310
|
+
disabled={this.props.disabled}
|
311
|
+
onKeyDown={(event) => this.handleKeyDown(event)}
|
312
|
+
onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.minuteRef.current)}
|
313
|
+
onChange={(event) => { this.handleChange(event, 'hours'); }}
|
314
|
+
onBlur={(event) => this.setState({hours: this.zeroPad(event.target.value)})}
|
315
|
+
onKeyPress={(event) => {
|
316
|
+
if (!/[0-9]/.test(event.key)) {
|
317
|
+
event.preventDefault();
|
318
|
+
}
|
319
|
+
}}
|
320
|
+
/>
|
323
321
|
<span className='sd-input__suffix'>h</span>
|
324
322
|
|
325
323
|
<input
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
324
|
+
className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
|
325
|
+
type='text'
|
326
|
+
id='minutes'
|
327
|
+
autoComplete="off"
|
328
|
+
ref={this.minuteRef}
|
329
|
+
value={this.state.minutes}
|
330
|
+
disabled={this.props.disabled}
|
331
|
+
onKeyDown={(event) => this.handleKeyDown(event)}
|
332
|
+
onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.secondRef.current)}
|
333
|
+
onChange={(event) => { this.handleChange(event, 'minutes'); }}
|
334
|
+
onBlur={(event) => this.setState({minutes: this.zeroPad(event.target.value)})}
|
335
|
+
onKeyPress={(event) => {
|
336
|
+
if (!/[0-9]/.test(event.key)) {
|
337
|
+
event.preventDefault();
|
338
|
+
}
|
339
|
+
}}
|
340
|
+
/>
|
342
341
|
<span className='sd-input__suffix'>m</span>
|
343
342
|
|
344
343
|
<input
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
344
|
+
className='duration-input'
|
345
|
+
type='text'
|
346
|
+
id='seconds'
|
347
|
+
autoComplete="off"
|
348
|
+
ref={this.secondRef}
|
349
|
+
value={this.state.seconds}
|
350
|
+
disabled={this.props.disabled}
|
351
|
+
onKeyDown={(event) => this.handleKeyDown(event)}
|
352
|
+
onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.hourRef.current)}
|
353
|
+
onChange={(event) => { this.handleChange(event, 'seconds'); }}
|
354
|
+
onBlur={(event) => this.setState({seconds: this.zeroPad(event.target.value)})}
|
355
|
+
onKeyPress={(event) => {
|
356
|
+
if (!/[0-9]/.test(event.key)) {
|
357
|
+
event.preventDefault();
|
358
|
+
}
|
359
|
+
}}
|
360
|
+
/>
|
361
361
|
<span className='sd-input__suffix'>s</span>
|
362
362
|
</div>
|
363
|
-
|
363
|
+
</InputWrapper>
|
364
364
|
);
|
365
365
|
}
|
366
366
|
}
|
@@ -1,21 +1,29 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import classNames from 'classnames';
|
3
3
|
|
4
|
-
interface
|
5
|
-
label
|
6
|
-
children: React.ReactNode;
|
7
|
-
maxLength?: number;
|
4
|
+
export interface IInputCommon {
|
5
|
+
label: string;
|
8
6
|
info?: string;
|
9
7
|
error?: string;
|
10
8
|
required?: boolean;
|
11
9
|
disabled?: boolean;
|
12
|
-
|
10
|
+
readonly?: boolean;
|
11
|
+
preview?: boolean;
|
13
12
|
inlineLabel?: boolean;
|
14
13
|
labelHidden?: boolean;
|
15
14
|
tabindex?: number;
|
16
15
|
fullWidth?: boolean;
|
17
16
|
boxedStyle?: boolean;
|
18
17
|
boxedLable?: boolean;
|
18
|
+
}
|
19
|
+
|
20
|
+
export interface IInputWrapper extends IInputCommon {
|
21
|
+
invalid?: boolean;
|
22
|
+
}
|
23
|
+
|
24
|
+
interface IPropsBase extends IInputWrapper {
|
25
|
+
children: React.ReactNode;
|
26
|
+
maxLength?: number;
|
19
27
|
value?: string | number;
|
20
28
|
htmlId?: string;
|
21
29
|
size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
|
@@ -46,6 +54,7 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
|
|
46
54
|
'sd-input--boxed-style': this.props.boxedStyle,
|
47
55
|
'sd-input--boxed-label': this.props.boxedLable,
|
48
56
|
});
|
57
|
+
|
49
58
|
const labelClasses = classNames('sd-input__label', {
|
50
59
|
'a11y-only': this.props.labelHidden,
|
51
60
|
'sd-input__label--boxed': this.props.boxedLable,
|
@@ -53,25 +62,32 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
|
|
53
62
|
|
54
63
|
return (
|
55
64
|
<div className={classes}>
|
56
|
-
<label
|
57
|
-
|
65
|
+
<label
|
66
|
+
className={labelClasses}
|
67
|
+
htmlFor={this.props.htmlId}
|
68
|
+
id={this.props.htmlId + 'label'}
|
69
|
+
tabIndex={this.props.tabindex === undefined ? undefined : -1}
|
70
|
+
>
|
58
71
|
{this.props.label}
|
59
72
|
</label>
|
60
73
|
<div className="sd-input__input-container">
|
61
74
|
{this.props.children}
|
62
75
|
</div>
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
76
|
+
{
|
77
|
+
this.props.maxLength
|
78
|
+
&& <div className='sd-input__char-count'>
|
79
|
+
{this.props.value?.toString().length} / {this.props.maxLength}
|
80
|
+
</div>
|
81
|
+
}
|
68
82
|
<div className='sd-input__message-box'>
|
69
|
-
{
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
83
|
+
{
|
84
|
+
this.props.info && !this.props.invalid
|
85
|
+
&& <div className='sd-input__hint'>{this.props.info}</div>
|
86
|
+
}
|
87
|
+
{
|
88
|
+
this.props.invalid
|
89
|
+
&& <div className='sd-input__message'>{this.props.error}</div>
|
90
|
+
}
|
75
91
|
</div>
|
76
92
|
</div>
|
77
93
|
);
|
@@ -1,22 +1,9 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
-
// import classNames from 'classnames';
|
3
2
|
import nextId from "react-id-generator";
|
4
|
-
import { InputWrapper
|
3
|
+
import {IInputCommon, InputWrapper} from './Form/InputWrapper';
|
5
4
|
|
6
|
-
interface IPropsBase {
|
7
|
-
label?: string;
|
5
|
+
interface IPropsBase extends IInputCommon {
|
8
6
|
maxLength?: number;
|
9
|
-
info?: string;
|
10
|
-
error?: string;
|
11
|
-
required?: boolean;
|
12
|
-
disabled?: boolean;
|
13
|
-
invalid?: boolean;
|
14
|
-
inlineLabel?: boolean;
|
15
|
-
labelHidden?: boolean;
|
16
|
-
tabindex?: number;
|
17
|
-
fullWidth?: boolean;
|
18
|
-
boxedStyle?: boolean;
|
19
|
-
boxedLable?: boolean;
|
20
7
|
placeholder?: string;
|
21
8
|
size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
|
22
9
|
}
|
@@ -41,73 +28,62 @@ interface IPropsNumber extends IPropsBase {
|
|
41
28
|
|
42
29
|
type IProps = IPropsText | IPropsNumber | IPropsPassword;
|
43
30
|
|
44
|
-
|
45
|
-
value: string | number;
|
46
|
-
invalid: boolean;
|
47
|
-
}
|
48
|
-
|
49
|
-
export class Input extends React.Component<IProps, IState> {
|
31
|
+
export class Input extends React.Component<IProps> {
|
50
32
|
constructor(props: IProps) {
|
51
33
|
super(props);
|
52
34
|
|
53
|
-
this.state = {
|
54
|
-
value: this.props.value ?? '',
|
55
|
-
invalid: this.props.invalid ?? false,
|
56
|
-
};
|
57
|
-
|
58
35
|
this.handleChange = this.handleChange.bind(this);
|
59
36
|
}
|
60
37
|
|
61
38
|
htmlId = nextId();
|
62
39
|
|
63
40
|
handleChange(event: React.ChangeEvent<HTMLInputElement>) {
|
64
|
-
this.setState({ value: event.target.value });
|
65
41
|
if (this.props.type === 'number') {
|
66
42
|
this.props.onChange(Number(event.target.value));
|
67
43
|
} else {
|
68
44
|
this.props.onChange(event.target.value);
|
69
45
|
}
|
70
|
-
|
71
|
-
if (this.props.maxLength && !this.props.invalid) {
|
72
|
-
this.setState({ invalid: event.target.value.length > this.props.maxLength });
|
73
|
-
}
|
74
|
-
}
|
75
|
-
|
76
|
-
componentDidUpdate(prevProps: any) {
|
77
|
-
if (prevProps.value !== this.props.value) {
|
78
|
-
this.setState({value: this.props.value ?? ''});
|
79
|
-
}
|
80
46
|
}
|
81
47
|
|
82
48
|
render() {
|
49
|
+
if (this.props.preview) {
|
50
|
+
return (
|
51
|
+
<div>
|
52
|
+
<span>{this.props.value}</span>
|
53
|
+
</div>
|
54
|
+
);
|
55
|
+
}
|
83
56
|
|
84
57
|
return (
|
85
58
|
<InputWrapper
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
59
|
+
label={this.props.label}
|
60
|
+
required={this.props.required}
|
61
|
+
disabled={this.props.disabled}
|
62
|
+
value={this.props.value}
|
63
|
+
invalid={this.props.error != null ? true : false}
|
64
|
+
error={this.props.error}
|
65
|
+
info={this.props.info}
|
66
|
+
maxLength={this.props.maxLength}
|
67
|
+
inlineLabel={this.props.inlineLabel}
|
68
|
+
labelHidden={this.props.labelHidden}
|
69
|
+
size={this.props.size ?? 'medium'}
|
70
|
+
fullWidth={this.props.fullWidth}
|
71
|
+
htmlId={this.htmlId}
|
72
|
+
boxedStyle={this.props.boxedStyle}
|
73
|
+
boxedLable={this.props.boxedLable}
|
74
|
+
tabindex={this.props.tabindex}
|
75
|
+
>
|
76
|
+
<input
|
77
|
+
className='sd-input__input'
|
78
|
+
type={this.props.type ?? 'text'}
|
79
|
+
id={this.htmlId}
|
80
|
+
value={this.props.value}
|
81
|
+
aria-describedby={this.htmlId + 'label'}
|
82
|
+
tabIndex={this.props.tabindex}
|
83
|
+
onChange={this.handleChange}
|
84
|
+
placeholder={this.props.placeholder}
|
85
|
+
disabled={this.props.disabled}
|
86
|
+
/>
|
111
87
|
</InputWrapper>
|
112
88
|
);
|
113
89
|
}
|
@@ -3,8 +3,10 @@ import { MultiSelect as PrimeMultiSelect } from "@superdesk/primereact/multisele
|
|
3
3
|
import classNames from 'classnames';
|
4
4
|
import nextId from "react-id-generator";
|
5
5
|
import { InputWrapper } from "./Form";
|
6
|
+
import {IInputWrapper} from './Form/InputWrapper';
|
7
|
+
import {SelectPreview} from './SelectPreview';
|
6
8
|
|
7
|
-
interface IProps<T> {
|
9
|
+
interface IProps<T> extends IInputWrapper {
|
8
10
|
value: Array<T>;
|
9
11
|
options: Array<T>;
|
10
12
|
placeholder?: string;
|
@@ -19,19 +21,9 @@ interface IProps<T> {
|
|
19
21
|
showSelectAll?: boolean;
|
20
22
|
zIndex?: number;
|
21
23
|
optionLabel: (option: T) => string;
|
22
|
-
itemTemplate?(item:
|
23
|
-
selectedItemTemplate?(value:
|
24
|
+
itemTemplate?(item: T): JSX.Element | undefined;
|
25
|
+
selectedItemTemplate?(value: T): JSX.Element | undefined;
|
24
26
|
onChange(newValue: Array<T>): void;
|
25
|
-
invalid?: boolean;
|
26
|
-
inlineLabel?: boolean;
|
27
|
-
labelHidden?: boolean;
|
28
|
-
tabindex?: number;
|
29
|
-
fullWidth?: boolean;
|
30
|
-
info?: string;
|
31
|
-
error?: string;
|
32
|
-
required?: boolean;
|
33
|
-
label?: string;
|
34
|
-
disabled?: boolean;
|
35
27
|
}
|
36
28
|
|
37
29
|
interface IState<T> {
|
@@ -46,54 +38,64 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
|
|
46
38
|
constructor(props: IProps<T>) {
|
47
39
|
super(props);
|
48
40
|
this.state = {
|
49
|
-
value: [],
|
41
|
+
value: this.props.value != null ? this.props.value : [],
|
50
42
|
options: [],
|
51
43
|
invalid: this.props.invalid ? this.props.invalid : false,
|
52
44
|
};
|
53
45
|
}
|
54
46
|
|
55
47
|
render() {
|
56
|
-
|
57
48
|
let classes = classNames({
|
58
49
|
'showSelectAll': this.props.showSelectAll,
|
59
50
|
'showFilter': this.props.filter,
|
60
51
|
});
|
61
52
|
|
53
|
+
if (this.props.preview) {
|
54
|
+
return (
|
55
|
+
<SelectPreview
|
56
|
+
kind={{mode: 'multi-select'}}
|
57
|
+
items={this.state.value}
|
58
|
+
valueTemplate={this.props.selectedItemTemplate}
|
59
|
+
getLabel={this.props.optionLabel}
|
60
|
+
/>
|
61
|
+
);
|
62
|
+
}
|
63
|
+
|
62
64
|
return (
|
63
65
|
<InputWrapper
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
disabled={this.props.disabled}
|
68
|
-
invalid={this.state.invalid}
|
69
|
-
info={this.props.info}
|
70
|
-
inlineLabel={this.props.inlineLabel}
|
71
|
-
labelHidden={this.props.labelHidden}
|
72
|
-
fullWidth={this.props.fullWidth}
|
73
|
-
htmlId={this.htmlId}
|
74
|
-
tabindex={this.props.tabindex}>
|
75
|
-
<PrimeMultiSelect
|
76
|
-
panelClassName={classes}
|
77
|
-
value={this.props.value}
|
78
|
-
options={this.props.options}
|
79
|
-
onChange={({value}) => this.props.onChange(value)}
|
80
|
-
display="chip"
|
81
|
-
zIndex={this.props.zIndex}
|
82
|
-
filter={this.props.filter}
|
83
|
-
appendTo={document.body}
|
84
|
-
placeholder={this.props.placeholder}
|
85
|
-
optionLabel={(option) => this.props.optionLabel(option)}
|
86
|
-
emptyFilterMessage={this.props.emptyFilterMessage}
|
87
|
-
filterPlaceholder={this.props.filterPlaceholder}
|
88
|
-
itemTemplate={this.props.itemTemplate}
|
89
|
-
selectedItemTemplate={this.props.selectedItemTemplate}
|
90
|
-
maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
|
91
|
-
selectedItemsLabel={this.props.selectedItemsLabel}
|
92
|
-
ariaLabelledBy={this.htmlId + 'label'}
|
93
|
-
tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
|
94
|
-
showClear={this.props.showClear}
|
66
|
+
label={this.props.label}
|
67
|
+
error={this.props.error}
|
68
|
+
required={this.props.required}
|
95
69
|
disabled={this.props.disabled}
|
96
|
-
|
70
|
+
info={this.props.info}
|
71
|
+
inlineLabel={this.props.inlineLabel}
|
72
|
+
labelHidden={this.props.labelHidden}
|
73
|
+
htmlId={this.htmlId}
|
74
|
+
tabindex={this.props.tabindex}
|
75
|
+
>
|
76
|
+
<PrimeMultiSelect
|
77
|
+
panelClassName={classes}
|
78
|
+
value={this.props.value}
|
79
|
+
options={this.props.options}
|
80
|
+
onChange={({value}) => this.props.onChange(value)}
|
81
|
+
display="chip"
|
82
|
+
zIndex={this.props.zIndex}
|
83
|
+
filter={this.props.filter}
|
84
|
+
appendTo={document.body}
|
85
|
+
placeholder={this.props.placeholder}
|
86
|
+
optionLabel={(option) => this.props.optionLabel(option)}
|
87
|
+
emptyFilterMessage={this.props.emptyFilterMessage}
|
88
|
+
filterPlaceholder={this.props.filterPlaceholder}
|
89
|
+
itemTemplate={this.props.itemTemplate}
|
90
|
+
selectedItemTemplate={this.props.selectedItemTemplate}
|
91
|
+
maxSelectedLabels={this.props.maxSelectedLabels ?? 4}
|
92
|
+
selectedItemsLabel={this.props.selectedItemsLabel}
|
93
|
+
ariaLabelledBy={this.htmlId + 'label'}
|
94
|
+
tabIndex={this.props.tabIndex ? this.props.tabIndex : '0'}
|
95
|
+
showClear={this.props.showClear}
|
96
|
+
disabled={this.props.disabled}
|
97
|
+
inputId={this.htmlId}
|
98
|
+
/>
|
97
99
|
</InputWrapper>
|
98
100
|
);
|
99
101
|
}
|
@@ -1,35 +1,18 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import nextId from "react-id-generator";
|
3
3
|
import { InputWrapper } from './Form';
|
4
|
+
import {IInputWrapper} from './Form/InputWrapper';
|
4
5
|
|
5
|
-
interface ISelect {
|
6
|
+
interface ISelect extends IInputWrapper {
|
6
7
|
value?: string;
|
7
|
-
label: string;
|
8
|
-
info?: string;
|
9
|
-
error?: string;
|
10
|
-
required?: boolean;
|
11
|
-
disabled?: boolean;
|
12
|
-
invalid?: boolean;
|
13
|
-
inlineLabel?: boolean;
|
14
|
-
labelHidden?: boolean;
|
15
|
-
tabindex?: number;
|
16
|
-
fullWidth?: boolean;
|
17
8
|
onChange(newValue: string): void;
|
18
9
|
}
|
19
10
|
|
20
|
-
|
21
|
-
invalid: boolean;
|
22
|
-
}
|
23
|
-
|
24
|
-
class Select extends React.Component<ISelect, IState> {
|
11
|
+
class Select extends React.Component<ISelect> {
|
25
12
|
private htmlId = nextId();
|
26
13
|
constructor(props: ISelect) {
|
27
14
|
super(props);
|
28
15
|
|
29
|
-
this.state = {
|
30
|
-
invalid: this.props.invalid ?? false,
|
31
|
-
};
|
32
|
-
|
33
16
|
this.handleChange = this.handleChange.bind(this);
|
34
17
|
}
|
35
18
|
|
@@ -38,13 +21,21 @@ class Select extends React.Component<ISelect, IState> {
|
|
38
21
|
}
|
39
22
|
|
40
23
|
render() {
|
24
|
+
if (this.props.preview) {
|
25
|
+
return (
|
26
|
+
<div>
|
27
|
+
<span>{this.props.value}</span>
|
28
|
+
</div>
|
29
|
+
);
|
30
|
+
}
|
31
|
+
|
41
32
|
return (
|
42
33
|
<InputWrapper
|
43
34
|
label={this.props.label}
|
44
35
|
error={this.props.error}
|
45
36
|
required={this.props.required}
|
46
37
|
disabled={this.props.disabled}
|
47
|
-
|
38
|
+
readonly={this.props.readonly}
|
48
39
|
info={this.props.info}
|
49
40
|
inlineLabel={this.props.inlineLabel}
|
50
41
|
labelHidden={this.props.labelHidden}
|
@@ -59,7 +50,7 @@ class Select extends React.Component<ISelect, IState> {
|
|
59
50
|
aria-describedby={this.htmlId}
|
60
51
|
tabIndex={this.props.tabindex}
|
61
52
|
onChange={this.handleChange}
|
62
|
-
disabled={this.props.disabled}
|
53
|
+
disabled={this.props.disabled || this.props.readonly}
|
63
54
|
>
|
64
55
|
{this.props.children}
|
65
56
|
</select>
|