superdesk-ui-framework 4.0.48 → 4.0.50

package/app/styles/_time.scss

@@ -0,0 +1,28 @@
+.time-unit-highlight {
+    background-color: var(--sd-colour-interactive);
+    color: $white;
+}
+
+.time-unit {
+    transition: all ease 0.2s;
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        box-shadow: inset 0 0 0 1px var(--sd-colour-interactive);
+        cursor: pointer;
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-20);
+    }
+
+    display: flex;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--b-radius--x-small);
+    font-weight: normal;
+    margin-inline-start: var(--gap--x-small);
+    margin-inline-end: var(--gap--x-small);
+    transition: var(--transition__menu-item);
+}

package/app/styles/app.scss

@@ -118,3 +118,4 @@
 
 // React Components
 @import 'avatar';
+@import 'time';

package/app/styles/design-tokens/_design-tokens-general.scss

@@ -31,7 +31,7 @@
     --gap-4: calc(4 * var(--base-increment)); // 32px;
     --gap--xx-large: calc(5 * var(--base-increment)); // 40px;
     --gap-5: calc(5 * var(--base-increment)); // 40px;
-    
+
     --gap--auto: auto;
 
     // BORDER RADIUS
@@ -85,10 +85,13 @@
     --sd-drop-shadow--none: drop-shadow(0 0 0 transparent);
 
     // FORM ELEMENTS
-    // Size 
+    // Size
     --form-element-height-small: var(--space--3);
     --form-element-height-medium: var(--space--4);
     --form-element-height-large: var(--space--5);
+
+    // TRANSITIONS
+    --transition__menu-item: background-color ease 0.1s
 }
 
 
@@ -123,7 +126,7 @@
     --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 2px 6px hsla(0, 0%, 0%, 0.28)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
     --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.38)) drop-shadow(0 3px 8px hsla(0, 0%, 0%, 0.50)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
     --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.44)) drop-shadow(0 6px 16px hsla(0, 0%, 0%, 0.64)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.2));
-    
+
 }
 
 .sd-top-menu,

package/app/styles/form-elements/_checkbox.scss

@@ -61,7 +61,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
             background-color: var(--sd-colour-interactive--hover);
         }
     }
-    
+
 }
 
 // Modifier for .sd-checkbox to create a radio button
