npm - @talxis/base-controls - Versions diffs - 1.2601.3 → 1.2601.5 - Mend

@talxis/base-controls 1.2601.3 → 1.2601.5

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.

Files changed (93) hide show

package/dist/components/DatasetControl/EditColumns/useEditColumns.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+import { IEditColumns } from "../../../utils/dataset-control/EditColumns";
+export declare const EditColumnsContext: React.Context<IEditColumns>;
+export declare const useEditColumns: () => IEditColumns;

package/dist/components/DatasetControl/EditColumns/useEditColumns.js ADDED Viewed

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+const EditColumnsContext = React.createContext(null);
+const useEditColumns = () => {
+    return useContext(EditColumnsContext);
+};
+export { EditColumnsContext, useEditColumns };
+//# sourceMappingURL=useEditColumns.js.map

package/dist/components/DatasetControl/EditColumns/useEditColumns.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useEditColumns.js","sources":["../../../../src/components/DatasetControl/EditColumns/useEditColumns.ts"],"sourcesContent":["import React from \"react\";\nimport { useContext } from \"react\"\nimport { IEditColumns } from \"../../../utils/dataset-control/EditColumns\";\n\nexport const EditColumnsContext = React.createContext<IEditColumns>(null as any);\n\nexport const useEditColumns = () => {\n return useContext(EditColumnsContext);\n}"],"names":[],"mappings":";;AAIa,MAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAe,IAAW,EAAE;AAE1E,MAAM,cAAc,GAAG,MAAK;AAC/B,IAAA,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC1C;;;;"}

package/dist/components/DatasetControl/Filtering/DatasetColumnFiltering.js CHANGED Viewed

@@ -6,8 +6,8 @@ import { DatasetColumnFilteringModel } from './DatasetColumnFilteringModel.js';
 import { useRerender } from '@talxis/react-components';
 import { getDatasetColumnFilteringStyles } from './styles.js';
 import { useDebouncedCallback } from 'use-debounce';
-import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
 import { useControl } from '../../../hooks/useControl.js';
+import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
 import { OptionSet } from '../../OptionSet/OptionSet.js';
 import { NestedControlRenderer } from '../../NestedControlRenderer/NestedControlRenderer.js';

package/dist/components/DatasetControl/Header/Header.js CHANGED Viewed

@@ -1,21 +1,25 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { MessageBarType, MessageBar } from '@fluentui/react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CommandBarButton, MessageBarType, MessageBar } from '@fluentui/react';
 import { useModel } from '../useModel.js';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { getHeaderStyles } from './styles.js';
 import { useRerender } from '@talxis/react-components';
 import { QuickFind } from '../QuickFind/QuickFind.js';
 import { Ribbon } from '../../Ribbon/Ribbon.js';
 import { useEventEmitter } from '../../../hooks/useEventEmitter.js';
+import { EditColumns } from '../EditColumns/EditColumns.js';
 const Header = (props) => {
     const model = useModel();
+    const labels = model.getLabels();
     const datasetControl = model.getDatasetControl();
     const dataset = datasetControl.getDataset();
     const rerender = useRerender();
     const styles = useMemo(() => getHeaderStyles(), []);
+    const [isEditColumnsPanelVisible, setIsEditColumnsPanelVisible] = useState(false);
     useEventEmitter(dataset, 'onLoading', rerender);
     useEventEmitter(datasetControl, 'onRecordCommandsLoaded', rerender);
+    useEventEmitter(datasetControl, 'onEditColumnsRequested', () => setIsEditColumnsPanelVisible(true));
     const isHeaderVisible = () => {
         switch (true) {
             case datasetControl.isQuickFindVisible():
@@ -29,6 +33,22 @@ const Header = (props) => {
             }
         }
     };
+    //will not be needed once we have a custom edit columns button in the ribbon
+    const getRightSideCommands = (isEditColumnsVisible, isEditFiltersVisible) => {
+        return [
+            ...(isEditColumnsVisible ? [{
+                    key: 'column',
+                    text: labels['edit-columns'](),
+                    iconProps: { iconName: 'ColumnOptions' },
+                    onClick: () => setIsEditColumnsPanelVisible(true)
+                }] : []),
+            ...(isEditFiltersVisible ? [{
+                    key: 'filter',
+                    text: labels['edit-filters'](),
+                    iconProps: { iconName: 'Filter' }
+                }] : [])
+        ];
+    };
     return props.onRenderHeader({
         headerContainerProps: {
             className: styles.header
@@ -37,48 +57,66 @@ const Header = (props) => {
         onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),
         onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)
     }, (props) => {
-        if (!isHeaderVisible()) {
-            return jsx(Fragment, {});
-        }
-        return jsxs("div", { ...props.headerContainerProps, children: [props.onRenderRibbonQuickFindWrapper({
-                    ribbonQuickFindContainerProps: {
-                        className: styles.ribbonQuickFindContainer
-                    },
-                    isRibbonVisible: datasetControl.isRibbonVisible(),
-                    isQuickFindVisible: datasetControl.isQuickFindVisible(),
-                    onRenderQuickFind: (props, defaultRender) => defaultRender(props),
-                    onRenderRibbon: (props, defaultRender) => defaultRender(props)
-                }, (props) => {
-                    return jsxs("div", { ...props.ribbonQuickFindContainerProps, children: [props.isRibbonVisible &&
-                                jsx(Ribbon, { context: {
-                                        ...datasetControl.getPcfContext(),
-                                        mode: {
-                                            ...datasetControl.getPcfContext().mode,
-                                            isControlDisabled: dataset.loading
-                                        }
-                                    }, onOverrideComponentProps: (ribbonProps) => {
-                                        return {
-                                            ...ribbonProps,
-                                            onRender: props.onRenderRibbon
-                                        };
-                                    }, parameters: {
-                                        Commands: {
-                                            raw: datasetControl.retrieveRecordCommands(),
-                                        },
-                                        Loading: {
-                                            raw: !datasetControl.areCommandsLoaded()
-                                        }
-                                    } }), props.isQuickFindVisible &&
-                                jsx(QuickFind, { onRenderQuickFind: props.onRenderQuickFind })] });
-                }), dataset.error &&
-                    props.onRenderErrorMessageBar({
-                        messageBarProps: {
-                            messageBarType: MessageBarType.error
-                        },
-                        onRenderMessageBar: (props, defaultRender) => defaultRender(props)
-                    }, (props) => {
-                        return jsx(MessageBar, { ...props.messageBarProps, children: dataset.errorMessage });
-                    })] });
+        return jsxs(Fragment, { children: [isHeaderVisible() &&
+                    jsxs("div", { ...props.headerContainerProps, children: [props.onRenderRibbonQuickFindWrapper({
+                                ribbonQuickFindContainerProps: {
+                                    className: styles.ribbonQuickFindContainer
+                                },
+                                isRibbonVisible: datasetControl.isRibbonVisible(),
+                                isQuickFindVisible: datasetControl.isQuickFindVisible(),
+                                isEditColumnsVisible: datasetControl.isEditColumnsVisible(),
+                                isViewSwitcherVisible: datasetControl.isViewSwitcherVisible(),
+                                isEditFiltersVisible: datasetControl.isEditFiltersVisible(),
+                                onRenderQuickFind: (props, defaultRender) => defaultRender(props),
+                                onRenderRibbon: (props, defaultRender) => defaultRender(props)
+                            }, (props) => {
+                                return jsxs("div", { ...props.ribbonQuickFindContainerProps, children: [props.isViewSwitcherVisible &&
+                                            jsx(CommandBarButton, { text: "Current View" }), props.isRibbonVisible &&
+                                            jsx(Ribbon, { context: {
+                                                    ...datasetControl.getPcfContext(),
+                                                    mode: {
+                                                        ...datasetControl.getPcfContext().mode,
+                                                        isControlDisabled: dataset.loading
+                                                    }
+                                                }, onOverrideComponentProps: (ribbonProps) => {
+                                                    return {
+                                                        ...ribbonProps,
+                                                        onRender: (ribbonProps, defaultRender) => props.onRenderRibbon({
+                                                            ...ribbonProps,
+                                                            onRenderCommandBar: (commandBarProps, defaultRender) => {
+                                                                return defaultRender({
+                                                                    ...commandBarProps,
+                                                                    styles: {
+                                                                        ...commandBarProps.styles,
+                                                                        primarySet: {
+                                                                            justifyContent: props.isViewSwitcherVisible ? 'flex-end' : 'flex-start'
+                                                                        }
+                                                                    },
+                                                                    items: [...commandBarProps.items, ...(props.isViewSwitcherVisible ? getRightSideCommands(props.isEditColumnsVisible, props.isEditFiltersVisible) : [])],
+                                                                    farItems: !props.isViewSwitcherVisible ? getRightSideCommands(props.isEditColumnsVisible, props.isEditFiltersVisible) : []
+                                                                });
+                                                            }
+                                                        }, defaultRender)
+                                                    };
+                                                }, parameters: {
+                                                    Commands: {
+                                                        raw: datasetControl.retrieveRecordCommands(),
+                                                    },
+                                                    Loading: {
+                                                        raw: !datasetControl.areCommandsLoaded()
+                                                    }
+                                                } }), props.isQuickFindVisible &&
+                                            jsx(QuickFind, { onRenderQuickFind: props.onRenderQuickFind })] });
+                            }), dataset.error &&
+                                props.onRenderErrorMessageBar({
+                                    messageBarProps: {
+                                        messageBarType: MessageBarType.error
+                                    },
+                                    onRenderMessageBar: (props, defaultRender) => defaultRender(props)
+                                }, (props) => {
+                                    return jsx(MessageBar, { ...props.messageBarProps, children: dataset.errorMessage });
+                                })] }), isEditColumnsPanelVisible &&
+                    jsx("div", { style: { position: 'absolute' }, children: jsx(EditColumns, { onDismiss: () => setIsEditColumnsPanelVisible(false) }) })] });
     });
 };

