@talxis/base-controls 1.2509.1-alpha.6 → 1.2509.1

package/dist/components/GridCellRenderer/GridCellRenderer.js

@@ -1,109 +1,292 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useMemo } from 'react';
-import { GridCellRendererModel } from './GridCellRendererModel.js';
-import { ThemeProvider, Label, Icon, Text } from '@fluentui/react';
-import { getClassNames } from '@talxis/react-components';
-import { getGridCellRendererStyles } from './styles.js';
-import { ValueRenderer } from './ValueRenderer/ValueRenderer.js';
-import { ModelContext } from './useModel.js';
-import { gridGroupCellRendererTranslations } from './translations.js';
+import { SpinnerSize, ThemeProvider, Label, Icon, Link, Image } from '@fluentui/react';
+import { useMemo, useState } from 'react';
+import { getGridCellLabelStyles, getDefaultContentRendererStyles } from './styles.js';
+import { Client, Constants, DataTypes, Sanitizer, FetchXmlDataProvider, FileAttribute, Attribute } from '@talxis/client-libraries';
+import { getDefaultGridRendererTranslations } from './translations.js';
+import { ComponentPropsContext } from './useComponentProps.js';
+import { getClassNames, Spinner } from '@talxis/react-components';
+import { RecordCommands } from './RecordCommands/RecordCommands.js';
+import { OptionSet } from './OptionSet/OptionSet.js';
 import { useControl } from '../../hooks/useControl.js';
+import { DefaultContentRenderer } from './DefaultContentRenderer/DefaultContentRenderer.js';
 
