superdesk-ui-framework 6.1.0-dev1 → 7.0.0-dev-hg0

package/app-typescript/components/DatePicker.tsx

@@ -1,403 +0,0 @@
-import * as React from 'react';
-import {addDays, startOfToday} from 'date-fns';
-import {format} from 'date-fns';
-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 {Button} from './Button';
-import {getWeekStartByLocale} from 'weekstart';
-import {getMonthNames, getWeekdayNames} from '@sourcefabric/common';
-import {localization} from '../localization';
-import {assertNever} from '../helpers';
-import {TreeSelect} from './TreeSelect/TreeSelect';
-import {Icon} from './Icon';
-
-interface IDatePickerBase extends IInputWrapper {
-    dateFormat: string; // a combination of YYYY, MM, and DD with a custom separator e.g. 'MM/DD/YYYY'
-
-    // 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}>;
-
-    locale?: {type: 'code-only'; code: string} | {type: 'full'; payload: Omit<LocaleSettings, 'today' | 'clear'>};
-
-    hideClearButton?: boolean;
-
-    minYearRange?: string;
-    maxYearRange?: string;
-}
-
-interface IDatePicker extends IDatePickerBase {
-    value: Date | null;
-    onChange(valueNext: Date | null): void;
-    maxDate?: Date;
-    minDate?: Date;
-    'data-test-id'?: string;
-}
-
-const internalPrimereactClassnames = {
-    overlayVisible: 'p-input-overlay-visible',
-};
-
-interface IPrivatePrimeReactCalendarApi {
-    hideOverlay?(): void;
-    panel?: HTMLElement;
-}
-
-interface IState {
-    // required for allowing free text input into the date input field
-    // but calling `props.onChange` only when a valid date is entered
-    value: CalendarProps['value'];
-
-    // valid means it can be parsed
-    valid: boolean;
-}
-
-// tries to parse primereact/calendar value format to IDatePicker['value']
-function parseFromPrimeReactCalendarFormat(value: CalendarProps['value']): IDatePicker['value'] | 'failed-to-parse' {
-    if (Array.isArray(value)) {
-        return 'failed-to-parse'; // arrays aren't supported
-    } else if (value instanceof Date) {
-        return value;
-    } else if (value === '') {
-        return null;
-    } else {
-        // at this point value is a free input string that can't be parsed to a Date inside primereact/calendar
-        return 'failed-to-parse';
-    }
-}
-
-function parseToPrimeReactCalendarFormat(value: IDatePicker['value']): CalendarProps['value'] {
-    return value === null ? undefined : value;
-}
-
-function getDatePickerLocale(code?: string): LocaleSettings {
-    const localeCode = code ?? 'en-US';
-    const firstDayOfWeek = getWeekStartByLocale(localeCode);
-
-    const dayNames: {long: Array<string>; short: Array<string>; narrow: Array<string>} = {
-        long: [],
-        short: [],
-        narrow: [],
-    };
-
-    for (const weekday of getWeekdayNames(0, localeCode)) {
-        dayNames.long.push(weekday.nameLong);
-        dayNames.short.push(weekday.nameShort);
-        dayNames.narrow.push(weekday.nameNarrow);
-    }
-
-    const locale: LocaleSettings = {
-        firstDayOfWeek: firstDayOfWeek,
-        dayNames: dayNames.long,
-        dayNamesShort: dayNames.short,
-        dayNamesMin: dayNames.short, // using short instead of narrow on purpose
-        monthNames: getMonthNames(localeCode, 'long'),
-        monthNamesShort: getMonthNames(localeCode, 'short'),
-        today: localization.translations.today,
-        clear: localization.translations.clear,
-    };
-
-    return locale;
-}
-
-export class DatePicker extends React.PureComponent<IDatePicker, IState> {
-    private instance: IPrivatePrimeReactCalendarApi | undefined;
-    hidePopupOnScroll: () => void;
-    private htmlId = nextId();
-
-    constructor(props: IDatePicker) {
-        super(props);
-        this.state = {
-            value: parseToPrimeReactCalendarFormat(this.props.value),
-            valid: true,
-        };
-
-        this.hidePopupOnScroll = throttle(() => {
-            if (
-                this.instance != null &&
-                this.instance.panel != null &&
-                this.instance.hideOverlay != null &&
-                this.instance.panel.classList.contains(internalPrimereactClassnames.overlayVisible)
-            ) {
-                this.instance.hideOverlay();
-            }
-        }, 300);
-    }
-
-    componentDidMount() {
-        document.addEventListener('scroll', this.hidePopupOnScroll, true);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('scroll', this.hidePopupOnScroll);
-    }
-
-    componentDidUpdate(prevProps: IDatePicker) {
-        // sync internal state with props
-        // the check is more complex than a === b, because value equality is checked rather than reference equality
-        // which prevents infinite loops that may happen otherwise
-        if (this.props.value === null || prevProps.value === null) {
-            // at least one of the values is null so strict comparison can be used
-            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
-            this.setState({value: parseToPrimeReactCalendarFormat(this.props.value), valid: true});
-        }
-    }
-
-    render() {
-        if (this.props.preview) {
-            return (
-                // We have to do type assertion here because we wrap primereact's component using
-                // a narrower interface i.e. primereact supports an array of dates or a single date,
-                // and our wrapped component will only ever use a single date.
-                <div>
-                    <span>{moment(this.state.value as Date).format(this.props.dateFormat)}</span>
-                </div>
-            );
-        }
-
-        const locale: LocaleSettings | undefined = (() => {
-            if (this.props.locale == null) {
-                return undefined;
-            } else if (this.props.locale.type === 'code-only') {
-                return getDatePickerLocale(this.props.locale.code);
-            } else if (this.props.locale.type === 'full') {
-                return {
-                    ...this.props.locale.payload,
-                    today: localization.translations.today,
-                    clear: localization.translations.clear,
-                } satisfies LocaleSettings;
-            } else {
-                return assertNever(this.props.locale);
-            }
-        })();
-
-        const showClearButton = this.props.required === true ? false : this.props.hideClearButton !== true;
-
-        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}
-                inputWrapper={this.props.inputWrapper}
-                fullWidth={this.props.fullWidth}
-            >
-                <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
-                    }
-                    inputId={this.htmlId}
-                    ariaLabelledBy={this.htmlId + 'label'}
-                    ref={(ref) => {
-                        this.instance = ref as unknown as IPrivatePrimeReactCalendarApi;
-
-                        const refAny: any = ref;
-
-                        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) => {
-                        const result = parseFromPrimeReactCalendarFormat(event.value);
-
-                        if (result !== 'failed-to-parse') {
-                            this.setState({value: event.value, valid: true});
-                            this.props.onChange(result);
-                        } else {
-                            // updating internal state so a user can continue typing and enter a valid value
-                            this.setState({value: event.value, valid: false});
-                        }
-                    }}
-                    locale={locale}
-                    placeholder={this.props.dateFormat.replace('YYYY', 'yyyy').replace('MM', 'mm').replace('DD', 'dd')}
-                    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(startOfToday(), 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}
-                    maxDate={this.props.maxDate}
-                    onBlur={(event) => {
-                        // @ts-ignore: Object is possibly 'null'.
-                        if (!event?.target.value) {
-                            // @ts-ignore: Object is possibly 'null'.
-                            this.setState({valid: true, value: null});
-                        } else {
-                            // restoring internal state to current props value
-                            this.setState({valid: true, value: parseToPrimeReactCalendarFormat(this.props.value)});
-                        }
-                    }}
-                    monthNavigator={true}
-                    monthNavigatorComponent={MonthNavigator}
-                    yearNavigator={true}
-                    yearNavigatorComponent={YearNavigator}
-                    yearRange={
-                        this.props.minYearRange && this.props.maxYearRange
-                            ? `${this.props.minYearRange}:${this.props.maxYearRange}`
-                            : `1900:${new Date().getFullYear() + 10}`
-                    }
-                />
-            </InputWrapper>
-        );
-    }
-}
-
-interface IDatePickerISO extends IDatePickerBase {
-    value: string; // will output date formatted according to ISO8601; value can be an empty string
-    onChange(value: string): void; // value can be an empty string
-}
-
-export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
-    render() {
-        return (
-            <DatePicker
-                value={new Date(this.props.value)}
-                onChange={(value) => {
-                    if (value === null) {
-                        this.props.onChange('');
-                    } else {
-                        this.props.onChange(format(value, 'yyyy-MM-dd'));
-                    }
-                }}
-                disabled={this.props.disabled}
-                preview={this.props.preview}
-                hideClearButton={this.props.hideClearButton}
-                headerButtonBar={this.props.headerButtonBar}
-                dateFormat={this.props.dateFormat}
-                locale={this.props.locale}
-                inlineLabel={this.props.inlineLabel}
-                required={this.props.required}
-                fullWidth={this.props.fullWidth}
-                labelHidden={this.props.labelHidden}
-                tabindex={this.props.tabindex}
-                label={this.props.label}
-                info={this.props.info}
-                error={this.props.error}
-                minYearRange={this.props.minYearRange}
-                maxYearRange={this.props.maxYearRange}
-            />
-        );
-    }
-}
-
-function getOptionLabel(options: Array<{id: string; label?: string}>, id: string | null | undefined): string {
-    if (id == null) {
-        return '';
-    }
-    return options.find((option) => option.id === id)?.label ?? id;
-}
-
-const MonthNavigator = ({
-    value,
-    options,
-    onChange,
-}: React.ComponentProps<NonNullable<CalendarProps['monthNavigatorComponent']>>) => (
-    <TreeSelect<string>
-        kind="synchronous"
-        value={[value]}
-        getOptions={() => options.map((option) => ({value: option.id}))}
-        getLabel={(optionId) => getOptionLabel(options, optionId)}
-        getId={(option) => option}
-        onChange={(selected) => {
-            onChange(selected[0]);
-        }}
-        clearable={false}
-        labelHidden
-        valueTemplate={(item) => (
-            <div className="sd-datepicker__navigator-value sd-datepicker__navigator-month">
-                <div>{getOptionLabel(options, item)}</div>
-                <Icon name="chevron-down-thin" />
-            </div>
-        )}
-        inputWrapper={{
-            kind: 'custom',
-            component: ({input}) => <div className="sd-datepicker__navigator-wrapper">{input}</div>,
-        }}
-    />
-);
-
-const YearNavigator = ({
-    value,
-    options,
-    onChange,
-}: React.ComponentProps<NonNullable<CalendarProps['yearNavigatorComponent']>>) => (
-    <TreeSelect<string>
-        kind="synchronous"
-        value={[value]}
-        getOptions={() => options.map((option) => ({value: option.id}))}
-        getLabel={(option) => option}
-        getId={(option) => option}
-        onChange={(selected) => {
-            onChange(selected[0]);
-        }}
-        clearable={false}
-        labelHidden
-        valueTemplate={(item) => (
-            <div className="sd-datepicker__navigator-value sd-datepicker__navigator-year">
-                <div>{item}</div>
-                <Icon name="chevron-down-thin" />
-            </div>
-        )}
-        inputWrapper={{
-            kind: 'custom',
-            component: ({input}) => <div className="sd-datepicker__navigator-wrapper">{input}</div>,
-        }}
-    />
-);

