@talxis/base-controls 1.2406.2 → 1.2406.3

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

@@ -1,72 +0,0 @@
-import { ITheme, mergeStyleSets } from "@fluentui/react";
-
-export const getGridStyles = (theme: ITheme, numOfRecords?: number) => {
-    return mergeStyleSets({
-        root: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            '--height-offset': '64px',
-            ':has(.ag-body-horizontal-scroll-viewport[style*="height: 0px"])': {
-                '--height-offset': '45px'
-            } ,
-            '--ag-borders': 'none !important',
-            '.ag-root-wrapper': {
-                maxHeight: '100%',
-                '--ag-input-focus-border-color': 'transparent',
-                borderBottom: `1px solid ${theme.semanticColors.bodyDivider}`,
-                ':has(.ag-overlay:not(.ag-hidden) .TALXIS__grid__empty-records)': {
-                    minHeight: 270
-                }
-            },
-            '.ag-root-wrapper.ag-layout-normal': {
-                height: numOfRecords ? `calc(${numOfRecords} * 42px + var(--height-offset))` : undefined,
-            },
-            '.ag-body': {
-                borderTop: `1px solid ${theme.semanticColors.bodyDivider}`
-            },
-            '.ag-header-viewport': {
-                backgroundColor: `${theme.semanticColors.bodyBackground}`
-            },
-            '.ag-center-cols-container': {
-                minWidth: '100%',
-            },
-            '.ag-layout-auto-height .ag-center-cols-clipper, .ag-layout-auto-height .ag-center-cols-container, .ag-layout-print .ag-center-cols-clipper, .ag-layout-print .ag-center-cols-container': {
-                minHeight: '42px !important'
-            },
-            '.ag-header-cell': {
-                paddingLeft: 0,
-                paddingRight: 0,
-                backgroundColor: `${theme.semanticColors.bodyBackground} !important`
-            },
-            '.ag-cell-inline-editing': {
-                overflow: 'visible',
-                top: -1,
-                backgroundColor: 'transparent',
-                'input': {
-                    paddingLeft: 10
-                },
-                '.TALXIS__error-message__root': {
-                    display: 'none'
-                }
-            },
-            '.talxis-cell-align-right': {
-                '[class^="cellContent"]': {
-                    justifyContent: 'flex-end',
-                },
-                '.talxis-cell-text, input': {
-                    textAlign: 'right'
-                },
-                'input': {
-                    paddingRight: 10
-                }
-            },
-            '.ag-cell-focus:has([data-is-valid="false"])': {
-                border: '1px solid red !important;'
-            },
-            '.TALXIS__combobox__root, [class*="TALXIS__textfield__root"], [class*="TALXIS__tag-picker__root"]': {
-                padding: '0px !important'
-            }
-        }
-    })
-}

package/src/components/Grid/core/components/Cell/Commands/Commands.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { useCommands } from './useCommands';
-import { CommandBar } from '@talxis/react-components/dist/components/CommandBar';
-import { commandStyles } from './styles';
-import { CommandBarButton } from '@fluentui/react';
-
-interface ICommands {
-    record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
-}
-
-export const Commands = ({ record }: ICommands) => {
-    const [items] = useCommands(record);
-    if (!items) {
-        return <></>
-    }
-    if (items?.length > 0) {
-        return <CommandBar className={commandStyles.talxisRoot} overflowButtonProps={{
-            styles: {
-                root: commandStyles.button,
-                rootHovered: commandStyles.button,
-                rootPressed: commandStyles.button,
-                rootExpanded: commandStyles.button
-            }
-        }} styles={{
-            root: commandStyles.root,
-
-        }} items={[]}
-        farItems={items}
-         />;
-    }
-    return <></>;
-};

package/src/components/Grid/core/components/Cell/Commands/Icon.tsx

@@ -1,17 +0,0 @@
-import React, { memo, useMemo } from 'react';
-import 'external-svg-loader';
-import { commandStyles } from './styles';
-
-interface IIcon {
-    name: string
-}
-
-const IconComponent = ({ name }: IIcon) => {
-    //@ts-ignore - types
-    const src = !window.TALXIS?.Portal ? `https://${window.location.host}${window.Xrm.Utility.getGlobalContext().getWebResourceUrl(name)}` : name;
-    return (
-        <svg data-src={src} className={commandStyles.icon} />
-    );
-};
-
-export const Icon = memo(IconComponent);

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

