@pingux/astro 2.7.0-alpha.1 → 2.7.0-alpha.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.
Files changed (67) hide show
  1. package/lib/cjs/components/IconButton/IconButton.js +38 -2
  2. package/lib/cjs/components/IconButton/IconButton.stories.js +34 -2
  3. package/lib/cjs/components/ListView/ListView.js +9 -0
  4. package/lib/cjs/components/ListView/ListView.stories.js +80 -34
  5. package/lib/cjs/components/ListViewItem/ListViewItem.styles.js +1 -6
  6. package/lib/cjs/components/Menu/Menu.js +60 -7
  7. package/lib/cjs/components/Menu/Menu.stories.js +56 -2
  8. package/lib/cjs/components/SwitchField/SwitchField.js +54 -12
  9. package/lib/cjs/components/SwitchField/SwitchField.stories.js +34 -2
  10. package/lib/cjs/components/SwitchField/SwitchField.test.js +5 -4
  11. package/lib/cjs/index.js +1 -33
  12. package/lib/cjs/utils/docUtils/ariaAttributes.js +1 -2
  13. package/lib/cjs/utils/docUtils/hoverProps.js +2 -7
  14. package/lib/components/IconButton/IconButton.js +38 -2
  15. package/lib/components/IconButton/IconButton.stories.js +34 -2
  16. package/lib/components/ListView/ListView.js +9 -0
  17. package/lib/components/ListView/ListView.stories.js +82 -35
  18. package/lib/components/ListViewItem/ListViewItem.styles.js +1 -6
  19. package/lib/components/Menu/Menu.js +60 -7
  20. package/lib/components/Menu/Menu.stories.js +57 -2
  21. package/lib/components/SwitchField/SwitchField.js +55 -14
  22. package/lib/components/SwitchField/SwitchField.stories.js +34 -2
  23. package/lib/components/SwitchField/SwitchField.test.js +5 -4
  24. package/lib/index.js +1 -7
  25. package/lib/utils/docUtils/ariaAttributes.js +1 -1
  26. package/lib/utils/docUtils/hoverProps.js +2 -7
  27. package/package.json +1 -1
  28. package/lib/cjs/components/IconButton/iconButtonAttributes.js +0 -100
  29. package/lib/cjs/components/Menu/menuAttributes.js +0 -104
  30. package/lib/cjs/components/SwitchField/switchFieldAttributes.js +0 -191
  31. package/lib/cjs/experimental/StyledListItem/StyledListItem.js +0 -159
  32. package/lib/cjs/experimental/StyledListItem/StyledListItem.stories.js +0 -155
  33. package/lib/cjs/experimental/StyledListItem/StyledListItem.test.js +0 -83
  34. package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.js +0 -34
  35. package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.stories.js +0 -31
  36. package/lib/cjs/experimental/StyledListItem/controls/ListItemEditButton.test.js +0 -25
  37. package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.js +0 -37
  38. package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.stories.js +0 -36
  39. package/lib/cjs/experimental/StyledListItem/controls/ListItemMenu.test.js +0 -59
  40. package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.js +0 -32
  41. package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +0 -41
  42. package/lib/cjs/experimental/StyledListItem/controls/ListItemSwitchField.test.js +0 -25
  43. package/lib/cjs/experimental/StyledListItem/styledListItemAttributes.js +0 -81
  44. package/lib/cjs/experimental/recipes/ListAndPanel.stories.js +0 -370
  45. package/lib/cjs/experimental/recipes/ScrollableListView.stories.js +0 -108
  46. package/lib/cjs/experimental/recipes/items.js +0 -126
  47. package/lib/cjs/utils/docUtils/docArgTypes.js +0 -41
  48. package/lib/components/IconButton/iconButtonAttributes.js +0 -91
  49. package/lib/components/Menu/menuAttributes.js +0 -95
  50. package/lib/components/SwitchField/switchFieldAttributes.js +0 -182
  51. package/lib/experimental/StyledListItem/StyledListItem.js +0 -146
  52. package/lib/experimental/StyledListItem/StyledListItem.stories.js +0 -140
  53. package/lib/experimental/StyledListItem/StyledListItem.test.js +0 -74
  54. package/lib/experimental/StyledListItem/controls/ListItemEditButton.js +0 -25
  55. package/lib/experimental/StyledListItem/controls/ListItemEditButton.stories.js +0 -21
  56. package/lib/experimental/StyledListItem/controls/ListItemEditButton.test.js +0 -22
  57. package/lib/experimental/StyledListItem/controls/ListItemMenu.js +0 -28
  58. package/lib/experimental/StyledListItem/controls/ListItemMenu.stories.js +0 -26
  59. package/lib/experimental/StyledListItem/controls/ListItemMenu.test.js +0 -56
  60. package/lib/experimental/StyledListItem/controls/ListItemSwitchField.js +0 -23
  61. package/lib/experimental/StyledListItem/controls/ListItemSwitchField.stories.js +0 -32
  62. package/lib/experimental/StyledListItem/controls/ListItemSwitchField.test.js +0 -22
  63. package/lib/experimental/StyledListItem/styledListItemAttributes.js +0 -72
  64. package/lib/experimental/recipes/ListAndPanel.stories.js +0 -353
  65. package/lib/experimental/recipes/ScrollableListView.stories.js +0 -93
  66. package/lib/experimental/recipes/items.js +0 -117
  67. package/lib/utils/docUtils/docArgTypes.js +0 -29
