superdesk-ui-framework 5.0.2 → 5.0.3

package/.mocharc.json

@@ -1,5 +1,5 @@
 {
     "extension": ["ts", ".tsx"],
-    "spec": "app-typescript/components/*.spec.*",
+    "spec": "app-typescript/**/*.spec.*",
     "require": ["ts-node/register", "./mocha-setup.ts"]
 }

package/app-typescript/components/TimePicker/TimePickerPopover.spec.ts

@@ -0,0 +1,163 @@
+import {describe, it} from 'mocha';
+import * as assert from 'assert';
+import {convert12HourTo24Hour, convert24HourTo12Hour, toInternalState} from './TimePickerPopover';
+
+it('should convert all 12-hour times to 24-hour format', () => {
+    // AM times
+    assert.strictEqual(convert12HourTo24Hour(12, 'am'), 0);
+    assert.strictEqual(convert12HourTo24Hour(1, 'am'), 1);
+    assert.strictEqual(convert12HourTo24Hour(2, 'am'), 2);
+    assert.strictEqual(convert12HourTo24Hour(3, 'am'), 3);
+    assert.strictEqual(convert12HourTo24Hour(4, 'am'), 4);
+    assert.strictEqual(convert12HourTo24Hour(5, 'am'), 5);
+    assert.strictEqual(convert12HourTo24Hour(6, 'am'), 6);
+    assert.strictEqual(convert12HourTo24Hour(7, 'am'), 7);
+    assert.strictEqual(convert12HourTo24Hour(8, 'am'), 8);
+    assert.strictEqual(convert12HourTo24Hour(9, 'am'), 9);
+    assert.strictEqual(convert12HourTo24Hour(10, 'am'), 10);
+    assert.strictEqual(convert12HourTo24Hour(11, 'am'), 11);
+
+    // PM times
+    assert.strictEqual(convert12HourTo24Hour(12, 'pm'), 12);
+    assert.strictEqual(convert12HourTo24Hour(1, 'pm'), 13);
+    assert.strictEqual(convert12HourTo24Hour(2, 'pm'), 14);
+    assert.strictEqual(convert12HourTo24Hour(3, 'pm'), 15);
+    assert.strictEqual(convert12HourTo24Hour(4, 'pm'), 16);
+    assert.strictEqual(convert12HourTo24Hour(5, 'pm'), 17);
+    assert.strictEqual(convert12HourTo24Hour(6, 'pm'), 18);
+    assert.strictEqual(convert12HourTo24Hour(7, 'pm'), 19);
+    assert.strictEqual(convert12HourTo24Hour(8, 'pm'), 20);
+    assert.strictEqual(convert12HourTo24Hour(9, 'pm'), 21);
+    assert.strictEqual(convert12HourTo24Hour(10, 'pm'), 22);
+    assert.strictEqual(convert12HourTo24Hour(11, 'pm'), 23);
+});
+
+it('should convert all 24-hour times to 12-hour format', () => {
+    assert.strictEqual(convert24HourTo12Hour(0), 12);
+    assert.strictEqual(convert24HourTo12Hour(1), 1);
+    assert.strictEqual(convert24HourTo12Hour(2), 2);
+    assert.strictEqual(convert24HourTo12Hour(3), 3);
+    assert.strictEqual(convert24HourTo12Hour(4), 4);
+    assert.strictEqual(convert24HourTo12Hour(5), 5);
+    assert.strictEqual(convert24HourTo12Hour(6), 6);
+    assert.strictEqual(convert24HourTo12Hour(7), 7);
+    assert.strictEqual(convert24HourTo12Hour(8), 8);
+    assert.strictEqual(convert24HourTo12Hour(9), 9);
+    assert.strictEqual(convert24HourTo12Hour(10), 10);
+    assert.strictEqual(convert24HourTo12Hour(11), 11);
+    assert.strictEqual(convert24HourTo12Hour(12), 12);
+    assert.strictEqual(convert24HourTo12Hour(13), 1);
+    assert.strictEqual(convert24HourTo12Hour(14), 2);
+    assert.strictEqual(convert24HourTo12Hour(15), 3);
+    assert.strictEqual(convert24HourTo12Hour(16), 4);
+    assert.strictEqual(convert24HourTo12Hour(17), 5);
+    assert.strictEqual(convert24HourTo12Hour(18), 6);
+    assert.strictEqual(convert24HourTo12Hour(19), 7);
+    assert.strictEqual(convert24HourTo12Hour(20), 8);
+    assert.strictEqual(convert24HourTo12Hour(21), 9);
+    assert.strictEqual(convert24HourTo12Hour(22), 10);
+    assert.strictEqual(convert24HourTo12Hour(23), 11);
+});
+
+describe('toInternalState', () => {
+    describe('null/undefined/empty input', () => {
+        it('should return null state for null input', () => {
+            assert.deepStrictEqual(toInternalState(null), {
+                hours: null,
+                minutes: null,
+                seconds: null,
+                period: null,
+            });
+        });
+
+        it('should return null state for undefined input', () => {
+            assert.deepStrictEqual(toInternalState(undefined), {
+                hours: null,
+                minutes: null,
+                seconds: null,
+                period: null,
+            });
+        });
+
+        it('should return null state for empty string', () => {
+            assert.deepStrictEqual(toInternalState(' '), {
+                hours: null,
+                minutes: null,
+                seconds: null,
+                period: null,
+            });
+        });
+    });
+
+    it('should convert 00:00:00 to 12:00:00 am', () => {
+        assert.deepStrictEqual(toInternalState('00:00:00'), {
+            hours: '12',
+            minutes: '00',
+            seconds: '00',
+            period: 'am',
+        });
+    });
+
+    it('should convert 01:30:45 to 01:30:45 am', () => {
+        assert.deepStrictEqual(toInternalState('01:30:45'), {
+            hours: '01',
+            minutes: '30',
+            seconds: '45',
+            period: 'am',
+        });
+    });
+
+    it('should convert 11:59:59 to 11:59:59 am', () => {
+        assert.deepStrictEqual(toInternalState('11:59:59'), {
+            hours: '11',
+            minutes: '59',
+            seconds: '59',
+            period: 'am',
+        });
+    });
+
+    it('should convert 12:00:00 to 12:00:00 pm', () => {
+        assert.deepStrictEqual(toInternalState('12:00:00'), {
+            hours: '12',
+            minutes: '00',
+            seconds: '00',
+            period: 'pm',
+        });
+    });
+
+    it('should convert 13:30:15 to 01:30:15 pm', () => {
+        assert.deepStrictEqual(toInternalState('13:30:15'), {
+            hours: '01',
+            minutes: '30',
+            seconds: '15',
+            period: 'pm',
+        });
+    });
+
+    it('should convert 23:59:59 to 11:59:59 pm', () => {
+        assert.deepStrictEqual(toInternalState('23:59:59'), {
+            hours: '11',
+            minutes: '59',
+            seconds: '59',
+            period: 'pm',
+        });
+    });
+
+    it('should handle time without seconds and default to 00', () => {
+        assert.deepStrictEqual(toInternalState('14:30'), {
+            hours: '02',
+            minutes: '30',
+            seconds: '00',
+            period: 'pm',
+        });
+    });
+
+    it('should handle time without seconds in morning', () => {
+        assert.deepStrictEqual(toInternalState('09:15'), {
+            hours: '09',
+            minutes: '15',
+            seconds: '00',
+            period: 'am',
+        });
+    });
+});

