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.
Files changed (80) hide show
  1. package/.eslintignore +1 -0
  2. package/app/styles/_drag-handle.scss +24 -0
  3. package/app/styles/_sd-tag-input.scss +3 -5
  4. package/app/styles/_tag-labels.scss +0 -2
  5. package/app/styles/app.scss +1 -0
  6. package/app/styles/form-elements/_checkbox.scss +3 -0
  7. package/app/styles/form-elements/_input-preview.scss +70 -0
  8. package/app/styles/form-elements/_inputs.scss +10 -14
  9. package/app/styles/primereact/_pr-tag-input.scss +1 -1
  10. package/app-typescript/components/DatePicker.tsx +101 -101
  11. package/app-typescript/components/DragHandle.tsx +13 -0
  12. package/app-typescript/components/DurationInput.tsx +76 -76
  13. package/app-typescript/components/Form/InputNew.tsx +1 -1
  14. package/app-typescript/components/Form/InputWrapper.tsx +34 -18
  15. package/app-typescript/components/Input.tsx +38 -62
  16. package/app-typescript/components/MultiSelect.tsx +49 -47
  17. package/app-typescript/components/Select.tsx +13 -22
  18. package/app-typescript/components/SelectPreview.tsx +100 -0
  19. package/app-typescript/components/SelectWithTemplate.tsx +2 -12
  20. package/app-typescript/components/TagInput.tsx +25 -24
  21. package/app-typescript/components/TimePicker.tsx +13 -16
  22. package/app-typescript/components/TreeSelect.tsx +180 -131
  23. package/app-typescript/index.ts +1 -0
  24. package/dist/examples.bundle.css +20 -0
  25. package/dist/examples.bundle.js +2485 -2198
  26. package/dist/react/Autocomplete.tsx +32 -31
  27. package/dist/react/DatePicker.tsx +56 -73
  28. package/dist/react/DragHandleDocs.tsx +26 -0
  29. package/dist/react/DurationInput.tsx +36 -47
  30. package/dist/react/Index.tsx +6 -1
  31. package/dist/react/Inputs.tsx +86 -248
  32. package/dist/react/MultiSelect.tsx +30 -23
  33. package/dist/react/Selects.tsx +12 -44
  34. package/dist/react/TagInputDocs.tsx +15 -21
  35. package/dist/react/TimePicker.tsx +25 -32
  36. package/dist/react/TreeSelect.tsx +97 -90
  37. package/dist/superdesk-ui.bundle.css +105 -18
  38. package/dist/superdesk-ui.bundle.js +2118 -1888
  39. package/dist/vendor.bundle.js +14 -14
  40. package/examples/pages/react/Autocomplete.tsx +32 -31
  41. package/examples/pages/react/DatePicker.tsx +56 -73
  42. package/examples/pages/react/DragHandleDocs.tsx +26 -0
  43. package/examples/pages/react/DurationInput.tsx +36 -47
  44. package/examples/pages/react/Index.tsx +6 -1
  45. package/examples/pages/react/Inputs.tsx +86 -248
  46. package/examples/pages/react/MultiSelect.tsx +30 -23
  47. package/examples/pages/react/Selects.tsx +12 -44
  48. package/examples/pages/react/TagInputDocs.tsx +15 -21
  49. package/examples/pages/react/TimePicker.tsx +25 -32
  50. package/examples/pages/react/TreeSelect.tsx +97 -90
  51. package/globals.d.ts +4 -0
  52. package/package.json +1 -1
  53. package/react/components/DatePicker.d.ts +2 -12
  54. package/react/components/DatePicker.js +14 -8
  55. package/react/components/DragHandle.d.ts +5 -0
  56. package/react/components/DragHandle.js +59 -0
  57. package/react/components/DurationInput.d.ts +2 -11
  58. package/react/components/DurationInput.js +14 -4
  59. package/react/components/Form/InputNew.d.ts +1 -1
  60. package/react/components/Form/InputWrapper.d.ts +11 -5
  61. package/react/components/Form/InputWrapper.js +6 -9
  62. package/react/components/Input.d.ts +3 -19
  63. package/react/components/Input.js +8 -21
  64. package/react/components/MultiSelect.d.ts +4 -13
  65. package/react/components/MultiSelect.js +6 -2
  66. package/react/components/Select.d.ts +3 -15
  67. package/react/components/Select.js +7 -8
  68. package/react/components/SelectPreview.d.ts +17 -0
  69. package/react/components/SelectPreview.js +109 -0
  70. package/react/components/SelectWithTemplate.d.ts +2 -11
  71. package/react/components/SelectWithTemplate.js +0 -1
  72. package/react/components/TagInput.d.ts +3 -12
  73. package/react/components/TagInput.js +6 -2
  74. package/react/components/TimePicker.d.ts +2 -11
  75. package/react/components/TimePicker.js +6 -2
  76. package/react/components/TreeSelect.d.ts +2 -11
  77. package/react/components/TreeSelect.js +49 -26
  78. package/react/index.d.ts +1 -0
  79. package/react/index.js +3 -1
  80. 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