package/dist/components/DatasetControl/Header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../../../src/components/DatasetControl/Header/Header.tsx"],"sourcesContent":["import { MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { IComponentProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { useMemo } from \"react\";\nimport { getHeaderStyles } from \"./styles\";\nimport { useRerender } from \"@talxis/react-components\";\nimport { QuickFind } from \"../QuickFind/QuickFind\";\nimport { Ribbon } from \"../../Ribbon/Ribbon\";\nimport { useEventEmitter } from \"../../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\nimport { IDatasetControlEvents } from \"../../../utils/dataset-control\";\n\nexport const Header = (props: { onRenderHeader: IComponentProps['onRenderHeader'] }) => {\n const model = useModel();\n const datasetControl = model.getDatasetControl();\n const dataset = datasetControl.getDataset();\n const rerender = useRerender();\n const styles = useMemo(() => getHeaderStyles(), []);\n useEventEmitter<IDataProviderEventListeners>(dataset, 'onLoading', rerender);\n useEventEmitter<IDatasetControlEvents>(datasetControl, 'onRecordCommandsLoaded', rerender);\n\n const isHeaderVisible = () => {\n switch (true) {\n case datasetControl.isQuickFindVisible():\n case dataset.error:\n case datasetControl.isRibbonVisible():\n {\n return true;\n }\n default: {\n return false;\n }\n }\n }\n\n return props.onRenderHeader({\n headerContainerProps: {\n className: styles.header\n },\n onRenderErrorMessageBar: (props, defaultRender) => defaultRender(props),\n onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),\n onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)\n }, (props) => {\n if (!isHeaderVisible()) {\n return <></>\n }\n return <div {...props.headerContainerProps}>\n {props.onRenderRibbonQuickFindWrapper({\n ribbonQuickFindContainerProps: {\n className: styles.ribbonQuickFindContainer\n },\n isRibbonVisible: datasetControl.isRibbonVisible(),\n isQuickFindVisible: datasetControl.isQuickFindVisible(),\n onRenderQuickFind: (props, defaultRender) => defaultRender(props),\n onRenderRibbon: (props, defaultRender) => defaultRender(props)\n }, (props) => {\n return <div {...props.ribbonQuickFindContainerProps}>\n {props.isRibbonVisible &&\n <Ribbon\n context={{\n ...datasetControl.getPcfContext(),\n mode: {\n ...datasetControl.getPcfContext().mode,\n isControlDisabled: dataset.loading\n }\n }}\n onOverrideComponentProps={(ribbonProps) => {\n return {\n ...ribbonProps,\n onRender: props.onRenderRibbon\n }\n }}\n parameters={{\n Commands: {\n raw: datasetControl.retrieveRecordCommands(),\n },\n Loading: {\n raw: !datasetControl.areCommandsLoaded()\n }\n }}\n />\n }\n {props.isQuickFindVisible &&\n <QuickFind\n onRenderQuickFind={props.onRenderQuickFind} />\n }\n </div>\n })}\n {dataset.error &&\n props.onRenderErrorMessageBar({\n messageBarProps: {\n messageBarType: MessageBarType.error\n },\n onRenderMessageBar: (props, defaultRender) => defaultRender(props)\n\n }, (props) => {\n return <MessageBar {...props.messageBarProps}>\n {dataset.errorMessage}\n </MessageBar>\n })\n }\n </div>\n })\n}"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAYa,MAAA,MAAM,GAAG,CAAC,KAA4D,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,CAAC;AAC5C,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;AACpD,IAAA,eAAe,CAA8B,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC7E,IAAA,eAAe,CAAwB,cAAc,EAAE,wBAAwB,EAAE,QAAQ,CAAC,CAAC;IAE3F,MAAM,eAAe,GAAG,MAAK;AACzB,QAAA,QAAQ,IAAI;AACR,YAAA,KAAK,cAAc,CAAC,kBAAkB,EAAE,CAAC;YACzC,KAAK,OAAO,CAAC,KAAK,CAAC;YACnB,KAAK,cAAc,CAAC,eAAe,EAAE;AACjC,gBAAA;AACI,oBAAA,OAAO,IAAI,CAAC;AACf,iBAAA;AACL,YAAA,SAAS;AACL,gBAAA,OAAO,KAAK,CAAC;AAChB,aAAA;AACJ,SAAA;AACL,KAAC,CAAA;IAED,OAAO,KAAK,CAAC,cAAc,CAAC;AACxB,QAAA,oBAAoB,EAAE;YAClB,SAAS,EAAE,MAAM,CAAC,MAAM;AAC3B,SAAA;QACD,uBAAuB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;QACvE,8BAA8B,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;QAC9E,gCAAgC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;KACnF,EAAE,CAAC,KAAK,KAAI;QACT,IAAI,CAAC,eAAe,EAAE,EAAE;AACpB,YAAA,OAAOA,iBAAK,CAAA;AACf,SAAA;QACD,OAAOC,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,CAAC,oBAAoB,aACrC,KAAK,CAAC,8BAA8B,CAAC;AAClC,oBAAA,6BAA6B,EAAE;wBAC3B,SAAS,EAAE,MAAM,CAAC,wBAAwB;AAC7C,qBAAA;AACD,oBAAA,eAAe,EAAE,cAAc,CAAC,eAAe,EAAE;AACjD,oBAAA,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EAAE;oBACvD,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;oBACjE,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;iBACjE,EAAE,CAAC,KAAK,KAAI;AACT,oBAAA,OAAOA,iBAAS,KAAK,CAAC,6BAA6B,EAC9C,QAAA,EAAA,CAAA,KAAK,CAAC,eAAe;gCAClBD,GAAC,CAAA,MAAM,EACH,EAAA,OAAO,EAAE;wCACL,GAAG,cAAc,CAAC,aAAa,EAAE;AACjC,wCAAA,IAAI,EAAE;AACF,4CAAA,GAAG,cAAc,CAAC,aAAa,EAAE,CAAC,IAAI;4CACtC,iBAAiB,EAAE,OAAO,CAAC,OAAO;AACrC,yCAAA;AACJ,qCAAA,EACD,wBAAwB,EAAE,CAAC,WAAW,KAAI;wCACtC,OAAO;AACH,4CAAA,GAAG,WAAW;4CACd,QAAQ,EAAE,KAAK,CAAC,cAAc;yCACjC,CAAA;qCACJ,EACD,UAAU,EAAE;AACR,wCAAA,QAAQ,EAAE;AACN,4CAAA,GAAG,EAAE,cAAc,CAAC,sBAAsB,EAAE;AAC/C,yCAAA;AACD,wCAAA,OAAO,EAAE;AACL,4CAAA,GAAG,EAAE,CAAC,cAAc,CAAC,iBAAiB,EAAE;AAC3C,yCAAA;qCACJ,EACH,CAAA,EAEL,KAAK,CAAC,kBAAkB;gCACrBA,GAAC,CAAA,SAAS,IACN,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAAI,CAAA,CAAA,EAAA,CAEpD,CAAA;AACV,iBAAC,CAAC,EACD,OAAO,CAAC,KAAK;oBACV,KAAK,CAAC,uBAAuB,CAAC;AAC1B,wBAAA,eAAe,EAAE;4BACb,cAAc,EAAE,cAAc,CAAC,KAAK;AACvC,yBAAA;wBACD,kBAAkB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;qBAErE,EAAE,CAAC,KAAK,KAAI;wBACT,OAAOA,GAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,CAAC,eAAe,EAAA,QAAA,EACvC,OAAO,CAAC,YAAY,EAAA,CACZ,CAAA;qBAChB,CAAC,IAEJ,CAAA;AACV,KAAC,CAAC,CAAA;AACN;;;;"}
1	+ {"version":3,"file":"Header.js","sources":["../../../../src/components/DatasetControl/Header/Header.tsx"],"sourcesContent":["import { CommandBarButton, MessageBar, MessageBarType } from \"@fluentui/react\";\nimport { IComponentProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { useMemo, useState } from \"react\";\nimport { getHeaderStyles } from \"./styles\";\nimport { ICommandBarItemProps, useRerender } from \"@talxis/react-components\";\nimport { QuickFind } from \"../QuickFind/QuickFind\";\nimport { Ribbon } from \"../../Ribbon/Ribbon\";\nimport { useEventEmitter } from \"../../../hooks/useEventEmitter\";\nimport { IDataProviderEventListeners } from \"@talxis/client-libraries\";\nimport { IDatasetControlEvents } from \"../../../utils/dataset-control\";\nimport { EditColumns } from \"../EditColumns/EditColumns\";\n\nexport const Header = (props: { onRenderHeader: IComponentProps['onRenderHeader'] }) => {\n const model = useModel();\n const labels = model.getLabels();\n const datasetControl = model.getDatasetControl();\n const dataset = datasetControl.getDataset();\n const rerender = useRerender();\n const styles = useMemo(() => getHeaderStyles(), []);\n const [isEditColumnsPanelVisible, setIsEditColumnsPanelVisible] = useState<boolean>(false);\n useEventEmitter<IDataProviderEventListeners>(dataset, 'onLoading', rerender);\n useEventEmitter<IDatasetControlEvents>(datasetControl, 'onRecordCommandsLoaded', rerender);\n useEventEmitter<IDatasetControlEvents>(datasetControl, 'onEditColumnsRequested', () => setIsEditColumnsPanelVisible(true));\n\n const isHeaderVisible = () => {\n switch (true) {\n case datasetControl.isQuickFindVisible():\n case dataset.error:\n case datasetControl.isRibbonVisible():\n {\n return true;\n }\n default: {\n return false;\n }\n }\n }\n\n //will not be needed once we have a custom edit columns button in the ribbon\n const getRightSideCommands = (isEditColumnsVisible: boolean, isEditFiltersVisible: boolean): ICommandBarItemProps[] => {\n return [\n ...(isEditColumnsVisible ? [{\n key: 'column',\n text: labels['edit-columns'](),\n iconProps: { iconName: 'ColumnOptions' },\n onClick: () => setIsEditColumnsPanelVisible(true)\n }] : []),\n ...(isEditFiltersVisible ? [{\n key: 'filter',\n text: labels['edit-filters'](),\n iconProps: { iconName: 'Filter' }\n }] : [])];\n }\n\n return props.onRenderHeader({\n headerContainerProps: {\n className: styles.header\n },\n onRenderErrorMessageBar: (props, defaultRender) => defaultRender(props),\n onRenderRibbonQuickFindWrapper: (props, defaultRender) => defaultRender(props),\n onRenderUnsavedChangesMessageBar: (props, defaultRender) => defaultRender(props)\n }, (props) => {\n return <>\n {isHeaderVisible() &&\n <div {...props.headerContainerProps}>\n {props.onRenderRibbonQuickFindWrapper({\n ribbonQuickFindContainerProps: {\n className: styles.ribbonQuickFindContainer\n },\n isRibbonVisible: datasetControl.isRibbonVisible(),\n isQuickFindVisible: datasetControl.isQuickFindVisible(),\n isEditColumnsVisible: datasetControl.isEditColumnsVisible(),\n isViewSwitcherVisible: datasetControl.isViewSwitcherVisible(),\n isEditFiltersVisible: datasetControl.isEditFiltersVisible(),\n onRenderQuickFind: (props, defaultRender) => defaultRender(props),\n onRenderRibbon: (props, defaultRender) => defaultRender(props)\n }, (props) => {\n return <div {...props.ribbonQuickFindContainerProps}>\n {props.isViewSwitcherVisible &&\n <CommandBarButton text=\"Current View\" />\n }\n {props.isRibbonVisible &&\n <Ribbon\n context={{\n ...datasetControl.getPcfContext(),\n mode: {\n ...datasetControl.getPcfContext().mode,\n isControlDisabled: dataset.loading\n }\n }}\n onOverrideComponentProps={(ribbonProps) => {\n return {\n ...ribbonProps,\n onRender: (ribbonProps, defaultRender) => props.onRenderRibbon({\n ...ribbonProps,\n onRenderCommandBar: (commandBarProps, defaultRender) => {\n return defaultRender({\n ...commandBarProps,\n styles: {\n ...commandBarProps.styles,\n primarySet: {\n justifyContent: props.isViewSwitcherVisible ? 'flex-end' : 'flex-start'\n }\n },\n items: [...commandBarProps.items, ...(props.isViewSwitcherVisible ? getRightSideCommands(props.isEditColumnsVisible, props.isEditFiltersVisible) : [])],\n farItems: !props.isViewSwitcherVisible ? getRightSideCommands(props.isEditColumnsVisible, props.isEditFiltersVisible) : []\n })\n }\n }, defaultRender)\n }\n }}\n parameters={{\n Commands: {\n raw: datasetControl.retrieveRecordCommands(),\n },\n Loading: {\n raw: !datasetControl.areCommandsLoaded()\n }\n }}\n />\n }\n {props.isQuickFindVisible &&\n <QuickFind\n onRenderQuickFind={props.onRenderQuickFind} />\n }\n </div>\n })}\n {dataset.error &&\n props.onRenderErrorMessageBar({\n messageBarProps: {\n messageBarType: MessageBarType.error\n },\n onRenderMessageBar: (props, defaultRender) => defaultRender(props)\n\n }, (props) => {\n return <MessageBar {...props.messageBarProps}>\n {dataset.errorMessage}\n </MessageBar>\n })\n }\n </div>\n }\n {isEditColumnsPanelVisible &&\n <div style={{ position: 'absolute' }}>\n <EditColumns\n onDismiss={() => setIsEditColumnsPanelVisible(false)} />\n </div>\n }\n </>\n })\n}"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;AAaa,MAAA,MAAM,GAAG,CAAC,KAA4D,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACzB,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;AACjC,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;AACjD,IAAA,MAAM,OAAO,GAAG,cAAc,CAAC,UAAU,EAAE,CAAC;AAC5C,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,MAAM,CAAC,yBAAyB,EAAE,4BAA4B,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;AAC3F,IAAA,eAAe,CAA8B,OAAO,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC7E,IAAA,eAAe,CAAwB,cAAc,EAAE,wBAAwB,EAAE,QAAQ,CAAC,CAAC;AAC3F,IAAA,eAAe,CAAwB,cAAc,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC,IAAI,CAAC,CAAC,CAAC;IAE3H,MAAM,eAAe,GAAG,MAAK;AACzB,QAAA,QAAQ,IAAI;AACR,YAAA,KAAK,cAAc,CAAC,kBAAkB,EAAE,CAAC;YACzC,KAAK,OAAO,CAAC,KAAK,CAAC;YACnB,KAAK,cAAc,CAAC,eAAe,EAAE;AACjC,gBAAA;AACI,oBAAA,OAAO,IAAI,CAAC;AACf,iBAAA;AACL,YAAA,SAAS;AACL,gBAAA,OAAO,KAAK,CAAC;AAChB,aAAA;AACJ,SAAA;AACL,KAAC,CAAA;;AAGD,IAAA,MAAM,oBAAoB,GAAG,CAAC,oBAA6B,EAAE,oBAA6B,KAA4B;QAClH,OAAO;AACH,YAAA,IAAI,oBAAoB,GAAG,CAAC;AACxB,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,IAAI,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE;AAC9B,oBAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE;AACxC,oBAAA,OAAO,EAAE,MAAM,4BAA4B,CAAC,IAAI,CAAC;AACpD,iBAAA,CAAC,GAAG,EAAE,CAAC;AACR,YAAA,IAAI,oBAAoB,GAAG,CAAC;AACxB,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,IAAI,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE;AAC9B,oBAAA,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;AACpC,iBAAA,CAAC,GAAG,EAAE,CAAC;SAAC,CAAC;AAClB,KAAC,CAAA;IAED,OAAO,KAAK,CAAC,cAAc,CAAC;AACxB,QAAA,oBAAoB,EAAE;YAClB,SAAS,EAAE,MAAM,CAAC,MAAM;AAC3B,SAAA;QACD,uBAAuB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;QACvE,8BAA8B,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;QAC9E,gCAAgC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;KACnF,EAAE,CAAC,KAAK,KAAI;QACT,OAAOA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACF,eAAe,EAAE;AACd,oBAAAD,IAAA,CAAA,KAAA,EAAA,EAAA,GAAS,KAAK,CAAC,oBAAoB,aAC9B,KAAK,CAAC,8BAA8B,CAAC;AAClC,gCAAA,6BAA6B,EAAE;oCAC3B,SAAS,EAAE,MAAM,CAAC,wBAAwB;AAC7C,iCAAA;AACD,gCAAA,eAAe,EAAE,cAAc,CAAC,eAAe,EAAE;AACjD,gCAAA,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,EAAE;AACvD,gCAAA,oBAAoB,EAAE,cAAc,CAAC,oBAAoB,EAAE;AAC3D,gCAAA,qBAAqB,EAAE,cAAc,CAAC,qBAAqB,EAAE;AAC7D,gCAAA,oBAAoB,EAAE,cAAc,CAAC,oBAAoB,EAAE;gCAC3D,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;gCACjE,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;6BACjE,EAAE,CAAC,KAAK,KAAI;AACT,gCAAA,OAAOA,iBAAS,KAAK,CAAC,6BAA6B,EAC9C,QAAA,EAAA,CAAA,KAAK,CAAC,qBAAqB;4CACxBE,GAAC,CAAA,gBAAgB,IAAC,IAAI,EAAC,cAAc,EAAG,CAAA,EAE3C,KAAK,CAAC,eAAe;4CAClBA,GAAC,CAAA,MAAM,EACH,EAAA,OAAO,EAAE;oDACL,GAAG,cAAc,CAAC,aAAa,EAAE;AACjC,oDAAA,IAAI,EAAE;AACF,wDAAA,GAAG,cAAc,CAAC,aAAa,EAAE,CAAC,IAAI;wDACtC,iBAAiB,EAAE,OAAO,CAAC,OAAO;AACrC,qDAAA;AACJ,iDAAA,EACD,wBAAwB,EAAE,CAAC,WAAW,KAAI;oDACtC,OAAO;AACH,wDAAA,GAAG,WAAW;wDACd,QAAQ,EAAE,CAAC,WAAW,EAAE,aAAa,KAAK,KAAK,CAAC,cAAc,CAAC;AAC3D,4DAAA,GAAG,WAAW;AACd,4DAAA,kBAAkB,EAAE,CAAC,eAAe,EAAE,aAAa,KAAI;AACnD,gEAAA,OAAO,aAAa,CAAC;AACjB,oEAAA,GAAG,eAAe;AAClB,oEAAA,MAAM,EAAE;wEACJ,GAAG,eAAe,CAAC,MAAM;AACzB,wEAAA,UAAU,EAAE;4EACR,cAAc,EAAE,KAAK,CAAC,qBAAqB,GAAG,UAAU,GAAG,YAAY;AAC1E,yEAAA;AACJ,qEAAA;AACD,oEAAA,KAAK,EAAE,CAAC,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,KAAK,CAAC,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAAC,CAAC;oEACvJ,QAAQ,EAAE,CAAC,KAAK,CAAC,qBAAqB,GAAG,oBAAoB,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAAC,GAAG,EAAE;AAC7H,iEAAA,CAAC,CAAA;6DACL;AACJ,yDAAA,EAAE,aAAa,CAAC;qDACpB,CAAA;iDACJ,EACD,UAAU,EAAE;AACR,oDAAA,QAAQ,EAAE;AACN,wDAAA,GAAG,EAAE,cAAc,CAAC,sBAAsB,EAAE;AAC/C,qDAAA;AACD,oDAAA,OAAO,EAAE;AACL,wDAAA,GAAG,EAAE,CAAC,cAAc,CAAC,iBAAiB,EAAE;AAC3C,qDAAA;iDACJ,EACH,CAAA,EAEL,KAAK,CAAC,kBAAkB;4CACrBA,GAAC,CAAA,SAAS,IACN,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAAI,CAAA,CAAA,EAAA,CAEpD,CAAA;AACV,6BAAC,CAAC,EACD,OAAO,CAAC,KAAK;gCACV,KAAK,CAAC,uBAAuB,CAAC;AAC1B,oCAAA,eAAe,EAAE;wCACb,cAAc,EAAE,cAAc,CAAC,KAAK;AACvC,qCAAA;oCACD,kBAAkB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;iCAErE,EAAE,CAAC,KAAK,KAAI;oCACT,OAAOA,GAAA,CAAC,UAAU,EAAA,EAAA,GAAK,KAAK,CAAC,eAAe,EAAA,QAAA,EACvC,OAAO,CAAC,YAAY,EAAA,CACZ,CAAA;iCAChB,CAAC,CAEJ,EAAA,CAAA,EAET,yBAAyB;oBACtBA,GAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAChC,QAAA,EAAAA,GAAA,CAAC,WAAW,EAAA,EACR,SAAS,EAAE,MAAM,4BAA4B,CAAC,KAAK,CAAC,EAAA,CAAI,EAC1D,CAAA,CAAA,EAAA,CAEX,CAAA;AACP,KAAC,CAAC,CAAA;AACN;;;;"}

package/dist/components/DatasetControl/QuickFind/QuickFind.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useEffect } from 'react';
 import { useModel } from '../useModel.js';
 import { TextField } from '@talxis/react-components';
 import { getQuickFindStyles } from './styles.js';
+import { Callout, Text, FontIcon } from '@fluentui/react';
 const QuickFind = (props) => {
     const [query, setQuery] = useState('');
@@ -11,10 +12,15 @@ const QuickFind = (props) => {
     const dataProvider = dataset.getDataProvider();
     const labels = model.getLabels();
     const styles = useMemo(() => getQuickFindStyles(), []);
+    const id = useMemo(() => `quickfind-${crypto.randomUUID()}`, []);
+    const [isCalloutVisible, setIsCalloutVisible] = useState(false);
+    const quickFindColumns = dataProvider.getQuickFindColumns();
+    const isLikeQuery = query.startsWith('*');
     const onSearch = (query) => {
         dataProvider.executeWithUnsavedChangesBlocker(() => {
             setQuery(query ?? '');
             dataset.setSearchQuery?.(query ?? '');
+            setIsCalloutVisible(false);
             dataset.refresh();
         });
     };
@@ -27,36 +33,90 @@ const QuickFind = (props) => {
         setQuery(dataset.getSearchQuery?.() ?? '');
     }, [dataset.getSearchQuery?.()]);
     return props.onRenderQuickFind({
+        containerProps: {
+            id: id,
+        },
         onRenderTextField: (props, defaultRender) => defaultRender(props),
-        textFieldProps: {
-            value: query,
-            placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
-            styles: {
-                root: styles.textFieldRoot,
-                fieldGroup: styles.fieldGroup
-            },
-            disabled: dataset.loading,
-            onChange: (e, newValue) => setQuery(newValue ?? ''),
-            onKeyUp: onKeyUp,
-            ...(query ? {
-                deleteButtonProps: {
-                    key: 'delete',
-                    iconProps: {
-                        iconName: 'Cancel'
-                    },
-                    onClick: () => onSearch(undefined)
-                }
-            } : {}),
-            suffixItems: [{
-                    key: 'search',
-                    iconProps: {
-                        iconName: 'Search'
-                    },
-                    onClick: () => onSearch(query)
-                }]
-        }
+        onRenderCalloutContainer: (props, defaultRender) => defaultRender(props),
     }, (props) => {
-        return jsx(TextField, { ...props.textFieldProps });
+        return jsxs("div", { ...props.containerProps, children: [props.onRenderTextField({
+                    value: query,
+                    placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
+                    styles: {
+                        root: styles.textFieldRoot,
+                        fieldGroup: styles.fieldGroup
+                    },
+                    disabled: dataset.loading || quickFindColumns.length === 0,
+                    onClick: () => setIsCalloutVisible(true),
+                    onBlur: () => setIsCalloutVisible(false),
+                    onChange: (e, newValue) => setQuery(newValue ?? ''),
+                    onKeyUp: onKeyUp,
+                    ...(query ? {
+                        deleteButtonProps: {
+                            key: 'delete',
+                            iconProps: {
+                                iconName: 'Cancel'
+                            },
+                            onClick: () => onSearch(undefined)
+                        }
+                    } : {}),
+                    suffixItems: [{
+                            key: 'search',
+                            iconProps: {
+                                iconName: 'Search'
+                            },
+                            onClick: () => onSearch(query)
+                        }]
+                }, (props) => {
+                    return jsx(TextField, { ...props });
+                }), props.onRenderCalloutContainer({
+                    style: { position: 'absolute' },
+                    onRenderCallout: (props, defaultRender) => defaultRender(props),
+                    isVisible: isCalloutVisible
+                }, (props) => {
+                    if (props.isVisible) {
+                        const { onRenderCallout, isVisible, ...divProps } = props;
+                        return jsx("div", { ...divProps, children: onRenderCallout({
+                                target: `#${id}`,
+                                isVisible: isCalloutVisible && (quickFindColumns.length > 0 || isLikeQuery),
+                                calloutMaxWidth: 250,
+                                isLikeQuery: isLikeQuery,
+                                styles: {
+                                    calloutMain: styles.calloutMain
+                                },
+                                hidden: false,
+                                onDismiss: () => setIsCalloutVisible(false),
+                                onRenderLikeOperatorWarning: (props, defaultRender) => defaultRender(props),
+                                onRenderBegingsWithFilterInfo: (props, defaultRender) => defaultRender(props),
+                                onRenderColumnsList: (props, defaultRender) => defaultRender(props)
+                            }, (props) => {
+                                const { onRenderLikeOperatorWarning, onRenderBegingsWithFilterInfo, onRenderColumnsList, isLikeQuery, ...calloutProps } = props;
+                                return jsxs(Callout, { ...calloutProps, children: [props.isLikeQuery &&
+                                            props.onRenderLikeOperatorWarning({}, (props) => {
+                                                return jsxs(Text, { ...props, children: [jsx(FontIcon, { className: styles.calloutWarningIcon, iconName: "Warning" }), labels["quickfind-like-warning"]()] });
+                                            }), !props.isLikeQuery &&
+                                            props.onRenderBegingsWithFilterInfo({}, (props) => {
+                                                return jsxs(Text, { ...props, children: [labels["quickfind-search-use-filter"](), " ", jsx("span", { className: styles.calloutBoldText, children: labels["quickfind-search-starts-with"]() }), " ", labels["quickfind-search-on-these-columns"]()] });
+                                            }), props.onRenderColumnsList({
+                                            className: styles.calloutColumnsWrapper,
+                                            columns: quickFindColumns,
+                                            onRenderColumnLabel: (props, defaultRender) => defaultRender(props)
+                                        }, (props) => {
+                                            const { onRenderColumnLabel, columns, ...divProps } = props;
+                                            return jsx("div", { ...divProps, children: props.columns.map(col => {
+                                                    return props.onRenderColumnLabel({
+                                                        key: col.name
+                                                    }, (props) => {
+                                                        return jsx(Text, { ...props, children: jsx("span", { className: styles.calloutBoldText, children: col.displayName }) });
+                                                    });
+                                                }) });
+                                        })] });
+                            }) });
+                    }
+                    else {
+                        return jsx(Fragment, {});
+                    }
+                })] });
     });
 };

package/dist/components/DatasetControl/QuickFind/QuickFind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { IRibbonQuickFindWrapperProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { TextField } from \"@talxis/react-components\";\nimport { getQuickFindStyles } from \"./styles\";\nimport { IInternalDataProvider } from \"@talxis/client-libraries\";\n\nexport const QuickFind = (props: { onRenderQuickFind: IRibbonQuickFindWrapperProps['onRenderQuickFind'] }) => {\n const [query, setQuery] = useState<string>('');\n const model = useModel();\n const dataset = model.getDatasetControl().getDataset();\n const dataProvider = dataset.getDataProvider() as IInternalDataProvider;\n const labels = model.getLabels();\n const styles = useMemo(() => getQuickFindStyles(), []);\n\n const onSearch = (query?: string) => {\n dataProvider.executeWithUnsavedChangesBlocker(() => {\n setQuery(query ?? '');\n dataset.setSearchQuery?.(query ?? '');\n dataset.refresh();\n })\n }\n\n const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearch(query);\n }\n }\n\n useEffect(() => {\n setQuery(dataset.getSearchQuery?.() ?? '');\n }, [dataset.getSearchQuery?.()])\n\n return props.onRenderQuickFind({\n onRenderTextField: (props, defaultRender) => defaultRender(props),\n textFieldProps: {\n value: query,\n placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,\n styles: {\n root: styles.textFieldRoot,\n fieldGroup: styles.fieldGroup\n },\n disabled: dataset.loading,\n onChange: (e, newValue) => setQuery(newValue ?? ''),\n onKeyUp: onKeyUp,\n ...(query ? {\n deleteButtonProps: {\n key: 'delete',\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => onSearch(undefined)\n }\n } : {}),\n suffixItems: [{\n key: 'search',\n iconProps: {\n iconName: 'Search'\n },\n onClick: () => onSearch(query)\n }]\n\n\n }\n }, (props) => {\n return <TextField {...props.textFieldProps} />\n })\n}"],"names":["_jsx"],"mappings":";;;;;;AAOa,MAAA,SAAS,GAAG,CAAC,KAA+E,KAAI;IAC3G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;AAC/C,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC,UAAU,EAAE,CAAC;AACvD,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,eAAe,EAA2B,CAAC;AACxE,IAAA,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;AACjC,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,kBAAkB,EAAE,EAAE,EAAE,CAAC,CAAC;AAEvD,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;AAClC,QAAA,YAAY,CAAC,gCAAgC,CAAC,MAAK;AACjD,YAAA,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;YACtB,OAAO,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC;YACtC,OAAO,CAAC,OAAO,EAAE,CAAC;AACpB,SAAC,CAAC,CAAA;AACJ,KAAC,CAAA;AAED,IAAA,MAAM,OAAO,GAAG,CAAC,CAAwC,KAAI;AAC3D,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;YACrB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACjB,SAAA;AACH,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACb,QAAQ,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;KAC5C,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,CAAA;IAEhC,OAAO,KAAK,CAAC,iBAAiB,CAAC;QAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;AACjE,QAAA,cAAc,EAAE;AACd,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,WAAW,EAAE,CAAG,EAAA,MAAM,CAAC,MAAM,EAAE,IAAI,OAAO,CAAC,WAAW,EAAE,EAAE,qBAAqB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAK,GAAA,CAAA;AACxG,YAAA,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM,CAAC,aAAa;gBAC1B,UAAU,EAAE,MAAM,CAAC,UAAU;AAC9B,aAAA;YACD,QAAQ,EAAE,OAAO,CAAC,OAAO;AACzB,YAAA,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;AACnD,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,IAAI,KAAK,GAAG;AACV,gBAAA,iBAAiB,EAAE;AACjB,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,SAAS,EAAE;AACT,wBAAA,QAAQ,EAAE,QAAQ;AACnB,qBAAA;AACD,oBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,SAAS,CAAC;AACnC,iBAAA;aACF,GAAG,EAAE,CAAC;AACP,YAAA,WAAW,EAAE,CAAC;AACZ,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,SAAS,EAAE;AACT,wBAAA,QAAQ,EAAE,QAAQ;AACnB,qBAAA;AACD,oBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;iBAC/B,CAAC;AAGH,SAAA;KACF,EAAE,CAAC,KAAK,KAAI;AACX,QAAA,OAAOA,IAAC,SAAS,EAAA,EAAA,GAAK,KAAK,CAAC,cAAc,GAAI,CAAA;AAChD,KAAC,CAAC,CAAA;AACJ;;;;"}
1	+ {"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { IRibbonQuickFindWrapperProps } from \"../interfaces\";\nimport { useModel } from \"../useModel\";\nimport { TextField } from \"@talxis/react-components\";\nimport { getQuickFindStyles } from \"./styles\";\nimport { IInternalDataProvider } from \"@talxis/client-libraries\";\nimport { Callout, FontIcon } from \"@fluentui/react\";\nimport { Text } from \"@fluentui/react\";\n\nexport const QuickFind = (props: { onRenderQuickFind: IRibbonQuickFindWrapperProps['onRenderQuickFind'] }) => {\n const [query, setQuery] = useState<string>('');\n const model = useModel();\n const dataset = model.getDatasetControl().getDataset();\n const dataProvider = dataset.getDataProvider() as IInternalDataProvider;\n const labels = model.getLabels();\n const styles = useMemo(() => getQuickFindStyles(), []);\n const id = useMemo(() => `quickfind-${crypto.randomUUID()}`, []);\n const [isCalloutVisible, setIsCalloutVisible] = useState<boolean>(false);\n const quickFindColumns = dataProvider.getQuickFindColumns();\n const isLikeQuery = query.startsWith('*');\n\n const onSearch = (query?: string) => {\n dataProvider.executeWithUnsavedChangesBlocker(() => {\n setQuery(query ?? '');\n dataset.setSearchQuery?.(query ?? '');\n setIsCalloutVisible(false);\n dataset.refresh();\n })\n }\n\n const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter') {\n onSearch(query);\n }\n }\n\n useEffect(() => {\n setQuery(dataset.getSearchQuery?.() ?? '');\n }, [dataset.getSearchQuery?.()])\n\n return props.onRenderQuickFind({\n containerProps: {\n id: id,\n },\n onRenderTextField: (props, defaultRender) => defaultRender(props),\n onRenderCalloutContainer: (props, defaultRender) => defaultRender(props),\n }, (props) => {\n return <div {...props.containerProps}>\n {props.onRenderTextField({\n value: query,\n placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,\n styles: {\n root: styles.textFieldRoot,\n fieldGroup: styles.fieldGroup\n },\n disabled: dataset.loading \|\| quickFindColumns.length === 0,\n onClick: () => setIsCalloutVisible(true),\n onBlur: () => setIsCalloutVisible(false),\n onChange: (e, newValue) => setQuery(newValue ?? ''),\n onKeyUp: onKeyUp,\n ...(query ? {\n deleteButtonProps: {\n key: 'delete',\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => onSearch(undefined)\n }\n } : {}),\n suffixItems: [{\n key: 'search',\n iconProps: {\n iconName: 'Search'\n },\n onClick: () => onSearch(query)\n }]\n }, (props) => {\n return <TextField {...props} />\n })}\n {props.onRenderCalloutContainer({\n style: { position: 'absolute' },\n onRenderCallout: (props, defaultRender) => defaultRender(props),\n isVisible: isCalloutVisible\n }, (props) => {\n if (props.isVisible) {\n const { onRenderCallout, isVisible, ...divProps } = props;\n return <div {...divProps}>\n {onRenderCallout({\n target: `#${id}`,\n isVisible: isCalloutVisible && (quickFindColumns.length > 0 \|\| isLikeQuery),\n calloutMaxWidth: 250,\n isLikeQuery: isLikeQuery,\n styles: {\n calloutMain: styles.calloutMain\n },\n hidden: false,\n onDismiss: () => setIsCalloutVisible(false),\n onRenderLikeOperatorWarning: (props, defaultRender) => defaultRender(props),\n onRenderBegingsWithFilterInfo: (props, defaultRender) => defaultRender(props),\n onRenderColumnsList: (props, defaultRender) => defaultRender(props)\n }, (props) => {\n const { onRenderLikeOperatorWarning, onRenderBegingsWithFilterInfo, onRenderColumnsList, isLikeQuery, ...calloutProps } = props;\n return <Callout {...calloutProps}>\n {props.isLikeQuery &&\n props.onRenderLikeOperatorWarning({}, (props) => {\n return <Text {...props}><FontIcon className={styles.calloutWarningIcon} iconName=\"Warning\" />{labels[\"quickfind-like-warning\"]()}</Text>\n })\n }\n {!props.isLikeQuery && \n props.onRenderBegingsWithFilterInfo({}, (props) => {\n return <Text {...props}>{labels[\"quickfind-search-use-filter\"]()} <span className={styles.calloutBoldText}>{labels[\"quickfind-search-starts-with\"]()}</span> {labels[\"quickfind-search-on-these-columns\"]()}</Text>\n })\n }\n {props.onRenderColumnsList({\n className: styles.calloutColumnsWrapper,\n columns: quickFindColumns,\n onRenderColumnLabel: (props, defaultRender) => defaultRender(props)\n }, (props) => {\n const { onRenderColumnLabel, columns, ...divProps } = props;\n return <div {...divProps}>\n {props.columns.map(col => {\n return props.onRenderColumnLabel({\n key: col.name\n }, (props) => {\n return <Text {...props}><span className={styles.calloutBoldText}>{col.displayName}</span></Text>\n })\n })}\n </div>\n })}\n </Callout>\n })}\n </div>\n }\n else {\n return <></>\n }\n })}\n </div>\n })\n}"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/components/DatasetControl/QuickFind/styles.d.ts CHANGED Viewed

@@ -5,4 +5,20 @@ export declare const getQuickFindStyles: () => import("@fluentui/react").IProces
     fieldGroup: {
         width: number;
     };
+    calloutMain: {
+        padding: number;
+    };
+    calloutBoldText: {
+        fontWeight: number;
+    };
+    calloutColumnsWrapper: {
+        display: string;
+        flexDirection: string;
+        marginTop: number;
+    };
+    calloutWarningIcon: {
+        position: string;
+        top: number;
+        marginRight: number;
+    };
 }>;

package/dist/components/DatasetControl/QuickFind/styles.js CHANGED Viewed

@@ -7,6 +7,22 @@ const getQuickFindStyles = () => {
         },
         fieldGroup: {
             width: 230,
+        },
+        calloutMain: {
+            padding: 8
+        },
+        calloutBoldText: {
+            fontWeight: 600
+        },
+        calloutColumnsWrapper: {
+            display: 'flex',
+            flexDirection: 'column',
+            marginTop: 4
+        },
+        calloutWarningIcon: {
+            position: 'relative',
+            top: 1,
+            marginRight: 4
         }
     });
 };