+const client = new Client();
 const GridCellRenderer = (props) => {
-    const { theme, labels, className, sizing } = useControl('GridCellRenderer', props, gridGroupCellRendererTranslations);
-    const propsRef = useRef(props);
-    propsRef.current = props;
-    const model = useMemo(() => {
-        return new GridCellRendererModel({
-            getProps: () => propsRef.current,
-            getControlTheme: () => theme,
-            labels: labels,
-        });
-    }, []);
-    const styles = getGridCellRendererStyles(model, sizing.height);
+    const dataset = props.parameters.Dataset.raw;
+    const context = props.context;
+    const record = props.parameters.Record.raw;
+    const column = props.parameters.Column.raw;
+    const columnAlignment = props.parameters.ColumnAlignment.raw;
+    const dataType = props.parameters.value.type;
+    const { theme, sizing, labels } = useControl('GridCellLabel', props, getDefaultGridRendererTranslations());
+    const styles = useMemo(() => getGridCellLabelStyles(columnAlignment ?? 'left', dataType, sizing.height, theme), [columnAlignment, dataType, sizing.height, theme]);
+    const defaultContentRendererStyles = useMemo(() => getDefaultContentRendererStyles(theme, dataType, sizing.height), [theme, dataType, sizing.height]);
+    const value = props.parameters.value.raw;
+    const formattedValue = props.parameters.value.formatted;
+    const isNavigationEnabled = props.parameters.EnableNavigation.raw;
+    const prefixIcon = props.parameters.PrefixIcon?.raw;
+    const suffixIcon = props.parameters.SuffixIcon?.raw;
+    const aggregationFunction = props.parameters.AggregationFunction.raw;
     const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
+    const [downloadInProgress, setIsDownloadInProgress] = useState(false);
+    const getLinkProps = () => {
+        const props = {
+            title: formattedValue,
+            className: styles.link,
+            rel: 'noopener noreferrer',
+            children: formattedValue,
+            disabled: downloadInProgress
+        };
+        switch (dataType) {
+            case DataTypes.SingleLineEmail: {
+                props.href = `mailto:${value}`;
+                break;
+            }
+            case DataTypes.SingleLinePhone: {
+                props.href = `tel:${value}`;
+                break;
+            }
+            case DataTypes.SingleLineUrl: {
+                props.href = value;
+                props.target = '_blank';
+                break;
+            }
+            case DataTypes.Image:
+            case DataTypes.File: {
+                props.href = value.fileUrl;
+                props.download = value.fileName;
+                if (dataType === 'Image') {
+                    props.title = value.fileName;
+                    props.children = value.fileName;
+                }
+                if (shouldUsePortalDownload()) {
+                    props.onClick = (e) => downloadPortalFile(e);
+                }
+                break;
+            }
+            case DataTypes.LookupCustomer:
+            case DataTypes.LookupOwner:
+            case DataTypes.LookupSimple:
+            case DataTypes.LookupRegarding: {
+                props.onClick = () => {
+                    dataset.openDatasetItem(Sanitizer.Lookup.getEntityReference(value[0]));
+                };
+                break;
+            }
+            //primary navigation link
+            default: {
+                props.onClick = () => {
+                    dataset.openDatasetItem(record.getNamedReference());
+                };
+            }
+        }
+        return props;
+    };
+    //matching could be improved
+    const getIconNameForMimeType = (mimeType) => {
+        if (!mimeType) {
+            return 'Attach';
+        }
+        const icon_classes = {
+            image: "Photo2",
+            audio: "MusicNote",
+            video: "Video",
+            "application/pdf": "PDF",
+            "application/msword": "WordDocument",
+            "application/vnd.ms-word": "WordDocument",
+            "application/vnd.oasis.opendocument.text": "WordDocument",
+            "application/vnd.openxmlformats-officedocument.wordprocessingml": "WordDocument",
+            "application/vnd.ms-excel": "ExcelDocument",
+            "application/vnd.openxmlformats-officedocument.spreadsheetml": "ExcelDocument",
+            "application/vnd.oasis.opendocument.spreadsheet": "ExcelDocument",
+            "application/vnd.ms-powerpoint": "PowerPointDocument",
+            "application/vnd.openxmlformats-officedocument.presentationml": "PowerPointDocument",
+            "application/vnd.oasis.opendocument.presentation": "PowerPointDocument",
+            "text/plain": "TextDocument",
+            "text/html": "FileCode",
+            "application/json": "FileCode",
+            // Archives
+            "application/gzip": "ZipFolder",
+            "application/zip": "ZipFolder"
+        };
+        if (icon_classes[mimeType]) {
+            return icon_classes[mimeType];
+        }
+        else if (icon_classes[mimeType.split("/")[0]]) {
+            return icon_classes[mimeType.split("/")[0]];
+        }
+        return 'Attach';
+    };
+    const renderContent = () => {
+        if (!formattedValue || aggregationFunction) {
+            return jsx(DefaultContentRenderer, {});
+        }
+        if (column.isPrimary && isNavigationEnabled) {
+            const linkProps = componentProps.onGetLinkProps(getLinkProps());
+            return jsx(Link, { ...linkProps, children: linkProps.children });
+        }
+        switch (dataType) {
+            case DataTypes.SingleLineEmail:
+            case DataTypes.SingleLinePhone:
+            case DataTypes.SingleLineUrl:
+            case DataTypes.LookupCustomer:
+            case DataTypes.LookupOwner:
+            case DataTypes.LookupSimple:
+            case DataTypes.LookupRegarding: {
+                if (isNavigationEnabled) {
+                    const linkProps = componentProps.onGetLinkProps(getLinkProps());
+                    return jsx(Link, { ...linkProps, children: linkProps.children });
+                }
+                return jsx(DefaultContentRenderer, {});
+            }
+            case DataTypes.OptionSet:
+            case DataTypes.MultiSelectOptionSet:
+            case DataTypes.TwoOptions: {
+                return jsx(OptionSet, { context: props.context, parameters: { ...props.parameters } });
+            }
+            case DataTypes.File:
+            case DataTypes.Image: {
+                return renderFileLink(dataType === 'Image');
+            }
+        }
+        return jsx(DefaultContentRenderer, {});
+    };
+    const shouldUsePortalDownload = () => {
+        const isFetchXmlDataProvider = dataset.getDataProvider() instanceof FetchXmlDataProvider;
+        //only use portal download if within portal, uses fetch xml provider and is not virtual column
+        if (client.isTalxisPortal() && isFetchXmlDataProvider && !column.name.endsWith('__virtual')) {
+            return true;
+        }
+        return false;
+    };
+    const renderFileLink = (isImage) => {
+        const linkProps = componentProps.onGetLinkProps(getLinkProps());
+        return (jsxs("div", { ...componentProps.fileProps.containerProps, children: [!downloadInProgress &&
+                    jsxs(Fragment, { children: [!isImage &&
+                                jsx(Icon, { ...componentProps.fileProps.iconProps, iconName: componentProps.fileProps.iconProps.onGetIconName(getIconNameForMimeType(value.mimeType)) }), isImage &&
+                                jsx(Image, { ...componentProps.fileProps.imageProps, src: getThumbnailUrl() })] }), downloadInProgress &&
+                    jsx(Spinner, { ...componentProps.fileProps.loadingProps.spinnerProps }), jsx(Link, { ...linkProps, children: linkProps.children })] }));
+    };
+    const getIconProps = (json) => {
+        if (!json) {
+            return undefined;
+        }
+        return JSON.parse(json);
+    };
+    const getThumbnailUrl = () => {
+        let src = value.thumbnailUrl;
+        if (client.isTalxisPortal()) {
+            src = `data:${value.mimeType};base64,${value.fileContent}`;
+        }
+        return componentProps.fileProps.imageProps.onGetSrc(src);
+    };
+    const downloadPortalFile = async (e) => {
+        e.preventDefault();
+        setIsDownloadInProgress(true);
+        const storage = new FileAttribute(context.webAPI);
+        let entityName = dataset.getTargetEntityType();
+        let recordId = record.getRecordId();
+        let attributeName = Attribute.GetNameFromAlias(column.name);
+        const entityAliasName = Attribute.GetLinkedEntityAlias(column.name);
+        if (entityAliasName) {
+            entityName = dataset.linking.getLinkedEntities().find(x => x.alias === entityAliasName).name;
+            const entityMetadata = await context.utils.getEntityMetadata(entityName, []);
+            recordId = record.getRawData()[`${entityAliasName}.${entityMetadata.PrimaryIdAttribute}`];
+        }
+        await storage.downloadFileFromAttribute({
+            entityName: entityName,
+            recordId: recordId,
+            fileAttribute: attributeName
+        }, true, undefined, {
+            fileName: value.fileName,
+            fileSizeInBytes: value.fileSize
+        });
+        setIsDownloadInProgress(false);
+    };
+    const getAggregationLabel = (aggregationFunction) => {
+        switch (aggregationFunction) {
+            case 'avg': {
+                return labels.avg();
+            }
+            case 'max': {
+                return labels.max();
+            }
+            case 'min': {
+                return labels.min();
+            }
+            case 'sum': {
+                return labels.sum();
+            }
+            case 'count': {
+                return labels.count();
+            }
+            case 'countcolumn': {
+                return labels.countcolumn();
+            }
+        }
+    };
     const componentProps = onOverrideComponentProps({
-        onRender: (props, defaultRender) => defaultRender(props)
-    });
-    return (jsx(ModelContext.Provider, { value: model, children: componentProps.onRender({
-            container: {
-                className: getClassNames([className, styles.gridCellRendererRoot]),
-                title: model.getFormattedValue().value,
-                theme: theme
+        onGetLinkProps: (props) => props,
+        onGetOptionSetProps: (props) => props,
+        onGetRecordCommandsProps: (props) => props,
+        onRenderContent: (defaultRenderer) => defaultRenderer(),
+        onRenderAggregationLabel: (props, defaultRenderer) => defaultRenderer(props),
+        rootContainerProps: {
+            theme: theme,
+            className: styles.root
+        },
+        contentWrapperProps: {
+            className: styles.contentWrapper,
+        },
+        prefixSuffixWrapperProps: {
+            className: styles.prefixSuffixContentWrapper
+        },
+        textProps: {
+            className: getClassNames([defaultContentRendererStyles.content, !formattedValue ? defaultContentRendererStyles.placeholder : undefined]),
+            title: formattedValue,
+            children: formattedValue ?? '---'
+        },
+        fileProps: {
+            containerProps: {
+                className: styles.fileWrapper
             },
-            onRenderContentContainer: (props, defaultRender) => defaultRender(props),
-            onRenderAggregationLabel: (props, defaultRender) => defaultRender(props)
-        }, (props) => {
-            return (jsxs(ThemeProvider, { ...props.container, children: [props.onRenderAggregationLabel({
-                        children: model.getAggregationLabel(),
-                        className: styles.aggregationLabel
-                    }, (props) => {
-                        if (model.getAggregationLabel()) {
-                            return jsx(Label, { ...props });
-                        }
-                        return jsx(Fragment, {});
-                    }), props.onRenderContentContainer({
-                        container: {
-                            className: styles.contentContainer
-                        },
-                        onRenderPrefixIcon: (props, defaultRender) => defaultRender(props),
-                        onRenderSuffixIcon: (props, defaultRender) => defaultRender(props),
-                        onRenderInnerContainer: (props, defaultRender) => defaultRender(props),
-                    }, (props) => {
-                        return (jsxs("div", { ...props.container, children: [props.onRenderPrefixIcon({
-                                    ...model.getPrefixIconProps(),
-                                    styles: {
-                                        root: styles.affixIconRoot
-                                    }
-                                }, (props) => {
-                                    if (model.getPrefixIconProps()) {
-                                        return jsx(Icon, { ...props });
-                                    }
-                                    return jsx(Fragment, {});
-                                }), props.onRenderInnerContainer({
-                                    container: {
-                                        className: styles.innerContentContainer
-                                    },
-                                    onRenderValueContainer: (props, defaultRender) => defaultRender(props),
-                                    onRenderAggregatedValue: (props, defaultRender) => defaultRender(props)
-                                }, (props) => {
-                                    return (jsxs("div", { ...props.container, children: [props.onRenderValueContainer({
-                                                container: {
-                                                    className: styles.valueContainer,
-                                                },
-                                                onRenderValue: (props, defaultRender) => defaultRender(props)
-                                            }, (props) => {
-                                                return (jsx("div", { ...props.container, children: props.onRenderValue({
-                                                        onRenderPlaceholder: (props, defaultRender) => defaultRender(props),
-                                                        onRenderText: (props, defaultRender) => defaultRender(props),
-                                                        onRenderLink: (props, defaultRender) => defaultRender(props),
-                                                        onRenderColorfulOptionSet: (props, defaultRender) => defaultRender(props),
-                                                        onRenderFile: (props, defaultRender) => defaultRender(props)
-                                                    }, (props) => {
-                                                        return (jsx(ValueRenderer, { ...props }));
-                                                    }) }));
-                                            }), props.onRenderAggregatedValue({
-                                                children: model.getFormattedAggregatedValue(),
-                                                className: styles.aggregatedValue,
-                                            }, (props) => {
-                                                if (model.getFormattedAggregatedValue() !== null) {
-                                                    return jsx(Text, { ...props });
-                                                }
-                                                return jsx(Fragment, {});
-                                            })] }));
-                                }), props.onRenderSuffixIcon({
-                                    ...model.getSuffixIconProps(),
-                                    styles: {
-                                        root: styles.affixIconRoot
-                                    }
-                                }, (props) => {
-                                    if (model.getSuffixIconProps()) {
-                                        return jsx(Icon, { ...props });
-                                    }
-                                    return jsx(Fragment, {});
-                                })] }));
-                    })] }));
-        }) }));
+            iconProps: {
+                className: styles.fileIcon,
+                onGetIconName: (iconName) => iconName
+            },
+            imageProps: {
+                className: styles.fileImage,
+                onGetSrc: (src) => src
+            },
+            loadingProps: {
+                spinnerProps: {
+                    size: SpinnerSize.small,
+                    styles: {
+                        circle: styles.loadingSpinnerCircle
+                    }
+                }
+            }
+        }
+    });
+    const componentPropsProviderValue = useMemo(() => {
+        return {
+            current: componentProps
+        };
+    }, []);
+    componentPropsProviderValue.current = componentProps;
+    //this allows to add prefix/sufix icon without the need of cell customizer
+    //it can cover a lot of cases where otherwise custom PCF would be needed
+    const prefixIconProps = getIconProps(prefixIcon);
+    const suffixIconProps = getIconProps(suffixIcon);
+    return jsx(ComponentPropsContext.Provider, { value: componentPropsProviderValue, children: column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME ?
+            jsx(RecordCommands, { applicationTheme: context.fluentDesignLanguage?.applicationTheme ?? theme, theme: theme, themeOverride: context.fluentDesignLanguage?.v8FluentOverrides, commands: props.parameters.RecordCommands?.raw ?? [], alignment: columnAlignment }) :
+            jsxs(ThemeProvider, { ...componentProps.rootContainerProps, children: [aggregationFunction &&
+                        componentProps.onRenderAggregationLabel({
+                            className: styles.aggregationLabel
+                        }, (props) => {
+                            return jsx(Label, { ...props, children: getAggregationLabel(aggregationFunction) });
+                        }), jsxs("div", { ...componentProps.prefixSuffixWrapperProps, children: [prefixIconProps && jsx(Icon, { ...prefixIconProps, className: getClassNames([prefixIconProps.className, styles.icon]) }), jsx("div", { ...componentProps.contentWrapperProps, children: componentProps.contentWrapperProps.children ?? renderContent() }), suffixIconProps && jsx(Icon, { ...suffixIconProps, className: getClassNames([suffixIconProps.className, styles.icon]) })] })] }) });
 };
 
 export { GridCellRenderer };

