@talxis/base-controls 1.2406.2

package/src/components/Lookup/styles.ts

@@ -0,0 +1,106 @@
+import { ITheme, mergeStyleSets } from "@fluentui/react";
+
+export const getTargetSelectorStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        targetSelector: {
+            display: 'flex',
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingBottom: 8,
+            gap: 8,
+            paddingTop: 8,
+            '>span': {
+                lineHeight: 15,
+                minWidth: 'fit-content',
+                color: theme.semanticColors.listText,
+                fontWeight: 600
+            }
+        },
+        targetSelectorLinks: {
+            display: 'flex',
+            gap: 5,
+            flexWrap: 'wrap'
+        },
+        targetSelectorLink: {
+            color: theme.palette.blackTranslucent40,
+            '&[data-selected="true"]': {
+                color: theme.semanticColors.link,
+                fontWeight: 600
+            }
+        },
+    })
+}
+
+const getHeight = (height: number) => {
+    if(height === -1 || height === 0) {
+        return undefined;
+    }
+    return height;
+}
+
+export const getLookupStyles = (theme: ITheme, height: number, isSingleSelect: boolean) => {
+    const _height = getHeight(height);
+    return mergeStyleSets({
+        root: {
+            '[class*="TALXIS__tag-picker__search-btn"][class*="TALXIS__tag-picker__search-btn"]': {
+                top: 0,
+                bottom: 0,
+                margin: `auto 0`,
+                right: 5
+            },
+
+            '[data-navigation-enabled="true"]': {
+                '> span > div > span': {
+                    color: theme.semanticColors.link,
+                    cursor: 'pointer',
+                },
+                ':hover': {
+                    textDecoration: 'underline',
+                    cursor: 'pointer !important'
+                }
+            },
+            '.ms-BasePicker-itemsWrapper .ms-CommandBar': {
+                height: _height && isSingleSelect ? _height - 6 : undefined
+            },
+            '.ms-BasePicker-text': {
+                minHeight: _height ?? 36,
+                height: 'min-content',
+                paddingRight: !isSingleSelect ? 36 : undefined,
+                alignItems: 'baseline',
+
+                'input': {
+                    alignSelf: 'center'
+                },
+                '.hover-only': {
+                    animationName: 'none'
+                },
+                '::after': {
+                    inset: '0px !important'
+                }
+            }
+        },
+        suggestions: {
+            '.ms-Suggestions-title': {
+                padding: 0,
+                display: 'flex',
+                flexDirection: 'column',
+            }
+        },
+        createRecordBtn: {
+            height: 38,
+            width: '100%',
+            '.ms-Button-menuIcon': {
+                display: 'none'
+            },
+            '>.ms-Button-flexContainer.ms-Button-flexContainer': {
+                justifyContent: 'flex-start'
+            },
+            '.ms-Button-textContainer': {
+                flexGrow: 'initial',
+                '>span': {
+                    fontWeight: 600,
+                }
+            }
+        }
+    });
+}

package/src/components/Lookup/translations.ts

@@ -0,0 +1,28 @@
+import { ILookupTranslations } from "./interfaces";
+
+export const lookupTranslations: ILookupTranslations = {
+    search: {
+        1033: "Search",
+        1029: "Vyhledejte"
+    },
+    newRecord: {
+        1033: "New record",
+        1029: "Nový záznam"
+    },
+    searching: {
+        1033: "Searching...",
+        1029: "Hledám..."
+    },
+    noRecordsFound: {
+        1033: "No records found",
+        1029: "Nebyly nalezeny žádné záznamy"
+    },
+    resultsFrom: {
+        1033: "Results from:",
+        1029: "Výsledky z:"
+    },
+    noName: {
+        1033: "(No Name)",
+        1029: "(Bez názvu)"
+    }
+}

package/src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx

