@bundle-stats/ui 4.12.0-beta.0 → 4.12.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/bundle-modules/bundle-modules.js +8 -8
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib/components/bundle-modules/index.js +17 -2
- package/lib/components/bundle-modules/index.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.js +7 -7
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib-esm/components/bundle-modules/index.js +18 -3
- package/lib-esm/components/bundle-modules/index.js.map +1 -1
- package/package.json +7 -7
- package/src/components/bundle-modules/bundle-modules.tsx +7 -7
- package/src/components/bundle-modules/index.tsx +31 -4
- package/types/components/bundle-modules/index.d.ts +2 -1
|
@@ -32,14 +32,17 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
32
32
|
const utils_1 = require("@bundle-stats/utils");
|
|
33
33
|
const config_json_1 = __importDefault(require("../../config.json"));
|
|
34
34
|
const i18n_1 = __importDefault(require("../../i18n"));
|
|
35
|
-
const
|
|
35
|
+
const box_1 = require("../../layout/box");
|
|
36
36
|
const flex_stack_1 = require("../../layout/flex-stack");
|
|
37
|
-
const
|
|
37
|
+
const button_1 = require("../../ui/button");
|
|
38
38
|
const empty_set_1 = require("../../ui/empty-set");
|
|
39
39
|
const file_name_1 = require("../../ui/file-name");
|
|
40
40
|
const filters_1 = require("../../ui/filters");
|
|
41
|
+
const input_search_1 = require("../../ui/input-search");
|
|
41
42
|
const tag_1 = require("../../ui/tag");
|
|
42
43
|
const toolbar_1 = require("../../ui/toolbar");
|
|
44
|
+
const tooltip_1 = require("../../ui/tooltip");
|
|
45
|
+
const component_link_1 = require("../component-link");
|
|
43
46
|
const metrics_table_1 = require("../metrics-table");
|
|
44
47
|
const metrics_table_options_1 = require("../metrics-table-options");
|
|
45
48
|
const metrics_table_title_1 = require("../metrics-table-title");
|
|
@@ -48,9 +51,6 @@ const bundle_modules_utils_1 = require("./bundle-modules.utils");
|
|
|
48
51
|
const bundle_modules_constants_1 = require("./bundle-modules.constants");
|
|
49
52
|
const I18N_MODULES = __importStar(require("./bundle-modules.i18n"));
|
|
50
53
|
const bundle_modules_module_css_1 = __importDefault(require("./bundle-modules.module.css"));
|
|
51
|
-
const layout_1 = require("../../layout");
|
|
52
|
-
const ui_1 = require("../../ui");
|
|
53
|
-
const tooltip_1 = require("../../ui/tooltip");
|
|
54
54
|
const RowHeader = (props) => {
|
|
55
55
|
const { row, filters, search, customComponentLink: CustomComponentLink } = props;
|
|
56
56
|
return (react_1.default.createElement(CustomComponentLink, { section: utils_1.SECTIONS.MODULES, params: { [utils_1.COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key } }, className: bundle_modules_module_css_1.default.name },
|
|
@@ -78,11 +78,11 @@ const BundleModules = (props) => {
|
|
|
78
78
|
react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxsmall" },
|
|
79
79
|
react_1.default.createElement(input_search_1.InputSearch, { className: bundle_modules_module_css_1.default.toolbarSearch, placeholder: I18N_MODULES.SEARCH, defaultValue: search, onChange: updateSearch }),
|
|
80
80
|
react_1.default.createElement(filters_1.Filters, { className: bundle_modules_module_css_1.default.tableDropdown, filters: filterFieldsData, onChange: updateFilters }))),
|
|
81
|
-
react_1.default.createElement(
|
|
81
|
+
react_1.default.createElement(box_1.Box, { padding: ['xsmall', 'small'], className: bundle_modules_module_css_1.default.metricSelector },
|
|
82
82
|
react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxsmall", as: "nav" },
|
|
83
|
-
react_1.default.createElement(
|
|
83
|
+
react_1.default.createElement(button_1.Button, { outline: true, active: moduleMetric === bundle_modules_constants_1.ModuleMetric.SIZE, size: "small", type: "button", onClick: () => setModuleMetric(bundle_modules_constants_1.ModuleMetric.SIZE) },
|
|
84
84
|
react_1.default.createElement(tooltip_1.Tooltip, { title: "Size (excluding duplicate modules)" }, "Module size")),
|
|
85
|
-
react_1.default.createElement(
|
|
85
|
+
react_1.default.createElement(button_1.Button, { outline: true, active: moduleMetric === bundle_modules_constants_1.ModuleMetric.TOTAL_SIZE, size: "small", type: "button", onClick: () => setModuleMetric(bundle_modules_constants_1.ModuleMetric.TOTAL_SIZE) },
|
|
86
86
|
react_1.default.createElement(tooltip_1.Tooltip, { title: "Size (including duplicate modules)" }, "Module total size")))),
|
|
87
87
|
react_1.default.createElement(metrics_table_1.MetricsTable, { className: bundle_modules_module_css_1.default.table, items: items, runs: jobs, renderRowHeader: renderRowHeader, emptyMessage: emptyMessage, showHeaderSum: true, title: metricsTableTitle, sort: sort, updateSort: updateSort })),
|
|
88
88
|
entryItem && (react_1.default.createElement(module_info_1.ModuleInfo, { className: bundle_modules_module_css_1.default.moduleInfo, item: entryItem, chunks: chunks, chunkIds: chunks?.map(({ id }) => id), labels: jobLabels, customComponentLink: CustomComponentLink, onClose: hideEntryInfo }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bundle-modules.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,4DAA4B;AAC5B,+CAA0D;AAG1D,oEAAuC;AACvC,sDAA8B;AAC9B,
|
|
1
|
+
{"version":3,"file":"bundle-modules.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,9 +32,24 @@ const search_params_1 = require("../../hooks/search-params");
|
|
|
32
32
|
const bundle_modules_1 = require("./bundle-modules");
|
|
33
33
|
const bundle_modules_utils_1 = require("./bundle-modules.utils");
|
|
34
34
|
const bundle_modules_constants_1 = require("./bundle-modules.constants");
|
|
35
|
+
function useModuleMetric(params) {
|
|
36
|
+
const { metric, setState } = params;
|
|
37
|
+
const moduleMetric = (0, react_1.useMemo)(() => {
|
|
38
|
+
if (Object.values(bundle_modules_constants_1.ModuleMetric).includes(metric)) {
|
|
39
|
+
return metric;
|
|
40
|
+
}
|
|
41
|
+
return bundle_modules_constants_1.ModuleMetric.SIZE;
|
|
42
|
+
}, [metric]);
|
|
43
|
+
const setModuleMetric = (0, react_1.useCallback)((newModuleMetric) => {
|
|
44
|
+
if (newModuleMetric !== metric) {
|
|
45
|
+
setState({ metric: newModuleMetric });
|
|
46
|
+
}
|
|
47
|
+
}, [metric, setState]);
|
|
48
|
+
return (0, react_1.useMemo)(() => [moduleMetric, setModuleMetric], [moduleMetric, setModuleMetric]);
|
|
49
|
+
}
|
|
35
50
|
const BundleModules = (props) => {
|
|
36
|
-
const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
|
|
37
|
-
const [moduleMetric, setModuleMetric] = (
|
|
51
|
+
const { jobs, filters, search, setState, sortBy, direction, metric = '', ...restProps } = props;
|
|
52
|
+
const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
|
|
38
53
|
const { chunks, chunkIds } = (0, react_1.useMemo)(() => (0, bundle_modules_utils_1.extractChunkData)(jobs), [jobs]);
|
|
39
54
|
const { defaultFilters, allEntriesFilters } = (0, react_1.useMemo)(() => (0, bundle_modules_utils_1.generateFilters)(chunkIds, jobs.length > 1), [chunkIds, jobs]);
|
|
40
55
|
const searchParams = (0, search_params_1.useSearchParams)({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,14 +3,17 @@ import cx from 'classnames';
|
|
|
3
3
|
import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
|
|
4
4
|
import config from '../../config.json';
|
|
5
5
|
import I18N from '../../i18n';
|
|
6
|
-
import {
|
|
6
|
+
import { Box } from '../../layout/box';
|
|
7
7
|
import { FlexStack } from '../../layout/flex-stack';
|
|
8
|
-
import {
|
|
8
|
+
import { Button } from '../../ui/button';
|
|
9
9
|
import { EmptySet } from '../../ui/empty-set';
|
|
10
10
|
import { FileName } from '../../ui/file-name';
|
|
11
11
|
import { Filters } from '../../ui/filters';
|
|
12
|
+
import { InputSearch } from '../../ui/input-search';
|
|
12
13
|
import { Tag } from '../../ui/tag';
|
|
13
14
|
import { Toolbar } from '../../ui/toolbar';
|
|
15
|
+
import { Tooltip } from '../../ui/tooltip';
|
|
16
|
+
import { ComponentLink } from '../component-link';
|
|
14
17
|
import { MetricsTable } from '../metrics-table';
|
|
15
18
|
import { MetricsTableOptions } from '../metrics-table-options';
|
|
16
19
|
import { MetricsTableTitle } from '../metrics-table-title';
|
|
@@ -19,9 +22,6 @@ import { generateFilterFieldsData } from './bundle-modules.utils';
|
|
|
19
22
|
import { ModuleMetric } from './bundle-modules.constants';
|
|
20
23
|
import * as I18N_MODULES from './bundle-modules.i18n';
|
|
21
24
|
import css from './bundle-modules.module.css';
|
|
22
|
-
import { Box } from '../../layout';
|
|
23
|
-
import { Button } from '../../ui';
|
|
24
|
-
import { Tooltip } from '../../ui/tooltip';
|
|
25
25
|
const RowHeader = (props) => {
|
|
26
26
|
const { row, filters, search, customComponentLink: CustomComponentLink } = props;
|
|
27
27
|
return (React.createElement(CustomComponentLink, { section: SECTIONS.MODULES, params: { [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key } }, className: css.name },
|
|
@@ -51,9 +51,9 @@ export const BundleModules = (props) => {
|
|
|
51
51
|
React.createElement(Filters, { className: css.tableDropdown, filters: filterFieldsData, onChange: updateFilters }))),
|
|
52
52
|
React.createElement(Box, { padding: ['xsmall', 'small'], className: css.metricSelector },
|
|
53
53
|
React.createElement(FlexStack, { space: "xxsmall", as: "nav" },
|
|
54
|
-
React.createElement(Button, { outline: true,
|
|
54
|
+
React.createElement(Button, { outline: true, active: moduleMetric === ModuleMetric.SIZE, size: "small", type: "button", onClick: () => setModuleMetric(ModuleMetric.SIZE) },
|
|
55
55
|
React.createElement(Tooltip, { title: "Size (excluding duplicate modules)" }, "Module size")),
|
|
56
|
-
React.createElement(Button, { outline: true,
|
|
56
|
+
React.createElement(Button, { outline: true, active: moduleMetric === ModuleMetric.TOTAL_SIZE, size: "small", type: "button", onClick: () => setModuleMetric(ModuleMetric.TOTAL_SIZE) },
|
|
57
57
|
React.createElement(Tooltip, { title: "Size (including duplicate modules)" }, "Module total size")))),
|
|
58
58
|
React.createElement(MetricsTable, { className: css.table, items: items, runs: jobs, renderRowHeader: renderRowHeader, emptyMessage: emptyMessage, showHeaderSum: true, title: metricsTableTitle, sort: sort, updateSort: updateSort })),
|
|
59
59
|
entryItem && (React.createElement(ModuleInfo, { className: css.moduleInfo, item: entryItem, chunks: chunks, chunkIds: chunks === null || chunks === void 0 ? void 0 : chunks.map(({ id }) => id), labels: jobLabels, customComponentLink: CustomComponentLink, onClose: hideEntryInfo }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bundle-modules.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAG1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"bundle-modules.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback, useMemo
|
|
1
|
+
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
|
|
3
3
|
import { useRowsFilter } from '../../hooks/rows-filter';
|
|
4
4
|
import { useRowsSort } from '../../hooks/rows-sort';
|
|
@@ -6,9 +6,24 @@ import { useSearchParams } from '../../hooks/search-params';
|
|
|
6
6
|
import { BundleModules as BaseComponent } from './bundle-modules';
|
|
7
7
|
import { addRowFlags, extractChunkData, generateGetRowFilter, generateFilters, getCustomSort, } from './bundle-modules.utils';
|
|
8
8
|
import { ModuleMetric } from './bundle-modules.constants';
|
|
9
|
+
function useModuleMetric(params) {
|
|
10
|
+
const { metric, setState } = params;
|
|
11
|
+
const moduleMetric = useMemo(() => {
|
|
12
|
+
if (Object.values(ModuleMetric).includes(metric)) {
|
|
13
|
+
return metric;
|
|
14
|
+
}
|
|
15
|
+
return ModuleMetric.SIZE;
|
|
16
|
+
}, [metric]);
|
|
17
|
+
const setModuleMetric = useCallback((newModuleMetric) => {
|
|
18
|
+
if (newModuleMetric !== metric) {
|
|
19
|
+
setState({ metric: newModuleMetric });
|
|
20
|
+
}
|
|
21
|
+
}, [metric, setState]);
|
|
22
|
+
return useMemo(() => [moduleMetric, setModuleMetric], [moduleMetric, setModuleMetric]);
|
|
23
|
+
}
|
|
9
24
|
export const BundleModules = (props) => {
|
|
10
|
-
const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
|
|
11
|
-
const [moduleMetric, setModuleMetric] =
|
|
25
|
+
const { jobs, filters, search, setState, sortBy, direction, metric = '', ...restProps } = props;
|
|
26
|
+
const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
|
|
12
27
|
const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
|
|
13
28
|
const { defaultFilters, allEntriesFilters } = useMemo(() => generateFilters(chunkIds, jobs.length > 1), [chunkIds, jobs]);
|
|
14
29
|
const searchParams = useSearchParams({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/index.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.12.0-beta.
|
|
3
|
+
"version": "4.12.0-beta.3",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"@babel/preset-env": "7.23.9",
|
|
40
40
|
"@babel/preset-react": "7.23.3",
|
|
41
41
|
"@babel/preset-typescript": "7.23.3",
|
|
42
|
-
"@storybook/addon-essentials": "7.6.
|
|
43
|
-
"@storybook/react": "7.6.
|
|
44
|
-
"@storybook/react-webpack5": "7.6.
|
|
42
|
+
"@storybook/addon-essentials": "7.6.17",
|
|
43
|
+
"@storybook/react": "7.6.17",
|
|
44
|
+
"@storybook/react-webpack5": "7.6.17",
|
|
45
45
|
"@types/react": "18.2.57",
|
|
46
46
|
"@types/react-router-dom": "5.3.3",
|
|
47
47
|
"babel-plugin-require-context-hook": "1.0.0",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"react-dom": "18.2.0",
|
|
60
60
|
"react-router-dom": "5.3.4",
|
|
61
61
|
"rimraf": "5.0.5",
|
|
62
|
-
"storybook": "7.6.
|
|
62
|
+
"storybook": "7.6.17",
|
|
63
63
|
"typescript": "5.1.6",
|
|
64
64
|
"typescript-plugin-css-modules": "5.1.0"
|
|
65
65
|
},
|
|
@@ -72,10 +72,10 @@
|
|
|
72
72
|
"react-router-dom": "^5.0.0"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@bundle-stats/utils": "
|
|
75
|
+
"@bundle-stats/utils": "4.12.0-beta.3",
|
|
76
76
|
"ariakit": "2.0.0-next.44",
|
|
77
77
|
"modern-css-reset": "1.4.0",
|
|
78
78
|
"use-query-params": "2.2.1"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "61bc096ebaece8905a04bd5b1df3d12d7fccde98"
|
|
81
81
|
}
|
|
@@ -5,14 +5,17 @@ import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
|
|
|
5
5
|
import type { SortAction } from '../../types';
|
|
6
6
|
import config from '../../config.json';
|
|
7
7
|
import I18N from '../../i18n';
|
|
8
|
-
import {
|
|
8
|
+
import { Box } from '../../layout/box';
|
|
9
9
|
import { FlexStack } from '../../layout/flex-stack';
|
|
10
|
-
import {
|
|
10
|
+
import { Button } from '../../ui/button';
|
|
11
11
|
import { EmptySet } from '../../ui/empty-set';
|
|
12
12
|
import { FileName } from '../../ui/file-name';
|
|
13
13
|
import { Filters } from '../../ui/filters';
|
|
14
|
+
import { InputSearch } from '../../ui/input-search';
|
|
14
15
|
import { Tag } from '../../ui/tag';
|
|
15
16
|
import { Toolbar } from '../../ui/toolbar';
|
|
17
|
+
import { Tooltip } from '../../ui/tooltip';
|
|
18
|
+
import { ComponentLink } from '../component-link';
|
|
16
19
|
import { MetricsTable } from '../metrics-table';
|
|
17
20
|
import { MetricsTableOptions } from '../metrics-table-options';
|
|
18
21
|
import { MetricsTableTitle } from '../metrics-table-title';
|
|
@@ -22,9 +25,6 @@ import { ModuleMetric } from './bundle-modules.constants';
|
|
|
22
25
|
import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
|
|
23
26
|
import * as I18N_MODULES from './bundle-modules.i18n';
|
|
24
27
|
import css from './bundle-modules.module.css';
|
|
25
|
-
import { Box } from '../../layout';
|
|
26
|
-
import { Button } from '../../ui';
|
|
27
|
-
import { Tooltip } from '../../ui/tooltip';
|
|
28
28
|
|
|
29
29
|
interface RowHeaderProps {
|
|
30
30
|
row: ReportMetricModuleRow;
|
|
@@ -185,7 +185,7 @@ export const BundleModules = (props: BundleModulesProps) => {
|
|
|
185
185
|
<FlexStack space="xxsmall" as="nav">
|
|
186
186
|
<Button
|
|
187
187
|
outline
|
|
188
|
-
|
|
188
|
+
active={moduleMetric === ModuleMetric.SIZE}
|
|
189
189
|
size="small"
|
|
190
190
|
type="button"
|
|
191
191
|
onClick={() => setModuleMetric(ModuleMetric.SIZE)}
|
|
@@ -194,7 +194,7 @@ export const BundleModules = (props: BundleModulesProps) => {
|
|
|
194
194
|
</Button>
|
|
195
195
|
<Button
|
|
196
196
|
outline
|
|
197
|
-
|
|
197
|
+
active={moduleMetric === ModuleMetric.TOTAL_SIZE}
|
|
198
198
|
size="small"
|
|
199
199
|
type="button"
|
|
200
200
|
onClick={() => setModuleMetric(ModuleMetric.TOTAL_SIZE)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback, useMemo
|
|
1
|
+
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
// @ts-ignore
|
|
3
3
|
import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
|
|
4
4
|
|
|
@@ -17,6 +17,33 @@ import {
|
|
|
17
17
|
import { ModuleMetric } from './bundle-modules.constants';
|
|
18
18
|
import * as types from './bundle-modules.types';
|
|
19
19
|
|
|
20
|
+
interface UseMetricParams {
|
|
21
|
+
metric?: string;
|
|
22
|
+
setState: ({ metric }: { metric: ModuleMetric }) => void;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function useModuleMetric(params: UseMetricParams): [ModuleMetric, (value: ModuleMetric) => void] {
|
|
26
|
+
const { metric, setState } = params;
|
|
27
|
+
|
|
28
|
+
const moduleMetric: ModuleMetric = useMemo(() => {
|
|
29
|
+
if (Object.values(ModuleMetric).includes(metric as ModuleMetric)) {
|
|
30
|
+
return metric as ModuleMetric;
|
|
31
|
+
}
|
|
32
|
+
return ModuleMetric.SIZE;
|
|
33
|
+
}, [metric]);
|
|
34
|
+
|
|
35
|
+
const setModuleMetric = useCallback(
|
|
36
|
+
(newModuleMetric: ModuleMetric) => {
|
|
37
|
+
if (newModuleMetric !== metric) {
|
|
38
|
+
setState({ metric: newModuleMetric });
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
[metric, setState],
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
return useMemo(() => [moduleMetric, setModuleMetric], [moduleMetric, setModuleMetric]);
|
|
45
|
+
}
|
|
46
|
+
|
|
20
47
|
interface BundleModulesProps
|
|
21
48
|
extends Omit<
|
|
22
49
|
React.ComponentProps<typeof BaseComponent>,
|
|
@@ -31,7 +58,6 @@ interface BundleModulesProps
|
|
|
31
58
|
| 'updateSort'
|
|
32
59
|
| 'search'
|
|
33
60
|
| 'updateSearch'
|
|
34
|
-
| 'entryId'
|
|
35
61
|
| 'allItems'
|
|
36
62
|
| 'totalRowCount'
|
|
37
63
|
| 'hideEntryInfo'
|
|
@@ -39,15 +65,16 @@ interface BundleModulesProps
|
|
|
39
65
|
jobs: Array<types.Job>;
|
|
40
66
|
filters: Record<string, boolean>;
|
|
41
67
|
search?: string;
|
|
68
|
+
metric?: string;
|
|
42
69
|
setState: (params: any) => void;
|
|
43
70
|
sortBy?: string;
|
|
44
71
|
direction?: SortAction['direction'];
|
|
45
72
|
}
|
|
46
73
|
|
|
47
74
|
export const BundleModules = (props: BundleModulesProps) => {
|
|
48
|
-
const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
|
|
75
|
+
const { jobs, filters, search, setState, sortBy, direction, metric = '', ...restProps } = props;
|
|
49
76
|
|
|
50
|
-
const [moduleMetric, setModuleMetric] =
|
|
77
|
+
const [moduleMetric, setModuleMetric] = useModuleMetric({ metric, setState });
|
|
51
78
|
|
|
52
79
|
const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
|
|
53
80
|
|
|
@@ -2,10 +2,11 @@ import React from 'react';
|
|
|
2
2
|
import type { SortAction } from '../../types';
|
|
3
3
|
import { BundleModules as BaseComponent } from './bundle-modules';
|
|
4
4
|
import * as types from './bundle-modules.types';
|
|
5
|
-
interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | '
|
|
5
|
+
interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo'> {
|
|
6
6
|
jobs: Array<types.Job>;
|
|
7
7
|
filters: Record<string, boolean>;
|
|
8
8
|
search?: string;
|
|
9
|
+
metric?: string;
|
|
9
10
|
setState: (params: any) => void;
|
|
10
11
|
sortBy?: string;
|
|
11
12
|
direction?: SortAction['direction'];
|