@talxis/base-controls 1.2503.11 → 1.2503.12
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/DatasetControl/DatasetControl.js +1 -1
- package/dist/components/DatasetControl/DatasetControl.js.map +1 -1
- package/dist/components/DatasetControl/QuickFind/QuickFind.d.ts +6 -4
- package/dist/components/DatasetControl/QuickFind/QuickFind.js +31 -24
- package/dist/components/DatasetControl/QuickFind/QuickFind.js.map +1 -1
- package/dist/components/DatasetControl/interfaces.d.ts +5 -1
- package/dist/index.d.ts +6 -2
- package/package.json +1 -1
|
@@ -53,7 +53,7 @@ const DatasetControl = (props) => {
|
|
|
53
53
|
}, []);
|
|
54
54
|
return (jsxs(ThemeProvider, { ...componentProps.containerProps, children: [jsx("div", { ...componentProps.headerProps.headerContainerProps, children: componentProps.headerProps.onRender(() => {
|
|
55
55
|
return jsx(Fragment, { children: props.parameters.EnableQuickFind?.raw &&
|
|
56
|
-
jsx(QuickFind, { dataset: dataset, labels: labels, onGetQuickFindComponentProps: (props) => componentProps.headerProps.onGetQuickFindProps(props) }) });
|
|
56
|
+
jsx(QuickFind, { dataset: dataset, labels: labels, theme: theme, onGetQuickFindComponentProps: (props) => componentProps.headerProps.onGetQuickFindProps(props) }) });
|
|
57
57
|
}) }), jsx(ErrorBoundary, { fallback: (resetError) => { renderErrorMessageBar(() => resetError()); }, children: jsx(Grid, { ...props, onOverrideComponentProps: (props) => props, context: injectedContextRef.current }) })] }));
|
|
58
58
|
};
|
|
59
59
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { MessageBar, MessageBarButton, MessageBarType, ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { useRerender } from \"@talxis/react-components\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n const rerender = useRerender();\n const dataset = props.parameters.Grid;\n const injectedContextRef = useRef(props.context);\n const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n //@ts-ignore - private property\n dataset._setRenderer(() => rerender());\n\n //we need to have a way to customize the init behavior from above\n const componentProps = onOverrideComponentProps({\n onDatasetInit: () => {\n if (dataset.paging.pageNumber > 1) {\n dataset.paging.loadExactPage(dataset.paging.pageNumber)\n }\n else {\n dataset.refresh();\n }\n },\n containerProps: {\n theme: theme,\n className: styles.datasetControlRoot,\n },\n headerProps: {\n headerContainerProps: {},\n onRender: (renderQuickFind) => renderQuickFind(),\n onGetQuickFindProps: (props) => props\n },\n });\n\n const renderErrorMessageBar = (onReset?: () => void) => {\n <MessageBar\n isMultiline={false}\n actions={<MessageBarButton className={styles.messageBarBtn} text={labels.reload()} onClick={() => {\n onReset?.();\n dataset.refresh();\n }} />}\n messageBarType={MessageBarType.error}>\n {dataset.errorMessage || labels.generalError()}\n </MessageBar>\n }\n\n useMemo(() => {\n //@ts-ignore - private property\n injectedContextRef.current = dataset._patchContext(props.context);\n }, [props.context]);\n\n useMemo(() => {\n componentProps.onDatasetInit();\n }, []);\n\n\n return (\n <ThemeProvider {...componentProps.containerProps}>\n <div {...componentProps.headerProps.headerContainerProps}>\n {componentProps.headerProps.onRender(() => {\n return <>\n {props.parameters.EnableQuickFind?.raw &&\n <QuickFind dataset={dataset} labels={labels} onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n }\n </>\n })}\n </div>\n <ErrorBoundary fallback={(resetError: () => void) => { renderErrorMessageBar(() => resetError()) }}>\n <Grid\n {...props}\n onOverrideComponentProps={(props) => props}\n context={injectedContextRef.current} />\n </ErrorBoundary>\n </ThemeProvider>\n )\n}"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAWa,MAAA,cAAc,GAAG,CAAC,KAAsB,KAAI;AACvD,IAAA,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,gBAAgB,EAAE,KAAK,EAAE,0BAA0B,CAAC,CAAC;AAC1F,IAAA,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;AAC/B,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IACtC,MAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,uBAAuB,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;AAC/F,IAAA,MAAM,wBAAwB,GAAG,KAAK,CAAC,wBAAwB,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;;IAEtF,OAAO,CAAC,YAAY,CAAC,MAAM,QAAQ,EAAE,CAAC,CAAC;;IAGvC,MAAM,cAAc,GAAG,wBAAwB,CAAC;QAC9C,aAAa,EAAE,MAAK;AAClB,YAAA,IAAI,OAAO,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,EAAE;gBACjC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;AACxD,aAAA;AACI,iBAAA;gBACH,OAAO,CAAC,OAAO,EAAE,CAAC;AACnB,aAAA;SACF;AACD,QAAA,cAAc,EAAE;AACd,YAAA,KAAK,EAAE,KAAK;YACZ,SAAS,EAAE,MAAM,CAAC,kBAAkB;AACrC,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,oBAAoB,EAAE,EAAE;AACxB,YAAA,QAAQ,EAAE,CAAC,eAAe,KAAK,eAAe,EAAE;AAChD,YAAA,mBAAmB,EAAE,CAAC,KAAK,KAAK,KAAK;AACtC,SAAA;AACF,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,qBAAqB,GAAG,CAAC,OAAoB,KAAI;QACrDA,GAAC,CAAA,UAAU,EACT,EAAA,WAAW,EAAE,KAAK,EAClB,OAAO,EAAEA,GAAA,CAAC,gBAAgB,EAAA,EAAC,SAAS,EAAE,MAAM,CAAC,aAAa,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,MAAK;oBAC/F,OAAO,IAAI,CAAC;oBACZ,OAAO,CAAC,OAAO,EAAE,CAAC;AACpB,iBAAC,GAAI,EACL,cAAc,EAAE,cAAc,CAAC,KAAK,EAAA,QAAA,EACnC,OAAO,CAAC,YAAY,IAAI,MAAM,CAAC,YAAY,EAAE,GACnC,CAAA;AACf,KAAC,CAAA;IAED,OAAO,CAAC,MAAK;;QAEX,kBAAkB,CAAC,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AACpE,KAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAEpB,OAAO,CAAC,MAAK;QACX,cAAc,CAAC,aAAa,EAAE,CAAC;KAChC,EAAE,EAAE,CAAC,CAAC;IAGP,QACEC,KAAC,aAAa,EAAA,EAAA,GAAK,cAAc,CAAC,cAAc,EAC9C,QAAA,EAAA,CAAAD,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,cAAc,CAAC,WAAW,CAAC,oBAAoB,YACrD,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,MAAK;AACxC,oBAAA,OAAOA,0BACJ,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,GAAG;
|
|
1
|
+
{"version":3,"file":"DatasetControl.js","sources":["../../../src/components/DatasetControl/DatasetControl.tsx"],"sourcesContent":["import { useMemo, useRef } from \"react\";\nimport { Grid } from \"../Grid\";\nimport { useControl } from \"../../hooks\";\nimport { MessageBar, MessageBarButton, MessageBarType, ThemeProvider } from \"@fluentui/react\";\nimport { datasetControlTranslations } from \"./translations\";\nimport { getDatasetControlStyles } from \"./styles\";\nimport { IDatasetControl } from \"./interfaces\";\nimport { QuickFind } from \"./QuickFind/QuickFind\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport { useRerender } from \"@talxis/react-components\";\n\nexport const DatasetControl = (props: IDatasetControl) => {\n const { labels, theme } = useControl('DatasetControl', props, datasetControlTranslations);\n const rerender = useRerender();\n const dataset = props.parameters.Grid;\n const injectedContextRef = useRef(props.context);\n const styles = useMemo(() => getDatasetControlStyles(theme, props.parameters.Height?.raw), []);\n const onOverrideComponentProps = props.onOverrideComponentProps ?? ((props) => props);\n //@ts-ignore - private property\n dataset._setRenderer(() => rerender());\n\n //we need to have a way to customize the init behavior from above\n const componentProps = onOverrideComponentProps({\n onDatasetInit: () => {\n if (dataset.paging.pageNumber > 1) {\n dataset.paging.loadExactPage(dataset.paging.pageNumber)\n }\n else {\n dataset.refresh();\n }\n },\n containerProps: {\n theme: theme,\n className: styles.datasetControlRoot,\n },\n headerProps: {\n headerContainerProps: {},\n onRender: (renderQuickFind) => renderQuickFind(),\n onGetQuickFindProps: (props) => props\n },\n });\n\n const renderErrorMessageBar = (onReset?: () => void) => {\n <MessageBar\n isMultiline={false}\n actions={<MessageBarButton className={styles.messageBarBtn} text={labels.reload()} onClick={() => {\n onReset?.();\n dataset.refresh();\n }} />}\n messageBarType={MessageBarType.error}>\n {dataset.errorMessage || labels.generalError()}\n </MessageBar>\n }\n\n useMemo(() => {\n //@ts-ignore - private property\n injectedContextRef.current = dataset._patchContext(props.context);\n }, [props.context]);\n\n useMemo(() => {\n componentProps.onDatasetInit();\n }, []);\n\n\n return (\n <ThemeProvider {...componentProps.containerProps}>\n <div {...componentProps.headerProps.headerContainerProps}>\n {componentProps.headerProps.onRender(() => {\n return <>\n {props.parameters.EnableQuickFind?.raw &&\n <QuickFind \n dataset={dataset} \n labels={labels} \n theme={theme}\n onGetQuickFindComponentProps={(props) => componentProps.headerProps.onGetQuickFindProps(props)} />\n }\n </>\n })}\n </div>\n <ErrorBoundary fallback={(resetError: () => void) => { renderErrorMessageBar(() => resetError()) }}>\n <Grid\n {...props}\n onOverrideComponentProps={(props) => props}\n context={injectedContextRef.current} />\n </ErrorBoundary>\n </ThemeProvider>\n )\n}"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { IDataset } from "@talxis/client-libraries";
|
|
3
|
-
import {
|
|
3
|
+
import { ITheme } from "@talxis/react-components";
|
|
4
4
|
import { datasetControlTranslations } from "../translations";
|
|
5
5
|
import { ITranslation } from "../../../hooks";
|
|
6
|
-
|
|
6
|
+
import { IQuickFindProps } from "../interfaces";
|
|
7
|
+
export interface IQuickFindComponentProps {
|
|
7
8
|
labels: ITranslation<typeof datasetControlTranslations>;
|
|
8
9
|
dataset: IDataset;
|
|
9
|
-
|
|
10
|
+
theme: ITheme;
|
|
11
|
+
onGetQuickFindComponentProps: (props: IQuickFindProps) => IQuickFindProps;
|
|
10
12
|
}
|
|
11
|
-
export declare const QuickFind: (props:
|
|
13
|
+
export declare const QuickFind: (props: IQuickFindComponentProps) => JSX.Element;
|
|
@@ -1,36 +1,42 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { TextField } from '@talxis/react-components';
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
|
+
import { ThemeProvider } from '@fluentui/react';
|
|
4
5
|
|
|
5
6
|
const QuickFind = (props) => {
|
|
6
|
-
const { dataset, labels } = { ...props };
|
|
7
|
+
const { dataset, labels, theme } = { ...props };
|
|
7
8
|
const [query, setQuery] = useState('');
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
onChange: (e, newValue) => setQuery(newValue ?? ''),
|
|
12
|
-
onKeyUp: (e) => {
|
|
13
|
-
if (e.key === 'Enter') {
|
|
14
|
-
onSearch(query);
|
|
15
|
-
}
|
|
9
|
+
const quickFindProps = props.onGetQuickFindComponentProps({
|
|
10
|
+
container: {
|
|
11
|
+
theme: theme
|
|
16
12
|
},
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
textFieldProps: {
|
|
14
|
+
value: query,
|
|
15
|
+
placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,
|
|
16
|
+
onChange: (e, newValue) => setQuery(newValue ?? ''),
|
|
17
|
+
onKeyUp: (e) => {
|
|
18
|
+
if (e.key === 'Enter') {
|
|
19
|
+
onSearch(query);
|
|
20
|
+
}
|
|
21
21
|
},
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
onSearch(undefined);
|
|
25
|
-
}
|
|
26
|
-
} : undefined,
|
|
27
|
-
suffixItems: [{
|
|
28
|
-
key: 'search',
|
|
22
|
+
deleteButtonProps: query ? {
|
|
23
|
+
key: 'delete',
|
|
29
24
|
iconProps: {
|
|
30
|
-
iconName: '
|
|
25
|
+
iconName: 'Cancel'
|
|
31
26
|
},
|
|
32
|
-
onClick: () =>
|
|
33
|
-
|
|
27
|
+
onClick: () => {
|
|
28
|
+
setQuery("");
|
|
29
|
+
onSearch(undefined);
|
|
30
|
+
}
|
|
31
|
+
} : undefined,
|
|
32
|
+
suffixItems: [{
|
|
33
|
+
key: 'search',
|
|
34
|
+
iconProps: {
|
|
35
|
+
iconName: 'Search'
|
|
36
|
+
},
|
|
37
|
+
onClick: () => onSearch(query)
|
|
38
|
+
}]
|
|
39
|
+
}
|
|
34
40
|
});
|
|
35
41
|
const onSearch = (query) => {
|
|
36
42
|
dataset.setSearchQuery?.(query ?? "");
|
|
@@ -39,7 +45,8 @@ const QuickFind = (props) => {
|
|
|
39
45
|
useEffect(() => {
|
|
40
46
|
setQuery(dataset.getSearchQuery?.() ?? '');
|
|
41
47
|
}, [dataset.getSearchQuery?.()]);
|
|
42
|
-
|
|
48
|
+
//needs to be wrapped within ThemeProvider because the theme context can be lost if we are overriding the header render
|
|
49
|
+
return jsx(ThemeProvider, { ...quickFindProps.container, children: jsx(TextField, { ...quickFindProps.textFieldProps }) });
|
|
43
50
|
};
|
|
44
51
|
|
|
45
52
|
export { QuickFind };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { ITextFieldProps, TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { useEffect, useState } from \"react\";\n\nexport interface
|
|
1
|
+
{"version":3,"file":"QuickFind.js","sources":["../../../../src/components/DatasetControl/QuickFind/QuickFind.tsx"],"sourcesContent":["import { IDataset } from \"@talxis/client-libraries\";\nimport { ITextFieldProps, ITheme, TextField } from \"@talxis/react-components\";\nimport { datasetControlTranslations } from \"../translations\";\nimport { ITranslation } from \"../../../hooks\";\nimport { useEffect, useState } from \"react\";\nimport { ThemeProvider } from \"@fluentui/react\";\nimport { IQuickFindProps } from \"../interfaces\";\n\nexport interface IQuickFindComponentProps {\n labels: ITranslation<typeof datasetControlTranslations>\n dataset: IDataset;\n theme: ITheme;\n onGetQuickFindComponentProps: (props: IQuickFindProps) => IQuickFindProps;\n}\n\nexport const QuickFind = (props: IQuickFindComponentProps) => {\n const { dataset, labels, theme } = { ...props };\n const [query, setQuery] = useState<string>('');\n\n const quickFindProps = props.onGetQuickFindComponentProps({\n container: {\n theme: theme\n },\n textFieldProps: {\n value: query,\n placeholder: `${labels.search()} ${dataset.getMetadata()?.DisplayCollectionName ?? labels.records()}...`,\n onChange: (e, newValue) => setQuery(newValue ?? ''),\n onKeyUp: (e) => {\n if (e.key === 'Enter') {\n onSearch(query);\n }\n },\n deleteButtonProps: query ? {\n key: 'delete',\n iconProps: {\n iconName: 'Cancel'\n },\n onClick: () => {\n setQuery(\"\");\n onSearch(undefined);\n }\n } : undefined,\n suffixItems: [{\n key: 'search',\n iconProps: {\n iconName: 'Search'\n },\n onClick: () => onSearch(query)\n }]\n }\n })\n const onSearch = (query?: string) => {\n dataset.setSearchQuery?.(query ?? \"\");\n dataset.refresh();\n }\n\n useEffect(() => {\n setQuery(dataset.getSearchQuery?.() ?? '');\n }, [dataset.getSearchQuery?.()])\n //needs to be wrapped within ThemeProvider because the theme context can be lost if we are overriding the header render\n return <ThemeProvider {...quickFindProps.container}><TextField {...quickFindProps.textFieldProps} /></ThemeProvider>\n}"],"names":["_jsx"],"mappings":";;;;;AAea,MAAA,SAAS,GAAG,CAAC,KAA+B,KAAI;AACzD,IAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,CAAC;IAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;AAE/C,IAAA,MAAM,cAAc,GAAG,KAAK,CAAC,4BAA4B,CAAC;AACtD,QAAA,SAAS,EAAE;AACP,YAAA,KAAK,EAAE,KAAK;AACf,SAAA;AACD,QAAA,cAAc,EAAE;AACZ,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,QAAQ,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC;AACnD,YAAA,OAAO,EAAE,CAAC,CAAC,KAAI;AACX,gBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;AACnB,iBAAA;aACJ;AACD,YAAA,iBAAiB,EAAE,KAAK,GAAG;AACvB,gBAAA,GAAG,EAAE,QAAQ;AACb,gBAAA,SAAS,EAAE;AACP,oBAAA,QAAQ,EAAE,QAAQ;AACrB,iBAAA;gBACD,OAAO,EAAE,MAAK;oBACV,QAAQ,CAAC,EAAE,CAAC,CAAC;oBACb,QAAQ,CAAC,SAAS,CAAC,CAAC;iBACvB;aACJ,GAAG,SAAS;AACb,YAAA,WAAW,EAAE,CAAC;AACV,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,SAAS,EAAE;AACP,wBAAA,QAAQ,EAAE,QAAQ;AACrB,qBAAA;AACD,oBAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC;iBACjC,CAAC;AACL,SAAA;AACJ,KAAA,CAAC,CAAA;AACF,IAAA,MAAM,QAAQ,GAAG,CAAC,KAAc,KAAI;QAChC,OAAO,CAAC,cAAc,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC;QACtC,OAAO,CAAC,OAAO,EAAE,CAAC;AACtB,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;QACX,QAAQ,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,EAAE,CAAC,CAAC;KAC9C,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,CAAC,CAAC,CAAA;;AAEhC,IAAA,OAAOA,GAAC,CAAA,aAAa,EAAK,EAAA,GAAA,cAAc,CAAC,SAAS,EAAA,QAAA,EAAEA,GAAC,CAAA,SAAS,OAAK,cAAc,CAAC,cAAc,EAAA,CAAI,GAAgB,CAAA;AACxH;;;;"}
|
|
@@ -6,13 +6,17 @@ import { IGridOutputs, IGridParameters } from "../Grid";
|
|
|
6
6
|
import { gridTranslations } from "../Grid/translations";
|
|
7
7
|
import { datasetControlTranslations } from "./translations";
|
|
8
8
|
import { ITextFieldProps } from "@talxis/react-components";
|
|
9
|
+
export interface IQuickFindProps {
|
|
10
|
+
textFieldProps: ITextFieldProps;
|
|
11
|
+
container: ThemeProviderProps;
|
|
12
|
+
}
|
|
9
13
|
export interface IDatasetControlComponentProps {
|
|
10
14
|
onDatasetInit: () => void;
|
|
11
15
|
containerProps: ThemeProviderProps;
|
|
12
16
|
headerProps: {
|
|
13
17
|
headerContainerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
14
18
|
onRender: (renderQuickFind: () => React.ReactElement) => React.ReactElement;
|
|
15
|
-
onGetQuickFindProps: (props:
|
|
19
|
+
onGetQuickFindProps: (props: IQuickFindProps) => IQuickFindProps;
|
|
16
20
|
};
|
|
17
21
|
}
|
|
18
22
|
export interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps> {
|
package/dist/index.d.ts
CHANGED
|
@@ -647,13 +647,17 @@ declare const datasetControlTranslations: {
|
|
|
647
647
|
};
|
|
648
648
|
};
|
|
649
649
|
|
|
650
|
+
interface IQuickFindProps {
|
|
651
|
+
textFieldProps: ITextFieldProps;
|
|
652
|
+
container: ThemeProviderProps;
|
|
653
|
+
}
|
|
650
654
|
interface IDatasetControlComponentProps {
|
|
651
655
|
onDatasetInit: () => void;
|
|
652
656
|
containerProps: ThemeProviderProps;
|
|
653
657
|
headerProps: {
|
|
654
658
|
headerContainerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
655
659
|
onRender: (renderQuickFind: () => React.ReactElement) => React.ReactElement;
|
|
656
|
-
onGetQuickFindProps: (props:
|
|
660
|
+
onGetQuickFindProps: (props: IQuickFindProps) => IQuickFindProps;
|
|
657
661
|
};
|
|
658
662
|
}
|
|
659
663
|
interface IDatasetControl extends IControl<IGridParameters, IGridOutputs, Partial<ITranslation<typeof datasetControlTranslations & typeof gridTranslations>>, IDatasetControlComponentProps> {
|
|
@@ -1236,4 +1240,4 @@ interface IDurationOutputs extends IOutputs$1 {
|
|
|
1236
1240
|
|
|
1237
1241
|
declare const Duration: (props: IDuration) => JSX.Element;
|
|
1238
1242
|
|
|
1239
|
-
export { BaseControl, BaseControls, ControlTheme, DatasetControl, DateTime, Decimal, Duration, Grid, GridCellRenderer, IContext, IControl, IControlController, IDatasetControl, IDatasetControlComponentProps, IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeProperty, IDecimal, IDecimalNumberProperty, IDecimalOutputs, IDecimalParameters, IDefaultTranslations, IDuration, IDurationOutputs, IDurationParameters, IEntity, IFileProperty, IFluentDesignState, IGrid, IGridOutputs, IGridParameters, ILayout, ILookup, ILookupOutputs, ILookupParameters, ILookupProperty, IMetadata, IMultiSelectOptionSet, IMultiSelectOptionSetOutputs, IMultiSelectOptionSetParameters, IMultiSelectOptionSetProperty, IOptionSet, IOptionSetOutputs, IOptionSetParameters, IOptionSetProperty, IOutputs, IParameters$1 as IParameters, IProperty, IStringProperty, ITextField, ITextFieldOutputs, ITextFieldParameters, ITranslation, ITranslations, ITwoOptions, ITwoOptionsOutputs, ITwoOptionsParameters, ITwoOptionsProperty, IWholeNumberProperty, Lookup, MultiSelectOptionSet, NestedControlRenderer, OptionSet, TextField, ThemeWrapper, TwoOptions, useControl, useControlLabels, useControlSizing, useControlTheme, useControlThemeGenerator, useDateTime, useFocusIn, useInputBasedControl, useLookup, useMouseOver };
|
|
1243
|
+
export { BaseControl, BaseControls, ControlTheme, DatasetControl, DateTime, Decimal, Duration, Grid, GridCellRenderer, IContext, IControl, IControlController, IDatasetControl, IDatasetControlComponentProps, IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeProperty, IDecimal, IDecimalNumberProperty, IDecimalOutputs, IDecimalParameters, IDefaultTranslations, IDuration, IDurationOutputs, IDurationParameters, IEntity, IFileProperty, IFluentDesignState, IGrid, IGridOutputs, IGridParameters, ILayout, ILookup, ILookupOutputs, ILookupParameters, ILookupProperty, IMetadata, IMultiSelectOptionSet, IMultiSelectOptionSetOutputs, IMultiSelectOptionSetParameters, IMultiSelectOptionSetProperty, IOptionSet, IOptionSetOutputs, IOptionSetParameters, IOptionSetProperty, IOutputs, IParameters$1 as IParameters, IProperty, IQuickFindProps, IStringProperty, ITextField, ITextFieldOutputs, ITextFieldParameters, ITranslation, ITranslations, ITwoOptions, ITwoOptionsOutputs, ITwoOptionsParameters, ITwoOptionsProperty, IWholeNumberProperty, Lookup, MultiSelectOptionSet, NestedControlRenderer, OptionSet, TextField, ThemeWrapper, TwoOptions, useControl, useControlLabels, useControlSizing, useControlTheme, useControlThemeGenerator, useDateTime, useFocusIn, useInputBasedControl, useLookup, useMouseOver };
|
package/package.json
CHANGED