superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/TimePickerPopover.tsx

@@ -0,0 +1,274 @@
+import * as React from 'react';
+import {classnames, Spacer} from '@sourcefabric/common';
+import {ContentDivider} from './ContentDivider';
+import {RadioButtonGroup} from './RadioButtonGroup';
+import {getOptionsForTimeUnit, ITimeUnit, padValue} from '../utils/time';
+import {assertNever} from '../helpers';
+
+interface IProps {
+    closePopup: () => void;
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
+    allowSeconds?: boolean;
+    onChange: (nextValue: string) => void;
+    value: string | null;
+}
+
+interface IPropsTimeValueHolder {
+    isActive?: boolean;
+    value: string;
+    onClick(event: React.MouseEvent<HTMLSpanElement>): void;
+}
+
+class TimeValueHolder extends React.PureComponent<IPropsTimeValueHolder> {
+    spanEl: React.RefObject<HTMLSpanElement>;
+
+    constructor(props: IPropsTimeValueHolder) {
+        super(props);
+
+        this.spanEl = React.createRef();
+    }
+
+    public scrollToValue() {
+        this.spanEl.current?.scrollIntoView();
+    }
+
+    render() {
+        return (
+            <span
+                ref={this.props.isActive ? this.spanEl : undefined}
+                onClick={this.props.onClick}
+                className={classnames('p-1 time-unit', {
+                    'time-unit-highlight': this.props.isActive ?? false,
+                })}
+            >
+                {this.props.value}
+            </span>
+        );
+    }
+}
+
+function parseUnitOfTime(unit: ITimeUnit, value: string | null, is12HourFormat?: boolean): string {
+    const [hour, minutes, seconds] = (value ?? '').split(':');
+    const valueForUnit = (() => {
+        if (unit === 'hours') {
+            /**
+             * Hour value is always in 24-hour format, so we need to adjust it
+             * to 12-hour if needed.
+             */
+            if (is12HourFormat) {
+                return hour === '00' ? '12' : hour;
+            } else {
+                return hour;
+            }
+        } else if (unit === 'minutes') {
+            return minutes;
+        } else if (unit === 'seconds') {
+            return seconds;
+        } else {
+            assertNever(unit);
+        }
+    })();
+
+    const valueParsed =
+        is12HourFormat && unit === 'hours' && valueForUnit !== '12'
+            ? parseInt(valueForUnit, 10) % 12
+            : parseInt(valueForUnit, 10);
+
+    return padValue(valueParsed);
+}
+
+export class TimePickerPopover extends React.PureComponent<IProps> {
+    private is12HourFormat: boolean;
+
+    // hour, minutes, seconds
+    private inputRefs: Array<React.RefObject<TimeValueHolder>>;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.inputRefs = [React.createRef(), React.createRef(), React.createRef()];
+        this.handleChange = this.handleChange.bind(this);
+
+        const hour = new Date().toLocaleTimeString([]);
+        this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
+    }
+
+    handleChange(unit: ITimeUnit, value: string) {
+        const fallbackDate = new Date();
+        const [hour, minutes, seconds] =
+            this.props.value == null
+                ? [
+                      padValue(fallbackDate.getHours()),
+                      padValue(fallbackDate.getMinutes()),
+                      padValue(fallbackDate.getSeconds()),
+                  ]
+                : this.props.value.split(':');
+        let nextValue = '';
+
+        if (unit === 'hours') {
+            nextValue = `${value}:${minutes}`;
+        } else if (unit === 'minutes') {
+            nextValue = `${hour}:${value}`;
+        } else if (unit === 'seconds') {
+            nextValue = `${hour}:${minutes}:${value}`;
+        } else {
+            assertNever(unit);
+        }
+
+        if (this.props.allowSeconds && unit !== 'seconds') {
+            nextValue += `:${seconds}`;
+        }
+
+        this.props.onChange(nextValue);
+    }
+
+    componentDidMount(): void {
+        this.inputRefs.forEach((unitOfTime) => unitOfTime?.current?.scrollToValue?.());
+    }
+
+    render(): React.ReactNode {
+        const styleForColumnOfUnit: React.CSSProperties = {
+            maxHeight: 190,
+            overflowY: 'auto',
+            scrollbarWidth: 'none',
+            marginTop: 'var(--gap-1)',
+        };
+
+        return (
+            <div className="sd-shadow--z2 radius-md" onBlur={this.props.closePopup}>
+                <Spacer
+                    v
+                    gap="0"
+                    style={{
+                        width: 200,
+                        padding: 'var(--gap-1)',
+                        backgroundColor: 'var(--color-bg-00)',
+                        borderRadius: 'var(--b-radius--small)',
+                    }}
+                >
+                    {this.props.headerTemplate && (
+                        <>
+                            {this.props.headerTemplate}
+                            <ContentDivider border type="solid" orientation="horizontal" margin="none" />
+                        </>
+                    )}
+                    <Spacer h gap="4" noWrap justifyContent="center" alignItems="start">
+                        <Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
+                            {getOptionsForTimeUnit('hours', this.is12HourFormat).map((hour) => {
+                                const isActiveHour =
+                                    hour === parseUnitOfTime('hours', this.props.value, this.is12HourFormat);
+
+                                return (
+                                    <TimeValueHolder
+                                        ref={isActiveHour ? this.inputRefs[0] : undefined}
+                                        onClick={() => {
+                                            this.handleChange('hours', hour);
+                                        }}
+                                        isActive={isActiveHour}
+                                        value={hour}
+                                    />
+                                );
+                            })}
+                        </Spacer>
+                        <ContentDivider align="center" border type="solid" orientation="vertical" margin="none" />
+                        <Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
+                            {getOptionsForTimeUnit('minutes', this.is12HourFormat).map((minute) => {
+                                const isActiveMinute =
+                                    minute === parseUnitOfTime('minutes', this.props.value, this.is12HourFormat);
+
+                                return (
+                                    <TimeValueHolder
+                                        ref={isActiveMinute ? this.inputRefs[1] : undefined}
+                                        isActive={isActiveMinute}
+                                        value={minute}
+                                        onClick={() => {
+                                            this.handleChange('minutes', minute);
+                                        }}
+                                    />
+                                );
+                            })}
+                        </Spacer>
+                        {this.props.allowSeconds && (
+                            <>
+                                <ContentDivider
+                                    align="center"
+                                    border
+                                    type="solid"
+                                    orientation="vertical"
+                                    margin="none"
+                                />
+                                <Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
+                                    {getOptionsForTimeUnit('seconds', this.is12HourFormat).map((second) => {
+                                        const isActiveMinute =
+                                            second ===
+                                            parseUnitOfTime('seconds', this.props.value, this.is12HourFormat);
+
+                                        return (
+                                            <TimeValueHolder
+                                                ref={isActiveMinute ? this.inputRefs[2] : undefined}
+                                                onClick={() => {
+                                                    this.handleChange('seconds', second);
+                                                }}
+                                                isActive={isActiveMinute}
+                                                value={second}
+                                            />
+                                        );
+                                    })}
+                                </Spacer>
+                            </>
+                        )}
+                        {this.is12HourFormat && (
+                            <div
+                                style={{
+                                    marginTop: 'var(--gap-1)',
+                                }}
+                            >
+                                <RadioButtonGroup
+                                    onChange={(nextValue) => {
+                                        const [hour, minutes, seconds] = (this.props.value ?? '').split(':');
+
+                                        if (nextValue === 'PM') {
+                                            let newValue = `${padValue(parseInt(hour, 10) + 12)}:${minutes}`;
+
+                                            if (this.props.allowSeconds) {
+                                                newValue += `:${seconds}`;
+                                            }
+
+                                            this.props.onChange(newValue);
+                                        } else {
+                                            let newValue = `${padValue(parseInt(hour, 10) - 12)}:${minutes}`;
+
+                                            if (this.props.allowSeconds) {
+                                                newValue += `:${seconds}`;
+                                            }
+
+                                            this.props.onChange(newValue);
+                                        }
+                                    }}
+                                    options={[
+                                        {
+                                            label: 'AM',
+                                            value: 'AM',
+                                        },
+                                        {
+                                            label: 'PM',
+                                            value: 'PM',
+                                        },
+                                    ]}
+                                    value={parseInt((this.props.value ?? '').split(':')[0], 10) < 12 ? 'AM' : 'PM'}
+                                />
+                            </div>
+                        )}
+                    </Spacer>
+                    {this.props.footerTemplate && (
+                        <>
+                            <ContentDivider border type="solid" orientation="horizontal" margin="none" />
+                            {this.props.footerTemplate}
+                        </>
+                    )}
+                </Spacer>
+            </div>
+        );
+    }
+}

