superdesk-ui-framework 5.0.2 → 5.0.4

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/app-typescript/components/Tooltip.tsx

@@ -37,7 +37,7 @@ export class Tooltip extends React.PureComponent<IProps> {
             return (
                 <TooltipV2 content={this.props.text ?? ''} placement={flowToPlacement(this.props.flow)}>
                     {({attributes}) => (
-                        <div {...attributes} style={{display: 'inline-flex'}}>
+                        <div {...attributes} style={{display: 'contents'}}>
                             {this.props.children}
                         </div>
                     )}

package/app-typescript/components/TooltipV2.tsx

@@ -24,27 +24,16 @@ export class TooltipV2 extends React.PureComponent<IPropsTooltipV2> {
                 placement={this.props.placement ?? 'top'}
                 component={() => {
                     return (
-                        <div data-theme="dark-ui">
-                            <div
-                                style={{
-                                    background: 'var(--color-bg-100)',
-                                    color: 'var(--color-text)',
-                                    borderRadius: 'var(--b-radius--medium)',
-                                    paddingInline: 'var(--space--0-5)',
-                                    fontSize: 'var(--text-size-x-small)',
-                                    margin: 2,
-                                }}
-                            >
-                                {(() => {
-                                    if (typeof this.props.content === 'string') {
-                                        return <span>{this.props.content}</span>;
-                                    } else {
-                                        const Component = this.props.content;
+                        <div className="tooltip">
+                            {(() => {
+                                if (typeof this.props.content === 'string') {
+                                    return <span>{this.props.content}</span>;
+                                } else {
+                                    const Component = this.props.content;
 
-                                        return <Component />;
-                                    }
-                                })()}
-                            </div>
+                                    return <Component />;
+                                }
+                            })()}
                         </div>
                     );
                 }}
@@ -63,7 +52,7 @@ export class TooltipV2 extends React.PureComponent<IPropsTooltipV2> {
                         return this.props.children({attributes});
                     } else {
                         return (
-                            <span {...attributes} style={{display: 'inline-flex'}}>
+                            <span {...attributes} style={{display: 'contents'}}>
                                 {this.props.children}
                             </span>
                         );

package/app-typescript/components/_Positioner.tsx

@@ -93,6 +93,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
                 }}
                 tabIndex={0}
                 role="dialog"
+                data-theme={this.props.theme}
                 aria-labelledby="popoverTitle"
                 onKeyDown={(event) => {
                     if (event.key === 'Escape') {
@@ -111,6 +112,7 @@ interface IPropsPositioner {
     triggerSelector: string;
     placement: PopperOptions['placement'];
     className?: string;
+    theme?: 'light-ui' | 'dark-ui';
 }
 
 interface IStatePositioner {

package/dist/components/Popover.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Popover, PropsList, Prop} from '../../../app-typescript';
+import {Popover, PropsList, Prop, Button, ButtonGroup} from '../../../app-typescript';
 
 import * as Markup from '../../js/react';
 
@@ -23,13 +23,20 @@ export class PopoverDoc extends React.Component {
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
                             <div className="form__row">
-                                <button
-                                    className="btn btn-default btn--small"
-                                    aria-haspopup="true"
-                                    id="button-view-content"
-                                >
-                                    Open popover
-                                </button>
+                                <ButtonGroup>
+                                    <Button
+                                        aria-haspopup="true"
+                                        id="button-view-content"
+                                        text="Open popover"
+                                        onClick={() => false}
+                                    />
+                                    <Button
+                                        aria-haspopup="true"
+                                        id="button-view-content-dark"
+                                        text="Open popover"
+                                        onClick={() => false}
+                                    />
+                                </ButtonGroup>
 
                                 <Popover
                                     triggerSelector="#button-view-content"
@@ -38,6 +45,15 @@ export class PopoverDoc extends React.Component {
                                 >
                                     Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.
                                 </Popover>
+                                <Popover
+                                    triggerSelector="#button-view-content-dark"
+                                    title="Popover test"
+                                    placement="top-end"
+                                    theme="dark-ui"
+                                >
+                                    Enforce a dark theme. Donec sed odio dui. Aenean lacinia bibendum nulla sed
+                                    consectetur.
+                                </Popover>
                             </div>
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -83,6 +99,13 @@ export class PopoverDoc extends React.Component {
                         default="auto"
                         description="Define the placement of the Popover."
                     />
+                    <Prop
+                        name="theme"
+                        isRequired={false}
+                        type="light-ui | dark-ui"
+                        default="/"
+                        description="Define the theme of the Popover. It will inherit the default theme if not set."
+                    />
                 </PropsList>
             </section>
         );

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}

package/dist/components/Tooltips.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import * as Markup from '../../js/react';
 
-import {Tooltip, Prop, PropsList, Button} from '../../../app-typescript';
+import {Tooltip, Prop, PropsList, Button, ButtonGroup} from '../../../app-typescript';
 
 export default class TooltipDoc extends React.Component {
     render() {
@@ -20,18 +20,20 @@ export default class TooltipDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <Tooltip content="I'm on top">
-                                <Button text="top" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip content="I'm at the bottom" placement="bottom">
-                                <Button text="bottom" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip content="I open on the left" placement="left">
-                                <Button text="left" onClick={() => false} />
-                            </Tooltip>
-                            <Tooltip content="Right on!" placement="right">
-                                <Button text="right" onClick={() => false} />
-                            </Tooltip>
+                            <ButtonGroup>
+                                <Tooltip content="I'm on top">
+                                    <Button text="top" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip content="I'm at the bottom" placement="bottom">
+                                    <Button text="bottom" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip content="I open on the left" placement="left">
+                                    <Button text="left" onClick={() => false} />
+                                </Tooltip>
+                                <Tooltip content="Right on!" placement="right">
+                                    <Button text="right" onClick={() => false} />
+                                </Tooltip>
+                            </ButtonGroup>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>