package/dist/components/GridCellRenderer/GridCellRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridCellRenderer.js","sources":["../../../src/components/GridCellRenderer/GridCellRenderer.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { GridCellRendererModel } from \"./GridCellRendererModel\";\nimport { useControl } from \"../../hooks\";\nimport { Icon, Label, ThemeProvider, Text } from \"@fluentui/react\";\nimport { IGridCellRenderer } from \"./interfaces\";\nimport { getClassNames } from \"@talxis/react-components\";\nimport { getGridCellRendererStyles } from \"./styles\";\nimport { ValueRenderer } from \"./ValueRenderer/ValueRenderer\";\nimport { ModelContext } from \"./useModel\";\nimport { gridGroupCellRendererTranslations } from \"./translations\";\n\nexport const GridCellRenderer = (props: IGridCellRenderer) => {\n    const { theme, labels, className, sizing } = useControl('GridCellRenderer', props, gridGroupCellRendererTranslations);\n    const propsRef = useRef<IGridCellRenderer>(props);\n    propsRef.current = props;\n    const model = useMemo(() => {\n        return new GridCellRendererModel({\n            getProps: () => propsRef.current,\n            getControlTheme: () => theme,\n            labels: labels,\n        });\n    }, []);\n    const styles = getGridCellRendererStyles(model, sizing.height);\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n    const componentProps = onOverrideComponentProps({\n        onRender: (props, defaultRender) => defaultRender(props)\n    })\n\n    return (\n        <ModelContext.Provider value={model}>\n            {componentProps.onRender({\n                container: {\n                    className: getClassNames([className, styles.gridCellRendererRoot]),\n                    title: model.getFormattedValue().value!,\n                    theme: theme\n                },\n                onRenderContentContainer: (props, defaultRender) => defaultRender(props),\n                onRenderAggregationLabel: (props, defaultRender) => defaultRender(props)\n            }, (props) => {\n                return (\n                    <ThemeProvider {...props.container}>\n                        {props.onRenderAggregationLabel({\n                            children: model.getAggregationLabel(),\n                            className: styles.aggregationLabel\n                        }, (props) => {\n                            if (model.getAggregationLabel()) {\n                                return <Label {...props} />;\n                            }\n                            return <></>;\n                        })}\n                        {props.onRenderContentContainer({\n                            container: {\n                                className: styles.contentContainer\n                            },\n                            onRenderPrefixIcon: (props, defaultRender) => defaultRender(props),\n                            onRenderSuffixIcon: (props, defaultRender) => defaultRender(props),\n                            onRenderInnerContainer: (props, defaultRender) => defaultRender(props),\n                        }, (props) => {\n                            return (\n                                <div {...props.container}>\n                                    {props.onRenderPrefixIcon({\n                                        ...model.getPrefixIconProps(),\n                                         styles: {\n                                            root: styles.affixIconRoot\n                                        }\n                                    }, (props) => {\n                                        if (model.getPrefixIconProps()) {\n                                            return <Icon {...props} />;\n                                        }\n                                        return <></>;\n                                    })}\n                                    {props.onRenderInnerContainer({\n                                        container: {\n                                            className: styles.innerContentContainer\n                                        },\n                                        onRenderValueContainer: (props, defaultRender) => defaultRender(props),\n                                        onRenderAggregatedValue: (props, defaultRender) => defaultRender(props)\n                                    }, (props) => {\n                                        return (\n                                            <div {...props.container}>\n                                                {props.onRenderValueContainer({\n                                                    container: {\n                                                        className: styles.valueContainer,\n                                                    },\n                                                    onRenderValue: (props, defaultRender) => defaultRender(props)\n                                                }, (props) => {\n                                                    return (\n                                                        <div {...props.container}>\n                                                            {props.onRenderValue({\n                                                                onRenderPlaceholder: (props, defaultRender) => defaultRender(props),\n                                                                onRenderText: (props, defaultRender) => defaultRender(props),\n                                                                onRenderLink: (props, defaultRender) => defaultRender(props),\n                                                                onRenderColorfulOptionSet: (props, defaultRender) => defaultRender(props),\n                                                                onRenderFile: (props, defaultRender) => defaultRender(props)\n                                                            }, (props) => {\n                                                                return (\n                                                                    <ValueRenderer {...props}\n                                                                    />\n                                                                );\n                                                            })}\n                                                        </div>\n                                                    );\n                                                })}\n                                                {props.onRenderAggregatedValue({\n                                                    children: model.getFormattedAggregatedValue(),\n                                                    className: styles.aggregatedValue,\n                                                }, (props) => {\n                                                    if (model.getFormattedAggregatedValue() !== null) {\n                                                        return <Text {...props} />\n                                                    }\n                                                    return <></>\n                                                })}\n                                            </div>\n                                        );\n                                    })}\n                                    {props.onRenderSuffixIcon({\n                                        ...model.getSuffixIconProps(),\n                                        styles: {\n                                            root: styles.affixIconRoot\n                                        }\n                                    }, (props) => {\n                                        if (model.getSuffixIconProps()) {\n                                            return <Icon {...props} />\n                                        }\n                                        return <></>\n                                    })}\n                                </div>\n                            );\n                        })}\n                    </ThemeProvider>\n                );\n            })}\n        </ModelContext.Provider>\n    );\n};"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"GridCellRenderer.js","sources":["../../../src/components/GridCellRenderer/GridCellRenderer.tsx"],"sourcesContent":["import { Icon, IIconProps, ILinkProps, Image, Label, Link, SpinnerSize, ThemeProvider } from \"@fluentui/react\";\nimport { useControl } from \"../../hooks\";\nimport { useMemo, useState } from \"react\";\nimport { getDefaultContentRendererStyles, getGridCellLabelStyles } from \"./styles\";\nimport { AggregationFunction, Attribute, Client, Constants, DataType, DataTypes, FetchXmlDataProvider, FileAttribute, IRecord, Sanitizer } from \"@talxis/client-libraries\";\nimport { OptionSet } from './OptionSet';\nimport { IGridCellRenderer } from \"./interfaces\";\nimport { getDefaultGridRendererTranslations } from \"./translations\";\nimport { ComponentPropsContext } from \"./useComponentProps\";\nimport { DefaultContentRenderer } from \"./DefaultContentRenderer\";\nimport { getClassNames, Spinner } from \"@talxis/react-components\";\nimport { RecordCommands } from \"./RecordCommands/RecordCommands\";\n\nconst client = new Client();\n\nexport const GridCellRenderer = (props: IGridCellRenderer) => {\n    const dataset = props.parameters.Dataset.raw;\n    const context = props.context;\n    const record: IRecord = props.parameters.Record.raw;\n    const column = props.parameters.Column.raw;\n    const columnAlignment = props.parameters.ColumnAlignment.raw;\n    const dataType: DataType = props.parameters.value.type as DataType;\n    const { theme, sizing, labels } = useControl('GridCellLabel', props, getDefaultGridRendererTranslations());\n    const styles = useMemo(() => getGridCellLabelStyles(columnAlignment ?? 'left', dataType, sizing.height!, theme), [columnAlignment, dataType, sizing.height, theme]);\n    const defaultContentRendererStyles = useMemo(() => getDefaultContentRendererStyles(theme, dataType, sizing.height!), [theme, dataType, sizing.height]);\n    const value = props.parameters.value.raw;\n    const formattedValue: string = props.parameters.value.formatted;\n    const isNavigationEnabled = props.parameters.EnableNavigation.raw;\n    const prefixIcon = props.parameters.PrefixIcon?.raw\n    const suffixIcon = props.parameters.SuffixIcon?.raw;\n    const aggregationFunction = props.parameters.AggregationFunction.raw;\n    const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n    const [downloadInProgress, setIsDownloadInProgress] = useState(false);\n\n    const getLinkProps = (): ILinkProps => {\n        const props: ILinkProps = {\n            title: formattedValue,\n            className: styles.link,\n            rel: 'noopener noreferrer',\n            children: formattedValue,\n            disabled: downloadInProgress\n        }\n        switch (dataType) {\n            case DataTypes.SingleLineEmail: {\n                props.href = `mailto:${value}`;\n                break;\n            }\n            case DataTypes.SingleLinePhone: {\n                props.href = `tel:${value}`;\n                break;\n            }\n            case DataTypes.SingleLineUrl: {\n                props.href = value;\n                props.target = '_blank';\n                break;\n            }\n            case DataTypes.Image:\n            case DataTypes.File: {\n                props.href = value.fileUrl;\n                props.download = value.fileName;\n                if (dataType === 'Image') {\n                    props.title = value.fileName;\n                    props.children = value.fileName;\n                }\n                if (shouldUsePortalDownload()) {\n                    props.onClick = (e) => downloadPortalFile(e);\n                }\n                break;\n            }\n            case DataTypes.LookupCustomer:\n            case DataTypes.LookupOwner:\n            case DataTypes.LookupSimple:\n            case DataTypes.LookupRegarding: {\n                props.onClick = () => {\n                    dataset.openDatasetItem(Sanitizer.Lookup.getEntityReference(value[0]))\n                }\n                break;\n            }\n            //primary navigation link\n            default: {\n                props.onClick = () => {\n                    dataset.openDatasetItem(record.getNamedReference());\n                }\n            }\n        }\n        return props;\n    }\n\n\n    //matching could be improved\n    const getIconNameForMimeType = (mimeType?: string) => {\n        if (!mimeType) {\n            return 'Attach';\n        }\n        const icon_classes: any = {\n            image: \"Photo2\",\n            audio: \"MusicNote\",\n            video: \"Video\",\n            \"application/pdf\": \"PDF\",\n            \"application/msword\": \"WordDocument\",\n            \"application/vnd.ms-word\": \"WordDocument\",\n            \"application/vnd.oasis.opendocument.text\": \"WordDocument\",\n            \"application/vnd.openxmlformats-officedocument.wordprocessingml\": \"WordDocument\",\n            \"application/vnd.ms-excel\": \"ExcelDocument\",\n            \"application/vnd.openxmlformats-officedocument.spreadsheetml\": \"ExcelDocument\",\n            \"application/vnd.oasis.opendocument.spreadsheet\": \"ExcelDocument\",\n            \"application/vnd.ms-powerpoint\": \"PowerPointDocument\",\n            \"application/vnd.openxmlformats-officedocument.presentationml\": \"PowerPointDocument\",\n            \"application/vnd.oasis.opendocument.presentation\": \"PowerPointDocument\",\n            \"text/plain\": \"TextDocument\",\n            \"text/html\": \"FileCode\",\n            \"application/json\": \"FileCode\",\n            // Archives\n            \"application/gzip\": \"ZipFolder\",\n            \"application/zip\": \"ZipFolder\"\n        };\n\n        if (icon_classes[mimeType]) {\n            return icon_classes[mimeType];\n        }\n        else if (icon_classes[mimeType.split(\"/\")[0]]) {\n            return icon_classes[mimeType.split(\"/\")[0]];\n        }\n        return 'Attach';\n    }\n\n    const renderContent = () => {\n        if (!formattedValue || aggregationFunction) {\n            return <DefaultContentRenderer />\n        }\n        if (column.isPrimary && isNavigationEnabled) {\n            const linkProps = componentProps.onGetLinkProps(getLinkProps());\n            return <Link {...linkProps}>{linkProps.children}</Link>\n        }\n        switch (dataType) {\n            case DataTypes.SingleLineEmail:\n            case DataTypes.SingleLinePhone:\n            case DataTypes.SingleLineUrl:\n            case DataTypes.LookupCustomer:\n            case DataTypes.LookupOwner:\n            case DataTypes.LookupSimple:\n            case DataTypes.LookupRegarding: {\n                if (isNavigationEnabled) {\n                    const linkProps = componentProps.onGetLinkProps(getLinkProps());\n                    return <Link {...linkProps}>{linkProps.children}</Link>\n                }\n                return <DefaultContentRenderer />\n            }\n            case DataTypes.OptionSet:\n            case DataTypes.MultiSelectOptionSet:\n            case DataTypes.TwoOptions: {\n                return <OptionSet context={props.context} parameters={{ ...props.parameters }} />\n            }\n            case DataTypes.File:\n            case DataTypes.Image: {\n                return renderFileLink(dataType === 'Image');\n            }\n        }\n        return <DefaultContentRenderer />\n    }\n\n    const shouldUsePortalDownload = () => {\n        const isFetchXmlDataProvider = dataset.getDataProvider() instanceof FetchXmlDataProvider;\n        //only use portal download if within portal, uses fetch xml provider and is not virtual column\n        if (client.isTalxisPortal() && isFetchXmlDataProvider && !column.name.endsWith('__virtual')) {\n            return true;\n        }\n        return false;\n    }\n\n    const renderFileLink = (isImage?: boolean) => {\n        const linkProps = componentProps.onGetLinkProps(getLinkProps());\n        return (<div {...componentProps.fileProps.containerProps}>\n            {!downloadInProgress &&\n                <>\n                    {!isImage &&\n                        <Icon {...componentProps.fileProps.iconProps} iconName={componentProps.fileProps.iconProps.onGetIconName(getIconNameForMimeType(value.mimeType))} />\n                    }\n                    {isImage &&\n                        <Image {...componentProps.fileProps.imageProps} src={getThumbnailUrl()} />\n                    }\n                </>\n            }\n            {downloadInProgress &&\n                <Spinner {...componentProps.fileProps.loadingProps.spinnerProps} />\n            }\n            <Link {...linkProps}>{linkProps.children}</Link>\n        </div>);\n    }\n\n    const getIconProps = (json?: string | null): IIconProps | undefined => {\n        if (!json) {\n            return undefined;\n        }\n        return JSON.parse(json);\n    }\n\n    const getThumbnailUrl = () => {\n        let src = value.thumbnailUrl;\n        if (client.isTalxisPortal()) {\n            src = `data:${value.mimeType};base64,${value.fileContent}`\n        }\n        return componentProps.fileProps.imageProps.onGetSrc(src);\n    }\n\n    const downloadPortalFile = async (e: React.MouseEvent<HTMLAnchorElement | HTMLElement | HTMLButtonElement, MouseEvent>) => {\n        e.preventDefault();\n        setIsDownloadInProgress(true);\n        const storage = new FileAttribute(context.webAPI);\n        let entityName = dataset.getTargetEntityType();\n        let recordId = record.getRecordId();\n        let attributeName = Attribute.GetNameFromAlias(column.name);\n        const entityAliasName = Attribute.GetLinkedEntityAlias(column.name);\n\n        if (entityAliasName) {\n            entityName = dataset.linking.getLinkedEntities().find(x => x.alias === entityAliasName)!.name;\n            const entityMetadata = await context.utils.getEntityMetadata(entityName, []);\n            recordId = record.getRawData()![`${entityAliasName}.${entityMetadata.PrimaryIdAttribute}`];\n        }\n        await storage.downloadFileFromAttribute({\n            entityName: entityName,\n            recordId: recordId,\n            fileAttribute: attributeName\n        }, true, undefined, {\n            fileName: value.fileName,\n            fileSizeInBytes: value.fileSize\n        })\n        setIsDownloadInProgress(false);\n    }\n\n    const getAggregationLabel = (aggregationFunction: AggregationFunction) => {\n        switch (aggregationFunction) {\n            case 'avg': {\n                return labels.avg();\n            }\n            case 'max': {\n                return labels.max();\n            }\n            case 'min': {\n                return labels.min();\n            }\n            case 'sum': {\n                return labels.sum();\n            }\n            case 'count': {\n                return labels.count()\n            }\n            case 'countcolumn': {\n                return labels.countcolumn()\n            }\n        }\n    }\n\n    const componentProps = onOverrideComponentProps({\n        onGetLinkProps: (props) => props,\n        onGetOptionSetProps: (props) => props,\n        onGetRecordCommandsProps: (props) => props,\n        onRenderContent: (defaultRenderer) => defaultRenderer(),\n        onRenderAggregationLabel: (props, defaultRenderer) => defaultRenderer(props),\n        rootContainerProps: {\n            theme: theme,\n            className: styles.root\n        },\n        contentWrapperProps: {\n            className: styles.contentWrapper,\n        },\n        prefixSuffixWrapperProps: {\n            className: styles.prefixSuffixContentWrapper\n        },\n        textProps: {\n            className: getClassNames([defaultContentRendererStyles.content, !formattedValue ? defaultContentRendererStyles.placeholder : undefined]),\n            title: formattedValue,\n            children: formattedValue ?? '---'\n        },\n        fileProps: {\n            containerProps: {\n                className: styles.fileWrapper\n            },\n            iconProps: {\n                className: styles.fileIcon,\n                onGetIconName: (iconName) => iconName\n            },\n            imageProps: {\n                className: styles.fileImage,\n                onGetSrc: (src) => src\n            },\n            loadingProps: {\n                spinnerProps: {\n                    size: SpinnerSize.small,\n                    styles: {\n                        circle: styles.loadingSpinnerCircle\n                    }\n                }\n            }\n        }\n    });\n\n    const componentPropsProviderValue = useMemo(() => {\n        return {\n            current: componentProps\n        }\n    }, []);\n    componentPropsProviderValue.current = componentProps;\n\n    //this allows to add prefix/sufix icon without the need of cell customizer\n    //it can cover a lot of cases where otherwise custom PCF would be needed\n    const prefixIconProps = getIconProps(prefixIcon);\n    const suffixIconProps = getIconProps(suffixIcon)\n\n    return <ComponentPropsContext.Provider value={componentPropsProviderValue}>\n        {column.name === Constants.RIBBON_BUTTONS_COLUMN_NAME ?\n            <RecordCommands\n                applicationTheme={context.fluentDesignLanguage?.applicationTheme ?? theme}\n                theme={theme}\n                themeOverride={context.fluentDesignLanguage?.v8FluentOverrides}\n                commands={props.parameters.RecordCommands?.raw ?? []}\n                alignment={columnAlignment} /> :\n            <ThemeProvider {...componentProps.rootContainerProps}>\n                {aggregationFunction &&\n                    componentProps.onRenderAggregationLabel({\n                        className: styles.aggregationLabel\n                    }, (props) => {\n                        return <Label {...props}>{getAggregationLabel(aggregationFunction)}</Label>\n                    })\n                }\n                <div {...componentProps.prefixSuffixWrapperProps}>\n                    {prefixIconProps && <Icon {...prefixIconProps} className={getClassNames([prefixIconProps.className, styles.icon])} />}\n                    <div {...componentProps.contentWrapperProps}>\n                        {componentProps.contentWrapperProps.children ?? renderContent()}\n                    </div>\n                    {suffixIconProps && <Icon {...suffixIconProps} className={getClassNames([suffixIconProps.className, styles.icon])} />}\n                </div>\n            </ThemeProvider>}\n    </ComponentPropsContext.Provider>\n}\n\n\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/components/GridCellRenderer/OptionSet/OptionSet.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IOptionSet } from "../../OptionSet";
+import { IMultiSelectOptionSet } from "../../MultiSelectOptionSet";
+import { ITwoOptions } from "../../TwoOptions";
+export declare const OptionSet: (props: IOptionSet | IMultiSelectOptionSet | ITwoOptions) => JSX.Element;

package/dist/components/GridCellRenderer/OptionSet/OptionSet.js

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { useTheme, merge, ThemeProvider, Text } from '@fluentui/react';
+import { Theming, useThemeGenerator } from '@talxis/react-components';
+import { useMemo } from 'react';
+import { getOptionSetStyles, getColorfulOptionStyles } from './styles.js';
+import { useComponentProps } from '../useComponentProps.js';
+import { DefaultContentRenderer } from '../DefaultContentRenderer/DefaultContentRenderer.js';
+
+const OptionSet = (props) => {
+    const dataType = props.parameters.value.type;
+    const options = props.parameters.value.attributes.Options;
+    const value = props.parameters.value.raw;
+    const styles = useMemo(() => getOptionSetStyles(), []);
+    const componentProps = useComponentProps();
+    const optionSetProps = componentProps.onGetOptionSetProps({
+        containerProps: {
+            className: styles.root
+        },
+        onGetOptionProps: (props) => props
+    });
+    const shouldRenderDefaultLabel = () => {
+        if (!props.parameters.EnableOptionSetColors?.raw || !options.some(option => option.Color)) {
+            return true;
+        }
+        return false;
+    };
+    const getSelectedOptions = () => {
+        let result = value ?? [];
+        switch (dataType) {
+            case 'OptionSet': {
+                result = [value];
+                break;
+            }
+            case 'TwoOptions': {
+                result = [+value];
+                break;
+            }
+        }
+        return options.filter(option => result?.includes(option.Value)) ?? [];
+    };
+    if (shouldRenderDefaultLabel()) {
+        return jsx(DefaultContentRenderer, {});
+    }
+    return (jsx("div", { ...optionSetProps.containerProps, children: getSelectedOptions().map(option => {
+            return jsx(ColorfulOption, { optionSetProps: optionSetProps, option: option, context: props.context }, option.Value);
+        }) }));
+};
+const ColorfulOption = (props) => {
+    const theme = useTheme();
+    const option = props.option;
+    const backgroundColor = option.Color ?? theme.palette.neutralLight;
+    const textColor = Theming.GetTextColorForBackground(backgroundColor);
+    const styles = useMemo(() => getColorfulOptionStyles(), []);
+    const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {
+        fonts: {
+            medium: {
+                fontWeight: 600
+            }
+        }
+    }, props.context.fluentDesignLanguage?.v8FluentOverrides));
+    const optionProps = props.optionSetProps.onGetOptionProps({
+        containerProps: {
+            className: styles.option,
+            theme: optionTheme
+        },
+        option: option,
+        textProps: {
+            children: option.Label
+        }
+    });
+    return (jsx(ThemeProvider, { ...optionProps.containerProps, children: jsx(Text, { ...optionProps.textProps, children: optionProps.textProps.children }) }));
+};
+
+export { OptionSet };
+//# sourceMappingURL=OptionSet.js.map