@@ -0,0 +1,83 @@
+
+import { IMultiSelectOptionSet } from './interfaces';
+import { useComponent } from '../../hooks';
+import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
+import { IComboBox, IComboBoxOption } from '@fluentui/react';
+import React, { useEffect, useRef } from 'react';
+
+export const MultiSelectOptionSet = (props: IMultiSelectOptionSet) => {
+    const [labels, onNotifyOutputChanged] = useComponent('MultiSelectOptionSet', props);
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const componentRef = useRef<IComboBox>(null);
+    const { Options } = parameters.value.attributes;
+    const context = props.context;
+    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({
+        key: option.Value.toString(),
+        text: option.Label,
+    }));
+
+    const handleChange = (option?: IComboBoxOption | null): void => {
+        if(!option) {
+            onNotifyOutputChanged({
+                value: undefined
+            });
+            return;
+        }
+        const optionKey = option.key.toString();
+        const updatedSelectedKeys = new Set(boundValue.raw || []);
+        if (option.selected) {
+            updatedSelectedKeys.add(+optionKey);
+        } else {
+            updatedSelectedKeys.delete(+optionKey);
+        }
+        const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);
+        
+        onNotifyOutputChanged({
+            value: updatedSelectedKeysArray.map(key => +key)
+        });
+    };
+
+    useEffect(() => {
+        if (parameters.AutoFocus?.raw) {
+            componentRef.current?.focus(true);
+        }
+    }, []);
+
+    return <ComboBox
+        componentRef={componentRef}
+        borderless={parameters.EnableBorder?.raw === false}
+        options={comboBoxOptions}
+        allowFreeInput={true}
+        multiSelect
+        autoComplete="on"
+        autofill={parameters.AutoFocus?.raw === true ? {
+            autoFocus: true
+        }: undefined}
+        readOnly={context.mode.isControlDisabled}
+        errorMessage={boundValue.errorMessage}
+        selectedKey={boundValue.raw ? boundValue.raw.map(key => key.toString()) : [-1]}
+        useComboBoxAsMenuWidth
+        styles={{
+            root: {
+                height: context.mode.allocatedHeight || undefined,
+                width: context.mode.allocatedWidth || undefined,
+                display: 'flex',
+                alignItems: 'center',
+            },
+            callout: {
+                maxHeight: '300px !important'
+            }
+        }}
+        deleteButtonProps={{
+            key: 'delete',
+            showOnlyOnHover: false,
+            iconProps: {
+                iconName: 'Delete'
+            },
+            onClick: (e, value) => {
+                handleChange(null);
+            }
+        }}
+        onChange={(e, option) => handleChange(option)} />;
+};

package/src/components/MultiSelectOptionSet/index.ts

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

package/src/components/MultiSelectOptionSet/interfaces.ts

@@ -0,0 +1,14 @@
+import { IMultiSelectOptionSetProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+
+export interface IMultiSelectOptionSet extends IComponent<IMultiSelectOptionSetParameters, IMultiSelectOptionSetOutputs, ITranslations> {
+}
+
+export interface IMultiSelectOptionSetParameters extends IBaseParameters {
+    value: IMultiSelectOptionSetProperty;
+}
+
+export interface IMultiSelectOptionSetOutputs extends IOutputs {
+    value?: number[];
+}

package/src/components/OptionSet/OptionSet.tsx

@@ -0,0 +1,67 @@
+
+import { IOptionSet } from './interfaces';
+import { useComponent } from '../../hooks';
+import { ComboBox } from '@talxis/react-components/dist/components/ComboBox';
+import { IComboBox, IComboBoxOption } from '@fluentui/react';
+import React, { useEffect, useRef } from 'react';
+
+export const OptionSet = (props: IOptionSet) => {
+    const [labels, onNotifyOutputChanged] = useComponent('OptionSet', props);
+    const componentRef = useRef<IComboBox>(null);
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const { Options } = parameters.value.attributes;
+    const context = props.context;
+    const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({
+        key: option.Value.toString(),
+        text: option.Label,
+    }));
+
+    const handleChange = (option?: IComboBoxOption | null): void => {
+        let value = undefined;
+        if (option) {
+            value = parseInt(option.key as string);
+        }
+        onNotifyOutputChanged({
+            value: value
+        });
+    };
+
+    useEffect(() => {
+        if (parameters.AutoFocus?.raw) {
+            componentRef.current?.focus(true);
+        }
+    }, []);
+
+    return <ComboBox
+        componentRef={componentRef}
+        borderless={parameters.EnableBorder?.raw === false}
+        options={comboBoxOptions}
+        readOnly={context.mode.isControlDisabled}
+        //the defaultValue comes in the raw prop directly, no need to look at it
+        selectedKey={boundValue.raw?.toString() ?? -1}
+        dropdownWidth={context.mode.allocatedWidth || undefined}
+        errorMessage={boundValue.errorMessage}
+        useComboBoxAsMenuWidth
+        styles={{
+            root: {
+                height: context.mode.allocatedHeight || undefined,
+                width: context.mode.allocatedWidth || undefined,
+                display: 'flex',
+                alignItems: 'center',
+            },
+            callout: {
+                maxHeight: '300px !important'
+            }
+        }}
+        deleteButtonProps={{
+            key: 'delete',
+            showOnlyOnHover: true,
+            iconProps: {
+                iconName: 'Delete'
+            },
+            onClick: (e, value) => { handleChange(null); }
+        }}
+        onChange={(e, option) => handleChange(option)}
+    />;
+};

