@talxis/base-controls 1.2406.2 → 1.2406.4

package/src/components/Decimal/Decimal.tsx

@@ -1,120 +0,0 @@
-import { TextField } from "@talxis/react-components/dist/components/TextField";
-import { useInputBasedComponent } from "../../hooks/useInputBasedComponent";
-import { IDecimal, IDecimalOutputs, IDecimalParameters, IDecimalTranslations } from "./interfaces";
-import React, { useEffect } from "react";
-import numeral from "numeral";
-import { NumeralPCF } from "../../utils/NumeralPCF";
-
-export const Decimal = (props: IDecimal) => {
-    const context = props.context;
-    const parameters = props.parameters;
-    const boundValue = parameters.value;
-    const numberFormatting = context.userSettings.numberFormattingInfo;
-
-    const formatter = (value: string | number | null): string | undefined => {
-        if (value == null) {
-            return undefined;
-        }
-        if (isNaN(value as number)) {
-            return value as string;
-        }
-        if (props.parameters.value.type === 'Decimal') {
-            return context.formatting.formatDecimal(parseFloat(value as string), boundValue.attributes?.Precision);
-        }
-        if(props.parameters.value.type === 'Currency') {
-            return props.parameters.value.formatted;
-        }
-        return context.formatting.formatInteger(parseInt(value as string));
-    };
-
-    const extractNumericPart = (str: any): number | undefined => {
-        // Currency control just sends the string up and lets the framework decide whether the value is correct
-        // It only tries to parse the number based on the current user format
-        // This means that the value will also pass if the user inputs his own currency even though
-        // the currency is different on the field
-        const escapeRegExp = (string: string) => {
-            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escaping utility function
-        }
-    
-        let regex: RegExp;
-        NumeralPCF.decimal(numberFormatting);
-        if (props.parameters.value.type === 'Decimal') {
-            regex = new RegExp('^[' + '\\d' + escapeRegExp(numberFormatting.numberDecimalSeparator) + escapeRegExp(numberFormatting.numberGroupSeparator) + '\\s' + escapeRegExp(numberFormatting.negativeSign) + ']+$');
-        } else if (props.parameters.value.type === 'Currency') {
-            NumeralPCF.currency(numberFormatting);
-            regex = new RegExp(
-                '^\\s*' + 
-                '(?:' + escapeRegExp(numberFormatting.currencySymbol) + '\\s*)?' + 
-                '[' +
-                '\\d' + 
-                escapeRegExp(numberFormatting.currencyDecimalSeparator) +
-                escapeRegExp(numberFormatting.currencyGroupSeparator) +
-                '\\s' + 
-                escapeRegExp(numberFormatting.negativeSign) + 
-                ']*' +
-                '(?:\\s*' + escapeRegExp(numberFormatting.currencySymbol) + ')?' +
-                '\\s*$'
-            );
-        } else {
-            regex = new RegExp('^[' + '\\d' + escapeRegExp(numberFormatting.numberGroupSeparator) + '\\s' + escapeRegExp(numberFormatting.negativeSign) + ']+$');
-        }
-        if (regex.test(str)) {
-            return numeral(str).value() ?? undefined;
-        }
-        return str; // Return undefined if no numeric part is extracted
-    };
-    
-    
-    
-    const [value, labels, setValue, onNotifyOutputChanged] = useInputBasedComponent<string | undefined, IDecimalParameters, IDecimalOutputs, IDecimalTranslations>('Decimal', props, {
-        formatter: formatter,
-        valueExtractor: extractNumericPart
-    });
-
-    return (
-        <TextField
-            readOnly={context.mode.isControlDisabled}
-            autoFocus={parameters.AutoFocus?.raw}
-            borderless={parameters.EnableBorder?.raw === false}
-            errorMessage={boundValue.errorMessage}
-            styles={{
-                fieldGroup: {
-                    height: context.mode.allocatedHeight || undefined,
-                    width: context.mode.allocatedWidth || undefined
-                }
-            }}
-            deleteButtonProps={
-                parameters.EnableDeleteButton?.raw === true
-                    ? {
-                        key: "delete",
-                        showOnlyOnHover: true,
-                        iconProps: {
-                            iconName: "Delete",
-                        },
-                        onClick: () => setValue(undefined),
-                    }
-                    : undefined
-            }
-            clickToCopyProps={
-                parameters.EnableCopyButton?.raw === true
-                    ? {
-                        key: "copy",
-                        showOnlyOnHover: true,
-                        iconProps: {
-                            iconName: "Copy",
-                        },
-                    }
-                    : undefined
-            }
-            value={value ?? ""}
-            onBlur={(event) => {
-                onNotifyOutputChanged({
-                    value: extractNumericPart(event.target.value)
-                });
-            }}
-            onChange={(e, value) => {
-                setValue(value);
-            }}
-        />
-    );
-};