@@ -295,7 +295,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
 .sd-check-new--disabled, .sd-check-new[disabled="disabled"] {
     opacity: 0.40;
     cursor: not-allowed !important;
-    
+
     &:hover {
         color: $checkButtonTextColor;
         border-color: $checkButtonBorderColor;
@@ -675,8 +675,8 @@ $checkButtonBorderRadius: $border-radius__base--small;
         & ~ label {
             opacity: 1;
             color: $white;
-            background-color: var(--sd-colour-interactive--active);
-            border-color: var(--sd-colour-interactive--active);
+            background-color: var(--sd-colour-interactive);
+            border-color: var(--sd-colour-interactive);
             border-top-color: var(--sd-colour-interactive--darken-20);
             box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.2);
         }
@@ -748,7 +748,7 @@ $checkButtonBorderRadius: $border-radius__base--small;
         border-top-color: var(--sd-colour-interactive--darken-20);
         box-shadow: inset 0 2px 0 0 hsla(0, 0%, 0%, 0.2);
         color: $white;
-        
+
         &:hover {
             color: $white;
             border-color: var(--sd-colour-interactive--active);

package/app-typescript/components/DateTimePicker.tsx

@@ -22,6 +22,8 @@ interface IPropsValueDate extends IInputWrapper {
     disabled?: boolean;
     ref?: React.LegacyRef<InputWrapper>;
     'data-test-id'?: string;
+    timeHeaderTemplate?: React.ReactNode;
+    timeFooterTemplate?: React.ReactNode;
 }
 
 type IValue = {date?: string; time?: string};
@@ -38,6 +40,8 @@ interface IPropsValueObject extends IInputWrapper {
     disabled?: boolean;
     ref?: React.LegacyRef<InputWrapper>;
     'data-test-id'?: string;
+    timeHeaderTemplate?: React.ReactNode;
+    timeFooterTemplate?: React.ReactNode;
 }
 
 type IProps = IPropsValueDate | IPropsValueObject;
@@ -90,13 +94,13 @@ export class DateTimePicker extends React.PureComponent<IProps> {
         return unitOfTime.toString().padStart(2, '0');
     }
 
-    getTimeValue(): string {
+    getTimeValue(): string | null {
         if (this.props.valueType === 'date') {
             return this.props.value != null
                 ? `${this.prepareFormat(this.props.value.getHours())}:${this.prepareFormat(this.props.value.getMinutes())}`
-                : '';
+                : null;
         } else if (this.props.valueType === 'object') {
-            return this.props.value.time ?? '';
+            return this.props.value.time ?? null;
         } else {
             assertNever(this.props);
         }
@@ -169,6 +173,8 @@ export class DateTimePicker extends React.PureComponent<IProps> {
                             allowSeconds={this.props.allowSeconds}
                             fullWidth={this.props.fullWidth}
                             required={this.props.required}
+                            headerTemplate={this.props.timeHeaderTemplate}
+                            footerTemplate={this.props.timeFooterTemplate}
                         />
                     </div>
                     {this.props.preview !== true && (

package/app-typescript/components/ShowPopup.tsx

@@ -10,6 +10,7 @@ interface IPropsPopupPositioner {
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;
+    'data-test-id'?: string;
 }
 
 export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
@@ -124,6 +125,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
                             display: 'flex',
                             zIndex: this.zIndex,
                         }}
+                        data-test-id={this.props['data-test-id']}
                     >
                         {this.props.children}
                     </div>,

package/app-typescript/components/TimePicker.tsx

@@ -2,16 +2,34 @@ import * as React from 'react';
 import nextId from 'react-id-generator';
 import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
+import {TimePickerPopover} from './TimePickerPopover';
+import {PopupPositioner} from './ShowPopup';
 
 interface IProps extends IInputWrapper {
-    value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
+    value: string | null; // ISO8601 time string(e.g. 16:55) or null if there's no value
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
     'data-test-id'?: string;
 }
 
-export class TimePicker extends React.PureComponent<IProps> {
+interface IState {
+    popupOpen: boolean;
+}
+
+export class TimePicker extends React.PureComponent<IProps, IState> {
     private htmlId = nextId();
+    private timeInputRef: React.RefObject<HTMLInputElement>;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.timeInputRef = React.createRef();
+        this.state = {
+            popupOpen: false,
+        };
+    }
 
     render() {
         if (this.props.preview) {
@@ -34,11 +52,47 @@ export class TimePicker extends React.PureComponent<IProps> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
-                inputWrapper={this.props.inputWrapper}
             >
+                {this.state.popupOpen && (
+                    <PopupPositioner
+                        getReferenceElement={() => this.timeInputRef.current as HTMLElement}
+                        placement="bottom-start"
+                        onClose={() => {
+                            this.setState({
+                                popupOpen: false,
+                            });
+                        }}
+                        data-test-id="time-picker-popover"
+                    >
+                        <TimePickerPopover
+                            value={this.props.value}
+                            onChange={this.props.onChange}
+                            closePopup={() => {
+                                this.setState({
+                                    popupOpen: false,
+                                });
+                            }}
+                            allowSeconds={this.props.allowSeconds}
+                            headerTemplate={this.props.headerTemplate}
+                            footerTemplate={this.props.footerTemplate}
+                        />
+                    </PopupPositioner>
+                )}
                 <input
-                    value={this.props.value}
+                    style={{
+                        cursor: 'pointer',
+                    }}
+                    ref={this.timeInputRef}
+                    value={this.props.value ?? ''}
                     type="time"
+                    onClick={(e) => {
+                        // don't show default popup
+                        e.preventDefault();
+
+                        this.setState({
+                            popupOpen: true,
+                        });
+                    }}
                     className="sd-input__input"
                     id={this.htmlId}
                     aria-labelledby={this.htmlId + 'label'}

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/utils/time.tsx

@@ -0,0 +1,31 @@
+import {range} from 'lodash';
+
+export type ITimeUnit = 'hours' | 'minutes' | 'seconds';
+
+export function getOptionsForTimeUnit(
+    timeUnit: ITimeUnit,
+    is12HourFormat?: boolean,
+    disabledOptions?: {[key: string]: Array<number>},
+): Array<string> {
+    const format12HourArr = [12, ...range(1, 12)];
+
+    const timeUnitArray = (() => {
+        if (timeUnit === 'hours') {
+            if (is12HourFormat) {
+                return format12HourArr;
+            } else {
+                return range(24);
+            }
+        } else {
+            return range(60);
+        }
+    })();
+
+    return timeUnitArray
+        .filter((item) => !(disabledOptions?.[timeUnit] ?? []).includes(item))
+        .map((value) => value.toString().padStart(2, '0'));
+}
+
+export function padValue(value: number) {
+    return value.toString().padStart(2, '0');
+}

package/dist/components/DateTimePicker.tsx

@@ -7,7 +7,7 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
         super(props);
 
         this.state = {
-            dateTime: new Date(),
+            dateTime: null,
         };
     }
 
@@ -17,6 +17,8 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
                 label="Planning date"
                 labelHidden
                 inlineLabel
+                fullWidth
+                valueType="date"
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
                 fullWidth

package/dist/components/TimePicker.tsx

@@ -7,12 +7,12 @@ import {TimePickerV2} from '../../../app-typescript/components/TimePickerV2';
 let minutes = Array.from(Array(60).keys());
 let changedMinutes = minutes.filter((num) => num % 15 !== 0);
 
-class TimePickerExample extends React.PureComponent<{}, {time: string}> {
+class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
     constructor(props) {
         super(props);
 
         this.state = {
-            time: '',
+            time: null,
         };
     }