@bundle-stats/ui 4.4.2 → 4.5.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/assets/icons.svg +16 -10
- package/lib/assets/icons.svg.js +14 -10
- package/lib/assets/icons.svg.js.map +1 -1
- package/lib/components/bundle-assets/bundle-assets.js +2 -10
- package/lib/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib/components/bundle-assets/bundle-assets.utils.js +8 -20
- package/lib/components/bundle-assets/bundle-assets.utils.js.map +1 -1
- package/lib/components/bundle-assets/index.js +0 -2
- package/lib/components/bundle-assets/index.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.js +2 -10
- package/lib/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib/components/bundle-modules/bundle-modules.utils.js +1 -13
- package/lib/components/bundle-modules/bundle-modules.utils.js.map +1 -1
- package/lib/components/bundle-modules/index.js +2 -4
- package/lib/components/bundle-modules/index.js.map +1 -1
- package/lib/components/bundle-packages/bundle-packages.js +2 -10
- package/lib/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib/components/bundle-packages/bundle-packages.utils.js +1 -13
- package/lib/components/bundle-packages/bundle-packages.utils.js.map +1 -1
- package/lib/components/bundle-packages/index.js +2 -4
- package/lib/components/bundle-packages/index.js.map +1 -1
- package/lib/components/entry-info/entry-info.js +5 -6
- package/lib/components/entry-info/entry-info.js.map +1 -1
- package/lib/components/entry-info/entry-info.module.css +4 -6
- package/lib/components/metrics-table/metrics-table.js +41 -104
- package/lib/components/metrics-table/metrics-table.js.map +1 -1
- package/lib/components/metrics-table/metrics-table.module.css +10 -15
- package/lib/components/metrics-table-title/metrics-table-title.js +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.js.map +1 -1
- package/lib/components/metrics-table-title/metrics-table-title.module.css +3 -1
- package/lib/components/run-info/run-info.js +7 -3
- package/lib/components/run-info/run-info.js.map +1 -1
- package/lib/{ui/sort-dropdown → components/sort-button}/index.js +1 -1
- package/lib/components/sort-button/index.js.map +1 -0
- package/lib/components/sort-button/sort-button.js +73 -0
- package/lib/components/sort-button/sort-button.js.map +1 -0
- package/lib/components/sort-button/sort-button.module.css +89 -0
- package/lib/constants.js +5 -1
- package/lib/constants.js.map +1 -1
- package/lib/hooks/rows-sort.js +13 -5
- package/lib/hooks/rows-sort.js.map +1 -1
- package/lib/ui/icon/icon.js +2 -0
- package/lib/ui/icon/icon.js.map +1 -1
- package/lib/ui/index.js +1 -3
- package/lib/ui/index.js.map +1 -1
- package/lib-esm/assets/icons.svg +16 -10
- package/lib-esm/assets/icons.svg.js +14 -10
- package/lib-esm/assets/icons.svg.js.map +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.js +2 -10
- package/lib-esm/components/bundle-assets/bundle-assets.js.map +1 -1
- package/lib-esm/components/bundle-assets/bundle-assets.utils.js +8 -21
- package/lib-esm/components/bundle-assets/bundle-assets.utils.js.map +1 -1
- package/lib-esm/components/bundle-assets/index.js +0 -2
- package/lib-esm/components/bundle-assets/index.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.js +2 -10
- package/lib-esm/components/bundle-modules/bundle-modules.js.map +1 -1
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js +1 -14
- package/lib-esm/components/bundle-modules/bundle-modules.utils.js.map +1 -1
- package/lib-esm/components/bundle-modules/index.js +2 -4
- package/lib-esm/components/bundle-modules/index.js.map +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.js +2 -10
- package/lib-esm/components/bundle-packages/bundle-packages.js.map +1 -1
- package/lib-esm/components/bundle-packages/bundle-packages.utils.js +1 -14
- package/lib-esm/components/bundle-packages/bundle-packages.utils.js.map +1 -1
- package/lib-esm/components/bundle-packages/index.js +2 -4
- package/lib-esm/components/bundle-packages/index.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.js +5 -6
- package/lib-esm/components/entry-info/entry-info.js.map +1 -1
- package/lib-esm/components/entry-info/entry-info.module.css +4 -6
- package/lib-esm/components/metrics-table/metrics-table.js +41 -81
- package/lib-esm/components/metrics-table/metrics-table.js.map +1 -1
- package/lib-esm/components/metrics-table/metrics-table.module.css +10 -15
- package/lib-esm/components/metrics-table-title/metrics-table-title.js +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.js.map +1 -1
- package/lib-esm/components/metrics-table-title/metrics-table-title.module.css +3 -1
- package/lib-esm/components/run-info/run-info.js +7 -3
- package/lib-esm/components/run-info/run-info.js.map +1 -1
- package/lib-esm/components/sort-button/index.js +2 -0
- package/lib-esm/components/sort-button/index.js.map +1 -0
- package/lib-esm/components/sort-button/sort-button.js +43 -0
- package/lib-esm/components/sort-button/sort-button.js.map +1 -0
- package/lib-esm/components/sort-button/sort-button.module.css +89 -0
- package/lib-esm/constants.js +4 -0
- package/lib-esm/constants.js.map +1 -1
- package/lib-esm/hooks/rows-sort.js +11 -4
- package/lib-esm/hooks/rows-sort.js.map +1 -1
- package/lib-esm/ui/icon/icon.js +2 -0
- package/lib-esm/ui/icon/icon.js.map +1 -1
- package/lib-esm/ui/index.js +0 -1
- package/lib-esm/ui/index.js.map +1 -1
- package/package.json +3 -3
- package/src/assets/icons/chevron-down.svg +1 -0
- package/src/assets/icons/chevron-up.svg +1 -0
- package/src/assets/icons.svg +16 -10
- package/src/assets/icons.svg.jsx +24 -10
- package/src/components/bundle-assets/bundle-assets.jsx +2 -9
- package/src/components/bundle-assets/bundle-assets.utils.js +8 -24
- package/src/components/bundle-assets/index.jsx +0 -2
- package/src/components/bundle-modules/bundle-modules.jsx +2 -14
- package/src/components/bundle-modules/bundle-modules.utils.js +1 -17
- package/src/components/bundle-modules/index.jsx +2 -4
- package/src/components/bundle-packages/bundle-packages.jsx +2 -9
- package/src/components/bundle-packages/bundle-packages.utils.js +1 -17
- package/src/components/bundle-packages/index.jsx +2 -4
- package/src/components/entry-info/entry-info.module.css +4 -6
- package/src/components/entry-info/entry-info.tsx +13 -14
- package/src/components/metrics-table/metrics-table.jsx +134 -131
- package/src/components/metrics-table/metrics-table.module.css +10 -15
- package/src/components/metrics-table-title/metrics-table-title.jsx +1 -1
- package/src/components/metrics-table-title/metrics-table-title.module.css +3 -1
- package/src/components/run-info/run-info.stories.tsx +7 -0
- package/src/components/run-info/run-info.tsx +14 -2
- package/src/components/sort-button/index.ts +1 -0
- package/src/components/sort-button/sort-button.module.css +89 -0
- package/src/components/sort-button/sort-button.tsx +108 -0
- package/src/constants.js +5 -0
- package/src/hooks/rows-sort.ts +48 -0
- package/src/types.d.ts +4 -0
- package/src/ui/icon/icon.tsx +2 -0
- package/src/ui/index.js +0 -1
- package/types/components/bundle-assets/bundle-assets.d.ts +0 -1
- package/types/components/bundle-assets/bundle-assets.utils.d.ts +1 -1
- package/types/components/bundle-modules/bundle-modules.d.ts +1 -3
- package/types/components/bundle-modules/bundle-modules.utils.d.ts +1 -1
- package/types/components/bundle-packages/bundle-packages.d.ts +0 -1
- package/types/components/bundle-packages/bundle-packages.utils.d.ts +1 -1
- package/types/components/metrics-table/metrics-table.d.ts +3 -7
- package/types/components/run-info/run-info.d.ts +2 -1
- package/types/components/sort-button/index.d.ts +1 -0
- package/types/components/sort-button/sort-button.d.ts +11 -0
- package/types/constants.d.ts +4 -0
- package/types/hooks/rows-sort.d.ts +14 -11
- package/types/ui/icon/icon.d.ts +4 -0
- package/types/ui/index.d.ts +0 -1
- package/lib/components/bundle-assets/bundle-assets.constants.js +0 -21
- package/lib/components/bundle-assets/bundle-assets.constants.js.map +0 -1
- package/lib/components/bundle-modules/bundle-modules.constants.js +0 -21
- package/lib/components/bundle-modules/bundle-modules.constants.js.map +0 -1
- package/lib/components/bundle-packages/bundle-packages.constants.js +0 -21
- package/lib/components/bundle-packages/bundle-packages.constants.js.map +0 -1
- package/lib/ui/sort-dropdown/index.js.map +0 -1
- package/lib/ui/sort-dropdown/sort-dropdown.js +0 -101
- package/lib/ui/sort-dropdown/sort-dropdown.js.map +0 -1
- package/lib/ui/sort-dropdown/sort-dropdown.module.css +0 -22
- package/lib-esm/components/bundle-assets/bundle-assets.constants.js +0 -18
- package/lib-esm/components/bundle-assets/bundle-assets.constants.js.map +0 -1
- package/lib-esm/components/bundle-modules/bundle-modules.constants.js +0 -18
- package/lib-esm/components/bundle-modules/bundle-modules.constants.js.map +0 -1
- package/lib-esm/components/bundle-packages/bundle-packages.constants.js +0 -18
- package/lib-esm/components/bundle-packages/bundle-packages.constants.js.map +0 -1
- package/lib-esm/ui/sort-dropdown/index.js +0 -2
- package/lib-esm/ui/sort-dropdown/index.js.map +0 -1
- package/lib-esm/ui/sort-dropdown/sort-dropdown.js +0 -71
- package/lib-esm/ui/sort-dropdown/sort-dropdown.js.map +0 -1
- package/lib-esm/ui/sort-dropdown/sort-dropdown.module.css +0 -22
- package/src/components/bundle-assets/bundle-assets.constants.js +0 -18
- package/src/components/bundle-modules/bundle-modules.constants.js +0 -18
- package/src/components/bundle-packages/bundle-packages.constants.js +0 -18
- package/src/hooks/rows-sort.js +0 -24
- package/src/ui/sort-dropdown/index.js +0 -1
- package/src/ui/sort-dropdown/sort-dropdown.jsx +0 -121
- package/src/ui/sort-dropdown/sort-dropdown.module.css +0 -22
- package/types/components/bundle-assets/bundle-assets.constants.d.ts +0 -21
- package/types/components/bundle-modules/bundle-modules.constants.d.ts +0 -21
- package/types/components/bundle-packages/bundle-packages.constants.d.ts +0 -21
- package/types/ui/sort-dropdown/index.d.ts +0 -1
- package/types/ui/sort-dropdown/sort-dropdown.d.ts +0 -24
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bundle-modules.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-modules/bundle-modules.constants.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,CAAC,YAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,KAAK;KACxB;IACD,CAAC,aAAa,CAAC,EAAE;QACf,KAAK,EAAE,OAAO;QACd,gBAAgB,EAAE,MAAM;KACzB;IACD,CAAC,YAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME = 'name';
|
|
2
|
-
export const SORT_BY_SIZE = 'size';
|
|
3
|
-
export const SORT_BY_DELTA = 'delta';
|
|
4
|
-
export const SORT_BY = {
|
|
5
|
-
[SORT_BY_NAME]: {
|
|
6
|
-
label: 'Name',
|
|
7
|
-
defaultDirection: 'asc',
|
|
8
|
-
},
|
|
9
|
-
[SORT_BY_DELTA]: {
|
|
10
|
-
label: 'Delta',
|
|
11
|
-
defaultDirection: 'desc',
|
|
12
|
-
},
|
|
13
|
-
[SORT_BY_SIZE]: {
|
|
14
|
-
label: 'Size',
|
|
15
|
-
defaultDirection: 'desc',
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=bundle-packages.constants.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"bundle-packages.constants.js","sourceRoot":"","sources":["../../../src/components/bundle-packages/bundle-packages.constants.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC;AACnC,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,CAAC,YAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,KAAK;KACxB;IACD,CAAC,aAAa,CAAC,EAAE;QACf,KAAK,EAAE,OAAO;QACd,gBAAgB,EAAE,MAAM;KACzB;IACD,CAAC,YAAY,CAAC,EAAE;QACd,KAAK,EAAE,MAAM;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/sort-dropdown/index.js"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
import { Dropdown } from '../dropdown';
|
|
5
|
-
import { Icon } from '../icon';
|
|
6
|
-
import css from './sort-dropdown.module.css';
|
|
7
|
-
const Item = ({ as: Component, id, label, isActive, direction, defaultDirection, getButtonOnClick, ...restProps }) => {
|
|
8
|
-
const buttonProps = useMemo(() => {
|
|
9
|
-
let resolveNextDirection = defaultDirection;
|
|
10
|
-
if (isActive) {
|
|
11
|
-
resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
|
|
12
|
-
}
|
|
13
|
-
if (resolveNextDirection === 'desc') {
|
|
14
|
-
return {
|
|
15
|
-
className: css.itemAsc,
|
|
16
|
-
onClick: getButtonOnClick(id, 'desc'),
|
|
17
|
-
title: `Order data by ${label} descending`,
|
|
18
|
-
};
|
|
19
|
-
}
|
|
20
|
-
return {
|
|
21
|
-
onClick: getButtonOnClick(id, 'asc'),
|
|
22
|
-
title: `Order data by ${label} ascending`,
|
|
23
|
-
};
|
|
24
|
-
}, [isActive, direction, defaultDirection, id, label]);
|
|
25
|
-
return (React.createElement(Component, { ...restProps, ...buttonProps, isActive: isActive, className: cx(css.item, isActive && css.itemActive, buttonProps.className) },
|
|
26
|
-
React.createElement(Icon, { className: css.itemIcon, glyph: Icon.ICONS.ARROW }),
|
|
27
|
-
React.createElement("span", { className: css.itemLabel }, label)));
|
|
28
|
-
};
|
|
29
|
-
Item.propTypes = {
|
|
30
|
-
className: PropTypes.string,
|
|
31
|
-
as: PropTypes.element.isRequired,
|
|
32
|
-
id: PropTypes.string.isRequired,
|
|
33
|
-
label: PropTypes.string.isRequired,
|
|
34
|
-
isActive: PropTypes.bool.isRequired,
|
|
35
|
-
direction: PropTypes.string.isRequired,
|
|
36
|
-
defaultDirection: PropTypes.string.isRequired,
|
|
37
|
-
getButtonOnClick: PropTypes.func.isRequired,
|
|
38
|
-
};
|
|
39
|
-
Item.defaultProps = {
|
|
40
|
-
className: '',
|
|
41
|
-
};
|
|
42
|
-
export const SortDropdown = (props) => {
|
|
43
|
-
const { className, label, fields, field, direction, onChange } = props;
|
|
44
|
-
const rootClassName = cx(css.root, className);
|
|
45
|
-
const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
|
|
46
|
-
return (React.createElement(Dropdown, { className: rootClassName, label: customLabel, glyph: "sort", align: "right" }, ({ MenuItem, menu, menuItemClassName, menuItemActiveClassName }) => {
|
|
47
|
-
const getButtonOnClick = (newField, newDirection) => () => {
|
|
48
|
-
onChange({ field: newField, direction: newDirection });
|
|
49
|
-
menu.toggle();
|
|
50
|
-
};
|
|
51
|
-
return (React.createElement("div", { className: css.items }, Object.entries(fields).map(([key, item]) => (React.createElement(Item, { key: key, as: MenuItem, isActive: field === key, id: key, label: item.label, direction: direction, defaultDirection: item.defaultDirection, getButtonOnClick: getButtonOnClick })))));
|
|
52
|
-
}));
|
|
53
|
-
};
|
|
54
|
-
SortDropdown.defaultProps = {
|
|
55
|
-
className: '',
|
|
56
|
-
label: 'Order by',
|
|
57
|
-
onChange: () => { },
|
|
58
|
-
field: '',
|
|
59
|
-
direction: 'asc',
|
|
60
|
-
};
|
|
61
|
-
SortDropdown.propTypes = {
|
|
62
|
-
className: PropTypes.string,
|
|
63
|
-
label: PropTypes.string,
|
|
64
|
-
fields: PropTypes.shape({
|
|
65
|
-
[PropTypes.string]: PropTypes.string,
|
|
66
|
-
}).isRequired,
|
|
67
|
-
onChange: PropTypes.func,
|
|
68
|
-
field: PropTypes.string,
|
|
69
|
-
direction: PropTypes.string,
|
|
70
|
-
};
|
|
71
|
-
//# sourceMappingURL=sort-dropdown.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sort-dropdown.js","sourceRoot":"","sources":["../../../src/ui/sort-dropdown/sort-dropdown.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EAAE,SAAS,EACb,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,GAAG,SAAS,EACb,EAAE,EAAE;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,oBAAoB,GAAG,gBAAgB,CAAC;QAE5C,IAAI,QAAQ,EAAE;YACZ,oBAAoB,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;SAC7D;QAED,IAAI,oBAAoB,KAAK,MAAM,EAAE;YACnC,OAAO;gBACL,SAAS,EAAE,GAAG,CAAC,OAAO;gBACtB,OAAO,EAAE,gBAAgB,CAAC,EAAE,EAAE,MAAM,CAAC;gBACrC,KAAK,EAAE,iBAAiB,KAAK,aAAa;aAC3C,CAAC;SACH;QAED,OAAO;YACL,OAAO,EAAE,gBAAgB,CAAC,EAAE,EAAE,KAAK,CAAC;YACpC,KAAK,EAAE,iBAAiB,KAAK,YAAY;SAC1C,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvD,OAAO,CACL,oBAAC,SAAS,OACJ,SAAS,KACT,WAAW,EACf,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,IAAI,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,SAAS,CAAC;QAE1E,oBAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI;QAC1D,8BAAM,SAAS,EAAE,GAAG,CAAC,SAAS,IAAG,KAAK,CAAQ,CACpC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,EAAE,EAAE,SAAS,CAAC,OAAO,CAAC,UAAU;IAChC,EAAE,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAC/B,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACnC,SAAS,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACtC,gBAAgB,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAC7C,gBAAgB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC5C,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvE,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;IAEhF,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,IAC/E,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,EAAE,EAAE;QAClE,MAAM,gBAAgB,GAAG,CAAC,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC,GAAG,EAAE;YACxD,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC;YACvD,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,GAAG,CAAC,KAAK,IACtB,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAC3C,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,QAAQ,EACZ,QAAQ,EAAE,KAAK,KAAK,GAAG,EACvB,EAAE,EAAE,GAAG,EACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC,CACE,CACP,CAAC;IACJ,CAAC,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,UAAU;IACjB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;IAClB,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,YAAY,CAAC,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC;QACtB,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,MAAM;KACrC,CAAC,CAAC,UAAU;IACb,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAC"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
.item {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.itemIcon {
|
|
7
|
-
flex: 0 0 auto;
|
|
8
|
-
visibility: hidden;
|
|
9
|
-
margin-right: var(--space-xxxsmall);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.itemLabel {
|
|
13
|
-
flex: 1 1 100%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.itemAsc .itemIcon {
|
|
17
|
-
transform: rotate(180deg);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.itemActive .itemIcon {
|
|
21
|
-
visibility: visible;
|
|
22
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME = 'name';
|
|
2
|
-
export const SORT_BY_SIZE = 'size';
|
|
3
|
-
export const SORT_BY_DELTA = 'delta';
|
|
4
|
-
|
|
5
|
-
export const SORT_BY = {
|
|
6
|
-
[SORT_BY_NAME]: {
|
|
7
|
-
label: 'Name',
|
|
8
|
-
defaultDirection: 'asc',
|
|
9
|
-
},
|
|
10
|
-
[SORT_BY_DELTA]: {
|
|
11
|
-
label: 'Delta',
|
|
12
|
-
defaultDirection: 'desc',
|
|
13
|
-
},
|
|
14
|
-
[SORT_BY_SIZE]: {
|
|
15
|
-
label: 'Size',
|
|
16
|
-
defaultDirection: 'desc',
|
|
17
|
-
},
|
|
18
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME = 'name';
|
|
2
|
-
export const SORT_BY_SIZE = 'size';
|
|
3
|
-
export const SORT_BY_DELTA = 'delta';
|
|
4
|
-
|
|
5
|
-
export const SORT_BY = {
|
|
6
|
-
[SORT_BY_NAME]: {
|
|
7
|
-
label: 'Name',
|
|
8
|
-
defaultDirection: 'asc',
|
|
9
|
-
},
|
|
10
|
-
[SORT_BY_DELTA]: {
|
|
11
|
-
label: 'Delta',
|
|
12
|
-
defaultDirection: 'desc',
|
|
13
|
-
},
|
|
14
|
-
[SORT_BY_SIZE]: {
|
|
15
|
-
label: 'Size',
|
|
16
|
-
defaultDirection: 'desc',
|
|
17
|
-
},
|
|
18
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME = 'name';
|
|
2
|
-
export const SORT_BY_SIZE = 'size';
|
|
3
|
-
export const SORT_BY_DELTA = 'delta';
|
|
4
|
-
|
|
5
|
-
export const SORT_BY = {
|
|
6
|
-
[SORT_BY_NAME]: {
|
|
7
|
-
label: 'Name',
|
|
8
|
-
defaultDirection: 'asc',
|
|
9
|
-
},
|
|
10
|
-
[SORT_BY_DELTA]: {
|
|
11
|
-
label: 'Delta',
|
|
12
|
-
defaultDirection: 'desc',
|
|
13
|
-
},
|
|
14
|
-
[SORT_BY_SIZE]: {
|
|
15
|
-
label: 'Size',
|
|
16
|
-
defaultDirection: 'desc',
|
|
17
|
-
},
|
|
18
|
-
};
|
package/src/hooks/rows-sort.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { useState, useMemo } from 'react';
|
|
2
|
-
import orderBy from 'lodash/orderBy';
|
|
3
|
-
|
|
4
|
-
export const useRowsSort = ({
|
|
5
|
-
rows,
|
|
6
|
-
sortFields,
|
|
7
|
-
sortBy = 'size',
|
|
8
|
-
sortDirection = 'desc',
|
|
9
|
-
getCustomSort,
|
|
10
|
-
}) => {
|
|
11
|
-
const [sort, updateSort] = useState({ field: sortBy, direction: sortDirection });
|
|
12
|
-
|
|
13
|
-
const orderedRows = useMemo(
|
|
14
|
-
() => orderBy(rows, getCustomSort(sort.field), sort.direction),
|
|
15
|
-
[rows, sort],
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
return {
|
|
19
|
-
sortFields,
|
|
20
|
-
sort,
|
|
21
|
-
updateSort,
|
|
22
|
-
items: orderedRows,
|
|
23
|
-
};
|
|
24
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './sort-dropdown';
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import cx from 'classnames';
|
|
4
|
-
|
|
5
|
-
import { Dropdown } from '../dropdown';
|
|
6
|
-
import { Icon } from '../icon';
|
|
7
|
-
import css from './sort-dropdown.module.css';
|
|
8
|
-
|
|
9
|
-
const Item = ({
|
|
10
|
-
as: Component,
|
|
11
|
-
id,
|
|
12
|
-
label,
|
|
13
|
-
isActive,
|
|
14
|
-
direction,
|
|
15
|
-
defaultDirection,
|
|
16
|
-
getButtonOnClick,
|
|
17
|
-
...restProps
|
|
18
|
-
}) => {
|
|
19
|
-
|
|
20
|
-
const buttonProps = useMemo(() => {
|
|
21
|
-
let resolveNextDirection = defaultDirection;
|
|
22
|
-
|
|
23
|
-
if (isActive) {
|
|
24
|
-
resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
if (resolveNextDirection === 'desc') {
|
|
28
|
-
return {
|
|
29
|
-
className: css.itemAsc,
|
|
30
|
-
onClick: getButtonOnClick(id, 'desc'),
|
|
31
|
-
title: `Order data by ${label} descending`,
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
return {
|
|
36
|
-
onClick: getButtonOnClick(id, 'asc'),
|
|
37
|
-
title: `Order data by ${label} ascending`,
|
|
38
|
-
};
|
|
39
|
-
}, [isActive, direction, defaultDirection, id, label]);
|
|
40
|
-
|
|
41
|
-
return (
|
|
42
|
-
<Component
|
|
43
|
-
{...restProps}
|
|
44
|
-
{...buttonProps}
|
|
45
|
-
isActive={isActive}
|
|
46
|
-
className={cx(css.item, isActive && css.itemActive, buttonProps.className)}
|
|
47
|
-
>
|
|
48
|
-
<Icon className={css.itemIcon} glyph={Icon.ICONS.ARROW} />
|
|
49
|
-
<span className={css.itemLabel}>{label}</span>
|
|
50
|
-
</Component>
|
|
51
|
-
);
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
Item.propTypes = {
|
|
55
|
-
className: PropTypes.string,
|
|
56
|
-
as: PropTypes.element.isRequired,
|
|
57
|
-
id: PropTypes.string.isRequired,
|
|
58
|
-
label: PropTypes.string.isRequired,
|
|
59
|
-
isActive: PropTypes.bool.isRequired,
|
|
60
|
-
direction: PropTypes.string.isRequired,
|
|
61
|
-
defaultDirection: PropTypes.string.isRequired,
|
|
62
|
-
getButtonOnClick: PropTypes.func.isRequired,
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
Item.defaultProps = {
|
|
66
|
-
className: '',
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export const SortDropdown = (props) => {
|
|
70
|
-
const { className, label, fields, field, direction, onChange } = props;
|
|
71
|
-
const rootClassName = cx(css.root, className);
|
|
72
|
-
|
|
73
|
-
const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
|
|
74
|
-
|
|
75
|
-
return (
|
|
76
|
-
<Dropdown className={rootClassName} label={customLabel} glyph="sort" align="right">
|
|
77
|
-
{({ MenuItem, menu, menuItemClassName, menuItemActiveClassName }) => {
|
|
78
|
-
const getButtonOnClick = (newField, newDirection) => () => {
|
|
79
|
-
onChange({ field: newField, direction: newDirection });
|
|
80
|
-
menu.toggle();
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
return (
|
|
84
|
-
<div className={css.items}>
|
|
85
|
-
{Object.entries(fields).map(([key, item]) => (
|
|
86
|
-
<Item
|
|
87
|
-
key={key}
|
|
88
|
-
as={MenuItem}
|
|
89
|
-
isActive={field === key}
|
|
90
|
-
id={key}
|
|
91
|
-
label={item.label}
|
|
92
|
-
direction={direction}
|
|
93
|
-
defaultDirection={item.defaultDirection}
|
|
94
|
-
getButtonOnClick={getButtonOnClick}
|
|
95
|
-
/>
|
|
96
|
-
))}
|
|
97
|
-
</div>
|
|
98
|
-
);
|
|
99
|
-
}}
|
|
100
|
-
</Dropdown>
|
|
101
|
-
);
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
SortDropdown.defaultProps = {
|
|
105
|
-
className: '',
|
|
106
|
-
label: 'Order by',
|
|
107
|
-
onChange: () => {},
|
|
108
|
-
field: '',
|
|
109
|
-
direction: 'asc',
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
SortDropdown.propTypes = {
|
|
113
|
-
className: PropTypes.string,
|
|
114
|
-
label: PropTypes.string,
|
|
115
|
-
fields: PropTypes.shape({
|
|
116
|
-
[PropTypes.string]: PropTypes.string,
|
|
117
|
-
}).isRequired,
|
|
118
|
-
onChange: PropTypes.func,
|
|
119
|
-
field: PropTypes.string,
|
|
120
|
-
direction: PropTypes.string,
|
|
121
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
.item {
|
|
2
|
-
display: flex;
|
|
3
|
-
align-items: center;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.itemIcon {
|
|
7
|
-
flex: 0 0 auto;
|
|
8
|
-
visibility: hidden;
|
|
9
|
-
margin-right: var(--space-xxxsmall);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.itemLabel {
|
|
13
|
-
flex: 1 1 100%;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.itemAsc .itemIcon {
|
|
17
|
-
transform: rotate(180deg);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.itemActive .itemIcon {
|
|
21
|
-
visibility: visible;
|
|
22
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME: "name";
|
|
2
|
-
export const SORT_BY_SIZE: "size";
|
|
3
|
-
export const SORT_BY_DELTA: "delta";
|
|
4
|
-
export namespace SORT_BY {
|
|
5
|
-
namespace name {
|
|
6
|
-
let label: string;
|
|
7
|
-
let defaultDirection: string;
|
|
8
|
-
}
|
|
9
|
-
namespace delta {
|
|
10
|
-
let label_1: string;
|
|
11
|
-
export { label_1 as label };
|
|
12
|
-
let defaultDirection_1: string;
|
|
13
|
-
export { defaultDirection_1 as defaultDirection };
|
|
14
|
-
}
|
|
15
|
-
namespace size {
|
|
16
|
-
let label_2: string;
|
|
17
|
-
export { label_2 as label };
|
|
18
|
-
let defaultDirection_2: string;
|
|
19
|
-
export { defaultDirection_2 as defaultDirection };
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME: "name";
|
|
2
|
-
export const SORT_BY_SIZE: "size";
|
|
3
|
-
export const SORT_BY_DELTA: "delta";
|
|
4
|
-
export namespace SORT_BY {
|
|
5
|
-
namespace name {
|
|
6
|
-
let label: string;
|
|
7
|
-
let defaultDirection: string;
|
|
8
|
-
}
|
|
9
|
-
namespace delta {
|
|
10
|
-
let label_1: string;
|
|
11
|
-
export { label_1 as label };
|
|
12
|
-
let defaultDirection_1: string;
|
|
13
|
-
export { defaultDirection_1 as defaultDirection };
|
|
14
|
-
}
|
|
15
|
-
namespace size {
|
|
16
|
-
let label_2: string;
|
|
17
|
-
export { label_2 as label };
|
|
18
|
-
let defaultDirection_2: string;
|
|
19
|
-
export { defaultDirection_2 as defaultDirection };
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export const SORT_BY_NAME: "name";
|
|
2
|
-
export const SORT_BY_SIZE: "size";
|
|
3
|
-
export const SORT_BY_DELTA: "delta";
|
|
4
|
-
export namespace SORT_BY {
|
|
5
|
-
namespace name {
|
|
6
|
-
let label: string;
|
|
7
|
-
let defaultDirection: string;
|
|
8
|
-
}
|
|
9
|
-
namespace delta {
|
|
10
|
-
let label_1: string;
|
|
11
|
-
export { label_1 as label };
|
|
12
|
-
let defaultDirection_1: string;
|
|
13
|
-
export { defaultDirection_1 as defaultDirection };
|
|
14
|
-
}
|
|
15
|
-
namespace size {
|
|
16
|
-
let label_2: string;
|
|
17
|
-
export { label_2 as label };
|
|
18
|
-
let defaultDirection_2: string;
|
|
19
|
-
export { defaultDirection_2 as defaultDirection };
|
|
20
|
-
}
|
|
21
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./sort-dropdown";
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export function SortDropdown(props: any): JSX.Element;
|
|
2
|
-
export namespace SortDropdown {
|
|
3
|
-
namespace defaultProps {
|
|
4
|
-
let className: string;
|
|
5
|
-
let label: string;
|
|
6
|
-
function onChange(): void;
|
|
7
|
-
let field: string;
|
|
8
|
-
let direction: string;
|
|
9
|
-
}
|
|
10
|
-
namespace propTypes {
|
|
11
|
-
let className_1: PropTypes.Requireable<string>;
|
|
12
|
-
export { className_1 as className };
|
|
13
|
-
let label_1: PropTypes.Requireable<string>;
|
|
14
|
-
export { label_1 as label };
|
|
15
|
-
export let fields: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
|
|
16
|
-
let onChange_1: PropTypes.Requireable<(...args: any[]) => any>;
|
|
17
|
-
export { onChange_1 as onChange };
|
|
18
|
-
let field_1: PropTypes.Requireable<string>;
|
|
19
|
-
export { field_1 as field };
|
|
20
|
-
let direction_1: PropTypes.Requireable<string>;
|
|
21
|
-
export { direction_1 as direction };
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
import PropTypes from 'prop-types';
|