superdesk-ui-framework 4.0.46 → 4.0.48

package/app-typescript/components/CheckboxButton.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 
 interface IProps {
     label: {
-        text: string,
+        text: string;
         icon?: string;
-        hidden?: boolean,
+        hidden?: boolean;
     };
     checked?: boolean;
     disabled?: boolean;
@@ -30,23 +30,32 @@ export class CheckboxButton extends React.Component<IProps> {
 
     render() {
         return (
-            <span className="sd-check-button sd-check-button--native"
-                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
-                <input type="checkbox"
+            <span
+                className="sd-check-button sd-check-button--native"
+                tabIndex={this.props.tabindex === undefined ? undefined : -1}
+            >
+                <input
+                    type="checkbox"
                     className="sd-check-button__input"
                     id={this.htmlId}
                     tabIndex={this.props.tabindex}
                     checked={this.props.checked}
                     onChange={this.handleChange}
                     disabled={this.props.disabled}
-                    required={this.props.required} />
+                    required={this.props.required}
+                />
 
-                <label className="sd-check-button__text-label" htmlFor={this.htmlId}
-                    aria-label={this.props.label.hidden ? this.props.label.text : undefined}>
-                    { this.props.label.icon ?
-                        <i className={`icon-${this.props.label.icon}`} aria-hidden="true" /> : null }
-                    { !this.props.label.hidden || !this.props.label.icon ?
-                        <span className="sd-check-button__text-label-inner">{this.props.label.text}</span> : null }
+                <label
+                    className="sd-check-button__text-label"
+                    htmlFor={this.htmlId}
+                    aria-label={this.props.label.hidden ? this.props.label.text : undefined}
+                >
+                    {this.props.label.icon ? (
+                        <i className={`icon-${this.props.label.icon}`} aria-hidden="true" />
+                    ) : null}
+                    {!this.props.label.hidden || !this.props.label.icon ? (
+                        <span className="sd-check-button__text-label-inner">{this.props.label.text}</span>
+                    ) : null}
                 </label>
             </span>
         );

package/app-typescript/components/ContentDivider.tsx

@@ -2,16 +2,15 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface IProps {
-    type?: 'dashed' |'dotted' | 'solid'; // defaults to 'solid'
-    orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
+    type?: 'dashed' | 'dotted' | 'solid'; // defaults to 'solid'
+    orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
     align?: 'center' | 'left' | 'right'; // defaults to 'center'
     border?: boolean;
-    margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
+    margin?: 'x-small' | 'small' | 'medium' | 'large' | 'none';
     children?: React.ReactNode;
 }
 
 export class ContentDivider extends React.PureComponent<IProps> {
-
     render() {
         let classes = classNames('sd-content-divider', {
             'sd-content-divider--horizontal': this.props.orientation === undefined,
@@ -19,18 +18,18 @@ export class ContentDivider extends React.PureComponent<IProps> {
             [`sd-content-divider--${this.props.type}`]: this.props.type || this.props.type !== undefined,
             [`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
             [`sd-content-divider--${this.props.orientation}`]:
-            this.props.orientation || this.props.orientation !== undefined,
+                this.props.orientation || this.props.orientation !== undefined,
             'sd-content-divider--margin-medium': this.props.margin === undefined,
             [`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
         });
 
         if (this.props.children) {
             return (
-                <div className={"sd-content-divider--with-text " + classes} role="separator">
+                <div className={'sd-content-divider--with-text ' + classes} role="separator">
                     <span className="sd-content-divider__inner-text">{this.props.children}</span>
                 </div>
             );
-        }  else {
+        } else {
             return <div className={classes} role="separator"></div>;
         }
     }

package/app-typescript/components/CreateButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from './Icon';
-import { Tooltip } from './Tooltip';
+import {Icon} from './Icon';
+import {Tooltip} from './Tooltip';
 interface IProps {
     id?: string;
     ariaValue: string;
@@ -23,14 +23,16 @@ export class CreateButton extends React.PureComponent<IProps> {
         const value = this.props.value === undefined ? 'button' : this.props.value;
         return (
             <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow}>
-                <button type={value}
+                <button
+                    type={value}
                     className={classes}
                     tabIndex={0}
                     onClick={this.props.onClick}
                     aria-label={this.props.ariaValue}
-                    id={this.props.id}>
-                        <Icon name="plus-large" />
-                        <span className="circle"></span>
+                    id={this.props.id}
+                >
+                    <Icon name="plus-large" />
+                    <span className="circle"></span>
                 </button>
             </Tooltip>
         );

package/app-typescript/components/DatePicker.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import addDays from 'date-fns/addDays';
 import format from 'date-fns/format';
 import moment from 'moment';
-import { Calendar, LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
-import { throttle } from 'lodash';
-import nextId from "react-id-generator";
-import { InputWrapper } from './Form';
-import { IInputWrapper } from './Form/InputWrapper';
+import {Calendar, LocaleSettings, CalendarProps} from '@superdesk/primereact/calendar';
+import {throttle} from 'lodash';
+import nextId from 'react-id-generator';
+import {InputWrapper} from './Form';
+import {IInputWrapper} from './Form/InputWrapper';
 import {Button} from './Button';
 import {getWeekStartByLocale} from 'weekstart';
 import {getMonthNames, getWeekdayNames} from '@sourcefabric/common';
@@ -18,9 +18,9 @@ interface IDatePickerBase extends IInputWrapper {
 
     // shortcuts can be used to jump to a date relative to today
     // for example [{label: 'tomorrow', days: 1}, {label: 'yesterday', days: -1}]
-    headerButtonBar?: Array<{days: number, label: string}>;
+    headerButtonBar?: Array<{days: number; label: string}>;
 
-    locale?: {type: 'code-only', code: string} | {type: 'full', payload: Omit<LocaleSettings, 'today' | 'clear'>};
+    locale?: {type: 'code-only'; code: string} | {type: 'full'; payload: Omit<LocaleSettings, 'today' | 'clear'>};
 
     hideClearButton?: boolean;
 }
@@ -113,10 +113,10 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
 
         this.hidePopupOnScroll = throttle(() => {
             if (
-                this.instance != null
-                && this.instance.panel != null
-                && this.instance.hideOverlay != null
-                && this.instance.panel.classList.contains(internalPrimereactClassnames.overlayVisible)
+                this.instance != null &&
+                this.instance.panel != null &&
+                this.instance.hideOverlay != null &&
+                this.instance.panel.classList.contains(internalPrimereactClassnames.overlayVisible)
             ) {
                 this.instance.hideOverlay();
             }
@@ -140,7 +140,8 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
             if (this.props.value !== prevProps.value) {
                 this.setState({value: parseToPrimeReactCalendarFormat(this.props.value), valid: true});
             }
-        } else if (this.props.value.getTime() !== prevProps.value.getTime()) { // comparing by value
+        } else if (this.props.value.getTime() !== prevProps.value.getTime()) {
+            // comparing by value
             this.setState({value: parseToPrimeReactCalendarFormat(this.props.value), valid: true});
         }
     }
@@ -173,9 +174,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
             }
         })();
 
-        const showClearButton = this.props.required === true
-            ? false
-            : this.props.hideClearButton !== true;
+        const showClearButton = this.props.required === true ? false : this.props.hideClearButton !== true;
 
         return (
             <InputWrapper
@@ -192,24 +191,28 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 inputWrapper={this.props.inputWrapper}
             >
                 <Calendar
-                    className='sd-input__input'
-                    footerTemplate={showClearButton ? () => (
-                        <div className='d-flex justify-end'>
-                            <Button
-                                onClick={() => {
-                                    this.props.onChange(null);
-                                    if (
-                                        this.instance != null
-                                        && typeof this.instance.hideOverlay === 'function'
-                                    ) {
-                                        this.instance.hideOverlay();
-                                    }
-                                }}
-                                text='Clear'
-                                data-test-id='clear-button'
-                            />
-                        </div>
-                    ) : undefined}
+                    className="sd-input__input"
+                    footerTemplate={
+                        showClearButton
+                            ? () => (
+                                  <div className="d-flex justify-end">
+                                      <Button
+                                          onClick={() => {
+                                              this.props.onChange(null);
+                                              if (
+                                                  this.instance != null &&
+                                                  typeof this.instance.hideOverlay === 'function'
+                                              ) {
+                                                  this.instance.hideOverlay();
+                                              }
+                                          }}
+                                          text="Clear"
+                                          data-test-id="clear-button"
+                                      />
+                                  </div>
+                              )
+                            : undefined
+                    }
                     inputId={this.htmlId}
                     ariaLabelledBy={this.htmlId + 'label'}
                     ref={(ref) => {
@@ -220,7 +223,6 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                         if (this.props['data-test-id'] != null && refAny?.inputElement != null) {
                             refAny.inputElement.setAttribute('data-test-id', this.props['data-test-id']);
                         }
-
                     }}
                     value={this.state.value === null ? undefined : this.state.value}
                     onChange={(event) => {
@@ -238,27 +240,29 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                     dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
                     showIcon={true}
                     icon="icon-calendar"
-                    headerTemplate={() => this.props.headerButtonBar == null ? null : (
-                        <div className="datepicker-header-toolbar">
-                            {this.props.headerButtonBar.map(({label, days}, i) => (
-                                <button
-                                    key={i}
-                                    className="btn btn--small"
-                                    onClick={() => {
-                                        this.props.onChange(addDays(new Date(), days));
-                                        if (
-                                            this.instance != null
-                                            && typeof this.instance.hideOverlay === 'function'
-                                        ) {
-                                            this.instance.hideOverlay();
-                                        }
-                                    }}
-                                >
-                                    {label}
-                                </button>
-                            ))}
-                        </div>
-                    )}
+                    headerTemplate={() =>
+                        this.props.headerButtonBar == null ? null : (
+                            <div className="datepicker-header-toolbar">
+                                {this.props.headerButtonBar.map(({label, days}, i) => (
+                                    <button
+                                        key={i}
+                                        className="btn btn--small"
+                                        onClick={() => {
+                                            this.props.onChange(addDays(new Date(), days));
+                                            if (
+                                                this.instance != null &&
+                                                typeof this.instance.hideOverlay === 'function'
+                                            ) {
+                                                this.instance.hideOverlay();
+                                            }
+                                        }}
+                                    >
+                                        {label}
+                                    </button>
+                                ))}
+                            </div>
+                        )
+                    }
                     appendTo={document.body} // making it work inside `overflow:hidden`
                     disabled={this.props.disabled}
                     minDate={this.props.minDate}

package/app-typescript/components/DateTimePicker.tsx

@@ -1,128 +1,186 @@
-import * as React from "react";
-import { DatePicker } from "../components/DatePicker";
-import { Spacer } from '@sourcefabric/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 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;
+import * as React from 'react';
+import {DatePicker} from '../components/DatePicker';
+import {Spacer} from '@sourcefabric/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';
+import {format} from 'date-fns';
+import {assertNever} from '../helpers';
+
+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;
 }
 
+type IValue = {date?: string; time?: string};
+
+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;
+}
+
+type IProps = IPropsValueDate | IPropsValueObject;
+
 export class DateTimePicker extends React.PureComponent<IProps> {
-  private htmlId: string = nextId();
+    private htmlId: string = nextId();
 
-  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();
+    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();
+
+            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);
+        }
+    };
+
+    handleDateChange = (date: Date | null) => {
+        if (this.props.valueType === 'date') {
+            if (date == null) {
+                this.props.onChange(null);
+                return;
+            }
 
-    origDate.setHours(hours, minutes);
+            const origDate = this.props.value ?? new Date();
+            const selectedDate = new Date(date);
 
-    this.props.onChange(origDate);
-  }
+            selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
 
-  handleDateChange = (date: Date | null) => {
-    if (date == null) {
-      this.props.onChange(null);
+            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);
+        }
+    };
 
-      return;
+    prepareFormat(unitOfTime: number) {
+        return unitOfTime.toString().padStart(2, '0');
     }
 
-    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={() => {
-                this.props.onChange(null);
-              }}
-              ariaValue="Clear"
-            />
-          )}
-        </Spacer>
-      </InputWrapper>
-    );
-  }
+    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>
+        );
+    }
 }

package/app-typescript/components/Divider.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 interface IProps {
-    size?: 'mini' |'small' | 'medium' | 'large'; // defaults to 'small'
+    size?: 'mini' | 'small' | 'medium' | 'large'; // defaults to 'small'
     border?: boolean;
 }
 
@@ -13,8 +13,6 @@ export class Divider extends React.PureComponent<IProps> {
             'button-group__divider--border': this.props.border === true,
             [`button-group__divider--${this.props.size}`]: this.props.size || this.props.size !== undefined,
         });
-        return (
-            <div className={classes} />
-        );
+        return <div className={classes} />;
     }
 }