package/dist/components/DatasetControl/QuickFind/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/QuickFind/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getQuickFindStyles = () => {\n return mergeStyleSets({\n textFieldRoot: {\n marginLeft: 'auto'\n },\n fieldGroup: {\n width: 230,\n }\n })\n}"],"names":[],"mappings":";;AAEO,MAAM,kBAAkB,GAAG,MAAK;AACnC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,aAAa,EAAE;AACX,YAAA,UAAU,EAAE,MAAM;AACrB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,GAAG;AACb,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}
1	+ {"version":3,"file":"styles.js","sources":["../../../../src/components/DatasetControl/QuickFind/styles.ts"],"sourcesContent":["import { mergeStyleSets } from \"@fluentui/react\"\n\nexport const getQuickFindStyles = () => {\n return mergeStyleSets({\n textFieldRoot: {\n marginLeft: 'auto'\n },\n fieldGroup: {\n width: 230,\n },\n calloutMain: {\n padding: 8\n },\n calloutBoldText: {\n fontWeight: 600\n },\n calloutColumnsWrapper: {\n display: 'flex',\n flexDirection: 'column',\n marginTop: 4\n },\n calloutWarningIcon: {\n position: 'relative',\n top: 1,\n marginRight: 4\n }\n })\n}"],"names":[],"mappings":";;AAEO,MAAM,kBAAkB,GAAG,MAAK;AACnC,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,aAAa,EAAE;AACX,YAAA,UAAU,EAAE,MAAM;AACrB,SAAA;AACD,QAAA,UAAU,EAAE;AACR,YAAA,KAAK,EAAE,GAAG;AACb,SAAA;AACD,QAAA,WAAW,EAAE;AACT,YAAA,OAAO,EAAE,CAAC;AACb,SAAA;AACD,QAAA,eAAe,EAAE;AACb,YAAA,UAAU,EAAE,GAAG;AAClB,SAAA;AACD,QAAA,qBAAqB,EAAE;AACnB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,SAAS,EAAE,CAAC;AACf,SAAA;AACD,QAAA,kBAAkB,EAAE;AAChB,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,WAAW,EAAE,CAAC;AACjB,SAAA;AACJ,KAAA,CAAC,CAAA;AACN;;;;"}

