superdesk-ui-framework 4.0.41 → 4.0.43

package/app-typescript/components/DatePicker.tsx

@@ -8,8 +8,9 @@ import nextId from "react-id-generator";
 import { InputWrapper } from './Form';
 import { IInputWrapper } from './Form/InputWrapper';
 import {Button} from './Button';
-
-export type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
+import {getWeekStartByLocale} from 'weekstart';
+import {getMonthNames, getWeekdayNames} from '@sourcefabric/common';
+import {localization} from '../localization';
 
 interface IDatePickerBase extends IInputWrapper {
     dateFormat: string; // a combination of YYYY, MM, and DD with a custom separator e.g. 'MM/DD/YYYY'
@@ -18,21 +19,9 @@ interface IDatePickerBase extends IInputWrapper {
     // for example [{label: 'tomorrow', days: 1}, {label: 'yesterday', days: -1}]
     headerButtonBar?: Array<{days: number, label: string}>;
 
-    // ability to provide localisation. for example (see https://primefaces.org/primereact/showcase/#/calendar):
-    /*
-        locale={{
-            firstDayOfWeek: 1,
-            dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
-            dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
-            dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
-            monthNames: [
-                "enero", "febrero", "marzo", "abril", "mayo", "junio",
-                "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"
-            ],
-            monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"],
-        }}
-     */
-    locale?: DatePickerLocaleSettings;
+    locale?: {
+        code: string;
+    };
 
     hideClearButton?: boolean;
 }
@@ -81,6 +70,36 @@ function parseToPrimeReactCalendarFormat(value: IDatePicker['value']): CalendarP
     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;
@@ -128,15 +147,6 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
     }
 
     render() {
-        let locale: LocaleSettings | undefined;
-        if (this.props.locale != null) {
-            locale = {
-                ...this.props.locale,
-                today: 'today',
-                clear: 'clear',
-            };
-        }
-
         if (this.props.preview) {
             return (
                 // We have to do type assertion here because we wrap primereact's component using
@@ -209,7 +219,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                             this.setState({value: event.value, valid: false});
                         }
                     }}
-                    locale={locale}
+                    locale={getDatePickerLocale(this.props.locale?.code)}
                     dateFormat={this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd')}
                     showIcon={true}
                     icon="icon-calendar"

package/app-typescript/components/DurationInput.tsx

@@ -85,7 +85,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             }
             if (Number(this.minuteRef.current.value) < 0) {
                 this.setState({
-                    hours: this.zeroPad(Number(this.state.hours)) > 0
+                    hours: parseInt(`${this.zeroPad(Number(this.state.hours))}`, 10) > 0
                     ? this.zeroPad(Number(this.state.hours) - 1)
                     : this.zeroPad(Number(this.state.hours)),
                     minutes: 59,

package/app-typescript/components/Form/InputWrapper.tsx

@@ -28,7 +28,7 @@ export interface IInputWrapper extends IInputCommon {
 
     inputWrapper?: {
         kind: 'custom'; // added to allow union types later
-        component: React.ComponentType<{label: string; input: React.ReactNode}>;
+        component: React.ComponentType<{label: string; input: React.ReactNode; 'data-test-id'?: string}>;
     };
 }
 
@@ -59,7 +59,11 @@ export class InputWrapper extends React.Component<IProps, IState> {
             const Component = this.props.inputWrapper.component;
 
             return (
-                <Component input={this.props.children} label={this.props.label ?? ''} />
+                <Component
+                    input={this.props.children}
+                    label={this.props.label ?? ''}
+                    data-test-id={this.props['data-test-id']}
+                />
             );
         }
 

package/app-typescript/index.ts

@@ -27,7 +27,6 @@ export { getDurationString } from './components/DurationInput';
 export { DatePicker } from './components/DatePicker';
 export { DateTimePicker } from './components/DateTimePicker';
 export { DatePickerISO } from './components/DatePicker';
-export { DatePickerLocaleSettings } from './components/DatePicker';
 export { TimePicker } from './components/TimePicker';
 export { TimePickerV2 } from './components/TimePickerV2';
 export { FormLabel } from './components/FormLabel';
@@ -109,6 +108,7 @@ export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 export {CalendarWeekDayItem, WeeklyCalendarGrid, WeeklyCalendarGridItem} from './components/Lists/CalendarWeekDayItem';
 export { getTextColor } from './helpers';
+export { setupLocalization } from './localization';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/app-typescript/localization.tsx

@@ -0,0 +1,17 @@
+interface ILocalization {
+    translations: {
+        today: string;
+        clear: string;
+    };
+}
+
+export let localization: ILocalization = {
+    translations: {
+        today: 'today',
+        clear: 'clear',
+    },
+};
+
+export function setupLocalization(val: ILocalization) {
+    localization = val;
+}