@talxis/base-controls 1.2406.2 → 1.2406.3

package/src/components/Lookup/styles.ts

@@ -1,106 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,83 +0,0 @@
-
-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

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

package/src/components/MultiSelectOptionSet/interfaces.ts

@@ -1,14 +0,0 @@
-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

@@ -1,67 +0,0 @@
-
-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

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

package/src/components/OptionSet/interfaces.ts

@@ -1,17 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

package/src/components/TextField/interfaces.ts

@@ -1,20 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

package/src/components/TwoOptions/interfaces.ts

@@ -1,17 +0,0 @@
-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

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

package/src/hooks/useComponent.ts

@@ -1,83 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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
-};