package/src/components/Decimal/index.ts

@@ -1,2 +0,0 @@
-export * from "./Decimal";
-export * from "./interfaces";

package/src/components/Decimal/interfaces.ts

@@ -1,20 +0,0 @@
-import { IDecimalNumberProperty } from "../../interfaces";
-import { IInputParameters } from "../../interfaces/parameters";
-import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
-
-export interface IDecimal extends IComponent<IDecimalParameters, IDecimalOutputs, IDecimalTranslations> {
-    
-}
-
-export interface IDecimalParameters extends IInputParameters {
-    //bound parameter
-    value: IDecimalNumberProperty;
-}
-
-export interface IDecimalOutputs extends IOutputs {
-    value?: number;
-}
-
-export interface IDecimalTranslations extends ITranslations {
-
-}

package/src/components/Duration/Duration.tsx

@@ -1,143 +0,0 @@
-import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
-import React, { useEffect } from 'react';
-import { useInputBasedComponent } from '../../hooks/useInputBasedComponent';
-import { IDuration, IDurationOutputs, IDurationParameters, IDurationTranslations } from './interfaces';
-import { IComboBoxOption } from '@fluentui/react';
-import { durationOptions } from '../../sandbox/shared/durationList';
-import { UserSettings } from '../../sandbox/mock/UserSettings';
-import numeral from "numeral";
-import { NumeralPCF } from '../../utils/NumeralPCF';
-import { getDefaultDurationTranslations } from './translations';
-
-export const Duration = (props: IDuration) => {
-    const parameters = props.parameters;
-    const boundValue = parameters.value;
-    const context = props.context;
-    const humanizeDuration = require("humanize-duration");
-    const formattingInfo = context.userSettings as UserSettings;
-    const language = formattingInfo.locale;
-    const numberFormatting = context.userSettings.numberFormattingInfo;
-
-    const formatter = (value: number | null) => {
-        //all duration formatting should happen here
-        if (value === null) return null;
-        const durationInMilliseconds = value * 60000;
-        const units = value < 60 ? ['m'] : value >= 1440 ? ['d'] : ['h'];
-        const options = {
-            units: units,
-            maxDecimalPoints: 2,
-            language: language.slice(0, language.indexOf("-")),
-            decimal: context.userSettings.numberFormattingInfo.numberDecimalSeparator,
-            fallbacks: ["en"]
-        };
-        return humanizeDuration(durationInMilliseconds, options);
-    };
-
-    const valueExtractor = (str: string | null): number | undefined => {
-        //extraction of number of minutes from formatted string should happen here
-       // parsing because labels are string that represent array of strings
-        const minuteLabels= JSON.parse(labels.minute());
-        const minutesLabels= JSON.parse(labels.minutes());
-        const hourLabels= JSON.parse(labels.hour());
-        const hoursLabels= JSON.parse(labels.hours());
-        const dayLabels= JSON.parse(labels.day());
-        const daysLabels= JSON.parse(labels.days());
-        const minuteRegex = new RegExp("^(" + minuteLabels.join('|') + ")\\s|\\s(" + minuteLabels.join('|') + ")$|^(" + minutesLabels.join('|') + ")\\s|\\s(" + minutesLabels.join('|') + ")$", "i");
-        const hourRegex = new RegExp("^(" + hourLabels.join('|') + ")\\s|\\s(" + hourLabels.join('|') + ")$|^(" + hoursLabels.join('|') + ")\\s|\\s(" + hoursLabels.join('|') + ")$", "i");
-        const dayRegex = new RegExp("^(" + dayLabels.join('|') + ")\\s|\\s(" + dayLabels.join('|') + ")$|^(" + daysLabels.join('|') + ")\\s|\\s(" + daysLabels.join('|') + ")$", "i");
-
-        if (str && str.trim()) {
-            let input = str.trim().toLowerCase();
-            let unit = 'minute';
-
-            if (minuteRegex.test(input)) {
-                input = input.replace(minuteRegex, "").trim();
-            } else if (hourRegex.test(input)) {
-                input = input.replace(hourRegex, "").trim();
-                unit = 'hour';
-            } else if (dayRegex.test(input)) {
-                input = input.replace(dayRegex, "").trim();
-                unit = 'day';
-            }
-            const parsedNumber = parseNumber(input);
-            if (parsedNumber && !isNaN(parsedNumber)) {
-                return getDurationInMinutes(parsedNumber, unit);
-            }
-            return NaN;
-        }
-        return undefined;
-    };
-
-    const parseNumber = (input: string): number | undefined => {
-        NumeralPCF.decimal(numberFormatting);
-        return numeral(input).value() ?? undefined;
-    };
-
-    const getDurationInMinutes = (value: number, unit: string): number => {
-        switch (unit) {
-            case 'hour':
-                return 60 * value;
-            case 'day':
-                return 60 * value * 24;
-            case 'minute':
-            default:
-                return value;
-        }
-    };
-
-    const presetOptions = (): IComboBoxOption[] => {
-        const formattedOptions = durationOptions.map(option => ({
-            key: option.Value.toString(),
-            text: formatter(parseInt(option.Label)),
-        }));
-        return formattedOptions;
-    };
-
-    const comboBoxOptions: IComboBoxOption[] = presetOptions();
-
-    const [value, labels, setValue, onNotifyOutputChanged] = useInputBasedComponent<string | null, IDurationParameters, IDurationOutputs, IDurationTranslations>('Duration', props, {
-        formatter: formatter,
-        valueExtractor: valueExtractor,
-        defaultTranslations: getDefaultDurationTranslations(),
-    });
-
-    return (
-            <ComboBox
-                borderless={parameters.EnableBorder?.raw === false}
-                options={comboBoxOptions}
-                allowFreeInput={true}
-                autoComplete='on'
-                autofill={parameters.AutoFocus?.raw === true ? {
-                    autoFocus: true
-                } : undefined}
-                readOnly={context.mode.isControlDisabled}
-                useComboBoxAsMenuWidth
-                errorMessage={boundValue.errorMessage}
-                text={value ?? ''}
-                styles={{
-                    root: {
-                        height: context.mode.allocatedHeight || undefined,
-                        width: context.mode.allocatedWidth || undefined,
-                        display: 'flex',
-                        alignItems: 'center',
-                    },
-                    callout: {
-                        height: 300
-                    }
-                }}
-                onInputValueChange={(text) => {
-                    setValue(text ?? '');
-                }}
-                onBlur={(event) => {
-                    onNotifyOutputChanged({
-                        value: valueExtractor(value)
-                    });
-                }}
-                onChange={(e, value) => {
-                    onNotifyOutputChanged({
-                        value: valueExtractor(value?.text ?? '')
-                    });
-                }}
-            />
-    );
-};

