@talxis/base-controls 1.2406.2 → 1.2406.4

package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx

@@ -1,67 +0,0 @@
-import React, { ReactElement } from "react";
-import { useEffect, useState } from "react";
-import { Text } from '@fluentui/react/lib/Text';
-import { optionSetStyles } from "./styles";
-import color from 'color';
-import { useTheme } from "@fluentui/react";
-import { IGridColumn } from "../../../../interfaces/IGridColumn";
-import { useGridInstance } from "../../../../hooks/useGridInstance";
-import { DataType } from "../../../../enums/DataType";
-
-interface IReadOnlyOptionSet {
-    column: IGridColumn;
-    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
-    defaultRender: () => ReactElement
-}
-
-export const ReadOnlyOptionSet = (props: IReadOnlyOptionSet) => {
-    const grid = useGridInstance();
-    const { record, column, defaultRender } = { ...props }
-    const [options, setOptions] = useState<ComponentFramework.PropertyHelper.OptionMetadata[] | null>(null);
-    const theme = useTheme();
-    const defaultColor = theme.palette.neutralLight;
-
-    useEffect(() => {
-        (async () => {
-            const getOptions = async (): Promise<ComponentFramework.PropertyHelper.OptionMetadata[]> => {
-                const [defaultValue, options] = await grid.metadata.getOptions(column);
-                let value: any = record.getValue(column.key);
-                if (column.dataType === DataType.OPTIONSET) {
-                    value = value ? [parseInt(value)] : null;
-                }
-                if (column.dataType === DataType.MULTI_SELECT_OPTIONSET) {
-                    value = value ? value.split(',').map((value: string) => parseInt(value)) : null;
-                }
-                if (column.dataType === DataType.TWO_OPTIONS) {
-                    value = [parseInt(value)];
-                }
-                return options.filter(option => value?.includes(option.Value)) ?? [];
-            }
-            const results = await getOptions();
-            setOptions(results);
-        })();
-    }, [record.getValue(column.key)]);
-
-    //options not loaded yet
-    if (options === null) {
-        return <></>
-    }
-    //options loaded but either no value selected or no colors are present
-    if (options.length === 0 || !options.find(x => x.Color)) {
-        return defaultRender();
-    }
-    else {
-        return (
-            <div className={optionSetStyles.root}>
-                {options.map(x => <div
-                    key={x.Value}
-                    title={x.Label}
-                    className={optionSetStyles.option}
-                    style={{ backgroundColor: x.Color ?? defaultColor, color: new color(x.Color ?? defaultColor).isDark() ? 'white' : 'black' }}>
-                    <Text>{x.Label}</Text>
-                </div>)}
-            </div>
-        )
-    }
-
-}

package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.ts

@@ -1,24 +0,0 @@
-import { mergeStyleSets } from "@fluentui/react";
-
-export const optionSetStyles = mergeStyleSets({
-    root: {
-        display: 'flex',
-        gap: 5,
-        overflow: 'hidden',
-        '--light': 80,
-        '--threshold': 60,
-        flexGrow: 1
-    },
-    option: {
-        borderRadius: 5,
-        paddingLeft: 4,
-        paddingRight: 4,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        flexGrow: 1,
-        textAlign: 'center',
-        '>span': {
-            color: 'inherit',
-        }
-    }
-})

package/src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts

@@ -1,56 +0,0 @@
-import { ITheme, mergeStyleSets, keyframes } from "@fluentui/react";
-
-const shimmer = keyframes({
-    '100%': {
-      backgroundPosition: '150px 0'
-    },
-  });
-
-export const getReadOnlyCellStyles = (theme: ITheme) => {
-    return mergeStyleSets({
-        root: {
-            display: 'flex',
-            height: '100%',
-            alignItems: 'center',
-            gap: 10
-        },
-        text: {
-            fontSize: 14,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        },
-        link: {
-            fontSize: 14,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        },
-        fileWrapper: {
-            display: 'flex',
-            gap: 3
-        },
-        image: {
-            marginRight: 5,
-            'img': {
-                width: 32
-            }
-        },
-        cellContent: {
-            display: 'flex',
-            height: '100%',
-            alignItems: 'center',
-            flexGrow: 1,
-            overflow: 'hidden',
-            ':has([data-align="right"])': {
-                justifyContent: 'flex-end',
-            }
-        },
-        loadingLine: {
-            height: 7,
-            borderRadius: 5,
-            width: '100%',
-            animation: `${shimmer} 2s infinite`,
-            backgroundSize: '1000px 100%',
-            background: `linear-gradient(to right, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 4%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 5%) 25%, color-mix(in oklab, ${theme.palette.white}, ${theme.palette.black} 8%) 36%)`
-        }
-    })
-}

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

