DateTime picker implementation

package.json

@@ -123,7 +123,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.28",
+    "superdesk-ui-framework": "^4.0.3",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",

scripts/apps/authoring-react/fields/datetime/difference.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {IDateTimeFieldConfig, IDateTimeValueOperational, IDifferenceComponentProps} from 'superdesk-api';
+import {DifferenceGeneric} from '../difference-generic';
+
+type IProps = IDifferenceComponentProps<IDateTimeValueOperational, IDateTimeFieldConfig>;
+
+export class Difference extends React.PureComponent<IProps> {
+    render() {
+        const {value1, value2} = this.props;
+
+        return (
+            <DifferenceGeneric
+                items1={value1 == null ? [] : [value1]}
+                items2={value2 == null ? [] : [value2]}
+                getId={(item) => item}
+                template={({item}) => <span>{item}</span>}
+            />
+        );
+    }
+}

scripts/apps/authoring-react/fields/datetime/editor.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {DateTimePicker} from 'superdesk-ui-framework/react';
+import {
+    IEditorComponentProps,
+    IDateTimeFieldConfig,
+    IDateTimeValueOperational,
+    IDateTimeUserPreferences,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {appConfig} from 'appConfig';
+
+type IProps = IEditorComponentProps<IDateTimeValueOperational, IDateTimeFieldConfig, IDateTimeUserPreferences>;
+
+export class Editor extends React.PureComponent<IProps> {
+    render() {
+        const Container = this.props.container;
+
+        return (
+            <Container>
+                <DateTimePicker
+                    dateFormat={appConfig.view.dateformat}
+                    label={gettext("Date time (AUTHORING-REACT)")}
+                    onChange={(value) => {
+                        this.props.onChange(value);
+                    }}
+                    value={(() => {
+                        const {value} = this.props;
+                        const parsedVal = value != null && (value.length > 0) ? new Date(value) : null;
+
+                        return parsedVal;
+                    })()}
+                    disabled={this.props.config.readOnly}
+                    width={this.props.config.width}
+                />
+            </Container>
+        );
+    }
+}

scripts/apps/authoring-react/fields/datetime/index.tsx

@@ -0,0 +1,37 @@
+import {
+    ICustomFieldType,
+    IDateTimeValueOperational,
+    IDateTimeValueStorage,
+    IDateTimeFieldConfig,
+    IDateTimeUserPreferences,
+} from 'superdesk-api';
+import {gettext} from 'core/utils';
+import {Editor} from './editor';
+import {Preview} from './preview';
+import {Difference} from './difference';
+
+export const DATETIME_FIELD_ID = 'datetime';
+
+export function getDatetimeField()
+: ICustomFieldType<IDateTimeValueOperational, IDateTimeValueStorage, IDateTimeFieldConfig, IDateTimeUserPreferences> {
+    const field: ICustomFieldType<
+        IDateTimeValueOperational,
+        IDateTimeValueStorage,
+        IDateTimeFieldConfig,
+        IDateTimeUserPreferences
+    > = {
+        id: DATETIME_FIELD_ID,
+        label: gettext('Datetime (authoring-react)'),
+        editorComponent: Editor,
+        previewComponent: Preview,
+        generic: true,
+
+        hasValue: (valueOperational) => valueOperational != null,
+        getEmptyValue: () => null,
+
+        differenceComponent: Difference,
+        configComponent: null,
+    };
+
+    return field;
+}

scripts/apps/authoring-react/fields/datetime/preview.tsx

@@ -0,0 +1,28 @@
+import {gettext} from 'core/utils';
+import {noop} from 'lodash';
+import React from 'react';
+import {IDateTimeFieldConfig, IDateTimeValueOperational, IPreviewComponentProps} from 'superdesk-api';
+import {DateTimePicker} from 'superdesk-ui-framework/react';
+
+type IProps = IPreviewComponentProps<IDateTimeValueOperational, IDateTimeFieldConfig>;
+
+export class Preview extends React.PureComponent<IProps> {
+    render() {
+        return (
+            <DateTimePicker
+                dateFormat='MM/DD/YYYY'
+                label={gettext("Date time (AUTHORING-REACT)")}
+                onChange={noop}
+                preview={true}
+                value={(() => {
+                    const {value} = this.props;
+                    const parsedVal = value != null && (value.length > 0) ? new Date(value) : null;
+
+                    return parsedVal;
+                })()}
+                disabled={this.props.config.readOnly}
+                width={this.props.config.width}
+            />
+        );
+    }
+}

scripts/apps/authoring-react/fields/register-fields.ts

@@ -16,6 +16,7 @@ import {geDurationField} from './duration';
 import {getArticlesInPackageField} from './package-items';
 import {getTagInputField} from './tag-input';
 import {getDatelineField} from './dateline';
+import {getDatetimeField} from './datetime';
 
 export const AUTHORING_REACT_FIELDS = 'authoring-react--fields';
 
@@ -45,6 +46,7 @@ export function registerAuthoringReactFields() {
                 getEditor3Field(),
                 getDropdownField(),
                 getDateField(),
+                getDatetimeField(),
                 getTimeField(),
                 geDurationField(),
                 getUrlsField(),

scripts/core/superdesk-api.d.ts

@@ -315,6 +315,15 @@ declare module 'superdesk-api' {
     };
     export type ITimeUserPreferences = never;
 
+    // AUTHORING-REACT FIELD TYPES - datetime
+
+    export type IDateTimeValueOperational = string; // ISO 8601, 13:59:01.123
+    export type IDateTimeValueStorage = IDateTimeValueOperational;
+    export interface IDateTimeFieldConfig extends ICommonFieldConfig {
+        allowSeconds?: boolean;
+    };
+    export type IDateTimeUserPreferences = never;
+
     // AUTHORING-REACT FIELD TYPES - tag input
 
     export type ITagInputValueOperational = Array<string> | null;