@@ -1,21 +0,0 @@
-import { mergeStyleSets } from "@fluentui/react";
-
-export const commandStyles = mergeStyleSets({
-    root: {
-        backgroundColor: 'transparent'
-    },
-    talxisRoot: {
-        minWidth: 0,
-        flexShrink: 1,
-        flexGrow: 1
-    },
-    button: {
-        backgroundColor: 'transparent',
-    },
-    icon: {
-        width: 16,
-        height: 16,
-        marginLeft: 4,
-        marginRight: 4,
-    }
-});

package/src/components/Grid/core/components/Cell/Commands/useCommands.tsx

@@ -1,53 +0,0 @@
-import { useState, useEffect } from "react";
-import { ICommandBarItemProps } from "@fluentui/react";
-import { Icon } from './Icon';
-import React from "react";
-import { commandStyles } from "./styles";
-import { useGridInstance } from "../../../hooks/useGridInstance";
-
-export const useCommands = (record: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord): [
-    ICommandBarItemProps[] | null
-] => {
-
-    const dataset = useGridInstance().dataset
-    const [commandBarItems, setCommandBarItems] = useState<ICommandBarItemProps[] | null>(null);
-    useEffect(() => {
-        (async () => {
-            setCommandBarItems(await getCommandBarItems());
-        })();
-    }, []);
-
-    const getCommandBarItems = async () => {
-        const items: ICommandBarItemProps[] = [];
-        if(!dataset.retrieveRecordCommand) {
-            return []
-        }
-        const commands = await dataset.retrieveRecordCommand([record.getRecordId()]);
-        for (const command of commands) {
-            if (!command.shouldBeVisible) {
-                continue;
-            }
-            items.push({
-                key: command.commandButtonId,
-                text: command.label,
-                ["data-id"]: command.commandButtonId,
-                ["data-command"]: command.commandId,
-                buttonStyles: {
-                    root: commandStyles.button,
-                    rootHovered: commandStyles.button,
-                    rootPressed: commandStyles.button,
-                },
-                onClick: (e) => {
-                    e?.stopPropagation();
-                    command.execute();
-                },
-                onRenderIcon: command.icon?.includes('.svg') ? () => <Icon name={command.icon} /> : undefined,
-                iconProps: command.icon ? {
-                    iconName: command.icon
-                } : undefined
-            });
-        }
-        return items;
-    };
-    return [commandBarItems];
-};