package/src/components/Duration/index.ts

@@ -1,2 +0,0 @@
-export * from './Duration';
-export * from './interfaces';

package/src/components/Duration/interfaces.ts

@@ -1,22 +0,0 @@
-import { IWholeNumberProperty } from "../../interfaces";
-import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
-import { IBaseParameters } from "../../interfaces/parameters";
-
-export interface IDuration extends IComponent<IDurationParameters, IDurationOutputs, IDurationTranslations> {
-}
-
-export interface IDurationParameters extends IBaseParameters {
-    value: IWholeNumberProperty;
-}
-
-export interface IDurationOutputs extends IOutputs {
-    value?: number
-}
-export interface IDurationTranslations extends ITranslations {
-    minute?: {[LCID: number]: string []}
-    minutes?: {[LCID: number]: string[]}
-    hour?: {[LCID: number]: string[]}
-    hours?: {[LCID: number]: string[]}
-    day?: {[LCID: number]: string[]}
-    days?: {[LCID: number]: string[]}
-}

package/src/components/Duration/translations.ts

@@ -1,30 +0,0 @@
-import { IDurationTranslations } from "./interfaces";
-
-export const getDefaultDurationTranslations = (): Required<IDurationTranslations> => {
-    return {
-        minute: {
-            1029: ['min','minuta', 'minuty', 'minute', 'minutu', 'minutě', 'minutou', 'minuta', 'minuty', 'minute', 'minutu', 'minute', 'minutou'],
-            1033: ['min','minute']
-        },
-        minutes: {
-            1029: ['minuty', 'minut', 'minutám', 'minutách', 'minutami', 'minuty', 'minut', 'minutam', 'minutach', 'minutami'],
-            1033: ['minutes']
-        },
-        hour: {
-            1029: ['hod','hodina', 'hodiny', 'hodině', 'hodinu', 'hodinou', 'hodina', 'hodiny', 'hodine', 'hodinu', 'hodinou'],
-            1033: ['hour']
-        },
-        hours: {
-            1029: ['hodiny', 'hodin', 'hodinám', 'hodinách', 'hodinami', 'hodiny', 'hodin', 'hodinam', 'hodinach', 'hodinami'],
-            1033: ['hours']
-        },
-        day: {
-            1029: ['den', 'dne', 'dni', 'dnu', 'dnem', 'den', 'dne', 'dni', 'dnu', 'dnem'],
-            1033: ['day']
-        },
-        days: {
-            1029: ['dny', 'dnů', 'dnům', 'dnech', 'dny', 'dní', 'dny', 'dnu', 'dnom', 'dnech', 'dny', 'dni'],
-            1033: ['days']
-        },
-    };
-};