package/dist/components/DatasetControl/interfaces.d.ts CHANGED Viewed

@@ -1,14 +1,15 @@
 /// <reference types="@types/powerapps-component-framework" />
-import { IButtonProps, IMessageBarProps, ThemeProviderProps } from "@fluentui/react";
+import { IButtonProps, IMessageBarProps, ITextProps, ThemeProviderProps } from "@fluentui/react";
 import { ITranslation } from "../../hooks";
-import { IControl, IStringProperty } from "../../interfaces";
+import { IControl, IStringProperty, ITwoOptionsProperty } from "../../interfaces";
 import { IGridOutputs, IGridParameters } from "../Grid";
 import { gridTranslations } from "../Grid/translations";
 import { datasetControlTranslations } from "./translations";
-import { ICommandBarProps, ITextFieldProps } from "@talxis/react-components";
+import { ICalloutProps as ICalloutPropsBase, ICommandBarProps, ITextFieldProps } from "@talxis/react-components";
 import React from "react";
 import { IRibbonComponentProps } from "../Ribbon/interfaces";
 import { IDatasetControl } from "../../utils/dataset-control";
+import { IColumn } from "@talxis/client-libraries";
 export interface IDatasetControlProps extends Omit<IControl<IDatasetControlParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps>, 'parameters' | 'context' | 'state'> {
     /**
      * Used to provide the Dataset control instance.
@@ -24,6 +25,7 @@ export interface IDatasetControlProps extends Omit<IControl<IDatasetControlParam
     }) => React.ReactElement<IControl<any, any, any, any>>;
 }
 export interface IDatasetControlParameters extends IGridParameters {
+    EnableEditColumns?: Omit<ITwoOptionsProperty, 'attributes'>;
     ClientApiWebresourceName?: IStringProperty;
     ClientApiFunctionName?: IStringProperty;
 }
@@ -60,6 +62,9 @@ export interface IRibbonQuickFindWrapperProps {
     ribbonQuickFindContainerProps: React.HTMLAttributes<HTMLDivElement>;
     isRibbonVisible: boolean;
     isQuickFindVisible: boolean;
+    isViewSwitcherVisible: boolean;
+    isEditColumnsVisible: boolean;
+    isEditFiltersVisible: boolean;
     onRenderQuickFind: (props: IQuickFindProps, defaultRender: (props: IQuickFindProps) => React.ReactElement) => React.ReactElement;
     onRenderRibbon: IRibbonComponentProps['onRender'];
 }
@@ -72,8 +77,26 @@ interface IUnsavedChangesMesssageBarProps {
     onRenderSaveBtn: (props: IButtonProps, defaultRender: (props: IButtonProps) => React.ReactElement) => React.ReactElement;
     onRenderDiscardBtn: (props: IButtonProps, defaultRender: (props: IButtonProps) => React.ReactElement) => React.ReactElement;
 }
+interface IColumnList extends React.HTMLAttributes<HTMLDivElement> {
+    columns: IColumn[];
+    onRenderColumnLabel: (props: ITextProps & {
+        key: string;
+    }, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+}
+interface ICalloutProps extends ICalloutPropsBase {
+    isVisible: boolean;
+    isLikeQuery: boolean;
+    onRenderLikeOperatorWarning: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+    onRenderBegingsWithFilterInfo: (props: ITextProps, defaultRender: (props: ITextProps) => React.ReactElement) => React.ReactElement;
+    onRenderColumnsList: (props: IColumnList, defaultRender: (props: IColumnList) => React.ReactElement) => React.ReactElement;
+}
+interface ICalloutContainer extends React.HTMLAttributes<HTMLDivElement> {
+    isVisible: boolean;
+    onRenderCallout: (props: ICalloutProps, defaultRender: (props: ICalloutProps) => React.ReactElement) => React.ReactElement;
+}
 export interface IQuickFindProps {
-    textFieldProps: ITextFieldProps;
+    containerProps: React.HTMLAttributes<HTMLDivElement>;
     onRenderTextField: (props: ITextFieldProps, defaultRender: (props: ITextFieldProps) => React.ReactElement) => React.ReactElement;
+    onRenderCalloutContainer: (props: ICalloutContainer, defaultRender: (props: ICalloutContainer) => React.ReactElement) => React.ReactElement;
 }
 export {};

package/dist/components/DatasetControl/translations.d.ts CHANGED Viewed

@@ -7,6 +7,38 @@ export declare const datasetControlTranslations: {
         1029: string;
         1033: string;
     };
+    'no-name': {
+        1029: string;
+        1033: string;
+    };
+    "column-source": {
+        1029: string;
+        1033: string;
+    };
+    "no-result-found": {
+        1029: string;
+        1033: string;
+    };
+    "add-column": {
+        1029: string;
+        1033: string;
+    };
+    cancel: {
+        1029: string;
+        1033: string;
+    };
+    'edit-columns': {
+        1029: string;
+        1033: string;
+    };
+    'edit-filters': {
+        1029: string;
+        1033: string;
+    };
+    save: {
+        1029: string;
+        1033: string;
+    };
     generalError: {
         1029: string;
         1033: string;
@@ -59,4 +91,20 @@ export declare const datasetControlTranslations: {
         1029: string;
         1033: string;
     };
+    "quickfind-like-warning": {
+        1029: string;
+        1033: string;
+    };
+    "quickfind-search-use-filter": {
+        1029: string;
+        1033: string;
+    };
+    "quickfind-search-starts-with": {
+        1029: string;
+        1033: string;
+    };
+    "quickfind-search-on-these-columns": {
+        1029: string;
+        1033: string;
+    };
 };