package/app-typescript/components/DateTimePicker.tsx

@@ -1,204 +0,0 @@
-import * as React from 'react';
-import {DatePicker} from '../components/DatePicker';
-import {Spacer} from '@sourcefabric/common';
-import {defaultTo} from 'lodash';
-import {TimePicker} from './TimePicker';
-import {InputWrapper} from './Form';
-import {IInputWrapper} from './Form/InputWrapper';
-import nextId from 'react-id-generator';
-import {format} from 'date-fns';
-import {assertNever} from '../helpers';
-import {Button} from './Button';
-
-interface IBaseProps extends IInputWrapper {
-    dateFormat: string;
-    preview?: boolean;
-    fullWidth?: boolean;
-    allowSeconds?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    ref?: React.LegacyRef<InputWrapper>;
-    'data-test-id'?: string;
-    timeHeaderTemplate?: React.ReactNode;
-    timeFooterTemplate?: React.ReactNode;
-    locale?: DatePicker['props']['locale'];
-}
-
-interface IPropsValueDate {
-    valueType: 'date';
-    value: Date | null;
-    onChange: (value: Date | null) => void;
-}
-
-type IValue = {date?: string; time?: string};
-
-interface IPropsValueObject {
-    valueType: 'object';
-    timeRequiresDate?: boolean;
-    value: IValue;
-    onChange: (value: IValue) => void;
-}
-
-type IProps = (IPropsValueDate | IPropsValueObject) & IBaseProps;
-
-export class DateTimePicker extends React.PureComponent<IProps> {
-    private htmlId: string = nextId();
-
-    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();
-
-            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;
-            }
-
-            const origDate = this.props.value ?? new Date();
-            const selectedDate = new Date(date);
-
-            selectedDate.setHours(origDate.getHours(), origDate.getMinutes());
-
-            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);
-        }
-    };
-
-    prepareFormat(unitOfTime: number) {
-        return unitOfTime.toString().padStart(2, '0');
-    }
-
-    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 ?? null;
-        } 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();
-        const timeRequiresDate = (() => {
-            if (this.props.valueType === 'object') {
-                return this.props.timeRequiresDate === true;
-            } else if (this.props.valueType === 'date') {
-                return false;
-            } else {
-                return assertNever(this.props);
-            }
-        })();
-
-        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="center" noWrap>
-                    <div style={{flexGrow: 1}}>
-                        <DatePicker
-                            disabled={this.props.disabled}
-                            preview={this.props.preview}
-                            required={this.props.required}
-                            hideClearButton={true}
-                            value={dateValue}
-                            locale={this.props.locale}
-                            onChange={this.handleDateChange}
-                            dateFormat={this.props.dateFormat}
-                            inlineLabel
-                            labelHidden
-                            fullWidth={this.props.fullWidth}
-                            data-test-id="date-input"
-                        />
-                    </div>
-                    <div style={{flexGrow: 0, color: 'var(--color-text-muted)'}}>@</div>
-                    <div className="time-picker--date-time" style={{flexGrow: 1}}>
-                        <TimePicker
-                            disabled={this.props.disabled || (timeRequiresDate && dateValue == null)}
-                            preview={this.props.preview}
-                            value={timeValue}
-                            onChange={this.handleTimeChange}
-                            inlineLabel
-                            labelHidden
-                            allowSeconds={this.props.allowSeconds}
-                            fullWidth={this.props.fullWidth}
-                            required={this.props.required}
-                            headerTemplate={this.props.timeHeaderTemplate}
-                            footerTemplate={this.props.timeFooterTemplate}
-                            data-test-id="time-input"
-                        />
-                    </div>
-                    {this.props.preview !== true && (
-                        <Button
-                            icon="remove-sign"
-                            text="Clear"
-                            tooltip="Clear"
-                            onClick={this.handleClear}
-                            type="default"
-                            style="hollow"
-                            iconOnly={true}
-                            disabled={this.props.disabled}
-                        />
-                    )}
-                </Spacer>
-            </InputWrapper>
-        );
-    }
-}