package/app-typescript/components/TimePickerV2.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputWrapper } from './Form';
+import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 import {padStart, range} from 'lodash';
 
@@ -28,7 +28,7 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
         this.getOptionsForTimeUnit = this.getOptionsForTimeUnit.bind(this);
         this.padValue = this.padValue.bind(this);
 
-        const hour = new Date().toLocaleTimeString([], { hour: 'numeric' });
+        const hour = new Date().toLocaleTimeString([], {hour: 'numeric'});
         this.is12HourFormat = hour.includes('AM') || hour.includes('PM');
     }
 
@@ -115,15 +115,15 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
     }
 
     padValue(value: number) {
-        return padStart((value).toString(), 2, '0');
+        return padStart(value.toString(), 2, '0');
     }
 
     updatedTimeUnit() {
         const timeUnitValuesArray = this.props.value.split(':');
 
         /**
-        * updating the initial value from props
-        */
+         * updating the initial value from props
+         */
         if (this.is12HourFormat) {
             if (parseInt(timeUnitValuesArray[0], 10) > 12) {
                 timeUnitValuesArray[0] = this.padValue(parseInt(timeUnitValuesArray[0], 10) - 12);
@@ -149,10 +149,10 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                 tabindex={this.props.tabindex}
                 inputWrapper={this.props.inputWrapper}
             >
-                <div className='sd__input__time-picker-v2' data-test-id={this.props['data-test-id']}>
-                    <div className='input-wrapper__time-picker-v2'>
+                <div className="sd__input__time-picker-v2" data-test-id={this.props['data-test-id']}>
+                    <div className="input-wrapper__time-picker-v2">
                         <select
-                            className='sd-input__select'
+                            className="sd-input__select"
                             value={timeUnitValuesArray[0]}
                             onChange={({target}) => {
                                 this.handleTimeChange(0, target.value);
@@ -162,11 +162,11 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                                 <option value={hour} label={hour} key={hour} />
                             ))}
                         </select>
-                        <span className='time-picker-v2-suffix'>:</span>
+                        <span className="time-picker-v2-suffix">:</span>
                     </div>
-                    <div className='input-wrapper__time-picker-v2'>
+                    <div className="input-wrapper__time-picker-v2">
                         <select
-                            className='sd-input__select'
+                            className="sd-input__select"
                             value={timeUnitValuesArray[1]}
                             onChange={({target}) => {
                                 this.handleTimeChange(1, target.value);
@@ -176,12 +176,12 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                                 <option value={minute} label={minute} key={minute} />
                             ))}
                         </select>
-                        {this.props.allowSeconds && (<span className='time-picker-v2-suffix'>:</span>)}
+                        {this.props.allowSeconds && <span className="time-picker-v2-suffix">:</span>}
                     </div>
                     {this.props.allowSeconds && (
-                        <div className='input-wrapper__time-picker-v2'>
+                        <div className="input-wrapper__time-picker-v2">
                             <select
-                                className='sd-input__select'
+                                className="sd-input__select"
                                 value={timeUnitValuesArray[2]}
                                 onChange={({target}) => {
                                     this.handleTimeChange(2, target.value);
@@ -194,11 +194,11 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                         </div>
                     )}
                     {this.is12HourFormat && (
-                        <div className='input-wrapper__time-picker-v2'>
-                            <span className='time-picker-v2-suffix' />
+                        <div className="input-wrapper__time-picker-v2">
+                            <span className="time-picker-v2-suffix" />
                             <select
-                                className='sd-input__select'
-                                value={(parseInt(this.props.value.split(':')[0], 10) >= 12) ? 'PM' : 'AM'}
+                                className="sd-input__select"
+                                value={parseInt(this.props.value.split(':')[0], 10) >= 12 ? 'PM' : 'AM'}
                                 onChange={({target}) => {
                                     let splitValue = this.props.value.split(':');
 
@@ -211,8 +211,8 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                                     this.props.onChange(splitValue.join(':'));
                                 }}
                             >
-                                <option value='AM' label='AM' />
-                                <option value='PM' label='PM' />
+                                <option value="AM" label="AM" />
+                                <option value="PM" label="PM" />
                             </select>
                         </div>
                     )}

package/app-typescript/components/Toast.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import * as ReactDOM from "react-dom";
+import * as ReactDOM from 'react-dom';
 import {MessageProp, IMessageOptions, Position} from './ToastMessage';
 import ToastWrapper from './ToastWrapper';
 
-const TOAST_ID = "react-toast";
+const TOAST_ID = 'react-toast';
 
 interface IMessageId {
     id: string;
@@ -28,17 +28,21 @@ class Toasted {
         if (existingElement) {
             element = existingElement;
         } else {
-            const el = document.createElement("div");
+            const el = document.createElement('div');
             el.id = TOAST_ID;
-            el.className = "sd-toast__container sd-toast__container--top";
+            el.className = 'sd-toast__container sd-toast__container--top';
             document.body.appendChild(el);
             element = el;
         }
 
         ReactDOM.render(
-            <ToastWrapper ref={(ref) => {
-                this.componentRef = ref;
-            }} />, element);
+            <ToastWrapper
+                ref={(ref) => {
+                    this.componentRef = ref;
+                }}
+            />,
+            element,
+        );
     }
 
     notify(message: MessageProp, options: Partial<IMessageOptions>): IMessageId | null {

package/app-typescript/components/ToastMessage.tsx

@@ -2,9 +2,7 @@ import * as React from 'react';
 import ToastText from './ToastText';
 import classNames from 'classnames';
 
-export type MessageProp =
-    | React.ReactNode
-    | string;
+export type MessageProp = React.ReactNode | string;
 
 export type Position = 'top' | 'bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
@@ -24,22 +22,13 @@ interface IProps extends IMessageOptions {
     closeElement(id: string, position: Position): void;
 }
 
-export const ToastMessage = ({
-    id,
-    message,
-    type,
-    icon,
-    size,
-    duration,
-    position,
-    closeElement,
-}: IProps) => {
+export const ToastMessage = ({id, message, type, icon, size, duration, position, closeElement}: IProps) => {
     const [show, setShow] = React.useState(false);
     const [enter, setEnter] = React.useState(false);
     let timer: number;
     React.useEffect(() => setShow(true), []);
 
-    if (typeof duration === "number") {
+    if (typeof duration === 'number') {
         React.useEffect(() => {
             timer = window.setTimeout(() => {
                 close(id, position);

package/app-typescript/components/ToastText.tsx

@@ -1,42 +1,40 @@
 import * as React from 'react';
-import { Icon } from './Icon';
+import {Icon} from './Icon';
 
 interface IProps {
-  id?: string;
-  title?: string | React.ReactNode;
-  icon?: string;
-  onClose: () => void;
+    id?: string;
+    title?: string | React.ReactNode;
+    icon?: string;
+    onClose: () => void;
 }
 
-const ToastText = ({ id, title, icon, onClose}: IProps) => {
-  const ref = React.useRef(null);
-  return (
-    <React.Fragment>
-      {icon ?
-        <div className='sd-toast__icon'>
-          <Icon name={icon} />
-        </div> : null}
-      {typeof title === 'string' ?
-        (<span style={{width: '100%'}} ref={ref} id={id}>
-          <div className='sd-toast__message'>{title}</div>
-        </span>) :
-        <span style={{width: '100%', display: 'inherit'}} ref={ref} id={id}>
-          {title}
-        </span>}
-      {onClose && <Close onClose={onClose} />}
-    </React.Fragment>
-  );
+const ToastText = ({id, title, icon, onClose}: IProps) => {
+    const ref = React.useRef(null);
+    return (
+        <React.Fragment>
+            {icon ? (
+                <div className="sd-toast__icon">
+                    <Icon name={icon} />
+                </div>
+            ) : null}
+            {typeof title === 'string' ? (
+                <span style={{width: '100%'}} ref={ref} id={id}>
+                    <div className="sd-toast__message">{title}</div>
+                </span>
+            ) : (
+                <span style={{width: '100%', display: 'inherit'}} ref={ref} id={id}>
+                    {title}
+                </span>
+            )}
+            {onClose && <Close onClose={onClose} />}
+        </React.Fragment>
+    );
 };
 
-const Close = ({ onClose }: { onClose: () => void }) => (
-  <button
-    className="icn-btn sd-toast__actions"
-    type="button"
-    aria-label="Close"
-    onClick={onClose}
-  >
-    <Icon name='close-small' />
-  </button>
+const Close = ({onClose}: {onClose: () => void}) => (
+    <button className="icn-btn sd-toast__actions" type="button" aria-label="Close" onClick={onClose}>
+        <Icon name="close-small" />
+    </button>
 );
 
 export default ToastText;