package/src/components/OptionSet/index.ts

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

package/src/components/OptionSet/interfaces.ts

@@ -0,0 +1,17 @@
+import { IOptionSetProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+
+export interface IOptionSet extends IComponent<IOptionSetParameters, IOptionSetOutputs, IOptionSetTranslations> {
+}
+
+export interface IOptionSetParameters extends IBaseParameters {
+    value: IOptionSetProperty;
+}
+
+export interface IOptionSetOutputs extends IOutputs {
+    value?: number
+}
+export interface IOptionSetTranslations extends ITranslations {
+
+}

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,58 @@
+import { TextField as TextFieldBase } from '@talxis/react-components/dist/components/TextField';
+import { useRef } from 'react';
+import { useInputBasedComponent } from '../../hooks/useInputBasedComponent';
+import { useTextField } from './hooks/useTextField';
+import { ITextField, ITextFieldOutputs, ITextFieldParameters, ITextFieldTranslations } from './interfaces';
+import React from 'react';
+
+export const TextField = (props: ITextField) => {
+    const context = props.context;
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const ref = useRef<HTMLDivElement>(null);
+    const [value, labels, setValue, onNotifyOutputChanged] = useInputBasedComponent<string | undefined, ITextFieldParameters, ITextFieldOutputs, ITextFieldTranslations>('TextField', props);
+    const [height] = useTextField(props, ref);
+
+    return (
+        <TextFieldBase
+            readOnly={context.mode.isControlDisabled}
+            //TODO: should be inherited by the type, eg TextArea = multiline
+            multiline={parameters.IsMultiLine?.raw}
+            resizable={parameters.isResizable?.raw}
+            autoFocus={parameters.AutoFocus?.raw}
+            elementRef={ref}
+            styles={{
+                fieldGroup: {
+                    height: height,
+                    width: context.mode.allocatedWidth || undefined
+                }
+            }}
+            borderless={parameters.EnableBorder?.raw === false}
+            errorMessage={boundValue.errorMessage}
+            deleteButtonProps={parameters.EnableDeleteButton?.raw === true ? {
+                key: 'delete',
+                showOnlyOnHover: true,
+                iconProps: {
+                    iconName: 'Delete'
+                },
+                onClick: () => setValue(undefined)
+            } : undefined}
+            clickToCopyProps={parameters.EnableCopyButton?.raw === true ? {
+                key: 'copy',
+                showOnlyOnHover: true,
+                iconProps: {
+                    iconName: 'Copy'
+                }
+            } : undefined}
+            value={value ?? ""}
+            onBlur={() => {
+                onNotifyOutputChanged({
+                    value: value ?? undefined
+                });
+            }}
+            onChange={(e, value) => {
+                setValue(value);
+            }} />
+
+    );
+};

package/src/components/TextField/hooks/useTextField.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "react";
+import { ITextField } from "../interfaces";
+
+export const useTextField = (props: ITextField, ref: React.RefObject<HTMLDivElement>): [number | undefined] => {
+    const getInitialHeight = () => {
+        if (props.context.mode.allocatedHeight) {
+            return props.context.mode.allocatedHeight;
+        }
+        if (props.parameters.IsMultiLine?.raw) {
+            return 80;
+        }
+        return undefined;
+    };
+
+    const hasBeenResizedRef = useRef<boolean>(false);
+    const [height, setHeight] = useState<number | undefined>(getInitialHeight());
+    const firstRenderRef = useRef<boolean>(true);
+    
+    useEffect(() => {
+        if (!props.parameters.IsMultiLine?.raw) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(() => {
+            if (firstRenderRef.current || hasBeenResizedRef.current) {
+                firstRenderRef.current = false;
+                return;
+            }
+            hasBeenResizedRef.current = true;
+            setHeight(undefined);
+        });
+        const textarea = ref.current?.querySelector('textarea') as HTMLTextAreaElement;
+        if (height) {
+            textarea.setAttribute('style', `height: ${height}px`);
+        }
+        resizeObserver.observe(textarea);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return [height];
+};

package/src/components/TextField/index.ts

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

package/src/components/TextField/interfaces.ts

@@ -0,0 +1,20 @@
+import { IStringProperty, ITwoOptionsProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IInputParameters } from "../../interfaces/parameters";
+
+export interface ITextField extends IComponent<ITextFieldParameters, ITextFieldOutputs, ITextFieldTranslations> {
+}
+
+export interface ITextFieldParameters extends IInputParameters {
+    IsMultiLine?: ITwoOptionsProperty;
+    isResizable?: ITwoOptionsProperty;
+    value: IStringProperty;
+}
+
+export interface ITextFieldOutputs extends IOutputs {
+    value?: string;
+}
+
+export interface ITextFieldTranslations extends ITranslations {
+
+}

package/src/components/TwoOptions/TwoOptions.tsx

@@ -0,0 +1,43 @@
+import { IRefObject, IToggle, Toggle } from '@fluentui/react';
+import { useComponent } from '../../hooks';
+import { ITwoOptions } from './interfaces';
+import React, { useEffect, useRef } from 'react';
+
+export const TwoOptions = (props: ITwoOptions) => {
+    const parameters = props.parameters;
+    const boundValue = parameters.value;
+    const options = boundValue.attributes.Options;
+    const [labels, onNotifyOutputChanged] = useComponent('TwoOptions', props);
+    const context = props.context;
+    const componentRef = useRef<any>(null);
+    
+    useEffect(() => {
+        if(parameters.AutoFocus?.raw === true) {
+            componentRef.current.focus();
+        }
+    }, []);
+
+    const handleChange = (value: boolean | undefined): void => {
+        onNotifyOutputChanged({
+            value: value
+        });
+    };
+    
+    return <Toggle
+    styles={{
+        root: {
+            height: context.mode.allocatedHeight || undefined,
+            width: context.mode.allocatedWidth || undefined,
+        },
+        container: {
+            alignItems: 'center'
+        }
+    }}
+    checked={boundValue.raw}
+    componentRef={componentRef}
+    inlineLabel
+    onText={options.find(option=>option.Value ===1)?.Label || 'Yes'}
+    offText={options.find(option=>option.Value ===0)?.Label || 'No'}
+    onChange={(e, value) => handleChange(value)}
+/>;
+};

package/src/components/TwoOptions/index.ts

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

package/src/components/TwoOptions/interfaces.ts

@@ -0,0 +1,17 @@
+import { ITwoOptionsProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters } from "../../interfaces/parameters";
+
+export interface ITwoOptions extends IComponent<ITwoOptionsParameters, ITwoOptionsOutputs, ITwoOptionsTranslations> {
+}
+
+export interface ITwoOptionsParameters extends IBaseParameters {
+    value: ITwoOptionsProperty
+}
+
+export interface ITwoOptionsOutputs extends IOutputs {
+    value?: boolean;
+}
+export interface ITwoOptionsTranslations extends ITranslations {
+
+}

package/src/hooks/index.ts

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

package/src/hooks/useComponent.ts

@@ -0,0 +1,83 @@
+import { useEffect, useMemo, useRef } from "react";
+import React from 'react';
+import deepEqual from 'fast-deep-equal/es6';
+import { IComponent, IOutputs, IParameters, ITranslations } from "../interfaces";
+import { merge } from 'merge-anything';
+import { StringProps } from "../types";
+import { Liquid } from "liquidjs";
+
+/**
+ * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
+ * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.
+ */
+export const useComponent = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations extends ITranslations>(name: string, props: IComponent<TParameters, TOutputs, TTranslations>, defaultTranslations?: TTranslations): [
+    Required<StringProps<TTranslations>>,
+    (outputs: TOutputs) => void,
+] => {
+    const parametersRef = useRef<TParameters>(props.parameters);
+    const liquid = useMemo(() => new Liquid(), []);
+    const labels = useMemo(() => {
+        const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;
+        return new Proxy(mergedTranslations, {
+            get(target, key) {
+                return (variables: any) => getLabel(key as string, mergedTranslations, variables)
+            }
+        }) as any;
+    }, []);
+
+    useEffect(() => {
+        parametersRef.current = props.parameters;
+    }, [props.parameters]);
+
+    const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {
+        const strigify = (value: string | string[]) => {
+            if(typeof value === 'string') {
+                return value;
+            }
+            return JSON.stringify(value);
+        };
+        const translation = translations[key];
+        if (!translation) {
+            console.error(`Translation for the ${key} label of the ${name} component has not been defined!`);
+            return key;
+        }
+        if (typeof translation === 'string' || Array.isArray(translation)) {
+            return strigify(translation);
+        }
+        let label = translation[props.context.userSettings.languageId];
+        if (!label) {
+            console.info(`Translation for the ${key} label of the ${name} component has not been found. Using default Czech label instead.`);
+            label = translation[1029];
+        }
+        if (!label) {
+            console.error(`Translation for the ${key} label of the ${name} component does not exists neither for Czech language and current LCID.`);
+            label = key;
+        }
+
+        return liquid.parseAndRenderSync(strigify(label), variables);
+    };
+
+    const onNotifyOutputChanged = (outputs: TOutputs) => {
+        let isDirty = false;
+        for (let [key, outputValue] of Object.entries(outputs)) {
+            const parameterValue = parametersRef.current[key]?.raw;
+            if (!deepEqual(parameterValue, outputValue)) {
+                if(outputValue === "") {
+                    outputValue = null;
+                }
+                // handles undefined X null
+                if (parameterValue == outputValue) {
+                    continue;
+                }
+                isDirty = true;
+                break;
+            }
+        }
+        if (!isDirty) {
+            return;
+        }
+        //console.log(`Change detected, triggering notifyOutputChanged on component ${name}.`);
+        props.onNotifyOutputChanged?.(outputs);
+    };
+    return [labels, onNotifyOutputChanged];
+};

package/src/hooks/useFocusIn.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+export const useFocusIn = (ref: React.RefObject<HTMLElement>): boolean => {
+    const [isFocused, setIsFocused] = useState<boolean>(false);
+
+    useEffect(() => {
+        const onFocus = () => {
+            setIsFocused(true);
+        }
+        const onBlur = () => {
+            setIsFocused(false);
+        }
+        ref.current?.addEventListener('focusin', onFocus);
+        ref.current?.addEventListener('focusout', onBlur);
+
+        return () => {
+            ref.current?.removeEventListener('focusin', onFocus);
+            ref.current?.removeEventListener('focusout', onBlur);
+        }
+    }, []);
+
+    return isFocused
+};