@@ -1,370 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
- _Object$defineProperty(exports, "__esModule", {
9
- value: true
10
- });
11
- exports["default"] = exports.PanelHeader = exports.ListElement = exports.ListAndPanel = void 0;
12
- var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
13
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
15
- var _react = _interopRequireWildcard(require("react"));
16
- var _reactAria = require("react-aria");
17
- var _reactStately = require("react-stately");
18
- var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
19
- var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
20
- var _MoreVertIcon = _interopRequireDefault(require("@pingux/mdi-react/MoreVertIcon"));
21
- var _PencilIcon = _interopRequireDefault(require("@pingux/mdi-react/PencilIcon"));
22
- var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
23
- var _hooks = require("../../hooks");
24
- var _useOverlappingMenuHoverState = _interopRequireDefault(require("../../hooks/useOverlappingMenuHoverState"));
25
- var _index = require("../../index");
26
- var _items = require("./items");
27
- var _react2 = require("@emotion/react");
28
- function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
30
- var _default = {
31
- title: 'Experimental/Recipes/ListAndPanel',
32
- parameters: {
33
- docs: {
34
- source: {
35
- type: 'code'
36
- }
37
- }
38
- }
39
- };
40
- exports["default"] = _default;
41
- var sx = {
42
- wrapper: {
43
- px: 'lg',
44
- py: 'lg',
45
- bg: 'accent.99',
46
- height: '900px',
47
- overflowY: 'scroll'
48
- },
49
- separator: {
50
- bg: 'accent.90'
51
- },
52
- tabsWrapper: {
53
- px: 'lg',
54
- pt: 'xs'
55
- },
56
- iconButton: {
57
- position: 'absolute',
58
- top: 0,
59
- right: 0
60
- },
61
- itemLabel: {
62
- fontSize: 'sm',
63
- fontWeight: 3,
64
- lineHeight: '16px',
65
- mb: 'xs'
66
- },
67
- itemValue: {
68
- fontWeight: 0,
69
- lineHeight: '18px',
70
- mb: 'md'
71
- },
72
- panelHeader: {
73
- container: {
74
- bg: 'accent.99',
75
- minHeight: 58,
76
- ml: 0,
77
- pl: 14,
78
- pr: 'xs'
79
- },
80
- controls: {
81
- alignSelf: 'center',
82
- ml: 'auto',
83
- pr: 'sm'
84
- },
85
- details: {
86
- alignItems: 'center'
87
- },
88
- subtitle: {
89
- alignSelf: 'start',
90
- fontSize: 'sm',
91
- lineHeight: '16px',
92
- my: '1px'
93
- },
94
- title: {
95
- alignSelf: 'start',
96
- fontSize: 'md'
97
- },
98
- wrapper: {
99
- cursor: 'pointer',
100
- display: 'flex',
101
- flex: '1 1 0px',
102
- ml: 'md'
103
- }
104
- }
105
- };
106
- var heading = 'Users';
107
- var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
108
- var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
109
- align: "center",
110
- isRow: true,
111
- mb: "xs",
112
- role: "heading",
113
- "aria-level": "1"
114
- }, (0, _react2.jsx)(_index.Text, {
115
- fontSize: "xx",
116
- fontWeight: 3,
117
- fontColor: "text.primary"
118
- }, heading), (0, _react2.jsx)(_index.IconButton, {
119
- "aria-label": "icon button",
120
- ml: "sm",
121
- variant: "inverted"
122
- }, (0, _react2.jsx)(_index.Icon, {
123
- icon: _PlusIcon["default"],
124
- size: "sm"
125
- }))), (0, _react2.jsx)(_index.Text, {
126
- fontSize: "sm",
127
- color: "text.secondary",
128
- fontWeight: 0,
129
- width: "800px"
130
- }, description, (0, _react2.jsx)(_index.Link, {
131
- href: "https://uilibrary.ping-eng.com/",
132
- sx: {
133
- fontSize: '13px'
134
- }
135
- }, " Learn more")));
136
- var ListAndPanel = function ListAndPanel() {
137
- // Example of items data structure
138
- // const items = [
139
- // {
140
- // email: 'dburkitt5@columbia.edu',
141
- // firstName: 'Nicola',
142
- // lastName: 'Burkitt',
143
- // hasIcon: true,
144
- // icon: AccountIcon,
145
- // linkProps: { href: 'https://pingidentity.com/' },
146
- // },
147
- // ]
148
-
149
- var _useState = (0, _react.useState)(),
150
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
151
- selectedItemId = _useState2[0],
152
- setSelectedItemId = _useState2[1];
153
- var _useState3 = (0, _react.useState)(),
154
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
155
- selectedKeys = _useState4[0],
156
- setSelectedKeys = _useState4[1];
157
- var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
158
- panelState = _useOverlayPanelState.state,
159
- onPanelClose = _useOverlayPanelState.onClose;
160
- var panelTriggerRef = (0, _react.useRef)();
161
- var closePanelHandler = function closePanelHandler() {
162
- onPanelClose(panelState, panelTriggerRef);
163
- setSelectedItemId(-1);
164
- setSelectedKeys([]);
165
- };
166
- var selectItemHandler = function selectItemHandler(e) {
167
- if (e.size) {
168
- setSelectedItemId((0, _findIndex["default"])(_items.items).call(_items.items, function (item) {
169
- return item.email === e.currentKey;
170
- }));
171
- setSelectedKeys([e.currentKey]);
172
- panelState.open();
173
- } else {
174
- closePanelHandler();
175
- }
176
- };
177
- return (0, _react2.jsx)(_index.Box, {
178
- sx: sx.wrapper
179
- }, title, (0, _react2.jsx)(_index.SearchField, {
180
- position: "fixed",
181
- mb: "lg",
182
- mt: "lg",
183
- width: "400px",
184
- placeholder: "Search",
185
- "aria-label": "search"
186
- }), (0, _react2.jsx)(_index.Separator, {
187
- margin: 0
188
- }), (0, _react2.jsx)(_index.ListView, {
189
- items: _items.items,
190
- onSelectionChange: selectItemHandler,
191
- ref: panelTriggerRef,
192
- selectedKeys: selectedKeys
193
- }, function (item) {
194
- return (0, _react2.jsx)(_reactStately.Item, {
195
- key: item.email,
196
- textValue: item.email,
197
- hasSeparator: item.hasSeparator
198
- // ListView wraps ListItems with padding and height styles, when using the
199
- // StyledListItem use the `listViewItem.styledListItem` variant to override this.
200
- ,
201
- listItemProps: {
202
- variant: 'listViewItem.styledListItem'
203
- }
204
- }, (0, _react2.jsx)(ListElement, {
205
- item: item
206
- }));
207
- }), (0, _react2.jsx)(_index.OverlayPanel, {
208
- isOpen: panelState.isOpen,
209
- state: panelState,
210
- triggerRef: panelTriggerRef,
211
- p: 0,
212
- size: "large"
213
- }, panelState.isOpen && (0, _react2.jsx)(_reactAria.FocusScope, {
214
- contain: true,
215
- restoreFocus: true,
216
- autoFocus: true
217
- }, (0, _react2.jsx)(PanelHeader, {
218
- item: selectedItemId >= 0 ? _items.items[selectedItemId] : [],
219
- onClosePanel: closePanelHandler
220
- }), (0, _react2.jsx)(_index.Separator, {
221
- margin: 0,
222
- sx: sx.separator
223
- }), (0, _react2.jsx)(_index.Box, {
224
- sx: sx.tabsWrapper
225
- }, (0, _react2.jsx)(_index.Tabs, {
226
- tabListProps: {
227
- justifyContent: 'center'
228
- },
229
- tabPanelProps: {
230
- sx: {
231
- position: 'relative'
232
- }
233
- }
234
- }, (0, _react2.jsx)(_index.Tab, {
235
- title: "Profile"
236
- }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
237
- variant: "inverted",
238
- "aria-label": "pencil icon button",
239
- sx: sx.iconButton
240
- }, (0, _react2.jsx)(_index.Icon, {
241
- icon: _PencilIcon["default"],
242
- size: "sm"
243
- })), (0, _react2.jsx)(_index.Text, {
244
- sx: sx.itemLabel
245
- }, "Full Name"), (0, _react2.jsx)(_index.Text, {
246
- sx: sx.itemValue
247
- }, _items.items[selectedItemId].firstName, ' ', _items.items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
248
- sx: sx.itemLabel
249
- }, "First Name"), (0, _react2.jsx)(_index.Text, {
250
- sx: sx.itemValue
251
- }, _items.items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
252
- sx: sx.itemLabel
253
- }, "Last Name"), (0, _react2.jsx)(_index.Text, {
254
- sx: sx.itemValue
255
- }, _items.items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
256
- sx: sx.itemLabel
257
- }, "Email"), (0, _react2.jsx)(_index.Text, {
258
- sx: sx.itemValue
259
- }, _items.items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
260
- title: "Group Memberships"
261
- }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
262
- title: "Account Info"
263
- }, (0, _react2.jsx)(_index.Text, null, "Account Info")))))));
264
- };
265
- exports.ListAndPanel = ListAndPanel;
266
- var ListElement = function ListElement(_ref) {
267
- var _context;
268
- var _ref$item = _ref.item,
269
- item = _ref$item === void 0 ? {
270
- email: '',
271
- icon: _AccountIcon["default"],
272
- firstName: 'John',
273
- lastName: 'Doe'
274
- } : _ref$item;
275
- var listItemRef = (0, _react.useRef)();
276
- var _useOverlappingMenuHo = (0, _useOverlappingMenuHoverState["default"])({
277
- listItemRef: listItemRef
278
- }),
279
- handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
280
- handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
281
- handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
282
- handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
283
- isHovered = _useOverlappingMenuHo.isHovered;
284
- var icon = item.icon,
285
- email = item.email,
286
- firstName = item.firstName,
287
- lastName = item.lastName,
288
- linkProps = item.linkProps;
289
- var text = (0, _concat["default"])(_context = "".concat(lastName, ", ")).call(_context, firstName);
290
- return (0, _react2.jsx)(_index.StyledListItem, {
291
- details: {
292
- icon: icon,
293
- subtext: email,
294
- text: text
295
- },
296
- isHovered: isHovered,
297
- onHoverEnd: handleHoverEnd,
298
- onHoverStart: handleHoverStart,
299
- onMouseMove: handleMouseMove,
300
- linkProps: linkProps,
301
- ref: listItemRef
302
- }, (0, _react2.jsx)(_index.ListItemSwitchField, null), (0, _react2.jsx)(_index.ListItemMenu, {
303
- onAction: handleHoverEnd,
304
- onHoverEnd: handleMenuHoverEnd,
305
- onHoverStart: handleHoverStart
306
- }, (0, _react2.jsx)(_reactStately.Item, {
307
- key: "enable"
308
- }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
309
- key: "disable"
310
- }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
311
- key: "delete"
312
- }, "Delete user")));
313
- };
314
- exports.ListElement = ListElement;
315
- var PanelHeader = function PanelHeader(_ref2) {
316
- var _context2;
317
- var _ref2$item = _ref2.item,
318
- item = _ref2$item === void 0 ? {
319
- email: '',
320
- icon: _AccountIcon["default"],
321
- firstName: 'John',
322
- lastName: 'Doe'
323
- } : _ref2$item,
324
- onClosePanel = _ref2.onClosePanel;
325
- var email = item.email,
326
- firstName = item.firstName,
327
- lastName = item.lastName;
328
- var text = (0, _concat["default"])(_context2 = "".concat(lastName, ", ")).call(_context2, firstName);
329
- return (0, _react2.jsx)(_index.Box, {
330
- sx: sx.panelHeader.container
331
- }, (0, _react2.jsx)(_index.Box, {
332
- isRow: true,
333
- sx: sx.panelHeader.wrapper
334
- }, (0, _react2.jsx)(_index.Box, {
335
- isRow: true,
336
- sx: sx.panelHeader.details
337
- }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
338
- variant: "bodyStrong",
339
- sx: sx.panelHeader.title
340
- }, text), (0, _react2.jsx)(_index.Text, {
341
- variant: "subtitle",
342
- sx: sx.panelHeader.subtitle
343
- }, email))), (0, _react2.jsx)(_index.Box, {
344
- isRow: true,
345
- sx: sx.panelHeader.controls
346
- }, (0, _react2.jsx)(_index.SwitchField, {
347
- "aria-label": "active user",
348
- isDefaultSelected: true,
349
- alignSelf: "center",
350
- mr: "xs"
351
- }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
352
- "aria-label": "more"
353
- }, (0, _react2.jsx)(_index.Icon, {
354
- icon: _MoreVertIcon["default"],
355
- size: "md"
356
- })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_reactStately.Item, {
357
- key: "enable"
358
- }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
359
- key: "disable"
360
- }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
361
- key: "delete"
362
- }, "Delete user"))), (0, _react2.jsx)(_index.IconButton, {
363
- "aria-label": "close icon button",
364
- onPress: onClosePanel
365
- }, (0, _react2.jsx)(_index.Icon, {
366
- size: "sm",
367
- icon: _CloseIcon["default"]
368
- })))));
369
- };
370
- exports.PanelHeader = PanelHeader;
@@ -1,108 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
- _Object$defineProperty(exports, "__esModule", {
9
- value: true
10
- });
11
- exports["default"] = exports.ScrollableListView = void 0;
12
- var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
13
- var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
14
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
15
- var _react = _interopRequireWildcard(require("react"));
16
- var _reactStately = require("react-stately");
17
- var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
18
- var _index = require("../../index");
19
- var _react2 = require("@emotion/react");
20
- function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
22
- var _default = {
23
- title: 'Experimental/recipes/ScrollableListView'
24
- };
25
- exports["default"] = _default;
26
- var ScrollableListView = function ScrollableListView() {
27
- var unfilteredItems = [{
28
- key: 'Aardvark',
29
- name: 'Aardvark',
30
- id: '1'
31
- }, {
32
- key: 'Kangaroo',
33
- name: 'Kangaroo',
34
- id: '2'
35
- }, {
36
- key: 'Snake',
37
- name: 'Snake',
38
- id: '3'
39
- }, {
40
- key: 'Dog',
41
- name: 'Dog',
42
- id: '4'
43
- }, {
44
- key: 'Cat',
45
- name: 'Cat',
46
- id: '5'
47
- }, {
48
- key: 'Mouse',
49
- name: 'Mouse',
50
- id: '6'
51
- }, {
52
- key: 'Jaguar',
53
- name: 'Jaguar',
54
- id: '7'
55
- }, {
56
- key: 'Elephant',
57
- name: 'Elephant',
58
- id: '7'
59
- }];
60
- var _useState = (0, _react.useState)(''),
61
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
62
- value = _useState2[0],
63
- setValue = _useState2[1];
64
- var _useState3 = (0, _react.useState)(unfilteredItems),
65
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
66
- scrollableListViewItems = _useState4[0],
67
- setScrollableListViewItems = _useState4[1];
68
- var filterItems = function filterItems(input) {
69
- var filtered = (0, _filter["default"])(unfilteredItems).call(unfilteredItems, function (obj) {
70
- var _context;
71
- return (0, _includes["default"])(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
72
- });
73
- setScrollableListViewItems(filtered);
74
- };
75
- var onChangeInput = function onChangeInput(input) {
76
- setValue(input);
77
- filterItems(input);
78
- };
79
- return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.SearchField, {
80
- value: value,
81
- onChange: onChangeInput
82
- }), (0, _react2.jsx)(_index.ScrollBox, {
83
- maxHeight: 450,
84
- hasShadows: true
85
- }, (0, _react2.jsx)(_index.ListView, {
86
- items: scrollableListViewItems
87
- }, function (item) {
88
- return (0, _react2.jsx)(_reactStately.Item, {
89
- key: item.name,
90
- textValue: item.name,
91
- listItemProps: {
92
- variant: 'listViewItem.styledListItem'
93
- }
94
- }, (0, _react2.jsx)(_index.StyledListItem, {
95
- details: {
96
- icon: _FormSelectIcon["default"],
97
- text: item.name
98
- }
99
- }, (0, _react2.jsx)(_index.ListItemEditButton, null), (0, _react2.jsx)(_index.ListItemMenu, null, (0, _react2.jsx)(_reactStately.Item, {
100
- key: "enable"
101
- }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
102
- key: "disable"
103
- }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
104
- key: "delete"
105
- }, "Delete user"))));
106
- })));
107
- };
108
- exports.ScrollableListView = ScrollableListView;
@@ -1,126 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.items = void 0;
9
- var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
10
- var _FormSelectIcon = _interopRequireDefault(require("@pingux/mdi-react/FormSelectIcon"));
11
- var items = [{
12
- email: 'dburkitt5@columbia.edu',
13
- firstName: 'Nicola',
14
- lastName: 'Burkitt',
15
- hasIcon: true,
16
- icon: _AccountIcon["default"],
17
- linkProps: {
18
- href: 'https://pingidentity.com/'
19
- }
20
- }, {
21
- email: 'idixie2@elegantthemes.com',
22
- firstName: 'Cacilia',
23
- lastName: 'Dixie',
24
- hasIcon: true,
25
- icon: _FormSelectIcon["default"],
26
- linkProps: {
27
- href: 'https://pingidentity.com/'
28
- }
29
- }, {
30
- email: 'dfowler0@rambler.ru',
31
- firstName: 'Stavro',
32
- lastName: 'Fowler',
33
- hasIcon: true,
34
- icon: _AccountIcon["default"],
35
- linkProps: {
36
- href: 'https://pingidentity.com/'
37
- }
38
- }, {
39
- email: 'jgolde8@jimdo.com',
40
- firstName: 'Celisse',
41
- lastName: 'Golde',
42
- hasIcon: true,
43
- icon: _FormSelectIcon["default"]
44
- }, {
45
- email: 'shearst9@answers.com',
46
- firstName: 'Jeth',
47
- lastName: 'Hearst',
48
- hasIcon: true,
49
- icon: _AccountIcon["default"],
50
- linkProps: {
51
- href: 'https://pingidentity.com/'
52
- }
53
- }, {
54
- email: 'ajinaa@mapquest.com',
55
- firstName: 'Kaycee',
56
- lastName: 'Jina',
57
- hasIcon: true,
58
- icon: _AccountIcon["default"],
59
- linkProps: {
60
- href: 'https://pingidentity.com/'
61
- }
62
- }, {
63
- email: 'vmalster4@biblegateway.com',
64
- firstName: 'Lorry',
65
- lastName: 'Malster',
66
- hasIcon: true,
67
- icon: _AccountIcon["default"],
68
- linkProps: {
69
- href: 'https://pingidentity.com/'
70
- }
71
- }, {
72
- email: 'yphipp6@yellowpages.com',
73
- firstName: 'Stanley',
74
- lastName: 'Phipp',
75
- hasIcon: true,
76
- icon: _AccountIcon["default"],
77
- linkProps: {
78
- href: 'https://pingidentity.com/'
79
- }
80
- }, {
81
- email: 'mskilbeck3@bbc.co.uk',
82
- firstName: 'Gradey',
83
- lastName: 'Skilbeck',
84
- hasIcon: true,
85
- icon: _AccountIcon["default"],
86
- linkProps: {
87
- href: 'https://pingidentity.com/'
88
- }
89
- }, {
90
- email: 'dstebbing1@msu.edu',
91
- firstName: 'Marnia',
92
- lastName: 'Stebbing',
93
- hasIcon: true,
94
- icon: _AccountIcon["default"],
95
- linkProps: {
96
- href: 'https://pingidentity.com/'
97
- }
98
- }, {
99
- email: 'lsterley7@lulu.com',
100
- firstName: 'Joshua',
101
- lastName: 'Sterley',
102
- hasIcon: true,
103
- icon: _AccountIcon["default"],
104
- linkProps: {
105
- href: 'https://pingidentity.com/'
106
- }
107
- }, {
108
- email: 'luttleyb@hugedomains.com',
109
- firstName: 'Jarrod',
110
- lastName: 'Uttley',
111
- hasIcon: true,
112
- icon: _AccountIcon["default"],
113
- linkProps: {
114
- href: 'https://pingidentity.com/'
115
- }
116
- }, {
117
- email: 'lidelc@yelp.com',
118
- firstName: 'Andromache',
119
- lastName: 'Idel',
120
- hasIcon: true,
121
- icon: _AccountIcon["default"],
122
- linkProps: {
123
- href: 'https://pingidentity.com/'
124
- }
125
- }];
126
- exports.items = items;
@@ -1,41 +0,0 @@
1
- "use strict";
2
-
3
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
5
- _Object$defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.stringOrStringArray = exports.funcArg = exports.docArgTypes = exports.booleanArg = void 0;
9
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
10
- var _context;
11
- var docArgTypes = {
12
- bool: 'boolean',
13
- node: 'node',
14
- string: 'string',
15
- stringArray: 'string[]',
16
- text: 'text',
17
- func: 'func',
18
- object: 'object'
19
- };
20
- exports.docArgTypes = docArgTypes;
21
- var stringOrStringArray = (0, _concat["default"])(_context = "".concat(docArgTypes.string, " | ")).call(_context, docArgTypes.stringArray);
22
- exports.stringOrStringArray = stringOrStringArray;
23
- var booleanArg = {
24
- control: {
25
- type: docArgTypes.bool
26
- },
27
- defaultValue: false,
28
- type: {
29
- summary: docArgTypes.bool
30
- }
31
- };
32
- exports.booleanArg = booleanArg;
33
- var funcArg = {
34
- control: {
35
- type: null
36
- },
37
- type: {
38
- summary: docArgTypes.func
39
- }
40
- };
41
- exports.funcArg = funcArg;