@@ -1,71 +0,0 @@
-import { useRef, useState } from 'react';
-import { CommandBarButton, Icon, Label, useTheme } from '@fluentui/react';
-import { FilterCallout, IFilterCallout } from '../../../filtering/components/FilterCallout/FilterCallout';
-import { IGridColumn } from '../../interfaces/IGridColumn';
-import { ISortingContextualMenu, SortingContextualMenu } from '../../../sorting/components/SortingContextualMenu/SortingContextualMenu';
-import { getColumnHeaderStyles } from './styles';
-import { useGridInstance } from '../../hooks/useGridInstance';
-import React from 'react';
-
-export interface IColumnHeader {
-    baseColumn: IGridColumn;
-}
-
-export const ColumnHeader = (props: IColumnHeader) => {
-    console.log(props);
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const [columnHeaderContextualMenuProps, setColumnHeaderContextualMenuProps] = useState<ISortingContextualMenu | null>(null);
-    const [filterCalloutProps, setFilterCalloutProps] = useState<IFilterCallout | null>(null);
-    const columnHeaderStyles = getColumnHeaderStyles(useTheme());
-    const buttonRef = useRef<HTMLElement>(null);
-
-    const onClick = () => {
-        if ((column.isFilterable === false && column.isSortable === false)) {
-            return;
-        }
-        setColumnHeaderContextualMenuProps({
-            column: column,
-            onDismiss: (e, dismissAll, showFilterCallout) => {
-                setColumnHeaderContextualMenuProps(null);
-                if (!showFilterCallout) {
-                    return;
-                }
-                setFilterCalloutProps({
-                    column: column,
-                    onDismiss: () => {
-                        setFilterCalloutProps(null)
-                    }
-                })
-            }
-        });
-    }
-    return (
-        <>
-            <CommandBarButton
-                elementRef={buttonRef}
-                title={column.displayName}
-                className={columnHeaderStyles.root}
-                onClick={onClick}
-            >
-                {grid.isEditable && !column.isEditable && <Icon className={columnHeaderStyles.editIcon} iconName='Uneditable' />}
-                <div className={columnHeaderStyles.labelWrapper}>
-                    <Label className={columnHeaderStyles.label}>{column.displayName}</Label>
-                    {column.isRequired &&
-                        <span className={columnHeaderStyles.requiredSymbol}>*</span>
-                    }
-                </div>
-                <div className={columnHeaderStyles.filterSortIcons}>
-                    {column.isSorted && <Icon iconName={column.isSortedDescending ? 'SortDown' : 'SortUp'} />}
-                    {column.isFiltered && <Icon iconName='Filter' />}
-                </div>
-            </CommandBarButton>
-            {columnHeaderContextualMenuProps &&
-                <SortingContextualMenu target={buttonRef} {...columnHeaderContextualMenuProps} />
-            }
-            {filterCalloutProps &&
-                <FilterCallout target={buttonRef} {...filterCalloutProps} />
-            }
-        </>
-    )
-};

package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx

@@ -1,31 +0,0 @@
-import { Checkbox, useTheme } from "@fluentui/react";
-import React from "react";
-import { useSelectionController } from "../../../../../selection/controllers/useSelectionController";
-import { useGridInstance } from "../../../../hooks/useGridInstance";
-import { getGlobalCheckboxStyles } from "./styles";
-
-export const GlobalCheckBox = () => {
-    const grid = useGridInstance();
-    const theme = useTheme();
-    const styles = getGlobalCheckboxStyles(theme);
-    const selection = useSelectionController();
-    if(grid.dataset.sortedRecordIds.length === 0) {
-        return <></>
-    }
-    return (
-        <div className={styles.root}>
-            {selection.type === 'multiple' &&
-                <Checkbox
-                    checked={selection.allRecordsSelected}
-                    indeterminate={selection.selectedRecordIds.length > 0 && !selection.allRecordsSelected}
-                    onChange={(e, checked) => {
-                        if(checked) {
-                            selection.selectAll()
-                            return;
-                        }
-                        selection.clear();
-                    }} />
-            }
-        </div>
-    )
-};

package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts

