@qoretechnologies/reqore 0.33.0 → 0.34.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/__tests__/collection.test.tsx +22 -1
- package/__tests__/containers/paging.test.tsx +106 -0
- package/__tests__/hooks/useReqorePaging.test.tsx +4 -0
- package/__tests__/pagination.test.tsx +4 -0
- package/dist/components/Collection/index.d.ts +5 -9
- package/dist/components/Collection/index.d.ts.map +1 -1
- package/dist/components/Collection/index.js +30 -21
- package/dist/components/Collection/index.js.map +1 -1
- package/dist/components/Dropdown/index.d.ts +5 -1
- package/dist/components/Dropdown/index.d.ts.map +1 -1
- package/dist/components/Dropdown/index.js +2 -2
- package/dist/components/Dropdown/index.js.map +1 -1
- package/dist/components/Dropdown/list.d.ts +3 -1
- package/dist/components/Dropdown/list.d.ts.map +1 -1
- package/dist/components/Dropdown/list.js +13 -5
- package/dist/components/Dropdown/list.js.map +1 -1
- package/dist/components/Menu/index.d.ts +1 -0
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +4 -1
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Paging/index.d.ts +3 -1
- package/dist/components/Paging/index.d.ts.map +1 -1
- package/dist/components/Paging/index.js +31 -10
- package/dist/components/Paging/index.js.map +1 -1
- package/dist/components/Panel/index.d.ts +1 -0
- package/dist/components/Panel/index.d.ts.map +1 -1
- package/dist/components/Panel/index.js +16 -9
- package/dist/components/Panel/index.js.map +1 -1
- package/dist/constants/paging.d.ts +11 -4
- package/dist/constants/paging.d.ts.map +1 -1
- package/dist/constants/paging.js +7 -3
- package/dist/constants/paging.js.map +1 -1
- package/dist/containers/Paging.d.ts +15 -0
- package/dist/containers/Paging.d.ts.map +1 -0
- package/dist/containers/Paging.js +51 -0
- package/dist/containers/Paging.js.map +1 -0
- package/dist/hooks/usePaging.d.ts +1 -0
- package/dist/hooks/usePaging.d.ts.map +1 -1
- package/dist/hooks/usePaging.js +2 -0
- package/dist/hooks/usePaging.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Collection/index.tsx +94 -89
- package/src/components/Dropdown/index.tsx +21 -12
- package/src/components/Dropdown/list.tsx +43 -24
- package/src/components/Menu/index.tsx +3 -2
- package/src/components/Paging/index.tsx +32 -4
- package/src/components/Panel/index.tsx +27 -16
- package/src/constants/paging.ts +27 -8
- package/src/containers/Paging.tsx +90 -0
- package/src/hooks/usePaging.ts +4 -0
- package/src/index.tsx +1 -0
- package/src/stories/Collection/Collection.stories.tsx +23 -2
- package/src/stories/Dropdown/Dropdown.stories.tsx +54 -35
- package/src/stories/Menu/Menu.stories.tsx +4 -0
- package/src/stories/Paging/Paging.stories.tsx +19 -1
- package/src/stories/Panel/Panel.stories.tsx +18 -1
- package/tests.json +1 -1
|
@@ -138,7 +138,7 @@ test('<Collection /> has default paging', () => {
|
|
|
138
138
|
render(
|
|
139
139
|
<ReqoreUIProvider>
|
|
140
140
|
<ReqoreLayoutContent>
|
|
141
|
-
<ReqoreCollection items={bigCollection} paging />
|
|
141
|
+
<ReqoreCollection items={bigCollection} paging='buttons' />
|
|
142
142
|
</ReqoreLayoutContent>
|
|
143
143
|
</ReqoreUIProvider>
|
|
144
144
|
);
|
|
@@ -208,3 +208,24 @@ test('<Collection /> has custom paging', () => {
|
|
|
208
208
|
|
|
209
209
|
expect(document.querySelectorAll('.reqore-collection-item').length).toBe(100);
|
|
210
210
|
});
|
|
211
|
+
|
|
212
|
+
test('<Collection /> has 2 paging controls', () => {
|
|
213
|
+
render(
|
|
214
|
+
<ReqoreUIProvider>
|
|
215
|
+
<ReqoreLayoutContent>
|
|
216
|
+
<ReqoreCollection
|
|
217
|
+
items={bigCollection}
|
|
218
|
+
paging={{
|
|
219
|
+
itemsPerPage: 10,
|
|
220
|
+
showPagesAs: 'list',
|
|
221
|
+
pageControlsPosition: 'both',
|
|
222
|
+
}}
|
|
223
|
+
/>
|
|
224
|
+
</ReqoreLayoutContent>
|
|
225
|
+
</ReqoreUIProvider>
|
|
226
|
+
);
|
|
227
|
+
|
|
228
|
+
expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(2);
|
|
229
|
+
expect(document.querySelectorAll('.reqore-button').length).toBe(11);
|
|
230
|
+
expect(document.querySelectorAll('.reqore-collection-item').length).toBe(10);
|
|
231
|
+
});
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { fireEvent, render, screen } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import {
|
|
4
|
+
ReqoreContent,
|
|
5
|
+
ReqoreControlGroup,
|
|
6
|
+
ReqoreLayoutContent,
|
|
7
|
+
ReqorePaginationContainer,
|
|
8
|
+
ReqoreTag,
|
|
9
|
+
ReqoreUIProvider,
|
|
10
|
+
} from '../../src';
|
|
11
|
+
import { tableData as data } from '../../src/mock/tableData';
|
|
12
|
+
|
|
13
|
+
test('Renders default <PaginationContainer />', () => {
|
|
14
|
+
render(
|
|
15
|
+
<ReqoreUIProvider>
|
|
16
|
+
<ReqoreLayoutContent>
|
|
17
|
+
<ReqoreContent>
|
|
18
|
+
<ReqorePaginationContainer<any> items={data} type='buttons'>
|
|
19
|
+
{(items) => (
|
|
20
|
+
<ReqoreControlGroup vertical>
|
|
21
|
+
{items.map((item) => (
|
|
22
|
+
<ReqoreTag label={`${item.firstName} ${item.lastName}`} />
|
|
23
|
+
))}
|
|
24
|
+
</ReqoreControlGroup>
|
|
25
|
+
)}
|
|
26
|
+
</ReqorePaginationContainer>
|
|
27
|
+
</ReqoreContent>
|
|
28
|
+
</ReqoreLayoutContent>
|
|
29
|
+
</ReqoreUIProvider>
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
|
|
33
|
+
expect(document.querySelectorAll('.reqore-button')[0]?.getAttribute('disabled')).toBe('');
|
|
34
|
+
expect(document.querySelectorAll('.reqore-button').length).toBe(102);
|
|
35
|
+
|
|
36
|
+
fireEvent.click(document.querySelectorAll('.reqore-button')[100]);
|
|
37
|
+
|
|
38
|
+
expect(screen.getAllByText('Rodd Solly')).toBeTruthy();
|
|
39
|
+
expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
test('Renders default <PaginationContainer /> with both control wrappers', () => {
|
|
43
|
+
render(
|
|
44
|
+
<ReqoreUIProvider>
|
|
45
|
+
<ReqoreLayoutContent>
|
|
46
|
+
<ReqoreContent>
|
|
47
|
+
<ReqorePaginationContainer<any> items={data} type={{ pageControlsPosition: 'both' }}>
|
|
48
|
+
{(items) => (
|
|
49
|
+
<ReqoreControlGroup vertical>
|
|
50
|
+
{items.map((item) => (
|
|
51
|
+
<ReqoreTag label={`${item.firstName} ${item.lastName}`} />
|
|
52
|
+
))}
|
|
53
|
+
</ReqoreControlGroup>
|
|
54
|
+
)}
|
|
55
|
+
</ReqorePaginationContainer>
|
|
56
|
+
</ReqoreContent>
|
|
57
|
+
</ReqoreLayoutContent>
|
|
58
|
+
</ReqoreUIProvider>
|
|
59
|
+
);
|
|
60
|
+
|
|
61
|
+
expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(2);
|
|
62
|
+
expect(document.querySelectorAll('.reqore-button')[0]?.getAttribute('disabled')).toBe('');
|
|
63
|
+
expect(document.querySelectorAll('.reqore-button').length).toBe(204);
|
|
64
|
+
|
|
65
|
+
fireEvent.click(document.querySelectorAll('.reqore-button')[100]);
|
|
66
|
+
|
|
67
|
+
expect(screen.getAllByText('Rodd Solly')).toBeTruthy();
|
|
68
|
+
|
|
69
|
+
expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
|
|
70
|
+
expect(document.querySelectorAll('.reqore-button')[203]?.getAttribute('disabled')).toBe('');
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
test('Renders default <PaginationContainer /> with both control wrappers, one included in children', () => {
|
|
74
|
+
render(
|
|
75
|
+
<ReqoreUIProvider>
|
|
76
|
+
<ReqoreLayoutContent>
|
|
77
|
+
<ReqoreContent>
|
|
78
|
+
<ReqorePaginationContainer<any>
|
|
79
|
+
items={data}
|
|
80
|
+
type={{ pageControlsPosition: 'both', includeBottomControls: false }}
|
|
81
|
+
>
|
|
82
|
+
{(items, Controls, { includeBottomControls }) => (
|
|
83
|
+
<ReqoreControlGroup vertical>
|
|
84
|
+
{items.map((item) => (
|
|
85
|
+
<ReqoreTag label={`${item.firstName} ${item.lastName}`} />
|
|
86
|
+
))}
|
|
87
|
+
{!includeBottomControls && <Controls />}
|
|
88
|
+
</ReqoreControlGroup>
|
|
89
|
+
)}
|
|
90
|
+
</ReqorePaginationContainer>
|
|
91
|
+
</ReqoreContent>
|
|
92
|
+
</ReqoreLayoutContent>
|
|
93
|
+
</ReqoreUIProvider>
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(2);
|
|
97
|
+
expect(document.querySelectorAll('.reqore-button')[0]?.getAttribute('disabled')).toBe('');
|
|
98
|
+
expect(document.querySelectorAll('.reqore-button').length).toBe(204);
|
|
99
|
+
|
|
100
|
+
fireEvent.click(document.querySelectorAll('.reqore-button')[100]);
|
|
101
|
+
|
|
102
|
+
expect(screen.getAllByText('Rodd Solly')).toBeTruthy();
|
|
103
|
+
|
|
104
|
+
expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
|
|
105
|
+
expect(document.querySelectorAll('.reqore-button')[203]?.getAttribute('disabled')).toBe('');
|
|
106
|
+
});
|
|
@@ -17,6 +17,7 @@ test('useReqorePaging returns all pages', () => {
|
|
|
17
17
|
|
|
18
18
|
expect(result.current.pages.length).toEqual(100);
|
|
19
19
|
expect(result.current.pageCount).toEqual(100);
|
|
20
|
+
expect(result.current.renderControls).toEqual(true);
|
|
20
21
|
});
|
|
21
22
|
|
|
22
23
|
test('useReqorePaging with default start page', () => {
|
|
@@ -82,6 +83,7 @@ test('useReqorePaging returns 1 page when items are empty', () => {
|
|
|
82
83
|
);
|
|
83
84
|
|
|
84
85
|
expect(result.current.pages.length).toEqual(1);
|
|
86
|
+
expect(result.current.renderControls).toEqual(false);
|
|
85
87
|
});
|
|
86
88
|
|
|
87
89
|
test('useReqorePaging returns correct number of rounded pages', () => {
|
|
@@ -241,6 +243,7 @@ test('useReqorePaging returns correct number of items with infinite loading', ()
|
|
|
241
243
|
|
|
242
244
|
expect(result.current.items.length).toEqual(50);
|
|
243
245
|
expect(result.current.itemsLeft).toEqual(950);
|
|
246
|
+
expect(result.current.renderControls).toEqual(true);
|
|
244
247
|
|
|
245
248
|
act(() => {
|
|
246
249
|
result.current.last();
|
|
@@ -248,4 +251,5 @@ test('useReqorePaging returns correct number of items with infinite loading', ()
|
|
|
248
251
|
|
|
249
252
|
expect(result.current.items.length).toEqual(1000);
|
|
250
253
|
expect(result.current.itemsLeft).toEqual(0);
|
|
254
|
+
expect(result.current.renderControls).toEqual(false);
|
|
251
255
|
});
|
|
@@ -274,6 +274,8 @@ test('Renders <Pagination /> with load more button', () => {
|
|
|
274
274
|
jest.advanceTimersByTime(1);
|
|
275
275
|
// 21 because of the badge on the button
|
|
276
276
|
expect(document.querySelectorAll('.reqore-tag').length).toBe(21);
|
|
277
|
+
// Pagination should still be there
|
|
278
|
+
expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
|
|
277
279
|
});
|
|
278
280
|
|
|
279
281
|
test('Renders <Pagination /> with load more button and auto load', () => {
|
|
@@ -298,4 +300,6 @@ test('Renders <Pagination /> with load more button and auto load', () => {
|
|
|
298
300
|
|
|
299
301
|
// 21 because of the badge on the button
|
|
300
302
|
expect(document.querySelectorAll('.reqore-tag').length).toBe(1000);
|
|
303
|
+
// Pagination should be removed
|
|
304
|
+
expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(0);
|
|
301
305
|
});
|
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { TReqorePaginationType } from '../../constants/paging';
|
|
3
|
-
import { IReqorePagingOptions } from '../../hooks/usePaging';
|
|
4
3
|
import { IReqoreIconName } from '../../types/icons';
|
|
5
4
|
import { IReqoreColumnsProps } from '../Columns';
|
|
6
5
|
import { IReqoreInputProps } from '../Input';
|
|
7
|
-
import { IReqorePaginationComponentProps } from '../Paging';
|
|
8
6
|
import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
|
|
9
7
|
import { IReqoreCollectionItemProps } from './item';
|
|
10
|
-
export interface
|
|
11
|
-
pageControlsPosition?: 'top' | 'bottom' | 'both';
|
|
12
|
-
}
|
|
13
|
-
export interface IReqoreCollectionProps extends Pick<IReqorePanelProps, 'size' | 'intent' | 'customTheme' | 'actions' | 'bottomActions' | 'label' | 'headerSize' | 'badge' | 'icon' | 'flat' | 'minimal' | 'transparent' | 'fluid' | 'responsiveActions' | 'padded'>, IReqoreColumnsProps {
|
|
8
|
+
export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumnsProps {
|
|
14
9
|
items?: IReqoreCollectionItemProps[];
|
|
15
10
|
inputProps?: IReqoreInputProps;
|
|
11
|
+
inputInTitle?: boolean;
|
|
16
12
|
sortButtonProps?: IReqorePanelAction;
|
|
17
13
|
displayButtonProps?: IReqorePanelAction;
|
|
18
14
|
stacked?: boolean;
|
|
@@ -26,14 +22,14 @@ export interface IReqoreCollectionProps extends Pick<IReqorePanelProps, 'size' |
|
|
|
26
22
|
showSelectedFirst?: boolean;
|
|
27
23
|
selectedIcon?: IReqoreIconName;
|
|
28
24
|
searchDelay?: number;
|
|
29
|
-
contentRenderer?: (children: React.ReactNode, items: IReqoreCollectionItemProps[]) => React.ReactNode;
|
|
25
|
+
contentRenderer?: (children: React.ReactNode, items: IReqoreCollectionItemProps[], searchInput?: React.ReactNode) => React.ReactNode;
|
|
30
26
|
onQueryChange?: (query: string) => void;
|
|
31
27
|
emptyMessage?: string;
|
|
32
28
|
sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
|
|
33
29
|
displayButtonTooltip?: (display?: 'list' | 'grid') => string;
|
|
34
30
|
inputPlaceholder?: (items?: IReqoreCollectionItemProps[]) => string;
|
|
35
|
-
paging?: TReqorePaginationType
|
|
31
|
+
paging?: TReqorePaginationType<IReqoreCollectionItemProps>;
|
|
36
32
|
}
|
|
37
33
|
export declare const StyledCollectionWrapper: any;
|
|
38
|
-
export declare const ReqoreCollection: ({ items, columnsGap, stacked, rounded, fill, maxItemHeight, filterable, sortable, showSelectedFirst, inputProps, sortButtonProps, displayButtonProps, headerSize, showAs, selectedIcon, flat, minimal, transparent, onQueryChange, contentRenderer, searchDelay, emptyMessage, sortButtonTooltip, displayButtonTooltip, inputPlaceholder, paging, ...rest }: IReqoreCollectionProps) => JSX.Element;
|
|
34
|
+
export declare const ReqoreCollection: ({ items, columnsGap, stacked, rounded, fill, maxItemHeight, filterable, inputInTitle, sortable, showSelectedFirst, inputProps, sortButtonProps, displayButtonProps, headerSize, showAs, selectedIcon, flat, minimal, transparent, onQueryChange, contentRenderer, searchDelay, emptyMessage, sortButtonTooltip, displayButtonTooltip, inputPlaceholder, paging, height, ...rest }: IReqoreCollectionProps) => JSX.Element;
|
|
39
35
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collection/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Collection/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAiB,MAAM,YAAY,CAAC;AAEhE,OAAoB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAoC,MAAM,UAAU,CAAC;AAGnG,OAAO,EAAE,0BAA0B,EAAwB,MAAM,QAAQ,CAAC;AAE1E,MAAM,WAAW,sBAAuB,SAAQ,iBAAiB,EAAE,mBAAmB;IACpF,KAAK,CAAC,EAAE,0BAA0B,EAAE,CAAC;IACrC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,eAAe,CAAC,EAAE,CAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,KAAK,EAAE,0BAA0B,EAAE,EACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,KAC1B,KAAK,CAAC,SAAS,CAAC;IAErB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,KAAK,MAAM,CAAC;IACtD,oBAAoB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IAC7D,gBAAgB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,0BAA0B,EAAE,KAAK,MAAM,CAAC;IAEpE,MAAM,CAAC,EAAE,qBAAqB,CAAC,0BAA0B,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,uBAAuB,KAYnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,sXAoC1B,sBAAsB,gBAyOxB,CAAC"}
|
|
@@ -68,30 +68,35 @@ var lodash_1 = require("lodash");
|
|
|
68
68
|
var react_2 = require("react");
|
|
69
69
|
var react_use_1 = require("react-use");
|
|
70
70
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
71
|
-
var
|
|
71
|
+
var __1 = require("../..");
|
|
72
72
|
var sizes_1 = require("../../constants/sizes");
|
|
73
|
-
var
|
|
73
|
+
var Paging_1 = require("../../containers/Paging");
|
|
74
74
|
var Columns_1 = require("../Columns");
|
|
75
|
+
var ControlGroup_1 = __importDefault(require("../ControlGroup"));
|
|
75
76
|
var Input_1 = __importDefault(require("../Input"));
|
|
76
77
|
var Message_1 = __importDefault(require("../Message"));
|
|
77
|
-
var Paging_1 = require("../Paging");
|
|
78
78
|
var Panel_1 = require("../Panel");
|
|
79
79
|
var Spacer_1 = require("../Spacer");
|
|
80
80
|
var helpers_1 = require("../Table/helpers");
|
|
81
81
|
var item_1 = require("./item");
|
|
82
|
-
exports.StyledCollectionWrapper = (0, styled_components_1["default"])(Columns_1.StyledColumns)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", ";\n\n ", "\n\n overflow: auto;\n position: relative;\n"], ["\n height: ", ";\n\n ", "\n\n overflow: auto;\n position: relative;\n"])), function (_a) {
|
|
82
|
+
exports.StyledCollectionWrapper = (0, styled_components_1["default"])(Columns_1.StyledColumns)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: ", ";\n flex: ", ";\n\n ", "\n\n overflow: auto;\n position: relative;\n"], ["\n height: ", ";\n flex: ", ";\n\n ", "\n\n overflow: auto;\n position: relative;\n"])), function (_a) {
|
|
83
83
|
var height = _a.height;
|
|
84
84
|
return (height ? "".concat(height) : 'auto');
|
|
85
|
+
}, function (_a) {
|
|
86
|
+
var fill = _a.fill;
|
|
87
|
+
return (fill ? 1 : undefined);
|
|
85
88
|
}, function (_a) {
|
|
86
89
|
var rounded = _a.rounded, stacked = _a.stacked;
|
|
87
90
|
return (!rounded || stacked) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-radius: ", ";\n "], ["\n border-radius: ", ";\n "])), stacked && rounded ? '10px' : undefined);
|
|
88
91
|
});
|
|
89
92
|
var ReqoreCollection = function (_a) {
|
|
90
|
-
var items = _a.items, _b = _a.columnsGap, columnsGap = _b === void 0 ? '10px' : _b, stacked = _a.stacked, _c = _a.rounded, rounded = _c === void 0 ? true : _c, fill = _a.fill, maxItemHeight = _a.maxItemHeight, filterable = _a.filterable, sortable = _a.sortable, showSelectedFirst = _a.showSelectedFirst, inputProps = _a.inputProps, sortButtonProps = _a.sortButtonProps, displayButtonProps = _a.displayButtonProps,
|
|
91
|
-
var
|
|
92
|
-
var
|
|
93
|
-
var
|
|
94
|
-
var
|
|
93
|
+
var items = _a.items, _b = _a.columnsGap, columnsGap = _b === void 0 ? '10px' : _b, stacked = _a.stacked, _c = _a.rounded, rounded = _c === void 0 ? true : _c, fill = _a.fill, maxItemHeight = _a.maxItemHeight, filterable = _a.filterable, _d = _a.inputInTitle, inputInTitle = _d === void 0 ? true : _d, sortable = _a.sortable, showSelectedFirst = _a.showSelectedFirst, inputProps = _a.inputProps, sortButtonProps = _a.sortButtonProps, displayButtonProps = _a.displayButtonProps, _e = _a.headerSize, headerSize = _e === void 0 ? 2 : _e, _f = _a.showAs, showAs = _f === void 0 ? 'grid' : _f, selectedIcon = _a.selectedIcon, _g = _a.flat, flat = _g === void 0 ? true : _g, minimal = _a.minimal, _h = _a.transparent, transparent = _h === void 0 ? true : _h, onQueryChange = _a.onQueryChange, _j = _a.contentRenderer, contentRenderer = _j === void 0 ? function (children, _items, searchInput) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchInput, !!searchInput && (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreVerticalSpacer, { height: sizes_1.PADDING_FROM_SIZE.normal }), children] })); } : _j, _k = _a.searchDelay, searchDelay = _k === void 0 ? 300 : _k, _l = _a.emptyMessage, emptyMessage = _l === void 0 ? 'No data in this collection, try changing your search query or filters' : _l, _m = _a.sortButtonTooltip, sortButtonTooltip = _m === void 0 ? function (sort) { return (sort === 'desc' ? 'Sort ascending' : 'Sort descending'); } : _m, _o = _a.displayButtonTooltip, displayButtonTooltip = _o === void 0 ? function (display) { return (display === 'grid' ? 'Show as list' : 'Show as grid'); } : _o, _p = _a.inputPlaceholder, inputPlaceholder = _p === void 0 ? function (items) { return "Search in ".concat((0, lodash_1.size)(items), " items"); } : _p, paging = _a.paging, height = _a.height, rest = __rest(_a, ["items", "columnsGap", "stacked", "rounded", "fill", "maxItemHeight", "filterable", "inputInTitle", "sortable", "showSelectedFirst", "inputProps", "sortButtonProps", "displayButtonProps", "headerSize", "showAs", "selectedIcon", "flat", "minimal", "transparent", "onQueryChange", "contentRenderer", "searchDelay", "emptyMessage", "sortButtonTooltip", "displayButtonTooltip", "inputPlaceholder", "paging", "height"]);
|
|
94
|
+
var _q = (0, react_2.useState)(showAs), _showAs = _q[0], setShowAs = _q[1];
|
|
95
|
+
var _r = (0, react_2.useState)('asc'), sort = _r[0], setSort = _r[1];
|
|
96
|
+
var _s = (0, react_2.useState)(''), query = _s[0], setQuery = _s[1];
|
|
97
|
+
var _t = (0, react_2.useState)(''), preQuery = _t[0], setPreQuery = _t[1];
|
|
98
|
+
var _u = (0, react_2.useState)(undefined), contentRef = _u[0], setContentRef = _u[1];
|
|
99
|
+
var isMobile = (0, __1.useReqoreProperty)('isMobile');
|
|
95
100
|
(0, react_use_1.useUpdateEffect)(function () {
|
|
96
101
|
setShowAs(showAs);
|
|
97
102
|
}, [showAs]);
|
|
@@ -140,8 +145,6 @@ var ReqoreCollection = function (_a) {
|
|
|
140
145
|
return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
|
|
141
146
|
});
|
|
142
147
|
}, [items, query, sortedItems]);
|
|
143
|
-
var _t = (0, react_2.useMemo)(function () { return (0, paging_1.getPaginationOptionsFromType)(paging); }, [paging]), _u = _t.pagingOptions, pagingOptions = _u === void 0 ? {} : _u, _v = _t.componentOptions, componentOptions = _v === void 0 ? {} : _v, pageControlsPosition = _t.pageControlsPosition;
|
|
144
|
-
var _w = (0, usePaging_1.useReqorePaging)(__assign(__assign({ items: filteredItems }, pagingOptions), { enabled: !!paging })), finalItems = _w.items, pagingData = __rest(_w, ["items"]);
|
|
145
148
|
var handlePreQueryChange = function (event) {
|
|
146
149
|
setPreQuery(event.target.value);
|
|
147
150
|
};
|
|
@@ -149,14 +152,15 @@ var ReqoreCollection = function (_a) {
|
|
|
149
152
|
var actions = rest.actions ? __spreadArray([], rest.actions, true) : [];
|
|
150
153
|
var toolbarGroup = {
|
|
151
154
|
responsive: false,
|
|
155
|
+
fluid: isMobile,
|
|
152
156
|
group: [
|
|
153
|
-
__assign({ icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine', onClick: function () { return setShowAs(_showAs === 'grid' ? 'list' : 'grid'); }, tooltip: displayButtonTooltip(_showAs), disabled: !(0, lodash_1.size)(
|
|
157
|
+
__assign({ icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine', onClick: function () { return setShowAs(_showAs === 'grid' ? 'list' : 'grid'); }, tooltip: displayButtonTooltip(_showAs), disabled: !(0, lodash_1.size)(filteredItems), textAlign: 'center', fixed: !isMobile }, displayButtonProps),
|
|
154
158
|
]
|
|
155
159
|
};
|
|
156
160
|
if (sortable) {
|
|
157
|
-
toolbarGroup.group.push(__assign({ icon: sort === 'desc' ? 'SortDesc' : 'SortAsc', onClick: function () { return setSort(sort === 'desc' ? 'asc' : 'desc'); }, tooltip: sortButtonTooltip(sort), disabled: !(0, lodash_1.size)(
|
|
161
|
+
toolbarGroup.group.push(__assign({ icon: sort === 'desc' ? 'SortDesc' : 'SortAsc', onClick: function () { return setSort(sort === 'desc' ? 'asc' : 'desc'); }, tooltip: sortButtonTooltip(sort), disabled: !(0, lodash_1.size)(filteredItems), textAlign: 'center', fixed: !isMobile }, sortButtonProps));
|
|
158
162
|
}
|
|
159
|
-
if (filterable) {
|
|
163
|
+
if (filterable && inputInTitle) {
|
|
160
164
|
actions = __spreadArray(__spreadArray([], actions, true), [
|
|
161
165
|
{
|
|
162
166
|
as: Input_1["default"],
|
|
@@ -168,15 +172,15 @@ var ReqoreCollection = function (_a) {
|
|
|
168
172
|
], false);
|
|
169
173
|
}
|
|
170
174
|
return __spreadArray(__spreadArray([], actions, true), [toolbarGroup], false);
|
|
171
|
-
}, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable,
|
|
175
|
+
}, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, filteredItems, isMobile]);
|
|
172
176
|
var renderContent = (0, react_2.useCallback)(function () {
|
|
173
|
-
return contentRenderer((0, jsx_runtime_1.
|
|
174
|
-
(
|
|
175
|
-
|
|
176
|
-
|
|
177
|
+
return contentRenderer((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Paging_1.ReqorePaginationContainer, __assign({ items: filteredItems, type: paging, size: rest.size, scrollContainer: contentRef }, { children: function (finalItems) { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !(0, lodash_1.size)(finalItems) ? ((0, jsx_runtime_1.jsx)(Message_1["default"], __assign({ flat: true, icon: 'Search2Line' }, { children: emptyMessage }))) : ((0, jsx_runtime_1.jsx)(exports.StyledCollectionWrapper, __assign({ columns: _showAs === 'grid' ? 'auto-fit' : 1, columnsGap: stacked ? '0px' : columnsGap, rounded: rounded, stacked: stacked, fill: fill, ref: setContentRef, height: height }, { children: finalItems === null || finalItems === void 0 ? void 0 : finalItems.map(function (item, index) { return ((0, react_1.createElement)(item_1.ReqoreCollectionItem, __assign({ size: rest.size }, item, { icon: item.icon || (item.selected ? selectedIcon : undefined), key: index, rounded: !stacked, maxContentHeight: maxItemHeight }))); }) }))) })); } })) }), filteredItems, !inputInTitle && filterable ? ((0, jsx_runtime_1.jsx)(ControlGroup_1["default"], { children: (0, jsx_runtime_1.jsx)(Input_1["default"], __assign({ fixed: false, placeholder: inputPlaceholder(items), onClearClick: function () {
|
|
178
|
+
setQuery('');
|
|
179
|
+
setPreQuery('');
|
|
180
|
+
}, onChange: handlePreQueryChange, value: preQuery, icon: 'Search2Line', minimal: false, size: rest.size }, inputProps), 'search') })) : undefined);
|
|
177
181
|
}, [
|
|
178
182
|
contentRenderer,
|
|
179
|
-
|
|
183
|
+
filteredItems,
|
|
180
184
|
_showAs,
|
|
181
185
|
columnsGap,
|
|
182
186
|
emptyMessage,
|
|
@@ -187,7 +191,12 @@ var ReqoreCollection = function (_a) {
|
|
|
187
191
|
lodash_1.size,
|
|
188
192
|
stacked,
|
|
189
193
|
]);
|
|
190
|
-
|
|
194
|
+
console.log(rest);
|
|
195
|
+
return ((0, jsx_runtime_1.jsx)(Panel_1.ReqorePanel, __assign({}, rest, { headerSize: headerSize, style: __assign({}, rest.style), fill: fill, contentStyle: {
|
|
196
|
+
overflow: fill ? 'hidden' : 'auto',
|
|
197
|
+
display: 'flex',
|
|
198
|
+
flexFlow: 'column'
|
|
199
|
+
}, transparent: transparent, minimal: minimal, flat: flat, actions: finalActions, className: "reqore-collection ".concat(rest.className || '') }, { children: renderContent() })));
|
|
191
200
|
};
|
|
192
201
|
exports.ReqoreCollection = ReqoreCollection;
|
|
193
202
|
var templateObject_1, templateObject_2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Collection/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA8B;AAC9B,+BAAuD;AACvD,uCAAyD;AACzD,qEAAgD;AAChD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Collection/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { TReqorePaginationType } from '../../constants/paging';
|
|
2
3
|
import { IPopoverOptions } from '../../hooks/usePopover';
|
|
3
4
|
import { IReqoreIconName } from '../../types/icons';
|
|
4
5
|
import { IReqoreButtonProps } from '../Button';
|
|
5
6
|
import { IReqoreInputProps } from '../Input';
|
|
7
|
+
import { IReqorePanelProps } from '../Panel';
|
|
6
8
|
import { IReqoreDropdownItem, TDropdownItemOnClick } from './list';
|
|
7
9
|
export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'openOnMount'>> {
|
|
8
10
|
items?: IReqoreDropdownItem[];
|
|
@@ -22,9 +24,11 @@ export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'ope
|
|
|
22
24
|
onItemSelect?: TDropdownItemOnClick;
|
|
23
25
|
style?: React.CSSProperties;
|
|
24
26
|
inputProps?: IReqoreInputProps;
|
|
27
|
+
wrapperProps?: IReqorePanelProps;
|
|
25
28
|
scrollToSelected?: boolean;
|
|
29
|
+
paging?: TReqorePaginationType<IReqoreDropdownItem>;
|
|
26
30
|
}
|
|
27
|
-
declare function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({ items, component, label, children, multiSelect, buttonStyle, listStyle, handler, placement, filterable, icon, rightIcon, caretPosition, isDefaultOpen, onItemSelect, closeOnOutsideClick, blur, closeOnAnyClick, content, delay, maxHeight, maxWidth, noArrow, transparent, show, targetElement, useTargetWidth, listWidth, listHeight, passPopoverData, inputProps, scrollToSelected, ...rest }: IReqoreDropdownProps & T): JSX.Element;
|
|
31
|
+
declare function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({ items, component, label, children, multiSelect, buttonStyle, listStyle, handler, placement, filterable, icon, rightIcon, caretPosition, isDefaultOpen, onItemSelect, closeOnOutsideClick, blur, closeOnAnyClick, content, delay, maxHeight, maxWidth, noArrow, transparent, show, targetElement, useTargetWidth, listWidth, listHeight, passPopoverData, inputProps, scrollToSelected, wrapperProps, paging, ...rest }: IReqoreDropdownProps & T): JSX.Element;
|
|
28
32
|
declare const _default: typeof ReqoreDropdown;
|
|
29
33
|
export default _default;
|
|
30
34
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAqB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAA2B,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAEvF,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAqB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7C,OAA2B,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAEvF,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;CACrD;AAED,iBAAS,cAAc,CAAC,CAAC,SAAS,OAAO,GAAG,kBAAkB,EAAE,EAC9D,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,WAAW,EACX,SAAS,EACT,OAAO,EACP,SAAS,EACT,UAAU,EACV,IAAI,EACJ,SAAS,EACT,aAAsB,EACtB,aAAqB,EACrB,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,eAAe,EACf,OAAO,EACP,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAc,EACd,WAAW,EACX,IAAI,EACJ,aAAa,EACb,cAAc,EACd,SAAS,EACT,UAAU,EACV,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,GAAG,IAAI,EACR,EAAE,oBAAoB,GAAG,CAAC,eAyD1B;;AAED,wBAA6D"}
|
|
@@ -32,12 +32,12 @@ var __1 = require("../..");
|
|
|
32
32
|
var Button_1 = __importDefault(require("../Button"));
|
|
33
33
|
var list_1 = __importDefault(require("./list"));
|
|
34
34
|
function ReqoreDropdown(_a) {
|
|
35
|
-
var items = _a.items, component = _a.component, label = _a.label, children = _a.children, multiSelect = _a.multiSelect, buttonStyle = _a.buttonStyle, listStyle = _a.listStyle, handler = _a.handler, placement = _a.placement, filterable = _a.filterable, icon = _a.icon, rightIcon = _a.rightIcon, _b = _a.caretPosition, caretPosition = _b === void 0 ? 'left' : _b, _c = _a.isDefaultOpen, isDefaultOpen = _c === void 0 ? false : _c, onItemSelect = _a.onItemSelect, closeOnOutsideClick = _a.closeOnOutsideClick, blur = _a.blur, closeOnAnyClick = _a.closeOnAnyClick, content = _a.content, delay = _a.delay, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, _d = _a.noArrow, noArrow = _d === void 0 ? true : _d, transparent = _a.transparent, show = _a.show, targetElement = _a.targetElement, useTargetWidth = _a.useTargetWidth, listWidth = _a.listWidth, listHeight = _a.listHeight, passPopoverData = _a.passPopoverData, inputProps = _a.inputProps, scrollToSelected = _a.scrollToSelected, rest = __rest(_a, ["items", "component", "label", "children", "multiSelect", "buttonStyle", "listStyle", "handler", "placement", "filterable", "icon", "rightIcon", "caretPosition", "isDefaultOpen", "onItemSelect", "closeOnOutsideClick", "blur", "closeOnAnyClick", "content", "delay", "maxHeight", "maxWidth", "noArrow", "transparent", "show", "targetElement", "useTargetWidth", "listWidth", "listHeight", "passPopoverData", "inputProps", "scrollToSelected"]);
|
|
35
|
+
var items = _a.items, component = _a.component, label = _a.label, children = _a.children, multiSelect = _a.multiSelect, buttonStyle = _a.buttonStyle, listStyle = _a.listStyle, handler = _a.handler, placement = _a.placement, filterable = _a.filterable, icon = _a.icon, rightIcon = _a.rightIcon, _b = _a.caretPosition, caretPosition = _b === void 0 ? 'left' : _b, _c = _a.isDefaultOpen, isDefaultOpen = _c === void 0 ? false : _c, onItemSelect = _a.onItemSelect, closeOnOutsideClick = _a.closeOnOutsideClick, blur = _a.blur, closeOnAnyClick = _a.closeOnAnyClick, content = _a.content, delay = _a.delay, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, _d = _a.noArrow, noArrow = _d === void 0 ? true : _d, transparent = _a.transparent, show = _a.show, targetElement = _a.targetElement, useTargetWidth = _a.useTargetWidth, listWidth = _a.listWidth, listHeight = _a.listHeight, passPopoverData = _a.passPopoverData, inputProps = _a.inputProps, scrollToSelected = _a.scrollToSelected, wrapperProps = _a.wrapperProps, paging = _a.paging, rest = __rest(_a, ["items", "component", "label", "children", "multiSelect", "buttonStyle", "listStyle", "handler", "placement", "filterable", "icon", "rightIcon", "caretPosition", "isDefaultOpen", "onItemSelect", "closeOnOutsideClick", "blur", "closeOnAnyClick", "content", "delay", "maxHeight", "maxWidth", "noArrow", "transparent", "show", "targetElement", "useTargetWidth", "listWidth", "listHeight", "passPopoverData", "inputProps", "scrollToSelected", "wrapperProps", "paging"]);
|
|
36
36
|
var componentProps = (0, react_1.useMemo)(function () {
|
|
37
37
|
return (__assign(__assign({}, rest), { icon: caretPosition === 'left' ? icon || 'ArrowDownSFill' : rightIcon, rightIcon: caretPosition === 'right' ? icon || 'ArrowDownSFill' : rightIcon, style: buttonStyle || rest.style, disabled: !(0, lodash_1.size)(items) || rest.disabled, className: "".concat((rest === null || rest === void 0 ? void 0 : rest.className) || '', " reqore-dropdown-control") }));
|
|
38
38
|
}, [items, icon, rightIcon, buttonStyle, caretPosition, rest]);
|
|
39
39
|
var popoverContent = (0, react_1.useMemo)(function () {
|
|
40
|
-
return (0, lodash_1.size)(items) ? ((0, jsx_runtime_1.jsx)(list_1["default"], { multiSelect: multiSelect, listStyle: listStyle, width: useTargetWidth ? '100%' : listWidth, height: listHeight, items: items, filterable: filterable, onItemSelect: onItemSelect, inputProps: inputProps, scrollToSelected: scrollToSelected })) : undefined;
|
|
40
|
+
return (0, lodash_1.size)(items) ? ((0, jsx_runtime_1.jsx)(__1.ReqorePanel, __assign({ flat: true, size: 'small' }, wrapperProps, { children: (0, jsx_runtime_1.jsx)(list_1["default"], { multiSelect: multiSelect, listStyle: listStyle, width: useTargetWidth ? '100%' : listWidth, height: listHeight, items: items, filterable: filterable, onItemSelect: onItemSelect, inputProps: inputProps, scrollToSelected: scrollToSelected, paging: paging }) }))) : undefined;
|
|
41
41
|
}, [items]);
|
|
42
42
|
return ((0, jsx_runtime_1.jsx)(__1.ReqorePopover, __assign({ closeOnOutsideClick: closeOnOutsideClick, blur: blur, closeOnAnyClick: closeOnAnyClick, delay: delay, maxHeight: maxHeight, maxWidth: maxWidth, noArrow: noArrow, transparent: transparent, useTargetWidth: useTargetWidth, component: component || Button_1["default"], componentProps: componentProps, isReqoreComponent: true, noWrapper: true, placement: placement || 'bottom-start', handler: handler || 'click', openOnMount: isDefaultOpen, content: popoverContent, passPopoverData: passPopoverData }, { children: children || label })));
|
|
43
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA8B;AAC9B,+BAA6C;AAC7C,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Dropdown/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { TReqorePaginationType } from '../../constants/paging';
|
|
2
3
|
import { IReqoreComponent } from '../../types/global';
|
|
3
4
|
import { IReqoreInputProps } from '../Input';
|
|
4
5
|
import { IReqoreMenuItemProps } from '../Menu/item';
|
|
@@ -21,7 +22,8 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
|
|
|
21
22
|
onItemSelect?: TDropdownItemOnClick;
|
|
22
23
|
inputProps?: IReqoreInputProps;
|
|
23
24
|
scrollToSelected?: boolean;
|
|
25
|
+
paging?: TReqorePaginationType<TReqoreDropdownItem>;
|
|
24
26
|
}
|
|
25
|
-
declare const ReqoreDropdownList: React.MemoExoticComponent<({ items, multiSelect, listStyle, _popoverId, filterable, width, height, onItemSelect, inputProps, scrollToSelected, }: IReqoreDropdownListProps) => JSX.Element>;
|
|
27
|
+
declare const ReqoreDropdownList: React.MemoExoticComponent<({ items, multiSelect, listStyle, _popoverId, filterable, width, height, onItemSelect, inputProps, scrollToSelected, paging, }: IReqoreDropdownListProps) => JSX.Element>;
|
|
26
28
|
export default ReqoreDropdownList;
|
|
27
29
|
//# sourceMappingURL=list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/list.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/list.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAoB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG1D,OAAuB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;AACvE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,SAAS,GAAG,WAAW,GAAG,kBAAkB,CAAC;IAChF,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CAC5C;AAED,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AACtD,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,EAAE,CAAC;AAEzD,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAChE,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;CACrD;AAED,QAAA,MAAM,kBAAkB,4JAanB,wBAAwB,iBA2F5B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -26,15 +26,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
26
26
|
};
|
|
27
27
|
exports.__esModule = true;
|
|
28
28
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
29
|
+
var lodash_1 = require("lodash");
|
|
29
30
|
var react_1 = require("react");
|
|
31
|
+
var sizes_1 = require("../../constants/sizes");
|
|
32
|
+
var Paging_1 = require("../../containers/Paging");
|
|
30
33
|
var Input_1 = __importDefault(require("../Input"));
|
|
31
34
|
var Menu_1 = __importDefault(require("../Menu"));
|
|
32
35
|
var divider_1 = __importDefault(require("../Menu/divider"));
|
|
33
36
|
var item_1 = __importDefault(require("../Menu/item"));
|
|
37
|
+
var Spacer_1 = require("../Spacer");
|
|
34
38
|
var ReqoreDropdownList = (0, react_1.memo)(function (_a) {
|
|
35
|
-
var items = _a.items, multiSelect = _a.multiSelect, listStyle = _a.listStyle, _popoverId = _a._popoverId, filterable = _a.filterable, width = _a.width, height = _a.height, onItemSelect = _a.onItemSelect, inputProps = _a.inputProps, scrollToSelected = _a.scrollToSelected;
|
|
39
|
+
var items = _a.items, multiSelect = _a.multiSelect, listStyle = _a.listStyle, _popoverId = _a._popoverId, filterable = _a.filterable, width = _a.width, height = _a.height, onItemSelect = _a.onItemSelect, inputProps = _a.inputProps, scrollToSelected = _a.scrollToSelected, paging = _a.paging;
|
|
36
40
|
var _b = (0, react_1.useState)(items), _items = _b[0], setItems = _b[1];
|
|
37
41
|
var _c = (0, react_1.useState)(''), query = _c[0], setQuery = _c[1];
|
|
42
|
+
var _d = (0, react_1.useState)(undefined), menuRef = _d[0], setMenuRef = _d[1];
|
|
38
43
|
(0, react_1.useEffect)(function () {
|
|
39
44
|
setItems(items);
|
|
40
45
|
}, [items]);
|
|
@@ -64,10 +69,13 @@ var ReqoreDropdownList = (0, react_1.memo)(function (_a) {
|
|
|
64
69
|
onItemSelect(item);
|
|
65
70
|
}
|
|
66
71
|
};
|
|
67
|
-
return ((0, jsx_runtime_1.jsxs)(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
72
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filterable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Input_1["default"], __assign({ value: query, icon: 'SearchLine', onChange: handleQueryChange, placeholder: "Search ".concat((0, lodash_1.size)(_items), " items..."), onClearClick: function () { return setQuery(''); } }, inputProps)), (0, jsx_runtime_1.jsx)(Spacer_1.ReqoreVerticalSpacer, { height: sizes_1.PADDING_FROM_SIZE.normal })] })), (0, jsx_runtime_1.jsx)(Paging_1.ReqorePaginationContainer, __assign({ type: paging, items: filteredItems, scrollContainer: menuRef }, { children: function (finalItems, Controls, _a) {
|
|
73
|
+
var includeBottomControls = _a.includeBottomControls;
|
|
74
|
+
return ((0, jsx_runtime_1.jsxs)(Menu_1["default"], __assign({ _insidePopover: !multiSelect, _popoverId: _popoverId, style: listStyle, width: width, maxHeight: height || '300px', padded: false, ref: setMenuRef }, { children: [finalItems.map(function (_a, index) {
|
|
75
|
+
var onClick = _a.onClick, dividerAlign = _a.dividerAlign, divider = _a.divider, item = __rest(_a, ["onClick", "dividerAlign", "divider"]);
|
|
76
|
+
return divider ? ((0, jsx_runtime_1.jsx)(divider_1["default"], __assign({}, item, { align: dividerAlign }), index)) : ((0, jsx_runtime_1.jsx)(item_1["default"], __assign({}, item, { label: item.label || item.value, onClick: function () { return handleItemClick(__assign(__assign({}, item), { onClick: onClick })); }, rightIcon: item.selected ? 'CheckLine' : undefined, scrollIntoView: scrollToSelected && item.selected && !multiSelect }), index));
|
|
77
|
+
}), !includeBottomControls && (0, jsx_runtime_1.jsx)(Controls, {})] })));
|
|
78
|
+
} }))] }));
|
|
71
79
|
});
|
|
72
80
|
exports["default"] = ReqoreDropdownList;
|
|
73
81
|
//# sourceMappingURL=list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/Dropdown/list.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAkE;AAElE,mDAA0D;AAC1D,iDAAiC;AACjC,4DAAgD;AAChD,sDAAoE;
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/Dropdown/list.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAIxF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElG,MAAM,WAAW,gBACf,SAAQ,gBAAgB,EACtB,kBAAkB,EAClB,sBAAsB,EACtB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAIxF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElG,MAAM,WAAW,gBACf,SAAQ,gBAAgB,EACtB,kBAAkB,EAClB,sBAAsB,EACtB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,QAAQ,EAAE,GAAG,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,KAAK,EAAE,YAAY,CAAC;CACrB;AA6BD,QAAA,MAAM,UAAU,yFA4Cf,CAAC;AAEF,eAAe,UAAU,CAAC"}
|