package/src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import { NumeralPCF } from '../../../../../../utils/NumeralPCF';
-import { DataType } from '../../../enums/DataType';
-import { useGridInstance } from '../../../hooks/useGridInstance';
-import { IGridColumn } from '../../../interfaces/IGridColumn';
-import { useRecordUpdateServiceController } from '../../../services/RecordUpdateService/controllers/useRecordUpdateServiceController';
-import { Component } from '../../Component/Component';
-import { ICellEditorParams } from '@ag-grid-community/core';
-import numeral from "numeral";
-import { IEntityRecord } from '../../../../interfaces';
-
-interface ICell extends ICellEditorParams {
-    baseColumn: IGridColumn;
-    data: ComponentFramework.PropertyHelper.DataSetApi.EntityRecord;
-}
-
-export const EditableCell = (props: ICell) => {
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const recordUpdateService = useRecordUpdateServiceController();
-    const mountedRef = React.useRef(true);
-    const hasBeenUpdatedRef = React.useRef<boolean>(false);
-    const record: IEntityRecord = (() => {
-        //this is so we can load the updated record values from state
-        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;
-        return updatedRecord ?? props.data;
-    })();
-    const valueRef = React.useRef(record.getValue(column.key));
-    const [value, setValue] = React.useState(valueRef.current);
-
-    React.useEffect(() => {
-        return () => {
-            mountedRef.current = false;
-            if (!hasBeenUpdatedRef.current) {
-                return;
-            }
-            recordUpdateService.record(record.getRecordId()).setValue(column.key, getRecordValue(valueRef.current))
-        }
-    }, []);
-
-    const getComponentValue = (value: any) => {
-        //already is component value;
-        if(hasBeenUpdatedRef.current) {
-            return value;
-        }
-        switch(column.dataType) {
-            case DataType.TWO_OPTIONS: {
-                value = value === '1' ? true : false
-                break;
-            }
-            case DataType.OPTIONSET: {
-                value = value ? parseInt(value) : null;
-                break;
-
-            }
-            case DataType.MULTI_SELECT_OPTIONSET: {
-                value = value ? value.split(',').map((value: string) => parseInt(value)) : null;
-                break;
-            }
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_OWNER: {
-                if(value && !Array.isArray(value)) {
-                    value = [value];
-                }
-                value = value?.map((x: any) => {
-                    return {
-                        entityType: x.etn,
-                        id: x.id.guid,
-                        name: x.name
-                    }
-                })
-                break;
-            }
-        }
-        return value;
-    }
-    //this is just so the setValue API in Power Apps accepts the values that come from the components
-    const getRecordValue = (value: any) => {
-        switch (column.dataType) {
-            case DataType.TWO_OPTIONS: {
-                value = value === true ? '1' : '0';
-                break;
-            }
-            case DataType.LOOKUP_SIMPLE:
-            case DataType.LOOKUP_OWNER: {
-                value = value?.map((x: any) => {
-                    return {
-                        entityName: x.entityType,
-                        name: x.name,
-                        id: x.id
-                    }
-                })?.[0];
-                break;
-            }
-        }
-        return value;
-    }
-
-    const onNotifyOutputChanged = (value: any) => {
-        valueRef.current = value;
-        hasBeenUpdatedRef.current = true;
-        if(!mountedRef.current) {
-            recordUpdateService.record(record.getRecordId()).setValue(column.key, getRecordValue(valueRef.current))
-            return;
-        }
-        switch(column.dataType) {
-            case DataType.OPTIONSET:
-            case DataType.DATE_AND_TIME_DATE_ONLY: {
-                props.stopEditing();
-                return;
-            }
-            case DataType.LOOKUP_OWNER:
-            case DataType.LOOKUP_SIMPLE: {
-                if(value?.length > 0) {
-                    props.stopEditing();
-                    return;
-                }
-            }
-        }
-        setValue(valueRef.current);
-    }
-
-    return <Component
-        column={column}
-        value={getComponentValue(value)}
-        formattedValue={record.getFormattedValue(column.key)}
-        onNotifyOutputChanged={onNotifyOutputChanged}
-        additionalParameters={{
-            AutoFocus: {
-                raw: true
-            },
-            Height: {
-                raw: 41
-            },
-            EnableNavigation: {
-                raw: false
-            }
-        }}
-    />
-}

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

