@talxis/base-controls 1.2505.8 → 1.2506.1
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/GridCellRenderer/RecordCommands/RecordCommands.js +1 -1
- package/dist/components/GridCellRenderer/RecordCommands/RecordCommands.js.map +1 -1
- package/dist/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.d.ts +8 -0
- package/dist/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.js +42 -0
- package/dist/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.js.map +1 -0
- package/dist/components/MultiSelectOptionSet/ColofulOptions/styles.d.ts +17 -0
- package/dist/components/MultiSelectOptionSet/ColofulOptions/styles.js +24 -0
- package/dist/components/MultiSelectOptionSet/ColofulOptions/styles.js.map +1 -0
- package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js +49 -14
- package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js.map +1 -1
- package/dist/components/MultiSelectOptionSet/interfaces.d.ts +2 -1
- package/dist/components/MultiSelectOptionSet/styles.d.ts +31 -0
- package/dist/components/MultiSelectOptionSet/styles.js +42 -0
- package/dist/components/MultiSelectOptionSet/styles.js.map +1 -0
- package/dist/components/OptionSet/OptionSet.js +3 -9
- package/dist/components/OptionSet/OptionSet.js.map +1 -1
- package/dist/components/OptionSet/shared.d.ts +5 -0
- package/dist/components/OptionSet/shared.js +19 -0
- package/dist/components/OptionSet/shared.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -69,7 +69,7 @@ const RecordCommands = (props) => {
|
|
|
69
69
|
}
|
|
70
70
|
})();
|
|
71
71
|
},
|
|
72
|
-
onRenderIcon: iconName
|
|
72
|
+
onRenderIcon: iconName?.includes('svg') ? () => jsx(Icon, { name: iconName }) : undefined,
|
|
73
73
|
});
|
|
74
74
|
});
|
|
75
75
|
return result;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RecordCommands.js","sources":["../../../../src/components/GridCellRenderer/RecordCommands/RecordCommands.tsx"],"sourcesContent":["import { CommandBar, ICommandBarItemProps, ITheme, useRerender, useResizeObserver, useThemeGenerator, withButtonLoading } from \"@talxis/react-components\";\nimport { useComponentProps } from \"../useComponentProps\";\nimport { IRecordCommandsProps } from \"../interfaces\";\nimport { Icon } from \"./Icon\";\nimport { ICommandBar, PartialTheme, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { getRecordCommandsStyles } from \"./styles\";\nimport { IColumn, ICommand } from \"@talxis/client-libraries\";\n\ninterface IRecordCommands {\n commands: ICommand[];\n theme: ITheme;\n applicationTheme: ITheme;\n alignment: Required<IColumn['alignment']>;\n themeOverride?: PartialTheme;\n}\n\nconst fluentIconMap: { [key: string]: string } = {\n 'Activate': 'ActivateOrders',\n 'DeActivate': 'DeactivateOrders',\n 'ExportToExcel': 'ExcelDocument',\n 'ConnectionToOther': 'Assign',\n 'EmailLink': 'Link',\n 'Flows': 'Dataflows',\n 'RunReport': 'CRMReport',\n 'Report': 'CRMReport',\n 'Remove': 'Delete',\n 'WordTemplates': 'WordDocument',\n 'DocumentTemplates': 'ExcelDocument',\n 'New': 'Add',\n}\n\nexport const RecordCommands = (props: IRecordCommands) => {\n const commands = props.commands;\n const commandBarRef = useRef<ICommandBar>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const styles = useMemo(() => getRecordCommandsStyles(props.alignment), [props.alignment])\n const theme = useThemeGenerator(props.theme.semanticColors.bodyText, props.theme.semanticColors.bodyBackground, props.theme.semanticColors.bodyText, props.themeOverride);\n const contextualMenuTheme = useThemeGenerator(props.applicationTheme.semanticColors.bodyText, props.applicationTheme.semanticColors.bodyBackground, props.applicationTheme.semanticColors.bodyText, props.themeOverride);\n const pendingActionsSet = useRef<Set<string>>(new Set());\n const rerender = useRerender();\n\n const observe = useResizeObserver(() => {\n commandBarRef.current?.remeasure();\n });\n\n const getCommandBarItems = (commands: ICommand[]): ICommandBarItemProps[] => {\n const result: ICommandBarItemProps[] = [];\n commands.map(command => {\n //@ts-ignore - portal internal types\n if (!command.shouldBeVisible || (command.__isInline !== undefined && command.__isInline === false)) {\n return;\n }\n let iconName = command.icon;\n if (fluentIconMap[iconName]) {\n iconName = fluentIconMap[iconName];\n }\n result.push({\n key: command.commandId,\n text: command.label,\n disabled: !command.canExecute || pendingActionsSet.current.has(command.commandId),\n [\"data-id\"]: command?.commandButtonId,\n [\"data-command\"]: command?.commandId,\n title: command?.tooltip,\n iconProps: {\n iconName: iconName\n },\n onClick: () => {\n (async () => {\n pendingActionsSet.current.add(command.commandId);\n rerender();\n try {\n await command.execute();\n }\n catch (err) {\n console.error(err);\n }\n finally {\n pendingActionsSet.current.delete(command.commandId);\n rerender();\n }\n })();\n },\n onRenderIcon: iconName
|
|
1
|
+
{"version":3,"file":"RecordCommands.js","sources":["../../../../src/components/GridCellRenderer/RecordCommands/RecordCommands.tsx"],"sourcesContent":["import { CommandBar, ICommandBarItemProps, ITheme, useRerender, useResizeObserver, useThemeGenerator, withButtonLoading } from \"@talxis/react-components\";\nimport { useComponentProps } from \"../useComponentProps\";\nimport { IRecordCommandsProps } from \"../interfaces\";\nimport { Icon } from \"./Icon\";\nimport { ICommandBar, PartialTheme, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useMemo, useRef } from \"react\";\nimport { getRecordCommandsStyles } from \"./styles\";\nimport { IColumn, ICommand } from \"@talxis/client-libraries\";\n\ninterface IRecordCommands {\n commands: ICommand[];\n theme: ITheme;\n applicationTheme: ITheme;\n alignment: Required<IColumn['alignment']>;\n themeOverride?: PartialTheme;\n}\n\nconst fluentIconMap: { [key: string]: string } = {\n 'Activate': 'ActivateOrders',\n 'DeActivate': 'DeactivateOrders',\n 'ExportToExcel': 'ExcelDocument',\n 'ConnectionToOther': 'Assign',\n 'EmailLink': 'Link',\n 'Flows': 'Dataflows',\n 'RunReport': 'CRMReport',\n 'Report': 'CRMReport',\n 'Remove': 'Delete',\n 'WordTemplates': 'WordDocument',\n 'DocumentTemplates': 'ExcelDocument',\n 'New': 'Add',\n}\n\nexport const RecordCommands = (props: IRecordCommands) => {\n const commands = props.commands;\n const commandBarRef = useRef<ICommandBar>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const styles = useMemo(() => getRecordCommandsStyles(props.alignment), [props.alignment])\n const theme = useThemeGenerator(props.theme.semanticColors.bodyText, props.theme.semanticColors.bodyBackground, props.theme.semanticColors.bodyText, props.themeOverride);\n const contextualMenuTheme = useThemeGenerator(props.applicationTheme.semanticColors.bodyText, props.applicationTheme.semanticColors.bodyBackground, props.applicationTheme.semanticColors.bodyText, props.themeOverride);\n const pendingActionsSet = useRef<Set<string>>(new Set());\n const rerender = useRerender();\n\n const observe = useResizeObserver(() => {\n commandBarRef.current?.remeasure();\n });\n\n const getCommandBarItems = (commands: ICommand[]): ICommandBarItemProps[] => {\n const result: ICommandBarItemProps[] = [];\n commands.map(command => {\n //@ts-ignore - portal internal types\n if (!command.shouldBeVisible || (command.__isInline !== undefined && command.__isInline === false)) {\n return;\n }\n let iconName = command.icon;\n if (fluentIconMap[iconName]) {\n iconName = fluentIconMap[iconName];\n }\n result.push({\n key: command.commandId,\n text: command.label,\n disabled: !command.canExecute || pendingActionsSet.current.has(command.commandId),\n [\"data-id\"]: command?.commandButtonId,\n [\"data-command\"]: command?.commandId,\n title: command?.tooltip,\n iconProps: {\n iconName: iconName\n },\n onClick: () => {\n (async () => {\n pendingActionsSet.current.add(command.commandId);\n rerender();\n try {\n await command.execute();\n }\n catch (err) {\n console.error(err);\n }\n finally {\n pendingActionsSet.current.delete(command.commandId);\n rerender();\n }\n })();\n },\n onRenderIcon: iconName?.includes('svg') ? () => <Icon name={iconName} /> : undefined,\n })\n })\n return result;\n }\n\n const getComponentProps = (): IRecordCommandsProps => {\n return {\n containerProps: {\n theme: theme,\n ref: containerRef,\n className: styles.recordCommandsContainer\n },\n commandBarProps: {\n componentRef: commandBarRef,\n className: styles.recordCommandsRoot,\n contextualMenuTheme: contextualMenuTheme,\n styles: {\n primarySet: styles.recordCommandsPrimarySet\n },\n items: getCommandBarItems(commands)\n }\n }\n }\n\n const componentProps = useComponentProps().onGetRecordCommandsProps(getComponentProps());\n\n useEffect(() => {\n observe(containerRef.current!);\n }, []);\n\n return <ThemeProvider {...componentProps.containerProps}><CommandBar {...componentProps.commandBarProps} /></ThemeProvider>\n}"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IContext, IMultiSelectOptionSetProperty } from "../../../interfaces";
|
|
3
|
+
interface IColorfulOptionsProps {
|
|
4
|
+
value: IMultiSelectOptionSetProperty;
|
|
5
|
+
context: IContext;
|
|
6
|
+
}
|
|
7
|
+
export declare const ColorfulOptions: (props: IColorfulOptionsProps) => JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { getColorfulOptionsStyles } from './styles.js';
|
|
4
|
+
import { ThemeProvider, Text, merge } from '@fluentui/react';
|
|
5
|
+
import { Theming, useThemeGenerator } from '@talxis/react-components';
|
|
6
|
+
import { useControlTheme } from '../../../utils/theme/hooks/useControlTheme.js';
|
|
7
|
+
|
|
8
|
+
const ColorfulOptions = (props) => {
|
|
9
|
+
const styles = useMemo(() => getColorfulOptionsStyles(), []);
|
|
10
|
+
const { value } = props;
|
|
11
|
+
const theme = useControlTheme(props.context.fluentDesignLanguage);
|
|
12
|
+
const options = value.attributes.Options;
|
|
13
|
+
const getOptionProperties = (option) => {
|
|
14
|
+
const backgroundColor = (option && option.Color) ?? theme.palette.neutralLight;
|
|
15
|
+
const textColor = Theming.GetTextColorForBackground(backgroundColor);
|
|
16
|
+
const optionTheme = useThemeGenerator(textColor, backgroundColor, textColor, merge({}, {
|
|
17
|
+
fonts: {
|
|
18
|
+
medium: {
|
|
19
|
+
fontWeight: 600
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}, props.context.fluentDesignLanguage?.v8FluentOverrides));
|
|
23
|
+
return {
|
|
24
|
+
containerProps: {
|
|
25
|
+
className: styles.option,
|
|
26
|
+
theme: optionTheme,
|
|
27
|
+
},
|
|
28
|
+
option: option,
|
|
29
|
+
textProps: {
|
|
30
|
+
children: option?.Label,
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
return (jsx("div", { className: styles.root, children: value.raw?.map((value, index) => {
|
|
35
|
+
const option = options.find(option => option.Value == value);
|
|
36
|
+
const optionProps = getOptionProperties(option);
|
|
37
|
+
return (jsx(ThemeProvider, { ...optionProps.containerProps, children: jsx(Text, { ...optionProps.textProps, title: optionProps.textProps.children, children: optionProps.textProps.children }) }, index));
|
|
38
|
+
}) }));
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { ColorfulOptions };
|
|
42
|
+
//# sourceMappingURL=ColorfulOptions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorfulOptions.js","sources":["../../../../src/components/MultiSelectOptionSet/ColofulOptions/ColorfulOptions.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { getColorfulOptionsStyles } from \"./styles\";\nimport { IContext, IMultiSelectOptionSetProperty } from \"../../../interfaces\";\nimport { ThemeProvider, Text, merge, PartialTheme } from \"@fluentui/react\";\nimport { Theming, useThemeGenerator } from \"@talxis/react-components\";\nimport { useControlTheme } from \"../../../utils\";\n\ninterface IColorfulOptionsProps {\n value: IMultiSelectOptionSetProperty;\n context: IContext;\n}\n\nexport const ColorfulOptions = (props: IColorfulOptionsProps) => {\n const styles = useMemo(() => getColorfulOptionsStyles(), []);\n const { value } = props;\n const theme = useControlTheme(props.context.fluentDesignLanguage);\n const options = value.attributes.Options;\n\n const getOptionProperties = (option: ComponentFramework.PropertyHelper.OptionMetadata | undefined): { containerProps: { className: string; theme: PartialTheme }; option: ComponentFramework.PropertyHelper.OptionMetadata | undefined; textProps: { children: string | undefined }; } => {\n const backgroundColor = (option && option.Color) ?? theme.palette.neutralLight;\n const textColor = Theming.GetTextColorForBackground(backgroundColor);\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 return {\n containerProps: {\n className: styles.option,\n theme: optionTheme,\n },\n option: option,\n textProps: {\n children: option?.Label,\n },\n };\n };\n\n\n return (\n <div className={styles.root}>\n {value.raw?.map((value, index) => {\n const option = options.find(option => option.Value == value);\n const optionProps = getOptionProperties(option);\n return (\n <ThemeProvider key={index} {...optionProps.containerProps}>\n <Text {...optionProps.textProps} title={optionProps.textProps.children}>{optionProps.textProps.children}</Text>\n </ThemeProvider>\n );\n })}\n </div>\n );\n}\n"],"names":["_jsx"],"mappings":";;;;;;;AAYa,MAAA,eAAe,GAAG,CAAC,KAA4B,KAAI;AAC5D,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,wBAAwB,EAAE,EAAE,EAAE,CAAC,CAAC;AAC7D,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAClE,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;AAEzC,IAAA,MAAM,mBAAmB,GAAG,CAAC,MAAoE,KAAwL;AACrR,QAAA,MAAM,eAAe,GAAG,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC;QAC/E,MAAM,SAAS,GAAG,OAAO,CAAC,yBAAyB,CAAC,eAAe,CAAC,CAAC;AACrE,QAAA,MAAM,WAAW,GAAG,iBAAiB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;AACnF,YAAA,KAAK,EAAE;AACH,gBAAA,MAAM,EAAE;AACJ,oBAAA,UAAU,EAAE,GAAG;AAClB,iBAAA;AACJ,aAAA;SACY,EAAE,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,iBAAiC,CAAC,CAAC,CAAC;QAC3F,OAAO;AACH,YAAA,cAAc,EAAE;gBACZ,SAAS,EAAE,MAAM,CAAC,MAAM;AACxB,gBAAA,KAAK,EAAE,WAAW;AACrB,aAAA;AACD,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE;gBACP,QAAQ,EAAE,MAAM,EAAE,KAAK;AAC1B,aAAA;SACJ,CAAC;AACN,KAAC,CAAC;AAGF,IAAA,QACIA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,QAAA,EAAA,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAC7B,YAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;AAC7D,YAAA,MAAM,WAAW,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;AAChD,YAAA,QACIA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAiB,WAAW,CAAC,cAAc,EACrD,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,WAAW,CAAC,SAAS,EAAE,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,QAAQ,YAAG,WAAW,CAAC,SAAS,CAAC,QAAQ,EAAQ,CAAA,EAAA,EAD/F,KAAK,CAET,EAClB;SACL,CAAC,EACA,CAAA,EACR;AACN;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const getColorfulOptionsStyles: () => import("@fluentui/react").IProcessedStyleSet<{
|
|
2
|
+
root: {
|
|
3
|
+
gap: string;
|
|
4
|
+
display: string;
|
|
5
|
+
overflow: string;
|
|
6
|
+
textAlign: string;
|
|
7
|
+
};
|
|
8
|
+
option: {
|
|
9
|
+
borderRadius: number;
|
|
10
|
+
padding: number;
|
|
11
|
+
paddingLeft: number;
|
|
12
|
+
paddingRight: number;
|
|
13
|
+
overflow: string;
|
|
14
|
+
textOverflow: string;
|
|
15
|
+
flexGrow: number;
|
|
16
|
+
};
|
|
17
|
+
}>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { mergeStyleSets } from '@fluentui/react';
|
|
2
|
+
|
|
3
|
+
const getColorfulOptionsStyles = () => {
|
|
4
|
+
return mergeStyleSets({
|
|
5
|
+
root: {
|
|
6
|
+
gap: '5px',
|
|
7
|
+
display: 'flex',
|
|
8
|
+
overflow: 'hidden',
|
|
9
|
+
textAlign: 'center'
|
|
10
|
+
},
|
|
11
|
+
option: {
|
|
12
|
+
borderRadius: 5,
|
|
13
|
+
padding: 2,
|
|
14
|
+
paddingLeft: 4,
|
|
15
|
+
paddingRight: 4,
|
|
16
|
+
overflow: 'hidden',
|
|
17
|
+
textOverflow: 'ellipsis',
|
|
18
|
+
flexGrow: 1,
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export { getColorfulOptionsStyles };
|
|
24
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../src/components/MultiSelectOptionSet/ColofulOptions/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getColorfulOptionsStyles = () => {\n return mergeStyleSets({\n root: {\n gap: '5px',\n display: 'flex',\n overflow: 'hidden',\n textAlign: 'center'\n },\n option: {\n borderRadius: 5,\n padding: 2,\n paddingLeft: 4,\n paddingRight: 4,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n flexGrow: 1,\n }\n })\n}"],"names":[],"mappings":";;AAEO,MAAM,wBAAwB,GAAG,MAAK;AACzC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,GAAG,EAAE,KAAK;AACV,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,SAAS,EAAE,QAAQ;AACtB,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,WAAW,EAAE,CAAC;AACd,YAAA,YAAY,EAAE,CAAC;AACf,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AACxB,YAAA,QAAQ,EAAE,CAAC;AACd,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}
|
|
@@ -1,22 +1,28 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { ComboBox } from '@talxis/react-components';
|
|
3
3
|
import { ThemeProvider } from '@fluentui/react';
|
|
4
|
-
import { useRef, useEffect } from 'react';
|
|
4
|
+
import React__default, { useRef, useMemo, useEffect } from 'react';
|
|
5
|
+
import ReactDOM from 'react-dom';
|
|
6
|
+
import { ColorfulOptions } from './ColofulOptions/ColorfulOptions.js';
|
|
7
|
+
import { getIsColorFeatureEnabled, onRenderColorfulOption } from '../OptionSet/shared.js';
|
|
8
|
+
import { getComboBoxStyles } from './styles.js';
|
|
5
9
|
import { useControl } from '../../hooks/useControl.js';
|
|
6
10
|
|
|
7
11
|
const MultiSelectOptionSet = (props) => {
|
|
8
12
|
const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);
|
|
13
|
+
const ref = useRef(null);
|
|
9
14
|
const parameters = props.parameters;
|
|
10
15
|
const boundValue = parameters.value;
|
|
11
16
|
const componentRef = useRef(null);
|
|
12
17
|
const { Options } = parameters.value.attributes;
|
|
13
18
|
const context = props.context;
|
|
14
19
|
const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;
|
|
15
|
-
const
|
|
20
|
+
const isColorFeatureEnabled = useMemo(() => getIsColorFeatureEnabled(props.parameters.EnableOptionSetColors?.raw, Options), [props.parameters.EnableOptionSetColors?.raw, Options]);
|
|
16
21
|
const comboBoxOptions = Options.map(option => ({
|
|
17
22
|
key: option.Value.toString(),
|
|
18
23
|
text: option.Label,
|
|
19
24
|
}));
|
|
25
|
+
const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);
|
|
20
26
|
const handleChange = (option) => {
|
|
21
27
|
if (!option) {
|
|
22
28
|
onNotifyOutputChanged({
|
|
@@ -37,21 +43,60 @@ const MultiSelectOptionSet = (props) => {
|
|
|
37
43
|
value: updatedSelectedKeysArray.map(key => +key)
|
|
38
44
|
});
|
|
39
45
|
};
|
|
46
|
+
const isEmptyValue = () => {
|
|
47
|
+
if (!boundValue.raw) {
|
|
48
|
+
return true;
|
|
49
|
+
}
|
|
50
|
+
if (boundValue.raw.length === 0) {
|
|
51
|
+
return true;
|
|
52
|
+
}
|
|
53
|
+
return false;
|
|
54
|
+
};
|
|
55
|
+
const renderColorfulOptions = () => {
|
|
56
|
+
const className = 'talxis__multiSelectOptionSet__colorfulOptions';
|
|
57
|
+
const parent = ref.current?.querySelector('.ms-ComboBox');
|
|
58
|
+
const container = document.createElement('div');
|
|
59
|
+
container.setAttribute('class', `${className} ${styles.colorfulOptionsWrapper}`);
|
|
60
|
+
container.onclick = () => componentRef.current?.focus(true);
|
|
61
|
+
ReactDOM.render(React__default.createElement(ColorfulOptions, {
|
|
62
|
+
value: boundValue,
|
|
63
|
+
context: props.context
|
|
64
|
+
}), container);
|
|
65
|
+
const existingContainer = parent.querySelector(`:scope>.${className}`);
|
|
66
|
+
if (existingContainer && isEmptyValue()) {
|
|
67
|
+
//clear the container if no values are selected
|
|
68
|
+
parent.removeChild(existingContainer);
|
|
69
|
+
}
|
|
70
|
+
if (!existingContainer) {
|
|
71
|
+
parent.prepend(container);
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
existingContainer.replaceWith(container);
|
|
75
|
+
}
|
|
76
|
+
};
|
|
40
77
|
useEffect(() => {
|
|
41
78
|
if (parameters.AutoFocus?.raw) {
|
|
42
79
|
componentRef.current?.focus(true);
|
|
43
80
|
}
|
|
44
81
|
}, []);
|
|
82
|
+
useEffect(() => {
|
|
83
|
+
if (isColorFeatureEnabled) {
|
|
84
|
+
renderColorfulOptions();
|
|
85
|
+
}
|
|
86
|
+
}, [boundValue.raw]);
|
|
87
|
+
const styles = getComboBoxStyles(isColorFeatureEnabled, isEmptyValue(), sizing.width, sizing.height);
|
|
45
88
|
const componentProps = onOverrideComponentProps({
|
|
46
89
|
componentRef: componentRef,
|
|
90
|
+
ref: ref,
|
|
47
91
|
options: comboBoxOptions,
|
|
48
92
|
allowFreeInput: true,
|
|
49
93
|
multiSelect: true,
|
|
50
94
|
autoComplete: "on",
|
|
51
95
|
autofill: parameters.AutoFocus?.raw === true ? {
|
|
52
|
-
autoFocus: true
|
|
96
|
+
autoFocus: true,
|
|
53
97
|
} : undefined,
|
|
54
98
|
onRenderContainer: (containerProps, defaultRender) => jsx(ThemeProvider, { theme: props.context.fluentDesignLanguage?.applicationTheme, children: defaultRender?.(containerProps) }),
|
|
99
|
+
onRenderOption: isColorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,
|
|
55
100
|
calloutProps: applicationTheme ? {
|
|
56
101
|
theme: applicationTheme
|
|
57
102
|
} : undefined,
|
|
@@ -60,17 +105,7 @@ const MultiSelectOptionSet = (props) => {
|
|
|
60
105
|
selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : null,
|
|
61
106
|
useComboBoxAsMenuWidth: true,
|
|
62
107
|
hideErrorMessage: !parameters.ShowErrorMessage?.raw,
|
|
63
|
-
styles: {
|
|
64
|
-
root: {
|
|
65
|
-
height: sizing.height,
|
|
66
|
-
width: sizing.width,
|
|
67
|
-
display: 'flex',
|
|
68
|
-
alignItems: 'center',
|
|
69
|
-
},
|
|
70
|
-
callout: {
|
|
71
|
-
maxHeight: '300px !important'
|
|
72
|
-
}
|
|
73
|
-
},
|
|
108
|
+
styles: { root: styles.root, callout: styles.callout },
|
|
74
109
|
clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
|
|
75
110
|
key: 'copy',
|
|
76
111
|
showOnlyOnHover: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectOptionSet.js","sources":["../../../src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx"],"sourcesContent":["\nimport { IMultiSelectOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport React, { useEffect, useRef } from 'react';\n\nexport const MultiSelectOptionSet = (props: IMultiSelectOptionSet) => {\n const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const componentRef = useRef<IComboBox>(null);\n const { Options } = parameters.value.attributes;\n const context = props.context;\n const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n key: option.Value.toString(),\n text: option.Label,\n }));\n\n const handleChange = (option?: IComboBoxOption | null): void => {\n if (!option) {\n onNotifyOutputChanged({\n value: undefined\n });\n return;\n }\n const optionKey = option.key.toString();\n const updatedSelectedKeys = new Set(boundValue.raw || []);\n if (option.selected) {\n updatedSelectedKeys.add(+optionKey);\n } else {\n updatedSelectedKeys.delete(+optionKey);\n }\n const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);\n\n onNotifyOutputChanged({\n value: updatedSelectedKeysArray.map(key => +key)\n });\n };\n\n useEffect(() => {\n if (parameters.AutoFocus?.raw) {\n componentRef.current?.focus(true);\n }\n }, []);\n\n const componentProps = onOverrideComponentProps({\n componentRef: componentRef,\n options: comboBoxOptions,\n allowFreeInput: true,\n multiSelect: true,\n autoComplete: \"on\",\n autofill: parameters.AutoFocus?.raw === true ? {\n autoFocus: true\n } : undefined,\n onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={props.context.fluentDesignLanguage?.applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\n calloutProps: applicationTheme ? {\n theme: applicationTheme\n } : undefined,\n readOnly: context.mode.isControlDisabled,\n errorMessage: boundValue.errorMessage,\n selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : null,\n useComboBoxAsMenuWidth: true,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n styles: {\n root: {\n height: sizing.height,\n width: sizing.width,\n display: 'flex',\n alignItems: 'center',\n },\n callout: {\n maxHeight: '300px !important'\n }\n },\n clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy'\n }\n } : undefined,\n deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: (e, value) => {\n handleChange(null);\n }\n } : undefined,\n onChange: (e, option) => handleChange(option),\n });\n\n return (\n <ThemeProvider theme={theme} applyTo=\"none\">\n <ComboBox {...componentProps}/>\n </ThemeProvider>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAOa,MAAA,oBAAoB,GAAG,CAAC,KAA4B,KAAI;AACjE,IAAA,MAAM,EAAE,MAAM,EAAE,qBAAqB,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;AAC3F,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;AACpC,IAAA,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC;AACpC,IAAA,MAAM,YAAY,GAAG,MAAM,CAAY,IAAI,CAAC,CAAC;IAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAChD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,gBAAgB,CAAC;AAC9E,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAEtF,MAAM,eAAe,GAAsB,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;AAC9D,QAAA,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE;QAC5B,IAAI,EAAE,MAAM,CAAC,KAAK;AACrB,KAAA,CAAC,CAAC,CAAC;AAEJ,IAAA,MAAM,YAAY,GAAG,CAAC,MAA+B,KAAU;QAC3D,IAAI,CAAC,MAAM,EAAE;AACT,YAAA,qBAAqB,CAAC;AAClB,gBAAA,KAAK,EAAE,SAAS;AACnB,aAAA,CAAC,CAAC;YACH,OAAO;AACV,SAAA;QACD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QACxC,MAAM,mBAAmB,GAAG,IAAI,GAAG,CAAC,UAAU,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC;QAC1D,IAAI,MAAM,CAAC,QAAQ,EAAE;AACjB,YAAA,mBAAmB,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC;AACvC,SAAA;AAAM,aAAA;AACH,YAAA,mBAAmB,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;AAC1C,SAAA;QACD,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;AAEjE,QAAA,qBAAqB,CAAC;YAClB,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;AACnD,SAAA,CAAC,CAAC;AACP,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,UAAU,CAAC,SAAS,EAAE,GAAG,EAAE;AAC3B,YAAA,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;AACrC,SAAA;KACJ,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAC5C,QAAA,YAAY,EAAE,YAAY;AAC1B,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,cAAc,EAAE,IAAI;AACpB,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,UAAU,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,GAAG;AAC3C,YAAA,SAAS,EAAE,IAAI;SAClB,GAAG,SAAS;QACb,iBAAiB,EAAE,CAAC,cAAc,EAAE,aAAa,KAAKA,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,oBAAoB,EAAE,gBAAgB,EAAG,QAAA,EAAA,aAAa,GAAG,cAAc,CAAC,EAAiB,CAAA;AACnL,QAAA,YAAY,EAAE,gBAAgB,GAAG;AAC7B,YAAA,KAAK,EAAE,gBAAgB;SAC1B,GAAG,SAAS;AACb,QAAA,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,iBAAiB;QACxC,YAAY,EAAE,UAAU,CAAC,YAAY;QACrC,WAAW,EAAE,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI;AAC9E,QAAA,sBAAsB,EAAE,IAAI;AAC5B,QAAA,gBAAgB,EAAE,CAAC,UAAU,CAAC,gBAAgB,EAAE,GAAG;AACnD,QAAA,MAAM,EAAE;AACJ,YAAA,IAAI,EAAE;gBACF,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA;AACD,YAAA,OAAO,EAAE;AACL,gBAAA,SAAS,EAAE,kBAAkB;AAChC,aAAA;AACJ,SAAA;QACD,gBAAgB,EAAE,UAAU,CAAC,gBAAgB,EAAE,GAAG,KAAK,IAAI,GAAG;AAC1D,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,MAAM;AACnB,aAAA;SACJ,GAAG,SAAS;QACb,iBAAiB,EAAE,UAAU,CAAC,kBAAkB,EAAE,GAAG,KAAK,IAAI,GAAG;AAC7D,YAAA,GAAG,EAAE,QAAQ;AACb,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,SAAS,EAAE;AACP,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;AACD,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAI;gBAClB,YAAY,CAAC,IAAI,CAAC,CAAC;aACtB;SACJ,GAAG,SAAS;QACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,YAAY,CAAC,MAAM,CAAC;AAChD,KAAA,CAAC,CAAC;AAEH,IAAA,QACIA,GAAC,CAAA,aAAa,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,MAAM,EAAA,QAAA,EACvCA,IAAC,QAAQ,EAAA,EAAA,GAAK,cAAc,EAAG,CAAA,EAAA,CACnB,EAClB;AACN;;;;"}
|
|
1
|
+
{"version":3,"file":"MultiSelectOptionSet.js","sources":["../../../src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx"],"sourcesContent":["\nimport { IMultiSelectOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport React from 'react';\nimport { ColorfulOptions } from './ColofulOptions/ColorfulOptions';\nimport { getIsColorFeatureEnabled, onRenderColorfulOption } from '../OptionSet/shared';\nimport { getComboBoxStyles } from './styles';\n\nexport const MultiSelectOptionSet = (props: IMultiSelectOptionSet) => {\n const { sizing, onNotifyOutputChanged, theme } = useControl('MultiSelectOptionSet', props);\n const ref = useRef<HTMLDivElement>(null);\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const componentRef = useRef<IComboBox>(null);\n const { Options } = parameters.value.attributes;\n const context = props.context;\n const applicationTheme = props.context.fluentDesignLanguage?.applicationTheme;\n const isColorFeatureEnabled = useMemo(() => getIsColorFeatureEnabled(props.parameters.EnableOptionSetColors?.raw, Options), [props.parameters.EnableOptionSetColors?.raw, Options]);\n const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n key: option.Value.toString(),\n text: option.Label,\n }));\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n const handleChange = (option?: IComboBoxOption | null): void => {\n if (!option) {\n onNotifyOutputChanged({\n value: undefined\n });\n return;\n }\n const optionKey = option.key.toString();\n const updatedSelectedKeys = new Set(boundValue.raw || []);\n if (option.selected) {\n updatedSelectedKeys.add(+optionKey);\n } else {\n updatedSelectedKeys.delete(+optionKey);\n }\n const updatedSelectedKeysArray = Array.from(updatedSelectedKeys);\n\n onNotifyOutputChanged({\n value: updatedSelectedKeysArray.map(key => +key)\n });\n };\n\n const isEmptyValue = () => {\n if (!boundValue.raw) {\n return true;\n }\n if (boundValue.raw.length === 0) {\n return true;\n }\n return false;\n }\n\n const renderColorfulOptions = () => {\n const className = 'talxis__multiSelectOptionSet__colorfulOptions';\n const parent: HTMLDivElement = ref.current?.querySelector('.ms-ComboBox')!;\n const container = document.createElement('div');\n container.setAttribute('class', `${className} ${styles.colorfulOptionsWrapper}`);\n container.onclick = () => componentRef.current?.focus(true);\n\n ReactDOM.render(React.createElement(ColorfulOptions, {\n value: boundValue,\n context: props.context\n }), container);\n\n const existingContainer = parent.querySelector(`:scope>.${className}`);\n if (existingContainer && isEmptyValue()) {\n //clear the container if no values are selected\n parent.removeChild(existingContainer);\n }\n if (!existingContainer) {\n parent.prepend(container);\n }\n else {\n existingContainer.replaceWith(container);\n }\n }\n\n\n useEffect(() => {\n if (parameters.AutoFocus?.raw) {\n componentRef.current?.focus(true);\n }\n }, []);\n\n useEffect(() => {\n if (isColorFeatureEnabled) {\n renderColorfulOptions();\n }\n }, [boundValue.raw]);\n\n const styles = getComboBoxStyles(isColorFeatureEnabled, isEmptyValue(), sizing.width, sizing.height)\n\n const componentProps = onOverrideComponentProps({\n componentRef: componentRef,\n ref: ref,\n options: comboBoxOptions,\n allowFreeInput: true,\n multiSelect: true,\n autoComplete: \"on\",\n autofill: parameters.AutoFocus?.raw === true ? {\n autoFocus: true,\n } : undefined,\n onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={props.context.fluentDesignLanguage?.applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\n onRenderOption: isColorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,\n calloutProps: applicationTheme ? {\n theme: applicationTheme\n } : undefined,\n readOnly: context.mode.isControlDisabled,\n errorMessage: boundValue.errorMessage,\n selectedKey: boundValue.raw ? boundValue.raw.map(key => key.toString()) : null,\n useComboBoxAsMenuWidth: true,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n styles: { root: styles.root, callout: styles.callout },\n clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy'\n }\n } : undefined,\n deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: (e, value) => {\n handleChange(null);\n }\n } : undefined,\n onChange: (e, option) => handleChange(option),\n });\n\n return (\n <ThemeProvider theme={theme} applyTo=\"none\">\n <ComboBox {...componentProps} />\n </ThemeProvider>\n );\n};\n"],"names":["React","_jsx"],"mappings":"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"}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { IComboBoxProps } from "@talxis/react-components";
|
|
2
|
-
import { IMultiSelectOptionSetProperty } from "../../interfaces";
|
|
2
|
+
import { IMultiSelectOptionSetProperty, ITwoOptionsProperty } from "../../interfaces";
|
|
3
3
|
import { IControl, IOutputs } from "../../interfaces/context";
|
|
4
4
|
import { IInputParameters } from "../../interfaces/parameters";
|
|
5
5
|
export interface IMultiSelectOptionSet extends IControl<IMultiSelectOptionSetParameters, IMultiSelectOptionSetOutputs, any, IComboBoxProps> {
|
|
6
6
|
}
|
|
7
7
|
export interface IMultiSelectOptionSetParameters extends IInputParameters {
|
|
8
8
|
value: IMultiSelectOptionSetProperty;
|
|
9
|
+
EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
|
|
9
10
|
}
|
|
10
11
|
export interface IMultiSelectOptionSetOutputs extends IOutputs {
|
|
11
12
|
value?: number[];
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export declare const getComboBoxStyles: (isColorFeatureEnabled: boolean, isEmptyValue: boolean, width?: number, height?: number) => import("@fluentui/react").IProcessedStyleSet<{
|
|
2
|
+
root: {
|
|
3
|
+
'.ms-ComboBox-Input': {
|
|
4
|
+
opacity: number;
|
|
5
|
+
width: number | undefined;
|
|
6
|
+
};
|
|
7
|
+
paddingLeft?: string | undefined;
|
|
8
|
+
height: number | undefined;
|
|
9
|
+
width: number | undefined;
|
|
10
|
+
display: string;
|
|
11
|
+
alignItems: string;
|
|
12
|
+
};
|
|
13
|
+
callout: {
|
|
14
|
+
'.ms-Checkbox-label'?: {
|
|
15
|
+
display: string;
|
|
16
|
+
flexDirection: string;
|
|
17
|
+
gap: string;
|
|
18
|
+
alignItems: string;
|
|
19
|
+
} | undefined;
|
|
20
|
+
maxHeight: string;
|
|
21
|
+
};
|
|
22
|
+
colorfulOptionsWrapper: {
|
|
23
|
+
flexGrow: number;
|
|
24
|
+
display: string;
|
|
25
|
+
alignItems: string;
|
|
26
|
+
height: string;
|
|
27
|
+
textAlign: string;
|
|
28
|
+
overflow: string;
|
|
29
|
+
textOverflow: string;
|
|
30
|
+
};
|
|
31
|
+
}>;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { mergeStyleSets } from '@fluentui/react';
|
|
2
|
+
|
|
3
|
+
const getComboBoxStyles = (isColorFeatureEnabled, isEmptyValue, width, height) => {
|
|
4
|
+
return mergeStyleSets({
|
|
5
|
+
root: {
|
|
6
|
+
height: height,
|
|
7
|
+
width: width,
|
|
8
|
+
display: 'flex',
|
|
9
|
+
alignItems: 'center',
|
|
10
|
+
...(!isEmptyValue && isColorFeatureEnabled && {
|
|
11
|
+
paddingLeft: '4px !important',
|
|
12
|
+
}),
|
|
13
|
+
'.ms-ComboBox-Input': {
|
|
14
|
+
opacity: isColorFeatureEnabled && !isEmptyValue ? 0 : 1,
|
|
15
|
+
width: isColorFeatureEnabled && !isEmptyValue ? 0 : undefined
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
callout: {
|
|
19
|
+
maxHeight: '300px !important',
|
|
20
|
+
...(isColorFeatureEnabled && {
|
|
21
|
+
'.ms-Checkbox-label': {
|
|
22
|
+
display: 'flex',
|
|
23
|
+
flexDirection: 'row',
|
|
24
|
+
gap: '5px',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
},
|
|
27
|
+
}),
|
|
28
|
+
},
|
|
29
|
+
colorfulOptionsWrapper: {
|
|
30
|
+
flexGrow: 1,
|
|
31
|
+
display: 'flex',
|
|
32
|
+
alignItems: 'center',
|
|
33
|
+
height: '100%',
|
|
34
|
+
textAlign: 'left',
|
|
35
|
+
overflow: 'hidden',
|
|
36
|
+
textOverflow: 'ellipsis'
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { getComboBoxStyles };
|
|
42
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../src/components/MultiSelectOptionSet/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getComboBoxStyles = (isColorFeatureEnabled: boolean, isEmptyValue: boolean, width?: number, height?: number) => {\n return mergeStyleSets({\n root: {\n height: height,\n width: width,\n display: 'flex',\n alignItems: 'center',\n ...(!isEmptyValue && isColorFeatureEnabled && {\n paddingLeft: '4px !important',\n }),\n '.ms-ComboBox-Input': {\n opacity: isColorFeatureEnabled && !isEmptyValue ? 0 : 1,\n width: isColorFeatureEnabled && !isEmptyValue ? 0 : undefined\n }\n },\n callout: {\n maxHeight: '300px !important',\n ...(isColorFeatureEnabled && {\n '.ms-Checkbox-label': {\n display: 'flex',\n flexDirection: 'row',\n gap: '5px',\n alignItems: 'center',\n },\n }),\n },\n colorfulOptionsWrapper: {\n flexGrow: 1,\n display: 'flex',\n alignItems: 'center',\n height: '100%',\n textAlign: 'left',\n overflow: 'hidden',\n textOverflow: 'ellipsis'\n },\n })\n}"],"names":[],"mappings":";;AAEO,MAAM,iBAAiB,GAAG,CAAC,qBAA8B,EAAE,YAAqB,EAAE,KAAc,EAAE,MAAe,KAAI;AACxH,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,IAAI,CAAC,YAAY,IAAI,qBAAqB,IAAI;AAC1C,gBAAA,WAAW,EAAE,gBAAgB;aAChC,CAAC;AACF,YAAA,oBAAoB,EAAE;AAClB,gBAAA,OAAO,EAAE,qBAAqB,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC;AACvD,gBAAA,KAAK,EAAE,qBAAqB,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,SAAS;AAChE,aAAA;AACJ,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,SAAS,EAAE,kBAAkB;YAC7B,IAAI,qBAAqB,IAAI;AACzB,gBAAA,oBAAoB,EAAE;AAClB,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,aAAa,EAAE,KAAK;AACpB,oBAAA,GAAG,EAAE,KAAK;AACV,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA;aACJ,CAAC;AACL,SAAA;AACD,QAAA,sBAAsB,EAAE;AACpB,YAAA,QAAQ,EAAE,CAAC;AACX,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,SAAS,EAAE,MAAM;AACjB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,YAAY,EAAE,UAAU;AAC3B,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { ComboBox
|
|
2
|
+
import { ComboBox } from '@talxis/react-components';
|
|
3
3
|
import { ThemeProvider } from '@fluentui/react';
|
|
4
4
|
import { useRef, useMemo, useEffect } from 'react';
|
|
5
5
|
import { useComboBoxTheme } from './useComboBoxTheme.js';
|
|
6
6
|
import { getComboBoxStyles } from './styles.js';
|
|
7
|
+
import { onRenderColorfulOption } from './shared.js';
|
|
7
8
|
import { useControl } from '../../hooks/useControl.js';
|
|
8
9
|
|
|
9
10
|
const OptionSet = (props) => {
|
|
@@ -35,13 +36,6 @@ const OptionSet = (props) => {
|
|
|
35
36
|
value: value
|
|
36
37
|
});
|
|
37
38
|
};
|
|
38
|
-
const onRenderColorfulOption = (option) => {
|
|
39
|
-
if (!option) {
|
|
40
|
-
return null;
|
|
41
|
-
}
|
|
42
|
-
const color = Options.find(item => item.Value.toString() === option.key)?.Color ?? theme.palette.neutralLight;
|
|
43
|
-
return jsx(ColorfulOption, { label: option.text, color: color });
|
|
44
|
-
};
|
|
45
39
|
const componentProps = onOverrideComponentProps({
|
|
46
40
|
componentRef: componentRef,
|
|
47
41
|
options: comboBoxOptions,
|
|
@@ -77,7 +71,7 @@ const OptionSet = (props) => {
|
|
|
77
71
|
},
|
|
78
72
|
}),
|
|
79
73
|
onChange: (e, option) => handleChange(option),
|
|
80
|
-
onRenderOption: colorFeatureEnabled ? onRenderColorfulOption : undefined,
|
|
74
|
+
onRenderOption: colorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,
|
|
81
75
|
});
|
|
82
76
|
return (jsx(ThemeProvider, { theme: overridenTheme, applyTo: "none", children: jsx(ComboBox, { ...componentProps }) }));
|
|
83
77
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox
|
|
1
|
+
{"version":3,"file":"OptionSet.js","sources":["../../../src/components/OptionSet/OptionSet.tsx"],"sourcesContent":["\nimport { IOptionSet } from './interfaces';\nimport { useControl } from '../../hooks';\nimport { ComboBox } from \"@talxis/react-components\";\nimport { IComboBox, IComboBoxOption, ThemeProvider } from '@fluentui/react';\nimport { useEffect, useMemo, useRef } from 'react';\nimport { useComboBoxTheme } from './useComboBoxTheme';\nimport { getComboBoxStyles } from './styles';\nimport { onRenderColorfulOption } from './shared';\n\n\nexport const OptionSet = (props: IOptionSet) => {\n const componentRef = useRef<IComboBox>(null);\n const { sizing, onNotifyOutputChanged, theme } = useControl('OptionSet', props);\n const styles = useMemo(() => getComboBoxStyles(sizing.width, sizing.height), [sizing.width, sizing.height]);\n const [colorFeatureEnabled, overridenTheme] = useComboBoxTheme(props, theme);\n const parameters = props.parameters;\n const boundValue = parameters.value;\n const { Options } = parameters.value.attributes;\n const context = props.context;\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n\n const comboBoxOptions: IComboBoxOption[] = Options.map(option => ({\n key: option.Value.toString(),\n text: option.Label,\n title: option.Label\n }));\n\n useEffect(() => {\n if (parameters.AutoFocus?.raw) {\n componentRef.current?.focus(true);\n }\n }, []);\n\n const handleChange = (option?: IComboBoxOption | null): void => {\n let value = undefined;\n if (option) {\n value = parseInt(option.key as string);\n }\n onNotifyOutputChanged({\n value: value\n });\n };\n\n const componentProps = onOverrideComponentProps({\n componentRef: componentRef,\n options: comboBoxOptions,\n readOnly: context.mode.isControlDisabled,\n selectedKey: boundValue.raw?.toString() ?? null,\n errorMessage: boundValue.errorMessage,\n useComboBoxAsMenuWidth: true,\n hideErrorMessage: !parameters.ShowErrorMessage?.raw,\n styles: { root: styles.root, callout: styles.callout },\n onRenderContainer: (containerProps, defaultRender) => <ThemeProvider theme={props.context.fluentDesignLanguage?.applicationTheme}>{defaultRender?.(containerProps)}</ThemeProvider>,\n calloutProps: {\n theme: props.context.fluentDesignLanguage?.applicationTheme\n },\n ...(parameters.EnableCopyButton?.raw === true && {\n clickToCopyProps: {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy',\n },\n },\n }),\n ...(parameters.EnableDeleteButton?.raw === true && {\n deleteButtonProps: {\n key: 'delete',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel',\n },\n onClick: (e, value) => {\n handleChange(null);\n },\n },\n }),\n onChange: (e, option) => handleChange(option),\n onRenderOption: colorFeatureEnabled ? (option) => onRenderColorfulOption(Options, option, theme) : undefined,\n });\n\n return (\n <ThemeProvider theme={overridenTheme} applyTo=\"none\">\n <ComboBox\n {...componentProps} />\n </ThemeProvider>);\n};"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="@types/powerapps-component-framework" />
|
|
2
|
+
/// <reference types="react" />
|
|
3
|
+
import { IComboBoxOption, ITheme } from "@fluentui/react";
|
|
4
|
+
export declare const onRenderColorfulOption: (options: ComponentFramework.PropertyHelper.OptionMetadata[], option: IComboBoxOption | undefined, theme: ITheme) => JSX.Element | null;
|
|
5
|
+
export declare const getIsColorFeatureEnabled: (enableColors: boolean | undefined, options: ComponentFramework.PropertyHelper.OptionMetadata[]) => boolean;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { ColorfulOption } from '@talxis/react-components';
|
|
3
|
+
|
|
4
|
+
const onRenderColorfulOption = (options, option, theme) => {
|
|
5
|
+
if (!option) {
|
|
6
|
+
return null;
|
|
7
|
+
}
|
|
8
|
+
const color = options.find(item => item.Value.toString() === option.key)?.Color ?? theme.palette.neutralLight;
|
|
9
|
+
return jsx(ColorfulOption, { label: option.text, color: color });
|
|
10
|
+
};
|
|
11
|
+
const getIsColorFeatureEnabled = (enableColors, options) => {
|
|
12
|
+
if (enableColors && options.find(x => x.Color)) {
|
|
13
|
+
return true;
|
|
14
|
+
}
|
|
15
|
+
return false;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { getIsColorFeatureEnabled, onRenderColorfulOption };
|
|
19
|
+
//# sourceMappingURL=shared.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shared.js","sources":["../../../src/components/OptionSet/shared.tsx"],"sourcesContent":["import { IComboBoxOption, ITheme } from \"@fluentui/react\";\nimport { ColorfulOption } from \"@talxis/react-components\";\n\nexport const onRenderColorfulOption = (options: ComponentFramework.PropertyHelper.OptionMetadata[], option: IComboBoxOption | undefined, theme: ITheme) => {\n if (!option) {\n return null;\n }\n const color = options.find(item => item.Value.toString() === option.key)?.Color ?? theme.palette.neutralLight\n return <ColorfulOption label={option.text} color={color} />\n};\n\nexport const getIsColorFeatureEnabled = (enableColors: boolean | undefined, options: ComponentFramework.PropertyHelper.OptionMetadata[]) => {\n if (enableColors && options.find(x => x.Color)) {\n return true;\n }\n return false;\n}"],"names":["_jsx"],"mappings":";;;AAGa,MAAA,sBAAsB,GAAG,CAAC,OAA2D,EAAE,MAAmC,EAAE,KAAa,KAAI;IACtJ,IAAI,CAAC,MAAM,EAAE;AACT,QAAA,OAAO,IAAI,CAAC;AACf,KAAA;AACD,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,MAAM,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,YAAY,CAAA;AAC7G,IAAA,OAAOA,GAAC,CAAA,cAAc,EAAC,EAAA,KAAK,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAA;AAC/D,EAAE;MAEW,wBAAwB,GAAG,CAAC,YAAiC,EAAE,OAA2D,KAAI;AACvI,IAAA,IAAI,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE;AAC5C,QAAA,OAAO,IAAI,CAAC;AACf,KAAA;AACD,IAAA,OAAO,KAAK,CAAC;AACjB;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -986,6 +986,7 @@ interface IMultiSelectOptionSet extends IControl<IMultiSelectOptionSetParameters
|
|
|
986
986
|
}
|
|
987
987
|
interface IMultiSelectOptionSetParameters extends IInputParameters {
|
|
988
988
|
value: IMultiSelectOptionSetProperty;
|
|
989
|
+
EnableOptionSetColors?: Omit<ITwoOptionsProperty, 'attributes'>;
|
|
989
990
|
}
|
|
990
991
|
interface IMultiSelectOptionSetOutputs extends IOutputs$1 {
|
|
991
992
|
value?: number[];
|
package/package.json
CHANGED