- let InputClasses = classNames('sd-input__duration-input');
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
- label={this.props.label}
293
- error={this.props.error}
294
- required={this.props.required}
295
- disabled={this.props.disabled}
296
- invalid={this.props.invalid}
297
- info={this.props.info}
298
- inlineLabel={this.props.inlineLabel}
299
- labelHidden={this.props.labelHidden}
300
- fullWidth={this.props.fullWidth}
301
- htmlId={this.htmlId}
302
- tabindex={this.props.tabindex}>
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
- className={`duration-input ${this.state.blink === 'hour' ? 'blink_me' : ''}`}
306
- type='text'
307
- id='hours'
308
- autoComplete="off"
309
- max={99}
310
- min={0}
311
- ref={this.hourRef}
312
- value={this.state.hours}
313
- disabled={this.props.disabled}
314
- onKeyDown={(event) => this.handleKeyDown(event)}
315
- onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.minuteRef.current)}
316
- onChange={(event) => { this.handleChange(event, 'hours'); }}
317
- onBlur={(event) => this.setState({hours: this.zeroPad(event.target.value)})}
318
- onKeyPress={(event) => {
319
- if (!/[0-9]/.test(event.key)) {
320
- event.preventDefault();
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
- className={`duration-input ${this.state.blink === 'minute' ? 'blink_me' : ''}`}
327
- type='text'
328
- id='minutes'
329
- autoComplete="off"
330
- ref={this.minuteRef}
331
- value={this.state.minutes}
332
- disabled={this.props.disabled}
333
- onKeyDown={(event) => this.handleKeyDown(event)}
334
- onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.secondRef.current)}
335
- onChange={(event) => { this.handleChange(event, 'minutes'); }}
336
- onBlur={(event) => this.setState({minutes: this.zeroPad(event.target.value)})}
337
- onKeyPress={(event) => {
338
- if (!/[0-9]/.test(event.key)) {
339
- event.preventDefault();
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
- className='duration-input'
346
- type='text'
347
- id='seconds'
348
- autoComplete="off"
349
- ref={this.secondRef}
350
- value={this.state.seconds}
351
- disabled={this.props.disabled}
352
- onKeyDown={(event) => this.handleKeyDown(event)}
353
- onKeyUp={(event) => this.handleFocusOnKeyUp(event, this.hourRef.current)}
354
- onChange={(event) => { this.handleChange(event, 'seconds'); }}
355
- onBlur={(event) => this.setState({seconds: this.zeroPad(event.target.value)})}
356
- onKeyPress={(event) => {
357
- if (!/[0-9]/.test(event.key)) {
358
- event.preventDefault();
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
- </InputWrapper>
363
+ </InputWrapper>
364
364
  );
365
365
  }
366
366
  }
@@ -7,7 +7,7 @@ import {
7
7
  } from '.';
8
8
 
9
9
  interface IPropsBase {
10
- label?: string;
10
+ label: string;
11
11
  maxLength?: number;
12
12
  info?: string;
13
13
  inlineLabel?: boolean;
@@ -1,21 +1,29 @@
1
1
  import * as React from 'react';
2
2
  import classNames from 'classnames';
3
3
 
4
- interface IPropsBase {
5
- label?: string;
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
- invalid?: boolean;
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 className={labelClasses} htmlFor={this.props.htmlId} id={this.props.htmlId + 'label'}
57
- tabIndex={this.props.tabindex === undefined ? undefined : -1}>
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
- {this.props.maxLength
64
- ? <div className='sd-input__char-count'>
65
- {this.props.value?.toString().length} / {this.props.maxLength}
66
- </div>
67
- : null}
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
- {this.props.info && !this.props.invalid && !this.props.invalid
70
- ? <div className='sd-input__hint'>{this.props.info}</div>
71
- : null}
72
- {this.props.invalid || this.props.invalid
73
- ? <div className='sd-input__message'>{this.props.error}</div>
74
- : null}
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 } from './Form';
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
- interface IState {
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
- label={this.props.label}
87
- error={this.props.error}
88
- required={this.props.required}
89
- disabled={this.props.disabled}
90
- value={this.state.value}
91
- invalid={this.props.invalid}
92
- info={this.props.info}
93
- maxLength={this.props.maxLength}
94
- inlineLabel={this.props.inlineLabel}
95
- labelHidden={this.props.labelHidden}
96
- size={this.props.size ?? 'medium'}
97
- fullWidth={this.props.fullWidth}
98
- htmlId={this.htmlId}
99
- boxedStyle={this.props.boxedStyle}
100
- boxedLable={this.props.boxedLable}
101
- tabindex={this.props.tabindex}>
102
- <input className='sd-input__input'
103
- type={this.props.type ?? 'text'}
104
- id={this.htmlId}
105
- value={this.state.value}
106
- aria-describedby={this.htmlId + 'label'}
107
- tabIndex={this.props.tabindex}
108
- onChange={this.handleChange}
109
- placeholder={this.props.placeholder}
110
- disabled={this.props.disabled} />
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: any): JSX.Element | undefined;
23
- selectedItemTemplate?(value: any): JSX.Element | undefined;
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
- label={this.props.label}
65
- error={this.props.error}
66
- required={this.props.required}
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
- inputId={this.htmlId} />
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
- interface IState {
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
- invalid={this.state.invalid}
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>