package/app-typescript/components/TimePicker/TimePickerPopover.tsx

@@ -0,0 +1,286 @@
+import * as React from 'react';
+import {Spacer} from '@sourcefabric/common';
+import {ContentDivider} from '../ContentDivider';
+import {RadioButtonGroup} from '../RadioButtonGroup';
+import {getOptionsForTimeUnit} from '../../utils/time';
+import {TimeValueHolder} from './TimeValueHolder';
+
+export function convert12HourTo24Hour(hour: number, period: 'am' | 'pm'): number {
+    if (period === 'am' && hour === 12) {
+        return 0; // midnight
+    }
+
+    if (period === 'pm' && hour !== 12) {
+        return hour + 12; // PM and not 12
+    }
+
+    return hour; // For 12PM, 1-11AM
+}
+
+export function convert24HourTo12Hour(hour: number) {
+    const remainder = hour % 12;
+
+    return remainder === 0 ? 12 : remainder;
+}
+
+function isAm(hours: number) {
+    return hours < 12;
+}
+
+export function toInternalState(
+    timeStr: string | undefined | null, // will always be in 24h format
+): IState {
+    if (timeStr == null || (timeStr ?? '').trim().length < 1) {
+        return {
+            hours: null,
+            minutes: null,
+            seconds: null,
+            period: null,
+        };
+    }
+
+    const [hours, minutes, seconds] = timeStr.split(':');
+    const secondsDefault = hours != null && minutes != null ? '00' : null;
+
+    return {
+        hours: (() => {
+            if (hours == null) {
+                return null;
+            }
+
+            if (is12HourFormat) {
+                return convert24HourTo12Hour(parseInt(hours, 10)).toString().padStart(2, '0');
+            } else {
+                return hours;
+            }
+        })(),
+        minutes: minutes ?? null,
+        seconds: seconds ?? secondsDefault,
+        period: hours == null ? null : isAm(parseInt(hours, 10)) ? 'am' : 'pm',
+    };
+}
+
+const is12HourFormat: boolean = (() => {
+    const hour = new Date().toLocaleTimeString([]);
+
+    return hour.includes('AM') || hour.includes('PM');
+})();
+
+interface IProps {
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
+    allowSeconds?: boolean;
+    onChange: (nextValue: string) => void;
+    value: string | null;
+}
+
+// internal state is needed in order to be able to wait for all inputs to be filled before triggering `props.onChange`
+interface IState {
+    hours: string | null;
+    minutes: string | null;
+    seconds: string | null;
+    period: 'am' | 'pm' | null;
+}
+
+export class TimePickerPopover extends React.PureComponent<IProps, IState> {
+    // 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);
+        this.scrollToValues = this.scrollToValues.bind(this);
+
+        this.state = toInternalState(props.value);
+    }
+
+    private handleChange(nextState: IState) {
+        this.setState(nextState, () => {
+            let timeParts: Array<string> = [];
+
+            if (this.state.hours == null) {
+                return;
+            }
+
+            if (is12HourFormat) {
+                if (this.state.period == null) {
+                    return;
+                }
+
+                timeParts.push(
+                    convert12HourTo24Hour(parseInt(this.state.hours, 10), this.state.period)
+                        .toString()
+                        .padStart(2, '0'),
+                );
+            } else {
+                timeParts.push(this.state.hours);
+            }
+
+            if (this.state.minutes == null) {
+                return;
+            } else {
+                timeParts.push(this.state.minutes);
+            }
+
+            if (this.props.allowSeconds) {
+                if (this.state.seconds == null) {
+                    return;
+                } else {
+                    timeParts.push(this.state.seconds);
+                }
+            }
+
+            this.props.onChange(timeParts.join(':'));
+        });
+    }
+
+    scrollToValues() {
+        this.inputRefs.forEach((unitOfTime) => unitOfTime?.current?.scrollToValue?.());
+    }
+
+    componentDidMount(): void {
+        this.scrollToValues();
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps>): void {
+        if (this.props.value !== prevProps.value) {
+            this.setState(toInternalState(this.props.value), () => {
+                this.scrollToValues();
+            });
+        }
+    }
+
+    render(): React.ReactNode {
+        const styleForColumnOfUnit: React.CSSProperties = {
+            maxHeight: 190,
+            overflowY: 'auto',
+            scrollbarWidth: 'thin',
+            marginTop: 'var(--gap-1)',
+            scrollBehavior: 'smooth',
+        };
+
+        return (
+            <div className="sd-shadow--z2 radius-md">
+                <Spacer
+                    v
+                    gap="0"
+                    style={{
+                        minWidth: 200,
+                        maxWidth: 'max-content',
+                        backgroundColor: 'var(--color-dropdown-menu-Bg)',
+                        borderRadius: 'var(--b-radius--small)',
+                    }}
+                >
+                    {this.props.headerTemplate && (
+                        <div className="px-1-5 py-1" style={{borderBottom: '1px solid var(--color-line-x-light)'}}>
+                            {this.props.headerTemplate}
+                        </div>
+                    )}
+
+                    <Spacer
+                        h
+                        gap="4"
+                        noWrap
+                        justifyContent="center"
+                        alignItems="start"
+                        style={{paddingInline: 'var(--gap-1)'}}
+                    >
+                        <Spacer v gap="4" style={styleForColumnOfUnit} alignItems="center" noWrap>
+                            {getOptionsForTimeUnit('hours', is12HourFormat).map((hour) => {
+                                const isActiveHour = hour === this.state.hours;
+
+                                return (
+                                    <TimeValueHolder
+                                        key={hour}
+                                        ref={isActiveHour ? this.inputRefs[0] : undefined}
+                                        onClick={() => {
+                                            this.handleChange({...this.state, 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', is12HourFormat).map((minute) => {
+                                const isActiveMinute = minute === this.state.minutes;
+
+                                return (
+                                    <TimeValueHolder
+                                        key={minute}
+                                        ref={isActiveMinute ? this.inputRefs[1] : undefined}
+                                        isActive={isActiveMinute}
+                                        value={minute}
+                                        onClick={() => {
+                                            this.handleChange({...this.state, 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', is12HourFormat).map((second) => {
+                                        const isActiveSecond = second === this.state.seconds;
+
+                                        return (
+                                            <TimeValueHolder
+                                                key={second}
+                                                ref={isActiveSecond ? this.inputRefs[2] : undefined}
+                                                onClick={() => {
+                                                    this.handleChange({...this.state, seconds: second});
+                                                }}
+                                                isActive={isActiveSecond}
+                                                value={second}
+                                            />
+                                        );
+                                    })}
+                                </Spacer>
+                            </>
+                        )}
+
+                        {is12HourFormat && (
+                            <div
+                                style={{
+                                    marginTop: 'var(--gap-1)',
+                                }}
+                            >
+                                <RadioButtonGroup
+                                    onChange={(nextValue) => {
+                                        this.handleChange({...this.state, period: nextValue as 'am' | 'pm'});
+                                    }}
+                                    options={[
+                                        {label: 'AM', value: 'am'},
+                                        {label: 'PM', value: 'pm'},
+                                    ]}
+                                    value={this.state.period == null ? '' : this.state.period}
+                                />
+                            </div>
+                        )}
+                    </Spacer>
+
+                    {this.props.footerTemplate && (
+                        <div className="px-1-5 py-1" style={{borderTop: '1px solid var(--color-line-x-light)'}}>
+                            {this.props.footerTemplate}
+                        </div>
+                    )}
+                </Spacer>
+            </div>
+        );
+    }
+}

package/app-typescript/components/TimePicker/TimeValueHolder.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import {classnames} from '@sourcefabric/common';
+
+interface IProps {
+    isActive?: boolean;
+    value: string;
+    onClick(event: React.MouseEvent<HTMLSpanElement>): void;
+}
+
+export class TimeValueHolder extends React.PureComponent<IProps> {
+    private spanEl: React.RefObject<HTMLSpanElement>;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.spanEl = React.createRef();
+    }
+
+    public scrollToValue() {
+        this.spanEl.current?.scrollIntoView({block: 'start', behavior: 'smooth'});
+    }
+
+    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>
+        );
+    }
+}

package/app-typescript/components/{TimePicker.tsx → TimePicker/index.tsx}

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import nextId from 'react-id-generator';
 import classNames from 'classnames';
-import {InputWrapper} from './Form';
-import {IInputWrapper} from './Form/InputWrapper';
+import {InputWrapper} from '../Form';
+import {IInputWrapper} from '../Form/InputWrapper';
 import {TimePickerPopover} from './TimePickerPopover';
-import {PopupPositioner} from './ShowPopup';
-import {Icon} from './Icon';
-import {IconButton} from './IconButton';
+import {PopupPositioner} from '../ShowPopup';
+import {Icon} from '../Icon';
+import {IconButton} from '../IconButton';
 
 interface IProps extends IInputWrapper {
     value: string | null; // ISO8601 time string(e.g. 16:55) or null if there's no value
@@ -120,18 +120,12 @@ export class TimePicker extends React.PureComponent<IProps, IState> {
                         ref={this.timeInputRef}
                         value={this.props.value ?? ''}
                         type="time"
-                        onClick={(e) => {
-                            // don't show default popup
-                            e.preventDefault();
-
+                        onClick={() => {
                             this.setState({
                                 popupOpen: !this.state.popupOpen,
                             });
                         }}
                         onKeyDown={(event) => {
-                            // don't show default popup
-                            event.preventDefault();
-
                             if (event.key === ' ') {
                                 this.setState({
                                     popupOpen: !this.state.popupOpen,

package/dist/components/TimePicker.tsx

@@ -36,7 +36,12 @@ class TimePickerExample extends React.PureComponent<{}, {time: string | null}> {
                         <Button size="small" text="In 30 min" style="hollow" onClick={() => false} />
                         <Button size="small" text="In 1 hr" style="hollow" onClick={() => false} />
                         <Button size="small" text="In 2 hr" style="hollow" onClick={() => false} />
-                        <Button size="small" text="In 5 hr" style="hollow" onClick={() => false} />
+                        <Button
+                            size="small"
+                            text="16:32"
+                            style="hollow"
+                            onClick={() => this.setState({time: '16:32'})}
+                        />
                     </ButtonGroup>
                 }
                 footerTemplate={<div>Footer</div>}
@@ -65,7 +70,7 @@ export default class TimePickerDoc extends React.Component<{}, {time: string}> {
     render() {
         return (
             <section className="docs-page__container">
-                <h2 className="docs-page__h2">Time picker</h2>
+                <h2 className="docs-page__h2">Time picker 1</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <TimePicker
                         value={this.state.time}