superdesk-ui-framework 4.0.34 → 4.0.36

package/app-typescript/components/DateTimePicker.tsx

@@ -1,109 +1,127 @@
-import * as React from 'react';
-import {DatePicker} from '../components/DatePicker';
-import {Spacer} from '@superdesk/common';
-import {defaultTo} from 'lodash';
-import {TimePicker} from './TimePicker';
-import {IconButton} from './IconButton';
+import * as React from "react";
+import { DatePicker } from "../components/DatePicker";
+import { Spacer } from "@superdesk/common";
+import { defaultTo } from "lodash";
+import { TimePicker } from "./TimePicker";
+import { IconButton } from "./IconButton";
+import { InputWrapper } from "./Form";
+import { IInputWrapper } from "./Form/InputWrapper";
+import nextId from "react-id-generator";
 
-interface IProps {
-    value: Date | null;
-    label: {
-        text: string;
-        hidden?: boolean;
-    };
-    dateFormat: string;
-    onChange: (value: Date | null) => void;
-    preview?: boolean;
-    fullWidth?: boolean;
-    allowSeconds?: boolean;
-    required?: boolean;
-    width?: React.CSSProperties['width'];
-    disabled?: boolean;
+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;
 }
 
-const MIN_WIDTH = 348;
-
 export class DateTimePicker extends React.PureComponent<IProps> {
-    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();
+  private htmlId: string = nextId();
 
-        origDate.setHours(hours, minutes);
+  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();
 
-        this.props.onChange(origDate);
-    }
+    origDate.setHours(hours, minutes);
 
-    handleDateChange = (date: Date | null) => {
-        if (date == null) {
-            this.props.onChange(null);
+    this.props.onChange(origDate);
+  }
 
-            return;
-        }
+  handleDateChange = (date: Date | null) => {
+    if (date == null) {
+      this.props.onChange(null);
 
-        const origDate = this.props.value ?? new Date();
-        const selectedDate = new Date(date);
+      return;
+    }
 
-        selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
+    const origDate = this.props.value ?? new Date();
+    const selectedDate = new Date(date);
 
-        this.props.onChange(selectedDate);
-    }
+    selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
 
-    prepareFormat(unitOfTime: number) {
-        return unitOfTime.toString().padStart(2, '0');
-    }
+    this.props.onChange(selectedDate);
+  }
 
-    render() {
-        const convertedTimeValue = this.props.value != null
-            ? `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}`
-            : '';
+  prepareFormat(unitOfTime: number) {
+    return unitOfTime.toString().padStart(2, "0");
+  }
 
-        return (
-            <div style={{width: this.props.width ? this.props.width : MIN_WIDTH}}>
-                <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}
-                            label={this.props.label.text}
-                            inlineLabel={this.props.label.hidden ?? false}
-                            labelHidden={this.props.label.hidden ?? false}
-                            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={() => {
-                                this.props.onChange(null);
-                            }}
-                            ariaValue='Clear'
-                        />
-                    )}
-                </Spacer>
-            </div>
-        );
-    }
+  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}
+        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={() => {
+                this.props.onChange(null);
+              }}
+              ariaValue="Clear"
+            />
+          )}
+        </Spacer>
+      </InputWrapper>
+    );
+  }
 }

package/app-typescript/components/TreeMenu.tsx

@@ -180,7 +180,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         document.addEventListener("keydown", this.onPressEsc);
     }
 
-    componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
         }
@@ -192,6 +192,18 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         ) {
             this.popperInstance?.update();
         }
+
+        // Update options when getOptions prop is updated
+        if (this.props.getOptions && prevProps.getOptions !== this.props.getOptions) {
+            const newOptions = this.props.getOptions();
+            this.setState({
+                options: newOptions,
+                firstBranchOptions: newOptions,
+                filterArr: [],
+            }, () => {
+                this.recursion(newOptions);
+            });
+        }
     }
 
     toggleMenu() {

package/dist/components/DateTimePicker.tsx

@@ -14,10 +14,12 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
     render() {
         return (
             <DateTimePicker
-                label={{text: "Planning date"}}
+                label="Planning date"
+                labelHidden
+                inlineLabel
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
-                width="100%"
+                fullWidth
                 onChange={(val) => {
                     const parsedVal = val != null ? new Date(val) : null;
 
@@ -49,11 +51,14 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                 <h2 className="docs-page__h2">Date picker</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <DateTimePicker
-                        label="Planning datetime"
-                        value={this.state.date}
+                        label="Planning date"
+                        value={this.state.dateTime}
                         dateFormat="YYYY-MM-DD"
-                        onChange={(date) => {
-                            this.setState({date});
+                        fullWidth
+                        onChange={(val) => {
+                            const parsedVal = val != null ? new Date(val) : null;
+
+                            this.setState({dateTime: parsedVal});
                         }}
                     />
                 `}</Markup.ReactMarkupCodePreview>
@@ -65,11 +70,15 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <DateTimePicker
-                            value={this.state.date}
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}
+                            label="Planning date"
+                            value={this.state.dateTime}
                             dateFormat="YYYY-MM-DD"
+                            fullWidth
+                            onChange={(val) => {
+                                const parsedVal = val != null ? new Date(val) : null;
+
+                                this.setState({dateTime: parsedVal});
+                            }}
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>