@@ -1,16 +0,0 @@
-import { ITheme, mergeStyleSets } from "@fluentui/react"
-
-export const getGlobalCheckboxStyles = (theme: ITheme) => {
-    return mergeStyleSets({
-        root: {
-            backgroundColor: theme.palette.white,
-            flexGrow: 1,
-            display: 'flex',
-            justifyContent: 'center',
-            height: '100%',
-            alignItems: 'center',
-            position: 'relative',
-            left: 1
-        }
-    });
-}

package/src/components/Grid/core/components/ColumnHeader/styles.ts

@@ -1,40 +0,0 @@
-import { ITheme, mergeStyleSets } from "@fluentui/react";
-
-export const getColumnHeaderStyles = (theme: ITheme) => {
-    return mergeStyleSets({
-        root: {
-            width: '100%',
-            textAlign: 'left',
-            height: 42,
-            paddingLeft: 10,
-            paddingRight: 10,
-            '.ms-Button-flexContainer': {
-                justifyContent: 'flex-start',
-                gap: 2
-            }
-        },
-        labelWrapper: {
-            flex: 1,
-            display: 'flex',
-            minWidth: 0
-        },
-        label: {
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            cursor: 'pointer',
-        },
-        requiredSymbol: {
-            color: theme.semanticColors.errorIcon,
-            position: 'relative',
-            top: 4,
-            left: 2
-        },
-        filterSortIcons: {
-            display: 'flex',
-            gap: 2
-        },
-        editIcon: {
-            marginRight: 3
-        }
-    })
-}

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

@@ -1,59 +0,0 @@
-import { IParameters } from "../../../../../interfaces/parameters";
-import { DateTime } from "../../../../DateTime/DateTime";
-import { Decimal } from "../../../../Decimal/Decimal";
-import { Lookup } from "../../../../Lookup/Lookup";
-import { MultiSelectOptionSet } from "../../../../MultiSelectOptionSet/MultiSelectOptionSet";
-import { OptionSet } from "../../../../OptionSet/OptionSet";
-import { TextField } from "../../../../TextField/TextField";
-import { TwoOptions } from "../../../../TwoOptions/TwoOptions";
-import { Duration } from "../../../../Duration/Duration";
-import { DataType } from "../../enums/DataType";
-import { IGridColumn } from "../../interfaces/IGridColumn";
-import { useComponentController } from "./controller/useComponentController";
-import React from 'react';
-
-export interface IComponentProps {
-    column: IGridColumn;
-    value: any;
-    formattedValue?: string;
-    onNotifyOutputChanged: (value: any) => void;
-    additionalParameters?: IParameters;
-}
-
-export const Component = (props: IComponentProps) => {
-    const controller = useComponentController(props);
-    const {column, componentProps} = {...controller};
-    if(!column) {
-        return <></>
-    }
-    switch(column.dataType) {
-        case DataType.TWO_OPTIONS: {
-            return <TwoOptions {...componentProps!} />
-        }
-        case DataType.OPTIONSET: {
-            return <OptionSet {...componentProps!} />
-        }
-        case DataType.MULTI_SELECT_OPTIONSET: {
-            return <MultiSelectOptionSet {...componentProps!} />
-        }
-        case DataType.DATE_AND_TIME_DATE_AND_TIME:
-        case DataType.DATE_AND_TIME_DATE_ONLY: {
-            return <DateTime {...componentProps!} />
-        }
-        case DataType.DECIMAL:
-        case DataType.WHOLE_NONE:
-        case DataType.CURRENCY: {
-            return <Decimal {...componentProps!} />
-        }
-        case DataType.LOOKUP_SIMPLE:
-        case DataType.LOOKUP_OWNER: {
-            return <Lookup {...componentProps!} />
-        }
-        case DataType.WHOLE_DURATION: {
-            return <Duration {...componentProps!} />
-        }
-        default: {
-            return <TextField {...componentProps!} />
-        }
-    }
-}

package/src/components/Grid/core/components/Component/controller/useComponentController.ts

