@talxis/base-controls 1.2501.4 → 1.2501.6
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.
- package/dist/components/Grid/Grid.js +1 -1
- package/dist/hooks/index.d.ts +1 -1
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/useControl.js +1 -1
- package/dist/hooks/useControl.js.map +1 -1
- package/dist/index.d.ts +11 -6
- package/dist/index.js +1 -1
- package/dist/utils/index.js +3 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/theme/ControlTheme.d.ts +21 -0
- package/dist/utils/theme/ControlTheme.js +39 -0
- package/dist/utils/theme/ControlTheme.js.map +1 -0
- package/dist/utils/theme/hooks/index.d.ts +2 -0
- package/dist/utils/theme/hooks/index.js +3 -0
- package/dist/utils/theme/hooks/index.js.map +1 -0
- package/dist/utils/theme/hooks/useControlTheme.d.ts +3 -0
- package/dist/{hooks → utils/theme/hooks}/useControlTheme.js +2 -2
- package/dist/utils/theme/hooks/useControlTheme.js.map +1 -0
- package/dist/utils/theme/hooks/useControlThemeGenerator.d.ts +14 -0
- package/dist/utils/theme/hooks/useControlThemeGenerator.js +11 -0
- package/dist/utils/theme/hooks/useControlThemeGenerator.js.map +1 -0
- package/dist/utils/theme/index.d.ts +2 -2
- package/dist/utils/theme/index.js +3 -1
- package/dist/utils/theme/index.js.map +1 -1
- package/package.json +2 -2
- package/dist/hooks/useControlTheme.d.ts +0 -3
- package/dist/hooks/useControlTheme.js.map +0 -1
- package/dist/utils/theme/getControlTheme.d.ts +0 -3
- package/dist/utils/theme/getControlTheme.js +0 -25
- package/dist/utils/theme/getControlTheme.js.map +0 -1
- package/dist/utils/theme/interfaces.d.ts +0 -9
|
@@ -6,7 +6,7 @@ import { gridTranslations } from './translations.js';
|
|
|
6
6
|
import { GridContext } from './GridContext.js';
|
|
7
7
|
import { mergeStyleSets, ThemeProvider } from '@fluentui/react';
|
|
8
8
|
import { KeyHoldListener } from './core/services/KeyListener.js';
|
|
9
|
-
import { useControlTheme } from '../../hooks/useControlTheme.js';
|
|
9
|
+
import { useControlTheme } from '../../utils/theme/hooks/useControlTheme.js';
|
|
10
10
|
import { useControl } from '../../hooks/useControl.js';
|
|
11
11
|
|
|
12
12
|
const styles = mergeStyleSets({
|
package/dist/hooks/index.d.ts
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -3,5 +3,5 @@ export { useControlSizing } from './useControlSizing.js';
|
|
|
3
3
|
export { useFocusIn } from './useFocusIn.js';
|
|
4
4
|
export { useInputBasedControl } from './useInputBasedControl.js';
|
|
5
5
|
export { useMouseOver } from './useMouseOver.js';
|
|
6
|
-
export { useControlTheme } from '
|
|
6
|
+
export { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
|
|
7
7
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/useControl.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useRef, useMemo, useEffect } from 'react';
|
|
2
2
|
import { merge } from 'merge-anything';
|
|
3
3
|
import { Liquid } from 'liquidjs';
|
|
4
|
-
import { useControlTheme } from '
|
|
4
|
+
import { useControlTheme } from '../utils/theme/hooks/useControlTheme.js';
|
|
5
5
|
import { useControlSizing } from './useControlSizing.js';
|
|
6
6
|
import deepEqual from 'fast-deep-equal/es6';
|
|
7
7
|
|
|
@@ -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 \"
|
|
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 \"../utils/theme/hooks/useControlTheme\";\nimport { useControlSizing } from \"./useControlSizing\";\nimport deepEqual from 'fast-deep-equal/es6';\nimport { ITheme } from \"@talxis/react-components\";\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 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/dist/index.d.ts
CHANGED
|
@@ -67,12 +67,19 @@ interface ILookupProperty extends IProperty, Omit<Partial<ComponentFramework.Pro
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
interface IFluentDesignState extends ComponentFramework.FluentDesignState {
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
/**
|
|
71
|
+
* Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage
|
|
72
|
+
*/
|
|
73
|
+
v8FluentOverrides?: DeepPartial<ITheme>;
|
|
74
|
+
/**
|
|
75
|
+
* The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.
|
|
76
|
+
* This object provides access to the application's theme, enabling you to render elements like callouts and other surfaces accurately.
|
|
77
|
+
*/
|
|
78
|
+
applicationTheme?: ITheme;
|
|
74
79
|
}
|
|
75
80
|
|
|
81
|
+
declare const useControlTheme: (fluentDesignLanguage?: IFluentDesignState) => ITheme$1;
|
|
82
|
+
|
|
76
83
|
interface IOutputs$1 {
|
|
77
84
|
[key: string]: any;
|
|
78
85
|
}
|
|
@@ -194,8 +201,6 @@ declare const useInputBasedControl: <TValue, TParameters extends IInputParameter
|
|
|
194
201
|
|
|
195
202
|
declare const useMouseOver: (ref: React.RefObject<HTMLElement>) => boolean;
|
|
196
203
|
|
|
197
|
-
declare const useControlTheme: (fluentDesignLanguage?: ComponentFramework.FluentDesignState) => ITheme$1;
|
|
198
|
-
|
|
199
204
|
declare const getDefaultDateTimeTranslations: (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo) => {
|
|
200
205
|
time: {
|
|
201
206
|
1029: string;
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ export { useControlSizing } from './hooks/useControlSizing.js';
|
|
|
3
3
|
export { useFocusIn } from './hooks/useFocusIn.js';
|
|
4
4
|
export { useInputBasedControl } from './hooks/useInputBasedControl.js';
|
|
5
5
|
export { useMouseOver } from './hooks/useMouseOver.js';
|
|
6
|
-
export { useControlTheme } from './hooks/useControlTheme.js';
|
|
6
|
+
export { useControlTheme } from './utils/theme/hooks/useControlTheme.js';
|
|
7
7
|
export { DateTime } from './components/DateTime/DateTime.js';
|
|
8
8
|
export { useDateTime } from './components/DateTime/hooks/useDateTime.js';
|
|
9
9
|
export { Decimal } from './components/Decimal/Decimal.js';
|
package/dist/utils/index.js
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ControlTheme } from './theme/ControlTheme.js';
|
|
2
|
+
export { useControlTheme } from './theme/hooks/useControlTheme.js';
|
|
3
|
+
export { useControlThemeGenerator } from './theme/hooks/useControlThemeGenerator.js';
|
|
2
4
|
//# sourceMappingURL=index.js.map
|
package/dist/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="powerapps-component-framework" />
|
|
2
|
+
import { ITheme } from "@talxis/react-components";
|
|
3
|
+
import { DeepPartial } from "@talxis/client-libraries";
|
|
4
|
+
export interface IFluentDesignState extends ComponentFramework.FluentDesignState {
|
|
5
|
+
/**
|
|
6
|
+
* Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage
|
|
7
|
+
*/
|
|
8
|
+
v8FluentOverrides?: DeepPartial<ITheme>;
|
|
9
|
+
/**
|
|
10
|
+
* The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.
|
|
11
|
+
* This object provides access to the application's theme, enabling you to render elements like callouts and other surfaces accurately.
|
|
12
|
+
*/
|
|
13
|
+
applicationTheme?: ITheme;
|
|
14
|
+
}
|
|
15
|
+
export declare class ControlTheme {
|
|
16
|
+
static GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage?: IFluentDesignState): ITheme;
|
|
17
|
+
static GenerateFluentDesignLanguage(primaryColor: string, backgroundColor: string, textColor: string, options?: {
|
|
18
|
+
v8FluentOverrides?: DeepPartial<ITheme>;
|
|
19
|
+
applicationTheme?: ITheme;
|
|
20
|
+
}): IFluentDesignState;
|
|
21
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { getTheme } from '@fluentui/react';
|
|
2
|
+
import { Theming } from '@talxis/react-components';
|
|
3
|
+
import { createV9Theme, createBrandVariants } from '@fluentui/react-migration-v8-v9';
|
|
4
|
+
|
|
5
|
+
class ControlTheme {
|
|
6
|
+
static GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage) {
|
|
7
|
+
let primaryColor;
|
|
8
|
+
let backgroundColor;
|
|
9
|
+
let textColor;
|
|
10
|
+
const tokenTheme = fluentDesignLanguage?.tokenTheme;
|
|
11
|
+
if (!tokenTheme) {
|
|
12
|
+
const baseTheme = getTheme();
|
|
13
|
+
primaryColor = baseTheme.palette.themePrimary;
|
|
14
|
+
backgroundColor = baseTheme.semanticColors.bodyBackground;
|
|
15
|
+
textColor = baseTheme.semanticColors.bodyText;
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
primaryColor = tokenTheme.colorCompoundBrandForeground1;
|
|
19
|
+
backgroundColor = tokenTheme.colorNeutralBackground1;
|
|
20
|
+
textColor = tokenTheme.colorNeutralForeground1;
|
|
21
|
+
}
|
|
22
|
+
return Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, fluentDesignLanguage?.v8FluentOverrides);
|
|
23
|
+
}
|
|
24
|
+
static GenerateFluentDesignLanguage(primaryColor, backgroundColor, textColor, options) {
|
|
25
|
+
const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, options?.v8FluentOverrides);
|
|
26
|
+
const v9 = createV9Theme(theme);
|
|
27
|
+
const brand = createBrandVariants(theme.palette);
|
|
28
|
+
return {
|
|
29
|
+
brand: brand,
|
|
30
|
+
applicationTheme: options?.applicationTheme,
|
|
31
|
+
isDarkTheme: Theming.IsDarkColor(theme.semanticColors.bodyBackground),
|
|
32
|
+
v8FluentOverrides: options?.v8FluentOverrides,
|
|
33
|
+
tokenTheme: v9
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export { ControlTheme };
|
|
39
|
+
//# sourceMappingURL=ControlTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ControlTheme.js","sources":["../../../src/utils/theme/ControlTheme.ts"],"sourcesContent":["import { getTheme } from \"@fluentui/react\";\nimport { ITheme, Theming } from \"@talxis/react-components\";\nimport { DeepPartial } from \"@talxis/client-libraries\";\nimport { createBrandVariants, createV9Theme } from \"@fluentui/react-migration-v8-v9\";\n\nexport interface IFluentDesignState extends ComponentFramework.FluentDesignState {\n /**\n * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage\n */\n v8FluentOverrides?: DeepPartial<ITheme>;\n /**\n * The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.\n * This object provides access to the application's theme, enabling you to render elements like callouts and other surfaces accurately.\n */\n applicationTheme?: ITheme;\n}\n\nexport class ControlTheme {\n public static GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage?: IFluentDesignState): ITheme {\n let primaryColor;\n let backgroundColor;\n let textColor;\n const tokenTheme = fluentDesignLanguage?.tokenTheme;\n if (!tokenTheme) {\n const baseTheme = getTheme();\n primaryColor = baseTheme.palette.themePrimary;\n backgroundColor = baseTheme.semanticColors.bodyBackground;\n textColor = baseTheme.semanticColors.bodyText;\n }\n else {\n primaryColor = tokenTheme.colorCompoundBrandForeground1;\n backgroundColor = tokenTheme.colorNeutralBackground1;\n textColor = tokenTheme.colorNeutralForeground1;\n }\n return Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, fluentDesignLanguage?.v8FluentOverrides);\n }\n\n public static GenerateFluentDesignLanguage(primaryColor: string, backgroundColor: string, textColor: string, options?: {\n v8FluentOverrides?: DeepPartial<ITheme>;\n applicationTheme?: ITheme\n }): IFluentDesignState {\n const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, options?.v8FluentOverrides)\n const v9 = createV9Theme(theme);\n const brand = createBrandVariants(theme.palette);\n\n return {\n brand: brand,\n applicationTheme: options?.applicationTheme,\n isDarkTheme: Theming.IsDarkColor(theme.semanticColors.bodyBackground),\n v8FluentOverrides: options?.v8FluentOverrides,\n tokenTheme: v9\n };;\n }\n}"],"names":[],"mappings":";;;;MAiBa,YAAY,CAAA;IACd,OAAO,kCAAkC,CAAC,oBAAyC,EAAA;AACtF,QAAA,IAAI,YAAY,CAAC;AACjB,QAAA,IAAI,eAAe,CAAC;AACpB,QAAA,IAAI,SAAS,CAAC;AACd,QAAA,MAAM,UAAU,GAAG,oBAAoB,EAAE,UAAU,CAAC;QACpD,IAAI,CAAC,UAAU,EAAE;AACb,YAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;AAC7B,YAAA,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;AAC9C,YAAA,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;AAC1D,YAAA,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,SAAA;AACI,aAAA;AACD,YAAA,YAAY,GAAG,UAAU,CAAC,6BAA6B,CAAC;AACxD,YAAA,eAAe,GAAG,UAAU,CAAC,uBAAuB,CAAC;AACrD,YAAA,SAAS,GAAG,UAAU,CAAC,uBAAuB,CAAC;AAClD,SAAA;AACD,QAAA,OAAO,OAAO,CAAC,eAAe,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,oBAAoB,EAAE,iBAAiB,CAAC,CAAC;KACrH;IAEM,OAAO,4BAA4B,CAAC,YAAoB,EAAE,eAAuB,EAAE,SAAiB,EAAE,OAG5G,EAAA;AACG,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAA;AAC3G,QAAA,MAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEjD,OAAO;AACH,YAAA,KAAK,EAAE,KAAK;YACZ,gBAAgB,EAAE,OAAO,EAAE,gBAAgB;YAC3C,WAAW,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;YACrE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB;AAC7C,YAAA,UAAU,EAAE,EAAE;SACjB,CAAC;KACL;AACJ;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { useMemo } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ControlTheme } from '../ControlTheme.js';
|
|
3
3
|
|
|
4
4
|
const useControlTheme = (fluentDesignLanguage) => {
|
|
5
5
|
const primaryColor = fluentDesignLanguage?.tokenTheme.colorCompoundBrandForeground1;
|
|
6
6
|
const backgroundColor = fluentDesignLanguage?.tokenTheme.colorNeutralBackground1;
|
|
7
7
|
const textColor = fluentDesignLanguage?.tokenTheme.colorNeutralForeground1;
|
|
8
|
-
return useMemo(() =>
|
|
8
|
+
return useMemo(() => ControlTheme.GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage), [primaryColor, backgroundColor, textColor]);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { useControlTheme };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useControlTheme.js","sources":["../../../../src/utils/theme/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ITheme } from \"@fluentui/react\";\nimport { ControlTheme, IFluentDesignState } from \"../ControlTheme\";\n\nexport const useControlTheme = (fluentDesignLanguage?: IFluentDesignState): ITheme => {\n const primaryColor = fluentDesignLanguage?.tokenTheme.colorCompoundBrandForeground1;\n const backgroundColor = fluentDesignLanguage?.tokenTheme.colorNeutralBackground1;\n const textColor = fluentDesignLanguage?.tokenTheme.colorNeutralForeground1;\n\n return useMemo(() => ControlTheme.GetV8ThemeFromFluentDesignLanguage(fluentDesignLanguage), [primaryColor, backgroundColor, textColor]);\n};"],"names":[],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,oBAAyC,KAAY;AACjF,IAAA,MAAM,YAAY,GAAG,oBAAoB,EAAE,UAAU,CAAC,6BAA6B,CAAC;AACpF,IAAA,MAAM,eAAe,GAAG,oBAAoB,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACjF,IAAA,MAAM,SAAS,GAAG,oBAAoB,EAAE,UAAU,CAAC,uBAAuB,CAAC;IAE3E,OAAO,OAAO,CAAC,MAAM,YAAY,CAAC,kCAAkC,CAAC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;AAC5I;;;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { IFluentDesignState } from "../ControlTheme";
|
|
2
|
+
import { DeepPartial } from "@talxis/client-libraries";
|
|
3
|
+
import { ITheme } from "@fluentui/react";
|
|
4
|
+
export declare const useControlThemeGenerator: (primaryColor: string, backgroundColor: string, textColor: string, options?: {
|
|
5
|
+
/**
|
|
6
|
+
* Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage
|
|
7
|
+
*/
|
|
8
|
+
v8FluentOverrides?: DeepPartial<ITheme>;
|
|
9
|
+
/**
|
|
10
|
+
* The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.
|
|
11
|
+
* This object allows you to set application theme so PCF's can use it to render surfaces accurately.
|
|
12
|
+
*/
|
|
13
|
+
applicationTheme?: ITheme;
|
|
14
|
+
}) => IFluentDesignState;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { ControlTheme } from '../ControlTheme.js';
|
|
3
|
+
|
|
4
|
+
const useControlThemeGenerator = (primaryColor, backgroundColor, textColor, options) => {
|
|
5
|
+
return useMemo(() => {
|
|
6
|
+
return ControlTheme.GenerateFluentDesignLanguage(primaryColor, backgroundColor, textColor, options);
|
|
7
|
+
}, [primaryColor, backgroundColor, textColor]);
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { useControlThemeGenerator };
|
|
11
|
+
//# sourceMappingURL=useControlThemeGenerator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useControlThemeGenerator.js","sources":["../../../../src/utils/theme/hooks/useControlThemeGenerator.ts"],"sourcesContent":["import { useMemo } from \"react\"\nimport { ControlTheme, IFluentDesignState } from \"../ControlTheme\"\nimport { DeepPartial } from \"@talxis/client-libraries\"\nimport { ITheme } from \"@fluentui/react\"\n\nexport const useControlThemeGenerator = (primaryColor: string, backgroundColor: string, textColor: string, options?: {\n /**\n * Optional overrides that will get applied when v8 theme is generated from fluentDesignLanguage\n */\n v8FluentOverrides?: DeepPartial<ITheme>;\n /**\n * The application's theme may differ from the control's theme. This is often the case when rendering a PCF as a cell customizer with conditional formatting.\n * This object allows you to set application theme so PCF's can use it to render surfaces accurately.\n */\n applicationTheme?: ITheme;\n}): IFluentDesignState => {\n return useMemo(() => {\n return ControlTheme.GenerateFluentDesignLanguage(primaryColor, backgroundColor, textColor, options)\n }, [primaryColor, backgroundColor, textColor])\n}"],"names":[],"mappings":";;;AAKO,MAAM,wBAAwB,GAAG,CAAC,YAAoB,EAAE,eAAuB,EAAE,SAAiB,EAAE,OAU1G,KAAwB;IACrB,OAAO,OAAO,CAAC,MAAK;AAChB,QAAA,OAAO,YAAY,CAAC,4BAA4B,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;KACtG,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAA;AAClD;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './
|
|
2
|
-
export * from './
|
|
1
|
+
export * from './ControlTheme';
|
|
2
|
+
export * from './hooks';
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { ControlTheme } from './ControlTheme.js';
|
|
2
|
+
export { useControlTheme } from './hooks/useControlTheme.js';
|
|
3
|
+
export { useControlThemeGenerator } from './hooks/useControlThemeGenerator.js';
|
|
2
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@talxis/base-controls",
|
|
3
|
-
"version": "1.2501.
|
|
3
|
+
"version": "1.2501.6",
|
|
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",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"@fluentui/react": "<=8.121.5",
|
|
74
74
|
"@fluentui/react-migration-v8-v9": "^9.6.20",
|
|
75
75
|
"@talxis/client-libraries": "1.2412.2",
|
|
76
|
-
"@talxis/react-components": "^1.2501.
|
|
76
|
+
"@talxis/react-components": "^1.2501.8",
|
|
77
77
|
"color": "^4.2.3",
|
|
78
78
|
"dayjs": "^1.11.10",
|
|
79
79
|
"external-svg-loader": "^1.7.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useControlTheme.js","sources":["../../src/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { getControlTheme } from \"../utils/theme/getControlTheme\";\nimport { ITheme } from \"@fluentui/react\";\n\nexport const useControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n const primaryColor = fluentDesignLanguage?.tokenTheme.colorCompoundBrandForeground1;\n const backgroundColor = fluentDesignLanguage?.tokenTheme.colorNeutralBackground1;\n const textColor = fluentDesignLanguage?.tokenTheme.colorNeutralForeground1;\n\n return useMemo(() => getControlTheme(fluentDesignLanguage), [primaryColor, backgroundColor, textColor]);\n};"],"names":[],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,oBAA2D,KAAY;AACnG,IAAA,MAAM,YAAY,GAAG,oBAAoB,EAAE,UAAU,CAAC,6BAA6B,CAAC;AACpF,IAAA,MAAM,eAAe,GAAG,oBAAoB,EAAE,UAAU,CAAC,uBAAuB,CAAC;AACjF,IAAA,MAAM,SAAS,GAAG,oBAAoB,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAE3E,IAAA,OAAO,OAAO,CAAC,MAAM,eAAe,CAAC,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;AAC5G;;;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { getTheme } from '@fluentui/react';
|
|
2
|
-
import { Theming } from '@talxis/react-components/dist/utilities/theming/Theming';
|
|
3
|
-
|
|
4
|
-
const getControlTheme = (fluentDesignLanguage) => {
|
|
5
|
-
let primaryColor;
|
|
6
|
-
let backgroundColor;
|
|
7
|
-
let textColor;
|
|
8
|
-
const tokenTheme = fluentDesignLanguage?.tokenTheme;
|
|
9
|
-
if (!tokenTheme) {
|
|
10
|
-
const baseTheme = getTheme();
|
|
11
|
-
primaryColor = baseTheme.palette.themePrimary;
|
|
12
|
-
backgroundColor = baseTheme.semanticColors.bodyBackground;
|
|
13
|
-
textColor = baseTheme.semanticColors.bodyText;
|
|
14
|
-
}
|
|
15
|
-
else {
|
|
16
|
-
primaryColor = tokenTheme.colorCompoundBrandForeground1;
|
|
17
|
-
backgroundColor = tokenTheme.colorNeutralBackground1;
|
|
18
|
-
textColor = tokenTheme.colorNeutralForeground1;
|
|
19
|
-
}
|
|
20
|
-
const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, tokenTheme?.fluentV8Overrides);
|
|
21
|
-
return theme;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export { getControlTheme };
|
|
25
|
-
//# sourceMappingURL=getControlTheme.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"getControlTheme.js","sources":["../../../src/utils/theme/getControlTheme.ts"],"sourcesContent":["import { getTheme } from '@fluentui/react';\nimport { ITheme } from '@talxis/react-components';\nimport { Theming } from '@talxis/react-components/dist/utilities/theming/Theming'\nimport { IFluentDesignState } from './interfaces';\n\nexport const getControlTheme = (fluentDesignLanguage?: IFluentDesignState): ITheme => {\n let primaryColor;\n let backgroundColor;\n let textColor;\n const tokenTheme = fluentDesignLanguage?.tokenTheme;\n\n if (!tokenTheme) {\n const baseTheme = getTheme();\n primaryColor = baseTheme.palette.themePrimary;\n backgroundColor = baseTheme.semanticColors.bodyBackground;\n textColor = baseTheme.semanticColors.bodyText;\n }\n else {\n primaryColor = tokenTheme.colorCompoundBrandForeground1;\n backgroundColor = tokenTheme.colorNeutralBackground1;\n textColor = tokenTheme.colorNeutralForeground1;\n }\n const theme = Theming.GenerateThemeV8(primaryColor, backgroundColor, textColor, tokenTheme?.fluentV8Overrides);\n return theme;\n}\n"],"names":[],"mappings":";;;AAKa,MAAA,eAAe,GAAG,CAAC,oBAAyC,KAAY;AACjF,IAAA,IAAI,YAAY,CAAC;AACjB,IAAA,IAAI,eAAe,CAAC;AACpB,IAAA,IAAI,SAAS,CAAC;AACd,IAAA,MAAM,UAAU,GAAG,oBAAoB,EAAE,UAAU,CAAC;IAEpD,IAAI,CAAC,UAAU,EAAE;AACb,QAAA,MAAM,SAAS,GAAG,QAAQ,EAAE,CAAC;AAC7B,QAAA,YAAY,GAAG,SAAS,CAAC,OAAO,CAAC,YAAY,CAAC;AAC9C,QAAA,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,cAAc,CAAC;AAC1D,QAAA,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC;AACjD,KAAA;AACI,SAAA;AACD,QAAA,YAAY,GAAG,UAAU,CAAC,6BAA6B,CAAC;AACxD,QAAA,eAAe,GAAG,UAAU,CAAC,uBAAuB,CAAC;AACrD,QAAA,SAAS,GAAG,UAAU,CAAC,uBAAuB,CAAC;AAClD,KAAA;AACD,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,eAAe,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC;AAC/G,IAAA,OAAO,KAAK,CAAC;AACjB;;;;"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
/// <reference types="powerapps-component-framework" />
|
|
2
|
-
import { DeepPartial } from "@talxis/client-libraries";
|
|
3
|
-
import { ITheme } from "@talxis/react-components";
|
|
4
|
-
export interface IFluentDesignState extends ComponentFramework.FluentDesignState {
|
|
5
|
-
tokenTheme: {
|
|
6
|
-
[key: string]: any;
|
|
7
|
-
fluentV8Overrides?: DeepPartial<ITheme>;
|
|
8
|
-
};
|
|
9
|
-
}
|