package/src/components/Grid/Grid.tsx

@@ -1,24 +0,0 @@
-import { createContext, useMemo } from "react";
-import { useComponent } from "../../hooks"
-import { IGridContext } from "./core/interfaces/IGridContext";
-import { Grid as GridModel } from "./core/model/Grid";
-import { IGrid } from "./interfaces";
-import { AgGrid } from './core/components/AgGrid/AgGrid';
-import React from 'react';
-import { gridTranslations } from './translations';
-
-export const GridContext = createContext<IGridContext>(null as any);
-
-export const Grid = (props: IGrid) => {
-    const [labels, notifyOutputChanged] = useComponent('Grid', props, gridTranslations);
-    const grid = useMemo(() => new GridModel(props, labels), []);
-    grid.updateDependencies(props);
-    
-    return (
-        <GridContext.Provider value={{
-            gridInstance: grid
-        }}>
-        <AgGrid />
-        </GridContext.Provider>
-    )
-}

package/src/components/Grid/core/components/AgGrid/AgGrid.tsx

@@ -1,206 +0,0 @@
-import { AgGridReact } from '@ag-grid-community/react';
-import { MessageBar, MessageBarType, useTheme } from "@fluentui/react";
-import { ColumnApi, GridApi, GridState } from "@ag-grid-community/core";
-import { useEffect, useRef } from "react";
-import { useSelectionController } from "../../../selection/controllers/useSelectionController";
-import { useGridInstance } from "../../hooks/useGridInstance";
-import { getGridStyles } from "./styles";
-import React from 'react';
-import { useAgGridController } from "./controllers/useAgGridController";
-import { Paging } from "../../../paging/components/Paging/Paging";
-import { EmptyRecords } from "./components/EmptyRecordsOverlay/EmptyRecords";
-import { Save } from "../Save/Save";
-import { LoadingOverlay } from "./components/LoadingOverlay/LoadingOverlay";
-import { useStateValues } from '@talxis/react-components/dist/hooks';
-import { usePagingController } from '../../../paging/controllers/usePagingController';
-import { IUpdatedRecord } from '../../services/RecordUpdateService/model/RecordUpdateService';
-
-interface IAgGridState extends GridState {
-    '__updatedRecords'?: IUpdatedRecord[]
-}
-
-export const AgGrid = () => {
-    const grid = useGridInstance();
-    const selection = useSelectionController();
-    const gridApiRef = useRef<GridApi<ComponentFramework.PropertyHelper.DataSetApi.EntityRecord>>();
-    const gridColumnApiRef = useRef<ColumnApi>();
-    const containerRef = useRef<HTMLDivElement>(null);
-    const theme = useTheme();
-    //used for grid sizing - only the initial pageSize is relevant for this case
-    let { agColumns, records, onGridReady } = useAgGridController(gridApiRef);
-    const [stateValuesRef, getNewStateValues, setDefaultStateValues] = useStateValues<IAgGridState>(grid.state as IAgGridState);
-    const pagingController = usePagingController();
-    const pageSizeRef = useRef<number>(pagingController.pageSize);
-    const firstRenderRef = useRef(true);
-
-    useEffect(() => {
-        const globalClickHandler = (e: MouseEvent) => {
-            const hasAncestorWithClass = (element: HTMLElement, className: string): boolean => {
-                let parent = element;
-                while (!parent.classList.contains('ag-theme-balham')) {
-                    if (parent.classList.contains(className)) {
-                        return true;
-                    }
-                    if (parent.tagName === 'HTML') {
-                        return false;
-                    }
-                    parent = parent.parentElement!;
-                    if (!parent) {
-                        return true;
-                    }
-                }
-                return false;
-            };
-            try {
-                if (!hasAncestorWithClass(e.target as HTMLElement, 'ag-cell')) {
-                    gridApiRef.current?.stopEditing();
-                }
-            }
-            catch (err) {
-            }
-        }
-        document.addEventListener('click', globalClickHandler)
-        return () => {
-            document.removeEventListener('click', globalClickHandler);
-            if (!gridApiRef.current || grid.isNested) {
-                return;
-            }
-            stateValuesRef.current.__updatedRecords = grid.recordUpdateService.updatedRecords;
-            grid.pcfContext.mode.setControlState(getNewStateValues());
-        }
-    }, []);
-
-    useEffect(() => {
-        const onBeforeUnload = (ev: BeforeUnloadEvent) => {
-            if(grid.recordUpdateService.isDirty) {
-                ev.preventDefault();
-                return 'Unsaved changes!'
-            }
-        }
-        window.addEventListener('beforeunload', onBeforeUnload);
-        return () => {
-            window.removeEventListener('beforeunload', onBeforeUnload);
-        }
-    }, []);
-
-    useEffect(() => {
-        if (!gridApiRef.current) {
-            return;
-        }
-        if (grid.loading) {
-            gridApiRef.current.showLoadingOverlay();
-            return;
-        }
-        gridApiRef.current.hideOverlay()
-    }, [grid.loading]);
-
-    useEffect(() => {
-        if (firstRenderRef.current) {
-            firstRenderRef.current = false;
-            return;
-        }
-        gridApiRef.current?.ensureIndexVisible(0)
-    }, [pagingController.pageNumber]);
-
-
-
-    const getColumnsWidth = () => {
-        let width = 0;
-        for (const column of gridColumnApiRef.current!.getAllGridColumns()) {
-            width = width + column.getActualWidth();
-        }
-        return width;
-    }
-
-    const getAvailableWidth = () => {
-        const rootWrapper = containerRef.current?.querySelector('.ag-root-wrapper');
-        return rootWrapper?.clientWidth ?? 0;
-    }
-
-    const sizeColumnsIfSpaceAvailable = () => {
-        const totalWidth = getColumnsWidth();
-        const availableWidth = getAvailableWidth();
-        if (availableWidth > totalWidth) {
-            gridApiRef.current!.sizeColumnsToFit();
-        }
-    }
-
-    const getGridHeight = () => {
-        if (pageSizeRef.current < grid.records.length) {
-            return pageSizeRef.current;
-        }
-        return grid.records.length;
-    }
-
-    const styles = getGridStyles(theme, getGridHeight());
-    return (
-        <div ref={containerRef} className={`${styles.root} ag-theme-balham`}>
-            {((grid.isEditable && grid.parameters.ChangeEditorMode?.raw !== 'edit') || grid.parameters.ChangeEditorMode?.raw === 'read') &&
-                <Save />
-            }
-            {grid.error &&
-                <MessageBar messageBarType={MessageBarType.error}>
-                    <span dangerouslySetInnerHTML={{
-                        __html: grid.errorMessage!
-                    }} />
-                </MessageBar>
-            }
-            <AgGridReact
-                animateRows
-                rowBuffer={0}
-                rowSelection={grid.selection.type}
-                noRowsOverlayComponent={EmptyRecords}
-                loadingOverlayComponent={LoadingOverlay}
-                onRowSelected={(e) => {
-                    //prevent infinite loop since we are also setting the rows
-                    //when the selection comes from above
-                    if (e.source.includes('api')) {
-                        return;
-                    }
-                    selection.toggle(e.data!, e.node.isSelected()!)
-                }}
-                onCellDoubleClicked={(e) => {
-                    if (grid.isNavigationEnabled && !grid.isEditable) {
-                        grid.openDatasetItem(e.data!.getNamedReference())
-                    }
-                }}
-                onCellMouseOver={(e) => {
-                    if (e.colDef.colId === '__checkbox') {
-                        gridApiRef.current?.setSuppressRowClickSelection(true);
-                    }
-                }}
-                onCellMouseOut={(e) => {
-                    gridApiRef.current?.setSuppressRowClickSelection(false);
-                }}
-                getRowId={(params) => params.data.getRecordId()}
-                onGridReady={(e) => {
-                    gridApiRef.current = e.api as any;
-                    gridColumnApiRef.current = e.columnApi;
-                    if (grid.loading) {
-                        gridApiRef.current?.showLoadingOverlay();
-                    }
-                    setDefaultStateValues({
-                        ...e.api.getState(),
-                        __updatedRecords: []
-                    });
-                    sizeColumnsIfSpaceAvailable();
-                    onGridReady();
-                }}
-                initialState={!grid.isNested ? stateValuesRef.current : undefined}
-                onStateUpdated={(e) => {
-                    if (grid.isNested) {
-                        return;
-                    }
-                    stateValuesRef.current = e.state
-                }}
-                rowHeight={42}
-                columnDefs={agColumns as any}
-                rowData={records}
-            >
-            </AgGridReact>
-            {grid.props.parameters.EnablePagination?.raw !== false &&
-                <Paging />
-            }
-        </div>
-    );
-}