@@ -1,176 +0,0 @@
-import * as React from 'react';
-import { ILinkProps } from '@fluentui/react/lib/components/Link/Link.types';
-import { Link } from '@fluentui/react/lib/components/Link/Link';
-import { Text } from '@fluentui/react/lib/Text';
-import { getReadOnlyCellStyles } from './styles';
-import { Commands } from '../Commands/Commands';
-import { Checkbox, Icon, TooltipHost, useTheme, Image } from '@fluentui/react';
-import { FileAttribute } from '@talxis/client-libraries';
-import { ReadOnlyOptionSet } from './ReadOnlyOptionSet/ReadOnlyOptionSet';
-import { IGridColumn } from '../../../interfaces/IGridColumn';
-import { DataType } from '../../../enums/DataType';
-import { useColumnValidationController } from '../../../../validation/controllers/useRecordValidationController';
-import { useGridInstance } from '../../../hooks/useGridInstance';
-import { useSelectionController } from '../../../../selection/controllers/useSelectionController';
-import { IEntityRecord } from '../../../../interfaces';
-import { ICellRendererParams } from '@ag-grid-community/core';
-
-interface ICellProps extends ICellRendererParams {
-    baseColumn: IGridColumn;
-    data: IEntityRecord;
-    [key: string]: any;
-}
-
-export const ReadOnlyCell = (props: ICellProps) => {
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const record = props.data; 
-    const theme = useTheme();
-    const styles = getReadOnlyCellStyles(theme);
-    const tooltipId = React.useMemo(() => Math.random().toString(), []);
-
-    const [isValid, errorMessage] = useColumnValidationController({
-        column: column,
-        record: record,
-    })
-
-    return (
-        <TooltipHost
-            id={tooltipId}
-            content={!isValid && !grid.loading ? errorMessage : undefined}>
-            <div className={styles.root} data-is-valid={isValid}>
-                <div className={styles.cellContent}>
-                    <InternalReadOnlyCell {...props} />
-                </div>
-                {!isValid && !grid.loading && <Icon styles={{
-                    root: {
-                        color: theme.semanticColors.errorIcon
-                    }
-                }} iconName='Error' />}
-            </div>
-        </TooltipHost>
-    )
-};
-
-const InternalReadOnlyCell = (props: ICellProps) => {
-    const grid = useGridInstance();
-    const column = props.baseColumn;
-    const theme = useTheme();
-    const styles = getReadOnlyCellStyles(theme);
-    const selection = useSelectionController();
-    const record: IEntityRecord = (() => {
-        //this is so we can load the updated record values from state
-        const updatedRecord = grid.recordUpdateService.record(props.data.getRecordId()).get() as any;
-        return updatedRecord ?? props.data;
-    })();
-    const formattedValue = record.getFormattedValue(column.key);
-
-    const renderLink = (props: ILinkProps, formattedValue: string): JSX.Element => {
-        switch(column.dataType) {
-            case DataType.LOOKUP_OWNER:
-            case DataType.LOOKUP_SIMPLE: {
-                if(!grid.isNavigationEnabled) {
-                    return renderText();
-                }
-            }
-        }
-        return (
-            <Link {...props} className={styles.link} title={formattedValue}>
-                {formattedValue}
-            </Link>
-        );
-    };
-    const renderText = (): JSX.Element => {
-        if (column.isPrimary && grid.isNavigationEnabled) {
-            return renderLink({
-                onClick: () => grid.openDatasetItem(record.getNamedReference())
-            }, formattedValue);
-        }
-        return <Text className={`${styles.text} talxis-cell-text`} title={formattedValue}>{formattedValue}</Text>
-    }
-    const downloadFile = () => {
-        const storage = new FileAttribute(grid.pcfContext.webAPI);
-        const namedReference = record.getNamedReference();
-        storage.downloadFileFromAttribute({
-            entityName: namedReference.etn,
-            recordId: record.getRecordId(),
-            fileAttribute: column.key,
-        }, true)
-    }
-
-    switch (column.dataType) {
-        case DataType.SINGLE_LINE_EMAIL: {
-            return renderLink({ href: `mailto:${formattedValue}` }, formattedValue);
-        }
-        case DataType.SINGLE_LINE_PHONE: {
-            return renderLink({ href: `tel:${formattedValue}` }, formattedValue);
-        }
-        case DataType.SINGLE_LINE_URL: {
-            return renderLink({
-                href: formattedValue,
-                target: '_blank',
-                rel: 'noopener noreferrer'
-            }, formattedValue);
-        }
-        case DataType.LOOKUP_SIMPLE:
-        case DataType.LOOKUP_OWNER: {
-            return renderLink({
-                onClick: () => grid.openDatasetItem(record.getValue(column.key) as any)
-            }, formattedValue);
-        }
-        case DataType.FILE: {
-            if (!formattedValue) {
-                return <></>
-            }
-            return (
-                <div className={styles.fileWrapper}>
-                    <Icon iconName='Attach' />
-                    {
-                        renderLink({
-                            onClick: downloadFile
-                        }, 'Download')
-                    }
-                </div>
-            )
-        }
-        case DataType.IMAGE: {
-            if (!formattedValue) {
-                return <></>
-            }
-            return (
-                <div className={styles.fileWrapper}>
-                    <Image className={styles.image} src={`data:image/png;base64,${formattedValue}`} />
-                    {
-                        renderLink({
-                            onClick: downloadFile
-                        }, 'Download')
-                    }
-                </div>
-            )
-        }
-        case DataType.OPTIONSET:
-        case DataType.MULTI_SELECT_OPTIONSET:
-        case DataType.TWO_OPTIONS: {
-            return <ReadOnlyOptionSet
-                column={column}
-                record={record}
-                defaultRender={renderText} />
-        }
-        default: {
-            if(column.key === '__checkbox') {
-                return <Checkbox
-                checked={props.node.isSelected()}
-                onChange={(e, checked) => {
-                    e?.stopPropagation()
-                    console.log(props.api.getSelectedNodes())
-                    selection.toggle(record, checked!)
-                }} />
-            }
-            if(column.key === '__ribbon') {
-                return <Commands record={record} />
-            }
-            return renderText()
-        }
-
-    }
-}

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%)`
-        }
-    })
-}