@@ -1,39 +0,0 @@
-import { useEffect, useMemo,useRef,useState } from "react"
-import { IComponentProps } from "../Component";
-import { Component } from '../model/Component';
-import { useGridInstance } from "../../../hooks/useGridInstance";
-import { IComponent } from "../../../../../../interfaces/context";
-import { IGridColumn } from "../../../interfaces/IGridColumn";
-
-interface IComponentController {
-    column: IGridColumn;
-    componentProps: IComponent<any, any, any>;
-}
-
-export const useComponentController = (props: IComponentProps): IComponentController | undefined => {
-    const grid = useGridInstance();
-    const component = useMemo(() => new Component(grid), []);
-    const [controller, setController] = useState<IComponentController>();
-    const mountedRef = useRef<boolean>(true);
-    
-    useEffect(() => {
-        (async () => {
-            const componentProps = await component.getControlProps(props);
-            if(!mountedRef.current) {
-                return;
-            }
-            setController({
-                column: props.column,
-                componentProps: componentProps
-            })
-        })();
-    }, [props]);
-
-    useEffect(() => {
-        return () => {
-            mountedRef.current = false;
-        }
-    }, []);
-
-    return controller;
-}

package/src/components/Grid/core/components/Component/model/Component.ts

@@ -1,251 +0,0 @@
-import dayjs from "dayjs";
-import { IComponent } from "../../../../../../interfaces/context";
-import { IParameters } from "../../../../../../interfaces/parameters";
-import { IDateTime } from "../../../../../DateTime/interfaces";
-import { IDecimal } from "../../../../../Decimal/interfaces";
-import { IDuration } from "../../../../../Duration";
-import { ILookup } from "../../../../../Lookup/interfaces";
-import { IMultiSelectOptionSet } from "../../../../../MultiSelectOptionSet/interfaces";
-import { IOptionSet } from "../../../../../OptionSet/interfaces";
-import { ITextField } from "../../../../../TextField/interfaces";
-import { ITwoOptions } from "../../../../../TwoOptions/interfaces";
-import { ColumnValidation } from "../../../../validation/model/ColumnValidation";
-import { DataType } from "../../../enums/DataType";
-import { GridDependency } from "../../../model/GridDependency";
-import { IComponentProps } from "../Component";
-
-// Debounce utility function with async/await
-const debounce = (func: (...args: any[]) => Promise<any>, wait: number) => {
-    let timeout: NodeJS.Timeout | null = null;
-    let promiseCache: Promise<any> | null = null;
-
-    return async (...args: any[]) => {
-        if (!promiseCache) {
-            promiseCache = func(...args);
-        }
-
-        if (timeout) clearTimeout(timeout);
-
-        timeout = setTimeout(() => {
-            promiseCache = null;
-        }, wait);
-
-        return promiseCache;
-    };
-};
-
-export class Component extends GridDependency {
-    private _debouncedGetLookupValue = debounce(this._getLookupValue.bind(this), 50);
-    private static _lookupSavedQueriesCache = new Map<string, Promise<ComponentFramework.WebApi.Entity>>;
-
-    public async getControlProps(props: IComponentProps): Promise<IComponent<any, any, any>> {
-        const { column, value, onNotifyOutputChanged, additionalParameters, formattedValue } = { ...props };
-        const [isValid, validationErrorMessage] = new ColumnValidation(this._grid, props.column).validate(value);
-        switch (column.dataType) {
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_OWNER: {
-                const columnMetadata = await this._grid.metadata.get(column);
-                const targets = columnMetadata.Attributes.get(column.attributeName).attributeDescriptor.Targets ?? [];
-                if (column.dataType === DataType.LOOKUP_OWNER) {
-                    targets.push('systemuser', 'team')
-                }
-                const result = {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            getAllViews: async (entityName: string) => {
-                                if (!Component._lookupSavedQueriesCache.get(entityName)) {
-                                    Component._lookupSavedQueriesCache.set(entityName, new Promise(async (resolve) => {
-                                        const response = await this._pcfContext.webAPI.retrieveMultipleRecords('savedquery', `?$filter=returnedtypecode eq '${entityName}' and querytype eq 64&$select=name,savedqueryid,fetchxml`);
-                                        resolve(response.entities[0])
-                                    }))
-                                }
-                                const result = await Component._lookupSavedQueriesCache.get(entityName)!;
-                                return [
-                                    {
-                                        isDefault: true,
-                                        viewName: result.name,
-                                        viewId: result.savedqueryid,
-                                        fetchXml: result.fetchxml
-                                    }
-                                ]
-                            },
-                            raw: await this._debouncedGetLookupValue(targets, value),
-                            attributes: {
-                                Targets: targets
-                            },
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-
-                } as ILookup;
-                return result;
-            }
-            case DataType.TWO_OPTIONS: {
-                const twoOptionsValue = value as boolean | undefined | null;
-                const [defaultValue, options] = await this._grid.metadata.getOptions(column)
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: twoOptionsValue === true ? true : false,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Options: options
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as ITwoOptions
-            }
-            case DataType.OPTIONSET: {
-                const optionSetValue = value as number | null | undefined;
-                const [defaultValue, options] = await this._grid.metadata.getOptions(column)
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: optionSetValue ?? null,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Options: options
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as IOptionSet;
-            }
-            case DataType.MULTI_SELECT_OPTIONSET: {
-                const [defaultValue, options] = await this._grid.metadata.getOptions(column)
-                const optionSetValue = value as number[] | null | undefined;
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: optionSetValue ?? null,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Options: options
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as IMultiSelectOptionSet
-            }
-            case DataType.DATE_AND_TIME_DATE_AND_TIME:
-            case DataType.DATE_AND_TIME_DATE_ONLY: {
-                const dateTimeValue = value as Date | null | undefined;
-                const metadata = await this._grid.metadata.get(column);
-                const date = dayjs(dateTimeValue);
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: date.isValid() ? date.toDate() : dateTimeValue,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage,
-                            attributes: {
-                                Behavior: metadata.Attributes.get(column.attributeName).Behavior,
-                                Format: column.dataType
-                            }
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as IDateTime;
-            }
-            case DataType.WHOLE_NONE:
-            case DataType.DECIMAL:
-            case DataType.CURRENCY:
-            case DataType.WHOLE_DURATION: {
-                const decimalValue = value as number | null | undefined
-                const metadata = await this._grid.metadata.get(column);
-                const precision = metadata.Attributes.get(column.attributeName).Precision;
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        value: {
-                            raw: decimalValue ?? null,
-                            error: !isValid,
-                            //formatted value is only used for currency => there is no way to get the currency symbol so the formatCurrency method is useless
-                            formatted: formattedValue,
-                            errorMessage: validationErrorMessage,
-                            type: column.dataType,
-                            attributes: {
-                                Precision: precision
-                            }
-                        },
-                        NotifyOutputChangedOnUnmount: {
-                            raw: true,
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-
-                } as IDecimal;
-            }
-            default: {
-                return {
-                    context: this._getInjectedContext(additionalParameters),
-                    parameters: {
-                        isResizable: {
-                            raw: false
-                        },
-                        NotifyOutputChangedOnUnmount: {
-                            raw: true,
-                        },
-                        value: {
-                            raw: value,
-                            error: !isValid,
-                            errorMessage: validationErrorMessage
-                        },
-                        ...additionalParameters
-                    },
-                    onNotifyOutputChanged: (outputs) => onNotifyOutputChanged(outputs.value)
-                } as ITextField
-            }
-        }
-    }
-    private _getInjectedContext(additionalParameters?: IParameters) {
-        return {
-            ...this._pcfContext,
-            mode: {
-                ...this._pcfContext.mode,
-                allocatedHeight: additionalParameters?.Height?.raw ?? this._pcfContext.mode.allocatedHeight,
-                allocatedWidth: additionalParameters?.Width?.raw ?? this._pcfContext.mode.allocatedWidth
-            }
-        }
-    }
-    private async _getLookupValue(targets: string[], value: ComponentFramework.LookupValue[] | null | undefined): Promise<ComponentFramework.LookupValue[]> {
-        if (!value || value.length === 0) {
-            return [];
-        }
-        //this is case from filters where we only have the id to work it => we need to go through targets and search for the records
-        if (!value[0].entityType) {
-            for (const lookup of value) {
-                for (const target of targets) {
-                    try {
-                        const lookupEntityMetadata = await this._pcfContext.utils.getEntityMetadata(target, []);
-                        const response = await this._pcfContext.webAPI.retrieveRecord(target, lookup.id, `?$select=${lookupEntityMetadata.PrimaryNameAttribute}`);
-                        lookup.entityType = target;
-                        lookup.name = response[lookupEntityMetadata.PrimaryNameAttribute];
-                        break;
-                    }
-                    catch (err) {
-                        continue;
-                    }
-                }
-            }
-        }
-        return value;
-    }
-}

package/src/components/Grid/core/components/Dialog/Constants.tsx

@@ -1,8 +0,0 @@
-import { IDialogProps } from "./interfaces";
-
-export const defaultProps: IDialogProps = {
-    dialogContentProps: {},
-    modalProps: {
-        className: ''
-    }
-};