package/dist/components/GridCellRenderer/OptionSet/OptionSet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionSet.js","sources":["../../../../src/components/GridCellRenderer/OptionSet/OptionSet.tsx"],"sourcesContent":["import { DataType } from \"@talxis/client-libraries\";\nimport { IOptionSet } from \"../../OptionSet\"\nimport { IMultiSelectOptionSet } from \"../../MultiSelectOptionSet\";\nimport { ITwoOptions } from \"../../TwoOptions\";\nimport { PartialTheme, ThemeProvider, useTheme, merge } from \"@fluentui/react\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\nimport { Text } from '@fluentui/react';\nimport { IContext } from \"../../../interfaces\";\nimport { useMemo } from \"react\";\nimport { getColorfulOptionStyles, getOptionSetStyles } from \"./styles\";\nimport { useComponentProps } from \"../useComponentProps\";\nimport { IOptionSetProps } from \"../interfaces\";\nimport { DefaultContentRenderer } from \"../DefaultContentRenderer\";\n\nexport const OptionSet = (props: IOptionSet | IMultiSelectOptionSet | ITwoOptions) => {\n    const dataType: DataType = props.parameters.value.type as DataType;\n    const options = props.parameters.value.attributes.Options;\n    const value: any = props.parameters.value.raw;\n    const styles = useMemo(() => getOptionSetStyles(), []);\n    const componentProps = useComponentProps();\n\n    const optionSetProps = componentProps.onGetOptionSetProps({\n        containerProps: {\n            className: styles.root\n        },\n        onGetOptionProps: (props) => props\n    })\n\n    const shouldRenderDefaultLabel = () => {\n        if (!props.parameters.EnableOptionSetColors?.raw || !options.some(option => option.Color)) {\n            return true;\n        }\n        return false;\n    }\n\n    const getSelectedOptions = () => {\n        let result: any = value ?? [];\n        switch (dataType) {\n            case 'OptionSet': {\n                result = [value]\n                break;\n            }\n            case 'TwoOptions': {\n                result = [+value];\n                break;\n            }\n        }\n        return options.filter(option => result?.includes(option.Value)) ?? [];\n    }\n\n    if (shouldRenderDefaultLabel()) {\n        return <DefaultContentRenderer />\n    }\n    return (<div {...optionSetProps.containerProps}>\n        {getSelectedOptions().map(option => {\n            return <ColorfulOption\n                key={option.Value}\n                optionSetProps={optionSetProps}\n                option={option}\n                context={props.context} />\n        })}\n    </div>)\n}\n\nconst ColorfulOption = (props: {\n    option: ComponentFramework.PropertyHelper.OptionMetadata,\n    context: IContext;\n    optionSetProps: IOptionSetProps\n}) => {\n    const theme = useTheme();\n    const option = props.option;\n    const backgroundColor = option.Color ?? theme.palette.neutralLight;\n    const textColor = Theming.GetTextColorForBackground(backgroundColor);\n    const styles = useMemo(() => getColorfulOptionStyles(), []);\n    const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {\n        fonts: {\n            medium: {\n                fontWeight: 600\n            }\n        }\n    } as PartialTheme, props.context.fluentDesignLanguage?.v8FluentOverrides as PartialTheme));\n\n    const optionProps = props.optionSetProps.onGetOptionProps({\n        containerProps: {\n            className: styles.option,\n            theme: optionTheme\n        },\n        option: option,\n        textProps: {\n            children: option.Label\n        }\n    })\n\n    return (\n        <ThemeProvider {...optionProps.containerProps}>\n            <Text {...optionProps.textProps}>{optionProps.textProps.children}</Text>\n        </ThemeProvider>\n    )\n}"],"names":["_jsx"],"mappings":"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"}

package/dist/components/GridCellRenderer/OptionSet/index.d.ts

@@ -0,0 +1 @@
+export * from './OptionSet';

package/dist/components/GridCellRenderer/OptionSet/index.js

@@ -0,0 +1,2 @@
+export { OptionSet } from './OptionSet.js';
+//# sourceMappingURL=index.js.map

package/dist/components/GridCellRenderer/OptionSet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/GridCellRenderer/OptionSet/styles.d.ts

@@ -0,0 +1,20 @@
+export declare const getColorfulOptionStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    option: {
+        borderRadius: number;
+        padding: number;
+        paddingLeft: number;
+        paddingRight: number;
+        overflow: string;
+        textOverflow: string;
+        flexGrow: number;
+    };
+}>;
+export declare const getOptionSetStyles: () => import("@fluentui/react").IProcessedStyleSet<{
+    root: {
+        gap: number;
+        display: string;
+        overflow: string;
+        flexGrow: number;
+        textAlign: string;
+    };
+}>;