package/app-typescript/components/Divider.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-interface IProps {
-    size?: 'mini' | 'small' | 'medium' | 'large'; // defaults to 'small'
-    border?: boolean;
-}
-
-export class Divider extends React.PureComponent<IProps> {
-    render() {
-        let classes = classNames('button-group__divider', {
-            'button-group__divider--small': this.props.size === undefined,
-            '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} />;
-    }
-}

package/app-typescript/components/DonutChart.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import {Chart} from '@superdesk/primereact/chart';
-import {ChartData, ChartOptions} from 'chart.js';
-
-interface IProps {
-    data: ChartData; // For more information, please refer to chart.js documentationt
-    options: ChartOptions; // For more information, please refer to chart.js documentationt
-    width: string;
-    height: string;
-}
-
-export class DonutChart extends React.Component<IProps, {}> {
-    render() {
-        return (
-            <Chart
-                type="doughnut"
-                width={this.props.width}
-                height={this.props.height}
-                data={this.props.data}
-                options={this.props.options}
-            />
-        );
-    }
-}

package/app-typescript/components/DragHandle.tsx

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-import {DragHandleDots} from './DragHandleDots';
-
-interface IProps {
-    blank?: boolean;
-    dotRows?: '4' | '5' | '6' | '7' | '8' | '10';
-    dotsInRow?: '2' | '3' | '4' | '5';
-    dotColor?: 'light' | 'dark'; // The default is the theme text color, this is an explicit override.
-    className?: string;
-}
-
-const dotSize = 4; // Size of the single dot image (OneDot.svg) that gets repeated and forms the dotted pattern.
-
-export class DragHandle extends React.PureComponent<IProps> {
-    render() {
-        const classes = classNames(
-            'drag-handle-wrapper',
-            {
-                [`drag-handle-wrapper--boxed`]: !this.props.blank,
-                'drag-handle-wrapper--blank': this.props.blank,
-            },
-            this.props.className,
-        );
-
-        const calcSize = (numberOfDots: string) => {
-            return Number(numberOfDots) * dotSize - dotSize / 2;
-        };
-
-        return (
-            <div className={classes}>
-                <DragHandleDots
-                    style={{width: calcSize(this.props.dotsInRow ?? '2'), height: calcSize(this.props.dotRows ?? '4')}}
-                    color={this.props.dotColor}
-                />
-            </div>
-        );
-    }
-}