superdesk-ui-framework 4.0.34 → 4.0.35

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 (8) hide show
  1. package/app-typescript/components/DateTimePicker.tsx +112 -94
  2. package/dist/components/DateTimePicker.tsx +19 -10
  3. package/dist/examples.bundle.js +81 -75
  4. package/dist/superdesk-ui.bundle.js +70 -64
  5. package/examples/pages/components/DateTimePicker.tsx +19 -10
  6. package/package.json +1 -1
  7. package/react/components/DateTimePicker.d.ts +7 -7
  8. package/react/components/DateTimePicker.js +16 -10
package/app-typescript/components/DateTimePicker.tsx CHANGED
@@ -1,109 +1,127 @@
1
- import * as React from 'react';
2
- import {DatePicker} from '../components/DatePicker';
3
- import {Spacer} from '@superdesk/common';
4
- import {defaultTo} from 'lodash';
5
- import {TimePicker} from './TimePicker';
6
- import {IconButton} from './IconButton';
1
+ import * as React from "react";
2
+ import { DatePicker } from "../components/DatePicker";
3
+ import { Spacer } from "@superdesk/common";
4
+ import { defaultTo } from "lodash";
5
+ import { TimePicker } from "./TimePicker";
6
+ import { IconButton } from "./IconButton";
7
+ import { InputWrapper } from "./Form";
8
+ import { IInputWrapper } from "./Form/InputWrapper";
9
+ import nextId from "react-id-generator";
7
10
 
