@talxis/base-controls 1.2411.2 → 1.2411.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@ import { Liquid } from 'liquidjs';
4
4
  import { useControlTheme } from './useControlTheme.js';
5
5
  import { useControlSizing } from './useControlSizing.js';
6
6
 
7
- const deepEqual = require('fast-deep-equal/es6');
7
+ const deepEqual = require('fast-deep-equal/react');
8
8
  /**
9
9
  * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
10
10
  * 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.
@@ -1 +1 @@
1
- {"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\n\nconst deepEqual = require('fast-deep-equal/es6')\n\nexport type ITranslation<T> = {\n [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n [LCID: number]: string | string[];\n [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n labels: Required<ITranslation<TTranslations>>,\n sizing: {\n width?: number,\n height?: number\n },\n theme: ITheme;\n onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * 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.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n const parametersRef = useRef<TParameters>(props.parameters);\n const sizing = useControlSizing(props.context.mode);\n const context = props.context;\n const liquid = useMemo(() => new Liquid(), []);\n const labels = useMemo(() => {\n const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n return new Proxy(mergedTranslations as any, {\n get(target, key) {\n return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n }\n }) as any;\n }, []);\n\n useEffect(() => {\n parametersRef.current = props.parameters;\n }, [props.parameters]);\n\n const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n const strigify = (value: string | string[]) => {\n if (typeof value === 'string') {\n return value;\n }\n return JSON.stringify(value);\n };\n //@ts-ignore\n const translation = translations[key];\n if (!translation) {\n console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n return key;\n }\n if (typeof translation === 'string' || Array.isArray(translation)) {\n return strigify(translation);\n }\n let label = translation[props.context.userSettings.languageId];\n if (!label) {\n console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n label = translation[1029];\n }\n if (!label) {\n console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n label = key;\n }\n\n return liquid.parseAndRenderSync(strigify(label), variables);\n };\n\n const onNotifyOutputChanged = (outputs: TOutputs) => {\n let isDirty = false;\n for (let [key, outputValue] of Object.entries(outputs)) {\n let parameterValue = parametersRef.current[key]?.raw;\n //@ts-ignore - types\n if (!deepEqual(parameterValue, outputValue)) {\n if (outputValue === null) {\n outputValue = undefined;\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (outputValue === \"\") {\n outputValue = undefined\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (parameterValue === null) {\n parameterValue = undefined;\n }\n if (parameterValue === outputValue) {\n continue\n }\n isDirty = true;\n break;\n }\n }\n if (!isDirty) {\n return;\n }\n //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n props.onNotifyOutputChanged?.(outputs);\n };\n return {\n labels,\n sizing,\n theme: useControlTheme(context.fluentDesignLanguage),\n onNotifyOutputChanged\n }\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\n\nconst deepEqual = require('fast-deep-equal/react');\n\nexport type ITranslation<T> = {\n [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n [LCID: number]: string | string[];\n [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n labels: Required<ITranslation<TTranslations>>,\n sizing: {\n width?: number,\n height?: number\n },\n theme: ITheme;\n onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * 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.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n const parametersRef = useRef<TParameters>(props.parameters);\n const sizing = useControlSizing(props.context.mode);\n const context = props.context;\n const liquid = useMemo(() => new Liquid(), []);\n const labels = useMemo(() => {\n const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n return new Proxy(mergedTranslations as any, {\n get(target, key) {\n return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n }\n }) as any;\n }, []);\n\n useEffect(() => {\n parametersRef.current = props.parameters;\n }, [props.parameters]);\n\n const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n const strigify = (value: string | string[]) => {\n if (typeof value === 'string') {\n return value;\n }\n return JSON.stringify(value);\n };\n //@ts-ignore\n const translation = translations[key];\n if (!translation) {\n console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n return key;\n }\n if (typeof translation === 'string' || Array.isArray(translation)) {\n return strigify(translation);\n }\n let label = translation[props.context.userSettings.languageId];\n if (!label) {\n console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n label = translation[1029];\n }\n if (!label) {\n console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n label = key;\n }\n\n return liquid.parseAndRenderSync(strigify(label), variables);\n };\n\n const onNotifyOutputChanged = (outputs: TOutputs) => {\n let isDirty = false;\n for (let [key, outputValue] of Object.entries(outputs)) {\n let parameterValue = parametersRef.current[key]?.raw;\n //@ts-ignore - types\n if (!deepEqual(parameterValue, outputValue)) {\n if (outputValue === null) {\n outputValue = undefined;\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (outputValue === \"\") {\n outputValue = undefined\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (parameterValue === null) {\n parameterValue = undefined;\n }\n if (parameterValue === outputValue) {\n continue\n }\n isDirty = true;\n break;\n }\n }\n if (!isDirty) {\n return;\n }\n //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n props.onNotifyOutputChanged?.(outputs);\n };\n return {\n labels,\n sizing,\n theme: useControlTheme(context.fluentDesignLanguage),\n onNotifyOutputChanged\n }\n};\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@talxis/base-controls",
3
- "version": "1.2411.2",
3
+ "version": "1.2411.3",
4
4
  "description": "Set of React components that natively work with Power Apps Component Framework API's",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",