superdesk-ui-framework 4.0.46 → 4.0.47

package/.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
 
     - uses: actions/setup-node@v1
       with:
-        node-version: '12.x'
+        node-version: '14.x'
 
     - uses: actions/cache@v3
       with:

package/app-typescript/components/DateTimePicker.tsx

@@ -7,122 +7,183 @@ import { IconButton } from "./IconButton";
 import { InputWrapper } from "./Form";
 import { IInputWrapper } from "./Form/InputWrapper";
 import nextId from "react-id-generator";
+import {format} from 'date-fns';
+import {assertNever} from '../helpers';
 
-interface IProps extends IInputWrapper {
-  value: Date | null;
-  dateFormat: string;
-  onChange: (value: Date | null) => void;
-  preview?: boolean;
-  fullWidth?: boolean;
-  allowSeconds?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  ref?: React.LegacyRef<InputWrapper>;
-  'data-test-id'?: string;
+interface IPropsValueDate extends IInputWrapper {
+    valueType: 'date';
+    value: Date | null;
+    dateFormat: string;
+    onChange: (value: Date | null) => void;
+    preview?: boolean;
+    fullWidth?: boolean;
+    allowSeconds?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    ref?: React.LegacyRef<InputWrapper>;
+    'data-test-id'?: string;
 }
 
-export class DateTimePicker extends React.PureComponent<IProps> {
-  private htmlId: string = nextId();
+type IValue = {date?: string; time?: string};
 
-  handleTimeChange = (time: string) => {
-    const [hours, minutes] = time
-      .split(":")
-      .map((x) => defaultTo(parseInt(x, 10), 0)); // handle NaN value
-    const origDate = this.props.value ? new Date(this.props.value) : new Date();
+interface IPropsValueObject extends IInputWrapper {
+    valueType: 'object';
+    value: IValue;
+    dateFormat: string;
+    onChange: (value: IValue) => void; //
+    preview?: boolean;
+    fullWidth?: boolean;
+    allowSeconds?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    ref?: React.LegacyRef<InputWrapper>;
+    'data-test-id'?: string;
+}
 
-    origDate.setHours(hours, minutes);
+type IProps = IPropsValueDate | IPropsValueObject;
 
-    this.props.onChange(origDate);
-  }
+export class DateTimePicker extends React.PureComponent<IProps> {
+    private htmlId: string = nextId();
 
-  handleDateChange = (date: Date | null) => {
-    if (date == null) {
-      this.props.onChange(null);
+    handleTimeChange = (time: string) => {
+        if (this.props.valueType === 'date') {
+            const [hours, minutes] = time
+                .split(":")
+                .map((x) => defaultTo(parseInt(x, 10), 0));
+            const origDate = this.props.value ? new Date(this.props.value) : new Date();
 
-      return;
+            origDate.setHours(hours, minutes);
+
+            this.props.onChange(origDate);
+        } else if (this.props.valueType === 'object') {
+            this.props.onChange({
+                ...this.props.value,
+                time,
+            });
+        } else {
+            assertNever(this.props);
+        }
     }
 
-    const origDate = this.props.value ?? new Date();
-    const selectedDate = new Date(date);
-
-    selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
-
-    this.props.onChange(selectedDate);
-  }
-
-  prepareFormat(unitOfTime: number) {
-    return unitOfTime.toString().padStart(2, "0");
-  }
-
-  render() {
-    const convertedTimeValue =
-      this.props.value != null
-        ? `${this.prepareFormat(
-            this.props.value.getHours(),
-          )}:${this.prepareFormat(this.props.value.getMinutes())}`
-        : "";
-
-    return (
-      <InputWrapper
-        label={this.props.label}
-        error={this.props.error}
-        invalid={this.props.error != null}
-        required={this.props.required}
-        disabled={this.props.disabled}
-        info={this.props.info}
-        inlineLabel={this.props.inlineLabel}
-        labelHidden={this.props.labelHidden}
-        htmlId={this.htmlId}
-        tabindex={this.props.tabindex}
-        fullWidth={this.props.fullWidth}
-        inputWrapper={this.props.inputWrapper}
-        data-test-id={this.props["data-test-id"]}
-        ref={this.props.ref}
-      >
-        <Spacer h gap="8" alignItems="end" noWrap>
-          <div style={{ flexGrow: 1 }}>
-            <DatePicker
-              disabled={this.props.disabled}
-              preview={this.props.preview}
-              required={this.props.required}
-              hideClearButton={true}
-              value={this.props.value}
-              onChange={(val) => {
-                this.handleDateChange(val);
-              }}
-              dateFormat={this.props.dateFormat}
-              inlineLabel
-              labelHidden
-              fullWidth={this.props.fullWidth}
-            />
-          </div>
-          <div style={{ flexGrow: 1 }}>
-            <TimePicker
-              disabled={this.props.disabled}
-              preview={this.props.preview}
-              value={convertedTimeValue}
-              onChange={(val) => {
-                this.handleTimeChange(val);
-              }}
-              inlineLabel
-              labelHidden
-              allowSeconds={this.props.allowSeconds}
-              fullWidth={this.props.fullWidth}
-              required={this.props.required}
-            />
-          </div>
-          {this.props.preview !== true && (
-            <IconButton
-              disabled={this.props.disabled}
-              icon="remove-sign"
-              onClick={() => {
+    handleDateChange = (date: Date | null) => {
+        if (this.props.valueType === 'date') {
+            if (date == null) {
                 this.props.onChange(null);
-              }}
-              ariaValue="Clear"
-            />
-          )}
-        </Spacer>
-      </InputWrapper>
-    );
-  }
+                return;
+            }
+
+            const origDate = this.props.value ?? new Date();
+            const selectedDate = new Date(date);
+
+            selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+
+            this.props.onChange(selectedDate);
+        } else if (this.props.valueType === 'object') {
+            this.props.onChange({
+                ...this.props.value,
+                date: date ? format(date, 'yyyy-MM-dd') : undefined,
+            });
+        } else {
+            assertNever(this.props);
+        }
+    }
+
+    prepareFormat(unitOfTime: number) {
+        return unitOfTime.toString().padStart(2, "0");
+    }
+
+    getTimeValue(): string {
+        if (this.props.valueType === 'date') {
+
+        return this.props.value != null
+            ? `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}`
+            : "";
+        } else if (this.props.valueType === 'object') {
+            return this.props.value.time ?? '';
+        } else {
+            assertNever(this.props);
+        }
+    }
+
+    getDateValue(): Date | null {
+        if (this.props.valueType === 'date') {
+            return this.props.value;
+        } else if (this.props.valueType === 'object') {
+            return this.props.value.date ? new Date(this.props.value.date) : null;
+        } else {
+            assertNever(this.props);
+        }
+    }
+
+    handleClear = () => {
+        if (this.props.valueType === 'date') {
+            this.props.onChange(null);
+        } else if (this.props.valueType === 'object') {
+            this.props.onChange({date: undefined, time: undefined});
+        } else {
+            assertNever(this.props);
+        }
+    }
+
+    render() {
+        const timeValue = this.getTimeValue();
+        const dateValue = this.getDateValue();
+
+        return (
+            <InputWrapper
+                label={this.props.label}
+                error={this.props.error}
+                invalid={this.props.error != null}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+                fullWidth={this.props.fullWidth}
+                inputWrapper={this.props.inputWrapper}
+                data-test-id={this.props["data-test-id"]}
+                ref={this.props.ref}
+            >
+                <Spacer h gap="8" alignItems="end" noWrap>
+                    <div style={{ flexGrow: 1 }}>
+                        <DatePicker
+                        disabled={this.props.disabled}
+                        preview={this.props.preview}
+                        required={this.props.required}
+                        hideClearButton={true}
+                        value={dateValue}
+                        onChange={this.handleDateChange}
+                        dateFormat={this.props.dateFormat}
+                        inlineLabel
+                        labelHidden
+                        fullWidth={this.props.fullWidth}
+                        />
+                    </div>
+                    <div style={{ flexGrow: 1 }}>
+                        <TimePicker
+                        disabled={this.props.disabled}
+                        preview={this.props.preview}
+                        value={timeValue}
+                        onChange={this.handleTimeChange}
+                        inlineLabel
+                        labelHidden
+                        allowSeconds={this.props.allowSeconds}
+                        fullWidth={this.props.fullWidth}
+                        required={this.props.required}
+                        />
+                    </div>
+                    {this.props.preview !== true && (
+                        <IconButton
+                        disabled={this.props.disabled}
+                        icon="remove-sign"
+                        onClick={this.handleClear}
+                        ariaValue="Clear"
+                        />
+                    )}
+                </Spacer>
+            </InputWrapper>
+        );
+    }
 }