8
- interface IProps {
9
- value: Date | null;
10
- label: {
11
- text: string;
12
- hidden?: boolean;
13
- };
14
- dateFormat: string;
15
- onChange: (value: Date | null) => void;
16
- preview?: boolean;
17
- fullWidth?: boolean;
18
- allowSeconds?: boolean;
19
- required?: boolean;
20
- width?: React.CSSProperties['width'];
21
- disabled?: boolean;
11
+ interface IProps extends IInputWrapper {
12
+ value: Date | null;
13
+ dateFormat: string;
14
+ onChange: (value: Date | null) => void;
15
+ preview?: boolean;
16
+ fullWidth?: boolean;
17
+ allowSeconds?: boolean;
18
+ required?: boolean;
19
+ disabled?: boolean;
20
+ ref?: React.LegacyRef<InputWrapper>;
21
+ 'data-test-id'?: string;
22
22
  }
23
23
 
24
- const MIN_WIDTH = 348;
25
-
26
24
  export class DateTimePicker extends React.PureComponent<IProps> {
27
- handleTimeChange = (time: string) => {
28
- const [hours, minutes] = time.split(':').map((x) => defaultTo(parseInt(x, 10), 0)); // handle NaN value
29
- const origDate = this.props.value ? new Date(this.props.value) : new Date();
25
+ private htmlId: string = nextId();
30
26
 
31
- origDate.setHours(hours, minutes);
27
+ handleTimeChange = (time: string) => {
28
+ const [hours, minutes] = time
29
+ .split(":")
30
+ .map((x) => defaultTo(parseInt(x, 10), 0)); // handle NaN value
31
+ const origDate = this.props.value ? new Date(this.props.value) : new Date();
32
32
 
33
- this.props.onChange(origDate);
34
- }
33
+ origDate.setHours(hours, minutes);
35
34
 
36
- handleDateChange = (date: Date | null) => {
37
- if (date == null) {
38
- this.props.onChange(null);
35
+ this.props.onChange(origDate);
36
+ }
39
37
 
40
- return;
41
- }
38
+ handleDateChange = (date: Date | null) => {
39
+ if (date == null) {
40
+ this.props.onChange(null);
42
41
 
43
- const origDate = this.props.value ?? new Date();
44
- const selectedDate = new Date(date);
42
+ return;
43
+ }
45
44
 
46
- selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
45
+ const origDate = this.props.value ?? new Date();
46
+ const selectedDate = new Date(date);
47
47
 
48
- this.props.onChange(selectedDate);
49
- }
48
+ selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
50
49
 
51
- prepareFormat(unitOfTime: number) {
52
- return unitOfTime.toString().padStart(2, '0');
53
- }
50
+ this.props.onChange(selectedDate);
51
+ }
54
52
 
55
- render() {
56
- const convertedTimeValue = this.props.value != null
57
- ? `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}`
58
- : '';
53
+ prepareFormat(unitOfTime: number) {
54
+ return unitOfTime.toString().padStart(2, "0");
55
+ }
59
56
 
60
- return (
61
- <div style={{width: this.props.width ? this.props.width : MIN_WIDTH}}>
62
- <Spacer h gap="8" alignItems='end' noWrap>
63
- <div style={{flexGrow: 1}}>
64
- <DatePicker
65
- disabled={this.props.disabled}
66
- preview={this.props.preview}
67
- required={this.props.required}
68
- hideClearButton={true}
69
- value={this.props.value}
70
- onChange={(val) => {
71
- this.handleDateChange(val);
72
- }}
73
- dateFormat={this.props.dateFormat}
74
- label={this.props.label.text}
75
- inlineLabel={this.props.label.hidden ?? false}
76
- labelHidden={this.props.label.hidden ?? false}
77
- fullWidth={this.props.fullWidth}
78
- />
79
- </div>
80
- <div style={{flexGrow: 1}}>
81
- <TimePicker
82
- disabled={this.props.disabled}
83
- preview={this.props.preview}
84
- value={convertedTimeValue}
85
- onChange={(val) => {
86
- this.handleTimeChange(val);
87
- }}
88
- inlineLabel
89
- labelHidden
90
- allowSeconds={this.props.allowSeconds}
91
- fullWidth={this.props.fullWidth}
92
- required={this.props.required}
93
- />
94
- </div>
95
- {this.props.preview !== true && (
96
- <IconButton
97
- disabled={this.props.disabled}
98
- icon='remove-sign'
99
- onClick={() => {
100
- this.props.onChange(null);
101
- }}
102
- ariaValue='Clear'
103
- />
104
- )}
105
- </Spacer>
106
- </div>
107
- );
108
- }
57
+ render() {
58
+ const convertedTimeValue =
59
+ this.props.value != null
60
+ ? `${this.prepareFormat(
61
+ this.props.value.getHours(),
62
+ )}:${this.prepareFormat(this.props.value.getMinutes())}`
63
+ : "";
64
+
65
+ return (
66
+ <InputWrapper
67
+ label={this.props.label}
68
+ error={this.props.error}
69
+ invalid={this.props.error != null}
70
+ required={this.props.required}
71
+ disabled={this.props.disabled}
72
+ info={this.props.info}
73
+ inlineLabel={this.props.inlineLabel}
74
+ labelHidden={this.props.labelHidden}
75
+ htmlId={this.htmlId}
76
+ tabindex={this.props.tabindex}
77
+ fullWidth={this.props.fullWidth}
78
+ data-test-id={this.props["data-test-id"]}
79
+ ref={this.props.ref}
80
+ >
81
+ <Spacer h gap="8" alignItems="end" noWrap>
82
+ <div style={{ flexGrow: 1 }}>
83
+ <DatePicker
84
+ disabled={this.props.disabled}
85
+ preview={this.props.preview}
86
+ required={this.props.required}
87
+ hideClearButton={true}
88
+ value={this.props.value}
89
+ onChange={(val) => {
90
+ this.handleDateChange(val);
91
+ }}
92
+ dateFormat={this.props.dateFormat}
93
+ inlineLabel
94
+ labelHidden
95
+ fullWidth={this.props.fullWidth}
96
+ />
97
+ </div>
98
+ <div style={{ flexGrow: 1 }}>
99
+ <TimePicker
100
+ disabled={this.props.disabled}
101
+ preview={this.props.preview}
102
+ value={convertedTimeValue}
103
+ onChange={(val) => {
104
+ this.handleTimeChange(val);
105
+ }}
106
+ inlineLabel
107
+ labelHidden
108
+ allowSeconds={this.props.allowSeconds}
109
+ fullWidth={this.props.fullWidth}
110
+ required={this.props.required}
111
+ />
112
+ </div>
113
+ {this.props.preview !== true && (
114
+ <IconButton
115
+ disabled={this.props.disabled}
116
+ icon="remove-sign"
117
+ onClick={() => {
118
+ this.props.onChange(null);
119
+ }}
120
+ ariaValue="Clear"
121
+ />
122
+ )}
123
+ </Spacer>
124
+ </InputWrapper>
125
+ );
126
+ }
109
127
  }
package/dist/components/DateTimePicker.tsx CHANGED
@@ -14,10 +14,12 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
14
14
  render() {
15
15
  return (
16
16
  <DateTimePicker
17
- label={{text: "Planning date"}}
17
+ label="Planning date"
18
+ labelHidden
19
+ inlineLabel
18
20
  value={this.state.dateTime}
19
21
  dateFormat="YYYY-MM-DD"
20
- width="100%"
22
+ fullWidth
21
23
  onChange={(val) => {
22
24
  const parsedVal = val != null ? new Date(val) : null;
23
25
 
@@ -49,11 +51,14 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
49
51
  <h2 className="docs-page__h2">Date picker</h2>
50
52
  <Markup.ReactMarkupCodePreview>{`
51
53
  <DateTimePicker
52
- label="Planning datetime"
53
- value={this.state.date}
54
+ label="Planning date"
55
+ value={this.state.dateTime}
54
56
  dateFormat="YYYY-MM-DD"
55
- onChange={(date) => {
56
- this.setState({date});
57
+ fullWidth
58
+ onChange={(val) => {
59
+ const parsedVal = val != null ? new Date(val) : null;
60
+
61
+ this.setState({dateTime: parsedVal});
57
62
  }}
58
63
  />
59
64
  `}</Markup.ReactMarkupCodePreview>
@@ -65,11 +70,15 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
65
70
  </Markup.ReactMarkupPreview>
66
71
  <Markup.ReactMarkupCode>{`
67
72
  <DateTimePicker
68
- value={this.state.date}
69
- onChange={(date) => {
70
- this.setState({date});
71
- }}
73
+ label="Planning date"
74
+ value={this.state.dateTime}
72
75
  dateFormat="YYYY-MM-DD"
76
+ fullWidth
77
+ onChange={(val) => {
78
+ const parsedVal = val != null ? new Date(val) : null;
79
+
80
+ this.setState({dateTime: parsedVal});
81
+ }}
73
82
  />
74
83
  `}</Markup.ReactMarkupCode>
75
84
  </Markup.ReactMarkup>