@xh/hoist 74.0.0-SNAPSHOT.1749036244810 → 74.0.0-SNAPSHOT.1749232318711
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/build/types/desktop/cmp/filter/FilterChooser.d.ts +2 -0
- package/build/types/desktop/cmp/grouping/GroupingChooser.d.ts +3 -0
- package/build/types/desktop/cmp/input/DateInput.d.ts +1 -1
- package/desktop/cmp/filter/FilterChooser.ts +12 -6
- package/desktop/cmp/grouping/GroupingChooser.ts +9 -4
- package/desktop/cmp/input/DateInput.ts +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -22,6 +22,8 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
|
|
|
22
22
|
menuWidth?: number;
|
|
23
23
|
/** Text to display when control is empty. */
|
|
24
24
|
placeholder?: string;
|
|
25
|
+
/** Icon clicked to launch favorites menu. (Defaults to Icon.favorite()) */
|
|
26
|
+
favoritesIcon?: ReactElement;
|
|
25
27
|
}
|
|
26
28
|
/**
|
|
27
29
|
* A Select based control for searching and choosing filters.
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { GroupingChooserModel } from '@xh/hoist/cmp/grouping';
|
|
2
2
|
import { ButtonProps } from '@xh/hoist/desktop/cmp/button';
|
|
3
3
|
import '@xh/hoist/desktop/register';
|
|
4
|
+
import { ReactElement } from 'react';
|
|
4
5
|
import './GroupingChooser.scss';
|
|
5
6
|
export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel> {
|
|
6
7
|
/** Text to represent empty state (i.e. value = null or []) */
|
|
@@ -15,6 +16,8 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
|
|
|
15
16
|
popoverWidth?: number;
|
|
16
17
|
/** True (default) to style target button as an input field - blends better in toolbars. */
|
|
17
18
|
styleButtonAsInput?: boolean;
|
|
19
|
+
/** Icon clicked to launch favorites menu. Defaults to Icon.favorite() */
|
|
20
|
+
favoritesIcon?: ReactElement;
|
|
18
21
|
}
|
|
19
22
|
/**
|
|
20
23
|
* Control for selecting a list of dimensions for grouping APIs, with built-in support for
|
|
@@ -56,7 +56,7 @@ export interface DateInputProps extends HoistProps, LayoutProps, HoistInputProps
|
|
|
56
56
|
*/
|
|
57
57
|
maxDate?: Date | LocalDate;
|
|
58
58
|
/**
|
|
59
|
-
*
|
|
59
|
+
* Minimum (inclusive) valid date that can be entered by the user via the calendar picker or
|
|
60
60
|
* keyboard. Will reset any out-of-bounds manually entered input to `null`.
|
|
61
61
|
*
|
|
62
62
|
* See note re. validation on maxDate, above.
|
|
@@ -17,7 +17,7 @@ import {splitLayoutProps} from '@xh/hoist/utils/react';
|
|
|
17
17
|
import classNames from 'classnames';
|
|
18
18
|
import {isEmpty, sortBy} from 'lodash';
|
|
19
19
|
import {badge} from '@xh/hoist/cmp/badge';
|
|
20
|
-
import {ReactElement} from 'react';
|
|
20
|
+
import {cloneElement, ReactElement} from 'react';
|
|
21
21
|
import './FilterChooser.scss';
|
|
22
22
|
|
|
23
23
|
export interface FilterChooserProps extends HoistProps<FilterChooserModel>, LayoutProps {
|
|
@@ -39,6 +39,8 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
|
|
|
39
39
|
menuWidth?: number;
|
|
40
40
|
/** Text to display when control is empty. */
|
|
41
41
|
placeholder?: string;
|
|
42
|
+
/** Icon clicked to launch favorites menu. (Defaults to Icon.favorite()) */
|
|
43
|
+
favoritesIcon?: ReactElement;
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
/**
|
|
@@ -65,7 +67,8 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
|
|
|
65
67
|
leftIcon,
|
|
66
68
|
maxMenuHeight,
|
|
67
69
|
menuPlacement,
|
|
68
|
-
menuWidth
|
|
70
|
+
menuWidth,
|
|
71
|
+
favoritesIcon
|
|
69
72
|
} = chooserProps,
|
|
70
73
|
disabled = unsupportedFilter || chooserProps.disabled,
|
|
71
74
|
placeholder = unsupportedFilter
|
|
@@ -115,7 +118,7 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
|
|
|
115
118
|
})
|
|
116
119
|
},
|
|
117
120
|
components: {
|
|
118
|
-
DropdownIndicator: () =>
|
|
121
|
+
DropdownIndicator: () => favoritesIconCmp(model, favoritesIcon)
|
|
119
122
|
}
|
|
120
123
|
}
|
|
121
124
|
})
|
|
@@ -210,15 +213,18 @@ const messageOption = hoistCmp.factory({
|
|
|
210
213
|
//-----------------
|
|
211
214
|
// Favorites
|
|
212
215
|
//------------------
|
|
213
|
-
function
|
|
216
|
+
function favoritesIconCmp(model, favoritesIcon) {
|
|
214
217
|
if (!model.persistFavorites) return null;
|
|
215
|
-
|
|
218
|
+
|
|
219
|
+
const iconProps = {
|
|
216
220
|
className: classNames('xh-select__indicator', 'xh-filter-chooser-favorite-icon'),
|
|
217
221
|
onMouseDown: e => {
|
|
218
222
|
model.openFavoritesMenu();
|
|
219
223
|
e.stopPropagation();
|
|
220
224
|
}
|
|
221
|
-
}
|
|
225
|
+
};
|
|
226
|
+
|
|
227
|
+
return favoritesIcon ? cloneElement(favoritesIcon, iconProps) : Icon.favorite(iconProps);
|
|
222
228
|
}
|
|
223
229
|
|
|
224
230
|
const favoritesMenu = hoistCmp.factory<FilterChooserModel>({
|
|
@@ -16,6 +16,7 @@ import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
|
|
|
16
16
|
import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
|
|
17
17
|
import {elemWithin, getTestId, TEST_ID} from '@xh/hoist/utils/js';
|
|
18
18
|
import {splitLayoutProps} from '@xh/hoist/utils/react';
|
|
19
|
+
import {ReactElement} from 'react';
|
|
19
20
|
import classNames from 'classnames';
|
|
20
21
|
import {compact, isEmpty, sortBy} from 'lodash';
|
|
21
22
|
import './GroupingChooser.scss';
|
|
@@ -38,6 +39,9 @@ export interface GroupingChooserProps extends ButtonProps<GroupingChooserModel>
|
|
|
38
39
|
|
|
39
40
|
/** True (default) to style target button as an input field - blends better in toolbars. */
|
|
40
41
|
styleButtonAsInput?: boolean;
|
|
42
|
+
|
|
43
|
+
/** Icon clicked to launch favorites menu. Defaults to Icon.favorite() */
|
|
44
|
+
favoritesIcon?: ReactElement;
|
|
41
45
|
}
|
|
42
46
|
|
|
43
47
|
/**
|
|
@@ -62,6 +66,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
|
|
|
62
66
|
popoverPosition = 'bottom',
|
|
63
67
|
styleButtonAsInput = true,
|
|
64
68
|
testId,
|
|
69
|
+
favoritesIcon,
|
|
65
70
|
...rest
|
|
66
71
|
},
|
|
67
72
|
ref
|
|
@@ -101,7 +106,7 @@ export const [GroupingChooser, groupingChooser] = hoistCmp.withFactory<GroupingC
|
|
|
101
106
|
onClick: () => model.toggleEditor(),
|
|
102
107
|
testId
|
|
103
108
|
}),
|
|
104
|
-
|
|
109
|
+
favoritesIconCmp({testId: favoritesIconTestId, favoritesIcon})
|
|
105
110
|
),
|
|
106
111
|
content: favoritesIsOpen
|
|
107
112
|
? favoritesMenu({testId: favoritesMenuTestId})
|
|
@@ -315,11 +320,11 @@ function getDimOptions(dims, model) {
|
|
|
315
320
|
//------------------
|
|
316
321
|
// Favorites
|
|
317
322
|
//------------------
|
|
318
|
-
const
|
|
319
|
-
render({model, testId}) {
|
|
323
|
+
const favoritesIconCmp = hoistCmp.factory<GroupingChooserModel>({
|
|
324
|
+
render({model, testId, favoritesIcon}) {
|
|
320
325
|
if (!model.persistFavorites) return null;
|
|
321
326
|
return div({
|
|
322
|
-
item: Icon.favorite(),
|
|
327
|
+
item: favoritesIcon ?? Icon.favorite(),
|
|
323
328
|
className: 'xh-grouping-chooser__favorite-icon',
|
|
324
329
|
[TEST_ID]: testId,
|
|
325
330
|
onClick: e => {
|
|
@@ -86,7 +86,7 @@ export interface DateInputProps extends HoistProps, LayoutProps, HoistInputProps
|
|
|
86
86
|
maxDate?: Date | LocalDate;
|
|
87
87
|
|
|
88
88
|
/**
|
|
89
|
-
*
|
|
89
|
+
* Minimum (inclusive) valid date that can be entered by the user via the calendar picker or
|
|
90
90
|
* keyboard. Will reset any out-of-bounds manually entered input to `null`.
|
|
91
91
|
*
|
|
92
92
|
* See note re. validation on maxDate, above.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xh/hoist",
|
|
3
|
-
"version": "74.0.0-SNAPSHOT.
|
|
3
|
+
"version": "74.0.0-SNAPSHOT.1749232318711",
|
|
4
4
|
"description": "Hoist add-on for building and deploying React Applications.",
|
|
5
5
|
"repository": "github:xh/hoist-react",
|
|
6
6
|
"homepage": "https://xh.io",
|