package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import {Icon} from '@fluentui/react';
-import { useGridInstance } from '../../../../hooks/useGridInstance';
-import { Text } from '@fluentui/react/lib/Text';
-import { emptyRecordStyles } from './styles';
-
-export const EmptyRecords = () => {
-    const labels = useGridInstance().labels;
-
-    return (
-    <div className={`${emptyRecordStyles.root} TALXIS__grid__empty-records`}>
-    <Icon className={emptyRecordStyles.icon} iconName='SearchAndApps' />
-    <Text>{labels.norecordsfound()}</Text>
-    </div>
-    )
-}

package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.ts

@@ -1,20 +0,0 @@
-import { mergeStyleSets } from "@fluentui/react";
-
-export const emptyRecordStyles = mergeStyleSets({
-    root: {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 10,
-        alignItems: 'center',
-        position: 'relative',
-        top: 18
-    },
-    icon: {
-        fontSize: 46
-    },
-    image: {
-        'img': {
-            width: '100px'
-        }
-    }
-})

package/src/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.tsx

@@ -1,7 +0,0 @@
-import { SpinnerSize } from '@fluentui/react';
-import { Spinner } from '@fluentui/react/lib/components/Spinner/Spinner';
-import React from 'react';
-
-export const LoadingOverlay = () => {
-    return <Spinner size={SpinnerSize.large} />
-}